nucleus/webclient/src/main/webapp/src/app/app.component.html

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

<nav class="navbar navbar-dark bg-dark fixed-top navbar-expand py-0">
  <a class="navbar-brand" routerLink="/navigator" style="cursor:pointer;">openMDM5 Web</a>
  <div class="collapse navbar-collapse" id="bs-mdm-navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item" *ngFor="let m of (links | authPipe | async)" [routerLinkActive]="['active']"><a class="nav-link" routerLink="{{m.path}}" style="cursor:pointer;"> {{m.name}}</a></li>
      </ul>
      <ul class="navbar-nav ml-md-auto">
        <li class="nav-item">
          <span class="navbar-text" style="padding: 7px 5px; vertical-align: top">{{ 'app.datasources' | translate }}</span>
          <p-multiSelect #datasourcemultiselect [options]="datasources" (onChange)="onSelectDatasources()" [(ngModel)]="selectedDatasources" [style]="{ 'margin-top': '2px', 'width': '150px' }" maxSelectedLabels="1"
            defaultLabel="{{ 'app.dialog-preference-datasources.choose' | translate }}" selectedItemsLabel="{{ 'app.dialog-preference-datasources.x-datasources-selected' | translate }}">
            <p-footer>
              <div style="white-space: nowrap;">
                <button type="button" class="btn btn-mdm" (click)="displayDatasourceDialog = true" title="{{ 'app.dialog-preference-datasources.title' | translate }}">{{ 'app.dialog-preference-datasources.btntitle' | translate }}</button>
                <button type="button" class="btn btn-mdm" (click)="closeDatasourceDropdown($event)" title="Close dropdown">{{ 'app.dialog-preference-datasources.btnselect' | translate }}</button>
              </div>
            </p-footer>
          </p-multiSelect>
        </li>
        <li class="nav-item">
          <span class="navbar-text" style="padding: 7px 5px; vertical-align: top">{{ 'app.language' | translate }}</span>
          <p-dropdown [options]="languages" (onChange)="onSelectLanguage($event)" [(ngModel)]="selectedLanguage" [style]="{ 'margin-top': '2px', 'min-width': '100px' }"></p-dropdown>
        </li>
        <li class="nav-item"><a class="nav-link" [routerLink]="" (click)="onShowAboutDialog()" href="#">{{ 'app.about' | translate }}</a></li>
        <li class="nav-item"><a class="nav-link" href="mdm/logout"><span class="fa fa-sign-in"></span> {{ 'app.logout' | translate }}<span *ngIf="user?.username" title="{{ 'app.roles' | translate }}: {{ rolesTooltip }}"> ({{ user?.username }})</span></a></li>
      </ul>
    </div>
</nav>

<div>
  <router-outlet *ngIf="canShowApplication"></router-outlet>
</div>

<p-dialog header="{{ 'app.dialog-preference-datasources.title' | translate }}" [(visible)]="displayDatasourceDialog"  [style]="{ 'max-width': '400px', 'max-height': '400px'}">
  <p-table *ngIf="datasources?.length > 0" [value]="datasources" [(selection)]="selectedPreferenceRow" [paginator]="datasources?.length > 10" [rows]="10">
    <ng-template pTemplate="header">
        <tr>
          <th style="width: 3em">
            <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
          </th>
          <th>
            {{ 'app.dialog-preference-datasources.column-header' | translate }}
          </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-row>
        <tr>
          <td>
            <p-tableCheckbox [value]="row"></p-tableCheckbox>
          </td>
          <td>
            {{row?.label}}
          </td>
        </tr>
    </ng-template>
  </p-table>

  <p-footer>
    <button type="button" pButton
      (click)="saveDatasourcePreference($event)" 
      [disabled]="selectedPreferenceRow?.length == 0"
      icon="fa fa-floppy-o"
      label="{{ 'app.dialog-preference-datasources.btntitle' | translate }}"></button>
  </p-footer>
</p-dialog>

<p-dialog header="About" [(visible)]="displayAboutDialog" modal="true" dismissableMask="true" responsive="true">
  <notice></notice>
</p-dialog>

<mdm-notifications></mdm-notifications>