build: Use prettier for html

Stop ignoring html files in prettier and fix existing issues.
This commit is contained in:
Ralph Hopman
2024-12-19 09:36:50 +01:00
committed by Adam Saghy
parent c5fc3925fb
commit 2ec9ba81d6
651 changed files with 28935 additions and 20624 deletions
@@ -1,10 +1,11 @@
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Charge' | translate }}</mat-label>
<mat-label>{{ 'labels.inputs.Charge' | translate }}</mat-label>
<mat-select #charge>
<mat-option *ngFor="let charge of chargeData | chargesFilter:chargesDataSource:currencyCode.value"
[value]="charge">
<mat-option
*ngFor="let charge of chargeData | chargesFilter: chargesDataSource : currencyCode.value"
[value]="charge"
>
{{ charge.name }}
</mat-option>
</mat-select>
@@ -13,29 +14,33 @@
<div fxFlex="48%" fxFlexAlign="center">
<button type="button" mat-raised-button color="primary" (click)="addCharge(charge)" [disabled]="!charge.value">
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{'labels.buttons.Add' | translate }}
{{ 'labels.buttons.Add' | translate }}
</button>
</div>
<table fxFlex="98%" class="mat-elevation-z1" mat-table [dataSource]="chargesDataSource"
*ngIf="chargesDataSource.length > 0">
<table
fxFlex="98%"
class="mat-elevation-z1"
mat-table
[dataSource]="chargesDataSource"
*ngIf="chargesDataSource.length > 0"
>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
<td mat-cell *matCellDef="let charge">
{{ charge.name + ', ' + charge.currency.displaySymbol }}
</td>
</ng-container>
<ng-container matColumnDef="chargeCalculationType">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
<td mat-cell *matCellDef="let charge">
{{ charge.chargeCalculationType.value }}
</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
<td mat-cell *matCellDef="let charge">
{{ charge.amount | formatNumber }}
<button mat-icon-button color="primary" (click)="editChargeAmount(charge)">
@@ -45,48 +50,69 @@
</ng-container>
<ng-container matColumnDef="chargeTimeType">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
<td mat-cell *matCellDef="let charge">
{{ charge.chargeTimeType.value | translateKey:'catalogs' }}
{{ charge.chargeTimeType.value | translateKey: 'catalogs' }}
</td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Date' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
<td mat-cell *matCellDef="let charge">
<span
*ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
{{(charge.dueDate | dateFormat) || 'Unassigned'}}
*ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
>
{{ (charge.dueDate | dateFormat) || 'Unassigned' }}
</span>
<span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
{{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
{{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
</span>
<span *ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
|| charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
<span
*ngIf="
!(
charge.chargeTimeType.value === 'Monthly Fee' ||
charge.chargeTimeType.value === 'Annual Fee' ||
charge.chargeTimeType.value === 'Specified due date' ||
charge.chargeTimeType.value === 'Weekly Fee'
)
"
>
N/A
</span>
<button mat-icon-button color="primary" *ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
|| charge.chargeTimeType.value === 'Specified due date'" (click)="editChargeDate(charge)">
<button
mat-icon-button
color="primary"
*ngIf="
charge.chargeTimeType.value === 'Weekly Fee' ||
charge.chargeTimeType.value === 'Monthly Fee' ||
charge.chargeTimeType.value === 'Annual Fee' ||
charge.chargeTimeType.value === 'Specified due date'
"
(click)="editChargeDate(charge)"
>
<fa-icon icon="pen"></fa-icon>
</button>
</td>
</ng-container>
<ng-container matColumnDef="repaymentsEvery">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repayments Every' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
<td mat-cell *matCellDef="let charge">
<span *ngIf="charge.feeInterval">{{ charge.feeInterval}}</span>
<span *ngIf="!charge.feeInterval">{{'labels.inputs.Not Provided' | translate }}</span>
<button mat-icon-button color="primary"
<span *ngIf="charge.feeInterval">{{ charge.feeInterval }}</span>
<span *ngIf="!charge.feeInterval">{{ 'labels.inputs.Not Provided' | translate }}</span>
<button
mat-icon-button
color="primary"
*ngIf="charge.chargeTimeType.value === 'Weekly Fee' || charge.chargeTimeType.value === 'Monthly Fee'"
(click)="editChargeFeeInterval(charge)">
(click)="editChargeFeeInterval(charge)"
>
<fa-icon icon="pen"></fa-icon>
</button>
</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Actions' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
<td mat-cell *matCellDef="let charge">
<button mat-icon-button color="warn" (click)="deleteCharge(charge)">
<fa-icon icon="trash"></fa-icon>
@@ -95,13 +121,11 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<div fxFlex="98%" *ngIf="activeClientMembers">
<table fxFlex="98%" mat-table [dataSource]="dataSource">
<!-- Check Column -->
<ng-container matColumnDef="check">
<th mat-header-cell *matHeaderCellDef>
@@ -114,32 +138,29 @@
<!-- Position Column -->
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client ID' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client ID' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.id }}</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Client Name' | translate }} </th>
<td mat-cell *matCellDef="let element"> {{element.displayName}} </td>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Client Name' | translate }}</th>
<td mat-cell *matCellDef="let element">{{ element.displayName }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumn"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumn;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumn"></tr>
</table>
</div>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{"labels.buttons.Previous" | translate }}
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{"labels.buttons.Next" | translate }}
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
@@ -1,32 +1,38 @@
<form [formGroup]="savingsAccountDetailsForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Product Name' | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Product Name' | translate }}</mat-label>
<mat-select formControlName="productId" required>
<mat-option *ngFor="let product of productData" [value]="product.id">
{{ product.name }}
</mat-option>
</mat-select>
<mat-error>
{{'labels.inputs.Product Name' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
{{ 'labels.inputs.Product Name' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%" (click)="submittedOnDatePicker.open()" *ngIf="savingsProductSelected">
<mat-label>{{'labels.inputs.Submitted On' | translate}}</mat-label>
<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="submittedOnDatePicker"
formControlName="submittedOnDate" required>
<mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
<input
matInput
[min]="minDate"
[max]="maxDate"
[matDatepicker]="submittedOnDatePicker"
formControlName="submittedOnDate"
required
/>
<mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
<mat-datepicker #submittedOnDatePicker></mat-datepicker>
<mat-error>
{{'labels.inputs.Submitted On' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
{{ 'labels.inputs.Submitted On' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
<mat-label>{{'labels.inputs.Field Officer' | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Field Officer' | translate }}</mat-label>
<mat-select formControlName="fieldOfficerId">
<mat-option *ngFor="let officer of fieldOfficerData" [value]="officer.id">
{{ officer.displayName }}
@@ -35,21 +41,19 @@
</mat-form-field>
<mat-form-field fxFlex="48%" *ngIf="savingsProductSelected">
<mat-label>{{'labels.inputs.External ID' | translate}}</mat-label>
<input matInput formControlName="externalId">
<mat-label>{{ 'labels.inputs.External ID' | translate }}</mat-label>
<input matInput formControlName="externalId" />
</mat-form-field>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious disabled>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{"labels.buttons.Previous" | translate }}
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{"labels.buttons.Next" | translate }}
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</form>
</form>
@@ -1,203 +1,230 @@
<div fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>{{'labels.heading.Details' | translate}}</h3>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Details' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Product' | translate}}</span>
<span fxFlex="60%">{{ savingsAccount.productId | find:savingsAccountTemplate.productOptions:'id':'name' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Product' | translate }}</span>
<span fxFlex="60%">{{
savingsAccount.productId | find: savingsAccountTemplate.productOptions : 'id' : 'name'
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Submitted On' | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Submitted On' | translate }}</span>
<span fxFlex="60%">{{ savingsAccount.submittedOnDate | dateFormat }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.External Id' | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.External Id' | translate }}</span>
<span fxFlex="60%" *ngIf="savingsAccount.externalId">
<mifosx-external-identifier externalId="{{savingsAccount.externalId}}"></mifosx-external-identifier>
<mifosx-external-identifier externalId="{{ savingsAccount.externalId }}"></mifosx-external-identifier>
</span>
<span fxFlex="60%" *ngIf="!savingsAccount.externalId">
{{'labels.inputs.Unassigned' | translate}}
{{ 'labels.inputs.Unassigned' | translate }}
</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Field Officer' | translate}}</span>
<span fxFlex="60%">{{ savingsAccount.fieldOfficerId |
find:savingsAccountProductTemplate.fieldOfficerOptions:'id':'displayName' }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Field Officer' | translate }}</span>
<span fxFlex="60%">{{
savingsAccount.fieldOfficerId | find: savingsAccountProductTemplate.fieldOfficerOptions : 'id' : 'displayName'
}}</span>
</div>
<h3 class="mat-h3" fxFlexFill>{{'labels.heading.Terms' | translate}}</h3>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.heading.Terms' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Currency' | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Currency' | translate }}</span>
<span fxFlex="60%">{{ savingsAccountTermsForm.get('currencyCode').value }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Decimal Places' | translate}}</span>
<span fxFlex="40%">{{ 'labels.inputs.Decimal Places' | translate }}</span>
<span fxFlex="60%">{{ savingsAccountTermsForm.get('decimal').value }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest' | translate}}:</span>
<span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest' | translate }}:</span>
<span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRate | formatNumber }} %</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Interest Compounding Period' | translate}}:</span>
<span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestCompoundingPeriodType |
find:savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions:'id':'value') }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Interest Compounding Period' | translate }}:</span>
<span fxFlex="60%">{{
getCatalogTranslation(
savingsAccount.interestCompoundingPeriodType
| find: savingsAccountProductTemplate.interestCompoundingPeriodTypeOptions : 'id' : 'value'
)
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Interest Posting Period' | translate}}:</span>
<span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestPostingPeriodType |
find:savingsAccountProductTemplate.interestPostingPeriodTypeOptions:'id':'value') }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Interest Posting Period' | translate }}:</span>
<span fxFlex="60%">{{
getCatalogTranslation(
savingsAccount.interestPostingPeriodType
| find: savingsAccountProductTemplate.interestPostingPeriodTypeOptions : 'id' : 'value'
)
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Interest Calculated using' | translate}}:</span>
<span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestCalculationType |
find:savingsAccountProductTemplate.interestCalculationTypeOptions:'id':'value') }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Interest Calculated using' | translate }}:</span>
<span fxFlex="60%">{{
getCatalogTranslation(
savingsAccount.interestCalculationType
| find: savingsAccountProductTemplate.interestCalculationTypeOptions : 'id' : 'value'
)
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Days in Year' | translate}}:</span>
<span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.interestCalculationDaysInYearType |
find:savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions:'id':'value') }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Days in Year' | translate }}:</span>
<span fxFlex="60%">{{
getCatalogTranslation(
savingsAccount.interestCalculationDaysInYearType
| find: savingsAccountProductTemplate.interestCalculationDaysInYearTypeOptions : 'id' : 'value'
)
}}</span>
</div>
<div fxFlexFill *ngIf="savingsAccount.minRequiredOpeningBalance">
<span fxFlex="40%">{{'labels.inputs.Minimum Opening Balance' | translate}}:</span>
<span fxFlex="40%">{{ 'labels.inputs.Minimum Opening Balance' | translate }}:</span>
<span fxFlex="60%">{{ savingsAccount.minRequiredOpeningBalance | formatNumber }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}:</span>
<span fxFlex="40%">{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}:</span>
<span fxFlex="60%">{{ savingsAccount.withdrawalFeeForTransfers | yesNo }}</span>
</div>
<div fxFlexFill *ngIf="savingsAccount.lockinPeriodFrequency">
<span fxFlex="40%">{{'labels.inputs.Lock-in Period' | translate}}:</span>
<span fxFlex="60%">{{ getCatalogTranslation(savingsAccount.lockinPeriodFrequency + ' ' + (savingsAccount.lockinPeriodFrequencyType |
find:savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions:'id':'value')) }}</span>
<span fxFlex="40%">{{ 'labels.inputs.Lock-in Period' | translate }}:</span>
<span fxFlex="60%">{{
getCatalogTranslation(
savingsAccount.lockinPeriodFrequency +
' ' +
(savingsAccount.lockinPeriodFrequencyType
| find: savingsAccountProductTemplate.lockinPeriodFrequencyTypeOptions : 'id' : 'value')
)
}}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Is Overdraft Allowed' | translate}}:</span>
<span fxFlex="40%">{{ 'labels.inputs.Is Overdraft Allowed' | translate }}:</span>
<span fxFlex="60%">{{ savingsAccount.allowOverdraft | yesNo }}</span>
</div>
<div fxFlexFill *ngIf="savingsAccount.minOverdraftForInterestCalculation">
<span fxFlex="40%">{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}:</span>
<span fxFlex="40%">{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}:</span>
<span fxFlex="60%">{{ savingsAccount.minOverdraftForInterestCalculation | formatNumber }}</span>
</div>
<div fxFlexFill *ngIf="savingsAccount.nominalAnnualInterestRateOverdraft">
<span fxFlex="40%">{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}:</span>
<span fxFlex="40%">{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}:</span>
<span fxFlex="60%">{{ savingsAccount.nominalAnnualInterestRateOverdraft | formatNumber }} %</span>
</div>
<div fxFlexFill *ngIf="savingsAccount.overdraftLimit">
<span fxFlex="40%">{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}:</span>
<span fxFlex="40%">{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}:</span>
<span fxFlex="60%">{{ savingsAccount.overdraftLimit | formatNumber }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">{{'labels.inputs.Enforce Minimum Balance' | translate}}:</span>
<span fxFlex="40%">{{ 'labels.inputs.Enforce Minimum Balance' | translate }}:</span>
<span fxFlex="60%">{{ savingsAccount.enforceMinRequiredBalance | yesNo }}</span>
</div>
<div fxFlexFill *ngIf="savingsAccount.minRequiredBalance">
<span fxFlex="40%">{{'labels.inputs.Minimum Balance' | translate}}:</span>
<span fxFlex="40%">{{ 'labels.inputs.Minimum Balance' | translate }}:</span>
<span fxFlex="60%">{{ savingsAccount.minRequiredBalance }}</span>
</div>
<div fxFlexFill *ngIf="savingsAccount.charges.length" fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>{{'labels.inputs.Charges' | translate}}</h3>
<h3 class="mat-h3" fxFlexFill>{{ 'labels.inputs.Charges' | translate }}</h3>
<mat-divider fxFlexFill></mat-divider>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="savingsAccount.charges">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Name' | translate}} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Name' | translate }}</th>
<td mat-cell *matCellDef="let charge">
{{ charge.name + ', ' + charge.currency.displaySymbol }}
</td>
</ng-container>
<ng-container matColumnDef="chargeCalculationType">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Type' | translate}} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Type' | translate }}</th>
<td mat-cell *matCellDef="let charge">
{{ charge.chargeCalculationType.value | translateKey:'catalogs' }}
{{ charge.chargeCalculationType.value | translateKey: 'catalogs' }}
</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Amount' | translate}} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Amount' | translate }}</th>
<td mat-cell *matCellDef="let charge">
{{ charge.amount | formatNumber }}
</td>
</ng-container>
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Date' | translate}} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Date' | translate }}</th>
<td mat-cell *matCellDef="let charge">
<span
*ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'">
{{(charge.dueDate | dateFormat) || 'Unassigned'}}
*ngIf="charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee'"
>
{{ (charge.dueDate | dateFormat) || 'Unassigned' }}
</span>
<span *ngIf="charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'">
{{(charge.feeOnMonthDay | dateFormat) || 'Unassigned'}}
{{ (charge.feeOnMonthDay | dateFormat) || 'Unassigned' }}
</span>
<span
*ngIf="!(charge.chargeTimeType.value === 'Monthly Fee' || charge.chargeTimeType.value === 'Annual Fee'
|| charge.chargeTimeType.value === 'Specified due date' || charge.chargeTimeType.value === 'Weekly Fee')">
*ngIf="
!(
charge.chargeTimeType.value === 'Monthly Fee' ||
charge.chargeTimeType.value === 'Annual Fee' ||
charge.chargeTimeType.value === 'Specified due date' ||
charge.chargeTimeType.value === 'Weekly Fee'
)
"
>
N/A
</span>
</td>
</ng-container>
<ng-container matColumnDef="repaymentsEvery">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Repayments Every' | translate}} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Repayments Every' | translate }}</th>
<td mat-cell *matCellDef="let charge">
{{ charge.feeInterval || 'Not Provided' }}
</td>
</ng-container>
<ng-container matColumnDef="chargeTimeType">
<th mat-header-cell *matHeaderCellDef> {{'labels.inputs.Collected On' | translate}} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Collected On' | translate }}</th>
<td mat-cell *matCellDef="let charge">
{{ charge.chargeTimeType.value }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="chargesDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns;"></tr>
<tr mat-row *matRowDef="let row; columns: chargesDisplayedColumns"></tr>
</table>
</div>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{"labels.buttons.Previous" | translate }}
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button [routerLink]="['../..']">
{{"labels.buttons.Cancel" | translate }}
{{ 'labels.buttons.Cancel' | translate }}
</button>
<button mat-raised-button color="primary" (click)="submitEvent.emit()">
{{"labels.buttons.Submit" | translate }}
{{ 'labels.buttons.Submit' | translate }}
</button>
</div>
@@ -1,152 +1,172 @@
<form [formGroup]="savingsAccountTermsForm">
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" fxLayoutAlign.gt-sm="start center">
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Currency' | translate}}</mat-label>
<input matInput formControlName="currencyCode">
<mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
<input matInput formControlName="currencyCode" />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Decimal Places' | translate}}</mat-label>
<input type="number" matInput formControlName="decimal">
<mat-label>{{ 'labels.inputs.Decimal Places' | translate }}</mat-label>
<input type="number" matInput formControlName="decimal" />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Nominal Annual Interest' | translate}}</mat-label>
<input type="number" matInput formControlName="nominalAnnualInterestRate" required>
<mat-label>{{ 'labels.inputs.Nominal Annual Interest' | translate }}</mat-label>
<input type="number" matInput formControlName="nominalAnnualInterestRate" required />
<mat-error>
{{'labels.inputs.Nominal Annual Interest' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
{{ 'labels.inputs.Nominal Annual Interest' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Interest Compounding Period' | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Interest Compounding Period' | translate }}</mat-label>
<mat-select formControlName="interestCompoundingPeriodType" required>
<mat-option *ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData" [value]="interestCompoundingPeriodType.id">
{{ interestCompoundingPeriodType.value | translateKey:'catalogs' }}
<mat-option
*ngFor="let interestCompoundingPeriodType of interestCompoundingPeriodTypeData"
[value]="interestCompoundingPeriodType.id"
>
{{ interestCompoundingPeriodType.value | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
<mat-error>
{{'labels.inputs.Interest Compounding Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
{{ 'labels.inputs.Interest Compounding Period' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Interest Posting Period' | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Interest Posting Period' | translate }}</mat-label>
<mat-select formControlName="interestPostingPeriodType" required>
<mat-option *ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData" [value]="interestPostingPeriodType.id">
{{ interestPostingPeriodType.value | translateKey:'catalogs' }}
<mat-option
*ngFor="let interestPostingPeriodType of interestPostingPeriodTypeData"
[value]="interestPostingPeriodType.id"
>
{{ interestPostingPeriodType.value | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
<mat-error>
{{'labels.inputs.Interest Posting Period' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
{{ 'labels.inputs.Interest Posting Period' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Interest Calculated using' | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Interest Calculated using' | translate }}</mat-label>
<mat-select formControlName="interestCalculationType" required>
<mat-option *ngFor="let interestCalculationType of interestCalculationTypeData" [value]="interestCalculationType.id">
{{ interestCalculationType.value | translateKey:'catalogs' }}
<mat-option
*ngFor="let interestCalculationType of interestCalculationTypeData"
[value]="interestCalculationType.id"
>
{{ interestCalculationType.value | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
<mat-error>
{{'labels.inputs.Interest Calculated using' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
{{ 'labels.inputs.Interest Calculated using' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Days in Year' | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Days in Year' | translate }}</mat-label>
<mat-select formControlName="interestCalculationDaysInYearType" required>
<mat-option *ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData" [value]="interestCalculationDaysInYearType.id">
{{ interestCalculationDaysInYearType.value | translateKey:'catalogs' }}
<mat-option
*ngFor="let interestCalculationDaysInYearType of interestCalculationDaysInYearTypeData"
[value]="interestCalculationDaysInYearType.id"
>
{{ interestCalculationDaysInYearType.value | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
<mat-error>
{{'labels.inputs.Days in Year' | translate}} {{'labels.commons.is' | translate}} <strong>{{'labels.commons.required' | translate}}</strong>
{{ 'labels.inputs.Days in Year' | translate }} {{ 'labels.commons.is' | translate }}
<strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error>
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Minimum Opening Balance' | translate}}</mat-label>
<input type="number" matInput formControlName="minRequiredOpeningBalance">
<mat-label>{{ 'labels.inputs.Minimum Opening Balance' | translate }}</mat-label>
<input type="number" matInput formControlName="minRequiredOpeningBalance" />
</mat-form-field>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="withdrawalFeeForTransfers" class="margin-v">
{{'labels.inputs.Apply Withdrawal Fee for Transfers' | translate}}
{{ 'labels.inputs.Apply Withdrawal Fee for Transfers' | translate }}
</mat-checkbox>
<h4 fxFlex="98%" class="mat-h4">{{'labels.inputs.Lock-in Period' | translate}}</h4>
<h4 fxFlex="98%" class="mat-h4">{{ 'labels.inputs.Lock-in Period' | translate }}</h4>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Frequency' | translate}}</mat-label>
<input type="number" matInput formControlName="lockinPeriodFrequency">
<mat-label>{{ 'labels.inputs.Frequency' | translate }}</mat-label>
<input type="number" matInput formControlName="lockinPeriodFrequency" />
</mat-form-field>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Type' | translate}}</mat-label>
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
<mat-select formControlName="lockinPeriodFrequencyType">
<mat-option *ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData" [value]="lockinPeriodFrequencyType.id">
{{ lockinPeriodFrequencyType.value | translateKey:'catalogs' }}
<mat-option
*ngFor="let lockinPeriodFrequencyType of lockinPeriodFrequencyTypeData"
[value]="lockinPeriodFrequencyType.id"
>
{{ lockinPeriodFrequencyType.value | translateKey: 'catalogs' }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-divider fxFlex="98%"></mat-divider>
<h3 fxFlex="23%" class="mat-h3">{{'labels.inputs.Overdraft' | translate}}</h3>
<h3 fxFlex="23%" class="mat-h3">{{ 'labels.inputs.Overdraft' | translate }}</h3>
<mat-checkbox fxFlex="73%" labelPosition="before" formControlName="allowOverdraft" class="margin-b">
{{'labels.inputs.Is Overdraft Allowed' | translate}}
{{ 'labels.inputs.Is Overdraft Allowed' | translate }}
</mat-checkbox>
<div *ngIf="savingsAccountTermsForm.value.allowOverdraft" fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<div
*ngIf="savingsAccountTermsForm.value.allowOverdraft"
fxFlexFill
fxLayout="row wrap"
fxLayoutGap="2%"
fxLayout.lt-md="column"
>
<mat-form-field fxFlex="31%">
<mat-label>{{'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate}}</mat-label>
<input type="number" matInput formControlName="minOverdraftForInterestCalculation">
<mat-label>{{ 'labels.inputs.Minimum Overdraft Required for Interest Calculation' | translate }}</mat-label>
<input type="number" matInput formControlName="minOverdraftForInterestCalculation" />
</mat-form-field>
<mat-form-field fxFlex="31%">
<mat-label>{{'labels.inputs.Nominal Annual Interest for Overdraft' | translate}}</mat-label>
<input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft">
<mat-label>{{ 'labels.inputs.Nominal Annual Interest for Overdraft' | translate }}</mat-label>
<input type="number" matInput formControlName="nominalAnnualInterestRateOverdraft" />
</mat-form-field>
<mat-form-field fxFlex="31%">
<mat-label>{{'labels.inputs.Maximum Overdraft Amount Limit' | translate}}</mat-label>
<input type="number" matInput formControlName="overdraftLimit">
<mat-label>{{ 'labels.inputs.Maximum Overdraft Amount Limit' | translate }}</mat-label>
<input type="number" matInput formControlName="overdraftLimit" />
</mat-form-field>
</div>
<mat-divider fxFlex="98%"></mat-divider>
<mat-checkbox fxFlex="48%" labelPosition="before" formControlName="enforceMinRequiredBalance" class="margin-v">
{{'labels.inputs.Enforce Minimum Balance' | translate}}
{{ 'labels.inputs.Enforce Minimum Balance' | translate }}
</mat-checkbox>
<mat-form-field fxFlex="48%">
<mat-label>{{'labels.inputs.Minimum Balance' | translate}}</mat-label>
<input type="number" matInput formControlName="minRequiredBalance">
<mat-label>{{ 'labels.inputs.Minimum Balance' | translate }}</mat-label>
<input type="number" matInput formControlName="minRequiredBalance" />
</mat-form-field>
<mat-form-field fxFlex="48%" *ngIf="savingsAccountTermsForm.controls.minBalanceForInterestCalculation.value">
<mat-label>{{'labels.inputs.Balance Required for Interest Calculation' | translate}}</mat-label>
<input type="number" matInput formControlName="minBalanceForInterestCalculation">
<mat-label>{{ 'labels.inputs.Balance Required for Interest Calculation' | translate }}</mat-label>
<input type="number" matInput formControlName="minBalanceForInterestCalculation" />
</mat-form-field>
</div>
<div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
<button mat-raised-button matStepperPrevious disabled>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{"labels.buttons.Previous" | translate }}
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{"labels.buttons.Next" | translate }}
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</form>