schedule-form-edit.component.html
unknown
html
3 years ago
22 kB
11
Indexable
<form [formGroup]="schedule" class="row">
<div class="col-md-12">
<div class="form-group col-md-6">
<label class="label" for="input-academic-year">
{{ 'other.menu_extracurricular.master_extracurricular.add.academic_year' | translate }}<span class="text-danger">*</span>
</label>
<div>
<input id="input-academic-year"
nbInput
fullWidth
type="text"
[placeholder]="('other.menu_extracurricular.master_extracurricular.add.select_academic_year' | translate)"
formControlName="academic_year_label">
</div>
</div>
<div class="form-group col-md-6">
<label class="label" for="input-school-location-id">
{{ 'other.menu_extracurricular.master_extracurricular.add.school_location' | translate }}<span class="text-danger">*</span>
</label>
<div>
<input id="input-school-location-id"
nbInput
fullWidth
type="text"
[placeholder]="('other.menu_extracurricular.master_extracurricular.add.select_school_location' | translate)"
formControlName="school_location_label">
</div>
</div>
<div class="form-group col-md-6">
<label class="label" for="input-extracurricular-category">
{{ 'other.menu_extracurricular.master_extracurricular.add.extracurricular_category' | translate }}<span class="text-danger">*</span>
</label>
<skr-select-excul-category
id="input-extracurricular-category"
[placeholder]="('other.menu_extracurricular.master_extracurricular.add.choose_extracurricular_category' | translate)"
[exculId]="schedule.get('excul_category_id').value"
(exculChange)="onChangeExculCategory($event)">
</skr-select-excul-category>
<ng-container
*ngIf="schedule.controls['excul_category_id'].touched && schedule.controls['excul_category_id'].invalid">
<small *ngIf="schedule.controls['excul_category_id'].errors['required']" class="form-text text-danger">
{{ 'other.menu_extracurricular.master_extracurricular.add.required_extracurricular_category' | translate }}
</small>
</ng-container>
</div>
<div class="form-group col-md-6">
<label class="label" for="input-extracurricular-name">
{{ 'other.menu_extracurricular.master_extracurricular.add.extracurricular_name' | translate }}<span class="text-danger">*</span>
</label>
<input [placeholder]="('other.menu_extracurricular.master_extracurricular.add.input_extracurricular_name' | translate)" formControlName="extracurricular_name"
fullWidth
id="input-extracurricular-name" nbInput
type="text">
<ng-container
*ngIf="schedule.controls['extracurricular_name'].touched && schedule.controls['extracurricular_name'].invalid">
<small *ngIf="schedule.controls['extracurricular_name'].errors['required']" class="form-text text-danger">
{{ 'other.menu_extracurricular.master_extracurricular.add.required_extracurricular_name' | translate }}
</small>
</ng-container>
</div>
<div class="form-group col-md-6">
<label class="label" for="input-extracurricular-description">
{{ 'other.menu_extracurricular.master_extracurricular.add.extracurricular_description' | translate }}<span class="text-danger">*</span>
</label>
<textarea [placeholder]="('other.menu_extracurricular.master_extracurricular.add.input_extracurricular_description' | translate)" formControlName="extracurricular_description"
fullWidth
id="input-extracurricular-description"
nbInput
type="text"></textarea>
<ng-container
*ngIf="schedule.controls['extracurricular_description'].touched && schedule.controls['extracurricular_description'].invalid">
<small *ngIf="schedule.controls['extracurricular_description'].errors['required']"
class="form-text text-danger">
{{ 'other.menu_extracurricular.master_extracurricular.add.required_extracurricular_description' | translate }}
</small>
</ng-container>
</div>
<div class="form-group col-md-6">
<label class="label">
{{ 'other.menu_extracurricular.master_extracurricular.add.extracurricular_schedule' | translate }}<span class="text-danger">*</span>
</label>
<div class="row">
<div class="col-md-3" *ngFor="let day of schoolDays; let index = index">
<nb-checkbox
[checked]="day.checked"
(checkedChange)="onCheckSchoolDay($event, index)">
{{day.schoolday_name}}
</nb-checkbox>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<table class="table table-bordered table-sm ml-3"
id="excul-schedule-form">
<thead class="text-center">
<tr>
<th>
{{ 'other.menu_extracurricular.master_extracurricular.add.day' | translate }}
</th>
<th>
{{ 'other.menu_extracurricular.master_extracurricular.add.time_start' | translate }}<span class="text-danger">*</span>
</th>
<th>
{{ 'other.menu_extracurricular.master_extracurricular.add.time_end' | translate }}<span class="text-danger">*</span>
</th>
<th>
{{ 'other.menu_extracurricular.master_extracurricular.add.venue' | translate }}
</th>
<th>
{{ 'other.menu_extracurricular.master_extracurricular.add.equipment' | translate }}
</th>
</tr>
</thead>
<tbody>
<ng-container formArrayName="schedules">
<ng-container *ngFor="let schedule of onGetExculSchedules().controls; let scheduleIdx = index">
<ng-container [formGroupName]="scheduleIdx">
<tr>
<td class="align-middle text-center">
<p class="mt-2">{{onGetExculSchedules().at(scheduleIdx).get('schoolday_name').value}}</p>
</td>
<td class="align-middle">
<input [nbTimepicker]="startTimepicker"
[value]="onGetExculSchedules().at(scheduleIdx).get('start_time').value"
fullWidth
nbInput
autocomplete="off"
(keydown)="false"
type="text">
<nb-timepicker
(onSelectTime)="onChangeStartTime($event, scheduleIdx)"
#startTimepicker>
</nb-timepicker>
<ng-container *ngIf="onGetExculSchedules().at(scheduleIdx).get('start_time').touched
&& onGetExculSchedules().at(scheduleIdx).get('start_time').invalid">
<small *ngIf="onGetExculSchedules().at(scheduleIdx).get('start_time').errors['required']"
class="form-text text-danger">
{{ 'other.menu_extracurricular.master_extracurricular.add.required_time_start' | translate }}
</small>
</ng-container>
<small *ngIf="!onGetExculSchedules().at(scheduleIdx).get('is_time_valid').value"
class="form-text text-danger">
{{ 'Start Time cannot be less than End Time!' | translate }}
</small>
</td>
<td class="align-middle">
<input [nbTimepicker]="endTimepicker"
[value]="onGetExculSchedules().at(scheduleIdx).get('end_time').value"
fullWidth
nbInput
autocomplete="off"
(keydown)="false"
type="text">
<nb-timepicker
(onSelectTime)="onChangeEndTime($event, scheduleIdx)"
#endTimepicker>
</nb-timepicker>
<ng-container *ngIf="onGetExculSchedules().at(scheduleIdx).get('end_time').touched
&& onGetExculSchedules().at(scheduleIdx).get('end_time').invalid">
<small *ngIf="onGetExculSchedules().at(scheduleIdx).get('end_time').errors['required']"
class="form-text text-danger">
{{ 'other.menu_extracurricular.master_extracurricular.add.required_time_end' | translate }}
</small>
</ng-container>
<small *ngIf="!onGetExculSchedules().at(scheduleIdx).value.is_time_valid"
class="form-text text-danger">
{{ 'End Time cannot be greater than Start Time!' | translate }}
</small>
</td>
<td class="align-middle">
<input [placeholder]="('other.menu_extracurricular.master_extracurricular.add.input_venue' | translate)"
formControlName="venue"
fullWidth
nbInput
type="text">
</td>
<td class="align-middle">
<textarea [placeholder]="('other.menu_extracurricular.master_extracurricular.add.input_equipment' | translate)"
formControlName="equipment"
fullWidth
nbInput
type="text">
</textarea>
</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
</tbody>
</table>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-6 d-flex justify-content-between">
<div class="form-group col-md-6 mr-3">
<label class="label" for="input-start-date">
{{ 'other.menu_extracurricular.master_extracurricular.add.start_date' | translate }}<span class="text-danger">*</span>
</label>
<input [nbDatepicker]="datepickerStart"
[placeholder]="('other.menu_extracurricular.master_extracurricular.add.input_start_date' | translate)"
[value]="startDate"
fullWidth
id="input-start-date"
nbInput
autocomplete="off"
(keydown)="false"
type="text">
<nb-datepicker
(dateChange)="sessionCount(); onValidateDate('start', $event);"
format="MMM dd, yyyy"
#datepickerStart>
</nb-datepicker>
<ng-container *ngIf="schedule.controls['start_date'].touched && schedule.controls['start_date'].invalid">
<small *ngIf="schedule.controls['start_date'].errors['required']" class="form-text text-danger">
{{ 'other.menu_extracurricular.master_extracurricular.add.required_start_date' | translate }}
</small>
</ng-container>
<ng-container *ngIf="schedule.controls['end_date'].value && schedule.controls['start_date'].value">
<small *ngIf="!validation.date" class="form-text text-danger">
{{ 'Start date cannot be less than academic start date!' | translate }}
</small>
</ng-container>
</div>
<div class="form-group col-md-6">
<label class="label" for="input-end-date">
{{ 'other.menu_extracurricular.master_extracurricular.add.end_date' | translate }}<span class="text-danger">*</span>
</label>
<input [nbDatepicker]="datepickerEnd"
[placeholder]="('other.menu_extracurricular.master_extracurricular.add.input_end_date' | translate)"
[value]="endDate"
fullWidth
autocomplete="off"
(keydown)="false"
id="input-end-date"
nbInput
type="text">
<nb-datepicker
(dateChange)="sessionCount(); onValidateDate('end', $event);"
format="MMM dd, yyyy"
#datepickerEnd>
</nb-datepicker>
<ng-container *ngIf="schedule.controls['end_date'].touched && schedule.controls['end_date'].invalid">
<small *ngIf="schedule.controls['end_date'].errors['required']" class="form-text text-danger">
{{ 'other.menu_extracurricular.master_extracurricular.add.required_end_date' | translate }}
</small>
</ng-container>
<ng-container *ngIf="schedule.controls['end_date'].value && schedule.controls['start_date'].value">
<small *ngIf="!validation.date" class="form-text text-danger">
{{ 'End date cannot be less than academic start date!' | translate }}
</small>
</ng-container>
</div>
</div>
</div>
<div class="form-group col-md-6">
<label class="label" for="input-session">
{{ 'other.menu_extracurricular.master_extracurricular.add.sessions' | translate }}
</label>
<div [nbSpinner]="loading.sessions">
<input formControlName="sessions_label" fullWidth
id="input-session"
nbInput
type="number">
</div>
</div>
<div class="form-group col-md-6">
<label class="label" for="input-maximum-registration-date">
{{ 'other.menu_extracurricular.master_extracurricular.add.maximum_registration_date' | translate }}<span class="text-danger">*</span>
</label>
<div>
<input [nbDatepicker]="datepickerMaxRegistration"
[placeholder]="('other.menu_extracurricular.master_extracurricular.add.input_maximum_registration_date' | translate)"
[value]="maxRegistDate"
fullWidth id="input-maximum-registration-date"
nbInput
autocomplete="off"
(keydown)="false"
type="text">
<nb-datepicker
(dateChange)="onValidateDate('max', $event);"
format="MMM DD, YYYY"
#datepickerMaxRegistration>
</nb-datepicker>
<ng-container
*ngIf="schedule.controls['max_registration_date'].touched && schedule.controls['max_registration_date'].invalid">
<small *ngIf="schedule.controls['max_registration_date'].errors['required']" class="form-text text-danger">
{{ 'other.menu_extracurricular.master_extracurricular.add.required_maximum_registration_date' | translate }}
</small>
</ng-container>
<ng-container *ngIf="schedule.controls['end_date'].value && schedule.controls['start_date'].value && schedule.controls['max_registration_date'].value">
<small *ngIf="!validation.date" class="form-text text-danger">
{{ 'Maximum registration must be between Start and End Date!' | translate }}
</small>
</ng-container>
</div>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="col-md-6">
<nb-checkbox (checkedChange)="checkSupervisor($event)"
[checked]="supervisor"
[disabled]="!this.schedule.controls['school_location_id'].value">
{{ 'other.menu_extracurricular.master_extracurricular.add.supervisor' | translate }}
</nb-checkbox>
</div>
<div *ngIf="supervisor" class="ml-3 mt-3">
<nb-form-field>
<input [formControl]="searchSupervisor" [placeholder]="('other.menu_extracurricular.master_extracurricular.add.search_supervisor' | translate)" fieldSize="medium"
nbInput
type="text">
<button ghost nbButton nbSuffix>
<nb-icon icon="search-outline" pack="eva">
</nb-icon>
</button>
</nb-form-field>
<ngx-datatable
#tableExtracurricularSupervisorList
[count]="supervisors.length"
[footerHeight]="40"
[headerHeight]="40"
[loadingIndicator]="loading.supervisors"
[rowHeight]="40"
[rows]="supervisors"
[scrollbarV]="true"
class="material expandable"
columnMode="force">
<ngx-datatable-column [flexGrow]="1"
[width]="50"
canAutoResize="false"
cellClass="text-center"
name=""
prop="staff_id"
[sortable]="false">
<ng-template let-index="rowIndex" ngx-datatable-cell-template>
<nb-checkbox [checked]="supervisors[index].checked"
(checkedChange)="onSelectSupervisor($event, index)">
</nb-checkbox>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
[flexGrow]="1"
[name]="('other.menu_extracurricular.master_extracurricular.add.personnel_id' | translate )" canAutoResize="true" prop="personnel_id" sortable="false">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
[flexGrow]="1"
[name]="('other.menu_extracurricular.master_extracurricular.add.personnel_school_name' | translate )" canAutoResize="true" prop="staff_name" sortable="false">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [flexGrow]="1"
[name]="('other.menu_extracurricular.master_extracurricular.add.email' | translate )" canAutoResize="true" prop="email" sortable="false">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [flexGrow]="1"
[name]="('other.menu_extracurricular.master_extracurricular.add.position' | translate)" canAutoResize="true" prop="position" sortable="true">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
<div class="col-md-12 mb-3">
<div class="col-md-6">
<nb-checkbox (checkedChange)="checkCoach($event)"
[checked]="coach"
[disabled]="!this.schedule.controls['school_location_id'].value">
{{ 'other.menu_extracurricular.master_extracurricular.add.coach' | translate }}
</nb-checkbox>
</div>
<div *ngIf="coach" class="ml-3">
<ngx-datatable
#tableExtracurricularCoachList
[columnMode]="'force'"
[count]="coaches.length"
[footerHeight]="40"
[headerHeight]="40"
[loadingIndicator]="loading.coaches"
[rowHeight]="40"
[rows]="coaches"
[scrollbarV]="true"
class="material expandable">
<ngx-datatable-column [flexGrow]="1" [headerCheckboxable]="true" [width]="50" canAutoResize="false" class="align-middle"
name="" prop="coach_id" [sortable]="false">
<ng-template let-index="rowIndex" ngx-datatable-cell-template>
<nb-checkbox [checked]="coaches[index].checked"
(checkedChange)="onSelectCoach($event, index)">
</nb-checkbox>
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column
[flexGrow]="1"
[name]="('other.menu_extracurricular.master_extracurricular.add.coach_id_number' | translate)" canAutoResize="true" prop="coach_id" sortable="false">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [flexGrow]="1"
[name]="('other.menu_extracurricular.master_extracurricular.add.name' | translate)" canAutoResize="true" prop="name" sortable="false">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [flexGrow]="1"
[name]="('other.menu_extracurricular.master_extracurricular.add.position' | translate )" canAutoResize="true" prop="position" sortable="false">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
<ngx-datatable-column [flexGrow]="1"
[name]="('other.menu_extracurricular.master_extracurricular.add.coach_fee' | translate)" canAutoResize="true" prop="coach_fee" sortable="true">
<ng-template let-value="value" ngx-datatable-cell-template>
{{ value }}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<button (click)="onCancel()"
class="mr-3"
nbButton
status="warning"
type="button">
{{ 'main.cancel' | translate }}
</button>
<button (click)="onClickNext()"
nbButton
class="float-right"
[disabled]="schedule.invalid || !validation.date"
status="primary">
{{ 'other.menu_extracurricular.master_extracurricular.add.next' | translate }}
</button>
</div>
</div>
</form>