| <!-- /******************************************************************************** |
| * 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-append"> |
| <button class="btn btn-outline-primary calendar" (click)="expiringDateCalendar.toggle()" type="button"> |
| <i class="fa fa-calendar"></i> |
| </button> |
| </div> |
| <input |
| 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]="true" |
| /> |
| </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-append"> |
| <button class="btn btn-outline-primary calendar" (click)="deletionLockUntilCalendar.toggle()" type="button"> |
| <i class="fa fa-calendar"></i> |
| </button> |
| </div> |
| <input |
| 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]="true" |
| /> |
| </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" |
| 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> |