src/app/customers/cases/form/detail/detail.component.html

<!--
  Licensed to the Apache Software Foundation (ASF) under one or more
  contributor license agreements.  See the NOTICE file distributed with
  this work for additional information regarding copyright ownership.
  The ASF licenses this file to You under the Apache License, Version 2.0
  (the "License"); you may not use this file except in compliance with
  the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<form [formGroup]="form" layout="column">
  <mat-form-field layout-margin>
    <mat-select placeholder="{{'Choose product' | translate}}" formControlName="productIdentifier">
      <mat-option *ngFor="let product of products" [value]="product.identifier" matTooltip="{{product.description}}">{{ product.name }}</mat-option>
    </mat-select>
  </mat-form-field>
  <fims-id-input placeholder="{{'Short name' | translate}}" [form]="form" controlName="identifier" [readonly]="editMode"></fims-id-input>
  <fims-number-input
    [form]="form"
    controlName="principalAmount"
    placeholder="{{'Principal amount' | translate}}"
    [decimalLimit]="product?.minorCurrencyUnitDigits"
    hint="{{product?.balanceRange.minimum | number:numberFormat}} - {{product?.balanceRange.maximum | number:numberFormat}}">
  </fims-number-input>
  <fims-number-input
    [form]="form"
    controlName="interest"
    placeholder="{{'Interest rate' | translate}}"
    [decimalLimit]="product?.minorCurrencyUnitDigits"
    hint="{{product?.interestRange.minimum | number:numberFormat}} - {{product?.interestRange.maximum | number:numberFormat}}">
  </fims-number-input>
  <div layout="column" layout-margin>
    <div layout="row" layout-align="start center">
      <fims-text-input type="number" [form]="form" controlName="term" placeholder="{{'Term' | translate}}"></fims-text-input>
      <mat-form-field>
        <mat-select formControlName="termTemporalUnit">
          <mat-option *ngFor="let basis of temporalOptions" [value]="basis.type">
            {{basis.label | translate}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <p *ngIf="form.hasError('maxTerm')" class="tc-red-600 text-sm" layout-margin translate>
      Invalid term. Maximum allowed are {{form.getError('maxTerm').maxWeeks}} week(s), {{form.getError('maxTerm').maxMonths}} month(s) or {{form.getError('maxTerm').maxYears}} year(s).
    </p>
  </div>
  <div layout="column" layout-margin>
    <div layout="row" layout-align="start center">
      <fims-text-input type="number" [form]="form" controlName="paymentPeriod" placeholder="{{'Repay every' | translate}}"></fims-text-input>
      <mat-form-field>
        <mat-select formControlName="paymentTemporalUnit">
          <mat-option *ngFor="let alignment of temporalOptions" [value]="alignment.type">
            {{alignment.label | translate}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <p *ngIf="form.hasError('maxPayment')" class="tc-red-600 text-sm" layout-margin translate>
      Invalid payment period. Maximum allowed are {{form.getError('maxPayment').maxWeeks}} week(s), {{form.getError('maxPayment').maxMonths}} month(s) or {{form.getError('maxPayment').maxYears}} year(s).
    </p>
  </div>
  <!-- Days in weeks -->
  <div layout="row" *ngIf="displayDaysInWeek">
    <mat-form-field layout-margin>
      <mat-select formControlName="dayInWeek" placeholder="{{'on' | translate}}">
        <mat-option *ngFor="let day of weekDays" [value]="day.type">
          {{day.label | translate}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </div>
  <!-- Month setting -->
  <div layout="column" *ngIf="displayMonthSetting">
    <mat-radio-group formControlName="monthSetting">
      <div layout="row" layout-align="start center">
        <mat-radio-button layout-margin value="DAY"></mat-radio-button>
        <mat-form-field layout-margin>
          <mat-select formControlName="monthSettingDay" placeholder="{{'on the' | translate}}">
            <mat-option *ngFor="let day of monthDays" [value]="day.type">
              {{day.label}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <p translate>Day</p>
      </div>
      <div layout="row" layout-align="start center">
        <mat-radio-button layout-margin value="WEEK_AND_DAY"></mat-radio-button>
        <mat-form-field layout-margin>
          <mat-select formControlName="monthSettingWeek" placeholder="{{'on the' | translate}}">
            <mat-option *ngFor="let alignment of weekAlignments" [value]="alignment.type">
              {{alignment.label | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field layout-margin>
          <mat-select formControlName="monthSettingDayInWeek">
            <mat-option *ngFor="let weekDay of weekDays" [value]="weekDay.type">
              {{weekDay.label | translate}}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </mat-radio-group>
  </div>
  <!-- Months -->
  <mat-form-field layout-margin *ngIf="displayMonths">
    <mat-select formControlName="month" placeholder="{{'in' | translate}}">
      <mat-option *ngFor="let month of months" [value]="month.type">
        {{month.label | translate}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <mat-form-field layout-margin>
    <mat-select formControlName="depositAccountIdentifier" placeholder="{{ 'Deposit account used for fees and disbursal' | translate }}">
      <mat-option *ngFor="let instance of productInstances" [value]="instance.accountIdentifier">
        {{instance.accountIdentifier}}({{instance.productIdentifier}})
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>