org.eclipse.mdm.application/src/main/webapp/src/app/chartviewer/components/xy-chart-data-selection-panel/xy-chart-data-selection-panel.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="p-grid">
  <div class="p-col-12" style="margin-top: 4px">
    <p-listbox
      [options]="channelGroups"
      [(ngModel)]="selectedChannelGroups"
      multiple="multiple"
      checkbox="checkbox"
      filter="filter"
      optionLabel="name"
      (onChange)="onSelectedChannelGroupsChanged($event)"
      [ngClass]="{'hiddenList': hiddenGroups}"
      [style]="{'width':'100%'}"
      [listStyle]="{'height':'100px'}">
      <p-header>
          <span class="icon channelgroup"></span>
          {{'SubMatrix' | mdmdatasourcetranslate}}
          <span
            class="fa toggler"
            [ngClass]="{'fa-chevron-down': !hiddenGroups, 'fa-chevron-right': hiddenGroups}"
            (click)="onToggleChannelGroupPanel($event)"></span>
      </p-header>
    </p-listbox>
    <!-- <p-multiSelect
      [style]="{'width':'100%'}"
      defaultLabel="Choose ChannelGroups"
      [options]="channelGroups"
      [(ngModel)]="selectedChannelGroups"
      optionLabel="name"
      (onChange)="onSelectedChannelGroupsChanged($event)">
    </p-multiSelect> -->
  </div>
  <div class="p-col-12">
    <p-listbox [options]="yChannelOptions"
      [(ngModel)]="selectedYChannels"
      multiple="multiple"
      checkbox="checkbox"
      filter="filter"
      optionLabel="name"
      (onChange)="onSelectedYChannelsChanged($event)"
      [ngClass]="{'hiddenList': hiddenYChannels}"
      [style]="{'width':'100%'}"
      [styleClass]="'ypanel'"
      [listStyle]="{'height':'200px'}"
      [showToggleAll]="false">
      <p-header>
        <span class="icon channel"></span>
        Y-{{'MeaQuantity' | mdmdatasourcetranslate}}
        <span
        class="fa toggler"
        [ngClass]="{'fa-chevron-down': !hiddenYChannels, 'fa-chevron-right': hiddenYChannels}"
        (click)="onToggleYChannelPanel($event)"></span>
      </p-header>
    </p-listbox>
    <!-- <p-multiSelect
      [style]="{'width':'100%'}"
      defaultLabel="Choose Channels"
      [options]="yChannelOptions"
      [(ngModel)]="selectedYChannels"
      optionLabel="name"
      (onChange)="onSelectedYChannelsChanged($event)"
      [showToggleAll]="false">
    </p-multiSelect> -->
  </div>
  <div class="p-col-12">
    <p-panel
      [toggleable]="true"
      [collapsed]="true"
      expandIcon="fa fa-chevron-right"
      collapseIcon="fa fa-chevron-down">
      <p-header>
        <span class="icon channel"></span>
        &nbsp;X-{{'MeaQuantity' | mdmdatasourcetranslate}}
      </p-header>
      <!-- <p-table [value]="selectedChannelRows">
        <ng-template pTemplate="header">
             <tr>
                <th>Channel</th>
                <th></th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData>
            <tr>
                <td>{{rowData.yChannel.name}}</td>
                <td>
                  <p-dropdown
                    [style]="{'width':'100%'}"
                    [options]="xChannelOptions[rowData.channelGroup.id]"
                    [(ngModel)]="rowData.xChannel"
                    placeholder="Select X"
                    optionLabel="name"
                    [showClear]="true"
                    (onChange)="onSelectedXChannelChanged($event, rowData)">
                  </p-dropdown>
              </td>
            </tr>
        </ng-template>
      </p-table> -->
      <ul class="channelList">
        <li *ngFor="let rowData of selectedChannelRows">
          <div class="row">
            <label>
              {{rowData.yChannel.name}}
            </label>
            
            <!-- appendTo="body" is workarround for overlay is hidden in panel. Problem: AppendTo body makes overly stuck on scroll -->
            <p-dropdown
              [(ngModel)]="rowData.xChannel"
              [options]="xChannelOptions[rowData.channelGroup.id]"
              appendTo="body"
              [filter]="xChannelOptions[rowData.channelGroup.id]?.length > 5"
              (onChange)="onSelectedXChannelChanged($event, rowData)"
              placeholder="{{'chartviewer.xy-chart-data-selection-panel.select-channel-placeholder' | translate}}"
              optionLabel="name"
              [showClear]="false"
              [style]="{'width':'95%'}">
            </p-dropdown>
          </div>
        </li>
      </ul>
    </p-panel>
    <!-- <p-dropdown
      [style]="{'width':'100%'}"
      [options]="xChannels"
      [(ngModel)]="selectedXChannel"
      placeholder="Select X"
      optionLabel="name"
      [showClear]="true"
      (onChange)="onSelectedXChannelChanged($event)">
    </p-dropdown>  -->
  </div>
</div>