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 class="contacts-grid-wrapper" body>
    <form [ngrxFormState]="internalPersonSandBox.formState$ | 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
                type="text"
                class="form-control"
                id="firstName"
                [ngrxFormControlState]="((internalPersonSandBox.formState$ | 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]="true"
                type="text"
                class="form-control"
                id="lastName"
                [ngrxFormControlState]="((internalPersonSandBox.formState$ | async)?.controls)['lastName']"
                autocomplete="off"
              />
            </div>
          </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"
                class="form-control"
                id="title"
                [ngrxFormControlState]="((internalPersonSandBox.formState$ | 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.formState$ | async)?.controls)['salutationId']">
                <option [value]="">{{ 'SelectOption' | translate }}</option> -->
                <option *ngFor="let salutation of internalPersonSandBox.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.formState$ | async)?.controls)['personTypeId']">
                <option [value]="">{{ 'SelectOption' | translate }}</option>
                <option *ngFor="let personType of internalPersonSandBox.personTypes$ | async" [value]="personType.id">{{personType.type}}</option>
              </select>
            </div> -->
            <div class="col-sm-4">
              <input
                type="text"
                class="form-control"
                id="personType"
                [ngrxFormControlState]="((internalPersonSandBox.formState$ | async)?.controls)['personType']"
                autocomplete="off"
              />
            </div>
          </div>

          <!-- Uid -->
          <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
                type="text"
                class="form-control"
                id="uid"
                [ngrxFormControlState]="((internalPersonSandBox.formState$ | async)?.controls)['uid']"
                autocomplete="off"
              />
            </div>
          </div>

          <!-- Userref -->
          <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
                type="text"
                class="form-control"
                id="userRef"
                [ngrxFormControlState]="((internalPersonSandBox.formState$ | async)?.controls)['userRef']"
                autocomplete="off"
              />
            </div>
          </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"
                class="form-control"
                id="department"
                [ngrxFormControlState]="((internalPersonSandBox.formState$ | 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"
                class="form-control"
                id="contactNote"
                [ngrxFormControlState]="((internalPersonSandBox.formState$ | async)?.controls)['contactNote']"
                autocomplete="off"
              />
            </div>
          </div>

          <!-- buttons -->
          <button type="button" class="btn btn-success" (click)="save()">{{ 'SaveBtn' | translate }}</button>
      </div>
    </form>
  </div>
</app-card-layout>