feat: add view entity to entity mapping (#613)
- adds entity to entity mapping list - displays the data as per user selection Fixes: #485
This commit is contained in:
Muskan Khedia
@@ -0,0 +1,135 @@
|
||||
<div class="container">
|
||||
|
||||
<div class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="datasource">
|
||||
<ng-container matColumnDef="entitymapping">
|
||||
<th mat-header-cell *matHeaderCellDef> Mapping Between Entities </th>
|
||||
<td mat-cell *matCellDef="let mappingType" (click)="showFilters(mappingType.id)">
|
||||
<span *ngIf="mappingType.mappingTypes == 'office_access_to_loan_products'">
|
||||
Offices --> Loan Products
|
||||
</span>
|
||||
<span *ngIf="mappingType.mappingTypes == 'office_access_to_savings_products'">
|
||||
Offices --> Savings Products
|
||||
</span>
|
||||
<span *ngIf="mappingType.mappingTypes == 'office_access_to_fees/charges'">
|
||||
Offices --> Charges/Fees
|
||||
</span>
|
||||
<span *ngIf="mappingType.mappingTypes == 'role_access_to_loan_products'">
|
||||
Roles --> Loan Products
|
||||
</span>
|
||||
<span *ngIf="mappingType.mappingTypes == 'role_access_to_savings_products'">
|
||||
Roles --> Savings Products
|
||||
</span>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row"></tr>
|
||||
</table>
|
||||
|
||||
<!---------------- SHOW FILTERING OPTION ----------->
|
||||
<ng-container *ngIf="selectedMappingType > 0">
|
||||
|
||||
<mat-card>
|
||||
|
||||
<form [formGroup]="filterPreferenceForm" (ngSubmit)="showFilteredData()">
|
||||
<mat-card-title> {{firstMappingEntity}} access to {{secondMappingEntity}} </mat-card-title>
|
||||
<mat-card-content>
|
||||
|
||||
<div fxLayout="row" fxLayoutAlign="space-evenly center">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{firstMappingEntity}}</mat-label>
|
||||
<mat-select required formControlName="mappingFirstParamId">
|
||||
<mat-option [value]="0">
|
||||
All
|
||||
</mat-option>
|
||||
<mat-option *ngFor="let firstEntity of firstEntityData" [value]="firstEntity.id">
|
||||
{{ firstEntity.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="filterPreferenceForm.controls.mappingFirstParamId.hasError('required')">
|
||||
{{firstMappingEntity}} is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{secondMappingEntity}}</mat-label>
|
||||
<mat-select required formControlName="mappingSecondParamId">
|
||||
<mat-option [value]="0">
|
||||
All
|
||||
</mat-option>
|
||||
<mat-option *ngFor="let secondEntity of secondEntityData" [value]="secondEntity.id">
|
||||
{{ secondEntity.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="filterPreferenceForm.controls.mappingSecondParamId.hasError('required')">
|
||||
{{secondMappingEntity}} is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
|
||||
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
|
||||
<button mat-raised-button color="primary" [disabled]="!filterPreferenceForm.valid">Submit</button>
|
||||
<!-- <button *ngIf="hasClickedFilters" mat-raised-button color="primary">Add</button> -->
|
||||
</mat-card-actions>
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
</form>
|
||||
|
||||
<!----------------- DISPLAY THE MAPPING LIST DATA FOR SELECTED TYPE AND SELECTED ENTITIES -------------------->
|
||||
<ng-container *ngIf="hasClickedFilters">
|
||||
<div class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="entityMappingsListData" matSort>
|
||||
<ng-container matColumnDef="fromentity">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{firstMappingEntity}} </th>
|
||||
<td mat-cell *matCellDef="let listdata"> {{ listdata.fromEntity }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="toentity">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> {{secondMappingEntity}} </th>
|
||||
<td mat-cell *matCellDef="let listdata"> {{ listdata.toEntity }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="startdate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Start Date </th>
|
||||
<td mat-cell *matCellDef="let listdata"> {{ listdata.startData }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="enddate">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> End Date </th>
|
||||
<td mat-cell *matCellDef="let listdata"> {{ listdata.endDate }} </td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="edit">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> </th>
|
||||
<td mat-cell *matCellDef="let listdata">
|
||||
<button type="button" color="primary" mat-icon-button matTooltip="Edit" matTooltipPosition="above">
|
||||
<fa-icon icon="edit" size="lg"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<ng-container matColumnDef="delete">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> </th>
|
||||
<td mat-cell *matCellDef="let listdata">
|
||||
<button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above">
|
||||
<fa-icon icon="trash" size="lg"></fa-icon>
|
||||
</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
<tr mat-header-row *matHeaderRowDef="entityMappingListColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: entityMappingListColumns;" class="select-row"></tr>
|
||||
</table>
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { EntityToEntityMappingComponent } from './entity-to-entity-mapping.component';
|
||||
|
||||
describe('EntityToEntityMappingComponent', () => {
|
||||
let component: EntityToEntityMappingComponent;
|
||||
let fixture: ComponentFixture<EntityToEntityMappingComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ EntityToEntityMappingComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(EntityToEntityMappingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,186 @@
|
||||
/** Angular Imports */
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
/** Custom Services */
|
||||
import { SystemService } from 'app/system/system.service';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
|
||||
/**
|
||||
* Entity to Entity Mapping Component
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-entity-to-entity-mapping',
|
||||
templateUrl: './entity-to-entity-mapping.component.html',
|
||||
styleUrls: ['./entity-to-entity-mapping.component.scss']
|
||||
})
|
||||
export class EntityToEntityMappingComponent implements OnInit {
|
||||
|
||||
/** Stores entity to entity mapping data */
|
||||
entityMappings: string[] = [];
|
||||
/** Stores Id of selected mapping type */
|
||||
selectedMappingType = 0;
|
||||
/** Stores Id of first Entity filter */
|
||||
selectedFromId = 0;
|
||||
/** Stores Id of second Entity filter */
|
||||
selectedToId = 0;
|
||||
/** Checks wheter the filter is default or customized */
|
||||
hasClickedFilters = false;
|
||||
/** Selected Entity Id */
|
||||
retrieveById = 0;
|
||||
/** Stores filtered data */
|
||||
filterPreference: any;
|
||||
|
||||
/**
|
||||
* stores the data for clicked mapType
|
||||
*/
|
||||
firstEntityData: string[] = [];
|
||||
secondEntityData: string[] = [];
|
||||
firstMappingEntity: string;
|
||||
secondMappingEntity: string;
|
||||
/** Data source for entity table. */
|
||||
datasource: MatTableDataSource<any>;
|
||||
/** Data source for entity to entity list data. */
|
||||
entityMappingsListData: MatTableDataSource<any>;
|
||||
/** Filter Preference Form */
|
||||
filterPreferenceForm: FormGroup;
|
||||
/** List of Entity to Entity Mapping */
|
||||
displayedColumns: string[] = ['entitymapping'];
|
||||
/** Columns for details of a chosen mapping */
|
||||
entityMappingListColumns: string[] = ['fromentity', 'toentity', 'startdate', 'enddate', 'edit', 'delete'];
|
||||
|
||||
/** Paginator for entity table. */
|
||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||
/** Sorter for entity table. */
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
/**
|
||||
* Retrieves the codes data from `resolve`.
|
||||
* @param {ActivatedRoute} route Activated Route.
|
||||
*/
|
||||
constructor(private route: ActivatedRoute,
|
||||
private formBuilder: FormBuilder,
|
||||
private systemService: SystemService) {
|
||||
this.route.data.subscribe((data: { entityMappings: any }) => {
|
||||
this.entityMappings = data.entityMappings;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the filter preference form.
|
||||
*/
|
||||
createFilterPreferenceForm() {
|
||||
this.filterPreferenceForm = this.formBuilder.group({
|
||||
'mappingFirstParamId': ['', Validators.required],
|
||||
'mappingSecondParamId': ['', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the mapping table.
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.setMapping();
|
||||
}
|
||||
|
||||
setMapping() {
|
||||
this.datasource = new MatTableDataSource(this.entityMappings);
|
||||
this.datasource.paginator = this.paginator;
|
||||
this.datasource.sort = this.sort;
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays filter based on mapping id
|
||||
* @param id Entity Mapping Id
|
||||
*/
|
||||
showFilters(id: number) {
|
||||
this.selectedMappingType = id;
|
||||
this.hasClickedFilters = false;
|
||||
this.fetchRelatedData(this.selectedMappingType);
|
||||
this.selectedFromId = 0;
|
||||
this.selectedToId = 0;
|
||||
}
|
||||
|
||||
/** Fetches data based on the selected mapping type */
|
||||
fetchRelatedData(id: number) {
|
||||
this.retrieveById = id;
|
||||
this.createFilterPreferenceForm();
|
||||
switch (this.retrieveById) {
|
||||
|
||||
case 1:
|
||||
this.systemService.getOffices().subscribe((response: any) => {
|
||||
this.firstEntityData = response;
|
||||
this.firstMappingEntity = 'Office';
|
||||
});
|
||||
this.systemService.getLoanProducts().subscribe((response: any) => {
|
||||
this.secondEntityData = response;
|
||||
this.secondMappingEntity = 'Loan Products';
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
this.systemService.getOffices().subscribe((response: any) => {
|
||||
this.firstEntityData = response;
|
||||
this.firstMappingEntity = 'Office';
|
||||
});
|
||||
this.systemService.getSavingProducts().subscribe((response: any) => {
|
||||
this.secondEntityData = response;
|
||||
this.secondMappingEntity = 'Saving Products';
|
||||
});
|
||||
break;
|
||||
case 3:
|
||||
this.systemService.getOffices().subscribe((response: any) => {
|
||||
this.firstEntityData = response;
|
||||
this.firstMappingEntity = 'Office';
|
||||
});
|
||||
this.systemService.getCharges().subscribe((response: any) => {
|
||||
this.secondEntityData = response;
|
||||
this.secondMappingEntity = 'Charges';
|
||||
});
|
||||
break;
|
||||
case 4:
|
||||
this.systemService.getRoles().subscribe((response: any) => {
|
||||
this.firstEntityData = response;
|
||||
this.firstMappingEntity = 'Role';
|
||||
});
|
||||
this.systemService.getLoanProducts().subscribe((response: any) => {
|
||||
this.secondEntityData = response;
|
||||
this.secondMappingEntity = 'Loan Products';
|
||||
});
|
||||
break;
|
||||
case 5:
|
||||
this.systemService.getRoles().subscribe((response: any) => {
|
||||
this.firstEntityData = response;
|
||||
this.firstMappingEntity = 'Role';
|
||||
});
|
||||
this.systemService.getSavingProducts().subscribe((response: any) => {
|
||||
this.secondEntityData = response;
|
||||
this.secondMappingEntity = 'Saving Products';
|
||||
});
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Submits the filter preference form and creates a entityMappingList data
|
||||
*/
|
||||
showFilteredData() {
|
||||
this.filterPreference = this.filterPreferenceForm.value;
|
||||
if (this.filterPreference.mappingFirstParamId === '') {
|
||||
this.filterPreference.mappingFirstParamId = undefined;
|
||||
}
|
||||
if (this.filterPreference.mappingSecondParamId === '') {
|
||||
this.filterPreference.mappingSecondParamId = undefined;
|
||||
}
|
||||
this.hasClickedFilters = true;
|
||||
this.selectedFromId = this.filterPreference.mappingFirstParamId;
|
||||
this.selectedToId = this.filterPreference.mappingSecondParamId;
|
||||
this.systemService.getEntitytoEntityData(this.retrieveById, this.selectedFromId, this.selectedToId).subscribe((response: any) => {
|
||||
this.entityMappingsListData = new MatTableDataSource(response);
|
||||
this.entityMappingsListData.paginator = this.paginator;
|
||||
this.entityMappingsListData.sort = this.sort;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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 { SystemService } from '../system.service';
|
||||
|
||||
/**
|
||||
* Entity to entity mapping data resolver.
|
||||
*/
|
||||
@Injectable()
|
||||
export class EntityToEntityMappingResolver implements Resolve<Object> {
|
||||
|
||||
/**
|
||||
* @param {SystemService} systemService System service.
|
||||
*/
|
||||
constructor(private systemService: SystemService) { }
|
||||
|
||||
/**
|
||||
* Returns the Mapping data.
|
||||
* @returns {Observable<any>}
|
||||
*/
|
||||
resolve(): Observable<any> {
|
||||
return this.systemService.getEntityMappings();
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user