CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: update FD product and account creation UI to match RD layout

Browse Source 
- Matched all FD product stepper steps (Details, Currency, Terms, Settings, Charges, Accounting) to RD product UI
- Updated FD account creation stepper structure with conditional steps and Previous/Next navigation
This commit is contained in:
Nitesh Yadav
2026-05-01 10:32:43 +05:30
parent 58cef1c20b
commit 05cf2ee33f
22 changed files with 1952 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.html
+85 -35
View File
@@ -34,7 +34,8 @@
<fa-icon icon="eye" size="sm"></fa-icon>
</ng-template>
<mat-step [stepControl]="fixedDepositAccountDetailsForm">
<!-- Step 1: Details -->
<mat-step>
<ng-template matStepLabel>{{ 'labels.inputs.DETAILS' | translate }}</ng-template>
<mifosx-fixed-deposit-account-details-step
@@ -44,48 +45,97 @@
</mifosx-fixed-deposit-account-details-step>
</mat-step>
<mat-step [stepControl]="fixedDepositAccountTermsForm">
<ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
@if (fixedDepositsAccountProductTemplate) {
<!-- Step 2: Terms -->
<mat-step>
<ng-template matStepLabel>{{ 'labels.inputs.TERMS' | translate }}</ng-template>
<mifosx-fixed-deposit-account-terms-step
[fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
[fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
>
</mifosx-fixed-deposit-account-terms-step>
</mat-step>
<mifosx-fixed-deposit-account-terms-step
[fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
[fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
>
</mifosx-fixed-deposit-account-terms-step>
<mat-step [stepControl]="fixedDepositAccountSettingsForm">
<ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
<div class="layout-row align-center gap-2percent margin-t responsive-column">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</mat-step>
<mifosx-fixed-deposit-account-settings-step
[fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
[fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
>
</mifosx-fixed-deposit-account-settings-step>
</mat-step>
<!-- Step 3: Settings -->
<mat-step>
<ng-template matStepLabel>{{ 'labels.inputs.SETTINGS' | translate }}</ng-template>
<mat-step>
<ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
<mifosx-fixed-deposit-account-settings-step
[fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
[fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
>
</mifosx-fixed-deposit-account-settings-step>
<mifosx-fixed-deposit-account-interest-rate-chart-step
[fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
[fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
>
</mifosx-fixed-deposit-account-interest-rate-chart-step>
</mat-step>
<div class="layout-row align-center gap-2percent margin-t responsive-column">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
<!-- Step 4: Interest Rate Chart -->
<mat-step>
<ng-template matStepLabel>{{ 'labels.inputs.INTEREST RATE CHART' | translate }}</ng-template>
<mifosx-fixed-deposit-account-charges-step
[fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
[fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
[fixedDepositAccountFormValid]="fixedDepositAccountFormValid"
>
</mifosx-fixed-deposit-account-charges-step>
</mat-step>
<mifosx-fixed-deposit-account-interest-rate-chart-step
[fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
[fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
>
</mifosx-fixed-deposit-account-interest-rate-chart-step>
@if (fixedDepositAccountFormValid) {
<div class="layout-row align-center gap-2percent margin-t responsive-column">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</mat-step>
<!-- Step 5: Charges -->
<mat-step>
<ng-template matStepLabel>{{ 'labels.inputs.CHARGES' | translate }}</ng-template>
<mifosx-fixed-deposit-account-charges-step
[fixedDepositsAccountTemplate]="fixedDepositsAccountTemplate"
[fixedDepositsAccountProductTemplate]="fixedDepositsAccountProductTemplate"
[fixedDepositAccountFormValid]="fixedDepositAccountFormValid"
>
</mifosx-fixed-deposit-account-charges-step>
<div class="layout-row align-center gap-2percent margin-t responsive-column">
<button mat-raised-button matStepperPrevious>
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Previous' | translate }}
</button>
<button mat-raised-button matStepperNext>
{{ 'labels.buttons.Next' | translate }}
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
</button>
</div>
</mat-step>
<!-- Step 6: Preview -->
<mat-step state="preview" completed>
<ng-template matStepLabel>{{ 'labels.inputs.PREVIEW' | translate }}</ng-template>
<mifosx-fixed-deposit-account-preview-step
src/app/deposits/fixed-deposits/create-fixed-deposit-account/create-fixed-deposit-account.component.ts
+13 -8
View File
@@ -20,7 +20,14 @@ import { FixedDepositAccountTermsStepComponent } from '../fixed-deposit-account-
import { FixedDepositAccountSettingsStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-settings-step/fixed-deposit-account-settings-step.component';
import { FixedDepositAccountChargesStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-charges-step/fixed-deposit-account-charges-step.component';
import { Dates } from 'app/core/utils/dates';
import { MatStepper, MatStepperIcon, MatStep, MatStepLabel } from '@angular/material/stepper';
import {
MatStepper,
MatStepperIcon,
MatStep,
MatStepLabel,
MatStepperNext,
MatStepperPrevious
} from '@angular/material/stepper';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { FixedDepositAccountInterestRateChartStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-interest-rate-chart-step/fixed-deposit-account-interest-rate-chart-step.component';
import { FixedDepositAccountPreviewStepComponent } from '../fixed-deposit-account-stepper/fixed-deposit-account-preview-step/fixed-deposit-account-preview-step.component';
@@ -37,6 +44,8 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
...STANDALONE_SHARED_IMPORTS,
MatStepper,
MatStepperIcon,
MatStepperNext,
MatStepperPrevious,
FaIconComponent,
MatStep,
MatStepLabel,
@@ -55,17 +64,13 @@ export class CreateFixedDepositAccountComponent {
private fixedDepositsService = inject(FixedDepositsService);
private settingsService = inject(SettingsService);
/** Fixed Deposits Account Details Step */
@ViewChild(FixedDepositAccountDetailsStepComponent, { static: true })
fixedDepositsAccountDetailsStep: FixedDepositAccountDetailsStepComponent;
/** Fixed Deposits Account Terms Step */
@ViewChild(FixedDepositAccountTermsStepComponent, { static: true })
@ViewChild(FixedDepositAccountTermsStepComponent)
fixedDepositAccountTermsStep: FixedDepositAccountTermsStepComponent;
/** Fixed Deposits Account Settings Step */
@ViewChild(FixedDepositAccountSettingsStepComponent, { static: true })
@ViewChild(FixedDepositAccountSettingsStepComponent)
fixedDepositAccountSettingsStep: FixedDepositAccountSettingsStepComponent;
/** Fixed Deposits Account Charges Step */
@ViewChild(FixedDepositAccountChargesStepComponent, { static: true })
@ViewChild(FixedDepositAccountChargesStepComponent)
fixedDepositAccountChargesStep: FixedDepositAccountChargesStepComponent;
/** Fixed Deposits Account Template */