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

feat(clients): confirm linked Client ID + details after adding a family member

Browse Source 
The "Add Member" dialog closed silently on submit, giving no
acknowledgement of what got recorded — most notably the linked client's
own CBS Client ID when the member was linked to an existing client rather
than entered manually. Added a confirmation popup showing Client ID (when
linked), name, relationship, DOB and dependent status right after submit.
This commit is contained in:
nitesh
2026-07-30 13:38:10 +05:30
parent 387bd060e1
commit 186a9057a1
2 changed files with 162 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts
+17
View File
@@ -12,6 +12,7 @@ import { TranslateService } from '@ngx-translate/core';
import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
import { ClientFamilyMemberDialogComponent } from './client-family-member-dialog/client-family-member-dialog.component';
import { ImageZoomDialogComponent } from './client-family-member-dialog/client-family-member-dialog.component';
import { FamilyMemberAddedDialogComponent } from './family-member-added-dialog.component';
import { ClientsService } from '../../clients.service';
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
import { MatIcon } from '@angular/material/icon';
@@ -152,6 +153,22 @@ export class ClientFamilyMembersStepComponent implements OnInit {
ref.afterClosed().subscribe((response: any) => {
if (response?.member) {
this.clientFamilyMembers.push(response.member);
this.showFamilyMemberAddedConfirmation(response.member);
}
});
}
/** Confirms what was just recorded — in particular the linked client's own CBS Client ID,
* since the "Add Member" dialog closes silently otherwise and gives no acknowledgement. */
private showFamilyMemberAddedConfirmation(member: any): void {
this.dialog.open(FamilyMemberAddedDialogComponent, {
width: '360px',
data: {
clientId: member._linkedClient?.id ?? member.linkedClientId ?? null,
name: member._linkedClient?.displayName || member.firstName,
relationship: this.getRelName(member.relationshipId),
dateOfBirth: member.dateOfBirth,
isDependent: member.isDependent
}
});
}
src/app/clients/client-stepper/client-family-members-step/family-member-added-dialog.component.ts
+145
View File
@@ -0,0 +1,145 @@
/**
* Copyright since 2025 Mifos Initiative
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
import { Component, inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogTitle, MatDialogActions } from '@angular/material/dialog';
import { MatIcon } from '@angular/material/icon';
import { MatButton } from '@angular/material/button';
/**
* Confirmation popup shown right after a family member is added — surfaces the linked
* client's own CBS Client ID (when the member was linked to an existing client rather than
* entered manually) alongside name/relationship, since the "Add Member" dialog itself just
* closed silently before this with no acknowledgement of what got recorded.
*/
@Component({
selector: 'mifosx-family-member-added-dialog',
imports: [
MatDialogTitle,
MatDialogActions,
MatIcon,
MatButton
],
template: `
<h2 mat-dialog-title class="fma-title">
<mat-icon class="fma-title__icon">check_circle</mat-icon>
Family Member Added
</h2>
<div class="fma-body">
@if (data.clientId) {
<div class="fma-row fma-row--id">
<span class="fma-row__label">Client ID</span>
<span class="fma-row__value fma-row__value--id">{{ data.clientId }}</span>
</div>
}
<div class="fma-row">
<span class="fma-row__label">Name</span>
<span class="fma-row__value">{{ data.name }}</span>
</div>
@if (data.relationship) {
<div class="fma-row">
<span class="fma-row__label">Relationship</span>
<span class="fma-row__value">{{ data.relationship }}</span>
</div>
}
@if (data.dateOfBirth) {
<div class="fma-row">
<span class="fma-row__label">Date of Birth</span>
<span class="fma-row__value">{{ data.dateOfBirth }}</span>
</div>
}
@if (data.isDependent) {
<div class="fma-row">
<span class="fma-row__label">Dependent</span>
<span class="fma-row__value">Yes</span>
</div>
}
</div>
<mat-dialog-actions align="end">
<button mat-flat-button color="primary" (click)="dialogRef.close()">Done</button>
</mat-dialog-actions>
`,
styles: [
`
.fma-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 700;
color: #0f172a;
margin: 0;
padding: 20px 24px 4px;
}
.fma-title__icon {
color: #059669;
}
.fma-body {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px 24px 8px;
min-width: 280px;
}
.fma-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 8px 0;
border-bottom: 1px solid #f1f5f9;
&:last-child {
border-bottom: none;
}
}
.fma-row__label {
font-size: 12px;
color: #64748b;
font-weight: 500;
}
.fma-row__value {
font-size: 13px;
color: #0f172a;
font-weight: 600;
text-align: right;
}
.fma-row--id {
background: #eff6ff;
margin: 0 -24px;
padding: 10px 24px;
}
.fma-row__value--id {
font-family: 'Roboto Mono', monospace;
color: #1353a0;
font-size: 14px;
}
mat-dialog-actions {
padding: 8px 24px 16px;
}
`
]
})
export class FamilyMemberAddedDialogComponent {
dialogRef = inject<MatDialogRef<FamilyMemberAddedDialogComponent>>(MatDialogRef);
data: {
clientId?: string | number | null;
name: string;
relationship?: string;
dateOfBirth?: string;
isDependent?: boolean;
} = inject(MAT_DIALOG_DATA);
}