refactor: angular material components export from common module & feat: css helper classes added (#57)

* angular material export in common module

* css helper class added

src/app/clients/clients.component.html

@@ -1,95 +1,46 @@
-<!-- <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">
+<div class="container m-t-40">
 
-        <table class="table table-hover table-responsive-md table-fixed">
-
-            <thead>
-                <tr>
-                    <th>#</th>
-                    <th>Name</th>
-                    <th>Surname</th>
-                    <th>Country</th>
-                    <th>City</th>
-                    <th>Position</th>
-
-                </tr>
-            </thead>
-
-            <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>
-
-      </div>
-    </div>
+<mat-form-field class="filter">
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+  </mat-form-field>
+  
+  <div class="mat-elevation-z8">
+    <table mat-table [dataSource]="dataSource" matSort>
+  
+      <!-- ID Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
+        <td mat-cell *matCellDef="let row"> {{row.id}} </td>
+      </ng-container>
+  
+      <!-- Progress Column -->
+      <ng-container matColumnDef="progress">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Progress </th>
+        <td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
+      </ng-container>
+  
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
+      </ng-container>
+  
+      <!-- Color Column -->
+      <ng-container matColumnDef="color">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
+        <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>
+      </ng-container>
+  
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;">
+      </tr>
+    </table>
+  
+    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
   </div>
-</div> -->
+  
+  
+  <!-- Copyright 2018 Google Inc. All Rights Reserved.
+      Use of this source code is governed by an MIT-style license that
+      can be found in the LICENSE file at http://angular.io/license -->
+</div>

src/app/clients/clients.component.scss

@@ -1,4 +1,17 @@
-// .table-fixed {
-//     table-layout: fixed;
-//     overflow: hidden;
-// }
+
+  table {
+  width: 100%;
+}
+
+.mat-form-field {
+  font-size: 14px;
+  width: 100%;
+}
+
+td, th {
+  width: 25%;
+}
+
+.filter{
+  width: 50%;
+}

src/app/clients/clients.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
 
 @Component({
   selector: 'mifosx-clients',
@@ -7,9 +8,62 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ClientsComponent implements OnInit {
 
-  constructor() { }
+  displayedColumns = ['id', 'name', 'progress', 'color'];
+  dataSource: MatTableDataSource<UserData>;
+
+  @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);
+  }
 
   ngOnInit() {
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+  applyFilter(filterValue: string) {
+    filterValue = filterValue.trim(); // Remove whitespace
+    filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
+    this.dataSource.filter = filterValue;
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
   }
 
 }
+/** 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;
+}
+

src/app/clients/clients.module.ts

@@ -1,7 +1,10 @@
 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 { CoreModule } from '../core/core.module';
+import {MatTableModule} from '@angular/material/table';
 
 import { ClientsRoutingModule } from './clients-routing.module';
 import { ClientsComponent } from './clients.component';
@@ -11,9 +14,10 @@ import { ViewLoanComponent } from './view-loan/view-loan.component';
 
 @NgModule({
   imports: [
+    CoreModule,
     CommonModule,
     ClientsRoutingModule,
-    ArchwizardModule
+    ArchwizardModule,
   ],
   declarations: [
     ClientsComponent,

src/app/core/core.module.ts

@@ -5,21 +5,37 @@ import { RouteReuseStrategy, RouterModule } from '@angular/router';
 import { LayoutModule } from '@angular/cdk/layout';
 import { FlexLayoutModule } from '@angular/flex-layout';
 
-import {  MatToolbarModule,
+import {  MatCheckboxModule,
           MatButtonModule,
+          MatInputModule,
+          MatAutocompleteModule,
+          MatDatepickerModule,
+          MatFormFieldModule,
+          MatRadioModule,
+          MatSelectModule,
+          MatSliderModule,
+          MatSlideToggleModule,
+          MatMenuModule,
           MatSidenavModule,
-          MatIconModule,
+          MatToolbarModule,
           MatListModule,
           MatGridListModule,
           MatCardModule,
-          MatMenuModule,
-          MatCheckboxModule,
+          MatStepperModule,
+          MatTabsModule,
+          MatExpansionModule,
+          MatButtonToggleModule,
+          MatChipsModule,
+          MatIconModule,
+          MatProgressSpinnerModule,
+          MatProgressBarModule,
+          MatDialogModule,
           MatTooltipModule,
-          MatDividerModule,
-          MatSelectModule,
-          MatInputModule,
-          MatFormFieldModule,
-          MatTabsModule } from '@angular/material';
+          MatSnackBarModule,
+          MatTableModule,
+          MatSortModule,
+          MatPaginatorModule,
+          MatDividerModule, } from '@angular/material';
 
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -46,21 +62,39 @@ import { ContentComponent } from './shell/content/content.component';
     RouterModule,
     LayoutModule,
     FlexLayoutModule,
-    MatSidenavModule,
-    MatGridListModule,
-    MatToolbarModule,
-    MatTabsModule,
-    MatButtonModule,
-    MatIconModule,
-    MatListModule,
-    MatCardModule,
-    MatMenuModule,
     MatCheckboxModule,
-    MatTooltipModule,
-    MatDividerModule,
-    MatSelectModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatInputModule,
+    MatAutocompleteModule,
+    MatDatepickerModule,
     MatFormFieldModule,
-    MatInputModule
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatListModule,
+    MatGridListModule,
+    MatCardModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatExpansionModule,
+    MatButtonToggleModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatDialogModule,
+    MatTooltipModule,
+    MatSnackBarModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatDividerModule,
+
   ],
   declarations: [
     ShellComponent,
@@ -69,6 +103,40 @@ import { ContentComponent } from './shell/content/content.component';
     ContentComponent
   ],
   exports: [
+    LayoutModule,
+    FlexLayoutModule,
+    MatCheckboxModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatInputModule,
+    MatAutocompleteModule,
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatMenuModule,
+    MatSidenavModule,
+    MatToolbarModule,
+    MatListModule,
+    MatGridListModule,
+    MatCardModule,
+    MatStepperModule,
+    MatTabsModule,
+    MatExpansionModule,
+    MatButtonToggleModule,
+    MatChipsModule,
+    MatIconModule,
+    MatProgressSpinnerModule,
+    MatProgressBarModule,
+    MatDialogModule,
+    MatTooltipModule,
+    MatSnackBarModule,
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    MatDividerModule,
   ],
   providers: [
     AuthenticationService,