From 8084e2dded4962ff049620f5f2b576abdd71041e Mon Sep 17 00:00:00 2001 From: yarik Date: Fri, 10 Feb 2017 17:35:43 +0200 Subject: [PATCH] Bus Stop fatality --- src/app/data/bus-stop/bus-stop.component.html | 6 +++--- src/app/data/bus-stop/bus-stop.component.ts | 128 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------- src/services/bus-stop.service.ts | 9 +++++++-- 3 files changed, 86 insertions(+), 57 deletions(-) diff --git a/src/app/data/bus-stop/bus-stop.component.html b/src/app/data/bus-stop/bus-stop.component.html index dad08a5..7db449a 100644 --- a/src/app/data/bus-stop/bus-stop.component.html +++ b/src/app/data/bus-stop/bus-stop.component.html @@ -2,11 +2,11 @@ + (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged($event)" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)">
- - + +
\ No newline at end of file diff --git a/src/app/data/bus-stop/bus-stop.component.ts b/src/app/data/bus-stop/bus-stop.component.ts index 4b35229..17d7837 100644 --- a/src/app/data/bus-stop/bus-stop.component.ts +++ b/src/app/data/bus-stop/bus-stop.component.ts @@ -1,6 +1,6 @@ -import { Component, ViewEncapsulation } from '@angular/core'; +import { Component, ViewEncapsulation, AfterViewInit } from '@angular/core'; import { TdLoadingService } from '@covalent/core'; -import { GridOptions } from 'ag-grid/main'; +import { GridOptions, IGetRowsParams, IRowModel } from 'ag-grid/main'; import { BusStopService } from '../../../services/bus-stop.service'; import { BusStop } from '../../../models/bus-stop'; @@ -26,12 +26,11 @@ import { routerTransition } from '../../../animations/router.animation'; styleUrls: ['bus-stop.scss'], encapsulation: ViewEncapsulation.None, }) -export class BusStopComponent { +export class BusStopComponent implements AfterViewInit { private columnDefs: any[]; private gridOptions: GridOptions; public showGrid: boolean; - public rowData: any[]; public rowCount: string; public regions: RegionSelectList[]; public states: StateCommonSelectList[]; @@ -41,7 +40,8 @@ export class BusStopComponent { public boolean: BooleanSelectList[]; public isLoading: boolean = false; public isBootstrapping: boolean = true; - public isSelected: boolean = true; + public isSelected: boolean = false; + public isNew: boolean = false; constructor( protected service: BusStopService, @@ -51,6 +51,8 @@ export class BusStopComponent { ) { this.gridOptions = {}; this.gridOptions.enableSorting = true; + this.gridOptions.suppressMultiSort = true; + this.gridOptions.enableServerSideSorting = true; this.showGrid = true; this.gridOptions.rowModelType = 'virtual'; this.booleanService.getModels().then((models) => this.boolean = models); @@ -64,33 +66,31 @@ export class BusStopComponent { this.createColumnDefs(); this.isBootstrapping = false; }); - this.service.getData().then((data) => { - if (data.length){ - this.rowData = data; - } else { - this.rowData = [new BusStop()]; - } - }).then(() => { - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); - this.gridOptions.api.refreshVirtualPageCache(); - }); } - setRowData(allOfTheData) { + + ngAfterViewInit() { + this.gridOptions.api.setDatasource(this.setRowData()); + } + + setRowData(): any { // tslint:disable-next-line:typedef let dataSource = { rowCount: null, // behave as infinite scroll - getRows: function (params) { - // At this point in your code, you would call the server, using $http if in AngularJS. - // To make the demo look real, wait for 500ms before returning - // take a slice of the total rows - let rowsThisPage = allOfTheData.slice(params.startRow, params.endRow); - // if on or after the last page, work out the last row. - let lastRow = -1; - if (allOfTheData.length <= params.endRow) { - lastRow = allOfTheData.length; + getRows: (params: IGetRowsParams) => { + let sort = null; + if (params.sortModel.length) { + sort = this.parseSort(params.sortModel[0]); } - // call the success callback - params.successCallback(rowsThisPage, lastRow); + this.service.getData(params.startRow, params.endRow, sort).then((data) => { + if (!data.length) { + data = [new BusStop()]; + } + let lastRow = -1; + if (data.length <= params.endRow) { + lastRow = data.length; + } + params.successCallback(data, lastRow); + }); }, }; return dataSource; @@ -114,12 +114,31 @@ export class BusStopComponent { event.confirm.reject(); } } - public addNewRow() { - this.rowData.unshift(new BusStop()); - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); - this.gridOptions.api.refreshVirtualPageCache(); + public addNewRow(): void { + if (this.getFirstRowID()) { + this.gridOptions.api.insertItemsAtIndex(0, [new BusStop()]); + this.isNew = true; + } + } + private parseSort(sort: any): string { + if (sort.colId && sort.sort) { + let result = sort.colId; + if (sort.sort === 'desc') { + result = '-' + result; + } + return result; + } + return null; + } + private getFirstRowID(): number { + let model = this.gridOptions.api.getModel().getRow(0); + let id: number = model.data.busStopId; + if (id) { + return id; + } else { + return null; + } } - private createColumnDefs() { this.columnDefs = [ { @@ -273,10 +292,10 @@ export class BusStopComponent { } this.enableLoader(); result = this.service.create(data).then((busStop) => { - this.rowData[$event.node.rowIndex] = busStop; - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); + this.gridOptions.api.setDatasource(this.setRowData()); this.gridOptions.api.refreshVirtualPageCache(); this.disableLoader(); + this.isNew = false; }); } } @@ -285,28 +304,24 @@ export class BusStopComponent { private deleteRows() { let rows = this.gridOptions.api.getSelectedNodes(); if (!rows.length) { + this.isSelected = false; return ; } - rows.forEach((element) => { + rows.forEach((element, index, array) => { let id = element.data.busStopId; if (id) { this.enableLoader(); - this.service.delete(id).then(() => this.disableLoader()); + this.service.delete(id).then(() => { + if (index === (array.length - 1)) { + this.disableLoader(); + this.gridOptions.api.setDatasource(this.setRowData()); + this.gridOptions.api.refreshVirtualPageCache(); + this.gridOptions.api.deselectAll(); + this.isNew = false; + } + }); } }); - // Sort in order to protect array from reindexing (remove rear elements first) - let sorted = rows.sort((a, b) => { - if (a > b) { - return -1; - } else { - return 1; - } - }); - sorted.forEach((item) => { - this.rowData.splice(item.rowIndex, 1); - }); - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); - this.gridOptions.api.refreshVirtualPageCache(); } private onCellDoubleClicked($event) { @@ -327,7 +342,16 @@ export class BusStopComponent { } private onSelectionChanged() { - console.log('selectionChanged'); + let selection = this.gridOptions.api.getSelectedNodes(); + if (selection.length) { + if (selection.length === 1) { + this.gridOptions.api.refreshVirtualPageCache(); + this.isNew = false; + } + this.isSelected = true; + } else { + this.isSelected = false; + } } private onBeforeFilterChanged() { @@ -342,11 +366,11 @@ export class BusStopComponent { console.log('onFilterModified'); } - private onBeforeSortChanged() { + private onBeforeSortChanged(event) { console.log('onBeforeSortChanged'); } - private onAfterSortChanged() { + private onAfterSortChanged($event) { console.log('onAfterSortChanged'); } diff --git a/src/services/bus-stop.service.ts b/src/services/bus-stop.service.ts index bae51e2..91a65cb 100644 --- a/src/services/bus-stop.service.ts +++ b/src/services/bus-stop.service.ts @@ -10,8 +10,13 @@ export class BusStopService { private url = 'http://localhost:5000/busstop'; private headers = new Headers({'Content-Type': 'application/json'}); constructor(private http: Http) { } - getData(): Promise { - return this.http.get(this.url) + getData(from: number = 0, to: number = 100, sort: string = null): Promise { + let url = this.url; + url += '?from=' + from + '&to=' + to; + if (sort) { + url += '&sort=' + sort; + } + return this.http.get(url) .toPromise() .then(response => response.json().busStopEditDsM as BusStop[]) .catch(this.handleError); -- libgit2 0.21.4