dc/client/src/app/shared/dc-tree/dc-tree.component.html

<clr-tree>
  @if (libraryList) {
    <clr-tree-node class="search-node">
      <div class="tree-search-wrapper">
        <input
          appStealFocus
          clrInput
          #searchLibTreeInput
          placeholder="Libraries"
          name="input"
          [(ngModel)]="librariesSearch"
          (keyup)="libraryOnFilter()"
          autocomplete="off"
        />
        @if (searchLibTreeInput.value.length < 1) {
          <clr-icon shape="search"></clr-icon>
        }
        @if (searchLibTreeInput.value.length > 0) {
          <clr-icon
            (click)="librariesSearch = ''; libraryOnFilter()"
            shape="times"
          ></clr-icon>
        }
      </div>
    </clr-tree-node>
  }

  @for (library of libraryList; track library) {
    @if (!library['hidden'] && library['inForeground']) {
      <clr-tree-node
        #libTreeNode
        (click)="treeNodeClicked($event, library, libraryList)"
        [(clrExpanded)]="library['expanded']"
        [clrLoading]="library['loadingTables'] && !library.tables"
        [class.clr-expanded]="library['expanded']"
      >
        <p
          (click)="
            lib = library.LIBRARYID;
            libraryOnClick(lib || '', library, libTreeNode)
          "
          class="m-0 cursor-pointer"
        >
          <clr-icon shape="rack-server"></clr-icon>
          {{ library.LIBRARYNAME }}
        </p>
        @if (library['tables']) {
          <clr-tree-node class="search-node">
            <div class="tree-search-wrapper">
              <input
                appStealFocus
                clrInput
                #searchTreeInput
                placeholder="Tables"
                name="input"
                [(ngModel)]="library['searchString']"
                (keyup)="treeOnFilter(library, 'tables')"
                autocomplete="off"
              />
              @if (searchTreeInput.value.length < 1) {
                <clr-icon shape="search"></clr-icon>
              }
              @if (searchTreeInput.value.length > 0) {
                <clr-icon
                  (click)="
                    searchTreeInput.value = '';
                    library['searchString'] = '';
                    treeOnFilter(library, 'tables.TABLENAME')
                  "
                  shape="times"
                ></clr-icon>
              }
            </div>
          </clr-tree-node>
        }
        @for (
          libTable of library['tables'];
          track libTable;
          let index = $index
        ) {
          <clr-tree-node
            (click)="treeNodeClicked($event, libTable, library['tables'])"
            [(clrExpanded)]="libTable['expanded']"
            [clrLoading]="libTable['loadingColumns'] && !libTable.columns"
            [class.clr-expanded]="libTable['expanded']"
          >
            <clr-tooltip
              *ngVar="
                index + 1 >
                licenceState.value.tables_in_library_limit as tableLocked
              "
            >
              <button
                clrTooltipTrigger
                (click)="
                  !tableLocked
                    ? tableOnClick(libTable.TABLEURI, libTable, library)
                    : ''
                "
                class="clr-treenode-link"
                [class.dc-locked-control]="tableLocked"
                [class.active]="libTabActive(library.LIBRARYREF, libTable)"
              >
                @switch (libTable.includes('-FC')) {
                  @case (true) {
                    <clr-icon shape="bolt"></clr-icon>
                  }
                  @case (false) {
                    <clr-icon shape="table"></clr-icon>
                  }
                }
                {{ libTable.replace('-FC', '') }}
              </button>
              <clr-tooltip-content
                clrPosition="bottom-right"
                clrSize="lg"
                *clrIfOpen
              >
                @if (tableLocked) {
                  <span>
                    To unlock all tables, contact support&#64;datacontroller.io
                  </span>
                }
              </clr-tooltip-content>
              @if (hasColumns) {
                @if (libTable['columns']) {
                  <clr-tree-node class="search-node">
                    <div class="tree-search-wrapper">
                      <input
                        appStealFocus
                        clrInput
                        #searchTreeInput
                        placeholder="Columns"
                        name="input"
                        [(ngModel)]="libTable['searchString']"
                        (keyup)="treeOnFilter(libTable, 'columns.COLNAME')"
                        autocomplete="off"
                      />
                      @if (searchTreeInput.value.length < 1) {
                        <clr-icon shape="search"></clr-icon>
                      }
                      @if (searchTreeInput.value.length > 0) {
                        <clr-icon
                          (click)="
                            searchTreeInput.value = '';
                            libTable['searchString'] = '';
                            treeOnFilter(libTable, 'columns.COLNAME')
                          "
                          shape="times"
                        ></clr-icon>
                      }
                    </div>
                  </clr-tree-node>
                }
                @for (libColumn of libTable['columns']; track libColumn) {
                  <clr-tree-node>
                    <button
                      (click)="columnOnClick(libColumn, library, libTable)"
                      class="clr-treenode-link"
                      [class.column-active]="libColumnActive(libColumn.COLURI)"
                    >
                      <clr-icon shape="objects"></clr-icon>
                      {{ libColumn.COLNAME }}
                    </button>
                  </clr-tree-node>
                }
              }
            </clr-tooltip>
          </clr-tree-node>
        }
      </clr-tree-node>
    }
  }
</clr-tree>

@if (librariesPaging) {
  <div class="w-100 text-center">
    <span class="spinner spinner-sm"> Loading... </span>
  </div>
}