dees-catalog/ts_web/elements/dees-appui-base.ts

import {
  DeesElement,
  type TemplateResult,
  property,
  customElement,
  html,
  css,
  cssManager,
  state,
} from '@design.estate/dees-element';
import * as interfaces from './interfaces/index.js';
import type { DeesAppuiBar } from './dees-appui-appbar.js';
import type { DeesAppuiMainmenu } from './dees-appui-mainmenu.js';
import type { DeesAppuiMainselector } from './dees-appui-mainselector.js';
import type { DeesAppuiMaincontent } from './dees-appui-maincontent.js';
import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';
import { demoFunc } from './dees-appui-base.demo.js';

// Import child components
import './dees-appui-appbar.js';
import './dees-appui-mainmenu.js';
import './dees-appui-mainselector.js';
import './dees-appui-maincontent.js';
import './dees-appui-activitylog.js';

@customElement('dees-appui-base')
export class DeesAppuiBase extends DeesElement {
  public static demo = demoFunc;

  // Properties for appbar
  @property({ type: Array })
  public appbarMenuItems: interfaces.IAppBarMenuItem[] = [];

  @property({ type: String })
  public appbarBreadcrumbs: string = '';

  @property({ type: String })
  public appbarBreadcrumbSeparator: string = ' > ';

  @property({ type: Boolean })
  public appbarShowWindowControls: boolean = true;


  @property({ type: Object })
  public appbarUser?: {
    name: string;
    avatar?: string;
    status?: 'online' | 'offline' | 'busy' | 'away';
  };

  @property({ type: Boolean })
  public appbarShowSearch: boolean = false;

  // Properties for mainmenu
  @property({ type: Array })
  public mainmenuTabs: interfaces.ITab[] = [];

  @property({ type: Object })
  public mainmenuSelectedTab?: interfaces.ITab;

  // Properties for mainselector
  @property({ type: Array })
  public mainselectorOptions: interfaces.ISelectionOption[] = [];

  @property({ type: Object })
  public mainselectorSelectedOption?: interfaces.ISelectionOption;

  // Properties for maincontent
  @property({ type: Array })
  public maincontentTabs: interfaces.ITab[] = [];

  // References to child components
  @state()
  public appbar?: DeesAppuiBar;

  @state()
  public mainmenu?: DeesAppuiMainmenu;

  @state()
  public mainselector?: DeesAppuiMainselector;

  @state()
  public maincontent?: DeesAppuiMaincontent;

  @state()
  public activitylog?: DeesAppuiActivitylog;

  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
        position: absolute;
        height: 100%;
        width: 100%;
        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
      }
      .maingrid {
        position: absolute;
        top: 40px;
        height: calc(100% - 40px);
        width: 100%;
        display: grid;
        grid-template-columns: 60px 240px 1fr 240px;
      }
    `,
  ];

  // INSTANCE
  public render(): TemplateResult {
    return html`
      <style></style>
      <dees-appui-appbar
        .menuItems=${this.appbarMenuItems}
        .breadcrumbs=${this.appbarBreadcrumbs}
        .breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
        .showWindowControls=${this.appbarShowWindowControls}
        .user=${this.appbarUser}
        .showSearch=${this.appbarShowSearch}
        @menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
        @breadcrumb-navigate=${(e: CustomEvent) => this.handleAppbarBreadcrumbNavigate(e)}
        @search-click=${() => this.handleAppbarSearchClick()}
        @user-menu-open=${() => this.handleAppbarUserMenuOpen()}
      ></dees-appui-appbar>
      <div class="maingrid">
        <dees-appui-mainmenu
          .tabs=${this.mainmenuTabs}
          .selectedTab=${this.mainmenuSelectedTab}
          @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
        ></dees-appui-mainmenu>
        <dees-appui-mainselector
          .selectionOptions=${this.mainselectorOptions}
          .selectedOption=${this.mainselectorSelectedOption}
          @option-select=${(e: CustomEvent) => this.handleMainselectorOptionSelect(e)}
        ></dees-appui-mainselector>
        <dees-appui-maincontent
          .tabs=${this.maincontentTabs}
        >
          <slot name="maincontent"></slot>
        </dees-appui-maincontent>
        <dees-appui-activitylog></dees-appui-activitylog>
      </div>
    `;
  }

  async firstUpdated() {
    // Get references to child components
    this.appbar = this.shadowRoot.querySelector('dees-appui-appbar');
    this.mainmenu = this.shadowRoot.querySelector('dees-appui-mainmenu');
    this.mainselector = this.shadowRoot.querySelector('dees-appui-mainselector');
    this.maincontent = this.shadowRoot.querySelector('dees-appui-maincontent');
    this.activitylog = this.shadowRoot.querySelector('dees-appui-activitylog');
  }

  // Event handlers for appbar
  private handleAppbarMenuSelect(e: CustomEvent) {
    this.dispatchEvent(new CustomEvent('appbar-menu-select', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  private handleAppbarBreadcrumbNavigate(e: CustomEvent) {
    this.dispatchEvent(new CustomEvent('appbar-breadcrumb-navigate', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  private handleAppbarSearchClick() {
    this.dispatchEvent(new CustomEvent('appbar-search-click', {
      bubbles: true,
      composed: true
    }));
  }

  private handleAppbarUserMenuOpen() {
    this.dispatchEvent(new CustomEvent('appbar-user-menu-open', {
      bubbles: true,
      composed: true
    }));
  }

  // Event handlers for mainmenu
  private handleMainmenuTabSelect(e: CustomEvent) {
    this.mainmenuSelectedTab = e.detail.tab;
    this.dispatchEvent(new CustomEvent('mainmenu-tab-select', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }

  // Event handlers for mainselector
  private handleMainselectorOptionSelect(e: CustomEvent) {
    this.mainselectorSelectedOption = e.detail.option;
    this.dispatchEvent(new CustomEvent('mainselector-option-select', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }
}