WEB-600 feat:External National ID System integration for client creation/editing (#3145)

improve

src/app/clients/edit-client/edit-client.component.html

@@ -58,12 +58,25 @@
               [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.contains('fullname')) {
+          @if (editClientForm.get('fullname')) {
             <mat-form-field class="flex-48">
               <mat-label>{{
                 'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
@@ -84,7 +97,7 @@
             </mat-form-field>
           }
 
-          @if (editClientForm.contains('firstname')) {
+          @if (editClientForm.get('firstname')) {
             <mat-form-field class="flex-32">
               <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
               <input
@@ -103,7 +116,7 @@
             </mat-form-field>
           }
 
-          @if (editClientForm.contains('middlename')) {
+          @if (editClientForm.get('middlename')) {
             <mat-form-field class="flex-32">
               <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
               <input
@@ -115,7 +128,7 @@
             </mat-form-field>
           }
 
-          @if (editClientForm.contains('lastname')) {
+          @if (editClientForm.get('lastname')) {
             <mat-form-field class="flex-32">
               <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
               <input

src/app/clients/edit-client/edit-client.component.scss

@@ -93,10 +93,6 @@
   .mat-form-field-outline {
     color: rgb(0 0 0 / 12%);
   }
-
-  .mat-form-field-outline-thick {
-    color: #3f51b5;
-  }
 }
 
 :host ::ng-deep .mat-form-field.mat-form-field-invalid {
@@ -229,6 +225,23 @@
   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;

src/app/clients/edit-client/edit-client.component.ts

@@ -22,6 +22,7 @@ import {
 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';
 import { MatDivider } from '@angular/material/divider';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -34,6 +35,7 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   selector: 'mifosx-edit-client',
   templateUrl: './edit-client.component.html',
   styleUrls: ['./edit-client.component.scss'],
+  providers: [ExternalNationalIdService],
   imports: [
     ...STANDALONE_SHARED_IMPORTS,
     MatDivider,
@@ -48,6 +50,7 @@ export class EditClientComponent implements OnInit {
   private clientsService = inject(ClientsService);
   private dateUtils = inject(Dates);
   private settingsService = inject(SettingsService);
+  externalNationalIdService = inject(ExternalNationalIdService);
 
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
@@ -126,6 +129,8 @@ export class EditClientComponent implements OnInit {
     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);
   }
 
   /**