refactor: entity to entity mapping (#1236)

src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.html

@@ -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>

src/app/system/entity-to-entity-mapping/entity-to-entity-mapping.component.ts

@@ -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.paginator = this.paginator;
-      // this.entityMappingsListData.sort = this.sort;
+      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]
     });
   }
 
@@ -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;
+    const formfields: FormfieldBase[] = [
-      this.addScreenFilter = false;
+      new SelectBase({
-      this.editScreenFilter = true;
+        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 === '') {
+    if (addMappingForm.value.fromId === '') {
-      this.addMappingForm.value.fromId = undefined;
+      addMappingForm.value.fromId = undefined;
     }
-    if (this.addMappingForm.value.toId === '') {
+    if (addMappingForm.value.toId === '') {
-      this.addMappingForm.value.toId = undefined;
+      addMappingForm.value.toId = undefined;
     }
-    this.relId = id;
     const dateFormat = 'dd MMMM yyyy';
 
-    const startDate: Date = this.addMappingForm.value.startDate;
+    const startDate: Date = addMappingForm.value.startDate;
-    const endDate: Date = this.addMappingForm.value.endDate;
+    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) {
+  submitEdit(editMappingForm: any) {
-    this.relId = id;
     const dateFormat = 'dd MMMM yyyy';
 
-    const startDate: Date = this.editMappingForm.value.startDate;
+    const startDate: Date = editMappingForm.value.startDate;
-    const endDate: Date = this.editMappingForm.value.endDate;
+    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;
-  }
-
 }