| <!-- /******************************************************************************** |
| * 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="item" |
| id="search-text" |
| style="position: 0px;font-size: 13px; line-height:21px; color: #495057;" |
| placeholder="Suche" |
| (keyup)="setModifiedContactsSearchText($event.target.value); searchContacts($event)" |
| /> |
| |
| <select |
| [required]="false" |
| type="text" |
| class="form-control item" |
| (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)="isDSGVOFilterAdvancedVisible = !isDSGVOFilterAdvancedVisible" |
| 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;" |
| (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" (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" |
| (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" (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="street">{{ 'Contacts.Street' | translate }}</option> |
| <option value="community">{{ 'Contacts.Community' | 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" (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 selected>{{ '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 |
| [serverside]="contactsSandbox.serversideModel" |
| [queryParameter]="modifiedContacts" |
| autoResizeColumns |
| class="ag-theme-balham" |
| style="min-width: 982px; height: calc(100vh - 276px);" |
| [gridOptions]="gridOptions" |
| [columnDefs]="columnDefinition" |
| [rowSelection]="'single'" |
| [overlayNoRowsTemplate]="noRowsTemplate" |
| > |
| </ag-grid-angular> |
| |
| <app-spinner [isRunning]="contactsSandbox.contactListLoading$ | async"></app-spinner> |
| </div> |
| </app-card-layout> |