Commit 091b66bb5578e898a45b6e0ba28c5fa76d241c52
marge
Showing
7 changed files
with
133 additions
and
24 deletions
Show diff stats
src/app/app.module.ts
1 | 1 | import { NgModule, Type } from '@angular/core'; |
2 | 2 | import { BrowserModule, Title } from '@angular/platform-browser'; |
3 | 3 | |
4 | -import { CovalentCoreModule } from '@covalent/core'; | |
4 | +import { CovalentCoreModule, CovalentLoadingModule } from '@covalent/core'; | |
5 | 5 | import { CovalentHttpModule, IHttpInterceptor } from '@covalent/http'; |
6 | 6 | import { CovalentHighlightModule } from '@covalent/highlight'; |
7 | 7 | import { CovalentMarkdownModule } from '@covalent/markdown'; |
... | ... | @@ -61,6 +61,7 @@ const httpInterceptorProviders: Type<any>[] = [ |
61 | 61 | }), |
62 | 62 | CovalentHighlightModule.forRoot(), |
63 | 63 | CovalentMarkdownModule.forRoot(), |
64 | + CovalentLoadingModule.forRoot(), | |
64 | 65 | appRoutes, |
65 | 66 | NgxChartsModule, |
66 | 67 | ], // modules needed to run this module |
... | ... | @@ -70,7 +71,7 @@ const httpInterceptorProviders: Type<any>[] = [ |
70 | 71 | Title, |
71 | 72 | BusStopCreateService, |
72 | 73 | BooleanSelectListService, |
73 | - BusStopService | |
74 | + BusStopService, | |
74 | 75 | ], // additional providers needed for this module |
75 | 76 | entryComponents: [ ], |
76 | 77 | bootstrap: [ AppComponent ], | ... | ... |
src/app/app.routes.ts
... | ... | @@ -9,10 +9,10 @@ import { BusStopComponent } from './data/bus-stop/bus-stop.component'; |
9 | 9 | const routes: Routes = [ |
10 | 10 | {path: 'login', component: LoginComponent}, |
11 | 11 | {path: '', component: MainComponent, children: [ |
12 | - {path: '',component: TemplatesComponent}, | |
12 | + {path: '', component: TemplatesComponent}, | |
13 | 13 | {path: 'data', component: DataComponent, children: [ |
14 | 14 | {path: 'bus-stop', component: BusStopComponent}, |
15 | - ]} | |
15 | + ]}, | |
16 | 16 | ]}, |
17 | 17 | ]; |
18 | 18 | ... | ... |
src/app/data/bus-stop/bus-stop.component.ts
1 | -import {Component, ViewEncapsulation} from "@angular/core"; | |
2 | -import {GridOptions} from "ag-grid/main"; | |
1 | +import { Component, ViewEncapsulation } from '@angular/core'; | |
2 | +import { TdLoadingService } from '@covalent/core'; | |
3 | +import { GridOptions } from 'ag-grid/main'; | |
3 | 4 | |
4 | 5 | import { BusStopService } from '../../../services/bus-stop.service'; |
5 | 6 | import { BusStop } from '../../../models/bus-stop'; |
... | ... | @@ -21,10 +22,12 @@ import { SurfaceTypeSelectList } from '../../../models/surface-type-select-list' |
21 | 22 | selector: 'bus-grid', |
22 | 23 | templateUrl: 'bus-stop.component.html', |
23 | 24 | styleUrls: ['bus-stop.scss'], |
24 | - encapsulation: ViewEncapsulation.None | |
25 | + encapsulation: ViewEncapsulation.None, | |
25 | 26 | }) |
26 | 27 | export class BusStopComponent { |
27 | 28 | |
29 | + private columnDefs: any[]; | |
30 | + private gridOptions: GridOptions; | |
28 | 31 | public showGrid: boolean; |
29 | 32 | public rowData: any[]; |
30 | 33 | public rowCount: string; |
... | ... | @@ -37,20 +40,19 @@ export class BusStopComponent { |
37 | 40 | public isLoading: boolean = false; |
38 | 41 | public isBootstrapping: boolean = true; |
39 | 42 | public isSelected: boolean = true; |
40 | - private columnDefs: any[]; | |
41 | - private gridOptions: GridOptions; | |
42 | 43 | |
43 | 44 | constructor( |
44 | 45 | protected service: BusStopService, |
45 | 46 | private dataService: BusStopCreateService, |
46 | - private booleanService: BooleanSelectListService | |
47 | + private booleanService: BooleanSelectListService, | |
48 | + private loadingService: TdLoadingService, | |
47 | 49 | ) { |
48 | 50 | this.gridOptions = <GridOptions>{}; |
49 | - this.gridOptions.enableSorting = true; | |
50 | - this.showGrid = true; | |
51 | - this.gridOptions.rowModelType = 'virtual'; | |
52 | - this.booleanService.getModels().then((models) => this.boolean = models); | |
53 | - this.dataService.getModels().then(models => { | |
51 | + this.gridOptions.enableSorting = true; | |
52 | + this.showGrid = true; | |
53 | + this.gridOptions.rowModelType = 'virtual'; | |
54 | + this.booleanService.getModels().then((models) => this.boolean = models); | |
55 | + this.dataService.getModels().then(models => { | |
54 | 56 | this.regions = models.regionSelectListDsM as RegionSelectList[]; |
55 | 57 | this.states = models.stateCommonSelectListDsM as StateCommonSelectList[]; |
56 | 58 | this.surfaceTypes = models.surfaceTypeSelectListDsM as SurfaceTypeSelectList[]; |
... | ... | @@ -60,11 +62,11 @@ export class BusStopComponent { |
60 | 62 | this.createColumnDefs(); |
61 | 63 | this.isBootstrapping = false; |
62 | 64 | }); |
63 | - this.service.getData().then((data) => { | |
65 | + this.service.getData().then((data) => { | |
64 | 66 | if (data.length){ |
65 | 67 | this.rowData = data; |
66 | 68 | } else { |
67 | - this.rowData = [new BusStop]; | |
69 | + this.rowData = [new BusStop()]; | |
68 | 70 | } |
69 | 71 | }).then(() => { |
70 | 72 | this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); |
... | ... | @@ -90,7 +92,18 @@ export class BusStopComponent { |
90 | 92 | } |
91 | 93 | }; |
92 | 94 | return dataSource; |
93 | - | |
95 | + } | |
96 | + enableLoader(): void { | |
97 | + if (!this.isLoading) { | |
98 | + this.isLoading = true; | |
99 | + this.loadingService.register('loading'); | |
100 | + } | |
101 | + } | |
102 | + disableLoader(): void { | |
103 | + if (this.isLoading) { | |
104 | + this.isLoading = false; | |
105 | + this.loadingService.resolve('loading'); | |
106 | + } | |
94 | 107 | } |
95 | 108 | onDeleteConfirm(event): void { |
96 | 109 | if (window.confirm('Вы уверены что хотите удалить??')) { |
... | ... | @@ -190,19 +203,19 @@ export class BusStopComponent { |
190 | 203 | let id = $event.data.busStopId; |
191 | 204 | let result = null; |
192 | 205 | if (id) { |
193 | - this.isLoading = true; | |
194 | - result = this.service.update(id, data).then(() => this.isLoading = false); | |
206 | + this.enableLoader(); | |
207 | + result = this.service.update(id, data).then(() => this.disableLoader()); | |
195 | 208 | } else { |
196 | 209 | // Protection of posting new row being already sent. |
197 | 210 | if (this.isLoading) { |
198 | 211 | return ; |
199 | 212 | } |
200 | - this.isLoading = true; | |
213 | + this.enableLoader(); | |
201 | 214 | result = this.service.create(data).then((busStop) => { |
202 | 215 | this.rowData[$event.node.rowIndex] = busStop; |
203 | 216 | this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); |
204 | 217 | this.gridOptions.api.refreshVirtualPageCache(); |
205 | - this.isLoading = false; | |
218 | + this.disableLoader(); | |
206 | 219 | }); |
207 | 220 | } |
208 | 221 | } |
... | ... | @@ -216,8 +229,8 @@ export class BusStopComponent { |
216 | 229 | rows.forEach(element => { |
217 | 230 | let id = element.data.busStopId; |
218 | 231 | if (id) { |
219 | - this.isLoading = true; | |
220 | - this.service.delete(id).then(() => this.isLoading = false); | |
232 | + this.enableLoader(); | |
233 | + this.service.delete(id).then(() => this.disableLoader()); | |
221 | 234 | } |
222 | 235 | }); |
223 | 236 | // Sort in order to protect array from reindexing (remove rear elements first) | ... | ... |
src/app/data/bus-stop/bus-stop.scss
1 | 1 | .toolbar button { |
2 | 2 | margin: 2px; |
3 | 3 | padding: 0; |
4 | +} | |
5 | + | |
6 | +.control_button { | |
7 | + position: fixed; | |
8 | + bottom: 10px; | |
9 | + right: 10px; | |
10 | + td-loading { | |
11 | + width: 56px; | |
12 | + height: 56px; | |
13 | + float: left; | |
14 | + margin-right: 20px; | |
15 | + .td-loading-wrapper { | |
16 | + margin-top: -10px; | |
17 | + } | |
18 | + } | |
4 | 19 | } |
5 | 20 | \ No newline at end of file | ... | ... |
1 | +import { Component } from '@angular/core'; | |
2 | + | |
3 | +import { AgRendererComponent } from 'ag-grid-ng2/main'; | |
4 | + | |
5 | +@Component({ | |
6 | + selector: 'render-cell', | |
7 | + template: `<span *ngIf="this.value !== undefined">{{this.value}}</span>`, | |
8 | +}) | |
9 | +export class RendererValidComponent implements AgRendererComponent { | |
10 | + private params: any; | |
11 | + private value: string = null; | |
12 | + agInit(params: any): void { | |
13 | + this.params = params; | |
14 | + this.setValue(params); | |
15 | + } | |
16 | + refresh(params: any): void { | |
17 | + this.params = params; | |
18 | + console.log(params); | |
19 | + this.setValue(params); | |
20 | + } | |
21 | + private setValue(params) { | |
22 | + this.value = params.value; | |
23 | + } | |
24 | +} | ... | ... |
1 | +<div #container class="form-group" [ngClass]="{'has-error':!form.controls[field].valid && form.controls[field].touched}"> | |
2 | + <input class="form-control" type="text" placeholder="Doe" [formControl]="form.controls[field]" [(ngModel)]="value"> | |
3 | + <div *ngIf="form.controls[field].hasError('required') && form.controls[field].touched" class="alert alert-danger">You must include a last name.</div> | |
4 | + <div *ngIf="form.controls[field].hasError('minlength') && form.controls[field].touched" class="alert alert-danger">Your last name must be at least 5 characters long.</div> | |
5 | + <div *ngIf="form.controls[field].hasError('maxlength') && form.controls[field].touched" class="alert alert-danger">Your last name cannot exceed 10 characters.</div> | |
6 | +</div> | |
0 | 7 | \ No newline at end of file | ... | ... |
1 | +import { Component, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; | |
2 | +import { FormGroup } from '@angular/forms'; | |
3 | + | |
4 | +import { AgEditorComponent } from 'ag-grid-ng2/main'; | |
5 | + | |
6 | +@Component({ | |
7 | + selector: 'editor-cell', | |
8 | + templateUrl: './validate.component.html', | |
9 | +}) | |
10 | +export class ValidateComponent implements AgEditorComponent, AfterViewInit { | |
11 | + private params: any; | |
12 | + private value: string = null; | |
13 | + | |
14 | + @ViewChild('container', {read: ViewContainerRef}) public container: any; | |
15 | + public form: FormGroup; | |
16 | + public field: string; | |
17 | + | |
18 | + ngAfterViewInit(): void { | |
19 | + this.container.element.nativeElement.focus(); | |
20 | + } | |
21 | + | |
22 | + agInit(params: any): void { | |
23 | + this.params = params; | |
24 | + this.form = params.form; | |
25 | + this.field = params.field; | |
26 | + } | |
27 | + | |
28 | + getValue(): any { | |
29 | + console.log('From getter', this.value); | |
30 | + return this.value; | |
31 | + } | |
32 | + | |
33 | + setValue(value: string): void { | |
34 | + this.value = value; | |
35 | + console.log('From setter', this.value); | |
36 | + } | |
37 | + | |
38 | + isPopup(): boolean { | |
39 | + return true; | |
40 | + } | |
41 | + | |
42 | + editorChange(event): boolean { | |
43 | + event.preventDefault(); | |
44 | + event.stopPropagation(); | |
45 | + this.setValue(this.form.value[this.field]); | |
46 | + this.params.api.stopEditing(); | |
47 | + event.stopPropagation(); | |
48 | + return false; | |
49 | + } | |
50 | +} | ... | ... |