69 lines
3.2 KiB
HTML
69 lines
3.2 KiB
HTML
<h2 mat-dialog-title>{{ isEditMode ? ('editCalendar' | translate) : ('addCalendar' | translate) }}</h2>
|
|
<mat-dialog-content class="form-container">
|
|
<mat-slide-toggle [(ngModel)]="isRemoteAvailable" class="example-margin">
|
|
{{ 'remoteAvailability' | translate }}
|
|
</mat-slide-toggle>
|
|
|
|
<div *ngIf="!isRemoteAvailable" class="form-group">
|
|
<mat-label>{{ 'selectWeekDays' | translate }}</mat-label>
|
|
<div class="row">
|
|
<div class="col-md-6 checkbox-group">
|
|
<mat-checkbox *ngFor="let day of weekDays.slice(0, (weekDays.length / 2) + 1)" [(ngModel)]="busyWeekDays[day]">
|
|
{{ day }}
|
|
</mat-checkbox>
|
|
</div>
|
|
<div class="col-md-6 checkbox-group">
|
|
<mat-checkbox *ngFor="let day of weekDays.slice(weekDays.length / 2 + 1)" [(ngModel)]="busyWeekDays[day]">
|
|
{{ day }}
|
|
</mat-checkbox>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="time-fields">
|
|
<mat-form-field appearance="fill" class="time-field">
|
|
<mat-label>{{ 'startTime' | translate }}</mat-label>
|
|
<input matInput [(ngModel)]="busyFromHour" type="time" placeholder="{{ 'startTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="fill" class="time-field">
|
|
<mat-label>{{ 'endTime' | translate }}</mat-label>
|
|
<input matInput [(ngModel)]="busyToHour" type="time" placeholder="{{ 'endTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="isRemoteAvailable" class="form-group">
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>{{ 'reasonLabel' | translate }}</mat-label>
|
|
<input matInput [(ngModel)]="availableReason" placeholder="{{ 'reasonPlaceholder' | translate }}" [required]="isRemoteAvailable">
|
|
</mat-form-field>
|
|
<div class="time-fields">
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>{{ 'startDate' | translate }}</mat-label>
|
|
<input matInput [matDatepicker]="picker1" [(ngModel)]="availableFromDate" [required]="isRemoteAvailable">
|
|
<mat-hint>MM/DD/YYYY</mat-hint>
|
|
<mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
|
|
<mat-datepicker #picker1></mat-datepicker>
|
|
</mat-form-field>
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>{{ 'endDate' | translate }}</mat-label>
|
|
<input matInput [matDatepicker]="picker2" [(ngModel)]="availableToDate" [required]="isRemoteAvailable">
|
|
<mat-hint>MM/DD/YYYY</mat-hint>
|
|
<mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
|
|
<mat-datepicker #picker2></mat-datepicker>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions align="end">
|
|
<button mat-button (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
|
|
<button
|
|
mat-button
|
|
(click)="submitRule()"
|
|
cdkFocusInitial
|
|
[disabled]="(!isRemoteAvailable && (!busyFromHour || !busyToHour)) || (isRemoteAvailable && (!availableReason || !availableFromDate || !availableToDate))">
|
|
{{ isEditMode ? ('buttonSave' | translate) : ('buttonAdd' | translate) }}
|
|
</button>
|
|
</mat-dialog-actions>
|