RackHD/on-web-ui

<div class="app-catalogs">

  <inventory-header [allItems]="allCatalogs"
    [isDeleteRequired]="false" [isCreateRequired]="false" [name]="'Catalog'"
    (action)="onAction($event)" (filter)="onFilter($event)">
  </inventory-header>

  <div class="inventory">
    <clr-datagrid [clrDgLoading]="dgDataLoading">
      <clr-dg-placeholder>{{ dgPlaceholder }}</clr-dg-placeholder>
      <clr-dg-column [clrDgSortBy]="idComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">ID</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="idFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="nodeComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">Node</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="nodeFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="sourceComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">Source</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="sourceFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="createTimeComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">CreatedAt</ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="updateTimeComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">UpdatedAt</ng-container>
      </clr-dg-column>

      <clr-dg-row *clrDgItems="let catalog of catalogsStore" [clrDgItem]="catalog">
        <clr-dg-cell >{{catalog.id}}</clr-dg-cell>
        <clr-dg-cell >{{catalog.node.split('/')[4]}}</clr-dg-cell>
        <clr-dg-cell >{{catalog.source}}</clr-dg-cell>
        <clr-dg-cell >{{catalog.createdAt}}</clr-dg-cell>
        <clr-dg-cell >{{catalog.updatedAt}}</clr-dg-cell>
        <clr-dg-action-overflow>
            <button class="action-item" (click)="goToDetail(catalog)">Details</button>
        </clr-dg-action-overflow>
      </clr-dg-row>
      <clr-dg-footer>
        <inventory-footer></inventory-footer>
      </clr-dg-footer>
    </clr-datagrid>

    <details-modal [(isPop)]="isShowDetail" [data]="selectedCatalog"
      [title]="selectedCatalog && selectedCatalog.source">
    </details-modal>
  </div>

</div>