Commit 7146348e32a518e5fcd8617c014863a3615bf988
marge service object component
Showing
7 changed files
with
323 additions
and
448 deletions
Show diff stats
src/app/data/bus-stop/bus-stop.component.ts
... | ... | @@ -2,6 +2,8 @@ import { Component, ViewEncapsulation, AfterViewInit } from '@angular/core'; |
2 | 2 | import { TdLoadingService } from '@covalent/core'; |
3 | 3 | import { GridOptions, IGetRowsParams, IRowModel } from 'ag-grid/main'; |
4 | 4 | |
5 | +import { StatementBase } from '../../../models/statement.base'; | |
6 | + | |
5 | 7 | import { BusStopService } from '../../../services/bus-stop.service'; |
6 | 8 | import { BusStop } from '../../../models/bus-stop'; |
7 | 9 | import { EditorComponent } from '../../../helpers/editor.component'; |
... | ... | @@ -17,8 +19,6 @@ import { SurfaceTypeSelectList } from '../../../models/surface-type-select-list' |
17 | 19 | |
18 | 20 | import { routerTransition } from '../../../animations/router.animation'; |
19 | 21 | |
20 | -// only import this if you are using the ag-Grid-Enterprise | |
21 | - | |
22 | 22 | @Component({ |
23 | 23 | // tslint:disable-next-line:component-selector |
24 | 24 | selector: 'bus-grid', |
... | ... | @@ -26,121 +26,41 @@ import { routerTransition } from '../../../animations/router.animation'; |
26 | 26 | styleUrls: ['bus-stop.scss'], |
27 | 27 | encapsulation: ViewEncapsulation.None, |
28 | 28 | }) |
29 | -export class BusStopComponent implements AfterViewInit { | |
29 | +export class BusStopComponent extends StatementBase { | |
30 | 30 | |
31 | - private columnDefs: any[]; | |
32 | - private gridOptions: GridOptions; | |
33 | - public showGrid: boolean; | |
34 | - public rowCount: string; | |
35 | 31 | public regions: RegionSelectList[]; |
36 | 32 | public states: StateCommonSelectList[]; |
37 | 33 | public surfaceTypes: SurfaceTypeSelectList[]; |
38 | 34 | public settlements: SettlementSelectList[]; |
39 | 35 | public roads: RoadSelectList[]; |
40 | 36 | public boolean: BooleanSelectList[]; |
41 | - public isLoading: boolean = false; | |
42 | - public isBootstrapping: boolean = true; | |
43 | - public isSelected: boolean = false; | |
44 | - public isNew: boolean = false; | |
45 | 37 | |
46 | 38 | constructor( |
47 | 39 | protected service: BusStopService, |
48 | - private dataService: BusStopCreateService, | |
49 | - private booleanService: BooleanSelectListService, | |
50 | - private loadingService: TdLoadingService, | |
40 | + protected dataService: BusStopCreateService, | |
41 | + protected booleanService: BooleanSelectListService, | |
42 | + protected loadingService: TdLoadingService, | |
51 | 43 | ) { |
52 | - this.gridOptions = <GridOptions>{}; | |
53 | - this.gridOptions.enableSorting = true; | |
54 | - this.gridOptions.suppressMultiSort = true; | |
55 | - this.gridOptions.enableServerSideSorting = true; | |
56 | - this.showGrid = true; | |
57 | - this.gridOptions.rowModelType = 'virtual'; | |
58 | - this.booleanService.getModels().then((models) => this.boolean = models); | |
59 | - this.dataService.getModels().then((models) => { | |
60 | - this.regions = models.regionSelectListDsM as RegionSelectList[]; | |
61 | - this.states = models.stateCommonSelectListDsM as StateCommonSelectList[]; | |
62 | - this.surfaceTypes = models.surfaceTypeSelectListDsM as SurfaceTypeSelectList[]; | |
63 | - this.settlements = models.settlementSelectListDsM as SettlementSelectList[]; | |
64 | - this.roads = models.roadSelectListDsM as RoadSelectList[]; | |
44 | + super(); | |
45 | + this.initGrid(); | |
46 | + this.booleanService.getModels().then((models: BooleanSelectList[]) => this.boolean = models); | |
47 | + this.dataService.getModels().then((models: any) => { | |
48 | + this.regions = models.regionSelectListDsM as RegionSelectList[]; | |
49 | + this.states = models.stateCommonSelectListDsM as StateCommonSelectList[]; | |
50 | + this.surfaceTypes = models.surfaceTypeSelectListDsM as SurfaceTypeSelectList[]; | |
51 | + this.settlements = models.settlementSelectListDsM as SettlementSelectList[]; | |
52 | + this.roads = models.roadSelectListDsM as RoadSelectList[]; | |
65 | 53 | }).then(() => { |
66 | - this.createColumnDefs(); | |
67 | - this.isBootstrapping = false; | |
54 | + this.bootstrapGrid(); | |
68 | 55 | }); |
69 | 56 | } |
70 | 57 | |
71 | - ngAfterViewInit() { | |
72 | - this.gridOptions.api.setDatasource(this.setRowData()); | |
58 | + protected createModel(): Object { | |
59 | + return new BusStop(); | |
73 | 60 | } |
74 | 61 | |
75 | - setRowData(): any { | |
76 | - // tslint:disable-next-line:typedef | |
77 | - let dataSource = { | |
78 | - rowCount: null, // behave as infinite scroll | |
79 | - getRows: (params: IGetRowsParams) => { | |
80 | - let sort = null; | |
81 | - if (params.sortModel.length) { | |
82 | - sort = this.parseSort(params.sortModel[0]); | |
83 | - } | |
84 | - this.service.getData(params.startRow, params.endRow, sort).then((data) => { | |
85 | - if (!data.length) { | |
86 | - data = [new BusStop()]; | |
87 | - } | |
88 | - let lastRow = -1; | |
89 | - if (data.length <= params.endRow) { | |
90 | - lastRow = data.length; | |
91 | - } | |
92 | - params.successCallback(data, lastRow); | |
93 | - }); | |
94 | - }, | |
95 | - }; | |
96 | - return dataSource; | |
97 | - } | |
98 | - enableLoader(): void { | |
99 | - if (!this.isLoading) { | |
100 | - this.isLoading = true; | |
101 | - this.loadingService.register('loading'); | |
102 | - } | |
103 | - } | |
104 | - disableLoader(): void { | |
105 | - if (this.isLoading) { | |
106 | - this.isLoading = false; | |
107 | - this.loadingService.resolve('loading'); | |
108 | - } | |
109 | - } | |
110 | - onDeleteConfirm(event): void { | |
111 | - if (window.confirm('Вы уверены что хотите удалить??')) { | |
112 | - event.confirm.resolve(); | |
113 | - } else { | |
114 | - event.confirm.reject(); | |
115 | - } | |
116 | - } | |
117 | - public addNewRow(): void { | |
118 | - if (this.getFirstRowID()) { | |
119 | - this.gridOptions.api.insertItemsAtIndex(0, [new BusStop()]); | |
120 | - this.isNew = true; | |
121 | - } | |
122 | - } | |
123 | - private parseSort(sort: any): string { | |
124 | - if (sort.colId && sort.sort) { | |
125 | - let result = sort.colId; | |
126 | - if (sort.sort === 'desc') { | |
127 | - result = '-' + result; | |
128 | - } | |
129 | - return result; | |
130 | - } | |
131 | - return null; | |
132 | - } | |
133 | - private getFirstRowID(): number { | |
134 | - let model = this.gridOptions.api.getModel().getRow(0); | |
135 | - let id: number = model.data.busStopId; | |
136 | - if (id) { | |
137 | - return id; | |
138 | - } else { | |
139 | - return null; | |
140 | - } | |
141 | - } | |
142 | - private createColumnDefs() { | |
143 | - this.columnDefs = [ | |
62 | + protected createColumnDefs(): any[] { | |
63 | + return [ | |
144 | 64 | { |
145 | 65 | headerName: '#', |
146 | 66 | width: 30, |
... | ... | @@ -151,7 +71,7 @@ export class BusStopComponent implements AfterViewInit { |
151 | 71 | }, |
152 | 72 | { |
153 | 73 | headerName: 'ID', |
154 | - field: 'busStopId', | |
74 | + field: 'id', | |
155 | 75 | }, |
156 | 76 | { |
157 | 77 | headerName: 'Назва дороги', |
... | ... | @@ -272,125 +192,4 @@ export class BusStopComponent implements AfterViewInit { |
272 | 192 | }, |
273 | 193 | ]; |
274 | 194 | } |
275 | - | |
276 | - private onCellClicked($event) { | |
277 | - console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
278 | - } | |
279 | - | |
280 | - private onCellValueChanged($event) { | |
281 | - if ($event.oldValue !== $event.newValue) { | |
282 | - let data = JSON.stringify($event.data); | |
283 | - let id = $event.data.busStopId; | |
284 | - let result = null; | |
285 | - if (id) { | |
286 | - this.enableLoader(); | |
287 | - result = this.service.update(id, data).then(() => this.disableLoader()); | |
288 | - } else { | |
289 | - // Protection of posting new row being already sent. | |
290 | - if (this.isLoading) { | |
291 | - return ; | |
292 | - } | |
293 | - this.enableLoader(); | |
294 | - result = this.service.create(data).then((busStop) => { | |
295 | - this.gridOptions.api.setDatasource(this.setRowData()); | |
296 | - this.gridOptions.api.refreshVirtualPageCache(); | |
297 | - this.disableLoader(); | |
298 | - this.isNew = false; | |
299 | - }); | |
300 | - } | |
301 | - } | |
302 | - } | |
303 | - | |
304 | - private deleteRows() { | |
305 | - let rows = this.gridOptions.api.getSelectedNodes(); | |
306 | - if (!rows.length) { | |
307 | - this.isSelected = false; | |
308 | - return ; | |
309 | - } | |
310 | - rows.forEach((element, index, array) => { | |
311 | - let id = element.data.busStopId; | |
312 | - if (id) { | |
313 | - this.enableLoader(); | |
314 | - this.service.delete(id).then(() => { | |
315 | - if (index === (array.length - 1)) { | |
316 | - this.disableLoader(); | |
317 | - this.gridOptions.api.setDatasource(this.setRowData()); | |
318 | - this.gridOptions.api.refreshVirtualPageCache(); | |
319 | - this.gridOptions.api.deselectAll(); | |
320 | - this.isNew = false; | |
321 | - } | |
322 | - }); | |
323 | - } | |
324 | - }); | |
325 | - } | |
326 | - | |
327 | - private onCellDoubleClicked($event) { | |
328 | - console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
329 | - } | |
330 | - | |
331 | - private onCellContextMenu($event) { | |
332 | - console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
333 | - } | |
334 | - | |
335 | - private onCellFocused($event) { | |
336 | - console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')'); | |
337 | - } | |
338 | - | |
339 | - private onRowSelected($event) { | |
340 | - // taking out, as when we 'select all', it prints to much to the console!! | |
341 | - // console.log('onRowSelected: ' + $event.node.data.name); | |
342 | - } | |
343 | - | |
344 | - private onSelectionChanged() { | |
345 | - let selection = this.gridOptions.api.getSelectedNodes(); | |
346 | - if (selection.length) { | |
347 | - if (selection.length === 1) { | |
348 | - this.gridOptions.api.refreshVirtualPageCache(); | |
349 | - this.isNew = false; | |
350 | - } | |
351 | - this.isSelected = true; | |
352 | - } else { | |
353 | - this.isSelected = false; | |
354 | - } | |
355 | - } | |
356 | - | |
357 | - private onBeforeFilterChanged() { | |
358 | - console.log('beforeFilterChanged'); | |
359 | - } | |
360 | - | |
361 | - private onAfterFilterChanged() { | |
362 | - console.log('afterFilterChanged'); | |
363 | - } | |
364 | - | |
365 | - private onFilterModified() { | |
366 | - console.log('onFilterModified'); | |
367 | - } | |
368 | - | |
369 | - private onBeforeSortChanged(event) { | |
370 | - console.log('onBeforeSortChanged'); | |
371 | - } | |
372 | - | |
373 | - private onAfterSortChanged($event) { | |
374 | - console.log('onAfterSortChanged'); | |
375 | - } | |
376 | - | |
377 | - private onVirtualRowRemoved($event) { | |
378 | - // because this event gets fired LOTS of times, we don't print it to the | |
379 | - // console. if you want to see it, just uncomment out this line | |
380 | - // console.log('onVirtualRowRemoved: ' + $event.rowIndex); | |
381 | - } | |
382 | - | |
383 | - private onRowClicked($event) { | |
384 | - console.log('onRowClicked: ' + $event.node.data.name); | |
385 | - } | |
386 | - | |
387 | - public onQuickFilterChanged($event) { | |
388 | - this.gridOptions.api.setQuickFilter($event.target.value); | |
389 | - } | |
390 | - | |
391 | - // here we use one generic event to handle all the column type events. | |
392 | - // the method just prints the event name | |
393 | - private onColumnEvent($event) { | |
394 | - console.log('onColumnEvent: ' + $event); | |
395 | - } | |
396 | 195 | } | ... | ... |
src/app/data/service-object/service-object.component.ts
1 | 1 | import {Component, ViewEncapsulation} from '@angular/core'; |
2 | 2 | import {GridOptions} from 'ag-grid/main'; |
3 | 3 | |
4 | +import { StatementBase } from '../../../models/statement.base'; | |
5 | + | |
4 | 6 | import { ServiceObjectService } from '../../../services/service-object.service'; |
5 | 7 | import { ServiceObject } from '../../../models/service-object'; |
6 | 8 | import { EditorComponent } from '../../../helpers/editor.component'; |
... | ... | @@ -16,98 +18,47 @@ import { SettlementSelectList } from '../../../models/settlement-select-list'; |
16 | 18 | |
17 | 19 | import { routerTransition } from '../../../animations/router.animation'; |
18 | 20 | |
19 | -// only import this if you are using the ag-Grid-Enterprise | |
20 | - | |
21 | 21 | @Component({ |
22 | 22 | selector: 'service-object', |
23 | 23 | templateUrl: 'service-object.component.html', |
24 | 24 | styleUrls: ['service-object.scss'], |
25 | 25 | encapsulation: ViewEncapsulation.None, |
26 | 26 | }) |
27 | -export class ServiceObjectComponent { | |
27 | +export class ServiceObjectComponent extends StatementBase { | |
28 | 28 | |
29 | - public showGrid: boolean; | |
30 | - public rowData: any[]; | |
31 | - public rowCount: string; | |
32 | 29 | public regions: RegionSelectList[]; |
33 | 30 | public serviceObjectType: ServiceObjectTypeSelectList[]; |
34 | 31 | public departmentAffiliation: DepartmentAffiliationSelectList[]; |
35 | 32 | public settlements: SettlementSelectList[]; |
36 | 33 | public roads: RoadSelectList[]; |
37 | 34 | public boolean: BooleanSelectList[]; |
38 | - public isLoading: boolean = false; | |
39 | - public isBootstrapping: boolean = true; | |
40 | - public isSelected: boolean = true; | |
41 | - private columnDefs: any[]; | |
42 | - private gridOptions: GridOptions; | |
43 | 35 | |
44 | 36 | constructor( |
45 | 37 | protected service: ServiceObjectService, |
46 | 38 | private dataService: ServiceObjectCreateService, |
47 | 39 | private booleanService: BooleanSelectListService, |
48 | 40 | ) { |
49 | - this.gridOptions = <GridOptions>{}; | |
50 | - this.gridOptions.enableSorting = true; | |
51 | - this.showGrid = true; | |
52 | - this.gridOptions.rowModelType = 'virtual'; | |
53 | - this.booleanService.getModels().then((models) => this.boolean = models); | |
54 | - this.dataService.getModels().then((models) => { | |
55 | - this.regions = models.regionSelectListDsM as RegionSelectList[]; | |
56 | - this.serviceObjectType = models.serviceObjectTypeSelectListDsM as ServiceObjectTypeSelectList[]; | |
57 | - this.departmentAffiliation = models.departmentAffiliationSelectListDsM as DepartmentAffiliationSelectList[]; | |
58 | - this.settlements = models.settlementSelectListDsM as SettlementSelectList[]; | |
59 | - this.roads = models.roadSelectListDsM as RoadSelectList[]; | |
60 | - }).then(() => { | |
61 | - this.createColumnDefs(); | |
62 | - this.isBootstrapping = false; | |
63 | - }); | |
64 | - this.service.getData().then((data) => { | |
65 | - if (data.length){ | |
66 | - this.rowData = data; | |
67 | - } else { | |
68 | - this.rowData = [new ServiceObject]; | |
69 | - } | |
41 | + super(); | |
42 | + this.initGrid(); | |
43 | + this.booleanService.getModels().then((models: BooleanSelectList[]) => this.boolean = models); | |
44 | + this.dataService.getModels().then((models: any) => { | |
45 | + this.regions = models.regionSelectListDsM as RegionSelectList[]; | |
46 | + this.serviceObjectType = models.serviceObjectTypeSelectListDsM as ServiceObjectTypeSelectList[]; | |
47 | + this.departmentAffiliation = models.departmentAffiliationSelectListDsM as DepartmentAffiliationSelectList[]; | |
48 | + this.settlements = models.settlementSelectListDsM as SettlementSelectList[]; | |
49 | + this.roads = models.roadSelectListDsM as RoadSelectList[]; | |
50 | + | |
70 | 51 | }).then(() => { |
71 | - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); | |
72 | - this.gridOptions.api.refreshVirtualPageCache(); | |
52 | + this.bootstrapGrid(); | |
73 | 53 | }); |
74 | 54 | } |
75 | - setRowData(allOfTheData) { | |
76 | - let dataSource = { | |
77 | - rowCount: null, // behave as infinite scroll | |
78 | - getRows: function (params) { | |
79 | - console.log('asking for ' + params.startRow + ' to ' + params.endRow); | |
80 | - // At this point in your code, you would call the server, using $http if in AngularJS. | |
81 | - // To make the demo look real, wait for 500ms before returning | |
82 | - // take a slice of the total rows | |
83 | - let rowsThisPage = allOfTheData.slice(params.startRow, params.endRow); | |
84 | - // if on or after the last page, work out the last row. | |
85 | - let lastRow = -1; | |
86 | - if (allOfTheData.length <= params.endRow) { | |
87 | - lastRow = allOfTheData.length; | |
88 | - } | |
89 | - // call the success callback | |
90 | - params.successCallback(rowsThisPage, lastRow); | |
91 | - }, | |
92 | - }; | |
93 | - return dataSource; | |
94 | 55 | |
95 | - } | |
96 | - onDeleteConfirm(event): void { | |
97 | - if (window.confirm('Вы уверены что хотите удалить??')) { | |
98 | - event.confirm.resolve(); | |
99 | - } else { | |
100 | - event.confirm.reject(); | |
56 | + protected createModel(): Object { | |
57 | + return new ServiceObject(); | |
101 | 58 | } |
102 | - } | |
103 | - public addNewRow() { | |
104 | - this.rowData.unshift(new ServiceObject()); | |
105 | - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); | |
106 | - this.gridOptions.api.refreshVirtualPageCache(); | |
107 | - } | |
108 | 59 | |
109 | - private createColumnDefs() { | |
110 | - this.columnDefs = [ | |
60 | + protected createColumnDefs(): any[] { | |
61 | + return [ | |
111 | 62 | { |
112 | 63 | headerName: '#', |
113 | 64 | width: 30, |
... | ... | @@ -118,7 +69,7 @@ export class ServiceObjectComponent { |
118 | 69 | }, |
119 | 70 | { |
120 | 71 | headerName: 'ID', |
121 | - field: 'serviceObjectId', | |
72 | + field: 'id', | |
122 | 73 | }, |
123 | 74 | { |
124 | 75 | headerName: 'Назва дороги', |
... | ... | @@ -214,119 +165,4 @@ export class ServiceObjectComponent { |
214 | 165 | ]; |
215 | 166 | } |
216 | 167 | |
217 | - private onCellClicked($event) { | |
218 | - console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
219 | - } | |
220 | - | |
221 | - private onCellValueChanged($event) { | |
222 | - if ($event.oldValue !== $event.newValue) { | |
223 | - let data = JSON.stringify($event.data); | |
224 | - let id = $event.data.serviceObjectId; | |
225 | - let result = null; | |
226 | - if (id) { | |
227 | - this.isLoading = true; | |
228 | - result = this.service.update(id, data).then(() => this.isLoading = false); | |
229 | - } else { | |
230 | - // Protection of posting new row being already sent. | |
231 | - if (this.isLoading) { | |
232 | - return ; | |
233 | - } | |
234 | - this.isLoading = true; | |
235 | - result = this.service.create(data).then((busStop) => { | |
236 | - this.rowData[$event.node.rowIndex] = busStop; | |
237 | - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); | |
238 | - this.gridOptions.api.refreshVirtualPageCache(); | |
239 | - this.isLoading = false; | |
240 | - }); | |
241 | - } | |
242 | - } | |
243 | - } | |
244 | - | |
245 | - private deleteRows() { | |
246 | - let rows = this.gridOptions.api.getSelectedNodes(); | |
247 | - if (!rows.length) { | |
248 | - return ; | |
249 | - } | |
250 | - rows.forEach((element) => { | |
251 | - let id = element.data.serviceObjectId; | |
252 | - if (id) { | |
253 | - this.isLoading = true; | |
254 | - this.service.delete(id).then(() => this.isLoading = false); | |
255 | - } | |
256 | - }); | |
257 | - // Sort in order to protect array from reindexing (remove rear elements first) | |
258 | - let sorted = rows.sort((a, b) => { | |
259 | - if (a > b) { | |
260 | - return -1; | |
261 | - } else { | |
262 | - return 1; | |
263 | - } | |
264 | - }); | |
265 | - sorted.forEach((item) => { | |
266 | - this.rowData.splice(item.rowIndex, 1); | |
267 | - }); | |
268 | - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); | |
269 | - this.gridOptions.api.refreshVirtualPageCache(); | |
270 | - } | |
271 | - | |
272 | - private onCellDoubleClicked($event) { | |
273 | - console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
274 | - } | |
275 | - | |
276 | - private onCellContextMenu($event) { | |
277 | - console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
278 | - } | |
279 | - | |
280 | - private onCellFocused($event) { | |
281 | - console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')'); | |
282 | - } | |
283 | - | |
284 | - private onRowSelected($event) { | |
285 | - // taking out, as when we 'select all', it prints to much to the console!! | |
286 | - // console.log('onRowSelected: ' + $event.node.data.name); | |
287 | - } | |
288 | - | |
289 | - private onSelectionChanged() { | |
290 | - console.log('selectionChanged'); | |
291 | - } | |
292 | - | |
293 | - private onBeforeFilterChanged() { | |
294 | - console.log('beforeFilterChanged'); | |
295 | - } | |
296 | - | |
297 | - private onAfterFilterChanged() { | |
298 | - console.log('afterFilterChanged'); | |
299 | - } | |
300 | - | |
301 | - private onFilterModified() { | |
302 | - console.log('onFilterModified'); | |
303 | - } | |
304 | - | |
305 | - private onBeforeSortChanged() { | |
306 | - console.log('onBeforeSortChanged'); | |
307 | - } | |
308 | - | |
309 | - private onAfterSortChanged() { | |
310 | - console.log('onAfterSortChanged'); | |
311 | - } | |
312 | - | |
313 | - private onVirtualRowRemoved($event) { | |
314 | - // because this event gets fired LOTS of times, we don't print it to the | |
315 | - // console. if you want to see it, just uncomment out this line | |
316 | - // console.log('onVirtualRowRemoved: ' + $event.rowIndex); | |
317 | - } | |
318 | - | |
319 | - private onRowClicked($event) { | |
320 | - console.log('onRowClicked: ' + $event.node.data.name); | |
321 | - } | |
322 | - | |
323 | - public onQuickFilterChanged($event) { | |
324 | - this.gridOptions.api.setQuickFilter($event.target.value); | |
325 | - } | |
326 | - | |
327 | - // here we use one generic event to handle all the column type events. | |
328 | - // the method just prints the event name | |
329 | - private onColumnEvent($event) { | |
330 | - console.log('onColumnEvent: ' + $event); | |
331 | - } | |
332 | 168 | } | ... | ... |
src/models/bus-stop.ts
src/models/service-object.ts
1 | +import { AfterViewInit } from '@angular/core'; | |
2 | +import { TdLoadingService } from '@covalent/core'; | |
3 | +import { GridOptions, IGetRowsParams, IRowModel, RowNode } from 'ag-grid/main'; | |
4 | + | |
5 | +export abstract class StatementBase implements AfterViewInit { | |
6 | + protected columnDefs: any[]; | |
7 | + protected gridOptions: GridOptions; | |
8 | + protected service: any; | |
9 | + protected loadingService: TdLoadingService; | |
10 | + public showGrid: boolean; | |
11 | + public rowCount: string; | |
12 | + public isLoading: boolean = false; | |
13 | + public isBootstrapping: boolean = true; | |
14 | + public isSelected: boolean = false; | |
15 | + public isNew: boolean = false; | |
16 | + | |
17 | + ngAfterViewInit(): void { | |
18 | + this.gridOptions.api.setDatasource(this.setRowData()); | |
19 | + } | |
20 | + | |
21 | + enableLoader(): void { | |
22 | + if (!this.isLoading) { | |
23 | + this.isLoading = true; | |
24 | + this.loadingService.register('loading'); | |
25 | + } | |
26 | + } | |
27 | + | |
28 | + disableLoader(): void { | |
29 | + if (this.isLoading) { | |
30 | + this.isLoading = false; | |
31 | + this.loadingService.resolve('loading'); | |
32 | + } | |
33 | + } | |
34 | + | |
35 | + public addNewRow(): void { | |
36 | + if (this.getFirstRowID()) { | |
37 | + this.gridOptions.api.insertItemsAtIndex(0, [this.createModel()]); | |
38 | + this.isNew = true; | |
39 | + } | |
40 | + } | |
41 | + | |
42 | + protected initGrid(): void { | |
43 | + this.gridOptions = <GridOptions>{}; | |
44 | + this.gridOptions.enableSorting = true; | |
45 | + this.gridOptions.suppressMultiSort = true; | |
46 | + this.gridOptions.enableServerSideSorting = true; | |
47 | + this.showGrid = true; | |
48 | + this.gridOptions.rowModelType = 'virtual'; | |
49 | + } | |
50 | + | |
51 | + protected bootstrapGrid(): void { | |
52 | + this.columnDefs = this.createColumnDefs(); | |
53 | + this.isBootstrapping = false; | |
54 | + } | |
55 | + | |
56 | + protected setRowData(): {} { | |
57 | + let dataSource: {} = { | |
58 | + rowCount: null, | |
59 | + getRows: (params: IGetRowsParams) => { | |
60 | + let sort: string = null; | |
61 | + if (params.sortModel.length) { | |
62 | + sort = this.parseSort(params.sortModel[0]); | |
63 | + } | |
64 | + this.service.getData(params.startRow, params.endRow, sort).then((data: any) => { | |
65 | + if (!data.length) { | |
66 | + data = [this.createModel()]; | |
67 | + } | |
68 | + let lastRow: number = -1; | |
69 | + if (data.length <= params.endRow) { | |
70 | + lastRow = data.length; | |
71 | + } | |
72 | + params.successCallback(data, lastRow); | |
73 | + }); | |
74 | + }, | |
75 | + }; | |
76 | + return dataSource; | |
77 | + } | |
78 | + | |
79 | + protected parseSort(sort: any): string { | |
80 | + if (sort.colId && sort.sort) { | |
81 | + let result = sort.colId; | |
82 | + if (sort.sort === 'desc') { | |
83 | + result = '-' + result; | |
84 | + } | |
85 | + return result; | |
86 | + } | |
87 | + return null; | |
88 | + } | |
89 | + | |
90 | + protected getFirstRowID(): number { | |
91 | + let model = this.gridOptions.api.getModel().getRow(0); | |
92 | + let id: number = model.data.id; | |
93 | + if (id) { | |
94 | + return id; | |
95 | + } else { | |
96 | + return null; | |
97 | + } | |
98 | + } | |
99 | + | |
100 | + protected onCellValueChanged($event: any): void { | |
101 | + if ($event.oldValue !== $event.newValue) { | |
102 | + let data: string = JSON.stringify($event.data); | |
103 | + let id: number = $event.data.id; | |
104 | + let result: any = null; | |
105 | + if (id) { | |
106 | + this.enableLoader(); | |
107 | + result = this.service.update(id, data).then(() => this.disableLoader()); | |
108 | + } else { | |
109 | + // Protection of posting new row being already sent. | |
110 | + if (this.isLoading) { | |
111 | + return ; | |
112 | + } | |
113 | + this.enableLoader(); | |
114 | + result = this.service.create(data).then((model: any) => { | |
115 | + this.gridOptions.api.setDatasource(this.setRowData()); | |
116 | + this.disableLoader(); | |
117 | + this.isNew = false; | |
118 | + }); | |
119 | + } | |
120 | + } | |
121 | + } | |
122 | + | |
123 | + protected deleteRows(): void { | |
124 | + let rows: RowNode[] = this.gridOptions.api.getSelectedNodes(); | |
125 | + if (!rows.length) { | |
126 | + this.isSelected = false; | |
127 | + return ; | |
128 | + } | |
129 | + rows.forEach((element: RowNode, index: number, array: RowNode[]) => { | |
130 | + let id: number = element.data.id; | |
131 | + if (id) { | |
132 | + this.enableLoader(); | |
133 | + this.service.delete(id).then(() => { | |
134 | + if (index === (array.length - 1)) { | |
135 | + this.disableLoader(); | |
136 | + this.gridOptions.api.setDatasource(this.setRowData()); | |
137 | + this.gridOptions.api.deselectAll(); | |
138 | + this.isNew = false; | |
139 | + } | |
140 | + }); | |
141 | + } | |
142 | + }); | |
143 | + } | |
144 | + | |
145 | + protected onSelectionChanged(): void { | |
146 | + let selection: RowNode[] = this.gridOptions.api.getSelectedNodes(); | |
147 | + if (selection.length) { | |
148 | + if (selection.length === 1) { | |
149 | + this.gridOptions.api.refreshVirtualPageCache(); | |
150 | + this.isNew = false; | |
151 | + } | |
152 | + this.isSelected = true; | |
153 | + } else { | |
154 | + this.isSelected = false; | |
155 | + } | |
156 | + } | |
157 | + | |
158 | + protected onCellClicked($event: any): void { | |
159 | + console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
160 | + } | |
161 | + | |
162 | + protected onCellDoubleClicked($event: any): void { | |
163 | + console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
164 | + } | |
165 | + | |
166 | + protected onCellContextMenu($event: any): void { | |
167 | + console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
168 | + } | |
169 | + | |
170 | + protected onCellFocused($event: any): void { | |
171 | + console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')'); | |
172 | + } | |
173 | + | |
174 | + protected onRowSelected($event: any): void { | |
175 | + // taking out, as when we 'select all', it prints to much to the console!! | |
176 | + // console.log('onRowSelected: ' + $event.node.data.name); | |
177 | + } | |
178 | + | |
179 | + protected onBeforeFilterChanged(): void { | |
180 | + console.log('beforeFilterChanged'); | |
181 | + } | |
182 | + | |
183 | + protected onAfterFilterChanged(): void { | |
184 | + console.log('afterFilterChanged'); | |
185 | + } | |
186 | + | |
187 | + protected onFilterModified(): void { | |
188 | + console.log('onFilterModified'); | |
189 | + } | |
190 | + | |
191 | + protected onBeforeSortChanged(event: any): void { | |
192 | + console.log('onBeforeSortChanged'); | |
193 | + } | |
194 | + | |
195 | + protected onAfterSortChanged($event: any): void { | |
196 | + console.log('onAfterSortChanged'); | |
197 | + } | |
198 | + | |
199 | + protected onVirtualRowRemoved($event: any): void { | |
200 | + // because this event gets fired LOTS of times, we don't print it to the | |
201 | + // console. if you want to see it, just uncomment out this line | |
202 | + // console.log('onVirtualRowRemoved: ' + $event.rowIndex); | |
203 | + } | |
204 | + | |
205 | + protected onRowClicked($event: any): void { | |
206 | + console.log('onRowClicked: ' + $event.node.data.name); | |
207 | + } | |
208 | + | |
209 | + // here we use one generic event to handle all the column type events. | |
210 | + // the method just prints the event name | |
211 | + protected onColumnEvent($event: any): void { | |
212 | + console.log('onColumnEvent: ' + $event); | |
213 | + } | |
214 | + | |
215 | + protected abstract createModel(): Object; | |
216 | + protected abstract createColumnDefs(): any[]; | |
217 | +} | ... | ... |
src/services/bus-stop.service.ts
1 | -import { Injectable } from '@angular/core'; | |
2 | -import { Headers, Http } from '@angular/http'; | |
3 | - | |
4 | -import 'rxjs/add/operator/toPromise'; | |
5 | - | |
6 | 1 | import { BusStop } from '../models/bus-stop'; |
2 | +import { Injectable } from '@angular/core'; | |
3 | +import { StatementBaseService } from '../services/statement.base.service'; | |
4 | +import { Http } from '@angular/http'; | |
7 | 5 | |
8 | 6 | @Injectable() |
9 | -export class BusStopService { | |
10 | - private url = 'http://localhost:5000/busstop'; | |
11 | - private headers = new Headers({'Content-Type': 'application/json'}); | |
12 | - constructor(private http: Http) { } | |
13 | - getData(from: number = 0, to: number = 100, sort: string = null): Promise<BusStop[]> { | |
14 | - let url = this.url; | |
15 | - url += '?from=' + from + '&to=' + to; | |
16 | - if (sort) { | |
17 | - url += '&sort=' + sort; | |
18 | - } | |
19 | - return this.http.get(url) | |
20 | - .toPromise() | |
21 | - .then(response => response.json().busStopEditDsM as BusStop[]) | |
22 | - .catch(this.handleError); | |
23 | - } | |
24 | - update(id: number, data: string): Promise<any> { | |
25 | - return this.http.post(this.url + '/update?id=' + id, data, { headers: this.headers }) | |
26 | - .toPromise() | |
27 | - .then(response => response.json()) | |
28 | - .catch(this.handleError); | |
29 | - } | |
30 | - create(data: string): Promise<BusStop> { | |
31 | - return this.http.post(this.url + '/create', data, { headers: this.headers }) | |
32 | - .toPromise() | |
33 | - .then(response => response.json() as BusStop) | |
34 | - .catch(this.handleError); | |
35 | - } | |
36 | - delete(id: number): Promise<any> { | |
37 | - return this.http.delete(this.url + '/delete?id=' + id, { headers: this.headers }) | |
38 | - .toPromise() | |
39 | - .then(response => response.json()) | |
40 | - .catch(this.handleError); | |
41 | - } | |
42 | - private handleError(error: any): Promise<any> { | |
43 | - console.error('An error occured', error); | |
44 | - return Promise.reject(error.message || error); | |
7 | +export class BusStopService extends StatementBaseService { | |
8 | + protected url: string = 'http://localhost:5000/busstop'; | |
9 | + constructor(protected http: Http) { | |
10 | + super(http); | |
45 | 11 | } |
12 | + protected parseModels(json: any): any[] { | |
13 | + return json.busStopEditDsM as BusStop[]; | |
14 | + }; | |
15 | + protected parseModel(json: any): any { | |
16 | + return json as BusStop; | |
17 | + }; | |
46 | 18 | } | ... | ... |
1 | +import { Headers, Http, Response } from '@angular/http'; | |
2 | + | |
3 | +import 'rxjs/add/operator/toPromise'; | |
4 | + | |
5 | +export abstract class StatementBaseService { | |
6 | + protected abstract url: string; | |
7 | + protected headers: Headers = new Headers({'Content-Type': 'application/json'}); | |
8 | + | |
9 | + constructor(protected http: Http) { } | |
10 | + | |
11 | + getData(from: number = 0, to: number = 100, sort: string = null): Promise<any[]> { | |
12 | + let url: string = this.url; | |
13 | + url += '?from=' + from + '&to=' + to; | |
14 | + if (sort) { | |
15 | + url += '&sort=' + sort; | |
16 | + } | |
17 | + return this.http.get(url) | |
18 | + .toPromise() | |
19 | + .then((response: Response) => this.parseModels(response.json())) | |
20 | + .catch(this.handleError); | |
21 | + } | |
22 | + | |
23 | + update(id: number, data: string): Promise<any> { | |
24 | + return this.http.post(this.url + '/update?id=' + id, data, { headers: this.headers }) | |
25 | + .toPromise() | |
26 | + .then((response: Response) => response.json()) | |
27 | + .catch(this.handleError); | |
28 | + } | |
29 | + | |
30 | + create(data: string): Promise<any> { | |
31 | + return this.http.post(this.url + '/create', data, { headers: this.headers }) | |
32 | + .toPromise() | |
33 | + .then((response: Response) => this.parseModel(response.json())) | |
34 | + .catch(this.handleError); | |
35 | + } | |
36 | + | |
37 | + delete(id: number): Promise<any> { | |
38 | + return this.http.delete(this.url + '/delete?id=' + id, { headers: this.headers }) | |
39 | + .toPromise() | |
40 | + .then((response: Response) => response.json()) | |
41 | + .catch(this.handleError); | |
42 | + } | |
43 | + | |
44 | + protected handleError(error: any): Promise<any> { | |
45 | + console.error('An error occured', error); | |
46 | + return Promise.reject(error.message || error); | |
47 | + } | |
48 | + | |
49 | + protected abstract parseModels(json: any): any[]; | |
50 | + protected abstract parseModel(json: any): any; | |
51 | +} | ... | ... |