WEB-396:fix align heading and add button in address, family, and identities tabs (#2951)

Remove improper trackBy usage and fix type safety issues.
This commit is contained in:
Shubham Kumar
2025-12-30 20:25:24 -06:00
committed by GitHub
parent 400edb27d9
commit 98a5af6f60
6 changed files with 47 additions and 26 deletions
@@ -1,14 +1,17 @@
<div class="tab-container mat-typography">
<h3>{{ 'labels.heading.Address' | translate }}</h3>
<div class="layout-row align-flex-end">
<button mat-raised-button color="primary" (click)="addAddress()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
<div class="layout-row align-start">
<div class="m-b-10">
<h3>{{ 'labels.heading.Address' | translate }}</h3>
</div>
<div class="action-button m-b-10 gap-25px">
<button mat-raised-button color="primary" (click)="addAddress()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
</div>
</div>
<mat-accordion>
@for (address of clientAddressData; track address; let i = $index) {
@for (address of clientAddressData; track address.addressId; let i = $index) {
<mat-expansion-panel class="address">
<mat-expansion-panel-header>
<mat-panel-title>
@@ -2,6 +2,10 @@
padding: 1%;
margin: 1%;
.action-button {
margin-left: auto;
}
.address {
.address-actions {
margin-top: 1%;
@@ -1,15 +1,18 @@
<div class="tab-container mat-typography">
<router-outlet>
<h3>{{ 'labels.heading.Family Members' | translate }}</h3>
<div class="layout-row align-flex-end">
<button mat-raised-button color="primary" [routerLink]="['./add']">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
<div class="layout-row align-start">
<div class="m-b-10">
<h3>{{ 'labels.heading.Family Members' | translate }}</h3>
</div>
<div class="action-button m-b-10 gap-25px">
<button mat-raised-button color="primary" [routerLink]="['./add']">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
</div>
</div>
<mat-accordion>
@for (member of clientFamilyMembers; track member; let i = $index) {
@for (member of clientFamilyMembers; track member.id; let i = $index) {
<mat-expansion-panel class="family-member">
<mat-expansion-panel-header>
<mat-panel-title>
@@ -2,6 +2,10 @@
padding: 1%;
margin: 1%;
.action-button {
margin-left: auto;
}
.family-member {
.family-member-actions {
margin-top: 1%;
@@ -1,16 +1,19 @@
<div class="tab-container mat-typography">
<h3>{{ 'labels.heading.Identities' | translate }}</h3>
<div class="layout-row align-flex-end">
<button
mat-raised-button
color="primary"
(click)="addIdentifier()"
*mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'"
>
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Add' | translate }}
</button>
<div class="layout-row align-start">
<div class="m-b-10">
<h3>{{ 'labels.heading.Identities' | translate }}</h3>
</div>
<div class="action-button m-b-10 gap-25px">
<button
mat-raised-button
color="primary"
(click)="addIdentifier()"
*mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'"
>
<fa-icon icon="plus" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Add' | translate }}
</button>
</div>
</div>
<table mat-table #identifiersTable [dataSource]="clientIdentities" [ngStyle]="{ 'margin-top': '3%' }">
@@ -4,6 +4,10 @@
padding: 1rem;
margin: 1rem 0;
.action-button {
margin-left: auto;
}
h3 {
margin: 0;
}