diff --git a/ClientApp/src/app/app.module.ts b/ClientApp/src/app/app.module.ts
index 757e838..a79da99 100644
--- a/ClientApp/src/app/app.module.ts
+++ b/ClientApp/src/app/app.module.ts
@@ -7,12 +7,14 @@ import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
+import { NgbdSortableHeader } from './utils/ngbd-sortable-header';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
+ NgbdSortableHeader
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
diff --git a/ClientApp/src/app/home/home.component.css b/ClientApp/src/app/home/home.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ClientApp/src/app/home/home.component.html b/ClientApp/src/app/home/home.component.html
index 4952fa5..999edee 100644
--- a/ClientApp/src/app/home/home.component.html
+++ b/ClientApp/src/app/home/home.component.html
@@ -1,9 +1,9 @@
Add/Edit Instructor
-
+
- First name |
- Last Name |
+ First Name |
+ Last Name |
Manage |
diff --git a/ClientApp/src/app/home/home.component.ts b/ClientApp/src/app/home/home.component.ts
index 8a1212a..606e4cc 100644
--- a/ClientApp/src/app/home/home.component.ts
+++ b/ClientApp/src/app/home/home.component.ts
@@ -1,11 +1,12 @@
-import { Component, Inject } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
+import { Component, Inject, QueryList, ViewChildren } from '@angular/core';
import { Instructor } from '../models/instructor';
import { InstructorsHttpService } from '../services/instructors-http-service';
+import { NgbdSortableHeader, SortEvent, compare } from '../utils/ngbd-sortable-header';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
+ styleUrls: ['../utils/ngbd-sortable-header.css'],
providers: [InstructorsHttpService]
})
export class HomeComponent {
@@ -13,6 +14,8 @@ export class HomeComponent {
private changingInstructor: Instructor = new Instructor();
private savedInstructor: Instructor = new Instructor();
+ @ViewChildren(NgbdSortableHeader) headers: QueryList
+
constructor(private instructorsService: InstructorsHttpService) {}
ngOnInit() {
@@ -62,4 +65,20 @@ export class HomeComponent {
this.instructors.splice(this.instructors.indexOf(instructor), 1)
})
}
+
+ onSort({column, direction}: SortEvent) {
+ // resetting other headers
+ this.headers.forEach(header => {
+ if (header.sortable !== column) {
+ header.direction = '';
+ }
+ });
+
+ if(direction != '') {
+ this.instructors.sort((a, b) => {
+ const res = compare(a[column], b[column]);
+ return direction === 'asc' ? res : -res;
+ });
+ }
+ }
}
\ No newline at end of file
diff --git a/ClientApp/src/app/utils/ngbd-sortable-header.css b/ClientApp/src/app/utils/ngbd-sortable-header.css
new file mode 100644
index 0000000..90bbf41
--- /dev/null
+++ b/ClientApp/src/app/utils/ngbd-sortable-header.css
@@ -0,0 +1,21 @@
+th[sortable] {
+ cursor:pointer;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none;
+ -webkit-user-select:none
+ }
+th[sortable].asc:after,
+th[sortable].desc:after {
+ content:'';
+ display:block;
+ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAmxJREFUeAHtmksrRVEUx72fH8CIGQNJkpGUUmakDEiZSJRIZsRQmCkTJRmZmJgQE0kpX0D5DJKJgff7v+ru2u3O3vvc67TOvsdatdrnnP1Y///v7HvvubdbUiIhBISAEBACQkAICAEhIAQ4CXSh2DnyDfmCPEG2Iv9F9MPlM/LHyAecdyMzHYNwR3fdNK/OH9HXl1UCozD24TCvILxizEDWIEzA0FcM8woCgRrJCoS5PIwrANQSMAJX1LEI9bqpQo4JYNFFKRSvIgsxHDVnqZgIkPnNBM0rIGtYk9YOOsqgbgepRCfdbmFtqhFkVEDVPjJp0+Z6e6hRHhqBKgg6ZDCvYBygVmUoEGoh5JTRvIJwhJo1aUOoh4CLPMyvxxi7EWOMgnCGsXXI1GIXlZUYX7ucU+kbR8NW8lh3O7cue0Pk32MKndfUxQFAwxdirk3fHappAnc0oqDPzDfGTBrCfHP04dM4oTV8cxr0SVzH9FF07xD3ib6xCDE+M+aUcVygtWzzbtGX2rPBrEUYfecfQkaFzYi6HjVnGBdtL7epqAlc1+jRdAap74RrnPc4BCijttY2tRcdN0g17w7HqZrXhdJTYAuS3hd8z+vKgK3V1zWPae0mZDMykadBn1hTQBLnZNwVrJpSe/NwEeDsEwCctEOsJTsgxLvCqUl2ACftEGvJDgjxrnBqkh3ASTvEWrIDQrwrnJpkB3DSDrGW7IAQ7wqnJtkBnLRztejXXVu4+mxz/nQ9jR1w5VB86ejLTFcnnDwhzV+F6T+CHZlx6THSjn76eyyBIOPHyDakhBAQAkJACAgBISAEhIAQYCLwC8JxpAmsEGt6AAAAAElFTkSuQmCC) 0 0/22px no-repeat;
+ width:22px;
+ height:22px;
+ float:left;
+}
+th[sortable].desc:after {
+ -webkit-transform:rotate(180deg);
+ transform:rotate(180deg);
+ -ms-transform:rotate(180deg)
+}
\ No newline at end of file
diff --git a/ClientApp/src/app/utils/ngbd-sortable-header.ts b/ClientApp/src/app/utils/ngbd-sortable-header.ts
new file mode 100644
index 0000000..e6ce951
--- /dev/null
+++ b/ClientApp/src/app/utils/ngbd-sortable-header.ts
@@ -0,0 +1,29 @@
+import { Directive, Input, Output, EventEmitter } from '@angular/core'
+
+export type SortDirection = 'asc' | 'desc' | '';
+const rotate: {[key: string]: SortDirection} = { 'asc': 'desc', 'desc': '', '': 'asc' };
+export const compare = (v1, v2) => v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
+
+export interface SortEvent {
+ column: string;
+ direction: SortDirection;
+}
+
+@Directive({
+ selector: 'th[sortable]',
+ host: {
+ '[class.asc]': 'direction === "asc"',
+ '[class.desc]': 'direction === "desc"',
+ '(click)': 'rotate()'
+ },
+})
+export class NgbdSortableHeader {
+ @Input() sortable: string;
+ @Input() direction: SortDirection = '';
+ @Output() sort = new EventEmitter();
+
+ rotate() {
+ this.direction = rotate[this.direction];
+ this.sort.emit({column: this.sortable, direction: this.direction});
+ }
+}
\ No newline at end of file
diff --git a/ClientApp/tsconfig.json b/ClientApp/tsconfig.json
index 741a7db..9332c62 100644
--- a/ClientApp/tsconfig.json
+++ b/ClientApp/tsconfig.json
@@ -20,6 +20,6 @@
"core-js/es7/reflect": [
"node_modules/core-js/proposals/reflect-metadata"
]
- }
+ }
}
}