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

131 lines
5.4 KiB
HTML

<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>
<span *ngIf="!codeData.systemDefined">
<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>
<span *ngIf="!codeData.systemDefined">
<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>
<div formArrayName="codeValues" *ngFor="let codeValue of codeValues.controls; let i = index">
<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 }}" />
<mat-error *ngIf="codeValues.at(i).controls.name.hasError('required')">
{{ '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"
placeholder="{{ 'labels.inputs.Position' | translate }}"
/>
<mat-error *ngIf="codeValues.at(i).controls.position.hasError('required')">
{{ '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">
<span *ngIf="codeValueRowStatus[i] === 'edit'">
<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>
<button mat-button type="button" *ngIf="codeValueRowStatus[i] === 'edit'" (click)="disableRow(i)">
{{ 'labels.buttons.Cancel' | translate }}
</button>
<button
mat-icon-button
color="primary"
type="button"
title="{{ 'tooltips.Add' | translate }}"
[disabled]="!codeValuesForm.get('codeValues').at(i).valid"
*ngIf="codeValueRowStatus[i] === 'new'"
matTooltip="{{ 'tooltips.Add' | translate }}"
matTooltipPosition="above"
(click)="addCodeValue(i)"
>
<fa-icon icon="plus" size="lg"></fa-icon>
</button>
<button
type="button"
color="primary"
title="{{ 'tooltips.Edit' | translate }}"
*ngIf="codeValueRowStatus[i] === 'disabled'"
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>