feat(client): edit address form (#146)

* feat(client): edit address form

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

@@ -9,6 +9,7 @@ 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';
+import { EditAddressComponent } from './edit-address/edit-address.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -37,6 +38,11 @@ const routes: Routes = [
       component: CreateAddressComponent,
       data: { title: extract('Create Address') }
     },
+    {
+      path: 'clients/editaddress/:id/:addressTypeId/:addressId',
+      component: EditAddressComponent,
+      data: { title: extract('Edit Address') }
+    },
     {
       path: 'clients/addclientidentifier/:id',
       component: CreateIdentityComponent,

src/app/clients/clients.module.ts

@@ -19,6 +19,7 @@ import { CreateIdentityComponent } from './create-identity/create-identity.compo
 
 import { ClientsService } from './clients.service';
 import { UploadDocumentComponent } from './upload-document/upload-document.component';
+import { EditAddressComponent } from './edit-address/edit-address.component';
 
 @NgModule({
   imports: [
@@ -40,7 +41,8 @@ import { UploadDocumentComponent } from './upload-document/upload-document.compo
     ViewLoanComponent,
     CreateAddressComponent,
     CreateIdentityComponent,
-    UploadDocumentComponent
+    UploadDocumentComponent,
+    EditAddressComponent
 ],
   providers: [
     ClientsService,

src/app/clients/clients.service.ts

@@ -183,6 +183,28 @@ export class ClientsService {
       );
   }
 
+  putClientAddress(clientId: number, body: any, type: any) {
+    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
+      headers: headers,
+      params: params,
+    });
+    return this.http.put('https://demo.openmf.org/fineract-provider/api/v1/client/' + clientId +
+        '/addresses?' + 'tenantIdentifier=default', body,
+        options)
+      .pipe(
+        map(
+          (response: Response) => { // tslint:disable-line
+            response.json();
+          }
+        )
+      );
+  }
+
   getClientIdentifierTemplate(clientId: number) {
     const headers = new Headers(); // tslint:disable-line
     this.createAuthorizationHeader(headers);
@@ -301,5 +323,25 @@ export class ClientsService {
         )
       );
   }
+
+  downloadClientDocuments(clientId: number, documentId: 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/' + documentId + '/attachment/?tenantIdentifier=default', {
+          headers: headers
+        })
+      .pipe(
+        map(
+          (response: Response) => { // tslint:disable-line
+            return response.json();
+          }
+        )
+      );
+  }
+
+
+
+
 }
 

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

@@ -3,8 +3,6 @@
   <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>

src/app/clients/edit-address/edit-address.component.html

@@ -0,0 +1,64 @@
+<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' }">
+
+      <div fxLayoutAlign="center">
+        <mat-card class="example-card">
+          <mat-card-header>
+          </mat-card-header>
+          <mat-card-content>
+            <form class="example-form" *ngIf="form" (ngSubmit)="onSubmit()" #f="ngForm">
+
+
+              <mat-form-field class="example-full-width">
+                <input matInput name="street" placeholder="Street" [(ngModel)]="form.street">
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <input matInput name="addressLine1" placeholder="Address Line 1" [(ngModel)]="form.addressLine1">
+              </mat-form-field>
+
+
+              <mat-form-field class="example-full-width">
+                <input matInput name="addressLine2" placeholder="Address Line 2" [(ngModel)]="form.addressLine2">
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <input matInput name="addressLine3" placeholder="Address Line 3" [(ngModel)]="form.addressLine3">
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <input matInput name="city" placeholder="City" [(ngModel)]="form.city">
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <mat-select placeholder="State" [(ngModel)]="form.stateProvinceId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
+                  <div>
+
+                    <mat-option *ngFor="let item of clientAddress?.stateProvinceIdOptions" 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="Country" [(ngModel)]="form.countryId" [ngModelOptions]="{standalone: true}" ngDefaultControl>
+                  <div>
+
+                    <mat-option *ngFor="let item of clientAddress?.countryIdOptions" name="option" [value]="item?.id">{{item?.name}}</mat-option>
+                  </div>
+                </mat-select>
+              </mat-form-field>
+              <mat-form-field class="example-full-width">
+                <input matInput name="postalCode" placeholder="Postal Code" [(ngModel)]="form.postalCode">
+              </mat-form-field>
+
+              <button mat-raised-button>Update</button>
+
+            </form>
+
+          </mat-card-content>
+        </mat-card>
+
+
+      </div>
+
+
+    </aw-wizard-step>
+  </aw-wizard>
+</div>

src/app/clients/edit-address/edit-address.component.scss

@@ -0,0 +1,13 @@
+.example-card {
+    width: 500px;
+  } 
+  
+  .example-form {
+    min-width: 150px;
+    max-width: 500px;
+    width: 100%;
+  }
+  
+  .example-full-width {
+    width: 100%;
+  }

src/app/clients/edit-address/edit-address.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 { EditAddressComponent } from './edit-address.component';
+
+describe('EditAddressComponent', () => {
+  let component: EditAddressComponent;
+  let fixture: ComponentFixture<EditAddressComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditAddressComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditAddressComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/clients/edit-address/edit-address.component.ts

@@ -0,0 +1,108 @@
+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 { FormControl } from '@angular/forms';
+import { ClientsService } from 'app/clients/clients.service';
+
+@Component({
+  selector: 'mifosx-app-edit-address',
+  templateUrl: './edit-address.component.html',
+  styleUrls: ['./edit-address.component.scss']
+})
+export class EditAddressComponent implements OnInit {
+
+  id: number = undefined;
+  paramsSubscription: Subscription;
+  clientAddress: any = undefined;
+  clientAddressK: any = undefined;
+  value: any = undefined;
+  mymodel: any = undefined;
+  addressTypeId: number = undefined;
+  addressId: number = undefined;
+  addressStateId: any = undefined;
+  addressCountryId: any = undefined;
+  random: any = undefined;
+
+  address: any = undefined;
+
+  form: any = undefined;
+
+  constructor(private route: ActivatedRoute, private clientService: ClientsService) {}
+
+  @ViewChild('f') addressForm: NgForm;
+
+
+  ngOnInit() {
+    this.paramsSubscription = this.route.params
+      .subscribe(
+        (params: Params) => {
+          this.id = params['id'];
+          this.addressTypeId = +params['addressTypeId'];
+          this.addressId = +params['addressId'];
+
+          console.log(this.addressId);
+          console.log(this.addressTypeId);
+        }
+      );
+    this.getClientAddressTemplate();
+    this.getClientAddress(this.id, this.addressId);
+  }
+
+  getClientAddressTemplate() {
+    this.clientService.getClientAddressTemplate()
+      .subscribe(
+        (res => {
+          this.clientAddress = res;
+          //  console.log(res);
+        })
+      );
+  }
+
+  getClientAddress(id: any, addressId: any) {
+    this.clientService.getClientAddress(id)
+      .subscribe(
+        (res => {
+          this.form = {};
+          this.clientAddressK = res;
+          this.clientAddressK.forEach((item: any) => {
+            if (item.addressId === addressId) {
+              this.form.street = item.street;
+              this.form.addressLine1 = item.addressLine1;
+              this.form.addressLine2 = item.addressLine2;
+              this.form.addressLine3 = item.addressLine3;
+              this.form.city = item.city;
+              this.form.stateProvinceId = item.stateProvinceId;
+              this.form.countryId = item.countryId;
+              this.form.postalCode = item.postalCode;
+            }
+          });
+        })
+      );
+  }
+
+  onSubmit() {
+    this.address = {};
+    this.address.addressId = this.addressId;
+    this.address.street = this.form.street;
+    this.address.addressLine1 = this.form.addressLine1;
+    this.address.addressLine2 = this.form.addressLine2;
+    this.address.addressLine3 = this.form.addressLine3;
+    this.address.city = this.form.city;
+    this.address.stateProvinceId = this.form.stateProvinceId;
+    this.address.countryId = this.form.countryId;
+    this.address.postalCode = this.form.postalCode;
+    this.address.locale = 'en';
+
+    console.log(this.address);
+
+    this.clientService.putClientAddress(this.id, this.address, this.addressTypeId)
+      .subscribe(
+        (res => {
+          return true;
+        })
+      );
+  }
+}
+

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

@@ -0,0 +1,8 @@
+<h2 mat-dialog-title>Install Angular</h2>
+<mat-dialog-content>
+  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>Cancel</button>
+  <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Install</button>
+</mat-dialog-actions>

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

@@ -264,7 +264,7 @@
               </div>
             </mat-card-content>
             <mat-card-actions>
-              <button mat-button>EDIT</button>
+              <button mat-button  [routerLink]="['/clients/editaddress', id, item.addressTypeId, item.addressId]" routerLinkActive="active">EDIT</button>
               <button mat-button>ENABLE</button>
             </mat-card-actions>
           </mat-card>
@@ -373,7 +373,9 @@
           <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>
+              <i class="fa fa-cloud-download"></i>
+              <!-- <i class="p-l-5 fa fa-eye"></i> -->
+              <i class="p-l-5 fa fa-times" (click)="$event.stopPropagation(); deleteClientDocuments(id, row.id)"></i>              
             </td>
           </ng-container>
 

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

@@ -3,7 +3,7 @@ import { Component, OnInit, OnDestroy, ViewEncapsulation, ViewChild } from '@ang
 import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatPaginator, MatSort, MatTableDataSource, MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 import { NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
 @Component({
@@ -26,6 +26,7 @@ export class ViewClientComponent implements OnInit, OnDestroy {
   allNotes: any = undefined;
   clientIdentifiers: any = undefined;
   clientDocuments: any = undefined;
+  docId: any = undefined;
   private LOAN_DATA: any = undefined;
   private SAVINGS_DATA: any = undefined;
   private SHARES_DATA: any = undefined;
@@ -45,7 +46,8 @@ export class ViewClientComponent implements OnInit, OnDestroy {
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private route: ActivatedRoute, private clientService: ClientsService, private router: Router) {}
+  constructor(private route: ActivatedRoute, private clientService: ClientsService,
+              private router: Router, public dialog: MatDialog) {}
 
   ngOnInit() {
     this.paramsSubscription = this.route.params
@@ -62,7 +64,6 @@ export class ViewClientComponent implements OnInit, OnDestroy {
     this.getClientNotes(this.id);
     this.getClientIdentifier(this.id);
     this.getClientDocuments(this.id);
-    // this.deleteClientDocuments(this.id, this.docId);
   }
 
   getClientId(id: any) {
@@ -141,10 +142,8 @@ export class ViewClientComponent implements OnInit, OnDestroy {
           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;
@@ -157,6 +156,7 @@ export class ViewClientComponent implements OnInit, OnDestroy {
       .subscribe(
         (res => {
           this.clientDocuments = res;
+          this.docId = res.id;
           this.dataSourceDocuments = new MatTableDataSource(res);
           this.dataSourceDocuments.paginator = this.paginator;
           this.dataSourceDocuments.sort = this.sort;
@@ -202,6 +202,16 @@ export class ViewClientComponent implements OnInit, OnDestroy {
       );
   }
 
+/*   openDialog() {
+    const dialogRef = this.dialog.open(ViewClientDialogComponent, {
+      height: '350px'
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(`Dialog result: ${result}`);
+    });
+  }
+ */
   ngOnDestroy() {
     this.paramsSubscription.unsubscribe();
   }
@@ -209,3 +219,41 @@ export class ViewClientComponent implements OnInit, OnDestroy {
 }
 
 
+/*
+@Component({
+  selector: 'mifosx-view-client-component-dialog',
+  templateUrl: 'view-client-component-dialog.html',
+})
+export class ViewClientDialogComponent implements OnInit, OnDestroy {
+
+  paramsSubscription: Subscription;
+  id: any = undefined;
+  clientDocuments: any = undefined;
+  constructor(private route: ActivatedRoute, private clientService: ClientsService,
+    private router: Router, public dialog: MatDialog) {}
+
+  ngOnInit() {
+    this.paramsSubscription = this.route.params
+      .subscribe(
+        (params: Params) => {
+          this.id = params['id'];
+        }
+      );
+      this.getClientDocuments(this.id);
+    }
+
+    getClientDocuments(id: any) {
+      this.clientService.getClientDocuments(id)
+        .subscribe(
+          (res => {
+            this.clientDocuments = res;
+          })
+        );
+    }
+
+    ngOnDestroy() {
+      this.paramsSubscription.unsubscribe();
+    }
+
+}
+ */