org.eclipse.mdm.nucleus/org.eclipse.mdm.application/src/main/webapp/src/app/administration/extsystem-editor.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 class="mdm-extsystem-editor-container">

    <p-table class="ext-system-table" [value]="tableExtSystems" *ngIf="selectedEnvironment && extSystems" styleClass="table-hover">
      <ng-template pTemplate="header">
        <tr>
          <th>{{ 'administration.extsystem.name' | translate }}</th>
          <th>{{ 'administration.extsystem.description' | translate }}</th>
        </tr>
      </ng-template>
      <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
        <tr>
          <td>
            <input required type="text" [(ngModel)]="rowData.name" />
          </td>
          <td>
            <input type="text" *ngIf="getAttributeFromNode(rowData,'Description')" [(ngModel)]="getAttributeFromNode(rowData,'Description').value" />
          </td>
        </tr>
      </ng-template>
    </p-table>
    <div class="commands">
      <button type="button" class="btn btn-default pull-right" (click)="saveExtSystem()">
        <span class="fa fa-plus"></span> {{'administration.extsystem.btn-save' | translate }}
      </button>
    </div>

    <div *ngIf="selectedExtSystem">
      <div class="custom-split-pane">
        <div class="custom-split-pane-content custom-split-pane-left">
          <div>{{ 'administration.extsystem.ext-system-attributes' | translate }}</div>
          <p-table class="ext-system-attr-table" [value]="getExternalSystemAttributes()" selectionMode="single" [(selection)]="selectedExtSystemAttr" (onRowSelect)="onExtSystemAttrSelect($event)">
            <ng-template pTemplate="header">
              <tr>
                <th style="width: 3em"></th>
                <th>{{ 'administration.extsystem.name' | translate }}</th>
                <th>{{ 'administration.extsystem.description' | translate }}</th>
                <th class="actioncol"></th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
              <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
                <td><p-tableRadioButton [value]="rowData"></p-tableRadioButton></td>
                <td><input required type="text" [(ngModel)]="rowData.name" (change)="updateSystemAttrModel(rowData)" /></td>
                <td><input type="text" *ngIf="getAttributeFromNode(rowData,'Description')" [(ngModel)]="getAttributeFromNode(rowData,'Description').value" (change)="updateSystemAttrModel(rowData)" /></td>
                <td class="actioncol"><button type="button" class="btn btn-default" (click)="removeExtSystemAttr(rowData)" title="{{ 'administration.extsystem.btn-del' | translate }}">
                  <span class="fa fa-times"></span>
                </button></td>
              </tr>
            </ng-template>
          </p-table>
          <div *ngIf="loadingExtSystemAttr">{{ 'administration.extsystem.loading-attributes' | translate }}</div>

          <div class="commands">
            <button type="button" class="btn btn-default pull-right" (click)="addExtSystemAttr()">
              <span class="fa fa-plus"></span> {{'administration.extsystem.btn-add' | translate }}
            </button>
          </div>

        </div>
        <div class="custom-split-pane-content custom-split-pane-right">
          <div>{{ 'administration.extsystem.mdm-attributes' | translate }}</div>
          <p-table class="ext-system-mdmattr-table" *ngIf="selectedExtSystemAttr" [value]="getMDMAttributes()">
            <ng-template pTemplate="header">
              <tr>
                <th>{{ 'administration.extsystem.component-type' | translate }}</th>
                <th>{{ 'administration.extsystem.component-name' | translate }}</th>
                <th>{{ 'administration.extsystem.attribute-name' | translate }}</th>
                <th class="actioncol"></th>
              </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
              <tr>
                <td class="dropdowncol"><div><p-dropdown *ngIf="getAttributeFromNode(rowData,'CompType')" styleClass="drpdwn" [autoWidth]="false" [style]="{'width':'100%'}" [options]="mdmCompTypes" [(ngModel)]="getAttributeFromNode(rowData,'CompType').value" (onChange)="handleCompTypeSelect($event, rowData)" required="true"></p-dropdown></div></td>
                <td class="dropdowncol"><div><p-dropdown *ngIf="getAttributeFromNode(rowData,'CompName')" styleClass="drpdwn" [autoWidth]="false" [style]="{'width':'100%'}" [options]="availableCatalogComps(rowData)" [(ngModel)]="getAttributeFromNode(rowData,'CompName').value" (onChange)="handleCompSelect($event, rowData)" editable="true"></p-dropdown></div></td>
                <td class="dropdowncol"><div><p-dropdown *ngIf="getAttributeFromNode(rowData,'AttrName')" styleClass="drpdwn" [autoWidth]="false" [style]="{'width':'100%'}" [options]="availableAttributeComps(rowData)" [(ngModel)]="getAttributeFromNode(rowData,'AttrName').value" (onChange)="handleAttrCompSelect($event, rowData)" editable="true"></p-dropdown></div></td>
                <td class="actioncol"><button type="button" class="btn btn-default" (click)="removeExtSystemMDMAttr(rowData)" title="{{ 'administration.extsystem.btn-del' | translate }}">
                  <span class="fa fa-times"></span>
                </button></td>
              </tr>
            </ng-template>
          </p-table>

          <div class="commands">
            <button *ngIf="selectedExtSystemAttr" type="button" class="btn btn-default pull-right" (click)="addExtSystemMDMAttr()">
              <span class="fa fa-plus"></span> {{'administration.extsystem.btn-add' | translate }}
            </button>
          </div>

        </div>
      </div>
    </div>
  </div>