Files
cbsnexora/src/app/system/codes/view-code/view-code.component.html
T

152 lines
6.2 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="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 }}
</button>
</span>
}
@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>
<div class="container">
<mat-card>
<mat-card-title class="m-t-20 m-l-20"
><h4>{{ codeData.name }}</h4></mat-card-title
>
<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>
<button
mat-stroked-button
color="primary"
type="button"
[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
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>
}
</mat-card-content>
</form>
</mat-card>
</div>