Last active
July 24, 2018 12:54
-
-
Save osahner/a260e3828bd62fcdc7e8f5ae78b786ff to your computer and use it in GitHub Desktop.
angular2 sortable list abstract class
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ChangeDetectorRef } from '@angular/core'; | |
/** | |
* @whatItDoes decorates Component with toggleOrder(property), get list() and get(CSS)Class functions. | |
* | |
* @howToUse | |
* \@Component({ | |
* template: ` | |
* <table> | |
* <tr> | |
* <th (click)="toggleOrder('id')" [ngClass]="getClass('id')">ID</th> | |
* <th (click)="toggleOrder('name')" [ngClass]="getClass('name')">Name</th> | |
* </tr> | |
* <tr *ngFor="let item of list"> | |
* <td>{{item.id}}</td> | |
* <td>{{item.name}}</td> | |
* </tr> | |
* </table> | |
* `, | |
* changeDetection: ChangeDetectionStrategy.OnPush | |
* }) | |
* export class SortableListComponent extends SortableList<Object> implements OnInit { | |
* | |
* constructor(protected cd: ChangeDetectorRef) { | |
* super(cd); | |
* } | |
* | |
* ngOnInit() { | |
* this.property = 'id'; // change default / starting sort | |
* this.getDataFunction(); // get Data and store it in this.items | |
* } | |
* } | |
* | |
* @description Abstract Class for List Components. | |
* @todo Sould be a Decorator as soon Method injections are supported by Typescript. | |
*/ | |
export abstract class SortableList<T> { | |
public headerSortDown = 'headerSortDown'; | |
public headerSortUp = 'headerSortUp'; | |
public property = 'id'; | |
public ascDesc = 'desc'; | |
public items: T[]; | |
constructor(protected cd: ChangeDetectorRef) { | |
} | |
/** | |
* Toggle sort order (asc|desc) of property | |
* @param property | |
*/ | |
public toggleOrder(property: string): void { | |
if (this.property === property) { | |
this.ascDesc = this.ascDesc === 'asc' ? 'desc' : 'asc'; | |
} | |
this.property = property; | |
this.cd.markForCheck(); | |
} | |
/** | |
* Get CSS Class (headerSortDown|headerSortUp) if | |
* @param property | |
* @return Object | |
*/ | |
public getClass(property: string): any { | |
const css: any = {}; | |
if (this.property === property) { | |
css[this.headerSortDown] = this.ascDesc === 'asc'; | |
css[this.headerSortUp] = this.ascDesc !== 'asc'; | |
} | |
return css; | |
} | |
/** | |
* return sorted list | |
*/ | |
get list(): T[] { | |
return this.orderBy(this.items, this.property, this.ascDesc); | |
} | |
protected orderBy(list: T[], property, ascDesc): T[] { | |
if (list == null || list.length === 0 || !list[0].hasOwnProperty(property)) { | |
return; | |
} | |
return list.sort((a: any, b: any) => { | |
const aProp = a[property].toLowerCase(); | |
const bProp = b[property].toLowerCase(); | |
if (aProp > bProp) { | |
return (ascDesc === 'asc' ? -1 : 1); | |
} | |
if (aProp < bProp) { | |
return (ascDesc === 'asc' ? 1 : -1); | |
} | |
return 0; | |
}); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment