dc/client/src/app/metadata/metadata.component.html

<app-sidebar>
  <div class="repo-dropdown">
    <clr-select-container>
      <label>Metadata Repository</label>
      <select
        clrSelect
        id="repository"
        [(ngModel)]="repository"
        (change)="updateSelectedRepository()"
      >
        <option
          *ngFor="let repository of repositories"
          value="{{ repository }}"
        >
          {{ repository }}
        </option>
      </select>
    </clr-select-container>
  </div>

  <clr-tree>
    <clr-tree-node *ngIf="metaDataList" class="search-node">
      <div class="tree-search-wrapper">
        <input
          appStealFocus
          clrInput
          #searchLibTreeInput
          placeholder="search SAS Types"
          name="input"
          [(ngModel)]="metaDataSearch"
          (keyup)="metaListOnFilter()"
          autocomplete="off"
        />
        <clr-icon
          *ngIf="searchLibTreeInput.value.length < 1"
          shape="search"
        ></clr-icon>
        <clr-icon
          *ngIf="searchLibTreeInput.value.length > 0"
          (click)="metaDataSearch = ''; metaListOnFilter()"
          shape="times"
        ></clr-icon>
      </div>
    </clr-tree-node>
    <ng-container *ngFor="let metaData of metaDataList">
      <clr-tree-node
        (click)="treeNodeClicked($event, metaData, metaDataList)"
        *ngIf="!metaData['hidden']"
        [(clrExpanded)]="metaData['expanded']"
        [clrLoading]="metaData['loadingTables'] && !metaData.tables"
      >
        <p
          (click)="
            metaDataId = metaData.ID; metaDataOnClick(metaDataId, metaData)
          "
          class="m-0 cursor-pointer"
        >
          <clr-icon shape="block"></clr-icon>
          {{ metaData.ID }}
        </p>
      </clr-tree-node>
    </ng-container>
  </clr-tree>
</app-sidebar>

<div class="content-area">
  <div class="card background-transparent-i">
    <h3 class="color-gray">{{ assoTypeSelected }}</h3>

    <div *ngIf="!loading && !metaObjectList" class="no-table-selected">
      <clr-icon
        shape="warning-standard"
        size="60"
        class="is-info icon-dc-fill"
      ></clr-icon>
      <p class="text-center color-gray mt-10" cds-text="section">
        Please select a type
      </p>
    </div>

    <div class="loadingSpinner" *ngIf="loading">
      <span class="spinner"> Loading... </span>
      <div *ngIf="loading">
        <h4 *ngIf="metatypesLoading">Loading metadata types</h4>
        <h4 *ngIf="!metatypesLoading">Loading metadata objects</h4>
      </div>
    </div>
    <div *ngIf="showData" class="clr-row clr-flex-grow-1">
      <div class="clr-col-6">
        <div *ngIf="metaObjectList && !objectRoute" class="search-input">
          <input
            clrInput
            #searchObjTreeInput
            placeholder="search"
            name="input"
            [(ngModel)]="metaObjectSearch"
            (keyup)="metaObjectOnFilter()"
            autocomplete="off"
          />
        </div>
        <br />
        <div *ngIf="!objectView" class="objects-col">
          <clr-accordion>
            <ng-container *ngFor="let metaObject of metaObjectShowList">
              <clr-accordion-panel
                (clrAccordionPanelOpenChange)="
                  $event ? panelChange($event, metaObject) : ''
                "
                *ngIf="!metaObject['hidden']"
              >
                <clr-accordion-title
                  ><clr-icon shape="rack-server"></clr-icon>
                  {{ metaObject.NAME }}
                  <p class="float-right">{{ metaObject.ID }}</p>
                </clr-accordion-title>
                <clr-accordion-content *clrIfExpanded>
                  <clr-tree *ngIf="showAcc" [clrLazy]="true">
                    <clr-tree-node
                      *clrRecursiveFor="
                        let entry of root$ | async;
                        getChildren: getChildren
                      "
                      [clrExpandable]="true"
                    >
                      <div
                        [class.object-header]="!entry.count"
                        class="full-width"
                      >
                        <div>
                          <clr-icon
                            *ngIf="!entry.count"
                            shape="rack-server"
                          ></clr-icon>
                          <clr-icon
                            *ngIf="entry.count"
                            shape="block"
                          ></clr-icon>
                          {{ entry.display }}
                        </div>

                        <p class="float-right object-uri" *ngIf="!entry.count">
                          {{ entry.URI }}
                        </p>
                      </div>
                    </clr-tree-node>
                  </clr-tree>
                </clr-accordion-content>
              </clr-accordion-panel>
            </ng-container>
          </clr-accordion>
        </div>

        <div *ngIf="objectView" class="objects-col">
          <ng-container *ngFor="let metaObject of metaObjectShowList">
            <div class="cols-head">
              <clr-icon shape="rack-server"></clr-icon>
              <div class="object-text">
                <p class="m-0 word-break mr-20">
                  {{ metaObject.NAME }}
                </p>
                <p class="float-right ml-3">
                  {{ metaObject.ID }}
                </p>
              </div>
            </div>
            <clr-tree *ngIf="showAcc" [clrLazy]="true">
              <clr-tree-node
                *clrRecursiveFor="
                  let entry of root$ | async;
                  getChildren: getChildren
                "
                [clrExpandable]="true"
              >
                <div [class.object-header]="!entry.count" class="full-width">
                  <div>
                    <clr-icon
                      *ngIf="!entry.count"
                      shape="rack-server"
                    ></clr-icon>
                    <clr-icon *ngIf="entry.count" shape="block"></clr-icon>
                    {{ entry.display }}
                  </div>

                  <p class="float-right object-uri" *ngIf="!entry.count">
                    {{ entry.URI }}
                  </p>
                </div>
              </clr-tree-node>
            </clr-tree>
          </ng-container>
        </div>
      </div>

      <div class="clr-col-6 text-center">
        <h3>{{ assoObjectSelected }}</h3>
        <clr-datagrid class="datagrid-custom-footer" *ngIf="showTable">
          <clr-dg-column>
            TYPE
            <clr-dg-string-filter
              [clrDgStringFilter]="typeFilter"
            ></clr-dg-string-filter>
          </clr-dg-column>
          <clr-dg-column>
            NAME
            <clr-dg-string-filter
              [clrDgStringFilter]="nameFilter"
            ></clr-dg-string-filter>
          </clr-dg-column>
          <clr-dg-column>
            VALUE
            <clr-dg-string-filter
              [clrDgStringFilter]="valueFilter"
            ></clr-dg-string-filter>
          </clr-dg-column>
          <clr-dg-row
            *clrDgItems="let metaObjectAttribute of metaObjectAttributes"
          >
            <clr-dg-cell>{{ metaObjectAttribute.TYPE }}</clr-dg-cell>
            <clr-dg-cell>{{ metaObjectAttribute.NAME }}</clr-dg-cell>
            <clr-dg-cell>{{ metaObjectAttribute.VALUE }}</clr-dg-cell>
          </clr-dg-row>
          <clr-dg-footer>
            <clr-dg-pagination #pagination [clrDgPageSize]="10">
              <clr-dg-page-size [clrPageSizeOptions]="[10, 20, 50, 100]"
                >Attributes per page</clr-dg-page-size
              >
              {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
              {{ pagination.totalItems }} Attributes
            </clr-dg-pagination>
          </clr-dg-footer>
        </clr-datagrid>
      </div>
    </div>
  </div>
</div>