refactor: entity to entity mapping (#1236)
This commit is contained in:
Muskan Khedia
@@ -124,130 +124,10 @@
|
||||
<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> -->
|
||||
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<!---------------------- ADD NEW MAPPING PAGE -------------------------->
|
||||
<ng-container *ngIf="addScreenFilter">
|
||||
<ng-container *ngIf="relId > 0">
|
||||
<mat-card-title> Add new entity mapping </mat-card-title>
|
||||
<form [formGroup]="addMappingForm" (ngSubmit)="submitNew(relId)">
|
||||
|
||||
<mat-card-content>
|
||||
<div fxLayout="column" fxLayoutAlign="space-evenly center">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{firstMappingEntity}}</mat-label>
|
||||
<mat-select required formControlName="fromId">
|
||||
|
||||
<mat-option *ngFor="let firstEntity of firstEntityData" [value]="firstEntity.id">
|
||||
{{ firstEntity.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="addMappingForm.controls.fromId.hasError('required')">
|
||||
{{firstMappingEntity}} is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{secondMappingEntity}}</mat-label>
|
||||
<mat-select required formControlName="toId">
|
||||
|
||||
<mat-option *ngFor="let secondEntity of secondEntityData" [value]="secondEntity.id">
|
||||
{{ secondEntity.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="addMappingForm.controls.toId.hasError('required')">
|
||||
{{secondMappingEntity}} is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput [matDatepicker]="startDatePicker" formControlName="startDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>End Date</mat-label>
|
||||
<input matInput [matDatepicker]="endDatePicker" formControlName="endDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #endDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
|
||||
<button mat-raised-button color="danger" (click)=cancelOperation()> Cancel </button>
|
||||
<button mat-raised-button color="primary" [disabled]="!addMappingForm.valid" *mifosxHasPermission="'CREATE_ENTITYMAPPING'">Submit</button>
|
||||
</mat-card-actions>
|
||||
</form>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<!---------------------- EDIT MAPPING PAGE -------------------------->
|
||||
<ng-container *ngIf="editScreenFilter">
|
||||
<ng-container *ngIf="relId > 0">
|
||||
<mat-card-title> Edit entity mapping </mat-card-title>
|
||||
<form [formGroup]="editMappingForm" (ngSubmit)="submitEdit(mapIdToEdit)">
|
||||
|
||||
<mat-card-content>
|
||||
<div fxLayout="column" fxLayoutAlign="space-evenly center">
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{firstMappingEntity}}</mat-label>
|
||||
<mat-select required formControlName="fromId">
|
||||
|
||||
<mat-option *ngFor="let firstEntity of firstEntityData" [value]="firstEntity.id">
|
||||
{{ firstEntity.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="editMappingForm.controls.fromId.hasError('required')">
|
||||
{{firstMappingEntity}} is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>{{secondMappingEntity}}</mat-label>
|
||||
<mat-select required formControlName="toId">
|
||||
|
||||
<mat-option *ngFor="let secondEntity of secondEntityData" [value]="secondEntity.id">
|
||||
{{ secondEntity.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="editMappingForm.controls.toId.hasError('required')">
|
||||
{{secondMappingEntity}} is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>Start Date</mat-label>
|
||||
<input matInput [matDatepicker]="startDatePicker" formControlName="startDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #startDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<mat-label>End Date</mat-label>
|
||||
<input matInput [matDatepicker]="endDatePicker" formControlName="endDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #endDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
|
||||
<button mat-raised-button color="danger" (click)=cancelOperation()> Cancel </button>
|
||||
<button mat-raised-button color="primary" [disabled]="!editMappingForm.valid" *mifosxHasPermission="'CREATE_ENTITYMAPPING'">Submit</button>
|
||||
</mat-card-actions>
|
||||
</form>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
</mat-card>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@@ -13,6 +13,10 @@ import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
|
||||
/** Custom Components */
|
||||
import { DeleteDialogComponent } from '../../shared/delete-dialog/delete-dialog.component';
|
||||
import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
|
||||
import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
|
||||
import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base';
|
||||
import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
|
||||
|
||||
/**
|
||||
* Entity to Entity Mapping Component
|
||||
@@ -40,10 +44,6 @@ export class EntityToEntityMappingComponent implements OnInit {
|
||||
relId: number;
|
||||
/** Stores filtered data */
|
||||
filterPreference: any;
|
||||
/** Checks where add form is to be displayed */
|
||||
addScreenFilter = false;
|
||||
/** Checks where edit form is to be displayed */
|
||||
editScreenFilter = false;
|
||||
/** details of particular map id */
|
||||
entityMap: any;
|
||||
/** Map Id to ID */
|
||||
@@ -63,10 +63,6 @@ export class EntityToEntityMappingComponent implements OnInit {
|
||||
|
||||
/** Filter Preference Form */
|
||||
filterPreferenceForm: FormGroup;
|
||||
/** Add entity Form */
|
||||
addMappingForm: FormGroup;
|
||||
/** Edit entity Form */
|
||||
editMappingForm: FormGroup;
|
||||
/** List of Entity to Entity Mapping */
|
||||
displayedColumns: string[] = ['entitymapping'];
|
||||
/** Columns for details of a chosen mapping */
|
||||
@@ -111,8 +107,6 @@ export class EntityToEntityMappingComponent implements OnInit {
|
||||
|
||||
setMapping() {
|
||||
this.datasource = new MatTableDataSource(this.entityMappings);
|
||||
this.datasource.paginator = this.paginator;
|
||||
this.datasource.sort = this.sort;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -199,42 +193,13 @@ export class EntityToEntityMappingComponent implements OnInit {
|
||||
this.filterPreference.mappingSecondParamId = 0;
|
||||
}
|
||||
this.hasClickedFilters = true;
|
||||
this.addScreenFilter = false;
|
||||
this.editScreenFilter = false;
|
||||
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the add mapping form
|
||||
*/
|
||||
createAddMappingForm() {
|
||||
this.addMappingForm = this.formBuilder.group({
|
||||
'fromId': ['', Validators.required],
|
||||
'toId': ['', Validators.required],
|
||||
'startDate': [''],
|
||||
'endDate': ['']
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Edits the mapping data
|
||||
*/
|
||||
createEditMappingForm(data: any) {
|
||||
const dateFormat = 'dd MMMM yyyy';
|
||||
const startDate = new Date(data[0].startDate);
|
||||
const endDate = new Date(data[0].endDate);
|
||||
this.editMappingForm = this.formBuilder.group({
|
||||
'fromId': [data[0].fromId, Validators.required],
|
||||
'toId': [data[0].toId, Validators.required],
|
||||
'startDate': [startDate, Validators.required],
|
||||
'endDate': [endDate, Validators.required]
|
||||
this.entityMappingsListData.paginator = this.paginator;
|
||||
this.entityMappingsListData.sort = this.sort;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -243,12 +208,45 @@ export class EntityToEntityMappingComponent implements OnInit {
|
||||
* @param selectedType selected Map Type
|
||||
*/
|
||||
showAddScreen(selectedType: number) {
|
||||
this.createAddMappingForm();
|
||||
this.relId = selectedType;
|
||||
this.hasClickedFilters = false;
|
||||
this.addScreenFilter = true;
|
||||
this.editScreenFilter = false;
|
||||
this.fetchRelatedData(this.relId);
|
||||
const formfields: FormfieldBase[] = [
|
||||
new SelectBase({
|
||||
controlName: 'fromId',
|
||||
label: this.firstMappingEntity,
|
||||
options: { label: 'name', value: 'id', data: this.firstEntityData },
|
||||
required: true
|
||||
}),
|
||||
new SelectBase({
|
||||
controlName: 'toId',
|
||||
label: this.secondMappingEntity,
|
||||
options: { label: 'name', value: 'id', data: this.secondEntityData },
|
||||
required: true
|
||||
}),
|
||||
new DatepickerBase({
|
||||
controlName: 'startDate',
|
||||
label: 'Start Date',
|
||||
type: 'date',
|
||||
required: false
|
||||
}),
|
||||
new DatepickerBase({
|
||||
controlName: 'endDate',
|
||||
label: 'End Date',
|
||||
type: 'date',
|
||||
required: false
|
||||
})
|
||||
];
|
||||
const data = {
|
||||
title: 'Add Entity to Entity Mapping',
|
||||
layout: { addButtonText: 'Confirm' },
|
||||
formfields: formfields
|
||||
};
|
||||
const addEntitytoEntityMappingDialogRef = this.dialog.open(FormDialogComponent, { data });
|
||||
addEntitytoEntityMappingDialogRef.afterClosed().subscribe((response: any) => {
|
||||
if (response.data) {
|
||||
this.submitNew(response.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -262,37 +260,69 @@ export class EntityToEntityMappingComponent implements OnInit {
|
||||
this.fetchRelatedData(this.relId);
|
||||
this.systemService.getMapIdData(selectedMap).subscribe((response: any) => {
|
||||
this.entityMap = response;
|
||||
this.createEditMappingForm(this.entityMap);
|
||||
this.hasClickedFilters = false;
|
||||
this.addScreenFilter = false;
|
||||
this.editScreenFilter = true;
|
||||
});
|
||||
const formfields: FormfieldBase[] = [
|
||||
new SelectBase({
|
||||
controlName: 'fromId',
|
||||
label: this.firstMappingEntity,
|
||||
options: { label: 'name', value: 'id', data: this.firstEntityData },
|
||||
required: true
|
||||
}),
|
||||
new SelectBase({
|
||||
controlName: 'toId',
|
||||
label: this.secondMappingEntity,
|
||||
options: { label: 'name', value: 'id', data: this.secondEntityData },
|
||||
required: true
|
||||
}),
|
||||
new DatepickerBase({
|
||||
controlName: 'startDate',
|
||||
label: 'Start Date',
|
||||
type: 'date',
|
||||
required: false
|
||||
}),
|
||||
new DatepickerBase({
|
||||
controlName: 'endDate',
|
||||
label: 'End Date',
|
||||
type: 'date',
|
||||
required: false
|
||||
})
|
||||
];
|
||||
const data = {
|
||||
title: 'Edit Entity to Entity Mapping',
|
||||
layout: { addButtonText: 'Confirm' },
|
||||
formfields: formfields
|
||||
};
|
||||
const editEntitytoEntityMappingDialogRef = this.dialog.open(FormDialogComponent, { data });
|
||||
editEntitytoEntityMappingDialogRef.afterClosed().subscribe((response: any) => {
|
||||
if (response.data) {
|
||||
this.submitEdit(response.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Submits the new mapping
|
||||
* @param id Map type id
|
||||
* @param addMappingForm Add Mapping Form Data
|
||||
*/
|
||||
submitNew(id: number) {
|
||||
submitNew(addMappingForm: any) {
|
||||
|
||||
if (this.addMappingForm.value.fromId === '') {
|
||||
this.addMappingForm.value.fromId = undefined;
|
||||
if (addMappingForm.value.fromId === '') {
|
||||
addMappingForm.value.fromId = undefined;
|
||||
}
|
||||
if (this.addMappingForm.value.toId === '') {
|
||||
this.addMappingForm.value.toId = undefined;
|
||||
if (addMappingForm.value.toId === '') {
|
||||
addMappingForm.value.toId = undefined;
|
||||
}
|
||||
this.relId = id;
|
||||
const dateFormat = 'dd MMMM yyyy';
|
||||
|
||||
const startDate: Date = this.addMappingForm.value.startDate;
|
||||
const endDate: Date = this.addMappingForm.value.endDate;
|
||||
const startDate: Date = addMappingForm.value.startDate;
|
||||
const endDate: Date = addMappingForm.value.endDate;
|
||||
|
||||
this.addMappingForm.patchValue({
|
||||
addMappingForm.patchValue({
|
||||
startDate: this.datePipe.transform(startDate, dateFormat),
|
||||
endDate: this.datePipe.transform(endDate, dateFormat)
|
||||
});
|
||||
const newMappingData = this.addMappingForm.value;
|
||||
const newMappingData = addMappingForm.value;
|
||||
newMappingData.dateFormat = dateFormat;
|
||||
newMappingData.locale = 'en';
|
||||
this.systemService.createMapping(this.relId, newMappingData).subscribe((response: any) => {
|
||||
@@ -302,23 +332,22 @@ export class EntityToEntityMappingComponent implements OnInit {
|
||||
|
||||
/**
|
||||
* Submits the edited data
|
||||
* @param id Map Id
|
||||
* @param editMappingForm Edit Mapping Form Id
|
||||
*/
|
||||
submitEdit(id: number) {
|
||||
this.relId = id;
|
||||
submitEdit(editMappingForm: any) {
|
||||
const dateFormat = 'dd MMMM yyyy';
|
||||
|
||||
const startDate: Date = this.editMappingForm.value.startDate;
|
||||
const endDate: Date = this.editMappingForm.value.endDate;
|
||||
const startDate: Date = editMappingForm.value.startDate;
|
||||
const endDate: Date = editMappingForm.value.endDate;
|
||||
|
||||
this.editMappingForm.patchValue({
|
||||
editMappingForm.patchValue({
|
||||
startDate: this.datePipe.transform(startDate, dateFormat),
|
||||
endDate: this.datePipe.transform(endDate, dateFormat)
|
||||
});
|
||||
const newMappingData = this.editMappingForm.value;
|
||||
const newMappingData = editMappingForm.value;
|
||||
newMappingData.dateFormat = dateFormat;
|
||||
newMappingData.locale = 'en';
|
||||
this.systemService.editMapping(this.relId, newMappingData).subscribe((response: any) => {
|
||||
this.systemService.editMapping(this.mapIdToEdit, newMappingData).subscribe((response: any) => {
|
||||
this.showFilteredData();
|
||||
});
|
||||
}
|
||||
@@ -341,13 +370,4 @@ export class EntityToEntityMappingComponent implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Cancels the add entity operation
|
||||
*/
|
||||
cancelOperation() {
|
||||
this.hasClickedFilters = true;
|
||||
this.addScreenFilter = false;
|
||||
this.editScreenFilter = false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user