feat: add entity data table checks component (#523)

Fixes: #168
This commit is contained in:
punwai
2019-12-29 20:02:17 +03:00
committed by Abhay Chawla
parent 2ce737e53d
commit fc8bb04934
9 changed files with 304 additions and 4 deletions
@@ -0,0 +1,71 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<button mat-raised-button color="primary">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Entity Data Table Check
</button>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<mat-form-field fxFlex>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="entity">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Entity </th>
<td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.entity }} </td>
</ng-container>
<ng-container matColumnDef="productName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Product Name </th>
<td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.productName }} </td>
</ng-container>
<ng-container matColumnDef="datatableName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Data Table </th>
<td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.datatableName }} </td>
</ng-container>
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
<td mat-cell *matCellDef="let entityDataTableCheck"> {{ entityDataTableCheck.status.value }} </td>
</ng-container>
<ng-container matColumnDef="systemDefined">
<th mat-header-cell *matHeaderCellDef mat-sort-header> System Defined </th>
<td mat-cell *matCellDef="let entityDataTableCheck">
<div [className]="entityDataTableCheck.systemDefined === true ? 'true' : 'false'">
<fa-icon *ngIf="entityDataTableCheck.systemDefined" icon="check-circle" size="lg" matTooltip="Yes" matTooltipPosition="right"></fa-icon>
<fa-icon *ngIf="!entityDataTableCheck.systemDefined" icon="times-circle" size="lg" matTooltip="No" matTooltipPosition="right"></fa-icon>
</div>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Actions </th>
<td mat-cell *matCellDef="let entityDataTableCheck">
<button mat-button (click)="deleteEntityDataTableCheck(entityDataTableCheck.id)" color="warn">
<fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;Delete
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
</div>
@@ -0,0 +1,11 @@
table {
width: 100%;
}
.true {
color: #32cd32;
}
.false {
color: #f44366;
}
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { EntityDataTableChecksComponent } from './entity-data-table-checks.component';
describe('EntityDataTableChecksComponent', () => {
let component: EntityDataTableChecksComponent;
let fixture: ComponentFixture<EntityDataTableChecksComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EntityDataTableChecksComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EntityDataTableChecksComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,130 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource, MatPaginator, MatSort, MatDialog } from '@angular/material';
import { ActivatedRoute } from '@angular/router';
/** Custom Services */
import { OrganizationService } from '../organization.service';
/** Custom Components */
import { DeleteDialogComponent } from '../../shared/delete-dialog/delete-dialog.component';
/**
* Entity Data Table Checks component.
*/
@Component({
selector: 'mifosx-entity-data-table-checks',
templateUrl: './entity-data-table-checks.component.html',
styleUrls: ['./entity-data-table-checks.component.scss']
})
export class EntityDataTableChecksComponent implements OnInit {
/** Entity Data Table Checks data. */
entityDataTableChecksData: any;
/** Columns to be displayed in entity data table checks table. */
displayedColumns: string[] = ['entity', 'productName', 'datatableName', 'status', 'systemDefined', 'actions'];
/** Data source for entity data table checks table. */
dataSource: MatTableDataSource<any>;
/** Corresponding values for Entity */
entityValues: any = [
{
code: 'm_client',
value: 'Client'
},
{
code: 'm_loan',
value: 'Loan'
},
{
code: 'm_group',
value: 'Group'
},
{
code: 'm_savings_account',
value: 'Savings Account'
}
];
/** Paginator for entity data table checks table. */
@ViewChild(MatPaginator) paginator: MatPaginator;
/** Sorter for entity data table checks table. */
@ViewChild(MatSort) sort: MatSort;
/**
* Retrieves the entity data table checks data from `resolve`.
* @param {OrganizationService} organizationService Organization Service.
* @param {ActivatedRoute} route Activated Route.
* @param {MatDialog} dialog Dialog reference.
*/
constructor(private organizationService: OrganizationService,
private route: ActivatedRoute,
private dialog: MatDialog) {
this.route.data.subscribe(( data: { entityDataTableChecks: any }) => {
this.entityDataTableChecksData = data.entityDataTableChecks.pageItems;
});
}
/**
* Filters data in entity data table checks table based on passed value.
* @param {string} filterValue Value to filter data.
*/
applyFilter(filterValue: string) {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
/**
* Sets the entity data table checks table.
*/
ngOnInit() {
this.setEntityDataTableChecks();
this.setEntity();
}
/**
* Sets Entity to its corresponding values
*/
setEntity() {
for (let i = 0; i < this.dataSource.data.length; i++) {
for (let j = 0; j < this.entityValues.length; j++) {
if (this.entityValues[j].code === this.dataSource.data[i].entity) {
this.dataSource.data[i].entity = this.entityValues[j].value;
}
}
}
}
/**
* Initializes the data source, paginator and sorter for entity data table checks table.
*/
setEntityDataTableChecks() {
this.dataSource = new MatTableDataSource(this.entityDataTableChecksData);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'status': return item.status.value;
default: return item[property];
}
};
}
/**
* Deletes the entity data table check
* @param {string} entityDataTableCheckId Entity Data Table Check ID of entity data table check to be deleted.
*/
deleteEntityDataTableCheck(entityDataTableCheckId: string) {
const deleteEntityDataTableCheckDialogRef = this.dialog.open(DeleteDialogComponent, {
data: { deleteContext: `entity data table check ${entityDataTableCheckId}` }
});
deleteEntityDataTableCheckDialogRef.afterClosed().subscribe((response: any) => {
if (response.delete) {
this.organizationService.deleteEntityDataTableCheck(entityDataTableCheckId)
.subscribe(() => {
this.entityDataTableChecksData = this.entityDataTableChecksData.filter((entityDataTableChecks: any) => entityDataTableChecks.id !== entityDataTableCheckId);
this.dataSource.data = this.entityDataTableChecksData;
});
}
});
}
}
@@ -0,0 +1,30 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
/** rxjs Imports */
import { Observable } from 'rxjs';
/** Custom Services */
import { OrganizationService } from '../organization.service';
/**
* Entity Data Table Checks data resolver.
*/
@Injectable()
export class EntityDataTableChecksResolver implements Resolve<Object> {
/**
* @param {OrganizationService} organizationService Organization service.
*/
constructor(private organizationService: OrganizationService) {}
/**
* Returns the Entity Data Table Checks data.
* @returns {Observable<any>}
*/
resolve(): Observable<any> {
return this.organizationService.getEntityDataTableChecks();
}
}
@@ -19,6 +19,7 @@ import { AdhocQueryComponent } from './adhoc-query/adhoc-query.component';
import { TellersComponent } from './tellers/tellers.component';
import { PaymentTypesComponent } from './payment-types/payment-types.component';
import { PasswordPreferencesComponent } from './password-preferences/password-preferences.component';
import { EntityDataTableChecksComponent } from './entity-data-table-checks/entity-data-table-checks.component';
/** Custom Resolvers */
import { LoanProvisioningCriteriaResolver } from './loan-provisioning-criteria/loan-provisioning-criteria.resolver';
@@ -30,6 +31,7 @@ import { AdhocQueriesResolver } from './adhoc-query/adhoc-queries.resolver';
import { TellersResolver } from './tellers/tellers.resolver';
import { PaymentTypesResolver } from './payment-types/payment-types.resolver';
import { PasswordPreferencesTemplateResolver } from './password-preferences/password-preferences-template.resolver';
import { EntityDataTableChecksResolver } from './entity-data-table-checks/entity-data-table-checks.resolver';
/** Organization Routes */
const routes: Routes = [
@@ -118,6 +120,14 @@ const routes: Routes = [
resolve: {
passwordPreferencesTemplate: PasswordPreferencesTemplateResolver
}
},
{
path: 'entity-data-table-checks',
component: EntityDataTableChecksComponent,
data: { title: extract('Entity Data Table Checks'), breadcrumb: 'Entity Data Table Checks' },
resolve: {
entityDataTableChecks: EntityDataTableChecksResolver
}
}
]
}
@@ -141,7 +151,8 @@ const routes: Routes = [
AdhocQueriesResolver,
TellersResolver,
PaymentTypesResolver,
PasswordPreferencesTemplateResolver
PasswordPreferencesTemplateResolver,
EntityDataTableChecksResolver
]
})
export class OrganizationRoutingModule { }
@@ -64,7 +64,7 @@
<p matLine>Define Loan Provisioning Criteria for Organization</p>
</mat-list-item>
<mat-list-item>
<mat-list-item [routerLink]="['entity-data-table-checks']">
<mat-icon matListIcon>
<fa-icon icon="check" size="sm"></fa-icon>
</mat-icon>
+3 -1
View File
@@ -17,6 +17,7 @@ import { AdhocQueryComponent } from './adhoc-query/adhoc-query.component';
import { TellersComponent } from './tellers/tellers.component';
import { PaymentTypesComponent } from './payment-types/payment-types.component';
import { PasswordPreferencesComponent } from './password-preferences/password-preferences.component';
import { EntityDataTableChecksComponent } from './entity-data-table-checks/entity-data-table-checks.component';
/**
* Organization Module
@@ -39,7 +40,8 @@ import { PasswordPreferencesComponent } from './password-preferences/password-pr
AdhocQueryComponent,
TellersComponent,
PaymentTypesComponent,
PasswordPreferencesComponent
PasswordPreferencesComponent,
EntityDataTableChecksComponent
]
})
export class OrganizationModule { }
+21 -1
View File
@@ -1,6 +1,6 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpClient, HttpParams } from '@angular/common/http';
/** rxjs Imports */
import { Observable } from 'rxjs';
@@ -97,4 +97,24 @@ export class OrganizationService {
return this.http.put('/passwordpreferences', passwordPreferences);
}
/**
* @param {number} offset Page offset.
* @param {number} limit Number of entries within the page.
* @returns {Observable<any>} Entity Data Table Checks data.
*/
getEntityDataTableChecks(offset: number = 0, limit: number = -1): Observable<any> {
const httpParams = new HttpParams()
.set('offset', offset.toString())
.set('limit', limit.toString());
return this.http.get('/entityDatatableChecks', { params: httpParams });
}
/**
* @param {string} entityDataTableCheckId Entity Data Table Check ID of entity data table to be deleted.
* @returns {Observable<any>}
*/
deleteEntityDataTableCheck(entityDataTableCheckId: string): Observable<any> {
return this.http.delete(`/entityDatatableChecks/${entityDataTableCheckId}`);
}
}