RackHD/on-web-ui

<div class="app-obm">

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

  <div class="inventory">
    <clr-datagrid [clrDgLoading]="dgDataLoading" [(clrDgSelected)]="selectedObms">
      <clr-dg-placeholder>{{ dgPlaceholder }}</clr-dg-placeholder>
      <clr-dg-column [clrDgSortBy]="idComparator">ID</clr-dg-column>
      <clr-dg-column [clrDgSortBy]="nodeComparator">Node
        <clr-dg-string-filter [clrDgStringFilter]="nodeFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="serviceComparator">Service
        <clr-dg-string-filter [clrDgStringFilter]="serviceFilter">
        </clr-dg-string-filter>
      </clr-dg-column>
      <clr-dg-column [clrDgSortBy]="configComparator">Config</clr-dg-column>

      <clr-dg-row *clrDgItems="let obm of obmStore" [clrDgItem]="obm">
        <clr-dg-cell>{{obm.id}}</clr-dg-cell>
        <clr-dg-cell>{{obm.node.split('/')[4]}}</clr-dg-cell>
        <clr-dg-cell>{{obm.service}}</clr-dg-cell>
        <!-- <clr-dg-cell>{{obm.config | json}}</clr-dg-cell> -->
        <clr-dg-cell (click)="getChild('config', obm)">
          <u class="grid-item">Config</u>
        </clr-dg-cell>
        <clr-dg-action-overflow>
          <button class="action-item" (click)="onUpdate(obm)">Update</button>
          <button class="action-item" (click)="willDelete(obm)">Delete</button>
          <button class="action-item" (click)="goToDetail(obm)">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 OBMs:
      <span *ngFor="let obm of selectedObms; let isLast = last">
        {{obm? obm.id : null}}{{isLast ? '' : ', '}}
      </span>
    </div>
  </div>

  <details-modal *ngIf="action === 'detail'" [(isPop)]="isShowModal" [data]="selectedObm"
    [title]="'OBM ' + (selectedObm && selectedObm.id)">
  </details-modal>

  <details-modal *ngIf="action === 'Config'" [(isPop)]="isShowModal" [data]="rawData"
    [dataType]="action" [title]="'OBM ' + (selectedObm && selectedObm.id)">
  </details-modal>

  <clr-modal *ngIf="action==='update' || action==='create'"
    [(clrModalOpen)]="isShowModal" [clrModalSize]="'md'">
    <h3 class="modal-title">{{action | titlecase}} OBM</h3>
    <div class="modal-body">
      <form [formGroup]="obmForm" novalidate>
        <section class="form-block">
          <div class="form-group node-dropdown">
            <dropdown-group *ngIf="action==='create'" [data]="allNodes"
              [fields]="['id']" [labels]="['NodeId']" [columns]="[12]"
              [needReset]="false" [isDefaultForm]="true" [widths]="[28]"
              (selected)="onNodeSelected($event)" (cleared)="onNodeClear()">
            </dropdown-group>
          </div>

          <div *ngIf="action==='update'" class="form-group">
            <label for="nodeId"><b>NodeId</b></label>
            <input type="text" id="nodeId" formControlName="nodeId" class="align-width">
          </div>

          <div class="form-group">
            <label for="serviceField"><b>Service</b></label>
            <div class="select align-width">
              <select id="serviceField" formControlName="service" (change)="onServiceSelected()">
                <option selected hidden></option>
                <option *ngFor="let service of obmTypes;">{{ service }}</option>
              </select>
            </div>
          </div>

          <div *ngIf="selObmService">
            <div *ngFor="let field of configFields" class="form-group">
              <label [for]="'id_' + field"><b>{{field | titlecase}}</b></label>
              <input type="text" [id]="'id_' + field" [formControlName]="field" class="align-width"
                [placeholder]="selObmService && selObmService.config[field].default || '[]'">
            </div>
          </div>

        </section>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline" (click)="closeUpsertModal()">Cancel</button>
      <button type="button" class="btn btn-primary" (click)="onUpsert();closeUpsertModal()"
        [disabled]="!selObmService || obmForm.invalid || !selNodeId">OK</button>
    </div>
  </clr-modal>

  <confirm-modal *ngIf="action === 'delete'" [(isPop)]="isShowModal" title="OBMs"
    (confirm)="onConfirm($event)" [data]="selectedObms">
  </confirm-modal>

</div>