feat(system): view, edit, delete code (#380)
- Add view code component - Add edit code component Fixes: #379
This commit is contained in:
Chirag Gupta
committed by
Abhay Chawla
Abhay Chawla
parent
fbb7a1583a
commit
e766a91ecf
@@ -0,0 +1,31 @@
|
||||
/** Angular Imports */
|
||||
import { Injectable } from '@angular/core';
|
||||
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
|
||||
|
||||
/** rxjs Imports */
|
||||
import { Observable } from 'rxjs';
|
||||
|
||||
/** Custom Services */
|
||||
import { SystemService } from '../../system.service';
|
||||
|
||||
/**
|
||||
* Code Values data resolver.
|
||||
*/
|
||||
@Injectable()
|
||||
export class CodeValuesResolver implements Resolve<Object> {
|
||||
|
||||
/**
|
||||
* @param {SystemService} systemService System service.
|
||||
*/
|
||||
constructor(private systemService: SystemService) {}
|
||||
|
||||
/**
|
||||
* Returns the Code Values data.
|
||||
* @returns {Observable<any>}
|
||||
*/
|
||||
resolve(route: ActivatedRouteSnapshot): Observable<any> {
|
||||
const codeId = route.paramMap.get('id');
|
||||
return this.systemService.getCodeValues(codeId);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" fxLayout.xs="column">
|
||||
|
||||
<button mat-raised-button color="primary" (click)="addCodeValueRow()">
|
||||
<fa-icon icon="plus"></fa-icon>
|
||||
Add Code Value
|
||||
</button>
|
||||
|
||||
<button mat-raised-button color="primary" [routerLink]="['edit']" *ngIf="!codeData.systemDefined">
|
||||
<fa-icon icon="edit"></fa-icon>
|
||||
Edit Code
|
||||
</button>
|
||||
|
||||
<button mat-raised-button color="warn" (click)="delete()" *ngIf="!codeData.systemDefined">
|
||||
<fa-icon icon="trash"></fa-icon>
|
||||
Delete Code
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<mat-card>
|
||||
|
||||
<mat-card-title>{{ codeData.name }}</mat-card-title>
|
||||
|
||||
<form [formGroup]="codeValuesForm">
|
||||
|
||||
<mat-card-content>
|
||||
|
||||
<div formArrayName="codeValues" *ngFor="let codeValue of codeValues.controls; let i = index;">
|
||||
|
||||
<div fxFlexFill fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" [formGroupName]="i">
|
||||
|
||||
<mat-form-field fxFlex="20%">
|
||||
<mat-label>Name</mat-label>
|
||||
<input required matInput formControlName="name">
|
||||
<mat-error *ngIf="codeValues.at(i).controls.name.hasError('required')">
|
||||
Name is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="22%">
|
||||
<mat-label>Description</mat-label>
|
||||
<input matInput formControlName="description">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field fxFlex="18%">
|
||||
<mat-label>Position</mat-label>
|
||||
<input required matInput formControlName="position" type="number">
|
||||
<mat-error *ngIf="codeValues.at(i).controls.position.hasError('required')">
|
||||
Name is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="active-wrapper" fxFlex="8%">
|
||||
<mat-checkbox formControlName="isActive" class="active">Active</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<div fxLayoutGap="2%" fxFlex="22%" class="options-wrapper">
|
||||
<button mat-stroked-button color="primary" *ngIf="codeValueRowStatus[i] === 'edit'" [disabled]="codeValues.at(i).pristine" (click)="updateCodeValue(i)">
|
||||
Submit
|
||||
</button>
|
||||
<button mat-button *ngIf="codeValueRowStatus[i] === 'edit'" (click)="disableRow(i)">
|
||||
Cancel
|
||||
</button>
|
||||
<button mat-icon-button color="primary" [disabled]="!codeValuesForm.get('codeValues').at(i).valid" *ngIf="codeValueRowStatus[i] === 'new'" matTooltip="Add" matTooltipPosition="above" (click)="addCodeValue(i)">
|
||||
<fa-icon icon="plus" size="lg"></fa-icon>
|
||||
</button>
|
||||
<button type="button" color="primary" *ngIf="codeValueRowStatus[i] === 'disabled'" mat-icon-button matTooltip="Edit" matTooltipPosition="above" (click)="enableRow(i)">
|
||||
<fa-icon icon="edit" size="lg"></fa-icon>
|
||||
</button>
|
||||
<button type="button" color="warn" mat-icon-button matTooltip="Delete" 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>
|
||||
@@ -0,0 +1,18 @@
|
||||
@media (min-width: 992px) {
|
||||
|
||||
.active-wrapper {
|
||||
position: relative;
|
||||
|
||||
.active {
|
||||
padding: 0 0 17.5px 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.options-wrapper {
|
||||
padding: 18px 0 0 0;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ViewCodeComponent } from './view-code.component';
|
||||
|
||||
describe('ViewCodeComponent', () => {
|
||||
let component: ViewCodeComponent;
|
||||
let fixture: ComponentFixture<ViewCodeComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ViewCodeComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ViewCodeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,206 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
|
||||
import { MatDialog } from '@angular/material';
|
||||
|
||||
/** Custom Services */
|
||||
import { SystemService } from 'app/system/system.service';
|
||||
|
||||
/** Custom Components */
|
||||
import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
|
||||
|
||||
/**
|
||||
* View Code Component.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-view-code',
|
||||
templateUrl: './view-code.component.html',
|
||||
styleUrls: ['./view-code.component.scss']
|
||||
})
|
||||
export class ViewCodeComponent implements OnInit {
|
||||
|
||||
/** Code Data */
|
||||
codeData: any;
|
||||
/** Code Values Data */
|
||||
codeValuesData: any[];
|
||||
/** Code Values Form */
|
||||
codeValuesForm: FormGroup;
|
||||
/** Code Value Row Status */
|
||||
codeValueRowStatus: string[] = [];
|
||||
|
||||
/**
|
||||
* Retrieves the codes and code values data from `resolve`.
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
* @param {SystemService} systemService System Service.
|
||||
* @param {Router} router Router for navigation.
|
||||
* @param {FormBuilder} formBuilder Form Builder.
|
||||
* @param {MatDialog} dialog Dialog reference.
|
||||
*/
|
||||
constructor(private route: ActivatedRoute,
|
||||
private systemService: SystemService,
|
||||
private router: Router,
|
||||
private formBuilder: FormBuilder,
|
||||
private dialog: MatDialog) {
|
||||
this.route.data.subscribe((data: { code: any, codeValues: any }) => {
|
||||
this.codeData = data.code;
|
||||
this.codeValuesData = data.codeValues;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and initializes the code values form.
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.createCodeValuesForm();
|
||||
this.initCodeValuesForm();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the code values form.
|
||||
*/
|
||||
initCodeValuesForm() {
|
||||
this.codeValuesData.forEach((codeValue: any) => {
|
||||
this.codeValues.push(this.createCodeValuesRow(codeValue));
|
||||
this.codeValueRowStatus.push('disabled');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the code values form array.
|
||||
* @returns {FormArray} Code values form array.
|
||||
*/
|
||||
get codeValues(): FormArray {
|
||||
return this.codeValuesForm.get('codeValues') as FormArray;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the code values form.
|
||||
*/
|
||||
createCodeValuesForm() {
|
||||
this.codeValuesForm = this.formBuilder.group({
|
||||
'codeValues': this.formBuilder.array([])
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a row to the code values form.
|
||||
*/
|
||||
addCodeValueRow() {
|
||||
this.codeValues.push(this.createCodeValuesRow());
|
||||
this.codeValues.at(this.codeValues.length - 1).enable();
|
||||
this.codeValueRowStatus.push('new');
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a code value row in code values form.
|
||||
* @param {any} codeValue Code value.
|
||||
*/
|
||||
createCodeValuesRow(codeValue?: any): FormGroup {
|
||||
return this.formBuilder.group({
|
||||
'name': [{ value: codeValue ? codeValue.name : '', disabled: true }, Validators.required],
|
||||
'description': [{ value: codeValue ? codeValue.description : '', disabled: true }],
|
||||
'position': [{ value: codeValue ? codeValue.position : 0, disabled: true }, Validators.required],
|
||||
'isActive': [{ value: codeValue ? codeValue.active : false, disabled: true }]
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes the particular code value.
|
||||
* @param {number} index Index of the row.
|
||||
*/
|
||||
deleteCodeValue(index: number) {
|
||||
const codeValueId = this.codeValuesData[index].id;
|
||||
this.systemService.deleteCodeValue(this.codeData.id, codeValueId)
|
||||
.subscribe((response: any) => {
|
||||
this.codeValuesData.splice(index, 1);
|
||||
this.codeValues.removeAt(index);
|
||||
this.codeValueRowStatus.splice(index, 1);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes/Deletes the particular code value which has not been intialised.
|
||||
* @param {number} index Index of the row.
|
||||
*/
|
||||
removeNewCodeValue(index: number) {
|
||||
this.codeValues.removeAt(index);
|
||||
this.codeValueRowStatus.splice(index, 1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the particular code value.
|
||||
* @param {number} index Index of the row.
|
||||
*/
|
||||
updateCodeValue(index: number) {
|
||||
const updatedCodeValue: { name: string, description: string, position: number, isActive: boolean } = this.codeValues.at(index).value;
|
||||
this.systemService.updateCodeValue(this.codeData.id, this.codeValuesData[index].id, updatedCodeValue)
|
||||
.subscribe((response: any) => {
|
||||
this.codeValues.at(index).disable();
|
||||
this.codeValueRowStatus[index] = 'disabled';
|
||||
this.codeValues.at(index).markAsPristine();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Deletes the code.
|
||||
*/
|
||||
delete() {
|
||||
const deleteCodeDialogRef = this.dialog.open(DeleteDialogComponent, {
|
||||
data: { deleteContext: `code ${this.codeData.name}` }
|
||||
});
|
||||
deleteCodeDialogRef.afterClosed().subscribe((response: any) => {
|
||||
if (response.delete) {
|
||||
this.systemService.deleteCode(this.codeData.id)
|
||||
.subscribe(() => {
|
||||
this.router.navigate(['/system/codes']);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Disables the particular row.
|
||||
* @param {number} index Index of the row.
|
||||
*/
|
||||
disableRow(index: number) {
|
||||
this.codeValues.at(index).get('name').setValue(this.codeValuesData[index].name);
|
||||
this.codeValues.at(index).get('description').setValue(this.codeValuesData[index].description);
|
||||
this.codeValues.at(index).get('position').setValue(this.codeValuesData[index].position);
|
||||
this.codeValues.at(index).get('isActive').setValue(this.codeValuesData[index].isActive);
|
||||
this.codeValues.at(index).disable();
|
||||
this.codeValueRowStatus[index] = 'disabled';
|
||||
this.codeValues.at(index).markAsPristine();
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds the given code value.
|
||||
* @param {number} index Index of the row.
|
||||
*/
|
||||
addCodeValue(index: number) {
|
||||
const newCodeValue: { name: string, description: string, position: string, isActive: boolean } = this.codeValues.at(index).value;
|
||||
this.systemService.createCodeValue(this.codeData.id, newCodeValue)
|
||||
.subscribe((response: any) => {
|
||||
this.codeValues.at(index).disable();
|
||||
this.codeValueRowStatus[index] = 'disabled';
|
||||
this.codeValuesData.push({
|
||||
id: response.subResourceId,
|
||||
name: this.codeValues.at(index).get('name').value,
|
||||
description: this.codeValues.at(index).get('description').value,
|
||||
position: this.codeValues.at(index).get('position').value,
|
||||
isActive: this.codeValues.at(index).get('isActive').value
|
||||
});
|
||||
this.codeValues.at(index).markAsPristine();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Enables the given row.
|
||||
* @param {number} index Index of the row.
|
||||
*/
|
||||
enableRow(index: number) {
|
||||
this.codeValues.at(index).enable();
|
||||
this.codeValueRowStatus[index] = 'edit';
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user