schedule-form-edit.component.html

mail@pastecode.io avatar
unknown
html
2 years ago
22 kB
2
Indexable
Never
<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>