src/app/pages/admin/communication-types/communication-types-details/communication-types-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
********************************************************************************/ -->
<form [ngrxFormState]="communicationTypesSandbox.formState$ | async">
  <h4>{{ 'CommunicationTypes.DetailsTitle' | translate }}</h4>
  <div>
    <!-- type -->
    <div class="form-group row">
      <label for="communicationTypesTyp" class="col-sm-4 col-form-label">{{ 'CommunicationTypes.Type' | translate }}</label>
      <div class="col-sm-7">
        <input
          type="text"
          required
          [readonly]="communicationTypesSandbox.formMode === 'readonly'"
          maxlength="30"
          class="form-control"
          id="communicationTypesTyp"
          [ngrxFormControlState]="((communicationTypesSandbox.formState$ | async)?.controls)['type']"
          autocomplete="off"
        />
      </div>
    </div>

    <!-- description -->
    <div class="form-group row">
      <label for="communicationTypesDescription" class="col-sm-4 col-form-label">{{ 'CommunicationTypes.Description' | translate }}</label>
      <div class="col-sm-7">
        <input
          type="text"
          required
          [readonly]="communicationTypesSandbox.formMode === 'readonly'"
          maxlength="255"
          class="form-control"
          id="communicationTypesDescription"
          [ngrxFormControlState]="((communicationTypesSandbox.formState$ | async)?.controls)['description']"
          autocomplete="off"
        />
      </div>
    </div>

    <!-- editable checkbox -->
    <div class="form-group row">
      <label for="communicationTypesEditable" class="col-sm-4 col-form-label">{{ 'CommunicationTypes.Editable' | translate }}</label>
      <div class="col-sm-7" style="align-self: center;">
        <input
          type="checkbox"
          class="form-check-input"
          id="communicationTypesEditable"
          [ngrxFormControlState]="((communicationTypesSandbox.formState$ | async)?.controls)['editable']"
          onclick="return false;"
        />
      </div>
    </div>

    <!-- ldap mapping checkbox -->
    <div class="form-group row">
      <label for="communicationTypesMappingLdap" class="col-sm-4 col-form-label">{{ 'CommunicationTypes.MappingLdap' | translate }}</label>
      <div class="col-sm-7" style="align-self: center;">
        <input
          type="checkbox"
          class="form-check-input"
          id="communicationTypesMappingLdap"
          [ngrxFormControlState]="((communicationTypesSandbox.formState$ | async)?.controls)['mappingLdap']"
          onclick="return false;"
        />
      </div>
    </div>

    <!-- buttons -->
    <span *ngIf="!(communicationTypesSandbox.formMode === 'readonly')">
      <button *visibleByRight type="button" class="btn btn-primary btn-sm btn-success" (click)="communicationTypesSandbox.saveCommunicationType()">
        {{ 'SaveBtn' | translate }}
      </button>
    </span>

    <button type="button" class="btn btn-primary btn-sm" (click)="communicationTypesSandbox.cancel()">
      {{ 'CancelBtn' | translate }}
    </button>
  </div>
</form>