src/app/shared/controls/contact-select/contact-select.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 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 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<div class="contacts--selection">

  <div class="contacts--selection--search">
    <span class="contacts--selection--search--text">{{"contacts.search" | translate}}</span>
    <app-searchbar
      (appSearch)="appSearchChange.emit($event)"
      [appIsLoading]="appIsLoading"
      [appPlaceholder]="'contacts.searchContact' | translate"
      [appSearchText]="appSearch"
      class="contacts--selection--search--input">
    </app-searchbar>
  </div>

  <div class="contacts--selection--list">
    <div class="contacts--selection--list--box">

      <app-contact-table
        (appSelectedIdChange)="writeValue($event, true)"
        [appDisabled]="appDisabled || appIsLoading"
        [appEntries]="appEntries"
        [appSelectedId]="appValue">
      </app-contact-table>

      <div class="contacts--selection--list--box--info">
        <button (click)="appOpenContactModule.emit()"
                class="openk-button openk-info contacts--selection--list--box--info--button">
          {{"contacts.addNew" | translate}}
        </button>

        <app-pagination-counter
          (appPageChange)="appPageChange.emit($event)"
          *ngIf="appPageSize >= 2"
          [appDisabled]="appDisabled || appIsLoading"
          [appPageSize]="appPageSize"
          [appPage]="appPage">
        </app-pagination-counter>
      </div>

    </div>
  </div>

</div>

<div class="contacts--details">

  <div *ngIf="appDetails" class="contacts--details--address">
    <span>{{appDetails?.company}}</span>
    <span>{{appDetails?.firstName}} {{appDetails?.lastName}}</span>
    <span>{{appDetails?.street}} {{appDetails?.houseNumber}}</span>
    <span>{{appDetails?.postCode}} {{appDetails?.community}} {{appDetails?.communitySuffix}}</span>
    <span>{{appDetails?.email}}</span>
  </div>

  <div *ngIf="!appDetails" class="contacts--address">
    <span class="contacts--address--message">{{appMessage}}</span>
  </div>

</div>