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

<!--********************************************************************************
 * Copyright (c) 2015-2018 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">

  <!-- <button (click)="changeTreeEdit(true, false)" *ngIf="!editMode && canEdit" class="btn btn-mdm" style="margin-bottom: 5px;">
    <span class="fa fa-pencil"></span>
    {{ 'details.mdm-detail-descriptive-data.btn-edit' | translate }}
  </button>
  <button (click)="changeTreeEdit(false, false)" *ngIf="editMode" class="btn btn-mdm" style="margin-bottom: 5px;">
    <span class="fa fa-ban"></span>
    {{ 'details.mdm-detail-descriptive-data.btn-cancel' | translate }}
  </button>
  <button (click)="changeTreeEdit(false, true)" *ngIf="editMode" class="btn btn-mdm" style="margin-bottom: 5px;">
    <span class="fa fa-check"></span>
    {{ 'details.mdm-detail-descriptive-data.btn-save' | translate }}
  </button> -->

  <p-treeTable #ttref [value]="treeNodes[contextType]" styleClass="table-hover">

    <ng-template pTemplate="caption">
      <div (click)="toggleTreeNodeState(ttref)" class="clickable">
        <button (click)="onEdit($event)"
          *ngIf="!editMode && canEdit"
          class="btn btn-mdm"
          title="{{ 'details.mdm-detail-descriptive-data.btn-edit' | translate }}">
          <span class="fa fa-pencil"></span>
        </button>
        <button (click)="onCancelEdit($event)"
          *ngIf="editMode"
          class="btn btn-mdm"
          title="{{ 'details.mdm-detail-descriptive-data.btn-cancel' | translate }}">
          <span class="fa fa-ban"></span>
        </button>
        <button (click)="onSaveChanges($event)"
          *ngIf="editMode"
          class="btn btn-mdm"
          title="{{ 'details.mdm-detail-descriptive-data.btn-save' | translate }}">
          <span class="fa fa-check"></span>
        </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>
        <!-- name -->
        <td class="{{rowData.header ? 'mdm-component-row' : 'mdm-attribute-row'}}">
          <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
          <span pTooltip="{{rowData.attribute != null ? rowData.attribute.description : ''}}" tooltipPosition="bottom">{{rowData.name}}</span>
        </td>

        <!-- ordered -->
        <td ttEditableColumn [ttEditableColumnDisabled]="!editMode || rowData?.attribute?.readOnly" class="{{rowData.header ? 'mdm-component-row' : 'mdm-attribute-row'}}"
        [ngClass]="{'clickable': canEdit && editMode, 'readOnly': rowData?.attribute?.readOnly}">
          <p-treeTableCellEditor>
            <ng-template pTemplate="input">
              <attribute-editor
                [ident]="getIdentifier(selectedNode, rowNode?.parent?.data?.attribute, rowData?.attribute, contextGroupEnum.ORDERED, contextType)"
                [attribute]="rowData?.attribute" >
              </attribute-editor>
            </ng-template>

            <ng-template pTemplate="output">
              <attribute-viewer
                [ident]="getIdentifier(selectedNode, rowNode?.parent?.data?.attribute, rowData?.attribute, contextGroupEnum.ORDERED, contextType)"
                [attribute]="rowData?.attribute" >
              </attribute-viewer>
            </ng-template>
          </p-treeTableCellEditor>
        </td>

        <!-- measured -->
        <td ttEditableColumn [ttEditableColumnDisabled]="!editMode || rowData?.attribute?.readOnly" class="{{rowData.header ? 'mdm-component-row' : 'mdm-attribute-row'}}"
        [ngClass]="{'clickable': canEdit && editMode, 'readOnly': rowData?.attribute?.readOnly}">
          <p-treeTableCellEditor>
            <ng-template pTemplate="input">
              <span *ngIf="rowData?.attribute?.value?.length == 2">
                <attribute-editor
                  [ident]="getIdentifier(selectedNode, rowNode?.parent?.data?.attribute, rowData?.attribute, contextGroupEnum.MEASURED, contextType)"
                  [attribute]="rowData?.attribute">
                </attribute-editor>
              </span>
            </ng-template>
            <ng-template pTemplate="output">
                <attribute-viewer *ngIf="rowData?.attribute?.value?.length == 2"
                  [ident]="getIdentifier(selectedNode, rowNode?.parent?.data?.attribute, rowData?.attribute, contextGroupEnum.MEASURED, contextType)"
                  [attribute]="rowData?.attribute">
                </attribute-viewer>
            </ng-template>
          </p-treeTableCellEditor>
        </td>
      </tr>
    </ng-template>
  </p-treeTable>
</div>