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
+98
-70
@@ -6,12 +6,26 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div>
|
||||
<form [formGroup]="provisioningCriteriaForm">
|
||||
<div class="layout-row gap-2percent">
|
||||
<mat-form-field class="flex-fill">
|
||||
<div class="cp-container">
|
||||
<!-- Header -->
|
||||
<div class="cp-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="cp-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Provisioning Criteria' | translate }}
|
||||
</button>
|
||||
<h2 class="cp-header__title">{{ 'labels.heading.Create Provisioning Criteria' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="cp-card">
|
||||
<form [formGroup]="provisioningCriteriaForm">
|
||||
<!-- Criteria Details Section -->
|
||||
<div class="cp-section">
|
||||
<div class="cp-section__header">
|
||||
<i class="fas fa-edit"></i>
|
||||
<h3>Criteria Details</h3>
|
||||
</div>
|
||||
<div class="cp-grid">
|
||||
<mat-form-field appearance="outline" class="cp-field">
|
||||
<mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
|
||||
<input required matInput formControlName="criteriaName" />
|
||||
@if (provisioningCriteriaForm.controls.criteriaName.hasError('required')) {
|
||||
@@ -22,7 +36,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-form-field appearance="outline" class="cp-field">
|
||||
<mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanProducts" multiple>
|
||||
@for (product of loanProvisioningCriteriaTemplate.loanProducts; track product) {
|
||||
@@ -39,77 +53,91 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z1">
|
||||
@if (!provisioningCriteriaFormValid) {
|
||||
<mat-hint> {{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
|
||||
}
|
||||
<!-- Definitions Section -->
|
||||
<div class="cp-section">
|
||||
<div class="cp-section__header">
|
||||
<i class="fas fa-table"></i>
|
||||
<h3>Definitions</h3>
|
||||
</div>
|
||||
<div class="cp-table-wrap">
|
||||
@if (!provisioningCriteriaFormValid) {
|
||||
<mat-hint class="cp-hint">{{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
|
||||
}
|
||||
|
||||
<table mat-table class="m-t-10" [dataSource]="definitions">
|
||||
<ng-container matColumnDef="category">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Category' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.categoryName }}</td>
|
||||
</ng-container>
|
||||
<div class="table-container">
|
||||
<table mat-table class="modern-table" [dataSource]="definitions">
|
||||
<ng-container matColumnDef="category">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Category' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.categoryName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="minAge">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Min Age' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.minAge || '0' }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="minAge">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Min Age' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.minAge || '0' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="maxAge">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Max Age' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.maxAge || '0' }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="maxAge">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Max Age' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.maxAge || '0' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="percentage">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Percentage' | translate }} (%)</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.provisioningPercentage || '0' }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="percentage">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Percentage' | translate }} (%)</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.provisioningPercentage || '0' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="liabilityAccount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Liability Account' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
{{
|
||||
(definition.liabilityAccount | find: loanProvisioningCriteriaTemplate.glAccounts : 'id' : 'name') || '-'
|
||||
}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="liabilityAccount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Liability Account' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
{{
|
||||
(definition.liabilityAccount | find: loanProvisioningCriteriaTemplate.glAccounts : 'id' : 'name') || '-'
|
||||
}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="expenseAccount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
{{ (definition.expenseAccount | find: loanProvisioningCriteriaTemplate.glAccounts : 'id' : 'name') || '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="expenseAccount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
{{ (definition.expenseAccount | find: loanProvisioningCriteriaTemplate.glAccounts : 'id' : 'name') || '-' }}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="edit">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
<button mat-button color="primary" (click)="editDefinition(definition)">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="edit">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
<button mat-button color="primary" (click)="editDefinition(definition)">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-t-20 layout-row layout-align-center gap-20px">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[disabled]="!provisioningCriteriaFormValid"
|
||||
(click)="submit()"
|
||||
*mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</mat-card>
|
||||
<!-- Actions -->
|
||||
<div class="cp-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="cp-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!provisioningCriteriaFormValid"
|
||||
(click)="submit()"
|
||||
*mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'"
|
||||
class="cp-actions__submit"
|
||||
>
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+121
-48
@@ -6,65 +6,138 @@
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
.container {
|
||||
padding: 0.5rem;
|
||||
max-width: 1200px;
|
||||
@use '../../../shared/styles/list-layout' as *;
|
||||
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.cp-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
// Header
|
||||
.cp-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
mat-card {
|
||||
padding: 1rem;
|
||||
box-shadow: 0 2px 8px rgb(0 0 0 / 10%) !important;
|
||||
border-radius: 8px;
|
||||
|
||||
.layout-row {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mat-elevation-z1 {
|
||||
padding: 1rem;
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
th {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.m-t-20 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.layout-align-center {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media (width <= 768px) {
|
||||
.container {
|
||||
padding: 0.5rem;
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
mat-card {
|
||||
padding: 1rem;
|
||||
.cp-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
|
||||
.cp-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.cp-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;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
flex-direction: column;
|
||||
& + & {
|
||||
border-top: 1px solid $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
// Grid
|
||||
.cp-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.cp-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Table wrap
|
||||
.cp-table-wrap {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.cp-hint {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: $gray-500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// Actions
|
||||
.cp-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;
|
||||
|
||||
.gap-20px {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
i { margin-right: 6px; font-size: 12px; }
|
||||
}
|
||||
}
|
||||
|
||||
+101
-73
@@ -6,12 +6,26 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container">
|
||||
<mat-card>
|
||||
<div>
|
||||
<form [formGroup]="provisioningCriteriaForm">
|
||||
<div class="layout-row gap-2percent">
|
||||
<mat-form-field class="flex-fill">
|
||||
<div class="ep-container">
|
||||
<!-- Header -->
|
||||
<div class="ep-header">
|
||||
<button mat-stroked-button [routerLink]="['../']" class="ep-back">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'labels.inputs.Provisioning Criteria' | translate }}
|
||||
</button>
|
||||
<h2 class="ep-header__title">{{ 'labels.heading.Edit Provisioning Criteria' | translate }}</h2>
|
||||
</div>
|
||||
|
||||
<!-- Form Card -->
|
||||
<div class="ep-card">
|
||||
<form [formGroup]="provisioningCriteriaForm">
|
||||
<!-- Criteria Details Section -->
|
||||
<div class="ep-section">
|
||||
<div class="ep-section__header">
|
||||
<i class="fas fa-edit"></i>
|
||||
<h3>Criteria Details</h3>
|
||||
</div>
|
||||
<div class="ep-grid">
|
||||
<mat-form-field appearance="outline" class="ep-field">
|
||||
<mat-label>{{ 'labels.inputs.Provisioning Criteria' | translate }}</mat-label>
|
||||
<input required matInput formControlName="criteriaName" />
|
||||
@if (provisioningCriteriaForm.controls.criteriaName.hasError('required')) {
|
||||
@@ -22,7 +36,7 @@
|
||||
}
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill">
|
||||
<mat-form-field appearance="outline" class="ep-field">
|
||||
<mat-label>{{ 'labels.inputs.Selected Products' | translate }}</mat-label>
|
||||
<mat-select formControlName="loanProducts" [compareWith]="compareOptions" multiple>
|
||||
@for (product of loanProducts; track product) {
|
||||
@@ -33,80 +47,94 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z1">
|
||||
@if (!provisioningCriteriaFormValid) {
|
||||
<mat-hint>{{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
|
||||
}
|
||||
<!-- Definitions Section -->
|
||||
<div class="ep-section">
|
||||
<div class="ep-section__header">
|
||||
<i class="fas fa-table"></i>
|
||||
<h3>Definitions</h3>
|
||||
</div>
|
||||
<div class="ep-table-wrap">
|
||||
@if (!provisioningCriteriaFormValid) {
|
||||
<mat-hint class="ep-hint">{{ 'labels.text.Provisioning criteria definitions' | translate }}</mat-hint>
|
||||
}
|
||||
|
||||
<table mat-table class="m-t-10" [dataSource]="definitions">
|
||||
<ng-container matColumnDef="category">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Category' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.categoryName }}</td>
|
||||
</ng-container>
|
||||
<div class="table-container">
|
||||
<table mat-table class="modern-table" [dataSource]="definitions">
|
||||
<ng-container matColumnDef="category">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Category' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.categoryName }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="minAge">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Min Age' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.minAge || '0' }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="minAge">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Min Age' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.minAge || '0' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="maxAge">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Max Age' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.maxAge || '0' }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="maxAge">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Max Age' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.maxAge || '0' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="percentage">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Percentage' | translate }} (%)</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.provisioningPercentage || '0' }}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="percentage">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Percentage' | translate }} (%)</th>
|
||||
<td mat-cell *matCellDef="let definition">{{ definition.provisioningPercentage || '0' }}</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="liabilityAccount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Liability Account' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
{{
|
||||
(definition.liabilityAccount | find: loanProvisioningCriteriaAndTemplate.glAccounts : 'id' : 'name') ||
|
||||
'-'
|
||||
}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="liabilityAccount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Liability Account' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
{{
|
||||
(definition.liabilityAccount | find: loanProvisioningCriteriaAndTemplate.glAccounts : 'id' : 'name') ||
|
||||
'-'
|
||||
}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="expenseAccount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
{{
|
||||
(definition.expenseAccount | find: loanProvisioningCriteriaAndTemplate.glAccounts : 'id' : 'name') || '-'
|
||||
}}
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="expenseAccount">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Expense Account' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
{{
|
||||
(definition.expenseAccount | find: loanProvisioningCriteriaAndTemplate.glAccounts : 'id' : 'name') || '-'
|
||||
}}
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="edit">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
<button mat-button color="primary" (click)="editDefinition(definition)">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="edit">
|
||||
<th mat-header-cell *matHeaderCellDef>{{ 'labels.inputs.Actions' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let definition">
|
||||
<button mat-button color="primary" (click)="editDefinition(definition)">
|
||||
<fa-icon icon="edit" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Edit' | translate }}
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-t-20 layout-row layout-align-center gap-20px">
|
||||
<button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[disabled]="!provisioningCriteriaFormValid"
|
||||
(click)="submit()"
|
||||
*mifosxHasPermission="'UPDATE_CRITERIA'"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</mat-card>
|
||||
<!-- Actions -->
|
||||
<div class="ep-actions">
|
||||
<button type="button" mat-stroked-button [routerLink]="['../']" class="ep-actions__cancel">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
mat-flat-button
|
||||
color="primary"
|
||||
[disabled]="!provisioningCriteriaFormValid"
|
||||
(click)="submit()"
|
||||
*mifosxHasPermission="'UPDATE_CRITERIA'"
|
||||
class="ep-actions__submit"
|
||||
>
|
||||
<i class="fas fa-check"></i> {{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+136
@@ -5,3 +5,139 @@
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
@use '../../../shared/styles/list-layout' as *;
|
||||
|
||||
$primary: #1353a0;
|
||||
$accent: #0ea5e9;
|
||||
$border: #e2e8f0;
|
||||
$gray-50: #f8f9fa;
|
||||
$gray-200: #e8eaed;
|
||||
$gray-500: #9aa0a6;
|
||||
$gray-700: #5f6368;
|
||||
$gray-900: #202124;
|
||||
|
||||
.ep-container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 20px 16px;
|
||||
}
|
||||
|
||||
// Header
|
||||
.ep-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-900;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ep-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
|
||||
.ep-card {
|
||||
background: #fff;
|
||||
border: 1px solid $border;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Section
|
||||
.ep-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
|
||||
.ep-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 4px 16px;
|
||||
padding: 16px 24px;
|
||||
|
||||
@media (max-width: 600px) { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
.ep-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Table wrap
|
||||
.ep-table-wrap {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
.ep-hint {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: $gray-500;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
// Actions
|
||||
.ep-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; }
|
||||
}
|
||||
}
|
||||
|
||||
+27
-26
@@ -6,28 +6,34 @@
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
-->
|
||||
|
||||
<div class="container m-b-20 layout-row align-end gap-20px">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[routerLink]="['create']"
|
||||
*mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'"
|
||||
>
|
||||
<fa-icon icon="plus" class="m-r-10"></fa-icon>
|
||||
{{ 'labels.buttons.Create Provisioning Criteria' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
<mat-card class="container">
|
||||
<!-- Header Bar -->
|
||||
<div class="table-header">
|
||||
<div class="table-title-group">
|
||||
<h2 class="table-title">
|
||||
<i class="fas fa-edit"></i>
|
||||
{{ 'labels.heading.Loan Provisioning Criteria' | translate }}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="layout-row gap-20px">
|
||||
<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-actions">
|
||||
<mat-form-field class="table-search" appearance="outline">
|
||||
<i matPrefix class="fas fa-search"></i>
|
||||
<input matInput placeholder="{{ 'labels.inputs.Filter' | translate }}" (keyup)="applyFilter($event.target.value)" />
|
||||
</mat-form-field>
|
||||
|
||||
<div class="table-buttons">
|
||||
<button mat-flat-button color="primary" [routerLink]="['create']" class="btn-create" *mifosxHasPermission="'CREATE_PROVISIONING_CRITERIA'">
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
{{ 'labels.buttons.Create Provisioning Criteria' | translate }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<!-- Table -->
|
||||
<div class="table-container">
|
||||
<table mat-table [dataSource]="dataSource" matSort class="modern-table">
|
||||
<ng-container matColumnDef="criteriaName">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.name' | translate }}</th>
|
||||
<td mat-cell *matCellDef="let loanProvisioningCriteria">{{ loanProvisioningCriteria.criteriaName }}</td>
|
||||
@@ -39,14 +45,9 @@
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr
|
||||
mat-row
|
||||
*matRowDef="let row; columns: displayedColumns"
|
||||
[routerLink]="[row.criteriaId]"
|
||||
class="select-row"
|
||||
></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.criteriaId]" class="table-row"></tr>
|
||||
</table>
|
||||
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
+2
@@ -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%;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user