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"> <div class="tab-container mat-typography">
<h3>{{ 'labels.heading.Address' | translate }}</h3> <div class="layout-row align-start">
<div class="m-b-10">
<div class="layout-row align-flex-end"> <h3>{{ 'labels.heading.Address' | translate }}</h3>
<button mat-raised-button color="primary" (click)="addAddress()"> </div>
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }} <div class="action-button m-b-10 gap-25px">
</button> <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> </div>
<mat-accordion> <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 class="address">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
@@ -2,6 +2,10 @@
padding: 1%; padding: 1%;
margin: 1%; margin: 1%;
.action-button {
margin-left: auto;
}
.address { .address {
.address-actions { .address-actions {
margin-top: 1%; margin-top: 1%;
@@ -1,15 +1,18 @@
<div class="tab-container mat-typography"> <div class="tab-container mat-typography">
<router-outlet> <router-outlet>
<h3>{{ 'labels.heading.Family Members' | translate }}</h3> <div class="layout-row align-start">
<div class="m-b-10">
<div class="layout-row align-flex-end"> <h3>{{ 'labels.heading.Family Members' | translate }}</h3>
<button mat-raised-button color="primary" [routerLink]="['./add']"> </div>
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }} <div class="action-button m-b-10 gap-25px">
</button> <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> </div>
<mat-accordion> <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 class="family-member">
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
@@ -2,6 +2,10 @@
padding: 1%; padding: 1%;
margin: 1%; margin: 1%;
.action-button {
margin-left: auto;
}
.family-member { .family-member {
.family-member-actions { .family-member-actions {
margin-top: 1%; margin-top: 1%;
@@ -1,16 +1,19 @@
<div class="tab-container mat-typography"> <div class="tab-container mat-typography">
<h3>{{ 'labels.heading.Identities' | translate }}</h3> <div class="layout-row align-start">
<div class="m-b-10">
<div class="layout-row align-flex-end"> <h3>{{ 'labels.heading.Identities' | translate }}</h3>
<button </div>
mat-raised-button <div class="action-button m-b-10 gap-25px">
color="primary" <button
(click)="addIdentifier()" mat-raised-button
*mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'" color="primary"
> (click)="addIdentifier()"
<fa-icon icon="plus" class="m-r-10"></fa-icon> *mifosxHasPermission="'CREATE_CLIENTIDENTIFIER'"
{{ 'labels.buttons.Add' | translate }} >
</button> <fa-icon icon="plus" class="m-r-10"></fa-icon>
{{ 'labels.buttons.Add' | translate }}
</button>
</div>
</div> </div>
<table mat-table #identifiersTable [dataSource]="clientIdentities" [ngStyle]="{ 'margin-top': '3%' }"> <table mat-table #identifiersTable [dataSource]="clientIdentities" [ngStyle]="{ 'margin-top': '3%' }">
@@ -4,6 +4,10 @@
padding: 1rem; padding: 1rem;
margin: 1rem 0; margin: 1rem 0;
.action-button {
margin-left: auto;
}
h3 { h3 {
margin: 0; margin: 0;
} }