statement.base.ts
8.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
import { AfterViewInit, OnInit } from '@angular/core';
import { TdLoadingService } from '@covalent/core';
import { GridOptions, IGetRowsParams, IRowModel, RowNode } from 'ag-grid/main';
import { StatementBaseService } from '../services/statement.base.service';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
export abstract class StatementBase implements AfterViewInit, OnInit {
protected columnDefs: any[];
protected gridOptions: GridOptions;
protected service: StatementBaseService;
protected loadingService: TdLoadingService;
protected paramsSubject: Subject<IGetRowsParams> = new Subject<IGetRowsParams>();
protected params: IGetRowsParams;
protected data: Observable<any[]>;
public showGrid: boolean;
public rowCount: string;
public isLoading: boolean = false;
public isBootstrapping: boolean = true;
public isSelected: boolean = false;
public isNew: boolean = false;
ngOnInit(): void {
this.initGrid();
this.initFunction();
}
ngAfterViewInit(): void {
this.gridOptions.api.setDatasource(this.setRowData());
// this.data = this.paramsSubject
// .switchMap((params: IGetRowsParams) => {
// return this.service.getData(params);
// }).catch((error: any) => {
// console.log(error);
// return Observable.of<any[]>([]);
// });
// this.data.subscribe((data: any[]) => {
// if (!data.length) {
// data = [this.createModel()];
// }
// let lastRow: number = -1;
// if (data.length < (this.params.endRow - this.params.startRow) && !this.isNew) {
// lastRow = data.length;
// }
// this.params.successCallback(data, lastRow);
// });
}
enableLoader(): void {
if (!this.isLoading) {
this.isLoading = true;
this.loadingService.register('loading');
}
}
disableLoader(): void {
if (this.isLoading) {
this.isLoading = false;
this.loadingService.resolve('loading');
}
}
public addNewRow(): void {
if (this.getFirstRowID()) {
this.gridOptions.api.insertItemsAtIndex(0, [this.createModel()]);
this.isNew = true;
}
}
protected initGrid(): void {
this.gridOptions = <GridOptions>{};
this.gridOptions.enableSorting = true;
this.gridOptions.enableFilter = true;
this.gridOptions.suppressMultiSort = true;
this.gridOptions.enableServerSideSorting = true;
this.gridOptions.enableServerSideFilter = true;
this.showGrid = true;
this.gridOptions.rowModelType = 'virtual';
this.gridOptions.paginationPageSize = 10;
this.gridOptions.getRowNodeId = function(item) {
return item.id;
};
}
protected bootstrapGrid(): void {
this.columnDefs = this.createColumnDefs();
this.isBootstrapping = false;
}
// protected setRowData2(): {} {
// let dataSource: {} = {
// rowCount: null,
// getRows: (params: IGetRowsParams) => {
// let sort: string = null;
// if (params.sortModel.length) {
// sort = this.parseSort(params.sortModel[0]);
// }
// this.service.getData(params.startRow, params.endRow, sort).then((data: any) => {
// if (!data.length) {
// data = [this.createModel()];
// }
// let lastRow: number = -1;
// if (data.length <= params.endRow) {
// lastRow = data.length;
// }
// params.successCallback(data, lastRow);
// });
// },
// };
// return dataSource;
// }
protected setRowData(): {} {
let dataSource: {} = {
rowCount: null,
getRows: (params: IGetRowsParams) => {
this.params = params;
// this.paramsSubject.next(params);
this.service.getData(params);
},
};
return dataSource;
}
protected parseSort(sort: any): string {
if (sort.colId && sort.sort) {
let result = sort.colId;
if (sort.sort === 'desc') {
result = '-' + result;
}
return result;
}
return null;
}
protected getFirstRowID(): number {
let model: RowNode = this.gridOptions.api.getModel().getRow(0);
let id: number = model.data.id;
if (id) {
return id;
} else {
return null;
}
}
protected onCellValueChanged($event: any): void {
if ($event.oldValue !== $event.newValue) {
let data: string = JSON.stringify($event.data);
let id: number = $event.data.id;
let result: any = null;
if (id) {
this.enableLoader();
result = this.service.update(id, data).then(() => this.disableLoader());
} else {
// Protection of posting new row being already sent.
if (this.isLoading) {
return ;
}
this.enableLoader();
result = this.service.create(data).then((model: any) => {
this.gridOptions.api.refreshVirtualPageCache();
// this.gridOptions.api.setDatasource(this.setRowData());
this.disableLoader();
this.isNew = false;
});
}
}
}
protected deleteRows(): void {
let rows: RowNode[] = this.gridOptions.api.getSelectedNodes();
if (!rows.length) {
this.isSelected = false;
return ;
}
rows.forEach((element: RowNode, index: number, array: RowNode[]) => {
let id: number = element.data.id;
if (id) {
this.enableLoader();
this.service.delete(id).then(() => {
if (index === (array.length - 1)) {
this.disableLoader();
this.gridOptions.api.refreshVirtualPageCache();
// this.gridOptions.api.setDatasource(this.setRowData());
this.gridOptions.api.deselectAll();
this.isNew = false;
}
});
}
});
}
protected onSelectionChanged(): void {
let selection: RowNode[] = 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;
}
}
protected onCellClicked($event: any): void {
console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
}
protected onCellDoubleClicked($event: any): void {
console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
}
protected onCellContextMenu($event: any): void {
console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field);
}
protected onCellFocused($event: any): void {
console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')');
}
protected onRowSelected($event: any): void {
// taking out, as when we 'select all', it prints to much to the console!!
// console.log('onRowSelected: ' + $event.node.data.name);
}
protected onBeforeFilterChanged(): void {
console.log('beforeFilterChanged');
}
protected onAfterFilterChanged(): void {
console.log('afterFilterChanged');
}
protected onFilterModified(): void {
console.log('onFilterModified');
}
protected onBeforeSortChanged(event: any): void {
console.log('onBeforeSortChanged');
}
protected onAfterSortChanged($event: any): void {
console.log('onAfterSortChanged');
}
protected onVirtualRowRemoved($event: any): void {
// because this event gets fired LOTS of times, we don't print it to the
// console. if you want to see it, just uncomment out this line
// console.log('onVirtualRowRemoved: ' + $event.rowIndex);
}
protected onRowClicked($event: any): void {
console.log('onRowClicked: ' + $event.node.data.name);
}
// here we use one generic event to handle all the column type events.
// the method just prints the event name
protected onColumnEvent($event: any): void {
console.log('onColumnEvent: ' + $event);
}
protected createModel(): Object {
return this.service.createModel();
};
protected abstract createColumnDefs(): any[];
protected abstract initFunction(): void;
}