cbsnexora/src/app/organization/holidays/edit-holiday/edit-holiday.component.html

<div class="container">
  <mat-card>
    <form [formGroup]="holidayForm" (ngSubmit)="submit()">
      <mat-card-content>
        <div class="layout-column">
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
            <input matInput required autofocus formControlName="name" />
            @if (holidayForm.controls.name.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          @if (!isActiveHoliday) {
            <mat-form-field (click)="fromDatePicker.open()">
              <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
              <input
                matInput
                [min]="minDate"
                [max]="maxDate"
                [matDatepicker]="fromDatePicker"
                required
                formControlName="fromDate"
              />
              <mat-datepicker-toggle matSuffix [for]="fromDatePicker"></mat-datepicker-toggle>
              <mat-datepicker #fromDatePicker></mat-datepicker>
              @if (holidayForm.controls.fromDate.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.From Date' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
          }

          @if (!isActiveHoliday) {
            <mat-form-field (click)="toDatePicker.open()">
              <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
              <input
                matInput
                [min]="minDate"
                [max]="maxDate"
                [matDatepicker]="toDatePicker"
                required
                formControlName="toDate"
              />
              <mat-datepicker-toggle matSuffix [for]="toDatePicker"></mat-datepicker-toggle>
              <mat-datepicker #toDatePicker></mat-datepicker>
              @if (holidayForm.controls.toDate.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.To Date' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
          }

          @if (!isActiveHoliday) {
            <mat-form-field>
              <mat-label>{{ 'labels.inputs.Repayment Scheduling Type' | translate }}</mat-label>
              <mat-select required formControlName="reschedulingType">
                @for (repayments of holidayData.repaymentSchedulingTypes; track repayments) {
                  <mat-option [value]="repayments.id">
                    {{ repayments.value }}
                  </mat-option>
                }
              </mat-select>
              @if (holidayForm.controls.reschedulingType.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.Repayment Scheduling Type' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
          }

          @if (!isActiveHoliday && reSchedulingType === 2) {
            <mat-form-field (click)="repaymentDatePicker.open()">
              <mat-label>{{ 'labels.inputs.Repayment scheduled to' | translate }}</mat-label>
              <input
                matInput
                [min]="minDate"
                [max]="maxDate"
                [matDatepicker]="repaymentDatePicker"
                required
                formControlName="repaymentsRescheduledTo"
              />
              <mat-datepicker-toggle matSuffix [for]="repaymentDatePicker"></mat-datepicker-toggle>
              <mat-datepicker #repaymentDatePicker></mat-datepicker>
              @if (holidayForm.controls.repaymentsRescheduledTo.hasError('required')) {
                <mat-error>
                  {{ 'labels.inputs.Repayment scheduled to' | translate }} {{ 'labels.commons.is' | translate }}
                  <strong>{{ 'labels.commons.required' | translate }}</strong>
                </mat-error>
              }
            </mat-form-field>
          }

          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
            <input matInput formControlName="description" />
          </mat-form-field>
        </div>
      </mat-card-content>

      <mat-card-actions class="layout-row align-center gap-5px responsive-column">
        <button type="button" mat-raised-button [routerLink]="['../']">
          {{ 'labels.buttons.Cancel' | translate }}
        </button>
        <button
          mat-raised-button
          color="primary"
          [disabled]="!holidayForm.valid"
          *mifosxHasPermission="'UPDATE_HOLIDAY'"
        >
          {{ 'labels.buttons.Submit' | translate }}
        </button>
      </mat-card-actions>
    </form>
  </mat-card>
</div>