feat: non-individual entity UI improvements — hide individual-only sections, fix legal form display, send extended fields to API
- Hide Family Members tab/section for non-individual entities in client view, create flow, and preview - Hide Financial & Classification section for non-individual entities in personal data and preview - Fix legal form column in clients list — fetch legalForm from client API for correct display - Add person/business icon before client name in list rows - Remove unsupportedNpd filter — send authorizedSignatory, additionalInfo, dateOfRegistration to API - Add registration number format hint (mat-hint) based on constitution type - Add spacing between verification row and constitution type dropdowns - Reduce table cell padding and prevent action buttons from being clipped - Add missing MPL-2.0 license headers Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -6,146 +6,190 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container m-b-20 layout-row align-end layout-xs-column gap-20px">
|
||||
<button mat-raised-button color="primary" (click)="addCodeValueRow()" *mifosxHasPermission="'CREATE_CODEVALUE'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add Code Value' | translate }}
|
||||
</button>
|
||||
|
||||
@if (!codeData.systemDefined) {
|
||||
<span>
|
||||
<button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit Code' | translate }}
|
||||
<div class="vc-container">
|
||||
<!-- Header -->
|
||||
<div class="vc-header">
|
||||
<div class="vc-header__left">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="vc-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Manage Codes' | translate }}
|
||||
</button>
|
||||
</span>
|
||||
}
|
||||
<h2 class="vc-header__title">{{ codeData.name }}</h2>
|
||||
</div>
|
||||
<div class="vc-header__actions">
|
||||
@if (!codeData.systemDefined) {
|
||||
<button mat-flat-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CODE'" class="vc-header__btn">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit Code' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (!codeData.systemDefined) {
|
||||
<button mat-stroked-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_CODEVALUE'" class="vc-header__btn-delete">
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete Code' | translate }}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!codeData.systemDefined) {
|
||||
<span>
|
||||
<button mat-raised-button color="warn" (click)="delete()" *mifosxHasPermission="'DELETE_CODEVALUE'">
|
||||
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Delete Code' | translate }}
|
||||
</button>
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<!-- Code Details Card -->
|
||||
<div class="vc-card">
|
||||
<div class="vc-section">
|
||||
<div class="vc-section__header">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<h3>{{ 'labels.inputs.Code' | translate }} Details</h3>
|
||||
</div>
|
||||
<div class="vc-details">
|
||||
<div class="vc-row">
|
||||
<span class="vc-row__label">{{ 'labels.inputs.Code Name' | translate }}</span>
|
||||
<span class="vc-row__value">{{ codeData.name }}</span>
|
||||
</div>
|
||||
<div class="vc-row">
|
||||
<span class="vc-row__label">{{ 'labels.inputs.System Defined' | translate }}</span>
|
||||
<span class="vc-row__value">
|
||||
@if (codeData.systemDefined) {
|
||||
<span class="vc-bool vc-bool--yes"><i class="fas fa-check"></i> Yes</span>
|
||||
} @else {
|
||||
<span class="vc-bool vc-bool--no"><i class="fas fa-times"></i> No</span>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<mat-card-title class="m-t-20 m-l-20"
|
||||
><h4>{{ codeData.name }}</h4></mat-card-title
|
||||
>
|
||||
<!-- Code Values Card -->
|
||||
<div class="vc-card vc-card--values">
|
||||
<div class="vc-section">
|
||||
<div class="vc-section__header">
|
||||
<i class="fas fa-list"></i>
|
||||
<h3>{{ 'labels.inputs.Code' | translate }} Values</h3>
|
||||
<button
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
class="vc-add-btn"
|
||||
(click)="addCodeValueRow()"
|
||||
*mifosxHasPermission="'CREATE_CODEVALUE'"
|
||||
>
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Add Code Value' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form [formGroup]="codeValuesForm">
|
||||
<mat-card-content>
|
||||
@for (codeValue of codeValues.controls; track codeValue; let i = $index) {
|
||||
<div formArrayName="codeValues">
|
||||
<div class="flex-fill layout-row-wrap gap-2percent responsive-column" [formGroupName]="i">
|
||||
<mat-form-field class="flex-fill flex-20">
|
||||
<mat-label>{{ 'labels.inputs.name' | translate }}</mat-label>
|
||||
<input required matInput formControlName="name" placeholder="{{ 'labels.inputs.name' | translate }}" />
|
||||
@if (codeValues.at(i).controls.name.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-fill flex-22">
|
||||
<mat-label>{{ 'labels.inputs.Description' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
formControlName="description"
|
||||
placeholder="{{ 'labels.inputs.Description' | translate }}"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="flex-fill flex-18">
|
||||
<mat-label>{{ 'labels.inputs.Position' | translate }}</mat-label>
|
||||
<input
|
||||
required
|
||||
matInput
|
||||
formControlName="position"
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="{{ 'labels.inputs.Position' | translate }}"
|
||||
/>
|
||||
@if (codeValues.at(i).controls.position.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
<div class="active-wrapper flex-8">
|
||||
<mat-checkbox formControlName="isActive" class="active">{{
|
||||
'labels.inputs.Active' | translate
|
||||
}}</mat-checkbox>
|
||||
</div>
|
||||
<div class="options-wrapper gap-2percent flex-22">
|
||||
@if (codeValueRowStatus[i] === 'edit') {
|
||||
<span>
|
||||
<form [formGroup]="codeValuesForm">
|
||||
<div class="vc-values-table">
|
||||
<!-- Table Header -->
|
||||
<div class="vc-values-header">
|
||||
<div class="vc-values-col vc-values-col--name">{{ 'labels.inputs.name' | translate }}</div>
|
||||
<div class="vc-values-col vc-values-col--desc">{{ 'labels.inputs.Description' | translate }}</div>
|
||||
<div class="vc-values-col vc-values-col--pos">{{ 'labels.inputs.Position' | translate }}</div>
|
||||
<div class="vc-values-col vc-values-col--active">{{ 'labels.inputs.Active' | translate }}</div>
|
||||
<div class="vc-values-col vc-values-col--actions">Actions</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Rows -->
|
||||
@for (codeValue of codeValues.controls; track codeValue; let i = $index) {
|
||||
<div formArrayName="codeValues" class="vc-values-row" [class.vc-values-row--editing]="codeValueRowStatus[i] !== 'disabled'">
|
||||
<div [formGroupName]="i" class="vc-values-row__inner">
|
||||
<div class="vc-values-col vc-values-col--name">
|
||||
<mat-form-field appearance="outline" class="vc-inline-field">
|
||||
<input required matInput formControlName="name" placeholder="{{ 'labels.inputs.name' | translate }}" />
|
||||
@if (codeValues.at(i).controls.name.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.name' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="vc-values-col vc-values-col--desc">
|
||||
<mat-form-field appearance="outline" class="vc-inline-field">
|
||||
<input matInput formControlName="description" placeholder="{{ 'labels.inputs.Description' | translate }}" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="vc-values-col vc-values-col--pos">
|
||||
<mat-form-field appearance="outline" class="vc-inline-field">
|
||||
<input required matInput formControlName="position" type="number" min="0" placeholder="{{ 'labels.inputs.Position' | translate }}" />
|
||||
@if (codeValues.at(i).controls.position.hasError('required')) {
|
||||
<mat-error>
|
||||
{{ 'labels.inputs.Position' | translate }} {{ 'labels.commons.is' | translate }}
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="vc-values-col vc-values-col--active">
|
||||
<mat-checkbox formControlName="isActive">{{ 'labels.inputs.Active' | translate }}</mat-checkbox>
|
||||
</div>
|
||||
<div class="vc-values-col vc-values-col--actions">
|
||||
@if (codeValueRowStatus[i] === 'edit') {
|
||||
<button
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
type="button"
|
||||
class="vc-action-btn"
|
||||
[disabled]="!codeValues.at(i).valid || codeValues.at(i).pristine"
|
||||
(click)="updateCodeValue(i)"
|
||||
*mifosxHasPermission="'UPDATE_CODEVALUE'"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</span>
|
||||
}
|
||||
@if (codeValueRowStatus[i] === 'edit') {
|
||||
<button mat-button type="button" (click)="disableRow(i)">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (codeValueRowStatus[i] === 'new') {
|
||||
<button
|
||||
mat-icon-button
|
||||
color="primary"
|
||||
type="button"
|
||||
title="{{ 'tooltips.Add' | translate }}"
|
||||
[disabled]="!codeValuesForm.get('codeValues').at(i).valid"
|
||||
matTooltip="{{ 'tooltips.Add' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="addCodeValue(i)"
|
||||
>
|
||||
<fa-icon icon="plus" size="lg"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
@if (codeValueRowStatus[i] === 'disabled') {
|
||||
<button mat-button type="button" class="vc-action-btn" (click)="disableRow(i)">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
}
|
||||
@if (codeValueRowStatus[i] === 'new') {
|
||||
<button
|
||||
mat-icon-button
|
||||
color="primary"
|
||||
type="button"
|
||||
title="{{ 'tooltips.Add' | translate }}"
|
||||
[disabled]="!codeValuesForm.get('codeValues').at(i).valid"
|
||||
matTooltip="{{ 'tooltips.Add' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="addCodeValue(i)"
|
||||
>
|
||||
<fa-icon icon="plus" size="lg"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
@if (codeValueRowStatus[i] === 'disabled') {
|
||||
<button
|
||||
type="button"
|
||||
color="primary"
|
||||
title="{{ 'tooltips.Edit' | translate }}"
|
||||
mat-icon-button
|
||||
matTooltip="{{ 'tooltips.Edit' | translate }}"
|
||||
matTooltipPosition="above"
|
||||
(click)="enableRow(i)"
|
||||
>
|
||||
<fa-icon icon="edit" size="lg"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
type="button"
|
||||
color="primary"
|
||||
title="{{ 'tooltips.Edit' | translate }}"
|
||||
color="warn"
|
||||
title="{{ 'tooltips.Delete' | translate }}"
|
||||
mat-icon-button
|
||||
matTooltip="{{ 'tooltips.Edit' | translate }}"
|
||||
matTooltip="{{ 'tooltips.Delete' | translate }}"
|
||||
*mifosxHasPermission="'DELETE_CODEVALUE'"
|
||||
matTooltipPosition="above"
|
||||
(click)="enableRow(i)"
|
||||
(click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)"
|
||||
>
|
||||
<fa-icon icon="edit" size="lg"></fa-icon>
|
||||
<fa-icon icon="trash" size="lg"></fa-icon>
|
||||
</button>
|
||||
}
|
||||
<button
|
||||
type="button"
|
||||
color="warn"
|
||||
title="{{ 'tooltips.Delete' | translate }}"
|
||||
mat-icon-button
|
||||
matTooltip="{{ 'tooltips.Delete' | translate }}"
|
||||
*mifosxHasPermission="'DELETE_CODEVALUE'"
|
||||
matTooltipPosition="above"
|
||||
(click)="codeValueRowStatus[i] === 'new' ? removeNewCodeValue(i) : deleteCodeValue(i)"
|
||||
>
|
||||
<fa-icon icon="trash" size="lg"></fa-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</mat-card-content>
|
||||
</form>
|
||||
</mat-card>
|
||||
}
|
||||
|
||||
<!-- Empty State -->
|
||||
@if (codeValues.controls.length === 0) {
|
||||
<div class="vc-values-empty">
|
||||
<i class="fas fa-inbox"></i>
|
||||
<p>No code values defined yet</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user