Client layout design (#10)

* client layout design

package-lock.json

@@ -753,6 +753,12 @@
         "@types/jasmine": "2.8.7"
       }
     },
+    "@types/jquery": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.2.tgz",
+      "integrity": "sha512-ByZwKSEqteAta4VrIalqGJZmMq9lWPD3H3f5Xs6RR8B7zQRDPGUtjoKBYNtKTz/7LgBEQMdlxVbbjQfUaEIItA==",
+      "dev": true
+    },
     "@types/lodash": {
       "version": "4.14.109",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.109.tgz",
@@ -6904,6 +6910,11 @@
       "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
       "dev": true
     },
+    "jquery": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
+      "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
+    },
     "js-base64": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.5.tgz",

package.json

@@ -35,19 +35,21 @@
     "bootstrap": "^4.1.1",
     "core-js": "^2.5.6",
     "hammerjs": "^2.0.8",
+    "jquery": "^3.3.1",
     "lodash": "^4.17.10",
     "rxjs": "^6.1.0",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
+    "@angular-devkit/build-angular": "~0.6.0",
     "@angular/cli": "~6.0.1",
     "@angular/compiler-cli": "^6.0.1",
     "@angular/language-service": "^6.0.1",
-    "@angular-devkit/build-angular": "~0.6.0",
     "@biesbjerg/ngx-translate-extract": "^2.3.4",
     "@ngx-rocket/scripts": "^2.1.0",
     "@types/jasmine": "^2.8.7",
     "@types/jasminewd2": "^2.0.2",
+    "@types/jquery": "^3.3.2",
     "@types/lodash": "^4.14.108",
     "@types/node": "^8.10.13",
     "codelyzer": "^4.3.0",

src/app/app.component.ts

@@ -7,7 +7,7 @@ import { filter, map, mergeMap } from 'rxjs/operators';
 
 import { environment } from '@env/environment';
 import { Logger, I18nService } from '@app/core';
-
+import * as $ from 'jquery';
 const log = new Logger('App');
 
 @Component({

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

@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-
 import { extract } from '@app/core';
+
 import { ClientsComponent } from './clients.component';
+import { CreateClientComponent} from './create-client/create-client.component';
+import { ViewClientComponent } from './view-client/view-client.component';
 
 const routes: Routes = [
-  { path: 'clients', component: ClientsComponent }
+  { path: 'clients', component: ClientsComponent},
+  { path: 'clients/create', component: CreateClientComponent},
+  { path: 'clients/view', component: ViewClientComponent},
 ];
 
 @NgModule({

src/app/clients/clients.component.html

@@ -1,4 +1,102 @@
 <app-header> </app-header>
-<p>
-  clients works!
-</p>
+<div class="fluid-container">
+ <div class="container">
+  <div class="card mt-5">
+    <div class="card-header">
+        <h3 class="font-weight-bold">Clients</h3>
+        <div class="row">
+          <div class="col-sm-6">
+             <input class="form-control mr-sm-2" placeholder="Search" type="text">
+          </div>
+          <div class="col-sm-6">
+            <div class="float-right">
+              <button type="button" class="btn btn-secondary btn-large" routerLink="/clients/create" routerLinkActive="active">Create Client</button>
+            </div>
+          </div>
+        </div>
+    </div>
+    <div class="card-body">
+
+        <!--Table-->
+        <table class="table table-hover table-responsive-md table-fixed">
+
+            <!--Table head-->
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th>Name</th>
+                    <th>Surname</th>
+                    <th>Country</th>
+                    <th>City</th>
+                    <th>Position</th>
+
+                </tr>
+            </thead>
+            <!--Table head-->
+
+            <!--Table body-->
+            <tbody>
+                <tr>
+                    <th scope="row">4</th>
+                    <td>Jerry</td>
+                    <td>Horwitz</td>
+                    <td>Italy</td>
+                    <td>Bari</td>
+                    <td>Editor-in-chief</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">5</th>
+                    <td>Janis</td>
+                    <td>Joplin</td>
+                    <td>Poland</td>
+                    <td>Warsaw</td>
+                    <td>Video Maker</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">6</th>
+                    <td>Gary</td>
+                    <td>Winogrand</td>
+                    <td>Germany</td>
+                    <td>Berlin</td>
+                    <td>Photographer</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">7</th>
+                    <td>Angie</td>
+                    <td>Smith</td>
+                    <td>USA</td>
+                    <td>San Francisco</td>
+                    <td>Teacher</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">8</th>
+                    <td>John</td>
+                    <td>Mattis</td>
+                    <td>France</td>
+                    <td>Paris</td>
+                    <td>Actor</td>
+
+                </tr>
+                <tr>
+                    <th scope="row">9</th>
+                    <td>Otto</td>
+                    <td>Morris</td>
+                    <td>Germany</td>
+                    <td>Munich</td>
+                    <td>Singer</td>
+
+                </tr>
+            </tbody>
+            <!--Table body-->
+
+        </table>
+        <!--Table-->
+
+      </div>
+    </div>
+  </div>  
+</div>

src/app/clients/clients.component.scss

@@ -0,0 +1,4 @@
+.table-fixed {
+    table-layout: fixed;
+    overflow: hidden;
+}

src/app/clients/clients.module.ts

@@ -2,8 +2,10 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ClientsComponent } from './clients.component';
+import { CreateClientComponent} from './create-client/create-client.component';
 import { ClientsRoutingModule } from './clients-routing.module';
 import { CoreModule } from '../core/core.module';
+import { ViewClientComponent } from './view-client/view-client.component';
 
 @NgModule({
   imports: [
@@ -13,8 +15,10 @@ import { CoreModule } from '../core/core.module';
 
   ],
   declarations: [
-  ClientsComponent
- ],
+  ClientsComponent,
+  CreateClientComponent,
+  ViewClientComponent
+],
  schemas: [
   CUSTOM_ELEMENTS_SCHEMA
 ],

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

@@ -0,0 +1,162 @@
+<app-header> </app-header>
+<div class="fluid-container">
+ <div class="container">
+   <div class="row">
+     <div class="col-sm-6">
+  <div class="card mt-5">
+<!--     <div class="card-header"><legend> Loan</legend></div>
+ -->    <div class="card-body">
+      <form>
+        <fieldset>
+          
+          <div class="form-group row">
+            <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
+            <div class="col-sm-10">
+              <input readonly="" class="form-control-plaintext" id="staticEmail" value="email@example.com" type="text">
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="exampleInputEmail1">Email address</label>
+            <input class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" type="email">
+            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
+          </div>
+          <div class="form-group">
+            <label for="exampleInputPassword1">Password</label>
+            <input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password">
+          </div>
+          <div class="form-group">
+            <label for="exampleSelect1">Example select</label>
+            <select class="form-control" id="exampleSelect1">
+              <option>1</option>
+              <option>2</option>
+              <option>3</option>
+              <option>4</option>
+              <option>5</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="exampleSelect2">Example multiple select</label>
+            <select multiple="" class="form-control" id="exampleSelect2">
+              <option>1</option>
+              <option>2</option>
+              <option>3</option>
+              <option>4</option>
+              <option>5</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label for="exampleTextarea">Example textarea</label>
+            <textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+          </div>
+          <div class="form-group">
+            <label for="exampleInputFile">File input</label>
+            <input class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" type="file">
+            <small id="fileHelp" class="form-text text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
+          </div>
+          <fieldset class="form-group">
+            <legend>Radio buttons</legend>
+            <div class="form-check">
+              <label class="form-check-label">
+                <input class="form-check-input" name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio">
+                Option one is this and that—be sure to include why it's great
+              </label>
+            </div>
+            <div class="form-check">
+            <label class="form-check-label">
+                <input class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2" type="radio">
+                Option two can be something else and selecting it will deselect option one
+              </label>
+            </div>
+            <div class="form-check disabled">
+            <label class="form-check-label">
+                <input class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled="" type="radio">
+                Option three is disabled
+              </label>
+            </div>
+          </fieldset>
+          <fieldset class="form-group">
+            <legend>Checkboxes</legend>
+            <div class="form-check">
+              <label class="form-check-label">
+                <input class="form-check-input" value="" checked="" type="checkbox">
+                Option one is this and that—be sure to include why it's great
+              </label>
+            </div>
+            <div class="form-check disabled">
+              <label class="form-check-label">
+                <input class="form-check-input" value="" disabled="" type="checkbox">
+                Option two is disabled
+              </label>
+            </div>
+          </fieldset>
+          <button type="submit" class="btn btn-primary">Submit</button>
+        </fieldset>
+      </form>
+      </div>
+    </div>
+  </div>
+  <div class="col-sm-6">
+      <div class="card mt-5">
+          <!-- <div class="card-header"></div> -->
+          <div class="card-body">
+      <div class="form-group">
+          <fieldset disabled="">
+            <label class="control-label" for="disabledInput">Disabled input</label>
+            <input class="form-control" id="disabledInput" placeholder="Disabled input here..." disabled="" type="text">
+          </fieldset>
+        </div>
+        
+        <div class="form-group">
+          <fieldset>
+            <label class="control-label" for="readOnlyInput">Readonly input</label>
+            <input class="form-control" id="readOnlyInput" placeholder="Readonly input here…" readonly="" type="text">
+          </fieldset>
+        </div>
+        
+        <div class="form-group has-success">
+          <label class="form-control-label" for="inputSuccess1">Valid input</label>
+          <input value="correct value" class="form-control is-valid" id="inputValid" type="text">
+          <div class="valid-feedback">Success! You've done it.</div>
+        </div>
+        
+        <div class="form-group has-danger">
+          <label class="form-control-label" for="inputDanger1">Invalid input</label>
+          <input value="wrong value" class="form-control is-invalid" id="inputInvalid" type="text">
+          <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
+        </div>
+        
+        <div class="form-group">
+          <label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
+          <input class="form-control form-control-lg" placeholder=".form-control-lg" id="inputLarge" type="text">
+        </div>
+        
+        <div class="form-group">
+          <label class="col-form-label" for="inputDefault">Default input</label>
+          <input class="form-control" placeholder="Default input" id="inputDefault" type="text">
+        </div>
+        
+        <div class="form-group">
+          <label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
+          <input class="form-control form-control-sm" placeholder=".form-control-sm" id="inputSmall" type="text">
+        </div>
+        
+        <div class="form-group">
+          <label class="control-label">Input addons</label>
+          <div class="form-group">
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text">$</span>
+              </div>
+              <input class="form-control" aria-label="Amount (to the nearest dollar)" type="text">
+              <div class="input-group-append">
+                <span class="input-group-text">.00</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        </div>
+        </div>
+  </div>
+</div>
+ </div>
+ </div> 

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

@@ -0,0 +1,15 @@
+import { Component, OnInit} from '@angular/core';
+import { HeaderComponent } from '../../core/shell/header/header.component';
+
+@Component({
+  selector: 'app-create-client',
+  templateUrl: './create-client.component.html',
+  styleUrls: ['./create-client.component.scss']
+})
+export class CreateClientComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}

src/app/clients/create-client/create-client.module.ts

@@ -0,0 +1,19 @@
+/* import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '../../core/core.module';
+
+import { CreateClientComponent } from './create-client.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule
+  ],
+  declarations: [CreateClientComponent],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA
+  ],
+})
+export class CreateClientModule { }
+ */

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

@@ -0,0 +1,169 @@
+<app-header> </app-header>
+<div class="fluid-container">
+  <div class="container">
+    <div class="row">
+
+      <div class="col-sm-4">
+          <div class="card mt-5 mb-5">
+              <h3 class="card-header">Client Information</h3>
+              <div class="card-body">
+                <h5 class="card-title">Name</h5>
+                <h6 class="card-subtitle text-muted">Other details</h6>
+              </div>
+              <img style="height: 200px; width: 100%; display: block;" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image">
+              <div class="card-body">
+                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+              </div>
+              <ul class="list-group list-group-flush">
+                <li class="list-group-item">Cras justo odio</li>
+                <li class="list-group-item">Dapibus ac facilisis in</li>
+                <li class="list-group-item">Vestibulum at eros</li>
+              </ul>
+              <div class="card-body">
+                <a href="#" class="card-link">Card link</a>
+                <a href="#" class="card-link">Another link</a>
+              </div>
+              <div class="card-footer text-muted">
+                2 days ago
+              </div>
+            </div>
+
+      </div>
+
+
+      <div class="col-sm-8">
+          <div class="card mt-5 mb-5">
+              <div class="card-header">Loan table</div>
+                 <div class="card-body">
+                    <table class="table table-hover table-responsive-md table-fixed">
+
+                        <!--Table head-->
+                        <thead>
+                            <tr>
+                                <th>#</th>
+                                <th>Name</th>
+                                <th>Surname</th>
+                                <th>Country</th>
+                                <th>City</th>
+                                <th>Position</th>
+            
+                            </tr>
+                        </thead>
+                        <!--Table head-->
+            
+                        <!--Table body-->
+                        <tbody>
+                            <tr>
+                                <th scope="row">4</th>
+                                <td>Jerry</td>
+                                <td>Horwitz</td>
+                                <td>Italy</td>
+                                <td>Bari</td>
+                                <td>Editor-in-chief</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">5</th>
+                                <td>Janis</td>
+                                <td>Joplin</td>
+                                <td>Poland</td>
+                                <td>Warsaw</td>
+                                <td>Video Maker</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">6</th>
+                                <td>Gary</td>
+                                <td>Winogrand</td>
+                                <td>Germany</td>
+                                <td>Berlin</td>
+                                <td>Photographer</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">7</th>
+                                <td>Angie</td>
+                                <td>Smith</td>
+                                <td>USA</td>
+                                <td>San Francisco</td>
+                                <td>Teacher</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">8</th>
+                                <td>John</td>
+                                <td>Mattis</td>
+                                <td>France</td>
+                                <td>Paris</td>
+                                <td>Actor</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">9</th>
+                                <td>Otto</td>
+                                <td>Morris</td>
+                                <td>Germany</td>
+                                <td>Munich</td>
+                                <td>Singer</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">9</th>
+                                <td>Otto</td>
+                                <td>Morris</td>
+                                <td>Germany</td>
+                                <td>Munich</td>
+                                <td>Singer</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">9</th>
+                                <td>Otto</td>
+                                <td>Morris</td>
+                                <td>Germany</td>
+                                <td>Munich</td>
+                                <td>Singer</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">9</th>
+                                <td>Otto</td>
+                                <td>Morris</td>
+                                <td>Germany</td>
+                                <td>Munich</td>
+                                <td>Singer</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">9</th>
+                                <td>Otto</td>
+                                <td>Morris</td>
+                                <td>Germany</td>
+                                <td>Munich</td>
+                                <td>Singer</td>
+            
+                            </tr>
+                            <tr>
+                                <th scope="row">9</th>
+                                <td>Otto</td>
+                                <td>Morris</td>
+                                <td>Germany</td>
+                                <td>Munich</td>
+                                <td>Singer</td>
+            
+                            </tr>
+                        </tbody>
+                        <!--Table body-->
+            
+                    </table>
+                 </div>
+              </div>
+      </div>
+
+    </div>
+
+
+
+
+  </div>
+</div>

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

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

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { HeaderComponent } from '../../core/shell/header/header.component';
+
+@Component({
+  selector: 'app-view-client',
+  templateUrl: './view-client.component.html',
+  styleUrls: ['./view-client.component.scss']
+})
+export class ViewClientComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/core/shell/header/header.component.html

@@ -41,7 +41,7 @@
   </nav>
 </header> -->
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-  <a class="navbar-brand" href="#">MifosX</a>
+  <a class="navbar-brand" href="#"><h2>MifosX</h2></a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
@@ -49,21 +49,21 @@
   <div class="collapse navbar-collapse" id="navbarColor02">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item active">
-        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+        <a class="nav-link" href="#"><h5 class="font-weight-normal">Home</h5> <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" routerLink="/clients" routerLinkActive="active">Clients</a>
+        <a class="nav-link" routerLink="/clients" routerLinkActive="active"><h5 class="font-weight-normal">Clients</h5></a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="#">Groups</a>
+        <a class="nav-link" href="#"><h5 class="font-weight-normal">Groups</h5></a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" href="#">Loans</a>
+        <a class="nav-link" href="#"><h5 class="font-weight-normal">Loans</h5></a>
       </li>
     </ul>
     <form class="form-inline my-2 my-lg-0">
       <input class="form-control mr-sm-2" placeholder="Search" type="text">
-      <button class="btn btn-secondary my-2 mr-sm-2 my-sm-0" type="submit">Search</button>
+    <!--   <button class="btn btn-secondary my-2 mr-sm-2 my-sm-0" type="submit">Search</button> -->
     </form>
     <button class="btn btn-secondary my-2 mr-sm-2 my-sm-0" (click)="logout()" type="submit">Logout</button>
 

src/app/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="container-fluid">
-  <div class="text-center">
+  <div class="text-center mt-5">
       <img class="logo" src="assets/images/mifos_lg-logo.jpg"/>
     <!-- <app-loader [isLoading]="isLoading"></app-loader>
     <q [hidden]="isLoading">{{quote}}</q> -->

src/main.scss

@@ -20,6 +20,9 @@
 @import "~bootstrap/scss/bootstrap";
 @import "styles/bootstrap-material/_bootswatch.scss";
 
+// 3rd party libraries
 
+/* @import "~@fortawesome/fontawesome-free-webfonts/scss/fontawesome.scss";
+ */
 //other scss imports
 @import "styles/_loader.scss"