feat (clients) : add client identifier

fixes: #260

src/app/clients/clients-routing.module.ts

@@ -33,6 +33,7 @@ import { ClientNotesResolver } from './common-resolvers/client-notes.resolver';
 import { ClientDocumentsResolver } from './common-resolvers/client-document.resolver';
 import { ClientDatatablesResolver } from './common-resolvers/client-datatables.resolver';
 import { ClientDatatableResolver } from './common-resolvers/client-datatable.resolver';
+import { ClientIdentifierTemplateResolver } from './common-resolvers/client-identifier-template.resolver';
 
 const routes: Routes = [
   Route.withShell([{
@@ -98,7 +99,8 @@ const routes: Routes = [
             path: 'identities',
             component: IdentitiesTabComponent,
             resolve: {
-              clientIdentities: ClientIdentitiesResolver
+              clientIdentities: ClientIdentitiesResolver,
+              clientIdentifierTemplate: ClientIdentifierTemplateResolver
             }
           },
           {
@@ -148,7 +150,8 @@ const routes: Routes = [
     ClientNotesResolver,
     ClientDocumentsResolver,
     ClientDatatablesResolver,
-    ClientDatatableResolver
+    ClientDatatableResolver,
+    ClientIdentifierTemplateResolver
   ]
 })
 export class ClientsRoutingModule { }

src/app/clients/clients-view/identities-tab/identities-tab.component.html

@@ -1,62 +1,62 @@
 <div class="tab-container mat-typography">
 
-  <!-- Identities Table -->
+    <!-- Identities Table -->
 
-  <h3>Identities</h3>
+    <h3>Identities</h3>
 
-  <button mat-raised-button class="f-right" color="primary">
+    <button mat-raised-button class="f-right" color="primary" (click)="addIdentifier()">
     <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp; Add
   </button>
 
-  <table mat-table #identifiersTable [dataSource]="clientIdentities" class="mat-elevation-z1">
-
-    <ng-container matColumnDef="id">
-      <th mat-header-cell *matHeaderCellDef> Id </th>
-      <td mat-cell *matCellDef="let identity">
-        {{identity.id}} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="description">
-      <th mat-header-cell *matHeaderCellDef> Description </th>
-      <td mat-cell *matCellDef="let identity"> {{identity.description}} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="type">
-      <th mat-header-cell *matHeaderCellDef> type </th>
-      <td mat-cell *matCellDef="let identity"> {{identity.documentType.name}} 
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="documents">
-      <th mat-header-cell *matHeaderCellDef>Identity Documents </th>
-      <td mat-cell *matCellDef="let identity">
-        <div *ngFor="let document of identity.documents">
-          {{document.name}}
-          <fa-icon icon="cloud-download-alt" (click)="download(document.parentEntityId,document.id)"></fa-icon>
-        </div>
-      </td>
-    </ng-container>
-
-    <ng-container matColumnDef="status">
-      <th mat-header-cell *matHeaderCellDef> Status </th>
-      <td mat-cell *matCellDef="let identity">
-        {{(identity.status==='clientIdentifierStatusType.active')?'active':'inactive'}} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef> Actions </th>
-      <td mat-cell *matCellDef="let identity; let i = index">
-        <button class="identity-action-button" mat-raised-button color="primary" (click)="uploadDocument(i,identity.id)">
+    <table mat-table #identifiersTable [dataSource]="clientIdentities" class="mat-elevation-z1">
+
+        <ng-container matColumnDef="id">
+            <th mat-header-cell *matHeaderCellDef> Id </th>
+            <td mat-cell *matCellDef="let identity">
+                {{identity.id}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="description">
+            <th mat-header-cell *matHeaderCellDef> Description </th>
+            <td mat-cell *matCellDef="let identity"> {{identity.description}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="type">
+            <th mat-header-cell *matHeaderCellDef> type </th>
+            <td mat-cell *matCellDef="let identity"> {{identity.documentType.name}}
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="documents">
+            <th mat-header-cell *matHeaderCellDef>Identity Documents </th>
+            <td mat-cell *matCellDef="let identity">
+                <div *ngFor="let document of identity.documents">
+                    {{document.name}}
+                    <fa-icon icon="cloud-download-alt" (click)="download(document.parentEntityId,document.id)"></fa-icon>
+                </div>
+            </td>
+        </ng-container>
+
+        <ng-container matColumnDef="status">
+            <th mat-header-cell *matHeaderCellDef> Status </th>
+            <td mat-cell *matCellDef="let identity">
+                {{(identity.status==='clientIdentifierStatusType.active')?'active':'inactive'}} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef> Actions </th>
+            <td mat-cell *matCellDef="let identity; let i = index">
+                <button class="identity-action-button" mat-raised-button color="primary" (click)="uploadDocument(i,identity.id)">
           <fa-icon icon="cloud-upload-alt"></fa-icon>
         </button>
-        <button class="identity-action-button" mat-raised-button color="warn" (click)="deleteIdentifier(identity.clientId,identity.id,i)">
+        <button class="identity-action-button" mat-raised-button color="warn" (click)="deleteIdentifier(identity.clientId,identity.id,index)">
           <fa-icon icon="times"></fa-icon>
         </button>
-      </td>
-    </ng-container>
+            </td>
+        </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="identitiesColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: identitiesColumns;"></tr>
-  </table>
+        <tr mat-header-row *matHeaderRowDef="identitiesColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: identitiesColumns;"></tr>
+    </table>
 
 </div>

src/app/clients/clients-view/identities-tab/identities-tab.component.ts

@@ -2,10 +2,14 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { MatTable } from '@angular/material/table';
 import { MatDialog } from '@angular/material';
+import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base';
+import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
+import { SelectBase } from 'app/shared/form-dialog/formfield/model/select-base';
 
 /** Custom Components */
 import { UploadDocumentDialogComponent } from '../upload-document-dialog/upload-document-dialog.component';
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
+import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component';
 
 /** Custom Services */
 import { ClientsService } from '../../clients.service';
@@ -16,20 +20,24 @@ import { ClientsService } from '../../clients.service';
   styleUrls: ['./identities-tab.component.scss']
 })
 export class IdentitiesTabComponent implements OnInit {
+
   @ViewChild('identifiersTable') identifiersTable: MatTable<Element>;
   identitiesColumns: string[] = ['id', 'description', 'type', 'documents', 'status', 'actions'];
   clientIdentities: any;
+  clientIdentifierTemplate: any;
+  clientId: string;
 
   constructor(private route: ActivatedRoute,
     public dialog: MatDialog,
     private clientService: ClientsService) {
-    this.route.data.subscribe((data: { clientIdentities: any }) => {
+    this.clientId = this.route.parent.snapshot.paramMap.get('clientId');
+    this.route.data.subscribe((data: { clientIdentities: any, clientIdentifierTemplate: any }) => {
       this.clientIdentities = data.clientIdentities;
+      this.clientIdentifierTemplate = data.clientIdentifierTemplate;
     });
   }
 
-  ngOnInit() {
-  }
+  ngOnInit() { }
 
   download(parentEntityId: string, documentId: string) {
     this.clientService.downloadClientIdentificationDocument(parentEntityId, documentId).subscribe(res => {
@@ -38,11 +46,68 @@ export class IdentitiesTabComponent implements OnInit {
     });
   }
 
+  addIdentifier() {
+    const formfields: FormfieldBase[] = [
+      new SelectBase({
+        controlName: 'documentTypeId',
+        label: 'Document Type',
+        value: '',
+        options: { label: 'name', value: 'id', data: this.clientIdentifierTemplate.allowedDocumentTypes },
+        required: true,
+        order: 1
+      }),
+      new SelectBase({
+        controlName: 'status',
+        label: 'Status',
+        value: '2',
+        options: { label: 'value', value: 'value', data: [{ value: 'Active' }, { value: 'Inactive' }] },
+        required: true,
+        order: 2
+      }),
+      new InputBase({
+        controlName: 'documentKey',
+        label: 'Unique Id',
+        value: '',
+        type: 'text',
+        required: true,
+        order: 3
+      }),
+      new InputBase({
+        controlName: 'description',
+        label: 'Description',
+        value: '',
+        type: 'text',
+        order: 4
+      })
+    ];
+    const data = {
+      title: 'Add Client Identifier',
+      formfields: formfields
+    };
+    const addIdentifierDialogRef = this.dialog.open(FormDialogComponent, { data });
+    addIdentifierDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.data) {
+        this.clientService.addClientIdentifier(this.clientId, response.data.value).subscribe((res: any) => {
+          this.clientIdentities.push({
+            id: res.resourceId,
+            description: response.data.value.description,
+            documentType: this.clientIdentifierTemplate.allowedDocumentTypes.filter((doc: any) => (doc.id === response.data.value.documentTypeId))[0],
+            documentKey: response.data.value.documentKey,
+            documents: [],
+            clientId: this.clientId,
+            status: (response.data.value.status === 'Active' ? 'clientIdentifierStatusType.active' : 'clientIdentifierStatusType.inactive')
+          });
+          this.identifiersTable.renderRows();
+        });
+      }
+    });
+  }
+
   deleteIdentifier(clientId: string, identifierId: string, index: number) {
-    const deleteFamilyMemberDialogRef = this.dialog.open(DeleteDialogComponent, {
+    const deleteIdentifierDialogRef = this.dialog.open(DeleteDialogComponent, {
       data: { deleteContext: `identifier id:${identifierId}` }
     });
-    deleteFamilyMemberDialogRef.afterClosed().subscribe((response: any) => {
+    deleteIdentifierDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
         this.clientService.deleteClientIdentifier(clientId, identifierId).subscribe(res => {
           this.clientIdentities.splice(index, 1);
@@ -74,4 +139,5 @@ export class IdentitiesTabComponent implements OnInit {
       }
     });
   }
+
 }

src/app/clients/clients.service.ts

@@ -24,6 +24,7 @@ export class ClientsService {
   getClientTemplate(): Observable<any> {
     return this.http.get('/clients/template');
   }
+
   getClientData(clientId: string) {
     return this.http.get(`/clients/${clientId}`);
   }
@@ -32,6 +33,7 @@ export class ClientsService {
     const httpParams = new HttpParams().set('apptable', 'm_client');
     return this.http.get(`/datatables`, { params: httpParams });
   }
+
   getClientDatatable(clientId: string, datatableName: string) {
     const httpParams = new HttpParams().set('genericResultSet', 'true');
     return this.http.get(`/datatables/${datatableName}/${clientId}`, { params: httpParams });
@@ -81,6 +83,14 @@ export class ClientsService {
     return this.http.get(`/clients/${clientId}/identifiers`);
   }
 
+  getClientIdentifierTemplate(clientId: string) {
+    return this.http.get(`/clients/${clientId}/identifiers/template`);
+  }
+
+  addClientIdentifier(clientId: string, identifierData: any) {
+    return this.http.post(`/clients/${clientId}/identifiers`, identifierData);
+  }
+
   deleteClientIdentifier(clientId: string, identifierId: string) {
     return this.http.delete(`/clients/${clientId}/identifiers/${identifierId}`);
   }

src/app/clients/common-resolvers/client-identifier-template.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+
+/** Custom Services */
+import { ClientsService } from '../clients.service';
+
+/**
+ * Client Identifier Template resolver.
+ */
+@Injectable()
+export class ClientIdentifierTemplateResolver implements Resolve<Object> {
+    /**
+     * @param {ClientsService} ClientsService Clients service.
+     */
+    constructor(private clientsService: ClientsService) { }
+    /**
+     * Returns the Client Identities data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.paramMap.get('clientId');
+        return this.clientsService.getClientIdentifierTemplate(clientId);
+    }
+}
+

src/app/shared/form-dialog/form-dialog.component.html

@@ -10,5 +10,5 @@ <h1 mat-dialog-title>{{ data.title }}</h1>
 
 <mat-dialog-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button mat-dialog-close>{{ layout.cancelButtonText }}</button>
-  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: form }" [disabled]="!form.valid && form.pristine">{{ layout.addButtonText }}</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="{ data: form }" [disabled]="!form.valid || form.pristine">{{ layout.addButtonText }}</button>
 </mat-dialog-actions>