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:
Aditya
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
ab01111424
commit
b890d24bb7
@@ -6,25 +6,35 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container m-b-20 layout-row align-end gap-20px">
|
||||
<div #buttonCreateCode>
|
||||
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Create Code' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div #filter class="layout-row">
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
<div class="table-header">
|
||||
<div class="table-title-group">
|
||||
<h2 class="table-title">
|
||||
<i class="fas fa-list-ul title-icon"></i>
|
||||
{{ 'labels.heading.Manage Codes' | translate }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="table-actions">
|
||||
<div #filter class="table-search">
|
||||
<mat-form-field appearance="outline">
|
||||
<i matPrefix class="fas fa-search"></i>
|
||||
<mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="table-buttons">
|
||||
<div #buttonCreateCode>
|
||||
<button mat-flat-button color="primary" class="btn-create" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Create Code' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div #tableCodes class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<div #tableCodes class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
||||
<ng-container matColumnDef="name">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Code Name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let code">{{ code.name }}</td>
|
||||
@@ -55,7 +65,7 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="table-row"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
|
||||
@@ -6,6 +6,8 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
@use '../../shared/styles/list-layout' as *;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
@@ -14,7 +16,6 @@ table {
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: CONFIGURE THESE CLASSES GLOBALLY
|
||||
.system-defined {
|
||||
color: #32cd32;
|
||||
}
|
||||
|
||||
@@ -6,12 +6,26 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="cc-container">
|
||||
<!-- Header -->
|
||||
<div class="cc-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="cc-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.heading.Manage Codes' | translate }}
|
||||
</button>
|
||||
<h2 class="cc-header__title">{{ 'labels.heading.Create Code' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="cc-card">
|
||||
<form [formGroup]="codeForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div #codeFormRef class="layout-column">
|
||||
<mat-form-field>
|
||||
<!-- Code Details Section -->
|
||||
<div class="cc-section">
|
||||
<div class="cc-section__header">
|
||||
<i class="fas fa-code"></i>
|
||||
<h3>{{ 'labels.inputs.Code' | translate }} Details</h3>
|
||||
</div>
|
||||
<div class="cc-grid" #codeFormRef>
|
||||
<mat-form-field appearance="outline" class="cc-field cc-field--full">
|
||||
<mat-label>{{ 'labels.inputs.Code Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="name" />
|
||||
@if (codeForm.controls.name.hasError('required')) {
|
||||
@@ -22,18 +36,26 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<!-- Actions -->
|
||||
<div class="cc-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="cc-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!codeForm.valid" *mifosxHasPermission="'CREATE_CODE'">
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!codeForm.valid"
|
||||
*mifosxHasPermission="'CREATE_CODE'"
|
||||
class="cc-actions__submit"
|
||||
>
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ng-template #templateCodeFormRef let-data let-popover="popover">
|
||||
|
||||
@@ -6,6 +6,128 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.cc-container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.cc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cc-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
// Card
|
||||
.cc-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.cc-section {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.cc-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.cc-field {
|
||||
width: 100%;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
.cc-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,12 +6,26 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div class="ec-container">
|
||||
<!-- Header -->
|
||||
<div class="ec-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="ec-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Code' | translate }}
|
||||
</button>
|
||||
<h2 class="ec-header__title">{{ 'labels.heading.Edit Code' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="ec-card">
|
||||
<form [formGroup]="codeForm" (ngSubmit)="submit()">
|
||||
<mat-card-content>
|
||||
<div class="layout-column">
|
||||
<mat-form-field>
|
||||
<!-- Code Details Section -->
|
||||
<div class="ec-section">
|
||||
<div class="ec-section__header">
|
||||
<i class="fas fa-code"></i>
|
||||
<h3>{{ 'labels.inputs.Code' | translate }} Details</h3>
|
||||
</div>
|
||||
<div class="ec-grid">
|
||||
<mat-form-field appearance="outline" class="ec-field ec-field--full">
|
||||
<mat-label>{{ 'labels.inputs.Code Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="name" />
|
||||
@if (codeForm.controls.name.hasError('required')) {
|
||||
@@ -22,21 +36,24 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">
|
||||
<!-- Actions -->
|
||||
<div class="ec-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="ec-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
type="submit"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!codeForm.valid || codeForm.pristine"
|
||||
*mifosxHasPermission="'UPDATE_CODE'"
|
||||
class="ec-actions__submit"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,128 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
max-width: 37rem;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.ec-container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.ec-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ec-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
// Card
|
||||
.ec-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.ec-section {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.ec-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.ec-field {
|
||||
width: 100%;
|
||||
|
||||
&--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions
|
||||
.ec-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 14px 24px;
|
||||
border-top: 1px solid $gray-200;
|
||||
background: $gray-50;
|
||||
|
||||
&__cancel {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-700 !important;
|
||||
}
|
||||
|
||||
&__submit {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -6,19 +6,279 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
@media (width >= 992px) {
|
||||
.active-wrapper {
|
||||
position: relative;
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.active {
|
||||
padding: 0 0 17.5px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
.vc-container {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.vc-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&__actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
}
|
||||
|
||||
&__btn-delete {
|
||||
border-radius: 8px !important;
|
||||
font-size: 13px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-back {
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
border-color: $border !important;
|
||||
color: $gray-500 !important;
|
||||
|
||||
i { margin-right: 6px; }
|
||||
|
||||
&:hover { color: $primary !important; border-color: $primary !important; }
|
||||
}
|
||||
|
||||
// Card
|
||||
.vc-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
& + & {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Section
|
||||
.vc-section {
|
||||
&__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 24px;
|
||||
background: $gray-50;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $accent;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
padding: 18px 0 0;
|
||||
// Code Details rows
|
||||
.vc-details {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.vc-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
&__label {
|
||||
flex: 0 0 40%;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #5f6368;
|
||||
}
|
||||
|
||||
&__value {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #202124;
|
||||
}
|
||||
}
|
||||
|
||||
// Boolean indicator
|
||||
.vc-bool {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
|
||||
i { font-size: 11px; }
|
||||
|
||||
&--yes { color: #16a34a; }
|
||||
&--no { color: #dc2626; }
|
||||
}
|
||||
|
||||
// Add button in section header
|
||||
.vc-add-btn {
|
||||
margin-left: auto !important;
|
||||
border-radius: 8px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 32px !important;
|
||||
box-shadow: 0 1px 3px rgba($primary, 0.3) !important;
|
||||
}
|
||||
|
||||
// Code Values Table
|
||||
.vc-values-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.vc-values-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 24px;
|
||||
background: #f8fafc;
|
||||
border-bottom: 1px solid $border;
|
||||
min-width: 700px;
|
||||
|
||||
.vc-values-col {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: #64748b;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-values-row {
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
min-width: 700px;
|
||||
transition: background 0.1s;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
&:nth-child(even) { background: #fafbfc; }
|
||||
&:hover { background: #f8fafc; }
|
||||
|
||||
&--editing {
|
||||
background: #eff6ff !important;
|
||||
}
|
||||
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-values-col {
|
||||
&--name { flex: 0 0 22%; padding-right: 8px; }
|
||||
&--desc { flex: 0 0 26%; padding-right: 8px; }
|
||||
&--pos { flex: 0 0 14%; padding-right: 8px; }
|
||||
&--active { flex: 0 0 12%; padding-right: 8px; }
|
||||
&--actions {
|
||||
flex: 0 0 26%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.vc-inline-field {
|
||||
width: 100%;
|
||||
|
||||
::ng-deep {
|
||||
.mat-mdc-form-field-flex { height: 36px; }
|
||||
|
||||
.mat-mdc-form-field-infix {
|
||||
padding: 4px 0;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.mdc-notched-outline {
|
||||
.mdc-notched-outline__leading { border-radius: 6px 0 0 6px; }
|
||||
.mdc-notched-outline__trailing { border-radius: 0 6px 6px 0; }
|
||||
}
|
||||
|
||||
input { font-size: 13px; }
|
||||
}
|
||||
}
|
||||
|
||||
.vc-action-btn {
|
||||
border-radius: 6px !important;
|
||||
font-size: 12px !important;
|
||||
font-weight: 600 !important;
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
}
|
||||
|
||||
// Empty state
|
||||
.vc-values-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 24px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
font-size: 28px;
|
||||
color: #cbd5e1;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: #94a3b8;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@media (max-width: 768px) {
|
||||
.vc-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
&__actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user