feat(client): Client documents and identifiers (#134)

* feat(client): Client documents and identifiers

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

@@ -7,6 +7,8 @@ import { CreateClientComponent} from './create-client/create-client.component';
 import { ViewClientComponent } from './view-client/view-client.component';
 import { ViewLoanComponent } from './view-loan/view-loan.component';
 import { CreateAddressComponent } from './create-address/create-address.component';
+import { CreateIdentityComponent } from './create-identity/create-identity.component';
+import { UploadDocumentComponent } from './upload-document/upload-document.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -34,7 +36,17 @@ const routes: Routes = [
       path: 'clients/address/:id',
       component: CreateAddressComponent,
       data: { title: extract('Create Address') }
-    }
+    },
+    {
+      path: 'clients/addclientidentifier/:id',
+      component: CreateIdentityComponent,
+      data: { title: extract('Create Identity') }
+    },
+    {
+      path: 'clients/addclientdocument/:id',
+      component: UploadDocumentComponent,
+      data: { title: extract('Create Identity') }
+    },
   ])
 ];
 

src/app/clients/clients.module.ts

@@ -15,8 +15,10 @@ import { CreateClientComponent} from './create-client/create-client.component';
 import { ViewClientComponent } from './view-client/view-client.component';
 import { ViewLoanComponent } from './view-loan/view-loan.component';
 import { CreateAddressComponent } from './create-address/create-address.component';
+import { CreateIdentityComponent } from './create-identity/create-identity.component';
 
 import { ClientsService } from './clients.service';
+import { UploadDocumentComponent } from './upload-document/upload-document.component';
 
 @NgModule({
   imports: [
@@ -36,7 +38,9 @@ import { ClientsService } from './clients.service';
     CreateClientComponent,
     ViewClientComponent,
     ViewLoanComponent,
-    CreateAddressComponent
+    CreateAddressComponent,
+    CreateIdentityComponent,
+    UploadDocumentComponent
 ],
   providers: [
     ClientsService,

src/app/clients/clients.service.ts

@@ -8,178 +8,298 @@ import { map } from 'rxjs/operators';
 
 @Injectable()
 export class ClientsService {
-    constructor(private http: Http) {} // tslint:disable-line
+  constructor(private http: Http) {} // tslint:disable-line
 
-    createAuthorizationHeader(headers: Headers) { // tslint:disable-line
+  createAuthorizationHeader(headers: Headers) { // tslint:disable-line
-      const username = 'mifos';
+    const username = 'mifos';
-      const password = 'password';
+    const password = 'password';
-      headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
+    headers.append('Authorization', 'Basic ' + btoa(username + ':' + password));
-      headers.append('Content-Type', 'application/json');
+    headers.append('Content-Type', 'application/json');
-      headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-      headers.append('Access-Control-Allow-Origin', '*');
+    headers.append('Access-Control-Allow-Origin', '*');
-    }
+  }
 
-   getClients() {
+  getClients() {
-    const headers = new Headers();   // tslint:disable-line
+    const headers = new Headers(); // tslint:disable-line
     this.createAuthorizationHeader(headers);
-    return this.http.get
+    return this.http.get(
-    ('https://demo.openmf.org/fineract-provider/api/v1/clients?tenantIdentifier=default&pretty=true',
+        'https://demo.openmf.org/fineract-provider/api/v1/clients?tenantIdentifier=default&pretty=true', {
-    {headers: headers})
+          headers: headers
-    .pipe(
+        })
-    map(
+      .pipe(
-        (response: Response) => {  // tslint:disable-line
+        map(
-          response = response.json();
+          (response: Response) => { // tslint:disable-line
-          return response['pageItems'];
+            response = response.json();
+            return response['pageItems'];
 
-        }
+          }
-    )
+        )
-  );
+      );
-}
+  }
   getClientId(clientId: number) {
-    const headers = new Headers();   // tslint:disable-line
+    const headers = new Headers(); // tslint:disable-line
     this.createAuthorizationHeader(headers);
-    return this.http.get
+    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-    ('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId
+        '?tenantIdentifier=default&pretty=true', {
-      + '?tenantIdentifier=default&pretty=true',
+          headers: headers
-    {headers: headers})
+        })
-    .pipe(
+      .pipe(
-    map(
+        map(
-        (response: Response) => {  // tslint:disable-line
+          (response: Response) => { // tslint:disable-line
-          response = response.json();
+            response = response.json();
-          return response;
+            return response;
 
-        }
+          }
-    )
+        )
-  );
+      );
   }
 
   getClientAccounts(clientId: number) {
-    const headers = new Headers();   // tslint:disable-line
+    const headers = new Headers(); // tslint:disable-line
     this.createAuthorizationHeader(headers);
-    return this.http.get
+    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-    ('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId
+        '/accounts' + '?tenantIdentifier=default&pretty=true', {
-      + '/accounts' + '?tenantIdentifier=default&pretty=true',
+          headers: headers
-    {headers: headers})
+        })
-    .pipe(
+      .pipe(
-    map(
+        map(
-        (response: Response) => {  // tslint:disable-line
+          (response: Response) => { // tslint:disable-line
-          response = response.json();
+            response = response.json();
-          return response;
+            return response;
 
-        }
+          }
-    )
+        )
-  );
+      );
   }
 
   getClientCharges(clientId: number) {
-    const headers = new Headers();   // tslint:disable-line
+    const headers = new Headers(); // tslint:disable-line
     this.createAuthorizationHeader(headers);
-    return this.http.get
+    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-    ('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId
+        '/charges' + '?tenantIdentifier=default&pretty=true', {
-      + '/charges' + '?tenantIdentifier=default&pretty=true',
+          headers: headers
-    {headers: headers})
+        })
-    .pipe(
+      .pipe(
-    map(
+        map(
-        (response: Response) => {  // tslint:disable-line
+          (response: Response) => { // tslint:disable-line
-          response = response.json();
+            response = response.json();
-          return response;
+            return response;
 
-        }
+          }
-    )
+        )
-  );
+      );
   }
 
-  getClientAddress (clientId: number) {
+  getClientAddress(clientId: number) {
-    const headers = new Headers();   // tslint:disable-line
+    const headers = new Headers(); // tslint:disable-line
     this.createAuthorizationHeader(headers);
-    return this.http.get
+    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/client/' + clientId +
-    ('https://demo.openmf.org/fineract-provider/api/v1/client/' + clientId
+        '/addresses' + '?tenantIdentifier=default&pretty=true', {
-      + '/addresses' + '?tenantIdentifier=default&pretty=true',
+          headers: headers
-    {headers: headers})
+        })
-    .pipe(
+      .pipe(
-    map(
+        map(
-        (response: Response) => {  // tslint:disable-line
+          (response: Response) => { // tslint:disable-line
-          response = response.json();
+            response = response.json();
-          return response;
+            return response;
 
-        }
+          }
-    )
+        )
-  );
+      );
   }
 
-  getClientNote (clientId: number) {
+  getClientNote(clientId: number) {
-    const headers = new Headers();   // tslint:disable-line
+    const headers = new Headers(); // tslint:disable-line
     this.createAuthorizationHeader(headers);
-    return this.http.get
+    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-    ('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId
+        '/notes' + '?tenantIdentifier=default&pretty=true', {
-      + '/notes' + '?tenantIdentifier=default&pretty=true',
+          headers: headers
-    {headers: headers})
+        })
-    .pipe(
+      .pipe(
-    map(
+        map(
-        (response: Response) => {  // tslint:disable-line
+          (response: Response) => { // tslint:disable-line
-          response = response.json();
+            response = response.json();
-          return response;
+            return response;
 
-        }
+          }
-    )
+        )
-  );
+      );
   }
 
-  postClientNote (clientId: number, notes: any) {
+  postClientNote(clientId: number, notes: any) {
-    const headers = new Headers();   // tslint:disable-line
+    const headers = new Headers(); // tslint:disable-line
     this.createAuthorizationHeader(headers);
     const body = JSON.stringify(notes);
-    return this.http.post
+    return this.http.post('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
-    ('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId
+        '/notes' + '?tenantIdentifier=default&pretty=true', notes, {
-      + '/notes' + '?tenantIdentifier=default&pretty=true', notes ,
+          headers: headers
-    {headers: headers})
+        })
-    .pipe(
+      .pipe(
-      map(
+        map(
-          (response: Response) => {  // tslint:disable-line
+          (response: Response) => { // tslint:disable-line
             response.json();
           }
-      )
+        )
-    );
+      );
   }
 
   getClientAddressTemplate() {
-    const headers = new Headers();   // tslint:disable-line
+    const headers = new Headers(); // tslint:disable-line
     this.createAuthorizationHeader(headers);
-    return this.http.get
+    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/client/' +
-    ('https://demo.openmf.org/fineract-provider/api/v1/client/'
+        'addresses/template?tenantIdentifier=default', {
-      + 'addresses/template?tenantIdentifier=default',
+          headers: headers
-    {headers: headers})
+        })
-    .pipe(
+      .pipe(
-    map(
+        map(
-        (response: Response) => {  // tslint:disable-line
+          (response: Response) => { // tslint:disable-line
-          response = response.json();
+            response = response.json();
-          return response;
+            return response;
 
-        }
+          }
-    )
+        )
-  );
+      );
   }
 
-  postClientAddress (clientId: number, body: any, type: any) {
+  postClientAddress(clientId: number, body: any, type: any) {
-    const headers = new Headers();   // tslint:disable-line
+    const headers = new Headers(); // tslint:disable-line
     const params = new URLSearchParams(); // tslint:disable-line
     params.set('type', type);
     this.createAuthorizationHeader(headers);
     body = JSON.stringify(body);
-      const options = new RequestOptions({ // tslint:disable-line
+    const options = new RequestOptions({ // tslint:disable-line
-       headers: headers,
+      headers: headers,
-       params: params,
+      params: params,
     });
-    return this.http.post
+    return this.http.post('https://demo.openmf.org/fineract-provider/api/v1/client/' + clientId +
-    ('https://demo.openmf.org/fineract-provider/api/v1/client/' + clientId
+        '/addresses?' + '&tenantIdentifier=default&pretty=true', body,
-      + '/addresses?' + '&tenantIdentifier=default&pretty=true', body ,
+        options)
-    options)
+      .pipe(
-    .pipe(
+        map(
-      map(
+          (response: Response) => { // tslint:disable-line
-          (response: Response) => {  // tslint:disable-line
             response.json();
           }
-      )
+        )
-    );
+      );
+  }
+
+  getClientIdentifierTemplate(clientId: number) {
+    const headers = new Headers(); // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
+        '/identifiers/template?tenantIdentifier=default', {
+          headers: headers
+        })
+      .pipe(
+        map(
+          (response: Response) => { // tslint:disable-line
+            response = response.json();
+            return response['allowedDocumentTypes'];
+
+          }
+        )
+      );
+  }
+
+  getClientIdentifiers(clientId: number) {
+    const headers = new Headers(); // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
+        '/identifiers/?tenantIdentifier=default', {
+          headers: headers
+        })
+      .pipe(
+        map(
+          (response: Response) => { // tslint:disable-line
+            response = response.json();
+            return response;
+
+          }
+        )
+      );
+  }
+
+  postClientIdentifier(clientId: number, body: any) {
+    const headers = new Headers(); // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    return this.http.post('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
+        '/identifiers/?tenantIdentifier=default', body, {
+          headers: headers
+        })
+      .pipe(
+        map(
+          (response: Response) => { // tslint:disable-line
+            response.json();
+          }
+        )
+      );
+  }
+
+  deleteClientIdentifier(clientId: number, identifierId: number) {
+    const headers = new Headers(); // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    return this.http.delete('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
+        '/identifiers/' + identifierId + '/?tenantIdentifier=default', {
+          headers: headers
+        })
+      .pipe(
+        map(
+          (response: Response) => { // tslint:disable-line
+            response.json();
+          }
+        )
+      );
+  }
+  postClientDocument(clientId: number, body: any) {
+    const headers = new Headers(); // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    headers.append('Content-Type', null);
+    headers.append('Accept', 'multipart/form-data');
+    body = JSON.stringify(body);
+
+    return this.http.post('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
+        '/documents/?tenantIdentifier=default', body, {
+          headers: headers
+        })
+      .pipe(
+        map(
+          (response: Response) => { // tslint:disable-line
+            response.json();
+          }
+        )
+      );
+  }
+
+  getClientDocuments(clientId: number) {
+    const headers = new Headers(); // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    return this.http.get('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
+        '/documents/?tenantIdentifier=default', {
+          headers: headers
+        })
+      .pipe(
+        map(
+          (response: Response) => { // tslint:disable-line
+            return response.json();
+          }
+        )
+      );
+  }
+
+  deleteClientDocuments(clientId: number, documentId: number) {
+    const headers = new Headers(); // tslint:disable-line
+    this.createAuthorizationHeader(headers);
+    return this.http.delete('https://demo.openmf.org/fineract-provider/api/v1/clients/' + clientId +
+        '/documents/' + documentId + '/?tenantIdentifier=default', {
+          headers: headers
+        })
+      .pipe(
+        map(
+          (response: Response) => { // tslint:disable-line
+            response.json();
+          }
+        )
+      );
   }
 }
+

src/app/clients/create-identity/create-identity.component.html

@@ -0,0 +1,53 @@
+<div class="container m-t-40 m-b-40">
+
+    <aw-wizard class="m-t-10" #wizard [navBarLayout]="'large-empty-symbols'">
+      <aw-wizard-step stepTitle="Address" [navigationSymbol]="{ symbol: '1' }">
+  
+        <!--         [(ngModel)]="item.id" [ngModelOptions]="{standalone: true}" ngDefaultControl
+   -->
+        <div fxLayoutAlign="center">
+          <mat-card class="example-card">
+            <mat-card-header>
+            </mat-card-header>
+            <mat-card-content>
+              <form class="example-form" (ngSubmit)="onSubmit()" #f="ngForm">
+                <mat-form-field class="example-full-width">
+                  <mat-select placeholder="Document Type" [(ngModel)]="document" [ngModelOptions]="{standalone: true}" ngDefaultControl>
+                    <div>
+  
+                      <mat-option *ngFor="let item of clientIdentifierDocument" name="option" [value]="item?.id">{{item?.name}}</mat-option>
+                    </div>
+                  </mat-select>
+                </mat-form-field>
+                <mat-form-field class="example-full-width">
+                    <mat-select placeholder="Status" [(ngModel)]="status" [ngModelOptions]="{standalone: true}" ngDefaultControl>
+                      <div>
+    
+                        <mat-option *ngFor="let item of statusTypes" name="option" [value]="item?.label">{{item?.label}}</mat-option>
+                      </div>
+                    </mat-select>
+                  </mat-form-field>
+  
+                <mat-form-field class="example-full-width">
+                  <input matInput name="uniqueid" placeholder="Unique ID #" ngModel>
+                </mat-form-field>
+                <mat-form-field class="example-full-width">
+                  <input matInput name="description" placeholder="Description" ngModel>
+                </mat-form-field>
+  
+  
+                <button mat-raised-button>Create</button>
+  
+              </form>
+  
+            </mat-card-content>
+          </mat-card>
+  
+  
+        </div>
+  
+  
+      </aw-wizard-step>
+    </aw-wizard>
+  </div>
+  

src/app/clients/create-identity/create-identity.component.scss

@@ -0,0 +1,17 @@
+ 
+  
+  .example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  
+  .example-full-width {
+    width: 100%;
+    padding:5px 3px;
+  }
+  
+  .mat-raised-button{
+    margin-left:10px;
+    margin-top:10px;
+  }

src/app/clients/create-identity/create-identity.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { CreateIdentityComponent } from './create-identity.component';
+
+describe('CreateIdentityComponent', () => {
+  let component: CreateIdentityComponent;
+  let fixture: ComponentFixture<CreateIdentityComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateIdentityComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateIdentityComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/clients/create-identity/create-identity.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit, ViewEncapsulation, ViewChild  } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { ClientsService } from 'app/clients/clients.service';
+@Component({
+  selector: 'mifosx-app-create-identity',
+  templateUrl: './create-identity.component.html',
+  styleUrls: ['./create-identity.component.scss']
+})
+export class CreateIdentityComponent implements OnInit {
+  id: number = undefined;
+  paramsSubscription: Subscription;
+  clientIdentifierDocument: any = undefined;
+  document: any = undefined;
+  status: any = undefined;
+  value: any = undefined;
+  mymodel: any = undefined;
+  addressTypeId: any = undefined;
+  addressStateId: any = undefined;
+  addressCountryId: any = undefined;
+
+  identifier: any = undefined;
+  statusTypes = [{
+    id: 1,
+    label: 'Active'
+  }, {
+    id: 2,
+    label: 'Inactive',
+}];
+  constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
+
+  @ViewChild('f') identifierForm: NgForm;
+
+
+  ngOnInit() {
+    this.paramsSubscription = this.route.params
+      .subscribe(
+        (params: Params) => {
+          this.id = params['id'];
+        }
+      );
+    console.log(this.id);
+    this.getClientIdentifierTemplate(this.id);
+  }
+
+  getClientIdentifierTemplate(id: any) {
+    this.clientService.getClientIdentifierTemplate(id)
+      .subscribe(
+        (res => {
+          this.clientIdentifierDocument = res;
+          console.log(res);
+        })
+      );
+  }
+
+  onSubmit() {
+    this.identifier = {};
+    this.identifier.description = this.identifierForm.value.description;
+    this.identifier.documentKey = this.identifierForm.value.uniqueid;
+    this.identifier.documentTypeId = this.document;
+    this.identifier.status = this.status;
+
+
+    this.clientService.postClientIdentifier(this.id, this.identifier)
+      .subscribe(
+        (res => {
+          return true;
+        })
+      );
+    this.identifierForm.reset();
+  }
+
+}

src/app/clients/upload-document/upload-document.component.html

@@ -0,0 +1,43 @@
+<div class="container m-t-40 m-b-40">
+
+  <aw-wizard class="m-t-10" #wizard [navBarLayout]="'large-empty-symbols'">
+    <aw-wizard-step stepTitle="Document" [navigationSymbol]="{ symbol: '1' }">
+
+      <!--         [(ngModel)]="item.id" [ngModelOptions]="{standalone: true}" ngDefaultControl
+   -->
+      <div fxLayoutAlign="center">
+        <mat-card class="example-card">
+          <mat-card-header>
+          </mat-card-header>
+          <mat-card-content>
+            <form class="example-form" (ngSubmit)="onSubmit()" #f="ngForm">
+              <mat-form-field class="example-full-width">
+                <input matInput name="name" placeholder="Name" ngModel>
+              </mat-form-field>
+
+              <mat-form-field class="example-full-width">
+                <input matInput name="description" placeholder="Description" ngModel>
+              </mat-form-field>
+
+              <div class="example-full-width">
+                <input type="file" #inputFile (change)="onFileSelected($event)" [style.display]="'none'" />
+
+                <button mat-button (click)="inputFile.click()">Import file</button> {{ inputFile.value }}
+              </div>
+
+
+              <button mat-raised-button>Create</button>
+
+            </form>
+
+          </mat-card-content>
+        </mat-card>
+
+
+      </div>
+
+
+    </aw-wizard-step>
+  </aw-wizard>
+</div>
+

src/app/clients/upload-document/upload-document.component.scss

@@ -0,0 +1,17 @@
+ 
+  
+  .example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  
+  .example-full-width {
+    width: 100%;
+    padding:5px 3px;
+  }
+  
+  .mat-raised-button{
+    margin-left:10px;
+    margin-top:10px;
+  }

src/app/clients/upload-document/upload-document.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { UploadDocumentComponent } from './upload-document.component';
+
+describe('UploadDocumentComponent', () => {
+  let component: UploadDocumentComponent;
+  let fixture: ComponentFixture<UploadDocumentComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UploadDocumentComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UploadDocumentComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/clients/upload-document/upload-document.component.ts

@@ -0,0 +1,62 @@
+import { Component, OnInit, ViewEncapsulation, ViewChild  } from '@angular/core';
+import { ActivatedRoute, Params } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { NgForm } from '@angular/forms';
+import { Router } from '@angular/router';
+
+import { ClientsService } from 'app/clients/clients.service';
+
+@Component({
+  selector: 'mifosx-app-upload-document',
+  templateUrl: './upload-document.component.html',
+  styleUrls: ['./upload-document.component.scss']
+})
+export class UploadDocumentComponent implements OnInit {
+
+  id: number = undefined;
+  paramsSubscription: Subscription;
+
+  document: any = undefined;
+
+
+  filename: any = undefined;
+  constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
+
+  @ViewChild('f') documentForm: NgForm;
+
+
+  ngOnInit() {
+    this.paramsSubscription = this.route.params
+      .subscribe(
+        (params: Params) => {
+          this.id = params['id'];
+        }
+      );
+    console.log(this.id);
+    // this.getClientIdentifierTemplate(this.id);
+  }
+
+
+
+  onFileSelected($event: any) {
+    this.filename = $event.target.files[0].name;
+    console.log(this.filename);
+  }
+
+  onSubmit() {
+    this.document = {};
+    this.document.description = this.documentForm.value.description;
+    this.document.name = this.documentForm.value.name;
+    this.document.filename = this.filename;
+    console.log(this.filename);
+
+    this.clientService.postClientDocument(this.id, this.document)
+      .subscribe(
+        (res => {
+          return true;
+        })
+      );
+    this.documentForm.reset();
+  }
+}
+

src/app/clients/view-client/view-client.component.html

@@ -294,8 +294,98 @@
       </div>
 
     </mat-tab>
-    <mat-tab label="Second"> Content 2 </mat-tab>
+    <mat-tab label="Identities">
-    <mat-tab label="Third"> Content 3 </mat-tab>
+
+
+      <div class="m-l-10 m-b-30 m-t-30">
+        <button mat-raised-button [routerLink]="['/clients/addclientidentifier', id]" routerLinkActive="active">Create Identity</button>
+      </div>
+      <div class="mat-elevation-z8 m-b-55">
+        <table mat-table [dataSource]="dataSourceIdentifiers" matSort>
+
+          <!-- Name Column -->
+          <ng-container matColumnDef="id">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header='id'> ID </th>
+            <td mat-cell *matCellDef="let row"> {{row.id}} </td>
+          </ng-container>
+
+          <!-- Account no Column -->
+          <ng-container matColumnDef="description">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header='description'> Description </th>
+            <td mat-cell *matCellDef="let row"> {{row.description}} </td>
+          </ng-container>
+
+          <!-- External ID Column -->
+          <ng-container matColumnDef="type">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header='type'> Type </th>
+            <td mat-cell *matCellDef="let row"> {{row.documentType.name}} </td>
+          </ng-container>
+
+
+
+          <!-- Status Column -->
+          <ng-container matColumnDef="status">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header='status'> Status </th>
+            <td mat-cell *matCellDef="let row"> {{row.status}} </td>
+          </ng-container>
+
+
+          <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef> Actions </th>
+            <td mat-cell *matCellDef="let row">
+              <i class="fa fa-times" (click)="$event.stopPropagation(); deleteClientIdentifier(id, row.id)"></i>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="displayedIdentifierColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedIdentifierColumns;" [routerLink]="[]">
+
+          </tr>
+        </table>
+      </div>
+    </mat-tab>
+
+    <mat-tab label="Documents">
+      <div class="m-l-10 m-b-30 m-t-30">
+        <button mat-raised-button [routerLink]="['/clients/addclientdocument', id]" routerLinkActive="active">Create Identity</button>
+      </div>
+      <div class="mat-elevation-z8 m-b-55">
+        <table mat-table [dataSource]="dataSourceDocuments" matSort>
+
+
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header='name'> Name </th>
+            <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+          </ng-container>
+
+
+          <ng-container matColumnDef="description">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header='description'> Description </th>
+            <td mat-cell *matCellDef="let row"> {{row.description}} </td>
+          </ng-container>
+
+
+          <ng-container matColumnDef="filename">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header='type'> Type </th>
+            <td mat-cell *matCellDef="let row"> {{row.fileName}} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="actions">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header='actions'> Actions </th>
+            <td mat-cell *matCellDef="let row">
+              <i class="fa fa-times" (click)="$event.stopPropagation(); deleteClientDocuments(id, row.id)"></i>
+            </td>
+          </ng-container>
+
+
+
+          <tr mat-header-row *matHeaderRowDef="displayedDocumentColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedDocumentColumns;" [routerLink]="[]">
+
+          </tr>
+        </table>
+      </div>
+    </mat-tab>
 
   </mat-tab-group>
 

src/app/clients/view-client/view-client.component.scss

@@ -63,6 +63,7 @@ th {
   background-color: #fafafa;
 }
 
+// css horizontal table with responsiveness
 .custom-table {
   table {
     width: 100%;
@@ -125,3 +126,57 @@ th {
     }
   }
 }
+
+// css vertical table with responsiveness
+.document-table {
+  table {
+    border: 1px solid #ccc;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  table tr {
+    border: 1px solid #ddd;
+    padding: 5px;
+  }
+  table th,
+  table td {
+    padding: 10px;
+    text-align: center;
+  }
+  table th {
+    text-transform: uppercase;
+    font-size: 14px;
+    letter-spacing: 1px;
+  }
+  @media screen and (max-width: 600px) {
+    table {
+      border: 0;
+    }
+    table thead {
+      display: none;
+    }
+    table tr {
+      margin-bottom: 10px;
+      display: block;
+      border-bottom: 2px solid #ddd;
+    }
+    table td {
+      display: block;
+      text-align: right;
+      font-size: 13px;
+      border-bottom: 1px dotted #ccc;
+    }
+    table td:last-child {
+      border-bottom: 0;
+    }
+    table td:before {
+      content: attr(data-label);
+      float: left;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+  }
+}

src/app/clients/view-client/view-client.component.ts

@@ -24,16 +24,22 @@ export class ViewClientComponent implements OnInit, OnDestroy {
   post: any = [];
   clientAddress: any = undefined;
   allNotes: any = undefined;
+  clientIdentifiers: any = undefined;
+  clientDocuments: any = undefined;
   private LOAN_DATA: any = undefined;
   private SAVINGS_DATA: any = undefined;
   private SHARES_DATA: any = undefined;
   displayedLoanColumns = ['account', 'loanAccount', 'originalLoan', 'loanBalance', 'amountPaid', 'type'];
   displayedSavingsColumns = ['account', 'savingsAccount', 'lastActive', 'balance'];
   displayedSharesColumns = ['account', 'shareAccount', 'approvedShares', 'pending'];
+  displayedIdentifierColumns = ['id', 'description', 'type', 'status', 'actions'];
+  displayedDocumentColumns = ['name', 'description', 'filename', 'actions'];
 
   dataSourceLoan = new MatTableDataSource([]);
   dataSourceSavings = new MatTableDataSource([]);
   dataSourceShares = new MatTableDataSource([]);
+  dataSourceIdentifiers = new MatTableDataSource([]);
+  dataSourceDocuments = new MatTableDataSource([]);
 
   @ViewChild('f') noteForm: NgForm;
   @ViewChild(MatPaginator) paginator: MatPaginator;
@@ -54,6 +60,9 @@ export class ViewClientComponent implements OnInit, OnDestroy {
     this.getClientCharges(this.id);
     this.getClientAddress(this.id);
     this.getClientNotes(this.id);
+    this.getClientIdentifier(this.id);
+    this.getClientDocuments(this.id);
+    // this.deleteClientDocuments(this.id, this.docId);
   }
 
   getClientId(id: any) {
@@ -112,7 +121,6 @@ export class ViewClientComponent implements OnInit, OnDestroy {
       .subscribe(
         (res => {
           this.clientAddress = res;
-          console.log(res);
         })
       );
   }
@@ -122,18 +130,46 @@ export class ViewClientComponent implements OnInit, OnDestroy {
       .subscribe(
         (res => {
           this.allNotes = res;
-          console.log(res);
         })
       );
   }
 
+  getClientIdentifier(id: any) {
+    this.clientService.getClientIdentifiers(id)
+      .subscribe(
+        (res => {
+          this.clientIdentifiers = res;
+          this.clientIdentifiers.forEach(function (item: any) {
+            item.status = item.status.split('.')[1];
+            console.log(item.status);
+          });
 
+          // this.clientIdentifiers.status = this.clientIdentifiers.status.split('.')[1];
+          this.dataSourceIdentifiers = new MatTableDataSource(this.clientIdentifiers);
+          this.dataSourceIdentifiers.paginator = this.paginator;
+          this.dataSourceIdentifiers.sort = this.sort;
+        })
+      );
+  }
+
+  getClientDocuments(id: any) {
+    this.clientService.getClientDocuments(id)
+      .subscribe(
+        (res => {
+          this.clientDocuments = res;
+          this.dataSourceDocuments = new MatTableDataSource(res);
+          this.dataSourceDocuments.paginator = this.paginator;
+          this.dataSourceDocuments.sort = this.sort;
+        })
+      );
+
+  }
   onSubmit() {
     //  this.submitted = true;
     this.notes = {};
-  //  const d = new Date();
+    //  const d = new Date();
     this.notes.note = this.noteForm.value.clientnotes;
-   // this.notes.createdOn =  d;
+    // this.notes.createdOn =  d;
     console.log(this.notes);
     this.clientService.postClientNote(this.id, this.notes)
       .subscribe(
@@ -146,9 +182,30 @@ export class ViewClientComponent implements OnInit, OnDestroy {
 
   }
 
+  deleteClientIdentifier(id: number, identifierId: number) {
+    this.clientService.deleteClientIdentifier(id, identifierId)
+      .subscribe(
+        (res => {
+          this.getClientIdentifier(this.id);
+          return true;
+        })
+      );
+  }
+  deleteClientDocuments(id: number, docId: number) {
+    console.log(docId);
+    this.clientService.deleteClientDocuments(id, docId)
+      .subscribe(
+        (res => {
+          this.getClientDocuments(this.id);
+          return true;
+        })
+      );
+  }
+
   ngOnDestroy() {
     this.paramsSubscription.unsubscribe();
   }
 
 }
 
+

src/main.scss

@@ -6,8 +6,11 @@
 // Import Default Theme for MifosX
 @import "theme/custom/denim-yellowgreen";
 
-// 3rd party libraries
-
 // Global Imports
 /* You can add global styles to this file, and also import other style files */
 @import "assets/styles/helper";
+
+
+// 3rd party libraries
+$fa-font-path: "../node_modules/font-awesome/fonts";
+@import "../node_modules/font-awesome/scss/font-awesome.scss";