cbsnexora/src/app/account-transfers/make-account-transfers/make-account-transfers.component.html

<div class="container">
  <mat-card>
    <mat-card-content>
      <div fxLayout="row wrap" fxLayout.lt-md="column">
        <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferring From Details' | translate }}</h3>

        <mat-divider [inset]="true"></mat-divider>

        <div fxFlexFill>
          <span fxFlex="40%">{{ 'labels.inputs.Applicant' | translate }}</span>
          <span fxFlex="60%">{{ accountTransferTemplateData.fromClient.displayName }}</span>
        </div>

        <div fxFlexFill>
          <span fxFlex="40%">{{ 'labels.inputs.Office' | translate }}</span>
          <span fxFlex="60%">{{ accountTransferTemplateData.fromOffice.name }}</span>
        </div>

        <div fxFlexFill>
          <span fxFlex="40%">{{ 'labels.inputs.From Account' | translate }}</span>
          <span fxFlex="60%"
            >{{ accountTransferTemplateData.fromAccount.productName }}&nbsp;-&nbsp;#{{
              accountTransferTemplateData.fromAccount.accountNo
            }}</span
          >
        </div>

        <div fxFlexFill>
          <span fxFlex="40%">{{ 'labels.inputs.From Account Type' | translate }}</span>
          <span fxFlex="60%">{{ accountTransferTemplateData.fromAccountType.value }}</span>
        </div>

        <div fxFlexFill>
          <span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
          <span fxFlex="60%">{{ accountTransferTemplateData.currency.name }}</span>
        </div>
      </div>

      <h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Transferred To' | translate }}</h3>

      <mat-divider [inset]="true"></mat-divider>

      <form [formGroup]="makeAccountTransferForm">
        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
          <mat-form-field fxFlex="98%" (click)="transferDatePicker.open()">
            <mat-label>{{ 'labels.inputs.Transaction Date' | translate }}</mat-label>
            <input
              matInput
              [min]="minDate"
              [max]="maxDate"
              [matDatepicker]="transferDatePicker"
              required
              formControlName="transferDate"
            />
            <mat-datepicker-toggle matSuffix [for]="transferDatePicker"></mat-datepicker-toggle>
            <mat-datepicker #transferDatePicker></mat-datepicker>
            <mat-error *ngIf="makeAccountTransferForm.controls.transferDate.hasError('required')">
              {{ 'labels.inputs.Transaction Date' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          </mat-form-field>

          <mat-form-field fxFlex="98%">
            <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
            <mat-select required formControlName="toOfficeId" (selectionChange)="changeEvent()">
              <mat-option *ngFor="let toOfficeType of toOfficeTypeData" [value]="toOfficeType.id">
                {{ toOfficeType.name }}
              </mat-option>
            </mat-select>
            <mat-error *ngIf="makeAccountTransferForm.controls.toOfficeId.hasError('required')">
              {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          </mat-form-field>

          <mat-form-field fxFlex="98%">
            <mat-label>{{ 'labels.inputs.Client' | translate }}</mat-label>
            <input matInput formControlName="toClientId" [matAutocomplete]="clientsAutocomplete" />
            <mat-error *ngIf="makeAccountTransferForm.controls.toClientId.hasError('required')">
              {{ 'labels.inputs.Client' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          </mat-form-field>

          <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
            <mat-option *ngFor="let client of clientsData" [value]="client">
              {{ client.id }} - {{ client.displayName }}
            </mat-option>
          </mat-autocomplete>

          <mat-form-field fxFlex="98%">
            <mat-label>{{ 'labels.inputs.Account Type' | translate }}</mat-label>
            <mat-select required formControlName="toAccountType" (selectionChange)="changeEvent()">
              <mat-option *ngFor="let toAccountType of toAccountTypeData" [value]="toAccountType.id">
                {{ toAccountType.value }}
              </mat-option>
            </mat-select>
            <mat-error *ngIf="makeAccountTransferForm.controls.toAccountType.hasError('required')">
              {{ 'labels.inputs.Account Type' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          </mat-form-field>

          <mat-form-field fxFlex="98%">
            <mat-label>{{ 'labels.inputs.Account' | translate }}</mat-label>
            <mat-select required formControlName="toAccountId" (selectionChange)="changeEvent()">
              <mat-option *ngFor="let toAccount of toAccountData" [value]="toAccount.id">
                {{ toAccount.productName }} - {{ toAccount.accountNo }}
              </mat-option>
            </mat-select>
            <mat-error *ngIf="makeAccountTransferForm.controls.toAccountId.hasError('required')">
              {{ 'labels.inputs.Account' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          </mat-form-field>

          <mat-form-field fxFlex="98%">
            <mat-label>{{ 'labels.inputs.Amount' | translate }}</mat-label>
            <input type="number" matInput required formControlName="transferAmount" />
            <mat-error *ngIf="makeAccountTransferForm.controls.transferAmount.hasError('required')">
              {{ 'labels.inputs.Amount' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          </mat-form-field>

          <mat-form-field fxFlex="98%">
            <mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
            <textarea
              matInput
              formControlName="transferDescription"
              cdkTextareaAutosize
              cdkAutosizeMinRows="2"
            ></textarea>
            <mat-error *ngIf="makeAccountTransferForm.controls.transferDescription.hasError('required')">
              {{ 'labels.inputs.Transfer Description' | translate }} {{ 'labels.commons.is' | translate }}
              <strong>{{ 'labels.commons.required' | translate }}</strong>
            </mat-error>
          </mat-form-field>
        </div>
      </form>
    </mat-card-content>

    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
      <button type="button" mat-raised-button [routerLink]="['../..']">
        {{ 'labels.buttons.Cancel' | translate }}
      </button>
      <button
        mat-raised-button
        color="primary"
        [disabled]="!makeAccountTransferForm.valid"
        *mifosxHasPermission="'CREATE_ACCOUNTTRANSFER'"
        (click)="submit()"
      >
        {{ 'labels.buttons.Submit' | translate }}
      </button>
    </mat-card-actions>
  </mat-card>
</div>