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 m-t-40">
- <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 class="table table-hover table-responsive-md table-fixed">
+<mat-form-field class="filter">
+    <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+  </mat-form-field>
   
-            <thead>
+  <div class="mat-elevation-z8">
-                <tr>
+    <table mat-table [dataSource]="dataSource" matSort>
-                    <th>#</th>
-                    <th>Name</th>
-                    <th>Surname</th>
-                    <th>Country</th>
-                    <th>City</th>
-                    <th>Position</th>
   
-                </tr>
+      <!-- ID Column -->
-            </thead>
+      <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>
   
-            <tbody>
+      <!-- Progress Column -->
-                <tr>
+      <ng-container matColumnDef="progress">
-                    <th scope="row">4</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Progress </th>
-                    <td>Jerry</td>
+        <td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
-                    <td>Horwitz</td>
+      </ng-container>
-                    <td>Italy</td>
-                    <td>Bari</td>
-                    <td>Editor-in-chief</td>
   
-                </tr>
+      <!-- Name Column -->
-                <tr>
+      <ng-container matColumnDef="name">
-                    <th scope="row">5</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
-                    <td>Janis</td>
+        <td mat-cell *matCellDef="let row"> {{row.name}} </td>
-                    <td>Joplin</td>
+      </ng-container>
-                    <td>Poland</td>
-                    <td>Warsaw</td>
-                    <td>Video Maker</td>
   
-                </tr>
+      <!-- Color Column -->
-                <tr>
+      <ng-container matColumnDef="color">
-                    <th scope="row">6</th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
-                    <td>Gary</td>
+        <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>
-                    <td>Winogrand</td>
+      </ng-container>
-                    <td>Germany</td>
-                    <td>Berlin</td>
-                    <td>Photographer</td>
   
-                </tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-                <tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;">
-                    <th scope="row">7</th>
+      </tr>
-                    <td>Angie</td>
+    </table>
-                    <td>Smith</td>
-                    <td>USA</td>
-                    <td>San Francisco</td>
-                    <td>Teacher</td>
   
-                </tr>
+    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
-                <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>
   </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;
+  table {
-//     overflow: hidden;
+  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,
+          MatStepperModule,
-          MatCheckboxModule,
+          MatTabsModule,
+          MatExpansionModule,
+          MatButtonToggleModule,
+          MatChipsModule,
+          MatIconModule,
+          MatProgressSpinnerModule,
+          MatProgressBarModule,
+          MatDialogModule,
           MatTooltipModule,
-          MatDividerModule,
+          MatSnackBarModule,
-          MatSelectModule,
+          MatTableModule,
-          MatInputModule,
+          MatSortModule,
-          MatFormFieldModule,
+          MatPaginatorModule,
-          MatTabsModule } from '@angular/material';
+          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,
+    MatCheckboxModule,
-    MatDividerModule,
+    MatButtonModule,
-    MatSelectModule,
+    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,

src/assets/styles/_colours.scss

@@ -0,0 +1,63 @@
+// Application Color Profiles
+// Description: Set all application-wide color definitions here
+// To see examples, see the Color Swatches PNG
+
+// Endpoints
+$white: #fff;
+$black: #000;
+
+// Greys
+$light-grey: #f5f5f5;
+$mid-grey: #d7dada;
+$dark-grey: #353b3b;
+
+// Default Color
+$default: $dark-grey;
+
+// Flat UI Color Swatches (http://designmodo.github.io/Flat-UI) see the color-swatchs.png
+$turquoise: #1abc9c;
+$green-sea: #16a085;
+$emerald: #2ecc71;
+$nephritis: #27ae60;
+$peter-river: #3498db;
+$belize-hole: #2980b9;
+$amethyst: #9b59b6;
+$wisteria: #8e44ad;
+$wet-asphalt: #34495e;
+$midnight-blue: #2c3e50;
+$sunflower: #f1c40f;
+$orange: #f39c12;
+$carrot: #e67e22;
+$pumpkin: #d35400;
+$alizarin: #e74c3c;
+$pomegranate: #c0392b;
+$clouds: #ecf0f1;
+$silver: #bdc3c7;
+$concrete: #95a5a6;
+$asbestos: #7f8c8d;
+
+// Message Colors
+$msg-default: #999;
+$msg-success: #5cb85c;
+$msg-warning: #f0ad4e;
+$msg-danger: #d9534f;
+$msg-info: #5bc0de;
+
+//Social Colors
+$dailymile: #FFAA25;
+$facebook: #3B5998;
+$flickr: #f80082;
+$github: #F7F7F7;
+$google: #d7473d;
+$instagram: #37658D;
+$linkedin: #2C8CC0;
+$pinterest: #c5142b;
+$runkeeper: #3193d3;
+$skype: #00abee;
+$spotify: #7AB800;
+$twitter: #3B8ACA;
+
+// Set Site Specific Base, Highlight and Accent Colors Here for easy switching between themes
+$base: $dark-grey;
+$highlight: $belize-hole;
+$accent: $peter-river;

src/main.scss

@@ -8,67 +8,6 @@
 
 // 3rd party libraries
 
-// Other imports
+// Global Imports
-
 /* You can add global styles to this file, and also import other style files */
-body, html {
+@import "assets/styles/_helper.scss";
-  width: 100%;
-  height: 100%;
-  position: relative;
-  overflow: hidden;
-  -webkit-tap-highlight-color: transparent;
-  min-height: 100%;
-  -webkit-font-smoothing: antialiased;
-}
-
-html {
-  font-size: 16px;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  font-weight: 400;
-  font-size: .875rem;
-  color: rgba(0,0,0,.87);
-  line-height: 1.5;
-  font-family: Roboto, Helvetica Neue, sans-serif;
-}
-
-div {
-  box-sizing: border-box;
-}
-
-.mat-icon-button.xs-button {
-  height: 20px;
-  width: 20px;
-  line-height: 20px;
-}
-
-.mat-icon-button.xs-button .mat-icon {
-  font-size: 16px;
-  line-height: 20px;
-  height: 20px;
-  width: 20px;
-}
-
-.text-muted {
-  color: rgba(0, 0, 0, .54);
-}
-
-.mb-05 {
-  margin-bottom: .5rem;
-}
-
-.mr-05 {
-  margin-right: .5rem;
-}
-
-.mb-1 {
-  margin-bottom: 1rem;
-}
-
-.mt-1 {
-  margin-top: 1rem;
-}
-