Skip to content

Commit 7decb99

Browse files
franckevvafranckevva
committed
feat(table): table sorting
feat(table): pagination moved table data to service
1 parent 837a207 commit 7decb99

13 files changed

+599
-203
lines changed

‎src/app/pages/ui/tables/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export { TablesComponent } from './tables.component';
2+
export { TablesService } from './tables.service';

‎src/app/pages/ui/tables/tables.component.html

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,12 +102,22 @@ <h1 class="mdl-card__title-text">Borderless table</h1>
102102
<div class="mdl-card">
103103
<div class="mdl-card__title">
104104
<h1 class="mdl-card__title-text">Advanced table</h1>
105+
<div class="mdl-layout-spacer"></div>
106+
<base-pagination [numPage]="numPage"
107+
[currentPage]="currentPage"
108+
(changePage)="changePage($event)"></base-pagination>
105109
</div>
106110
<div class="mdl-card__supporting-text no-padding">
107-
<table class="mdl-data-table mdl-js-data-table">
111+
<table class="mdl-data-table mdl-js-data-table sorting-table">
108112
<thead>
109113
<tr>
110-
<th *ngFor="let header of advancedHeaders" class="mdl-data-table__cell--non-numeric">{{ header }}</th>
114+
<th *ngFor="let header of advancedHeaders; let i = index" class="mdl-data-table__cell--non-numeric"
115+
(click)="changeSorting(header, i)">
116+
<span>{{ header.name }}</span>
117+
<i *ngIf="header.sort !== null " class="material-icons sorting"
118+
[class.asc]="header.sort === sortOrder.asc"
119+
[class.active]="header.sort === sortOrder.asc || header.sort === sortOrder.desc">sort</i>
120+
</th>
111121
</tr>
112122
</thead>
113123
<tbody>
@@ -118,7 +128,11 @@ <h1 class="mdl-card__title-text">Advanced table</h1>
118128
</td>
119129
<td *ngFor="let cell of row.slice(4, 8)" class="mdl-data-table__cell--non-numeric">{{ cell }}</td>
120130
<td class="mdl-data-table__cell--non-numeric">
121-
<span *ngFor="let i of Array(row[8])" class="label label--mini label__availability" [class.background-color--primary]="row[8] === 4" [class.background-color--secondary]="row[8] === 1" [class.color--orange]="row[8] === 2"></span>
131+
<span *ngFor="let i of Array(row[8])" class="label label--mini label__availability"
132+
[class.background-color--secondary]="row[8] === 1"
133+
[class.color--orange]="row[8] === 2"
134+
[class.background-color--primary]="row[8] === 4"
135+
[class.color--green]="row[8] === 3"></span>
122136
<span *ngFor="let i of Array(4 - row[8])" class="label label--mini label__availability"></span>
123137
</td>
124138
<td class="mdl-data-table__cell--non-numeric"><button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect button--colored-teal">Add to cart</button></td>

‎src/app/pages/ui/tables/tables.component.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
.ui-tables {
2-
.mdl-card {
2+
.mdl-card,
3+
.mdl-card__supporting-text {
34
overflow-x: auto;
45
}
56

‎src/app/pages/ui/tables/tables.component.ts

Lines changed: 45 additions & 198 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, HostBinding } from '@angular/core';
22

33
import { UpgradableComponent } from 'theme/components/upgradable';
4+
import { TablesService } from './tables.service';
45

56
@Component({
67
selector: 'app-tables',
@@ -18,210 +19,56 @@ export class TablesComponent extends UpgradableComponent {
1819
@HostBinding('class.mdl-cell--top') private readonly mdlCellTop = true;
1920
@HostBinding('class.ui-tables') private readonly uiTables = true;
2021

21-
public headers = [
22-
'#',
23-
'Book title',
24-
'Author',
25-
'First published',
26-
'Status',
27-
];
22+
public constructor(private tablesService: TablesService) {
23+
super();
24+
}
2825

29-
public simpleTable = [
30-
[
31-
'1',
32-
'To Kill a Mockingbird',
33-
'Harper Lee',
34-
'1960',
35-
'read',
36-
],
37-
[
38-
'2',
39-
'Pride and Prejudice',
40-
'Jane Austen',
41-
'1813',
42-
'unread',
43-
],
44-
[
45-
'3',
46-
'The Great Gatsby',
47-
'F. Scott Fitzgerald',
48-
'1925',
49-
'read',
50-
],
51-
[
52-
'4',
53-
'Crime and Punishment',
54-
'Fyodor Dostoyevsky',
55-
'1866',
56-
'read',
57-
],
58-
];
59-
60-
public borderedTable = [
61-
[
62-
'23',
63-
'Gone with the Wind',
64-
'Margaret Mitchell',
65-
'1936',
66-
'unread',
67-
],
68-
[
69-
'24',
70-
'The Count of Monte Cristo',
71-
'Alexandre Dumas',
72-
'1845',
73-
'unread',
74-
],
75-
[
76-
'25',
77-
'Lolita',
78-
'Vladimir Nabokov',
79-
'1955',
80-
'read',
81-
],
82-
[
83-
'26',
84-
'The Hobbit',
85-
'J.R.R. Tolkien',
86-
'1937',
87-
'unread',
88-
],
89-
];
90-
91-
public strippedTable = [
92-
[
93-
'54',
94-
'The Hitchhiker\'s Guide to th...',
95-
'Douglas Adams',
96-
'1979',
97-
'unavailable',
98-
],
99-
[
100-
'55',
101-
'Madame Bovary',
102-
'Gustave Flaubert',
103-
'1856',
104-
'available',
105-
],
106-
[
107-
'56',
108-
'David Copperfield',
109-
'Charles Dickens',
110-
'1850',
111-
'available',
112-
],
113-
[
114-
'57',
115-
'War and Peace',
116-
'Leo Tolstoy',
117-
'1869',
118-
'available',
119-
],
120-
];
121-
122-
public borderlessTable = [
123-
[
124-
'31',
125-
'The Little Prince',
126-
'Antoine de Saint-Exupery',
127-
'1943',
128-
'available',
129-
],
130-
[
131-
'32',
132-
'Les Miserables',
133-
'Victor Hugo',
134-
'1862',
135-
'unavailable',
136-
],
137-
[
138-
'33',
139-
'Alice in Wonderland',
140-
'Lewis Carroll',
141-
'1865',
142-
'available',
143-
],
144-
[
145-
'34',
146-
'Anne of Green Gables',
147-
'L.M. Montgomery',
148-
'1908',
149-
'available',
150-
],
151-
];
152-
153-
public advancedHeaders = [
154-
'#',
155-
'Book title',
156-
'Author',
157-
'Genre',
158-
'Year',
159-
'Originally published',
160-
'Language',
161-
'Original Language',
162-
'Availability',
163-
];
164-
165-
public advancedTableFullData = [
166-
[
167-
'5',
168-
'Life of Pi',
169-
'Yann Martel',
170-
[
171-
'Fiction',
172-
],
173-
'2016',
174-
'2001',
175-
'English',
176-
'English',
177-
4,
178-
],
179-
[
180-
'6',
181-
'The secret Garden',
182-
'Frances Hodgson Burnett',
183-
[
184-
'Childeren\'s literature',
185-
],
186-
'2017',
187-
'1911',
188-
'English',
189-
'English',
190-
1,
191-
],
192-
[
193-
'7',
194-
'Rebecca',
195-
'Daphne du Maurier',
196-
[
197-
'Gothic fiction',
198-
],
199-
'2016',
200-
'1938',
201-
'English',
202-
'English',
203-
2,
204-
],
205-
[
206-
'8',
207-
'Dracula',
208-
'Bram Stoker',
209-
[
210-
'Gothic fiction',
211-
'Horror fiction',
212-
],
213-
'2015',
214-
'1897',
215-
'English',
216-
'English',
217-
0,
218-
],
219-
];
26+
public readonly sortOrder = {
27+
asc: 1,
28+
desc: -1,
29+
};
22030

31+
public headers = this.tablesService.getHeaders();
32+
public simpleTable = this.tablesService.getSimpleTable();
33+
public borderedTable = this.tablesService.getBorderedTable();
34+
public strippedTable = this.tablesService.getStrippedTable();
35+
public borderlessTable = this.tablesService.getBorderlessTable();
36+
public advancedHeaders = this.tablesService.getAdvancedHeaders();
22137
public genreColors = {
22238
'Childeren\'s literature': 'orange',
22339
'Gothic fiction': 'purple',
22440
'Horror fiction': 'dark-gray',
22541
'Fiction': 'green',
42+
'Novel': 'teal',
43+
'Fantasy': 'red',
44+
'Adventure': 'light-blue',
22645
};
46+
47+
public currentPage = 1;
48+
private countPerPage = 4;
49+
public numPage = this.tablesService.getAdvancedTableNumOfPage(this.countPerPage);
50+
51+
public advancedTable = this.tablesService.getAdvancedTablePage(1, this.countPerPage);
52+
53+
public changePage(page, force = false) {
54+
if (page !== this.currentPage || force) {
55+
this.currentPage = page;
56+
this.advancedTable = this.tablesService.getAdvancedTablePage(page, this.countPerPage);
57+
}
58+
}
59+
60+
/* available sort value:
61+
-1 - desc; 0 - no sorting; 1 - asc; null - disabled */
62+
public changeSorting(header, index) {
63+
const current = header.sort;
64+
if (current !== null) {
65+
this.advancedHeaders.forEach((cell) => {
66+
cell.sort = (cell.sort !== null) ? 0 : null;
67+
});
68+
header.sort = (current === 1) ? -1 : 1;
69+
this.tablesService.changeAdvanceSorting(header.sort, index);
70+
this.changePage(1, true);
71+
}
72+
}
73+
22774
}

0 commit comments

Comments
 (0)