feat: add edit entity to entity mapping (#823)

- add edit entity to entity mapping
- add delete entity to entity mapping

Fixes: #767

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

@@ -104,7 +104,8 @@
               <ng-container matColumnDef="edit">
                 <th mat-header-cell *matHeaderCellDef> </th>
                 <td mat-cell *matCellDef="let listdata">
-                  <button type="button" color="primary" mat-icon-button matTooltip="Edit" matTooltipPosition="above">
+                  <button type="button" color="primary" mat-icon-button matTooltip="Edit" matTooltipPosition="above"
+                    (click)="showEditScreen(listdata.mapId, selectedMappingType)">
                     <fa-icon icon="edit" size="lg"></fa-icon>
                   </button>
                 </td>
@@ -113,7 +114,8 @@
               <ng-container matColumnDef="delete">
                 <th mat-header-cell *matHeaderCellDef> </th>
                 <td mat-cell *matCellDef="let listdata">
-                  <button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above">
+                  <button type="button" color="warn" mat-icon-button matTooltip="Delete" matTooltipPosition="above"
+                  (click)="delete(listdata.mapId)">
                     <fa-icon icon="trash" size="lg"></fa-icon>
                   </button>
                 </td>
@@ -186,6 +188,66 @@
           </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">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

@@ -1,6 +1,6 @@
 /** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatPaginator, MatSort, MatTableDataSource, MatDialog } from '@angular/material';
 import { ActivatedRoute } from '@angular/router';
 import { DatePipe } from '@angular/common';
 
@@ -8,6 +8,9 @@ import { DatePipe } from '@angular/common';
 import { SystemService } from 'app/system/system.service';
 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
 
+/** Custom Components */
+import { DeleteDialogComponent } from '../../shared/delete-dialog/delete-dialog.component';
+
 /**
  * Entity to Entity Mapping Component
  */
@@ -36,7 +39,12 @@ export class EntityToEntityMappingComponent implements OnInit {
   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 */
+  mapIdToEdit: any;
   /**
    * stores the data for clicked mapType
    */
@@ -44,14 +52,18 @@ export class EntityToEntityMappingComponent implements OnInit {
   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;
   /** 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 */
@@ -62,6 +74,7 @@ export class EntityToEntityMappingComponent implements OnInit {
   /** Sorter for entity table. */
   @ViewChild(MatSort) sort: MatSort;
 
+
   /**
    * Retrieves the codes data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
@@ -69,7 +82,8 @@ export class EntityToEntityMappingComponent implements OnInit {
   constructor(private route: ActivatedRoute,
     private formBuilder: FormBuilder,
     private systemService: SystemService,
-    private datePipe: DatePipe) {
+    private datePipe: DatePipe,
+    private dialog: MatDialog) {
     this.route.data.subscribe((data: { entityMappings: any }) => {
       this.entityMappings = data.entityMappings;
     });
@@ -183,6 +197,7 @@ export class EntityToEntityMappingComponent implements OnInit {
     }
     this.hasClickedFilters = true;
     this.addScreenFilter = false;
+    this.editScreenFilter = false;
 
     this.selectedFromId = this.filterPreference.mappingFirstParamId;
     this.selectedToId = this.filterPreference.mappingSecondParamId;
@@ -205,6 +220,21 @@ export class EntityToEntityMappingComponent implements OnInit {
     });
   }
 
+  /**
+   * 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]
+    });
+  }
+
   /**
    * Shows the add entity screen
    * @param selectedType selected Map Type
@@ -214,9 +244,28 @@ export class EntityToEntityMappingComponent implements OnInit {
     this.relId = selectedType;
     this.hasClickedFilters = false;
     this.addScreenFilter = true;
+    this.editScreenFilter = false;
     this.fetchRelatedData(this.relId);
   }
 
+  /**
+   * Shows the edit entity screen
+   * @param selectedMap selected Map Number
+   * @param selectedType selected Map Type
+   */
+  showEditScreen(selectedMap: number, selectedType: number) {
+    this.relId = selectedType;
+    this.mapIdToEdit = selectedMap;
+    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;
+    });
+  }
+
 
   /**
    * Submits the new mapping
@@ -248,12 +297,54 @@ export class EntityToEntityMappingComponent implements OnInit {
     });
   }
 
+  /**
+   * Submits the edited data
+   * @param id Map Id
+   */
+  submitEdit(id: number) {
+    this.relId = id;
+    const dateFormat = 'dd MMMM yyyy';
+
+    const startDate: Date = this.editMappingForm.value.startDate;
+    const endDate: Date = this.editMappingForm.value.endDate;
+
+    this.editMappingForm.patchValue({
+      startDate: this.datePipe.transform(startDate, dateFormat),
+      endDate: this.datePipe.transform(endDate, dateFormat)
+    });
+    const newMappingData = this.editMappingForm.value;
+    newMappingData.dateFormat = dateFormat;
+    newMappingData.locale = 'en';
+    this.systemService.editMapping(this.relId, newMappingData).subscribe((response: any) => {
+      this.showFilteredData();
+    });
+  }
+
+  /**
+   * Deletes the selected Map Id
+   * @param id Map Id
+   */
+  delete(id: number) {
+    const deleteNoteDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `Mapping id: ${id}` }
+    });
+    deleteNoteDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.systemService.deleteMapping(id)
+          .subscribe(() => {
+            this.showFilteredData();
+          });
+      }
+    });
+  }
+
   /**
    * Cancels the add entity operation
    */
   cancelOperation() {
     this.hasClickedFilters = true;
     this.addScreenFilter = false;
+    this.editScreenFilter = false;
   }
 
 }

src/app/system/system.service.ts

@@ -476,6 +476,15 @@ export class SystemService {
     return this.http.get(`/entitytoentitymapping/${mappingId}/${fromId}/${toId}`);
   }
 
+  /**
+   * Get particular Map Data
+   * @param mapId Mapping Id
+   */
+  getMapIdData(mapId: number): Observable<any> {
+    return this.http.get(`/entitytoentitymapping/${mapId}`);
+  }
+
+
   /**
    * Creates a new mapping
    * @param {any} mapType Map id to be created.
@@ -486,6 +495,24 @@ export class SystemService {
     return this.http.post(`/entitytoentitymapping/${mapType}`, mapData);
   }
 
+  /**
+   * Edit a mapping
+   * @param {any} mapType Map id to be edited.
+   * @param {any} mapData Map data to be added
+   * @returns {Observable<any>} resolved data
+   */
+  editMapping(mapId: any, mapData: any): Observable<any> {
+    return this.http.put(`/entitytoentitymapping/${mapId}`, mapData);
+  }
+
+  /**
+   * Delete the Map Id
+   * @param mapId Map Id
+   */
+  deleteMapping(mapId: any): Observable<any> {
+    return this.http.delete(`/entitytoentitymapping/${mapId}`);
+  }
+
   /**
    * @returns {Observable<any>} Offices data
    */