src/app/pages/persons/internal-person/internal-person-details/internal-person-details.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>{{ 'Internal.Title' | translate }}</span>
  </div>
  <div testDisable class="contacts-grid-wrapper" body>
    <form [ngrxFormState]="internalPersonSandBox.internalPersonDetailsFormState$ | async">
      <div>
        <!-- firstName -->
        <div class="form-group row">
          <label for="firstName" class="col-sm-2 col-form-label">{{ 'Internal.FirstName' | translate }}</label>
          <div class="col-sm-4">
            <input
              #input
              type="text"
              maxlength="255"
              class="form-control"
              id="firstName"
              [ngrxFormControlState]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['firstName']"
              autocomplete="off"
            />
          </div>
        </div>

        <!-- lastName -->
        <div class="form-group row">
          <label for="lastName" class="col-sm-2 col-form-label">{{ 'Internal.LastName' | translate }}</label>
          <div class="col-sm-4">
            <input
              required
              type="text"
              maxlength="255"
              class="form-control"
              id="lastName"
              [ngrxFormControlState]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['lastName']"
              autocomplete="off"
            />
          </div>
        </div>

        <div class="syncAlertMessage" *ngIf="internalPersonSandBox.showSyncAlertMessage">
          <span>
            Achtung: <br />Dieser Kontakt wird mit einem anderen System synchronisiert. <br />
            Manuelle Änderungen gehen möglicherweise verloren.
          </span>
        </div>

        <!-- title -->
        <div class="form-group row">
          <label for="title" class="col-sm-2 col-form-label">{{ 'Internal.PersonTitle' | translate }}</label>
          <div class="col-sm-4">
            <input
              type="text"
              maxlength="255"
              class="form-control"
              id="title"
              [ngrxFormControlState]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['title']"
              autocomplete="off"
            />
          </div>
        </div>

        <!-- salutation -->
        <div class="form-group row">
          <label for="salutationType" class="col-sm-2 col-form-label">{{ 'Internal.Salutation' | translate }}</label>
          <div class="col-sm-4">
            <select
              type="text"
              class="form-control"
              [ngrxFormControlState]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['salutationId']"
            >
              <option [value]="">{{ 'SelectOption' | translate }}</option>
              <option *ngFor="let salutation of salutationSandBox.salutations$ | async" [value]="salutation.id">{{ salutation.type }}</option>
            </select>
          </div>
        </div>

        <!-- personType -->
        <div class="form-group row">
          <label for="personType" class="col-sm-2 col-form-label">{{ 'Internal.PersonType' | translate }}</label>
          <div class="col-sm-4">
            <select
              type="text"
              class="form-control"
              [ngrxFormControlState]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['personTypeId']"
            >
              <option [value]="">{{ 'SelectOption' | translate }}</option>
              <option *ngFor="let personType of personTypesSandbox.personTypes$ | async" [value]="personType.id">{{ personType.type }}</option>
            </select>
          </div>
        </div>

        <!-- Uid LDAP-->
        <div class="form-group row">
          <label for="uid" class="col-sm-2 col-form-label">{{ 'Internal.Uid' | translate }}</label>
          <div class="col-sm-4">
            <input
              placeholder="{{ 'Search' | translate }}"
              id="uidTypeahead"
              type="text"
              maxlength="255"
              class="form-control"
              [ngbTypeahead]="internalPersonSandBox.searchForLdapUser"
              [editable]="false"
              (selectItem)="internalPersonSandBox.setLdapUidValue($event)"
              autocomplete="off"
              [resultFormatter]="internalPersonSandBox.formatter"
              [inputFormatter]="internalPersonSandBox.formatter"
            />
          </div>

          <div class="col-sm-info-icon">
            <i [hidden]="!internalPersonSandBox.showInfoIconLdap"
            class="fa fa-info-circle info-icon" aria-hidden="true" placement="auto" [ngbTooltip]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['syncNote'].value"
             tooltipClass="custom-info-tooltip" triggers="hover"></i>
          </div>
          <div class="col-sm-4" style="padding: 0 7px">
            <input [ngClass]="{'error': internalPersonSandBox.isSyncErrorLdap, 'success': internalPersonSandBox.isSyncSuccessLdap }"
              readonly="readonly"
              type="text"
              maxlength="255"
              class="form-control"
              id="uid"
              [ngrxFormControlState]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['uid']"
              autocomplete="off"
            />
          </div>

          <button type="button" style="flex-basis: 10px;" (click)="internalPersonSandBox.setLdapUidValue(null)" class="btn btn-primary btn-sm">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
          </button>

        </div>

        <!-- Userref Portal User-->
        <div class="form-group row">
          <label for="userRef" class="col-sm-2 col-form-label">{{ 'Internal.Userref' | translate }}</label>
          <div class="col-sm-4">
            <input
              placeholder="{{ 'Search' | translate }}"
              id="userrefTypeahead"
              type="text"
              maxlength="255"
              class="form-control"
              [ngbTypeahead]="internalPersonSandBox.searchForKeycloakUser"
              [editable]="false"
              (selectItem)="internalPersonSandBox.setUserRefValue($event)"
              autocomplete="off"
            />
          </div>

          <div class="col-sm-info-icon">
            <!-- placeholder -->
          </div>
          <div class="col-sm-4" style="padding: 0 7px">
            <input
              readonly="readonly"
              type="text"
              maxlength="255"
              class="form-control"
              id="userRef"
              [ngrxFormControlState]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['userRef']"
              autocomplete="off"
            />
          </div>

          <button type="button" (click)="internalPersonSandBox.setUserRefValue(null)" class="btn btn-primary btn-sm">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
          </button>
        </div>

        <!-- Department -->
        <div class="form-group row">
          <label for="department" class="col-sm-2 col-form-label">{{ 'Internal.Department' | translate }}</label>
          <div class="col-sm-4">
            <input
              type="text"
              maxlength="255"
              class="form-control"
              id="department"
              [ngrxFormControlState]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['department']"
              autocomplete="off"
            />
          </div>
        </div>

        <!-- contactNote -->
        <div class="form-group row">
          <label for="contactNote" class="col-sm-2 col-form-label">{{ 'Internal.Note' | translate }}</label>
          <div class="col-sm-4">
            <input
              type="text"
              maxlength="255"
              class="form-control"
              id="contactNote"
              [ngrxFormControlState]="((internalPersonSandBox.internalPersonDetailsFormState$ | async)?.controls)['contactNote']"
              autocomplete="off"
            />
          </div>
        </div>

        <!-- buttons -->
        <div class="row justify-content-between">
          <div>
            <button *visibleByRight type="button" class="btn btn-success person-buttons" (click)="internalPersonSandBox.persistInternalPerson()">
              {{ 'SaveBtn' | translate }}
            </button>
            <button type="button" class="btn btn-primary person-buttons cancel-button" routerLink="/overview">
              {{ 'CancelBtn' | translate }}
            </button>
          </div>
          <div class="person-buttons" *ngIf="internalPersonSandBox.internalPersonContactId">
            <app-anonymizer [contactId]="internalPersonSandBox.internalPersonContactId"></app-anonymizer>
          </div>
        </div>
      </div>
    </form>

    <app-expandable class="expandable-address" *ngIf="isExpandableVisible">
      <span header>{{ 'Contacts.AddressList' | translate }}</span>
      <div class="expandable-body-container" body>
        <div class="table-detail-view-address" *ngIf="internalPersonSandBox.isAddressDataDetailViewVisible">
          <app-internal-person-address-details [createOrEditAddressData]="createOrEditAddressData"></app-internal-person-address-details>
        </div>
        <div class="table-view-address">
          <app-internal-person-address-list
            (internalPersonDetailsId)="loadAddressDetail($event)"
            (createNewInternalPerson)="loadAddressDetail($event)"
          ></app-internal-person-address-list>
        </div>
      </div>
    </app-expandable>

    <app-expandable class="expandable-communication" *ngIf="isExpandableVisible">
      <span header>{{ 'Contacts.CommunicationsDataList' | translate }}</span>
      <div class="expandable-body-container" body>
        <div class="table-detail-view-communication" *ngIf="internalPersonSandBox.isCommunicationsDataDetailViewVisible">
          <app-internal-person-communications-data-details
            [createOrEditCommunicationsData]="createOrEditCommunicationsData"
          ></app-internal-person-communications-data-details>
        </div>
        <div class="table-view-communication">
          <app-internal-person-communications-data-list
            (internalPersonDetailsId)="loadCommunicationsDataDetail($event)"
            (createNewInternalPerson)="loadCommunicationsDataDetail($event)"
          ></app-internal-person-communications-data-list>
        </div>
      </div>
    </app-expandable>

    <app-expandable class="expandable-module-assignment" *ngIf="isExpandableVisible">
      <span header>{{ 'Contacts.ModuleAssignment' | translate }}</span>
      <div class="expandable-body-container" body>
        <div class="table-detail-view-module-assignment" *ngIf="userModuleAssignmentSandBox.isUserModuleAssignmentDataDetailViewVisible">
          <app-module-assignment-data-details
            [createOrEditUserModuleAssignmentData]="createOrEditUserModuleAssignmentData"
          ></app-module-assignment-data-details>
        </div>
        <div class="table-view-module-assignment">
          <app-module-assignment-data-list
            (userModuleAssignmentDetailsLoaded)="loadUserModuleAssignmentDataDetail($event)"
            (createNewUserModuleAssignment)="loadUserModuleAssignmentDataDetail($event)"
          ></app-module-assignment-data-list>
        </div>
      </div>
    </app-expandable>
  </div>
</app-card-layout>