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 | +} | ... | ... |