228 lines
9.1 KiB
HTML
228 lines
9.1 KiB
HTML
<!--
|
|
Copyright since 2025 Mifos Initiative
|
|
|
|
This Source Code Form is subject to the terms of the Mozilla Public
|
|
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/.
|
|
-->
|
|
|
|
<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>
|
|
<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_CODE'"
|
|
class="vc-header__btn-delete"
|
|
>
|
|
<fa-icon icon="trash" class="m-r-10"></fa-icon>
|
|
{{ 'labels.buttons.Delete Code' | translate }}
|
|
</button>
|
|
}
|
|
</div>
|
|
</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>
|
|
|
|
<!-- 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">
|
|
<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>
|
|
<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="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>
|
|
}
|
|
|
|
<!-- 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>
|