Commit 1392e7de24e257d1dd8b34c13ef6b64f35658329
1 parent
8084e2dd
Awesome
Showing
7 changed files
with
322 additions
and
449 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,46 @@ 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 states: StateCommonSelectList[]; |
| 34 | 31 | public departmentAffiliation: DepartmentAffiliationList[]; |
| 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.states = models.stateCommonSelectListDsM as StateCommonSelectList[]; | |
| 57 | - this.departmentAffiliation = models.departmentAffiliationListDsM as DepartmentAffiliationList[]; | |
| 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.states = models.stateCommonSelectListDsM as StateCommonSelectList[]; | |
| 47 | + this.departmentAffiliation = models.departmentAffiliationListDsM as DepartmentAffiliationList[]; | |
| 48 | + this.settlements = models.settlementSelectListDsM as SettlementSelectList[]; | |
| 49 | + this.roads = models.roadSelectListDsM as RoadSelectList[]; | |
| 70 | 50 | }).then(() => { |
| 71 | - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); | |
| 72 | - this.gridOptions.api.refreshVirtualPageCache(); | |
| 51 | + this.bootstrapGrid(); | |
| 73 | 52 | }); |
| 74 | 53 | } |
| 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 | 54 | |
| 95 | - } | |
| 96 | - onDeleteConfirm(event): void { | |
| 97 | - if (window.confirm('Вы уверены что хотите удалить??')) { | |
| 98 | - event.confirm.resolve(); | |
| 99 | - } else { | |
| 100 | - event.confirm.reject(); | |
| 55 | + protected createModel(): Object { | |
| 56 | + return new ServiceObject(); | |
| 101 | 57 | } |
| 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 | 58 | |
| 109 | - private createColumnDefs() { | |
| 110 | - this.columnDefs = [ | |
| 59 | + protected createColumnDefs(): any[] { | |
| 60 | + return [ | |
| 111 | 61 | { |
| 112 | 62 | headerName: '#', |
| 113 | 63 | width: 30, |
| ... | ... | @@ -118,7 +68,7 @@ export class ServiceObjectComponent { |
| 118 | 68 | }, |
| 119 | 69 | { |
| 120 | 70 | headerName: 'ID', |
| 121 | - field: 'serviceObjectId', | |
| 71 | + field: 'id', | |
| 122 | 72 | }, |
| 123 | 73 | { |
| 124 | 74 | headerName: 'Назва дороги', |
| ... | ... | @@ -156,120 +106,4 @@ export class ServiceObjectComponent { |
| 156 | 106 | }, |
| 157 | 107 | ]; |
| 158 | 108 | } |
| 159 | - | |
| 160 | - private onCellClicked($event) { | |
| 161 | - console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
| 162 | - } | |
| 163 | - | |
| 164 | - private onCellValueChanged($event) { | |
| 165 | - if ($event.oldValue !== $event.newValue) { | |
| 166 | - let data = JSON.stringify($event.data); | |
| 167 | - let id = $event.data.busStopId; | |
| 168 | - let result = null; | |
| 169 | - if (id) { | |
| 170 | - this.isLoading = true; | |
| 171 | - result = this.service.update(id, data).then(() => this.isLoading = false); | |
| 172 | - } else { | |
| 173 | - // Protection of posting new row being already sent. | |
| 174 | - if (this.isLoading) { | |
| 175 | - return ; | |
| 176 | - } | |
| 177 | - this.isLoading = true; | |
| 178 | - result = this.service.create(data).then((busStop) => { | |
| 179 | - this.rowData[$event.node.rowIndex] = busStop; | |
| 180 | - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); | |
| 181 | - this.gridOptions.api.refreshVirtualPageCache(); | |
| 182 | - this.isLoading = false; | |
| 183 | - }); | |
| 184 | - } | |
| 185 | - } | |
| 186 | - } | |
| 187 | - | |
| 188 | - private deleteRows() { | |
| 189 | - let rows = this.gridOptions.api.getSelectedNodes(); | |
| 190 | - if (!rows.length) { | |
| 191 | - return ; | |
| 192 | - } | |
| 193 | - rows.forEach((element) => { | |
| 194 | - let id = element.data.busStopId; | |
| 195 | - if (id) { | |
| 196 | - this.isLoading = true; | |
| 197 | - this.service.delete(id).then(() => this.isLoading = false); | |
| 198 | - } | |
| 199 | - }); | |
| 200 | - // Sort in order to protect array from reindexing (remove rear elements first) | |
| 201 | - let sorted = rows.sort((a, b) => { | |
| 202 | - if (a > b) { | |
| 203 | - return -1; | |
| 204 | - } else { | |
| 205 | - return 1; | |
| 206 | - } | |
| 207 | - }); | |
| 208 | - sorted.forEach((item) => { | |
| 209 | - this.rowData.splice(item.rowIndex, 1); | |
| 210 | - }); | |
| 211 | - this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); | |
| 212 | - this.gridOptions.api.refreshVirtualPageCache(); | |
| 213 | - } | |
| 214 | - | |
| 215 | - private onCellDoubleClicked($event) { | |
| 216 | - console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
| 217 | - } | |
| 218 | - | |
| 219 | - private onCellContextMenu($event) { | |
| 220 | - console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field); | |
| 221 | - } | |
| 222 | - | |
| 223 | - private onCellFocused($event) { | |
| 224 | - console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')'); | |
| 225 | - } | |
| 226 | - | |
| 227 | - private onRowSelected($event) { | |
| 228 | - // taking out, as when we 'select all', it prints to much to the console!! | |
| 229 | - // console.log('onRowSelected: ' + $event.node.data.name); | |
| 230 | - } | |
| 231 | - | |
| 232 | - private onSelectionChanged() { | |
| 233 | - console.log('selectionChanged'); | |
| 234 | - } | |
| 235 | - | |
| 236 | - private onBeforeFilterChanged() { | |
| 237 | - console.log('beforeFilterChanged'); | |
| 238 | - } | |
| 239 | - | |
| 240 | - private onAfterFilterChanged() { | |
| 241 | - console.log('afterFilterChanged'); | |
| 242 | - } | |
| 243 | - | |
| 244 | - private onFilterModified() { | |
| 245 | - console.log('onFilterModified'); | |
| 246 | - } | |
| 247 | - | |
| 248 | - private onBeforeSortChanged() { | |
| 249 | - console.log('onBeforeSortChanged'); | |
| 250 | - } | |
| 251 | - | |
| 252 | - private onAfterSortChanged() { | |
| 253 | - console.log('onAfterSortChanged'); | |
| 254 | - } | |
| 255 | - | |
| 256 | - private onVirtualRowRemoved($event) { | |
| 257 | - // because this event gets fired LOTS of times, we don't print it to the | |
| 258 | - // console. if you want to see it, just uncomment out this line | |
| 259 | - // console.log('onVirtualRowRemoved: ' + $event.rowIndex); | |
| 260 | - } | |
| 261 | - | |
| 262 | - private onRowClicked($event) { | |
| 263 | - console.log('onRowClicked: ' + $event.node.data.name); | |
| 264 | - } | |
| 265 | - | |
| 266 | - public onQuickFilterChanged($event) { | |
| 267 | - this.gridOptions.api.setQuickFilter($event.target.value); | |
| 268 | - } | |
| 269 | - | |
| 270 | - // here we use one generic event to handle all the column type events. | |
| 271 | - // the method just prints the event name | |
| 272 | - private onColumnEvent($event) { | |
| 273 | - console.log('onColumnEvent: ' + $event); | |
| 274 | - } | |
| 275 | 109 | } | ... | ... |
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 | +} | ... | ... |