src/app/pages/contacts/contacts-list/contacts-list.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 v. 2.0 which is available at
* http://www.eclipse.org/legal/epl-2.0.
*
* SPDX-License-Identifier: EPL-2.0
********************************************************************************/ -->
<app-card-layout>
  <div header>
    <span>{{ 'Contacts.Title' | translate }}</span>
  </div>
  <div class="contacts-grid-wrapper" body>
    <div class="diverse-options">
      <div class="search-options diverse-options-item">
        <input
          type="text"
          class="form-control item"
          id="search-text"
          style="position: 0px;font-size: 13px; line-height:21px; color: #495057;"
          placeholder="Suche"
          [ngModel]="modifiedContacts.searchText"
          (keyup)="setModifiedContactsSearchText($event.target.value); searchContacts($event)"
        />

        <select
          [required]="false"
          type="text"
          class="form-control item"
          [ngModel]="modifiedContacts.contactTypeId"
          (change)="setModifiedContactsContactTypeId($event.target.value); searchContacts($event)"
        >
          <option value="{{ INTERNAL_PERSON }}">{{ 'Contacts.InternalContact' | translate }}</option>
          <option value="{{ EXTERNAL_PERSON }}">{{ 'Contacts.ExternalContact' | translate }}</option>
          <option value="{{ COMPANY }}">{{ 'Contacts.Company' | translate }}</option>
          <option value="{{ CONTACT_PERSON }}">{{ 'Contacts.ContactPersonList' | translate }}</option>
          <option value="" selected>{{ 'Contacts.AllContactTypes' | translate }}</option>
        </select>

        <div class="dsgvo-filter-container search-btn">
          <button
            type="button"
            style="color: #495057;"
            class="btn btn-default btn-sm"
            (click)="setDSGVOFilterAdvancedVisible()"
            title="{{ 'Contacts.DSGVO-advanced-filter' | translate }}"
          >
            DSGVO
          </button>
          <div class="dsgvo-filter-options" *ngIf="isDSGVOFilterAdvancedVisible">
            <select
              [required]="false"
              type="text"
              class="form-control"
              style="margin-right: 12px;"
              [ngModel]="moduleDisplayName"
              (change)="setModifiedContactsModuleAssignmentFilter($event.target.value); searchContacts($event)"
            >
              <option *ngFor="let moduleType of userModuleAssignmentSandbox.userModuleTypes$ | async" [value]="moduleType.id">{{ moduleType.id }}</option>
              <option [value]="'-1'">{{ 'Contacts.WithoutModuleAssignment' | translate }}</option>
              <option [value]="''" selected>{{ 'Contacts.AllModuleAssignments' | translate }}</option>
            </select>

            <div class="dsgvo-filter-item custom-control custom-switch" title="{{ 'Contacts.DSGVO-advanced-filter-expiring-data-in-past' | translate }}">
              <input
                type="checkbox"
                class="custom-control-input"
                id="expiry-date"
                [ngModel]="modifiedContacts.expiringDataInPast"
                (change)="setModifiedContactsExpiryDateFilter(); searchContacts($event)"
              />
              <label
                class="custom-control-label"
                style="position: 0px;font-size: 13px; white-space: nowrap; line-height:21px; color: #495057;"
                for="expiry-date"
              >
                {{ 'Contacts.ExpieringDateExceed' | translate }}</label
              >
            </div>

            <div
              class="dsgvo-filter-item custom-control custom-switch"
              style="margin-left:21px; "
              title="{{ 'Contacts.DSGVO-advanced-filter-deletion-lock-exceeded' | translate }}"
            >
              <input
                type="checkbox"
                class="custom-control-input"
                id="deletion-lock-until"
                [ngModel]="modifiedContacts.deletionLockExceeded"
                (change)="setModifiedContactsDeletionLockExceedFilter(); searchContacts($event)"
              />
              <label
                class="custom-control-label"
                for="deletion-lock-until"
                style="position: 0px;font-size: 13px; white-space: nowrap;line-height:21px; color: #495057;"
                >{{ 'Contacts.DeleteLockExpired' | translate }}</label
              >
            </div>
          </div>
        </div>
      </div>

      <div class="sorting-options diverse-options-item">
        <select
          [required]="false"
          type="text"
          class="form-control item"
          [ngModel]="modifiedContacts.sort ? this.modifiedContacts.sort.split(',')[0] : ''"
          (change)="setSortingContactType($event.target.value); sortContacts()"
        >
          <option value="name">{{ 'Contacts.Name' | translate }}</option>
          <option value="contactType">{{ 'Contacts.ContactType' | translate }}</option>
          <option value="note">{{ 'Contacts.Note' | translate }}</option>
          <option value="mainAddress">{{ 'Contacts.MainAddress' | translate }}</option>
          <option value="department">{{ 'Contacts.Department' | translate }}</option>
          <option value="" selected>{{ 'NoSorting' | translate }}</option>
        </select>

        <select
          [required]="false"
          type="text"
          class="form-control item"
          [ngModel]="modifiedContacts.sort ? modifiedContacts.sort.split(',')[numberOfSubstrings] : 'asc'"
          (change)="setSortingOrder($event.target.value); sortContacts()"
        >
          <option value="asc" selected>{{ 'AscendingSorting' | translate }}</option>
          <option value="desc">{{ 'DescendingSorting' | translate }}</option>
        </select>
      </div>

      <div class="select-type-of-new-contact item" *visibleByRight>
        <select type="text" class="form-control" id="newContactDropDown" (change)="navigateTo($event.target.value)">
          <option value="" disabled>{{ 'Contacts.CreateNewContact' | translate }}</option>
          <option [value]="NEW_INTERNAL_PERSON_PATH">{{ 'Contacts.InternalContact' | translate }}</option>
          <option [value]="NEW_EXTERNAL_PERSON_PATH">{{ 'Contacts.ExternalContact' | translate }}</option>
          <option [value]="NEW_COMPANY_PATH">{{ 'Contacts.Company' | translate }}</option>
        </select>
      </div>
    </div>

    <ag-grid-angular
      (currentPageNumber)="contactsSandbox.setCurrentPageNumber($event)"
      [serverside]="contactsSandbox.serversideModel"
      [queryParameter]="modifiedContacts"
      autoResizeColumns
      class="ag-theme-balham"
      style="min-width: 1130px; height: calc(100vh - 276px);"
      (rowDoubleClicked) = "navigateToDetails($event)"
      [gridOptions]="gridOptions"
      [columnDefs]="columnDefinition"
      [rowSelection]="'single'"
      [overlayNoRowsTemplate]="noRowsTemplate"
    >
    </ag-grid-angular>

    <app-spinner [isRunning]="contactsSandbox.contactListLoading$ | async"></app-spinner>
  </div>
</app-card-layout>