RackHD/on-web-ui

<div class="template-app">

  <inventory-header [allItems]="allTemplates" [name]="'Template'"
    [isDeleteRequired]="false"
    (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>ID
        <clr-dg-string-filter [clrDgStringFilter]="idFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="nameComparator">Name
        <clr-dg-string-filter [clrDgStringFilter]="nameFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="scopeComparator">Scope
        <clr-dg-string-filter [clrDgStringFilter]="scopeFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column>Hash</clr-dg-column>

      <clr-dg-row *clrDgItems="let template of templatesStore" [clrDgItem]="template">
        <clr-dg-action-overflow>
          <button class="action-item" (click)="onUpdate(template)">Update</button>
          <button class="action-item" (click)="onGetDetails(template)">Metadata</button>
          <button class="action-item" (click)="onGetRawData(template)">Rawdata</button>
        </clr-dg-action-overflow>
        <clr-dg-cell >{{template.id}}</clr-dg-cell>
        <clr-dg-cell>{{template.name}}</clr-dg-cell>
        <clr-dg-cell>{{template.scope}}</clr-dg-cell>
        <clr-dg-cell>{{template.hash}}</clr-dg-cell>
      </clr-dg-row>

      <clr-dg-footer>
        <inventory-footer></inventory-footer>
      </clr-dg-footer>
    </clr-datagrid>
  </div>

  <details-modal *ngIf="modalTypes.detailActions.indexOf(action) !== -1"
    [(isPop)]="isShowModal" [dataType]="action + 'data'" [title]="selectedTemplate.name"
    [isJson]="action==='Meta'" [data]="rawData">
  </details-modal>

  <clr-modal *ngIf="modalTypes.formActions.indexOf(action) !== -1"
    [(clrModalOpen)]="isShowModal"
    [clrModalSize]="'xl'">
    <h3 class="modal-title">{{action}} template to RackHD</h3>
    <div class="modal-body">
      <label for="fileInput">Choose File</label>
      <input type="file" (change)="onChange($event)" id="fileInput">
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" type="button" (click)="onCreateSubmit()">Upload</button>
    </div>
  </clr-modal>

</div>