mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2026-03-08 09:38:40 +00:00
Angular material docs updated,
+ @angular/material-moment-adapter added to package.json
This commit is contained in:
mustafahlvc
@@ -1,23 +1,14 @@
|
||||
/* Structure */
|
||||
.example-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.example-header {
|
||||
min-height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 24px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
overflow: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.mat-header-cell .mat-sort-header-sorted {
|
||||
.mat-header-cell.mat-sort-header-sorted {
|
||||
color: black;
|
||||
}
|
||||
|
||||
@@ -1,34 +1,31 @@
|
||||
<div class="example-container mat-elevation-z8">
|
||||
<mat-table #table [dataSource]="dataSource" matSort>
|
||||
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="userId">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> ID</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container matColumnDef="progress">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Progress</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.progress}}%</mat-cell>
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="position">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> No.</mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="userName">
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.name}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Weight Column -->
|
||||
<ng-container matColumnDef="weight">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Weight</mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.weight}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="color">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Color</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}}</mat-cell>
|
||||
<ng-container matColumnDef="symbol">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header> Symbol</mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.symbol}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
||||
</mat-table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,11 +1,5 @@
|
||||
import { Component, ViewChild } from '@angular/core';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
import { MatSort } from '@angular/material';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/operator/startWith';
|
||||
import 'rxjs/add/observable/merge';
|
||||
import 'rxjs/add/operator/map';
|
||||
import { MatTableDataSource, MatSort } from '@angular/material';
|
||||
|
||||
/**
|
||||
* @title Table with sorting
|
||||
@@ -17,145 +11,148 @@ import 'rxjs/add/operator/map';
|
||||
})
|
||||
export class TableSortingExample
|
||||
{
|
||||
displayedColumns = ['userId', 'userName', 'progress', 'color'];
|
||||
exampleDatabase = new ExampleDatabase();
|
||||
dataSource: ExampleDataSource | null;
|
||||
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new MatTableDataSource(ELEMENT_DATA);
|
||||
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
|
||||
ngOnInit()
|
||||
/**
|
||||
* Set the sort after the view init since this component will
|
||||
* be able to query its view for the initialized sort.
|
||||
*/
|
||||
ngAfterViewInit()
|
||||
{
|
||||
this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort);
|
||||
this.dataSource.sort = this.sort;
|
||||
}
|
||||
}
|
||||
|
||||
/** 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'
|
||||
];
|
||||
|
||||
export interface UserData
|
||||
export interface Element
|
||||
{
|
||||
id: string;
|
||||
name: string;
|
||||
progress: string;
|
||||
color: string;
|
||||
position: number;
|
||||
weight: number;
|
||||
symbol: string;
|
||||
}
|
||||
|
||||
/** An example database that the data source uses to retrieve data for the table. */
|
||||
export class ExampleDatabase
|
||||
{
|
||||
/** Stream that emits whenever the data has been modified. */
|
||||
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
|
||||
|
||||
get data(): UserData[]
|
||||
const ELEMENT_DATA: Element[] = [
|
||||
{
|
||||
return this.dataChange.value;
|
||||
}
|
||||
|
||||
constructor()
|
||||
position: 1,
|
||||
name : 'Hydrogen',
|
||||
weight : 1.0079,
|
||||
symbol : 'H'
|
||||
},
|
||||
{
|
||||
// Fill up the database with 100 users.
|
||||
for ( let i = 0; i < 100; i++ )
|
||||
{
|
||||
this.addUser();
|
||||
}
|
||||
}
|
||||
|
||||
/** Adds a new user to the database. */
|
||||
addUser()
|
||||
position: 2,
|
||||
name : 'Helium',
|
||||
weight : 4.0026,
|
||||
symbol : 'He'
|
||||
},
|
||||
{
|
||||
const copiedData = this.data.slice();
|
||||
copiedData.push(this.createNewUser());
|
||||
this.dataChange.next(copiedData);
|
||||
}
|
||||
|
||||
/** Builds and returns a new User. */
|
||||
private createNewUser()
|
||||
position: 3,
|
||||
name : 'Lithium',
|
||||
weight : 6.941,
|
||||
symbol : 'Li'
|
||||
},
|
||||
{
|
||||
const name =
|
||||
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
|
||||
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
|
||||
|
||||
return {
|
||||
id : (this.data.length + 1).toString(),
|
||||
name : name,
|
||||
progress: Math.round(Math.random() * 100).toString(),
|
||||
color : COLORS[Math.round(Math.random() * (COLORS.length - 1))]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data source to provide what data should be rendered in the table. Note that the data source
|
||||
* can retrieve its data in any way. In this case, the data source is provided a reference
|
||||
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
|
||||
* the underlying data. Instead, it only needs to take the data and send the table exactly what
|
||||
* should be rendered.
|
||||
*/
|
||||
export class ExampleDataSource extends DataSource<any>
|
||||
{
|
||||
constructor(private _exampleDatabase: ExampleDatabase, private _sort: MatSort)
|
||||
position: 4,
|
||||
name : 'Beryllium',
|
||||
weight : 9.0122,
|
||||
symbol : 'Be'
|
||||
},
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
/** Connect function called by the table to retrieve one stream containing the data to render. */
|
||||
connect(): Observable<UserData[]>
|
||||
position: 5,
|
||||
name : 'Boron',
|
||||
weight : 10.811,
|
||||
symbol : 'B'
|
||||
},
|
||||
{
|
||||
const displayDataChanges = [
|
||||
this._exampleDatabase.dataChange,
|
||||
this._sort.sortChange
|
||||
];
|
||||
|
||||
return Observable.merge(...displayDataChanges).map(() => {
|
||||
return this.getSortedData();
|
||||
});
|
||||
}
|
||||
|
||||
disconnect()
|
||||
position: 6,
|
||||
name : 'Carbon',
|
||||
weight : 12.0107,
|
||||
symbol : 'C'
|
||||
},
|
||||
{
|
||||
}
|
||||
|
||||
/** Returns a sorted copy of the database data. */
|
||||
getSortedData(): UserData[]
|
||||
position: 7,
|
||||
name : 'Nitrogen',
|
||||
weight : 14.0067,
|
||||
symbol : 'N'
|
||||
},
|
||||
{
|
||||
const data = this._exampleDatabase.data.slice();
|
||||
if ( !this._sort.active || this._sort.direction == '' )
|
||||
{
|
||||
return data;
|
||||
}
|
||||
|
||||
return data.sort((a, b) => {
|
||||
let propertyA: number | string = '';
|
||||
let propertyB: number | string = '';
|
||||
|
||||
switch ( this._sort.active )
|
||||
{
|
||||
case 'userId':
|
||||
[propertyA, propertyB] = [a.id, b.id];
|
||||
break;
|
||||
case 'userName':
|
||||
[propertyA, propertyB] = [a.name, b.name];
|
||||
break;
|
||||
case 'progress':
|
||||
[propertyA, propertyB] = [a.progress, b.progress];
|
||||
break;
|
||||
case 'color':
|
||||
[propertyA, propertyB] = [a.color, b.color];
|
||||
break;
|
||||
}
|
||||
|
||||
let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
|
||||
let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
|
||||
|
||||
return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1);
|
||||
});
|
||||
position: 8,
|
||||
name : 'Oxygen',
|
||||
weight : 15.9994,
|
||||
symbol : 'O'
|
||||
},
|
||||
{
|
||||
position: 9,
|
||||
name : 'Fluorine',
|
||||
weight : 18.9984,
|
||||
symbol : 'F'
|
||||
},
|
||||
{
|
||||
position: 10,
|
||||
name : 'Neon',
|
||||
weight : 20.1797,
|
||||
symbol : 'Ne'
|
||||
},
|
||||
{
|
||||
position: 11,
|
||||
name : 'Sodium',
|
||||
weight : 22.9897,
|
||||
symbol : 'Na'
|
||||
},
|
||||
{
|
||||
position: 12,
|
||||
name : 'Magnesium',
|
||||
weight : 24.305,
|
||||
symbol : 'Mg'
|
||||
},
|
||||
{
|
||||
position: 13,
|
||||
name : 'Aluminum',
|
||||
weight : 26.9815,
|
||||
symbol : 'Al'
|
||||
},
|
||||
{
|
||||
position: 14,
|
||||
name : 'Silicon',
|
||||
weight : 28.0855,
|
||||
symbol : 'Si'
|
||||
},
|
||||
{
|
||||
position: 15,
|
||||
name : 'Phosphorus',
|
||||
weight : 30.9738,
|
||||
symbol : 'P'
|
||||
},
|
||||
{
|
||||
position: 16,
|
||||
name : 'Sulfur',
|
||||
weight : 32.065,
|
||||
symbol : 'S'
|
||||
},
|
||||
{
|
||||
position: 17,
|
||||
name : 'Chlorine',
|
||||
weight : 35.453,
|
||||
symbol : 'Cl'
|
||||
},
|
||||
{
|
||||
position: 18,
|
||||
name : 'Argon',
|
||||
weight : 39.948,
|
||||
symbol : 'Ar'
|
||||
},
|
||||
{
|
||||
position: 19,
|
||||
name : 'Potassium',
|
||||
weight : 39.0983,
|
||||
symbol : 'K'
|
||||
},
|
||||
{
|
||||
position: 20,
|
||||
name : 'Calcium',
|
||||
weight : 40.078,
|
||||
symbol : 'Ca'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user