src/app/shared/components/list-details-view/user-module-assignment/details/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]="userModuleAssignmentSandbox.formState$ | async">
  <h4>{{ createOrEditUserModuleAssignmentData }}</h4>
  <div>
    <!-- moduleName -->
    <div class="form-group row">
      <label for="modulName" class="col-sm-4 col-form-label">{{ 'UserModuleAssignment.ModuleName' | translate }}</label>
      <div class="col-sm-7">
        <select type="text" class="form-control" [ngrxFormControlState]="((userModuleAssignmentSandbox.formState$ | async)?.controls)['modulName']" required>
          <option *ngFor="let moduleType of userModuleAssignmentSandbox.userModuleTypes$ | async" [disabled]="moduleType.isDisabled" [value]="moduleType.id">{{
            moduleType.id
          }}</option>
        </select>
      </div>
    </div>

    <!-- expiringDate -->
    <div class="form-group row">
      <label for="expiringDate" class="col-sm-4 col-form-label">{{ 'UserModuleAssignment.ExpiringDate' | translate }}</label>
      <div class="input-group col-sm-7">
        <div class="input-group-prepend">
          <button class="btn btn-outline-primary calendar" (click)="expiringDateCalendar.toggle()" type="button">
            <i class="fa fa-calendar"></i>
          </button>
        </div>
        <input
          style="border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem;"
          class="form-check-input"
          type="text"
          placeholder="tt.mm.jjjj"
          ngbDatepicker
          #expiringDateCalendar="ngbDatepicker"
          id="expiringDate"
          name="expiringDate"
          [ngrxFormControlState]="((userModuleAssignmentSandbox.formState$ | async)?.controls)['expiringDate']"
          [ngrxValueConverter]="userModuleAssignmentSandbox.dateValueConverter"
          readonly
        />
        <div class="input-group-append">
          <button class="btn btn-outline-primary calendar" (click)="reset('expiringDate')" type="button">
            <i class="fa fa-times-circle" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- deletionLockUntil -->
    <div class="form-group row">
      <label for="deletionLockUntil" class="col-sm-4 col-form-label">{{ 'UserModuleAssignment.DeletionLockUntil' | translate }}</label>
      <div class="input-group col-sm-7">
        <div class="input-group-prepend">
          <button class="btn btn-outline-primary calendar" (click)="deletionLockUntilCalendar.toggle()" type="button">
            <i class="fa fa-calendar"></i>
          </button>
        </div>
        <input
          style="border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 0.25rem;"
          class="form-check-input"
          type="text"
          placeholder="tt.mm.jjjj"
          ngbDatepicker
          #deletionLockUntilCalendar="ngbDatepicker"
          name="deletionLockUntil"
          id="deletionLockUntil"
          [ngrxFormControlState]="((userModuleAssignmentSandbox.formState$ | async)?.controls)['deletionLockUntil']"
          [ngrxValueConverter]="userModuleAssignmentSandbox.dateValueConverter"
          readonly
        />
        <div class="input-group-append">
          <button class="btn btn-outline-primary calendar" (click)="reset('deletionLockUntil')" type="button">
            <i class="fa fa-times-circle" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- assignmentNote -->
    <div class="form-group row">
      <label for="assignmentNote" class="col-sm-4 col-form-label">{{ 'UserModuleAssignment.AssignmentNote' | translate }}</label>
      <div class="col-sm-7">
        <input
          type="text"
          class="form-check-input form-control"
          id="assignmentNote"
          [ngrxFormControlState]="((userModuleAssignmentSandbox.formState$ | async)?.controls)['assignmentNote']"
        />
      </div>
    </div>

    <!-- buttons -->
    <button type="button" class="btn btn-primary btn-sm btn-success" (click)="userModuleAssignmentSandbox.persistUserModuleAssignment()">
      {{ 'SaveBtn' | translate }}
    </button>

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