feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview - Hide Financial & Classification section for non-individual entities in personal data and preview - Fix legal form column in clients list — fetch legalForm from client API for correct display - Add person/business icon before client name in list rows - Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API - Add registration number format hint (mat-hint) based on constitution type - Add spacing between verification row and constitution type dropdowns - Reduce table cell padding and prevent action buttons from being clipped - Add missing MPL-2.0 license headers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -6,366 +6,198 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<form [formGroup]="editClientForm">
|
||||
<mat-card-content>
|
||||
<!-- First Row: Office, Legal Form, Account No, External ID -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-24">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="officeId">
|
||||
@for (office of officeOptions; track office) {
|
||||
<mat-option [value]="office.id">
|
||||
{{ office.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
@if (editClientForm.controls.officeId.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
<div class="create-client-container">
|
||||
<div class="client-header">
|
||||
<fa-icon icon="user" class="header-icon"></fa-icon>
|
||||
<h2>{{ 'labels.heading.Edit Client' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<mat-tab-group class="client-tabs" animationDuration="200ms" [preserveContent]="true" [(selectedIndex)]="selectedTabIndex">
|
||||
<!-- Tab 1: General Details -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="user" class="tab-icon"></fa-icon>
|
||||
{{ 'labels.inputs.GENERAL' | translate }}
|
||||
</ng-template>
|
||||
<div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(0)">
|
||||
<div class="tab-mode-bar">
|
||||
@if (isTabReadOnly(0)) {
|
||||
<button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(0)">
|
||||
<mat-icon>edit</mat-icon> Edit
|
||||
</button>
|
||||
} @else {
|
||||
<button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(0)">
|
||||
<mat-icon>close</mat-icon> Cancel
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<mifosx-client-general-step
|
||||
[clientTemplate]="clientDataAndTemplate"
|
||||
[clientData]="clientDataAndTemplate"
|
||||
[readOnly]="isTabReadOnly(0)"
|
||||
(legalFormChangeEvent)="legalFormChange($event)"
|
||||
></mifosx-client-general-step>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Tab 2: KYC & Documents -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="id-card" class="tab-icon"></fa-icon>
|
||||
KYC & Documents
|
||||
</ng-template>
|
||||
<div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(1)">
|
||||
<div class="tab-mode-bar">
|
||||
@if (isTabReadOnly(1)) {
|
||||
<button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(1)">
|
||||
<mat-icon>edit</mat-icon> Edit
|
||||
</button>
|
||||
} @else {
|
||||
<button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(1)">
|
||||
<mat-icon>close</mat-icon> Cancel
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<div class="tab-section">
|
||||
<mifosx-client-kyc-step #clientKyc
|
||||
[isNonIndividual]="legalFormType === 2"
|
||||
[clientId]="clientId"
|
||||
[readOnly]="isTabReadOnly(1)"
|
||||
></mifosx-client-kyc-step>
|
||||
</div>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Tab 3: Entity MSME & KYC (Non-Individual only) -->
|
||||
@if (legalFormType === 2) {
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="building" class="tab-icon"></fa-icon>
|
||||
Scheme & Sector Classification
|
||||
</ng-template>
|
||||
<div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(2)">
|
||||
<div class="tab-mode-bar">
|
||||
@if (isTabReadOnly(2)) {
|
||||
<button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(2)">
|
||||
<mat-icon>edit</mat-icon> Edit
|
||||
</button>
|
||||
} @else {
|
||||
<button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(2)">
|
||||
<mat-icon>close</mat-icon> Cancel
|
||||
</button>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-24">
|
||||
<mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
|
||||
<mat-select formControlName="legalFormId">
|
||||
@for (legalForm of legalFormOptions; track legalForm) {
|
||||
<mat-option [value]="legalForm.id">
|
||||
{{ legalForm.value }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-24">
|
||||
<mat-label>{{ 'labels.inputs.Account No' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="accountNo"
|
||||
[placeholder]="'labels.inputs.Account No' | translate"
|
||||
[title]="'labels.inputs.Account No' | translate"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-24">
|
||||
<mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="externalId"
|
||||
[placeholder]="'labels.inputs.External Id' | translate"
|
||||
[title]="'labels.inputs.External Id' | translate"
|
||||
/>
|
||||
@if (!externalNationalIdService.isLoading && externalNationalIdService.statusMessageKey) {
|
||||
<mat-hint>
|
||||
<span
|
||||
class="external-id-status"
|
||||
[ngClass]="{
|
||||
success: externalNationalIdService.statusMessageKey === 'External ID verified successfully',
|
||||
error: externalNationalIdService.statusMessageKey !== 'External ID verified successfully'
|
||||
}"
|
||||
>
|
||||
{{ 'labels.inputs.' + externalNationalIdService.statusMessageKey | translate }}
|
||||
</span>
|
||||
</mat-hint>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Name fields section -->
|
||||
<div class="responsive-row">
|
||||
@if (editClientForm.get('fullname')) {
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{
|
||||
'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
|
||||
}}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
required
|
||||
formControlName="fullname"
|
||||
[placeholder]="'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate"
|
||||
[title]="'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate"
|
||||
/>
|
||||
@if (editClientForm.controls.fullname.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (editClientForm.get('firstname')) {
|
||||
<mat-form-field class="flex-32">
|
||||
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
required
|
||||
formControlName="firstname"
|
||||
[placeholder]="'labels.inputs.First Name' | translate"
|
||||
[title]="'labels.inputs.First Name' | translate"
|
||||
/>
|
||||
@if (editClientForm.controls.firstname.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (editClientForm.get('middlename')) {
|
||||
<mat-form-field class="flex-32">
|
||||
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="middlename"
|
||||
[placeholder]="'labels.inputs.Middle Name' | translate"
|
||||
[title]="'labels.inputs.Middle Name' | translate"
|
||||
/>
|
||||
</mat-form-field>
|
||||
}
|
||||
|
||||
@if (editClientForm.get('lastname')) {
|
||||
<mat-form-field class="flex-32">
|
||||
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
required
|
||||
formControlName="lastname"
|
||||
[placeholder]="'labels.inputs.Last Name' | translate"
|
||||
[title]="'labels.inputs.Last Name' | translate"
|
||||
/>
|
||||
@if (editClientForm.controls.lastname.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
|
||||
<mat-divider class="section-divider"></mat-divider>
|
||||
|
||||
<!-- Date of Birth and Gender Row -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-48" (click)="dateOfBirthDatePicker.open()">
|
||||
<mat-label>{{
|
||||
'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
|
||||
}}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="dateOfBirthDatePicker"
|
||||
formControlName="dateOfBirth"
|
||||
[placeholder]="
|
||||
'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
|
||||
"
|
||||
[title]="
|
||||
'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
|
||||
"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
@if (legalFormId === LegalFormId.PERSON) {
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
|
||||
<mat-select formControlName="genderId">
|
||||
@for (gender of genderOptions; track gender) {
|
||||
<mat-option [value]="gender.id">
|
||||
{{ gender.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
}
|
||||
</div>
|
||||
|
||||
<!-- Staff and Is Staff Row -->
|
||||
<div class="responsive-row align-center">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
@for (staff of staffOptions; track staff) {
|
||||
<mat-option [value]="staff.id">
|
||||
{{ staff.displayName }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
@if (legalFormId === LegalFormId.PERSON) {
|
||||
<mat-checkbox class="flex-48 margin-v" labelPosition="before" formControlName="isStaff">
|
||||
{{ 'labels.inputs.Is staff' | translate }}?
|
||||
</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (editClientForm.contains('clientNonPersonDetails')) {
|
||||
<div class="flex-100 layout-row-wrap gap-2percent column-on-small" formGroupName="clientNonPersonDetails">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
|
||||
<mat-select formControlName="constitutionId" required>
|
||||
@for (constitution of constitutionOptions; track constitution) {
|
||||
<mat-option [value]="constitution.id">
|
||||
{{ constitution.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
|
||||
<mat-select formControlName="mainBusinessLineId">
|
||||
@for (business of businessLineOptions; track business) {
|
||||
<mat-option [value]="business.id">
|
||||
{{ business.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
|
||||
<input
|
||||
[placeholder]="'labels.inputs.Incorporation Validity Till Date' | translate"
|
||||
[title]="'labels.inputs.Incorporation Validity Till Date' | translate"
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="incorpValidityTillDateDatePicker"
|
||||
formControlName="incorpValidityTillDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="incorpNumber"
|
||||
[placeholder]="'labels.inputs.Incorporation No' | translate"
|
||||
[title]="'labels.inputs.Incorporation No' | translate"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-98">
|
||||
<mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
|
||||
<textarea
|
||||
matInput
|
||||
formControlName="remarks"
|
||||
cdkTextareaAutosize
|
||||
cdkAutosizeMinRows="2"
|
||||
[placeholder]="'labels.inputs.Remarks' | translate"
|
||||
[title]="'labels.inputs.Remarks' | translate"
|
||||
></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
|
||||
<!-- Mobile No and Email Address Row -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="text"
|
||||
formControlName="mobileNo"
|
||||
[placeholder]="'labels.inputs.Mobile No' | translate"
|
||||
[title]="'labels.inputs.Mobile No' | translate"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="emailAddress"
|
||||
[placeholder]="'labels.inputs.Email Address' | translate"
|
||||
[title]="'labels.inputs.Email Address' | translate"
|
||||
/>
|
||||
@if (editClientForm.controls.emailAddress.errors?.email) {
|
||||
<mat-error> Email not valid </mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mifosx-client-entity-kyc-step
|
||||
#clientEntityKyc
|
||||
[constitutionType]="getConstitutionType()"
|
||||
[readOnly]="isTabReadOnly(2)"
|
||||
></mifosx-client-entity-kyc-step>
|
||||
</div>
|
||||
</mat-tab>
|
||||
}
|
||||
|
||||
<!-- Client Type and Client Classification Row -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
|
||||
<mat-select formControlName="clientTypeId">
|
||||
@for (clientType of clientTypeOptions; track clientType) {
|
||||
<mat-option [value]="clientType.id">
|
||||
{{ clientType.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
|
||||
<mat-select formControlName="clientClassificationId">
|
||||
@for (clientClassification of clientClassificationTypeOptions; track clientClassification) {
|
||||
<mat-option [value]="clientClassification.id">
|
||||
{{ clientClassification.name }}
|
||||
</mat-option>
|
||||
}
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<!-- Tab: Address -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="map" class="tab-icon"></fa-icon>
|
||||
ADDRESS
|
||||
</ng-template>
|
||||
@let addressTabIdx = legalFormType === 2 ? 3 : 2;
|
||||
<div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(addressTabIdx)">
|
||||
<div class="tab-mode-bar">
|
||||
@if (isTabReadOnly(addressTabIdx)) {
|
||||
<button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(addressTabIdx)">
|
||||
<mat-icon>edit</mat-icon> Edit
|
||||
</button>
|
||||
} @else {
|
||||
<button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(addressTabIdx)">
|
||||
<mat-icon>close</mat-icon> Cancel
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
<mifosx-client-india-address-step #clientIndiaAddress
|
||||
[clientId]="clientId"
|
||||
[readOnly]="isTabReadOnly(addressTabIdx)"
|
||||
></mifosx-client-india-address-step>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<!-- Submitted On and Activated On Row -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
|
||||
<input
|
||||
[placeholder]="'labels.inputs.Submitted On' | translate"
|
||||
[title]="'labels.inputs.Submitted On' | translate"
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="submittedOnDatePicker"
|
||||
formControlName="submittedOnDate"
|
||||
required
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="submittedOnDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #submittedOnDatePicker></mat-datepicker>
|
||||
@if (editClientForm.controls.submittedOnDate.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Submitted Date' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48" (click)="activatedOnDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Activated On' | translate }}</mat-label>
|
||||
<input
|
||||
[placeholder]="'labels.inputs.Activated On' | translate"
|
||||
[title]="'labels.inputs.Activated On' | translate"
|
||||
matInput
|
||||
[min]="editClientForm.value.submittedOnDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="activatedOnDatePicker"
|
||||
formControlName="activationDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #activatedOnDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
<!-- Tab: Family Members / Nominees -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="users" class="tab-icon"></fa-icon>
|
||||
FAMILY
|
||||
</ng-template>
|
||||
@let familyTabIdx = legalFormType === 2 ? 4 : 3;
|
||||
<div class="tab-content" [class.tab-content--readonly]="isTabReadOnly(familyTabIdx)">
|
||||
<div class="tab-mode-bar">
|
||||
@if (isTabReadOnly(familyTabIdx)) {
|
||||
<button mat-flat-button class="tab-mode-btn tab-mode-btn--edit" (click)="enableTabEdit(familyTabIdx)">
|
||||
<mat-icon>edit</mat-icon> Edit
|
||||
</button>
|
||||
} @else {
|
||||
<button mat-stroked-button class="tab-mode-btn tab-mode-btn--cancel" (click)="cancelTabEdit(familyTabIdx)">
|
||||
<mat-icon>close</mat-icon> Cancel
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mifosx-client-family-members-step #clientFamilyMembers
|
||||
[clientTemplate]="clientDataAndTemplate"
|
||||
[clientId]="clientId"
|
||||
[readOnly]="isTabReadOnly(familyTabIdx)"
|
||||
></mifosx-client-family-members-step>
|
||||
</div>
|
||||
</mat-tab>
|
||||
|
||||
<mat-card-actions class="button-container">
|
||||
<button type="button" mat-raised-button [routerLink]="['../general']">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
<!-- Tab: Application Summary & Submit -->
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<fa-icon icon="eye" class="tab-icon"></fa-icon>
|
||||
Application Summary
|
||||
</ng-template>
|
||||
<div class="tab-content">
|
||||
<mifosx-client-preview-step
|
||||
[clientTemplate]="clientDataAndTemplate"
|
||||
[client]="client"
|
||||
[kycData]="clientKycStep?.kycData"
|
||||
[addressData]="clientIndiaAddressStep?.addressData"
|
||||
[guardian]="clientGeneralStep?.selectedGuardian"
|
||||
[guardianRelation]="clientGeneralStep?.createClientForm?.get('guardianDetails.guardianRelation')?.value || ''"
|
||||
(submitEvent)="submit()"
|
||||
></mifosx-client-preview-step>
|
||||
</div>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
|
||||
<!-- Bottom Action Bar -->
|
||||
<div class="action-bar">
|
||||
<button mat-raised-button [routerLink]="['../']" class="cancel-btn">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<div class="action-bar-right">
|
||||
@if (selectedTabIndex > 0) {
|
||||
<button mat-raised-button (click)="selectedTabIndex = selectedTabIndex - 1">
|
||||
<fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Previous' | translate }}
|
||||
</button>
|
||||
<button type="submit" mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
}
|
||||
@if (selectedTabIndex < totalTabs - 1) {
|
||||
<button mat-raised-button color="primary" (click)="onNext()">
|
||||
{{ 'labels.buttons.Next' | translate }}
|
||||
<fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</form>
|
||||
</mat-card>
|
||||
}
|
||||
@if (selectedTabIndex === totalTabs - 1 && areFormvalids()) {
|
||||
<button mat-raised-button color="primary" (click)="submit()" [disabled]="savingClient">
|
||||
@if (savingClient) {
|
||||
<mat-progress-spinner diameter="18" mode="indeterminate" class="m-r-10"></mat-progress-spinner>
|
||||
Saving...
|
||||
} @else {
|
||||
<fa-icon icon="check" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user