feat: add new entity to entity mapping (#822)

Fixes: #767

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

@@ -68,11 +68,9 @@
                 </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> -->
+                <button *ngIf="hasClickedFilters" mat-raised-button color="primary" (click)="showAddScreen(selectedMappingType)">Add</button>
               </mat-card-actions>
             </div>
 
@@ -81,30 +79,30 @@
 
         <!----------------- 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>
+          <div>
+            <table mat-table [dataSource]="entityMappingsListData">
               <ng-container matColumnDef="fromentity">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{firstMappingEntity}} </th>
+                <th mat-header-cell *matHeaderCellDef> {{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>
+                <th mat-header-cell *matHeaderCellDef> {{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>
+                <th mat-header-cell *matHeaderCellDef> Start Date </th>
+                <td mat-cell *matCellDef="let listdata"> {{ listdata.startDate }} </td>
               </ng-container>
 
               <ng-container matColumnDef="enddate">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> End Date </th>
+                <th mat-header-cell *matHeaderCellDef> 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>
+                <th mat-header-cell *matHeaderCellDef> </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>
@@ -113,7 +111,7 @@
               </ng-container>
 
               <ng-container matColumnDef="delete">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header> </th>
+                <th mat-header-cell *matHeaderCellDef> </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>
@@ -124,10 +122,70 @@
               <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">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.scss

@@ -0,0 +1,5 @@
+table {
+    .select-row {
+        cursor: pointer;
+    }
+}

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

@@ -2,6 +2,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
 import { ActivatedRoute } from '@angular/router';
+import { DatePipe } from '@angular/common';
 
 /** Custom Services */
 import { SystemService } from 'app/system/system.service';
@@ -29,8 +30,12 @@ export class EntityToEntityMappingComponent implements OnInit {
   hasClickedFilters = false;
   /** Selected Entity Id */
   retrieveById = 0;
+  /** relative Id */
+  relId: number;
   /** Stores filtered data */
   filterPreference: any;
+  /** Checks where add form is to be displayed */
+  addScreenFilter = false;
 
   /**
    * stores the data for clicked mapType
@@ -45,6 +50,8 @@ export class EntityToEntityMappingComponent implements OnInit {
   entityMappingsListData: MatTableDataSource<any>;
   /** Filter Preference Form */
   filterPreferenceForm: FormGroup;
+  /** Add entity Form */
+  addMappingForm: FormGroup;
   /** List of Entity to Entity Mapping */
   displayedColumns: string[] = ['entitymapping'];
   /** Columns for details of a chosen mapping */
@@ -61,7 +68,8 @@ export class EntityToEntityMappingComponent implements OnInit {
    */
   constructor(private route: ActivatedRoute,
     private formBuilder: FormBuilder,
-    private systemService: SystemService) {
+    private systemService: SystemService,
+    private datePipe: DatePipe) {
     this.route.data.subscribe((data: { entityMappings: any }) => {
       this.entityMappings = data.entityMappings;
     });
@@ -168,19 +176,84 @@ export class EntityToEntityMappingComponent implements OnInit {
   showFilteredData() {
     this.filterPreference = this.filterPreferenceForm.value;
     if (this.filterPreference.mappingFirstParamId === '') {
-      this.filterPreference.mappingFirstParamId = undefined;
+      this.filterPreference.mappingFirstParamId = 0;
     }
     if (this.filterPreference.mappingSecondParamId === '') {
-      this.filterPreference.mappingSecondParamId = undefined;
+      this.filterPreference.mappingSecondParamId = 0;
     }
     this.hasClickedFilters = true;
+    this.addScreenFilter = 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;
+      // 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': ['']
+    });
+  }
+
+  /**
+   * Shows the add entity screen
+   * @param selectedType selected Map Type
+   */
+  showAddScreen(selectedType: number) {
+    this.createAddMappingForm();
+    this.relId = selectedType;
+    this.hasClickedFilters = false;
+    this.addScreenFilter = true;
+    this.fetchRelatedData(this.relId);
+  }
+
+
+  /**
+   * Submits the new mapping
+   * @param id Map type id
+   */
+  submitNew(id: number) {
+
+    if (this.addMappingForm.value.fromId === '') {
+      this.addMappingForm.value.fromId = undefined;
+    }
+    if (this.addMappingForm.value.toId === '') {
+      this.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;
+
+    this.addMappingForm.patchValue({
+      startDate: this.datePipe.transform(startDate, dateFormat),
+      endDate: this.datePipe.transform(endDate, dateFormat)
+    });
+    const newMappingData = this.addMappingForm.value;
+    newMappingData.dateFormat = dateFormat;
+    newMappingData.locale = 'en';
+    this.systemService.createMapping(this.relId, newMappingData).subscribe((response: any) => {
+      this.showFilteredData();
+    });
+  }
+
+  /**
+   * Cancels the add entity operation
+   */
+  cancelOperation() {
+    this.hasClickedFilters = true;
+    this.addScreenFilter = false;
+  }
+
 }

src/app/system/system.module.ts

@@ -4,6 +4,7 @@ import { NgModule } from '@angular/core';
 /** Module Imports */
 import { SharedModule } from '../shared/shared.module';
 import { SystemRoutingModule } from './system-routing.module';
+import { PipesModule } from '../pipes/pipes.module';
 
 /** Component Imports */
 import { CodesComponent } from './codes/codes.component';
@@ -58,7 +59,8 @@ import { EditSchedulerJobComponent } from './manage-scheduler-jobs/edit-schedule
 @NgModule({
   imports: [
     SystemRoutingModule,
-    SharedModule
+    SharedModule,
+    PipesModule
   ],
   declarations: [
     SystemComponent,

src/app/system/system.service.ts

@@ -476,6 +476,16 @@ export class SystemService {
     return this.http.get(`/entitytoentitymapping/${mappingId}/${fromId}/${toId}`);
   }
 
+  /**
+   * Creates a new mapping
+   * @param {any} mapType Map id to be created.
+   * @param {any} mapData Map data to be added
+   * @returns {Observable<any>} resolved data
+   */
+  createMapping(mapType: any, mapData: any): Observable<any> {
+    return this.http.post(`/entitytoentitymapping/${mapType}`, mapData);
+  }
+
   /**
    * @returns {Observable<any>} Offices data
    */