nucleus/webclient/src/main/webapp/src/app/details/components/mdm-detail-descriptive-data/mdm-detail-descriptive-data.component.html

<!--********************************************************************************
 * Copyright (c) 2015, 2023 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *
 ********************************************************************************-->

<div *ngIf="!contextComponents">
  <div class="alert alert-info" style="margin: 0">
    <strong>{{ status | translate }}</strong>
  </div>
</div>

<div *ngIf="contextComponents" class="mdm-details-attributes">
  <p-treeTable #ttref [value]="treeNodes[contextType]" styleClass="table-hover p-treetable-gridlines">
    <ng-template pTemplate="caption">
      <div (click)="toggleTreeNodeState(ttref)" class="clickable">
        <p-button
          (onClick)="onEdit($event)"
          *ngIf="!editMode && canEdit4Env && !isTest"
          styleClass="ml-1"
          [title]="'details.mdm-detail-descriptive-data.btn-edit' | translate"
          icon="fa fa-pencil"
        >
        </p-button>
        <p-button
          (onClick)="onAddTempComponent($event)"
          *ngIf="!editMode && canEdit4Env && !isTest"
          styleClass="ml-1"
          [title]="'details.mdm-detail-descriptive-data.btn-add-tempComp' | translate"
          icon="fa fa-plus"
        >
        </p-button>
        <p-button
          (onClick)="onCancelEdit($event)"
          *ngIf="editMode"
          styleClass="ml-1"
          [title]="'details.mdm-detail-descriptive-data.btn-cancel' | translate"
          icon="fa fa-ban"
        >
        </p-button>
        <p-button
          (onClick)="onSaveChanges($event)"
          *ngIf="editMode"
          styleClass="ml-1"
          [title]="'details.mdm-detail-descriptive-data.btn-save' | translate"
          icon="pi pi-check"
        >
        </p-button>
        <span class="fa fa-lg toggler" [ngClass]="isTreeTableExpanded ? 'fa-chevron-down' : 'fa-chevron-right'"></span>
      </div>
    </ng-template>

    <ng-template pTemplate="header">
      <tr>
        <th>{{ "details.mdm-detail-descriptive-data.tblhdr-name" | translate }}</th>
        <th>{{ "details.mdm-detail-descriptive-data.tblhdr-ordered" | translate }}</th>
        <th>{{ "details.mdm-detail-descriptive-data.tblhdr-measured" | translate }}</th>
      </tr>
    </ng-template>

    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
      <tr [ngClass]="{ 'mdm-component-row': rowData.header, 'mdm-attribute-row': !rowData.header }">
        <!-- name -->
        <td>
          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
          <span [title]="rowData?.attribute?.description">
            <p-button
              (onClick)="onDeleteComponent($event, rowData?.name)"
              *ngIf="!editMode && canEdit4Env && !isTest && rowData?.header && rowData?.optional"
              styleClass="p-button-xsm"
              [title]="'details.mdm-detail-descriptive-data.btn-delete-Comp' | translate"
              icon="fa fa-minus fa-lg"
            >
            </p-button>
            {{ rowData?.mimeType | mdmTranslate : selectedNode?.sourceName : rowData?.attribute?.name | async }}
          </span>
        </td>

        <!-- ordered -->
        <td
          ttEditableColumn
          [ttEditableColumnDisabled]="!editMode || rowData?.attribute?.readOnly"
          [ngClass]="{ clickable: canEdit && editMode, readOnly: rowData?.attribute?.readOnly }"
        >
          <p-treeTableCellEditor>
            <ng-template pTemplate="input">
              <mdm-attribute-editor [contextAttribute]="rowData?.orderedContextAttribute"></mdm-attribute-editor>
            </ng-template>

            <ng-template pTemplate="output">
              <mdm-attribute-viewer [contextAttribute]="rowData?.orderedContextAttribute"></mdm-attribute-viewer>
            </ng-template>
          </p-treeTableCellEditor>
        </td>

        <!-- measured -->
        <td
          ttEditableColumn
          [ttEditableColumnDisabled]="!editMode || rowData?.attribute?.readOnly"
          [ngClass]="{ clickable: canEdit && editMode, readOnly: rowData?.attribute?.readOnly }"
        >
          <p-treeTableCellEditor>
            <ng-template pTemplate="input">
              <mdm-attribute-editor
                *ngIf="rowData?.attribute?.value?.length === 2"
                [contextAttribute]="rowData?.measuredContextAttribute"
              ></mdm-attribute-editor>
            </ng-template>
            <ng-template pTemplate="output">
              <mdm-attribute-viewer
                *ngIf="rowData?.attribute?.value?.length === 2"
                [contextAttribute]="rowData?.measuredContextAttribute"
              ></mdm-attribute-viewer>
            </ng-template>
          </p-treeTableCellEditor>
        </td>
      </tr>
    </ng-template>
  </p-treeTable>
</div>

<p-dialog
  [header]="'details.mdm-detail-descriptive-data.btn-add-tempComp' | translate"
  [(visible)]="showTplComponents"
  [responsive]="true"
  showEffect="fade"
  [modal]="true"
  [style]="{ width: '600px' }"
  [contentStyle]="{ 'max-height': '100%' }"
>
  <div class="field-checkbox">
    <span>
      <p-checkbox id="ctxCmp-ordered" name="grpContext" value="ordered" [(ngModel)]="selectedContext" class="ml20"></p-checkbox>
      <label for="ctxCmp-ordered">{{ "details.mdm-detail-descriptive-data.lbl-ordered" | translate }}</label>
      <p-checkbox
        id="ctxCmp-measured"
        name="grpContext"
        value="measured"
        [(ngModel)]="selectedContext"
        class="ml20"
        [style]="{ 'margin-left': '20px' }"
      ></p-checkbox>
      <label for="ctxCmp-measured">{{ "details.mdm-detail-descriptive-data.lbl-measured" | translate }}</label>
    </span>
  </div>
  <div class="grid">
    <p-listbox
      [options]="tplComponents"
      [(ngModel)]="selectedTplComponent"
      [checkbox]="true"
      [multiple]="true"
      [showToggleAll]="false"
      optionLabel="name"
      [style]="{ width: '580px' }"
    ></p-listbox>
  </div>
  <p-footer>
    <div class="ui-dialog-buttonpane ui-helper-clearfix">
      <p-button
        icon="fa fa-check"
        (onClick)="onSaveSelection($event)"
        [disabled]="selectedTplComponent?.length === 0 || selectedContext?.length === 0"
        [label]="'details.mdm-detail-descriptive-data.btn-adopt' | translate"
      ></p-button>
    </div>
  </p-footer>
</p-dialog>

<p-dialog
  [header]="'details.mdm-detail-descriptive-data.ttl-confirmation' | translate"
  [(visible)]="showConfirmDelete"
  [responsive]="true"
  showEffect="fade"
  [modal]="true"
  [style]="{ width: '400px' }"
  [contentStyle]="{ 'max-height': '100%' }"
>
  <div class="field-checkbox">{{ "details.mdm-detail-descriptive-data.msg-confirm-delete-ctxcmp-from-db" | translate : ctxCompName }}</div>
  <div class="field-checkbox">
    <span>
      <p-checkbox
        *ngIf="hasOrdered"
        id="ctxCmp-ordered"
        name="grpContext"
        value="ordered"
        [(ngModel)]="selectedContext"
        class="ml20"
      ></p-checkbox>
      <label *ngIf="hasOrdered" for="ctxCmp-ordered">{{ "details.mdm-detail-descriptive-data.lbl-ordered" | translate }}</label>
      <p-checkbox
        *ngIf="hasMeasured"
        id="ctxCmp-measured"
        name="grpContext"
        value="measured"
        [(ngModel)]="selectedContext"
        class="ml20"
        [style]="{ 'margin-left': '20px' }"
      ></p-checkbox>
      <label *ngIf="hasMeasured" for="ctxCmp-measured">{{ "details.mdm-detail-descriptive-data.lbl-measured" | translate }}</label>
    </span>
  </div>
  <p-footer>
    <div class="ui-dialog-buttonpane ui-helper-clearfix">
      <p-button
        icon="pi pi-check"
        (onClick)="onDeleteSelection($event)"
        [disabled]="selectedContext?.length === 0"
        [label]="'details.mdm-detail-descriptive-data.btn-yes-delete-ctxcmp' | translate"
      ></p-button>
      <p-button
        icon="pi pi-times"
        (onClick)="onNotDeleteSelection($event)"
        [label]="'details.mdm-detail-descriptive-data.btn-no-delete-ctxcmp' | translate"
      ></p-button>
    </div>
  </p-footer>
</p-dialog>