RackHD/on-web-ui

<div class="app-sku">

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

  <div class="inventory">
    <clr-datagrid [clrDgLoading]="dgDataLoading" [(clrDgSelected)]="selectedSkus">
      <clr-dg-placeholder>{{ dgPlaceholder }}</clr-dg-placeholder>
      <clr-dg-column [clrDgSortBy]="idComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">ID</ng-container>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="nameComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">Name</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="nameFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="discoveryGraphNameComparator">
        <ng-container *clrDgHideableColumn="{hidden: false}">DiscoveryGraphName</ng-container>
        <clr-dg-string-filter [clrDgStringFilter]="discoveryGraphNameFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">DiscoveryGraphOptions</ng-container>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">Rules</ng-container>
      </clr-dg-column>
      <clr-dg-column>
        <ng-container *clrDgHideableColumn="{hidden: false}">SkuConfig</ng-container>
      </clr-dg-column>

      <clr-dg-row *clrDgItems="let sku of skuStore" [clrDgItem]="sku">
        <clr-dg-cell>{{sku.id}}</clr-dg-cell>
        <clr-dg-cell>{{sku.name}}</clr-dg-cell>
        <clr-dg-cell>{{sku.discoveryGraphName}}</clr-dg-cell>
        <clr-dg-cell (click)="getChild('discoveryGraphOptions', sku)">
          <u *ngIf="sku.discoveryGraphOptions" class="grid-item">DiscoveryGraphOptions</u>
        </clr-dg-cell>
        <clr-dg-cell (click)="getChild('rules', sku)">
          <u *ngIf="sku.rules" class="grid-item">Rules</u>
        </clr-dg-cell>
        <clr-dg-cell (click)="getChild('skuConfig', sku)">
          <u *ngIf="sku.skuConfig" class="grid-item">Configures</u>
        </clr-dg-cell>
        <clr-dg-action-overflow>
          <button class="action-item" (click)="willUpdate(sku)">Update</button>
          <button class="action-item" (click)="willDelete(sku)">Delete</button>
          <button class="action-item" (click)="goToDetail(sku)">Details</button>
        </clr-dg-action-overflow>
      </clr-dg-row>
      <clr-dg-footer>
        <inventory-footer></inventory-footer>
      </clr-dg-footer>
    </clr-datagrid>

    <div class="selected">
      Selected SKUs:
      <span *ngFor="let sku of selectedSkus; let isLast = last">
        {{sku? sku.id : null}}{{isLast ? '' : ', '}}
      </span>
  </div>

  <details-modal [(isPop)]="isShowDetail" [data]="selectedSku"
    [title]="'SKU ' + (selectedSku && selectedSku.id)">
  </details-modal>

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

  <clr-modal *ngIf="isCreateSku" [(clrModalOpen)]="isCreateSku" [clrModalSize]="'lg'">
    <h3 class="modal-title" *ngIf="!updateTheSku">Create SKU</h3>
    <h3 class="modal-title" *ngIf="updateTheSku">Update SKU</h3>
    <div class="modal-body">
      <div class="form-group">
          <label>Choose how to create sku</label>
          <div class="radio-inline">
              <input type="radio" name="gridRadios" id="skuPack" [checked]='!isSkuOnly' (change)="onRadioChange()">
              <label for="skuPack">SKU pack</label>
          </div>
          <div class="radio-inline">
              <input type="radio" name="gridRadios" id="skuOnly" [checked]='isSkuOnly' (change)="onRadioChange()">
              <label for="skuOnly">SKU only</label>
          </div>
      </div>
      <div *ngIf="!isSkuOnly" class="form-group">
        <label for="fileInput">Choose File</label>
        <input type="file" (change)="onChange($event)" id="fileInput">
      </div>
      <form *ngIf="isSkuOnly" [formGroup]="skuForm" novalidate>
        <section class="form-block">
          <div class="form-group">
            <label  class=" required " >name</label>
            <label for="formFileds_1"
                   aria-haspopup="true"
                   role="tooltip"
                   class="tooltip tooltip-validation tooltip-sm tooltip-bottom-left"
                   [class.invalid]= "skuForm.get('name').invalid">
              <input id="formFileds_1" type="text"
                     formControlName="name">
              <span class="tooltip-content">
                    Name is required.
                </span>
            </label>

          </div>
          <div class="form-group">
            <label  for="formFileds_2">discoveryGraphName</label>
            <input type="text" id="formFileds_2" formControlName="discoveryGraphName">
          </div>
          <div class="form-group">
            <label class="required" for="formFileds_3">rules</label>
            <textarea id="formFileds_3" rows="6" placeholder='[{
                "path": "ohai.dmi.system.product_name",
                "contains": "D51B-2U"
                },{
                "path": "ohai.dmi.system.manufacturer",
                "contains": "Quanta"
                }]' formControlName="rules"></textarea>
            <div class="alertMessage " *ngIf="!rulesJsonValid">
              Invalid rules payload: not json or no property: "path"
            </div>
          </div>
          <div class="form-group">
            <label for="formFileds_4" >discoveryGraphOptions</label>
            <textarea  cid ="formFileds_4" rows="4" placeholder='{}' formControlName="discoveryGraphOptions"></textarea>
            <div class="alertMessage" *ngIf="!optionsJsonValid">
                Invalid JSON payload.
            </div>
          </div>
        </section>
      </form>
      <div *ngIf="isSkuOnly">
        <clr-icon shape="info-standard" class="is-warning" size="24"></clr-icon> INFO : If you want to change the "SkuConfig" please use the SKU PACK.
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" (click)="isCreateSku = false; rulesJsonValid = true; optionsJsonValid = true ">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="isSkuOnly ? createSku() : createSkupack();" [disabled]="(skuForm.invalid&&isSkuOnly) || (!isCreateSku)">OK</button>
    </div>
  </clr-modal>

  <confirm-modal [(isPop)]="isDelete" title="SKUs" displayAttr="name"
    (confirm)="onConfirm($event)" [data]="selectedSkus">
  </confirm-modal>

</div>