helix-front/client/app/shared/node-viewer/node-viewer.component.html

<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<section
  class="node-viewer"
  fxLayout="column"
  fxLayoutAlign="center center"
  fxLayoutGap="10px"
>
  <mat-progress-bar
    *ngIf="loadingIndicator"
    mode="indeterminate"
  ></mat-progress-bar>
  <mat-button-toggle-group #group="matButtonToggleGroup" value="table">
    <mat-button-toggle value="table"> Table View </mat-button-toggle>
    <mat-button-toggle value="json"> JSON View </mat-button-toggle>
  </mat-button-toggle-group>
  <section class="viewer" [ngSwitch]="group.value" fxFlexFill>
    <ngx-json-viewer *ngSwitchCase="'json'" [json]="obj"></ngx-json-viewer>
    <section *ngSwitchCase="'table'">
      <!-- TODO vxu: use mat-simple-table when it's available -->

      <section fxLayout="row" fxLayoutAlign="center center">
        <span fxFlex="1 1 auto"></span>
        <mat-icon>search</mat-icon>
        <mat-form-field class="search-form-field">
          <input
            matInput
            placeholder="Type to filter the fields..."
            (keyup)="updateFilter($event)"
          />
        </mat-form-field>
        <span fxFlex="1 1 auto"></span>
        <button
          mat-button
          *ngIf="unlockable"
          (click)="editable = !editable"
          [matTooltip]="
            editable
              ? 'Click to prevent further changes'
              : 'Click to make changes'
          "
        >
          <mat-icon>{{ editable ? 'lock_open' : 'lock' }}</mat-icon>
          {{ editable ? 'Unlocked' : 'Locked' }}
        </button>
      </section>

      <mat-card>
        <mat-card-header>
          <mat-card-title>
            Simple Fields
            <span *ngIf="simpleConfigs.length == 0">is empty.</span>
            <span *ngIf="keyword" class="primary">(filtered)</span>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <hi-data-table
            *ngIf="simpleConfigs.length || editable"
            [rows]="simpleConfigs"
            [sorts]="sorts"
            [columns]="columns.simpleConfigs"
            [deletable]="editable"
            [insertable]="editable"
            (update)="edited('simple', $event)"
            (create)="created('simple', $event)"
            (delete)="onDelete('simple', $event.row)"
          >
          </hi-data-table>
        </mat-card-content>
      </mat-card>

      <mat-card>
        <mat-card-header>
          <mat-card-title>
            List Fields
            <span *ngIf="listConfigs.length == 0">is empty.</span>
            <span *ngIf="keyword" class="primary">(filtered)</span>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <ngx-datatable
            *ngIf="listConfigs.length || editable"
            #listTable
            class="material"
            [headerHeight]="headerHeight"
            rowHeight="auto"
            [footerHeight]="headerHeight"
            columnMode="force"
            [rows]="listConfigs"
            [sorts]="sorts"
            [limit]="10"
          >
            <ngx-datatable-column
              *ngIf="editable"
              [width]="40"
              [resizeable]="false"
              [draggable]="false"
              [canAutoResize]="false"
            >
              <ng-template let-row="row" ngx-datatable-cell-template>
                <button
                  mat-icon-button
                  class="delete-button"
                  matTooltip="Click to delete"
                  (click)="beforeDelete('list', row)"
                >
                  <mat-icon>delete_forever</mat-icon>
                </button>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column
              name="Name"
              [width]="80"
              [cellClass]="getNameCellClass"
            ></ngx-datatable-column>
            <ngx-datatable-column name="Value" [width]="400">
              <ng-template
                let-row="row"
                let-value="value"
                ngx-datatable-cell-template
              >
                <hi-data-table
                  [rows]="value"
                  [sorts]="sorts"
                  [columns]="columns.listConfigs"
                  [deletable]="editable"
                  [insertable]="editable"
                  (update)="edited('list', $event, row.name)"
                  (create)="created('list', $event, row.name)"
                  (delete)="edited('list', $event, row.name, true)"
                >
                </hi-data-table>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-footer>
              <ng-template
                ngx-datatable-footer-template
                let-rowCount="rowCount"
                let-pageSize="pageSize"
                let-curPage="curPage"
              >
                <section
                  class="footer"
                  fxLayout="row"
                  fxLayoutAlign="space-between center"
                >
                  <button
                    mat-button
                    *ngIf="editable"
                    (click)="onCreate('list')"
                  >
                    <mat-icon>add</mat-icon>
                    Add new entry
                  </button>
                  <section>{{ rowCount }} total</section>
                  <section>
                    <datatable-pager
                      [pagerLeftArrowIcon]="'datatable-icon-left'"
                      [pagerRightArrowIcon]="'datatable-icon-right'"
                      [pagerPreviousIcon]="'datatable-icon-prev'"
                      [pagerNextIcon]="'datatable-icon-skip'"
                      [page]="curPage"
                      [size]="pageSize"
                      [count]="rowCount"
                      [hidden]="!(rowCount / pageSize > 1)"
                      (change)="listTable.onFooterPage($event)"
                    >
                    </datatable-pager>
                  </section>
                </section>
              </ng-template>
            </ngx-datatable-footer>
          </ngx-datatable>
        </mat-card-content>
      </mat-card>

      <mat-card>
        <mat-card-header>
          <mat-card-title>
            Map Fields
            <span *ngIf="mapConfigs.length == 0">is empty.</span>
            <span *ngIf="keyword" class="primary">(filtered)</span>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <ngx-datatable
            *ngIf="mapConfigs.length || editable"
            #mapTable
            class="material"
            [headerHeight]="headerHeight"
            rowHeight="auto"
            [footerHeight]="headerHeight"
            columnMode="force"
            [rows]="mapConfigs"
            [sorts]="sorts"
            [limit]="10"
          >
            <ngx-datatable-column
              *ngIf="editable"
              [width]="40"
              [resizeable]="false"
              [draggable]="false"
              [canAutoResize]="false"
            >
              <ng-template let-row="row" ngx-datatable-cell-template>
                <button
                  mat-icon-button
                  class="delete-button"
                  matTooltip="Click to delete"
                  (click)="beforeDelete('map', row)"
                >
                  <mat-icon>delete_forever</mat-icon>
                </button>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column
              name="Name"
              [width]="80"
              [cellClass]="getNameCellClass"
            ></ngx-datatable-column>
            <ngx-datatable-column name="Value" [width]="500">
              <ng-template
                let-row="row"
                let-value="value"
                ngx-datatable-cell-template
              >
                <hi-data-table
                  [rows]="value"
                  [sorts]="sorts"
                  [columns]="columns.simpleConfigs"
                  [deletable]="editable"
                  [insertable]="editable"
                  (update)="edited('map', $event, row.name)"
                  (create)="created('map', $event, row.name)"
                  (delete)="edited('map', $event, row.name, true)"
                >
                </hi-data-table>
              </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-footer>
              <ng-template
                ngx-datatable-footer-template
                let-rowCount="rowCount"
                let-pageSize="pageSize"
                let-curPage="curPage"
              >
                <section
                  class="footer"
                  fxLayout="row"
                  fxLayoutAlign="space-between center"
                >
                  <button mat-button *ngIf="editable" (click)="onCreate('map')">
                    <mat-icon>add</mat-icon>
                    Add new entry
                  </button>
                  <section>{{ rowCount }} total</section>
                  <section>
                    <datatable-pager
                      [pagerLeftArrowIcon]="'datatable-icon-left'"
                      [pagerRightArrowIcon]="'datatable-icon-right'"
                      [pagerPreviousIcon]="'datatable-icon-prev'"
                      [pagerNextIcon]="'datatable-icon-skip'"
                      [page]="curPage"
                      [size]="pageSize"
                      [count]="rowCount"
                      [hidden]="!(rowCount / pageSize > 1)"
                      (change)="mapTable.onFooterPage($event)"
                    >
                    </datatable-pager>
                  </section>
                </section>
              </ng-template>
            </ngx-datatable-footer>
          </ngx-datatable>
        </mat-card-content>
      </mat-card>
    </section>
  </section>
</section>