cbsnexora/src/app/deposits/recurring-deposits/recurring-deposits-account-actions/add-charge-recurring-deposits-account/add-charge-recurring-deposits-account.component.html

<div class="container">
  <mat-card>
    <form [formGroup]="recurringDepositsChargeForm" (ngSubmit)="submit()">
      <mat-card-content>
        <div class="layout-column">
          <mat-form-field>
            <mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
            <mat-select required formControlName="chargeId">
              @for (savingsCharge of savingsChargeOptions; track savingsCharge) {
                <mat-option [value]="savingsCharge.id">
                  {{ savingsCharge.name + ' (' + savingsCharge.currency.name + ')' }}
                </mat-option>
              }
            </mat-select>
            @if (recurringDepositsChargeForm.controls.chargeId.hasError('required')) {
              <mat-error>
                {{ 'labels.inputs.Charge' | translate }} {{ 'labels.commons.is' | translate }}
                <strong>{{ 'labels.commons.required' | translate }}</strong>
              </mat-error>
            }
          </mat-form-field>

          @if (chargeDetails) {
            <div class="layout-column">
              <mat-form-field>
                <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
                <input type="number" required matInput formControlName="amount" />
                @if (recurringDepositsChargeForm.controls.amount.hasError('required')) {
                  <mat-error>
                    {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
                    <strong>{{ 'labels.commons.required' | translate }}</strong>
                  </mat-error>
                }
              </mat-form-field>
              <mat-form-field>
                <mat-label>{{ 'labels.inputs.Charge Calculation' | translate }}</mat-label>
                <mat-select formControlName="chargeCalculationType">
                  @for (chargeCalculation of chargeDetails.chargeCalculationTypeOptions; track chargeCalculation) {
                    <mat-option [value]="chargeCalculation.id">
                      {{ chargeCalculation.value }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
              <mat-form-field>
                <mat-label>{{ 'labels.inputs.Charge time type' | translate }}</mat-label>
                <mat-select formControlName="chargeTimeType">
                  @for (chargeTime of chargeDetails.chargeTimeTypeOptions; track chargeTime) {
                    <mat-option [value]="chargeTime.id">
                      {{ chargeTime.value }}
                    </mat-option>
                  }
                </mat-select>
              </mat-form-field>
              @if (recurringDepositsChargeForm.contains('dueDate')) {
                <mat-form-field (click)="dueDatePicker.open()">
                  <mat-label>{{ 'labels.inputs.Due for collection on' | translate }}</mat-label>
                  <input
                    matInput
                    [min]="minDate"
                    [max]="maxDate"
                    [matDatepicker]="dueDatePicker"
                    required
                    formControlName="dueDate"
                  />
                  <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
                  <mat-datepicker #dueDatePicker></mat-datepicker>
                  @if (recurringDepositsChargeForm.controls.dueDate.hasError('required')) {
                    <mat-error>
                      {{ 'labels.inputs.Due for collection on' | translate }} {{ 'labels.commons.is' | translate }}
                      <strong>{{ 'labels.commons.required' | translate }}</strong>
                    </mat-error>
                  }
                </mat-form-field>
              }
              @if (recurringDepositsChargeForm.contains('feeOnMonthDay')) {
                <mat-form-field (click)="feeOnMonthDayPicker.open()">
                  <mat-label>{{ 'labels.inputs.Due On' | translate }}</mat-label>
                  <input
                    matInput
                    [min]="minDate"
                    [max]="maxDate"
                    [matDatepicker]="feeOnMonthDayPicker"
                    required
                    formControlName="feeOnMonthDay"
                  />
                  <mat-datepicker-toggle matSuffix [for]="feeOnMonthDayPicker"></mat-datepicker-toggle>
                  <mat-datepicker #feeOnMonthDayPicker></mat-datepicker>
                  @if (recurringDepositsChargeForm.controls.feeOnMonthDay.hasError('required')) {
                    <mat-error>
                      {{ 'labels.inputs.Due Date' | translate }} {{ 'labels.commons.is' | translate }}
                      <strong>{{ 'labels.commons.required' | translate }}</strong>
                    </mat-error>
                  }
                </mat-form-field>
              }
              @if (recurringDepositsChargeForm.contains('feeInterval')) {
                <mat-form-field>
                  <mat-label>{{ 'labels.inputs.Repeats Every' | translate }}</mat-label>
                  <input matInput formControlName="feeInterval" />
                </mat-form-field>
              }
            </div>
          }
        </div>

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