refactor: angular material components export from common module & feat: css helper classes added (#57)
* angular material export in common module * css helper class added
This commit is contained in:
Anwesh Nayak
@@ -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">
|
||||
<mat-form-field class="filter">
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
||||
</mat-form-field>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Country</th>
|
||||
<th>City</th>
|
||||
<th>Position</th>
|
||||
<div class="mat-elevation-z8">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- 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>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">4</th>
|
||||
<td>Jerry</td>
|
||||
<td>Horwitz</td>
|
||||
<td>Italy</td>
|
||||
<td>Bari</td>
|
||||
<td>Editor-in-chief</td>
|
||||
<!-- 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>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">5</th>
|
||||
<td>Janis</td>
|
||||
<td>Joplin</td>
|
||||
<td>Poland</td>
|
||||
<td>Warsaw</td>
|
||||
<td>Video Maker</td>
|
||||
<!-- 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>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">6</th>
|
||||
<td>Gary</td>
|
||||
<td>Winogrand</td>
|
||||
<td>Germany</td>
|
||||
<td>Berlin</td>
|
||||
<td>Photographer</td>
|
||||
<!-- 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>
|
||||
<tr>
|
||||
<th scope="row">7</th>
|
||||
<td>Angie</td>
|
||||
<td>Smith</td>
|
||||
<td>USA</td>
|
||||
<td>San Francisco</td>
|
||||
<td>Teacher</td>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</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-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>
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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,
|
||||
|
||||
+90
-22
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
File diff suppressed because it is too large
Load Diff
+2
-63
@@ -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 {
|
||||
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;
|
||||
}
|
||||
|
||||
@import "assets/styles/_helper.scss";
|
||||
|
||||
Reference in New Issue
Block a user