feat: redesign all dialogs, file upload, address/nominee/identifier tabs
- File upload: compact dashed zone (54px height), inline icon+filename+change - Dialogs: no scroll, rounded close button (red on hover), 700px width - Identifier dialog: 2-column grid, section divider, outline fields - Nominee: new NomineeDialogComponent popup (replaces page navigation) - Address tab: card panels, status badges, 3-column grid - Nominee tab: accordion with badges, 3-column grid - Shared form dialog: outline fields, fixed close button 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
b7f612c2f6
commit
97f30ac3c1
@@ -6,74 +6,111 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="tab-container mat-typography">
|
||||
<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 class="addr-container mat-typography">
|
||||
<!-- Header -->
|
||||
<div class="addr-header">
|
||||
<div class="addr-header__left">
|
||||
<i class="fa fa-map-marker addr-header__icon"></i>
|
||||
<h3 class="addr-header__title">{{ 'labels.heading.Address' | translate }}</h3>
|
||||
<span class="addr-header__badge">{{ clientAddressData?.length || 0 }}</span>
|
||||
</div>
|
||||
<button mat-flat-button color="primary" class="addr-header__btn" (click)="addAddress()">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<mat-accordion>
|
||||
<!-- Address Cards -->
|
||||
@if (!clientAddressData || clientAddressData.length === 0) {
|
||||
<div class="addr-empty">
|
||||
<i class="fa fa-map-o addr-empty__icon"></i>
|
||||
<p class="addr-empty__text">No addresses added yet</p>
|
||||
</div>
|
||||
}
|
||||
|
||||
<mat-accordion multi>
|
||||
@for (address of clientAddressData; track address.addressId; let i = $index) {
|
||||
<mat-expansion-panel class="address">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ address.addressType }}
|
||||
<mat-expansion-panel class="addr-panel">
|
||||
<mat-expansion-panel-header class="addr-panel__header">
|
||||
<mat-panel-title class="addr-panel__title">
|
||||
<i class="fa fa-home addr-panel__type-icon"></i>
|
||||
<span class="addr-panel__type">{{ address.addressType }}</span>
|
||||
<span class="addr-panel__status" [class.addr-panel__status--active]="address.isActive" [class.addr-panel__status--inactive]="!address.isActive">
|
||||
{{ address.isActive ? 'Active' : 'Inactive' }}
|
||||
</span>
|
||||
</mat-panel-title>
|
||||
<mat-panel-description>
|
||||
{{ address.relationship }}
|
||||
<mat-panel-description class="addr-panel__desc">
|
||||
{{ address.city || address.townVillage || '' }}{{ address.city || address.townVillage ? ', ' : '' }}{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name || '' }}
|
||||
</mat-panel-description>
|
||||
</mat-expansion-panel-header>
|
||||
<mat-divider [inset]="true"></mat-divider>
|
||||
<div class="address-actions layout-row align-end align-items-center">
|
||||
<button mat-button color="primary" (click)="editAddress(address, i)">
|
||||
<fa-icon icon="edit"></fa-icon>
|
||||
|
||||
<!-- Actions Bar -->
|
||||
<div class="addr-actions">
|
||||
<button mat-stroked-button color="primary" class="addr-actions__edit" (click)="editAddress(address, i)">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
<mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
|
||||
<div class="addr-actions__toggle">
|
||||
<span class="addr-actions__toggle-label">{{ 'labels.inputs.Active Status' | translate }}</span>
|
||||
<mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
@if (isFieldEnabled('street')) {
|
||||
<span>{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br /></span>
|
||||
|
||||
<!-- Address Details Grid -->
|
||||
<div class="addr-grid">
|
||||
@if (isFieldEnabled('street') && address.street) {
|
||||
<div class="addr-field">
|
||||
<div class="addr-field__label">{{ 'labels.inputs.Street' | translate }}</div>
|
||||
<div class="addr-field__value">{{ address.street }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (isFieldEnabled('addressLine1')) {
|
||||
<span>{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br /></span>
|
||||
@if (isFieldEnabled('addressLine1') && address.addressLine1) {
|
||||
<div class="addr-field">
|
||||
<div class="addr-field__label">{{ 'labels.inputs.Address Line' | translate }} 1</div>
|
||||
<div class="addr-field__value">{{ address.addressLine1 }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (isFieldEnabled('addressLine2')) {
|
||||
<span>{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br /></span>
|
||||
@if (isFieldEnabled('addressLine2') && address.addressLine2) {
|
||||
<div class="addr-field">
|
||||
<div class="addr-field__label">{{ 'labels.inputs.Address Line' | translate }} 2</div>
|
||||
<div class="addr-field__value">{{ address.addressLine2 }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (isFieldEnabled('addressLine3')) {
|
||||
<span>{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br /></span>
|
||||
@if (isFieldEnabled('addressLine3') && address.addressLine3) {
|
||||
<div class="addr-field">
|
||||
<div class="addr-field__label">{{ 'labels.inputs.Address Line' | translate }} 3</div>
|
||||
<div class="addr-field__value">{{ address.addressLine3 }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (isFieldEnabled('townVillage')) {
|
||||
<span>{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br /></span>
|
||||
@if (isFieldEnabled('townVillage') && address.townVillage) {
|
||||
<div class="addr-field">
|
||||
<div class="addr-field__label">{{ 'labels.inputs.Town / Village' | translate }}</div>
|
||||
<div class="addr-field__value">{{ address.townVillage }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (isFieldEnabled('city')) {
|
||||
<span>{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
|
||||
@if (isFieldEnabled('city') && address.city) {
|
||||
<div class="addr-field">
|
||||
<div class="addr-field__label">{{ 'labels.inputs.City' | translate }}</div>
|
||||
<div class="addr-field__value">{{ address.city }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (isFieldEnabled('stateProvinceId')) {
|
||||
<span
|
||||
>{{ 'labels.inputs.State / Province' | translate }} :
|
||||
{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
|
||||
/></span>
|
||||
<div class="addr-field">
|
||||
<div class="addr-field__label">{{ 'labels.inputs.State / Province' | translate }}</div>
|
||||
<div class="addr-field__value">{{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name || '-' }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (isFieldEnabled('countryId')) {
|
||||
<span
|
||||
>{{ 'labels.inputs.Country' | translate }} :
|
||||
{{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
|
||||
/></span>
|
||||
<div class="addr-field">
|
||||
<div class="addr-field__label">{{ 'labels.inputs.Country' | translate }}</div>
|
||||
<div class="addr-field__value">{{ getSelectedValue('countryIdOptions', address.countryId)?.name || '-' }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (isFieldEnabled('postalCode')) {
|
||||
<span>{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br /></span>
|
||||
@if (isFieldEnabled('postalCode') && address.postalCode) {
|
||||
<div class="addr-field">
|
||||
<div class="addr-field__label">{{ 'labels.inputs.Postal Code' | translate }}</div>
|
||||
<div class="addr-field__value addr-field__value--mono">{{ address.postalCode }}</div>
|
||||
</div>
|
||||
}
|
||||
@if (isFieldEnabled('isActive')) {
|
||||
<span>{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br /></span>
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
}
|
||||
</mat-accordion>
|
||||
|
||||
Reference in New Issue
Block a user