1
0
Files
yel-dspace-angular/src/app/shared/access-control-form-container/access-control-array-form/access-control-array-form.component.html

116 lines
4.3 KiB
HTML

<form #ngForm="ngForm">
@if (showWarning) {
<div class="alert alert-warning">
{{'access-control-no-access-conditions-warning-message' | translate}}
</div>
}
@for (control of form.accessControls; track trackById($index, control)) {
<div ngModelGroup="access-control-item-{{control.id}}" class="access-control-item mt-3">
<div class="d-flex flex-column">
<div>
<label class="form-label" for="accesscontroloption-{{control.id}}">
{{'access-control-option-label' | translate}}
</label>
<select
id="accesscontroloption-{{control.id}}"
[disabled]="ngForm.disabled"
[(ngModel)]="control.itemName"
(ngModelChange)="accessControlChanged(control, $event)"
name="itemName-{{control.id}}"
class="form-select">
<option value=""></option>
@for (option of dropdownOptions; track option) {
<option [value]="option.name">
{{ option.name }}
</option>
}
</select>
<small class="form-text text-muted">
{{'access-control-option-note' | translate}}
</small>
</div>
@if (control.hasStartDate) {
<div class="mt-3">
<label class="form-label" for="accesscontrolstartdate-{{control.id}}">
{{'access-control-option-start-date' | translate}}
</label>
<div class="input-group">
<input
id="accesscontrolstartdate-{{control.id}}"
class="form-control"
placeholder="yyyy-mm-dd"
[(ngModel)]="control.startDate"
name="startDate-{{control.id}}"
[maxDate]="control.maxStartDate | toDate"
ngbDatepicker
placement="top-start top-end bottom-start bottom-end"
#d="ngbDatepicker"
/>
<div class="input-group-append">
<button
class="btn btn-outline-secondary fas fa-calendar"
[dsBtnDisabled]="ngForm.disabled"
(click)="d.toggle()" type="button">
</button>
</div>
</div>
<small class="form-text text-muted">
{{'access-control-option-start-date-note' | translate}}
</small>
</div>
}
@if (control.hasEndDate) {
<div class="mt-3">
<label class="form-label" for="accesscontrolenddate-{{control.id}}">
{{'access-control-option-end-date' | translate}}
</label>
<div class="input-group">
<input
id="accesscontrolenddate-{{control.id}}"
class="form-control"
placeholder="yyyy-mm-dd"
[(ngModel)]="control.endDate"
name="endDate-{{control.id}}"
[maxDate]="control.maxEndDate | toDate"
ngbDatepicker
placement="top-start top-end bottom-start bottom-end"
#d1="ngbDatepicker"
/>
<div class="input-group-append">
<button
type="button" class="btn btn-outline-secondary fas fa-calendar"
[dsBtnDisabled]="ngForm.disabled"
(click)="d1.toggle()">
</button>
</div>
</div>
<small class="form-text text-muted">
{{'access-control-option-end-date-note' | translate}}
</small>
</div>
}
</div>
<div>
<span aria-hidden="true" class="mb-2 d-inline-block">&nbsp;</span>
<div class="input-group">
<button type="button" class="btn btn-outline-danger"
[attr.aria-label]="'access-control-remove' | translate"
[dsBtnDisabled]="ngForm.disabled || form.accessControls.length === 1"
(click)="removeAccessControlItem(control.id)">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
}
<button type="button" id="add-btn-{{type}}" class="btn btn-outline-primary mt-3"
[dsBtnDisabled]="ngForm.disabled"
(click)="addAccessControlItem()">
<i class="fas fa-plus"></i>
{{'access-control-add-more' | translate}}
</button>
</form>