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>
|
||||
|
||||
@@ -6,243 +6,146 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.margin-v {
|
||||
margin: 2em 0 0;
|
||||
.create-client-container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.flex-32 {
|
||||
flex: 0 1 32%;
|
||||
max-width: 32%;
|
||||
}
|
||||
|
||||
.gap-2percent {
|
||||
gap: 2%;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Enhanced layout styles with Material compatibility
|
||||
.container {
|
||||
margin: 24px auto;
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
padding: 0 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// More specific Material overrides
|
||||
:host ::ng-deep .mat-card {
|
||||
padding: 32px;
|
||||
margin: 16px 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-card-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Flex utilities with better responsive support
|
||||
.flex-24 {
|
||||
flex: 0 1 calc(25% - 15px);
|
||||
max-width: calc(25% - 15px);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.flex-48 {
|
||||
flex: 0 1 calc(50% - 10px);
|
||||
max-width: calc(50% - 10px);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.responsive-row {
|
||||
.client-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.header-icon {
|
||||
font-size: 20px;
|
||||
color: var(--md-sys-color-primary, #1074b9);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.responsive-row:last-child {
|
||||
margin-bottom: 0;
|
||||
.client-id-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: auto;
|
||||
padding: 5px 14px;
|
||||
background: #eff6ff;
|
||||
color: #1074b9;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
// Enhanced Material form field styling
|
||||
:host ::ng-deep .mat-form-field {
|
||||
.client-tabs {
|
||||
background: var(--md-sys-color-surface, #fff);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-tab-header {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.mat-mdc-tab {
|
||||
min-width: 160px;
|
||||
padding: 0 24px;
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body-wrapper {
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.mat-mdc-tab-body-content {
|
||||
overflow: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: 24px 16px;
|
||||
}
|
||||
|
||||
.tab-section {
|
||||
margin-bottom: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-form-field:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
// Ensure consistent form field appearance
|
||||
:host ::ng-deep .responsive-row .mat-form-field {
|
||||
min-height: 56px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .responsive-row .mat-form-field .mat-form-field-wrapper {
|
||||
padding-bottom: 1.3438em;
|
||||
}
|
||||
|
||||
// Error state styling and form field appearance consistency
|
||||
:host ::ng-deep .mat-form-field-appearance-outline {
|
||||
.mat-form-field-outline {
|
||||
color: rgb(0 0 0 / 12%);
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-form-field.mat-form-field-invalid {
|
||||
.mat-form-field-outline-thick {
|
||||
color: #f44336;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-error {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
margin: 32px 0 24px;
|
||||
border-color: rgb(0 0 0 / 12%);
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-checkbox {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
// Enhanced button styling with better Material integration
|
||||
:host ::ng-deep mat-card-actions {
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 24px 0;
|
||||
margin-top: 32px;
|
||||
border-top: 1px solid rgb(0 0 0 / 12%);
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:host ::ng-deep mat-card-actions button {
|
||||
min-width: 100px;
|
||||
height: 36px;
|
||||
padding: 0 20px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
text-transform: none;
|
||||
letter-spacing: 0.3px;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
.action-bar-right {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
// Enhanced responsive breakpoints
|
||||
@media (width <= 1024px) {
|
||||
.flex-24 {
|
||||
flex: 0 1 calc(50% - 10px);
|
||||
max-width: calc(50% - 10px);
|
||||
}
|
||||
.cancel-btn {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.flex-48 {
|
||||
flex: 0 1 100%;
|
||||
max-width: 100%;
|
||||
/* ─── Read-only tab state ─── */
|
||||
.tab-content--readonly {
|
||||
background: #f9fafb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ─── Tab mode toolbar ─── */
|
||||
.tab-mode-bar {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 8px 0 0;
|
||||
}
|
||||
|
||||
.tab-mode-btn {
|
||||
display: inline-flex !important;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px !important;
|
||||
font-weight: 500 !important;
|
||||
height: 34px !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 0 14px !important;
|
||||
|
||||
.mat-icon {
|
||||
font-size: 18px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
.flex-32,
|
||||
.flex-24,
|
||||
.flex-48 {
|
||||
flex: 0 1 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
:host ::ng-deep .mat-card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.responsive-row {
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.responsive-row .mat-form-field {
|
||||
flex: 1 1 100%;
|
||||
max-width: 100%;
|
||||
margin-right: 0;
|
||||
}
|
||||
.tab-mode-btn--edit {
|
||||
background: #1074b9 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
@media (width <= 600px) {
|
||||
:host ::ng-deep mat-card-actions {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
:host ::ng-deep mat-card-actions button {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 480px) {
|
||||
:host ::ng-deep .mat-card {
|
||||
padding: 16px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.responsive-row {
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix for potential Material Design conflicts
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Ensure proper form styling
|
||||
:host ::ng-deep form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// DatePicker specific styling
|
||||
:host ::ng-deep .mat-datepicker-toggle {
|
||||
color: rgb(0 0 0 / 54%);
|
||||
}
|
||||
|
||||
.external-id-status {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.loading {
|
||||
color: #1976d2;
|
||||
}
|
||||
|
||||
&.success {
|
||||
color: #388e3c;
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: #d32f2f;
|
||||
}
|
||||
}
|
||||
|
||||
// Select dropdown styling
|
||||
:host ::ng-deep .mat-select-panel {
|
||||
max-height: 256px;
|
||||
.tab-mode-btn--cancel {
|
||||
background: #fff !important;
|
||||
color: #ef4444 !important;
|
||||
border: 1px solid #fca5a5 !important;
|
||||
}
|
||||
|
||||
@@ -7,226 +7,159 @@
|
||||
*/
|
||||
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, inject } from '@angular/core';
|
||||
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
||||
import { LegalFormId } from 'app/clients/models/legal-form.enum';
|
||||
import {
|
||||
UntypedFormBuilder,
|
||||
UntypedFormGroup,
|
||||
Validators,
|
||||
UntypedFormControl,
|
||||
ReactiveFormsModule
|
||||
} from '@angular/forms';
|
||||
import { Component, QueryList, ViewChild, ViewChildren, inject } from '@angular/core';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
|
||||
/** Custom Services */
|
||||
import { ClientsService } from '../clients.service';
|
||||
import { SettingsService } from 'app/settings/settings.service';
|
||||
import { Dates } from 'app/core/utils/dates';
|
||||
import { ExternalNationalIdService } from 'app/clients/services/external-national-id.service';
|
||||
|
||||
/** Custom Components */
|
||||
import { ClientGeneralStepComponent } from '../client-stepper/client-general-step/client-general-step.component';
|
||||
import { ClientAddressStepComponent } from '../client-stepper/client-address-step/client-address-step.component';
|
||||
import { ClientIndiaAddressStepComponent } from '../client-stepper/client-india-address-step/client-india-address-step.component';
|
||||
import { ClientEntityKycStepComponent } from '../client-stepper/client-entity-kyc-step/client-entity-kyc-step.component';
|
||||
import { ClientDatatableStepComponent } from '../client-stepper/client-datatable-step/client-datatable-step.component';
|
||||
import { ClientKycStepComponent } from '../client-stepper/client-kyc-step/client-kyc-step.component';
|
||||
import { ClientPreviewStepComponent } from '../client-stepper/client-preview-step/client-preview-step.component';
|
||||
import { ClientFamilyMembersStepComponent } from '../client-stepper/client-family-members-step/client-family-members-step.component';
|
||||
|
||||
import { MatTabsModule } from '@angular/material/tabs';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatDivider } from '@angular/material/divider';
|
||||
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
|
||||
import { MatCheckbox } from '@angular/material/checkbox';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatProgressSpinner } from '@angular/material/progress-spinner';
|
||||
import { MatTooltip } from '@angular/material/tooltip';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
|
||||
/**
|
||||
* Edit Client Component
|
||||
* Edit Client Component — uses the same wizard/stepper layout as Create Client.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-edit-client',
|
||||
templateUrl: './edit-client.component.html',
|
||||
styleUrls: ['./edit-client.component.scss'],
|
||||
providers: [ExternalNationalIdService],
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
MatTabsModule,
|
||||
MatIconModule,
|
||||
MatDivider,
|
||||
CdkTextareaAutosize,
|
||||
MatCheckbox
|
||||
FaIconComponent,
|
||||
MatProgressSpinner,
|
||||
MatTooltip,
|
||||
ClientGeneralStepComponent,
|
||||
ClientAddressStepComponent,
|
||||
ClientIndiaAddressStepComponent,
|
||||
ClientEntityKycStepComponent,
|
||||
ClientDatatableStepComponent,
|
||||
ClientKycStepComponent,
|
||||
ClientPreviewStepComponent,
|
||||
ClientFamilyMembersStepComponent
|
||||
]
|
||||
})
|
||||
export class EditClientComponent implements OnInit {
|
||||
private formBuilder = inject(UntypedFormBuilder);
|
||||
export class EditClientComponent {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private clientsService = inject(ClientsService);
|
||||
private dateUtils = inject(Dates);
|
||||
private settingsService = inject(SettingsService);
|
||||
externalNationalIdService = inject(ExternalNationalIdService);
|
||||
|
||||
/** Minimum date allowed. */
|
||||
minDate = new Date(2000, 0, 1);
|
||||
/** Maximum date allowed. */
|
||||
maxDate = new Date();
|
||||
@ViewChild(ClientGeneralStepComponent) clientGeneralStep: ClientGeneralStepComponent;
|
||||
@ViewChild('clientAddress') clientAddressStep: ClientAddressStepComponent;
|
||||
@ViewChild('clientIndiaAddress') clientIndiaAddressStep: ClientIndiaAddressStepComponent;
|
||||
@ViewChild('clientEntityKyc') clientEntityKycStep: ClientEntityKycStepComponent;
|
||||
@ViewChild('clientKyc') clientKycStep: ClientKycStepComponent;
|
||||
@ViewChild('clientFamilyMembers') clientFamilyMembersStep: ClientFamilyMembersStepComponent;
|
||||
@ViewChildren('dtclient') clientDatatables: QueryList<ClientDatatableStepComponent>;
|
||||
|
||||
/** Client Data and Template */
|
||||
datatables: any = [];
|
||||
legalFormType = 1;
|
||||
selectedTabIndex = 0;
|
||||
savingClient = false;
|
||||
|
||||
/** Track which tabs are in edit mode (false = read-only, true = editable) */
|
||||
tabEditMode: Record<number, boolean> = {};
|
||||
|
||||
/** Client data and template (merged object from resolver) */
|
||||
clientDataAndTemplate: any;
|
||||
/** Edit Client Form */
|
||||
editClientForm: UntypedFormGroup;
|
||||
/** Client ID */
|
||||
clientId: string;
|
||||
|
||||
/** Office Options */
|
||||
officeOptions: any;
|
||||
/** Staff Options */
|
||||
staffOptions: any;
|
||||
/** Legal Form Options */
|
||||
legalFormOptions: any;
|
||||
/** Client Type Options */
|
||||
clientTypeOptions: any;
|
||||
/** Client Classification Options */
|
||||
clientClassificationTypeOptions: any;
|
||||
/** Business Line Options */
|
||||
businessLineOptions: any;
|
||||
/** Constitution Options */
|
||||
constitutionOptions: any;
|
||||
/** Gender Options */
|
||||
genderOptions: any;
|
||||
legalFormId = LegalFormId.PERSON;
|
||||
|
||||
/** Expose enum to template */
|
||||
readonly LegalFormId = LegalFormId;
|
||||
|
||||
/**
|
||||
* Fetches client template data from `resolve`
|
||||
* @param {FormBuilder} formBuilder Form Builder
|
||||
* @param {ActivatedRoute} route ActivatedRoute
|
||||
* @param {Router} router Router
|
||||
* @param {ClientsService} clientsService Clients Service
|
||||
* @param {Dates} dateUtils Date Utils
|
||||
* @param {SettingsService} settingsService Settings Service
|
||||
*/
|
||||
constructor() {
|
||||
this.route.data.subscribe((data: { clientDataAndTemplate: any }) => {
|
||||
this.clientDataAndTemplate = data.clientDataAndTemplate;
|
||||
});
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.maxDate = this.settingsService.businessDate;
|
||||
this.createEditClientForm();
|
||||
this.setOptions();
|
||||
this.buildDependencies();
|
||||
this.legalFormId = LegalFormId.PERSON;
|
||||
this.editClientForm.patchValue({
|
||||
officeId: this.clientDataAndTemplate.officeId,
|
||||
staffId: this.clientDataAndTemplate.staffId,
|
||||
legalFormId: this.clientDataAndTemplate.legalForm && this.clientDataAndTemplate.legalForm.id,
|
||||
accountNo: this.clientDataAndTemplate.accountNo,
|
||||
externalId: this.clientDataAndTemplate.externalId,
|
||||
genderId: this.clientDataAndTemplate.gender && this.clientDataAndTemplate.gender.id,
|
||||
isStaff: this.clientDataAndTemplate.isStaff,
|
||||
active: this.clientDataAndTemplate.active,
|
||||
mobileNo: this.clientDataAndTemplate.mobileNo,
|
||||
emailAddress: this.clientDataAndTemplate.emailAddress,
|
||||
dateOfBirth: this.clientDataAndTemplate.dateOfBirth && new Date(this.clientDataAndTemplate.dateOfBirth),
|
||||
clientTypeId: this.clientDataAndTemplate.clientType && this.clientDataAndTemplate.clientType.id,
|
||||
clientClassificationId:
|
||||
this.clientDataAndTemplate.clientClassification && this.clientDataAndTemplate.clientClassification.id,
|
||||
submittedOnDate:
|
||||
this.clientDataAndTemplate.timeline.submittedOnDate &&
|
||||
new Date(this.clientDataAndTemplate.timeline.submittedOnDate),
|
||||
activationDate:
|
||||
this.clientDataAndTemplate.timeline.activatedOnDate &&
|
||||
new Date(this.clientDataAndTemplate.timeline.activatedOnDate)
|
||||
});
|
||||
if (this.clientDataAndTemplate.legalForm) {
|
||||
this.legalFormId = this.clientDataAndTemplate.legalForm.id;
|
||||
}
|
||||
// skipInitialValue=true: avoid re-fetching data for an already-saved external ID
|
||||
this.externalNationalIdService.watchExternalId(this.editClientForm, this.genderOptions, true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the edit client form.
|
||||
*/
|
||||
createEditClientForm() {
|
||||
this.editClientForm = this.formBuilder.group({
|
||||
officeId: [{ value: '', disabled: true }],
|
||||
staffId: [''],
|
||||
legalFormId: [{ value: '', disabled: true }],
|
||||
isStaff: [false],
|
||||
active: [false],
|
||||
accountNo: [{ value: '', disabled: true }],
|
||||
externalId: [''],
|
||||
genderId: [''],
|
||||
mobileNo: [''],
|
||||
emailAddress: [
|
||||
'',
|
||||
Validators.email
|
||||
],
|
||||
dateOfBirth: [''],
|
||||
clientTypeId: [''],
|
||||
clientClassificationId: [''],
|
||||
submittedOnDate: [
|
||||
'',
|
||||
Validators.required
|
||||
],
|
||||
activationDate: ['']
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets select dropdown options.
|
||||
*/
|
||||
setOptions() {
|
||||
this.officeOptions = this.clientDataAndTemplate.officeOptions;
|
||||
this.staffOptions = this.clientDataAndTemplate.staffOptions;
|
||||
this.legalFormOptions = this.clientDataAndTemplate.clientLegalFormOptions;
|
||||
this.clientTypeOptions = this.clientDataAndTemplate.clientTypeOptions;
|
||||
this.clientClassificationTypeOptions = this.clientDataAndTemplate.clientClassificationOptions;
|
||||
this.businessLineOptions = this.clientDataAndTemplate.clientNonPersonMainBusinessLineOptions;
|
||||
this.constitutionOptions = this.clientDataAndTemplate.clientNonPersonConstitutionOptions;
|
||||
this.genderOptions = this.clientDataAndTemplate.genderOptions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds controls conditionally.
|
||||
*/
|
||||
buildDependencies() {
|
||||
this.editClientForm.get('legalFormId').valueChanges.subscribe((legalFormId: any) => {
|
||||
if (legalFormId === LegalFormId.PERSON) {
|
||||
this.editClientForm.removeControl('fullname');
|
||||
this.editClientForm.removeControl('clientNonPersonDetails');
|
||||
this.editClientForm.addControl(
|
||||
'firstname',
|
||||
new UntypedFormControl(this.clientDataAndTemplate.firstname, Validators.required)
|
||||
);
|
||||
this.editClientForm.addControl('middlename', new UntypedFormControl(this.clientDataAndTemplate.middlename));
|
||||
this.editClientForm.addControl(
|
||||
'lastname',
|
||||
new UntypedFormControl(this.clientDataAndTemplate.lastname, Validators.required)
|
||||
);
|
||||
} else {
|
||||
this.editClientForm.removeControl('firstname');
|
||||
this.editClientForm.removeControl('middlename');
|
||||
this.editClientForm.removeControl('lastname');
|
||||
this.editClientForm.addControl(
|
||||
'fullname',
|
||||
new UntypedFormControl(this.clientDataAndTemplate.fullname, Validators.required)
|
||||
);
|
||||
this.editClientForm.addControl(
|
||||
'clientNonPersonDetails',
|
||||
this.formBuilder.group({
|
||||
constitutionId: [
|
||||
this.clientDataAndTemplate.clientNonPersonDetails.constitution &&
|
||||
this.clientDataAndTemplate.clientNonPersonDetails.constitution.id,
|
||||
Validators.required
|
||||
],
|
||||
incorpValidityTillDate: [
|
||||
this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate &&
|
||||
new Date(this.clientDataAndTemplate.clientNonPersonDetails.incorpValidityTillDate)
|
||||
],
|
||||
incorpNumber: [this.clientDataAndTemplate.clientNonPersonDetails.incorpNumber],
|
||||
mainBusinessLineId: [
|
||||
this.clientDataAndTemplate.clientNonPersonDetails.mainBusinessLine &&
|
||||
this.clientDataAndTemplate.clientNonPersonDetails.mainBusinessLine.id
|
||||
],
|
||||
remarks: [this.clientDataAndTemplate.clientNonPersonDetails.remarks]
|
||||
})
|
||||
);
|
||||
this.clientId = this.clientDataAndTemplate.id;
|
||||
if (this.clientDataAndTemplate.legalForm) {
|
||||
this.legalFormType = this.clientDataAndTemplate.legalForm.id;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
getDateLabel(legalFormId: number, values: string[]): string {
|
||||
return legalFormId === LegalFormId.PERSON ? values[0] : values[1];
|
||||
/** Check if a tab is in read-only mode */
|
||||
isTabReadOnly(tabIndex: number): boolean {
|
||||
return !this.tabEditMode[tabIndex];
|
||||
}
|
||||
|
||||
/** Enable editing for a specific tab */
|
||||
enableTabEdit(tabIndex: number): void {
|
||||
this.tabEditMode[tabIndex] = true;
|
||||
}
|
||||
|
||||
/** Cancel editing — revert tab back to read-only */
|
||||
cancelTabEdit(tabIndex: number): void {
|
||||
this.tabEditMode[tabIndex] = false;
|
||||
}
|
||||
|
||||
get clientGeneralForm() {
|
||||
return this.clientGeneralStep?.createClientForm;
|
||||
}
|
||||
|
||||
/** Total tab count (+1 for Nominees, +1 for Non-Individual Entity KYC) */
|
||||
get totalTabs(): number {
|
||||
return this.legalFormType === 2 ? 6 : 5;
|
||||
}
|
||||
|
||||
/** Get constitution type from general step for entity KYC */
|
||||
getConstitutionType(): string {
|
||||
return this.clientGeneralStep?.createClientForm?.get('clientNonPersonDetails.constitutionId')?.value || '';
|
||||
}
|
||||
|
||||
get client() {
|
||||
const general = this.clientGeneralStep?.clientGeneralDetails || {};
|
||||
return { ...general };
|
||||
}
|
||||
|
||||
areFormvalids(): boolean {
|
||||
if (!this.clientGeneralStep || !this.clientGeneralForm) {
|
||||
return false;
|
||||
}
|
||||
let areValids = this.clientGeneralForm.valid;
|
||||
if (this.clientGeneralStep.sanctionsBlocked) {
|
||||
return false;
|
||||
}
|
||||
return areValids;
|
||||
}
|
||||
|
||||
/**
|
||||
* Next button handler — just navigates between tabs (client already exists in edit mode).
|
||||
*/
|
||||
onNext() {
|
||||
if (this.selectedTabIndex === 0) {
|
||||
if (!this.clientGeneralForm?.valid) {
|
||||
this.clientGeneralForm?.markAllAsTouched();
|
||||
setTimeout(() => {
|
||||
const firstInvalid = document.querySelector('.mat-mdc-form-field.ng-invalid');
|
||||
if (firstInvalid) {
|
||||
firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
||||
}
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
}
|
||||
this.selectedTabIndex = this.selectedTabIndex + 1;
|
||||
}
|
||||
|
||||
legalFormChange(eventData: { legalForm: number }) {
|
||||
this.legalFormType = eventData.legalForm;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -235,33 +168,144 @@ export class EditClientComponent implements OnInit {
|
||||
submit() {
|
||||
const locale = this.settingsService.language.code;
|
||||
const dateFormat = this.settingsService.dateFormat;
|
||||
const editClientFormValue: any = this.editClientForm.getRawValue();
|
||||
const clientData = {
|
||||
...editClientFormValue,
|
||||
dateOfBirth:
|
||||
editClientFormValue.dateOfBirth && this.dateUtils.formatDate(editClientFormValue.dateOfBirth, dateFormat),
|
||||
submittedOnDate:
|
||||
editClientFormValue.submittedOnDate &&
|
||||
this.dateUtils.formatDate(editClientFormValue.submittedOnDate, dateFormat),
|
||||
activationDate: this.dateUtils.formatDate(editClientFormValue.activationDate, dateFormat),
|
||||
...this.client,
|
||||
dateFormat,
|
||||
locale
|
||||
};
|
||||
|
||||
// Remove fields not accepted by update API
|
||||
delete clientData.officeId;
|
||||
if (editClientFormValue.clientNonPersonDetails) {
|
||||
clientData.clientNonPersonDetails = {
|
||||
...editClientFormValue.clientNonPersonDetails,
|
||||
incorpValidityTillDate:
|
||||
editClientFormValue.clientNonPersonDetails.incorpValidityTillDate &&
|
||||
this.dateUtils.formatDate(editClientFormValue.clientNonPersonDetails.incorpValidityTillDate, dateFormat),
|
||||
dateFormat,
|
||||
locale
|
||||
};
|
||||
} else {
|
||||
clientData.clientNonPersonDetails = {};
|
||||
}
|
||||
this.clientsService.updateClient(this.clientDataAndTemplate.id, clientData).subscribe(() => {
|
||||
this.router.navigate(['../'], { relativeTo: this.route });
|
||||
|
||||
this.savingClient = true;
|
||||
this.clientsService.updateClient(this.clientId, clientData).subscribe({
|
||||
next: () => {
|
||||
this.savingClient = false;
|
||||
const navigateBack = () => this.router.navigate(['../'], { relativeTo: this.route });
|
||||
|
||||
// Upload photo if selected
|
||||
if (this.clientKycStep?.photographFile) {
|
||||
this.clientsService.uploadClientProfileImage(this.clientId, this.clientKycStep.photographFile).subscribe({ error: () => {} });
|
||||
}
|
||||
|
||||
// Upload signature if selected
|
||||
if (this.clientKycStep?.signatureFile) {
|
||||
this.clientsService.uploadClientSignatureImage(this.clientId, this.clientKycStep.signatureFile).subscribe({ error: () => {} });
|
||||
}
|
||||
|
||||
// Save addresses from India address step
|
||||
if (this.clientIndiaAddressStep?.hasAddressData) {
|
||||
this.saveClientAddresses(this.clientId);
|
||||
}
|
||||
|
||||
// Save new family members
|
||||
if (this.clientFamilyMembersStep?.hasFamilyMembers) {
|
||||
this.saveClientFamilyMembers(this.clientId);
|
||||
}
|
||||
|
||||
// Save/update KYC data if available
|
||||
if (this.clientKycStep?.hasKycData) {
|
||||
this.clientsService.saveClientKyc(this.clientId, this.clientKycStep.kycData).subscribe({
|
||||
next: () => navigateBack(),
|
||||
error: () => navigateBack()
|
||||
});
|
||||
} else {
|
||||
navigateBack();
|
||||
}
|
||||
},
|
||||
error: () => {
|
||||
this.savingClient = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Save addresses from the India address step to Fineract address API.
|
||||
*/
|
||||
private saveClientAddresses(clientId: string) {
|
||||
const addressData = this.clientIndiaAddressStep.addressData;
|
||||
const typeNameMap: Record<string, string[]> = {
|
||||
permanent: ['Permanent', 'Permanent Address'],
|
||||
current: ['Residential', 'Current', 'Current / Residential', 'Communication'],
|
||||
office: ['Office', 'Office / Work', 'Business', 'Work'],
|
||||
correspondence: ['Correspondence', 'Mailing', 'Postal']
|
||||
};
|
||||
|
||||
this.clientsService.getClientAddressTemplate().subscribe({
|
||||
next: (template: any) => {
|
||||
const typeOptions = template?.addressTypeIdOptions || [];
|
||||
for (const [tab, addr] of Object.entries(addressData)) {
|
||||
if (!addr || !(addr as any).addressLine1) continue;
|
||||
|
||||
const possibleNames = typeNameMap[tab] || [tab];
|
||||
let typeId = typeOptions.find((t: any) =>
|
||||
possibleNames.some((n: string) => t.name?.toLowerCase().includes(n.toLowerCase()))
|
||||
)?.id;
|
||||
|
||||
if (!typeId && typeOptions.length > 0) typeId = typeOptions[0].id;
|
||||
if (!typeId) continue;
|
||||
|
||||
const payload: any = {
|
||||
addressLine1: (addr as any).addressLine1 || '',
|
||||
addressLine2: (addr as any).addressLine2 || '',
|
||||
addressLine3: '',
|
||||
townVillage: (addr as any).locality || '',
|
||||
postalCode: (addr as any).pinCode || '',
|
||||
city: (addr as any).city || '',
|
||||
countyDistrict: (addr as any).district || '',
|
||||
street: (addr as any).landmark || '',
|
||||
addressType: typeId,
|
||||
isActive: tab === 'permanent'
|
||||
};
|
||||
|
||||
if ((addr as any).state && template?.stateProvinceIdOptions?.length) {
|
||||
const stateMatch = template.stateProvinceIdOptions.find((s: any) =>
|
||||
s.name?.toLowerCase() === (addr as any).state?.toLowerCase()
|
||||
);
|
||||
if (stateMatch) payload.stateProvinceId = stateMatch.id;
|
||||
}
|
||||
|
||||
this.clientsService.createClientAddress(clientId, typeId.toString(), payload).subscribe({ error: () => {} });
|
||||
}
|
||||
},
|
||||
error: () => {}
|
||||
});
|
||||
}
|
||||
|
||||
private saveClientFamilyMembers(clientId: string) {
|
||||
const members = this.clientFamilyMembersStep.clientFamilyMembers;
|
||||
for (const member of members) {
|
||||
// Skip existing members (already have an id from the API)
|
||||
if (member.id) continue;
|
||||
const marriageCertFile = member._marriageCertFile || null;
|
||||
const payload = { ...member };
|
||||
// Remove internal/transient fields
|
||||
delete payload._linkedClient;
|
||||
delete payload._marriageCertFile;
|
||||
delete payload.dateFormat;
|
||||
delete payload.locale;
|
||||
payload.dateFormat = this.settingsService.dateFormat;
|
||||
payload.locale = this.settingsService.language.code;
|
||||
this.clientsService.addFamilyMember(clientId, payload).subscribe({
|
||||
next: (res: any) => {
|
||||
// Upload marriage certificate if present
|
||||
if (marriageCertFile && res?.resourceId) {
|
||||
this.uploadFamilyMemberDocument(clientId, res.resourceId, marriageCertFile, 'Marriage Certificate');
|
||||
}
|
||||
},
|
||||
error: () => {}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload a document for a family member.
|
||||
*/
|
||||
private uploadFamilyMemberDocument(clientId: string, familyMemberId: string, file: File, docName: string) {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('name', docName);
|
||||
formData.append('description', docName);
|
||||
this.clientsService.uploadFamilyMemberDocument(clientId, familyMemberId, formData).subscribe({ error: () => {} });
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user