RackHD/on-web-ui

<div class="app-file">

  <inventory-header [allItems]="allFiles"
    [name]="'File'"
    (action)="onAction($event)" (filter)="onFilter($event)">
  </inventory-header>

  <div class="inventory">
    <clr-datagrid [clrDgLoading]="dgDataLoading" [(clrDgSelected)]="selectedFiles">
      <clr-dg-placeholder>{{ dgPlaceholder }}</clr-dg-placeholder>
      <clr-dg-column>
        <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]="filenameComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">FileName</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="filenameFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="basenameComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">BaseName</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="basenameFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="versionComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">Version</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="versionFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">md5</ng-container>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">sha256</ng-container>
      </clr-dg-column>

      <clr-dg-row *clrDgItems="let file of filesStore" [clrDgItem]="file">
        <clr-dg-action-overflow>
          <button class="action-item" (click)="onUpdate(file)">Update</button>
          <button class="action-item" (click)="onDelete(file)">Delete</button>
          <button class="action-item" (click)="onGetDetails(file)">Metadata</button>
          <button class="action-item" (click)="onGetRawData(file)">Rawdata</button>
        </clr-dg-action-overflow>
        <clr-dg-cell >{{file.uuid}}</clr-dg-cell>
        <clr-dg-cell>{{file.filename}}</clr-dg-cell>
        <clr-dg-cell>{{file.basename}}</clr-dg-cell>
        <clr-dg-cell>{{file.version}}</clr-dg-cell>
        <clr-dg-cell>{{file.md5}}</clr-dg-cell>
        <clr-dg-cell>{{file.sha256}}</clr-dg-cell>
      </clr-dg-row>

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

    <div class="selected">
      Selected Files:
      <span *ngFor="let file of selectedFiles; let isLast = last">
        {{file? file.filename : null}}{{isLast ? '' : ', '}}
      </span>
    </div>
  </div>

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

  <confirm-modal *ngIf="action === 'Delete'" [(isPop)]="isShowModal"
    title="files" (confirm)="onConfirm($event)" [data]="selectedFiles" displayAttr="filename">
  </confirm-modal>

  <clr-modal *ngIf="modalTypes.formActions.indexOf(action) !== -1"
    [(clrModalOpen)]="isShowModal"
    [clrModalSize]="'xl'">
    <h3 class="modal-title">{{action}} file 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>