From d287dd60c07d5a73f369daab6ce9c527f4670cae Mon Sep 17 00:00:00 2001 From: Anwesh Nayak Date: Fri, 29 Jun 2018 04:29:54 +0530 Subject: [PATCH] feat: view clients layout added (#76) * Fetch all clients from mifos api --- package-lock.json | 87 +------ package.json | 1 - src/app/clients/clients.component.html | 85 +++++-- src/app/clients/clients.component.scss | 4 +- src/app/clients/clients.component.ts | 58 ++--- src/app/clients/clients.module.ts | 23 +- src/app/clients/clients.service.ts | 33 +++ .../create-client.component.html | 234 ++++++++++++++++++ .../create-client/create-client.component.ts | 14 +- 9 files changed, 379 insertions(+), 160 deletions(-) create mode 100644 src/app/clients/clients.service.ts diff --git a/package-lock.json b/package-lock.json index 5c65776ff..8e9242e1b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4475,18 +4475,6 @@ } } }, - "extract-zip": { - "version": "1.6.7", - "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-1.6.7.tgz", - "integrity": "sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=", - "dev": true, - "requires": { - "concat-stream": "1.6.2", - "debug": "2.6.9", - "mkdirp": "0.5.1", - "yauzl": "2.4.1" - } - }, "extsprintf": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", @@ -4540,15 +4528,6 @@ "websocket-driver": "0.7.0" } }, - "fd-slicer": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.0.1.tgz", - "integrity": "sha1-i1vL2ewyfFBBv5qwI/1nUPEXfmU=", - "dev": true, - "requires": { - "pend": "1.2.0" - } - }, "file-entry-cache": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-2.0.0.tgz", @@ -9228,12 +9207,6 @@ "sha.js": "2.4.11" } }, - "pend": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz", - "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=", - "dev": true - }, "performance-now": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", @@ -9604,12 +9577,6 @@ "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==", "dev": true }, - "progress": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.0.tgz", - "integrity": "sha1-ihvjZr+Pwj2yvSPxDG/pILQ4nR8=", - "dev": true - }, "promise": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", @@ -9809,7 +9776,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz", "integrity": "sha1-M8UDmPcOp+uW0h97gXYwpVeRx+4=", - "dev": true + "dev": true, + "optional": true }, "prr": { "version": "1.0.1", @@ -10002,48 +9970,6 @@ "integrity": "sha1-X4Y+3Im5bbCQdLrXlHvwkFbKTn0=", "dev": true }, - "puppeteer": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/puppeteer/-/puppeteer-1.5.0.tgz", - "integrity": "sha512-eELwFtFxL+uhmg4jPZOZXzSrPEYy4CaYQNbcchBbfxY+KjMpnv6XGf/aYWaQG49OTpfi2/DMziXtDM8XuJgoUA==", - "dev": true, - "requires": { - "debug": "3.1.0", - "extract-zip": "1.6.7", - "https-proxy-agent": "2.2.1", - "mime": "2.3.1", - "progress": "2.0.0", - "proxy-from-env": "1.0.0", - "rimraf": "2.6.2", - "ws": "5.2.0" - }, - "dependencies": { - "debug": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", - "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", - "dev": true, - "requires": { - "ms": "2.0.0" - } - }, - "mime": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.3.1.tgz", - "integrity": "sha512-OEUllcVoydBHGN1z84yfQDimn58pZNNNXgZlHXSboxMlFvgI6MXSWpWKpFRra7H1HxpVhHTkrghfRW49k6yjeg==", - "dev": true - }, - "ws": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-5.2.0.tgz", - "integrity": "sha512-c18dMeW+PEQdDFzkhDsnBAlS4Z8KGStBQQUcQ5mf7Nf689jyGk0594L+i9RaQuf4gog6SvWLJorz2NfSaqxZ7w==", - "dev": true, - "requires": { - "async-limiter": "1.0.0" - } - } - } - }, "q": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/q/-/q-1.4.1.tgz", @@ -13805,15 +13731,6 @@ } } }, - "yauzl": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.4.1.tgz", - "integrity": "sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU=", - "dev": true, - "requires": { - "fd-slicer": "1.0.1" - } - }, "yeast": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", diff --git a/package.json b/package.json index 6156029cd..c9a3bbb7a 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,6 @@ "karma-jasmine": "^1.1.2", "karma-junit-reporter": "^1.2.0", "protractor": "~5.3.0", - "puppeteer": "^1.5.0", "stylelint": "~9.2.0", "stylelint-config-recommended-scss": "~3.2.0", "stylelint-config-standard": "~18.2.0", diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html index cb547a87c..927b4e73e 100644 --- a/src/app/clients/clients.component.html +++ b/src/app/clients/clients.component.html @@ -1,46 +1,81 @@
- + - +
- - - - - - - - - - - - - + - + - + + + + + + + + + + + + + + + + + + + + + - - - + + + - + + + + + + + +
ID {{row.id}} Progress {{row.progress}}% Name {{row.name}} {{row.displayName}} Account # {{row.accountNo}} ExternalID {{row.externalId}} Status {{row.active}} Color {{row.color}} OfficeName {{row.officeName}} StaffName {{row.staffName}}
- +
- - + + -
\ No newline at end of file + + + + + + diff --git a/src/app/clients/clients.component.scss b/src/app/clients/clients.component.scss index 6cc1fb5cc..a0fe1a069 100644 --- a/src/app/clients/clients.component.scss +++ b/src/app/clients/clients.component.scss @@ -9,9 +9,9 @@ } td, th { - width: 25%; + width: 15%; } .filter{ width: 50%; -} \ No newline at end of file +} diff --git a/src/app/clients/clients.component.ts b/src/app/clients/clients.component.ts index 4a6392e13..4697d61a3 100644 --- a/src/app/clients/clients.component.ts +++ b/src/app/clients/clients.component.ts @@ -1,26 +1,33 @@ import {Component, OnInit, ViewChild} from '@angular/core'; import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material'; - +import { Response} from '@angular/http'; +import {ClientsService} from './clients.service'; +import {DataSource} from '@angular/cdk/collections'; +import { Observable } from 'rxjs'; @Component({ selector: 'mifosx-clients', templateUrl: './clients.component.html', styleUrls: ['./clients.component.scss'] }) export class ClientsComponent implements OnInit { - - displayedColumns = ['id', 'name', 'progress', 'color']; - dataSource: MatTableDataSource; + post: any = []; + private ELEMENT_DATA: any = null; + displayedColumns = ['name', 'clientno', 'externalid', 'status', 'office', 'staff']; + dataSource = new MatTableDataSource(); @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; - constructor() { - // Create 100 users - const users: UserData[] = []; - for (let i = 1; i <= 100; i++) { users.push(createNewUser(i)); } - - // Assign the data to the data source for the table to render - this.dataSource = new MatTableDataSource(users); + constructor(private clientService: ClientsService) { + // GET from clients API + this.clientService.getServer() + .subscribe( + (res => { + console.log(res); + this.ELEMENT_DATA = res; + this.dataSource = new MatTableDataSource(this.ELEMENT_DATA); + }) + ); } ngOnInit() { @@ -38,32 +45,3 @@ export class ClientsComponent implements OnInit { } } -/** Constants used to fill up our data base. */ -const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', - 'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray']; -const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', - 'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper', - 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth']; -/** Builds and returns a new User. */ -function createNewUser(id: number): UserData { - const name = - NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' + - NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.'; - - return { - id: id.toString(), - name: name, - progress: Math.round(Math.random() * 100).toString(), - color: COLORS[Math.round(Math.random() * (COLORS.length - 1))] - }; -} - - - -export interface UserData { - id: string; - name: string; - progress: string; - color: string; -} - diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts index b9effce08..1a33d5bfa 100644 --- a/src/app/clients/clients.module.ts +++ b/src/app/clients/clients.module.ts @@ -1,10 +1,12 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; -import {Component, OnInit, ViewChild} from '@angular/core'; - -import { ArchwizardModule } from 'angular-archwizard'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { HttpModule } from '@angular/http'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { CoreModule } from '../core/core.module'; -import {MatTableModule} from '@angular/material/table'; +import { MatTableModule } from '@angular/material/table'; +import { FlexLayoutModule } from '@angular/flex-layout'; import { ClientsRoutingModule } from './clients-routing.module'; import { ClientsComponent } from './clients.component'; @@ -12,12 +14,19 @@ 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 { ClientsService } from './clients.service'; + @NgModule({ imports: [ CoreModule, CommonModule, ClientsRoutingModule, - ArchwizardModule, + FormsModule, + ReactiveFormsModule, + FlexLayoutModule, + BrowserModule, // tslint:disable + HttpModule, + MatTableModule ], declarations: [ ClientsComponent, @@ -25,6 +34,10 @@ import { ViewLoanComponent } from './view-loan/view-loan.component'; ViewClientComponent, ViewLoanComponent ], + providers: [ + ClientsService, + HttpModule // tslint:disable + ], schemas: [ CUSTOM_ELEMENTS_SCHEMA ] diff --git a/src/app/clients/clients.service.ts b/src/app/clients/clients.service.ts new file mode 100644 index 000000000..983137b9e --- /dev/null +++ b/src/app/clients/clients.service.ts @@ -0,0 +1,33 @@ +import { Injectable } from '@angular/core'; +import { Http, Headers, Response } from '@angular/http'; +/* import { HttpHeaders, HttpClient } from '@angular/common/http'; + */ +import { Observable } from 'rxjs'; +import { of } from 'rxjs'; +import { map } from 'rxjs/operators'; + +@Injectable() +export class ClientsService { + constructor(private http: Http) {} // tslint:disable-line + getServer() { + const username = 'mifos'; + const password = 'password'; + const headers = new Headers(); // tslint:disable-line + headers.append('Authorization', 'Basic ' + btoa(username + ':' + password)); + headers.append('Content-Type', 'application/json'); + headers.append('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); + headers.append('Access-Control-Allow-Origin', '*'); + return this.http.get + ('https://demo.openmf.org/fineract-provider/api/v1/clients?tenantIdentifier=default&pretty=true', + {headers: headers}) + .pipe( + map( + (response: Response) => { // tslint:disable-line + response = response.json(); + return response['pageItems']; + + } + ) + ); +} +} diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html index b14783e99..a86f70653 100644 --- a/src/app/clients/create-client/create-client.component.html +++ b/src/app/clients/create-client/create-client.component.html @@ -172,3 +172,237 @@ --> + +
+ + + + +
+ Fill out your name + + + +
+ + + +
+ + + + + + + + Option + + +
+ +
+
+ + +
+ Fill out your address + + + +
+ + +
+
+ + + Done + You are now done. +
+ + +
+ + +
+
+
1. One
+
2. Two
+
3. Three
+
4. Four
+
\ No newline at end of file diff --git a/src/app/clients/create-client/create-client.component.ts b/src/app/clients/create-client/create-client.component.ts index d2f8853dc..e7e322c4a 100644 --- a/src/app/clients/create-client/create-client.component.ts +++ b/src/app/clients/create-client/create-client.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit} from '@angular/core'; - +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; @Component({ selector: 'mifosx-create-client', templateUrl: './create-client.component.html', @@ -7,9 +7,19 @@ import { Component, OnInit} from '@angular/core'; }) export class CreateClientComponent implements OnInit { - constructor() { } + isLinear = false; + firstFormGroup: FormGroup; + secondFormGroup: FormGroup; + + constructor(private _formBuilder: FormBuilder) { } ngOnInit() { + this.firstFormGroup = this._formBuilder.group({ + firstCtrl: ['', Validators.required] + }); + this.secondFormGroup = this._formBuilder.group({ + secondCtrl: ['', Validators.required] + }); } }