diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5259f93..bc6cd99 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,7 +1,7 @@ import { NgModule, Type } from '@angular/core'; import { BrowserModule, Title } from '@angular/platform-browser'; -import { CovalentCoreModule } from '@covalent/core'; +import { CovalentCoreModule, CovalentLoadingModule } from '@covalent/core'; import { CovalentHttpModule, IHttpInterceptor } from '@covalent/http'; import { CovalentHighlightModule } from '@covalent/highlight'; import { CovalentMarkdownModule } from '@covalent/markdown'; @@ -61,6 +61,7 @@ const httpInterceptorProviders: Type[] = [ }), CovalentHighlightModule.forRoot(), CovalentMarkdownModule.forRoot(), + CovalentLoadingModule.forRoot(), appRoutes, NgxChartsModule, ], // modules needed to run this module @@ -70,7 +71,7 @@ const httpInterceptorProviders: Type[] = [ Title, BusStopCreateService, BooleanSelectListService, - BusStopService + BusStopService, ], // additional providers needed for this module entryComponents: [ ], bootstrap: [ AppComponent ], diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index bbbfdfd..82dc10f 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -9,10 +9,10 @@ import { BusStopComponent } from './data/bus-stop/bus-stop.component'; const routes: Routes = [ {path: 'login', component: LoginComponent}, {path: '', component: MainComponent, children: [ - {path: '',component: TemplatesComponent}, + {path: '', component: TemplatesComponent}, {path: 'data', component: DataComponent, children: [ {path: 'bus-stop', component: BusStopComponent}, - ]} + ]}, ]}, ]; diff --git a/src/app/data/bus-stop/bus-stop.component.html b/src/app/data/bus-stop/bus-stop.component.html index 983e0ce..7440e09 100644 --- a/src/app/data/bus-stop/bus-stop.component.html +++ b/src/app/data/bus-stop/bus-stop.component.html @@ -1,36 +1,14 @@ -<<<<<<< HEAD -
-

Rich Grid with Pure JavaScript

-
-
- - -
- Loading -
-
- ...Loading -
- - -=======
-
- - ->>>>>>> f4c3aacea95ba58d99581795e79264058b7dd372 -
-
- ...Loading -
+
+
+ + +
\ No newline at end of file diff --git a/src/app/data/bus-stop/bus-stop.component.ts b/src/app/data/bus-stop/bus-stop.component.ts index c29529f..d9d1837 100644 --- a/src/app/data/bus-stop/bus-stop.component.ts +++ b/src/app/data/bus-stop/bus-stop.component.ts @@ -1,5 +1,6 @@ -import {Component, ViewEncapsulation} from "@angular/core"; -import {GridOptions} from "ag-grid/main"; +import { Component, ViewEncapsulation } from '@angular/core'; +import { TdLoadingService } from '@covalent/core'; +import { GridOptions } from 'ag-grid/main'; import { BusStopService } from '../../../services/bus-stop.service'; import { BusStop } from '../../../models/bus-stop'; @@ -21,10 +22,12 @@ import { SurfaceTypeSelectList } from '../../../models/surface-type-select-list' selector: 'rich-grid', templateUrl: 'bus-stop.component.html', styleUrls: ['bus-stop.scss'], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, }) export class BusStopComponent { + private columnDefs: any[]; + private gridOptions: GridOptions; public showGrid: boolean; public rowData: any[]; public rowCount: string; @@ -37,20 +40,19 @@ export class BusStopComponent { public isLoading: boolean = false; public isBootstrapping: boolean = true; public isSelected: boolean = true; - private columnDefs: any[]; - private gridOptions: GridOptions; constructor( protected service: BusStopService, private dataService: BusStopCreateService, - private booleanService: BooleanSelectListService + private booleanService: BooleanSelectListService, + private loadingService: TdLoadingService, ) { this.gridOptions = {}; - this.gridOptions.enableSorting = true; - this.showGrid = true; - this.gridOptions.rowModelType = 'virtual'; - this.booleanService.getModels().then((models) => this.boolean = models); - this.dataService.getModels().then(models => { + this.gridOptions.enableSorting = true; + this.showGrid = true; + this.gridOptions.rowModelType = 'virtual'; + this.booleanService.getModels().then((models) => this.boolean = models); + this.dataService.getModels().then(models => { this.regions = models.regionSelectListDsM as RegionSelectList[]; this.states = models.stateCommonSelectListDsM as StateCommonSelectList[]; this.surfaceTypes = models.surfaceTypeSelectListDsM as SurfaceTypeSelectList[]; @@ -60,11 +62,11 @@ export class BusStopComponent { this.createColumnDefs(); this.isBootstrapping = false; }); - this.service.getData().then((data) => { + this.service.getData().then((data) => { if (data.length){ this.rowData = data; } else { - this.rowData = [new BusStop]; + this.rowData = [new BusStop()]; } }).then(() => { this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); @@ -90,7 +92,18 @@ export class BusStopComponent { } }; return dataSource; - + } + enableLoader(): void { + if (!this.isLoading) { + this.isLoading = true; + this.loadingService.register('loading'); + } + } + disableLoader(): void { + if (this.isLoading) { + this.isLoading = false; + this.loadingService.resolve('loading'); + } } onDeleteConfirm(event): void { if (window.confirm('Вы уверены что хотите удалить??')) { @@ -190,19 +203,19 @@ export class BusStopComponent { let id = $event.data.busStopId; let result = null; if (id) { - this.isLoading = true; - result = this.service.update(id, data).then(() => this.isLoading = false); + 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.isLoading = true; + this.enableLoader(); result = this.service.create(data).then((busStop) => { this.rowData[$event.node.rowIndex] = busStop; this.gridOptions.api.setDatasource(this.setRowData(this.rowData)); this.gridOptions.api.refreshVirtualPageCache(); - this.isLoading = false; + this.disableLoader(); }); } } @@ -216,8 +229,8 @@ export class BusStopComponent { rows.forEach(element => { let id = element.data.busStopId; if (id) { - this.isLoading = true; - this.service.delete(id).then(() => this.isLoading = false); + this.enableLoader(); + this.service.delete(id).then(() => this.disableLoader()); } }); // Sort in order to protect array from reindexing (remove rear elements first) diff --git a/src/app/data/bus-stop/bus-stop.scss b/src/app/data/bus-stop/bus-stop.scss index e09afa5..3e0e06d 100644 --- a/src/app/data/bus-stop/bus-stop.scss +++ b/src/app/data/bus-stop/bus-stop.scss @@ -7,4 +7,13 @@ position: fixed; bottom: 10px; right: 10px; + td-loading { + width: 56px; + height: 56px; + float: left; + margin-right: 20px; + .td-loading-wrapper { + margin-top: -10px; + } + } } \ No newline at end of file diff --git a/src/helpers/renderervalid.component.ts b/src/helpers/renderervalid.component.ts new file mode 100644 index 0000000..1cd6c9b --- /dev/null +++ b/src/helpers/renderervalid.component.ts @@ -0,0 +1,24 @@ +import { Component } from '@angular/core'; + +import { AgRendererComponent } from 'ag-grid-ng2/main'; + +@Component({ + selector: 'render-cell', + template: `{{this.value}}`, +}) +export class RendererValidComponent implements AgRendererComponent { + private params: any; + private value: string = null; + agInit(params: any): void { + this.params = params; + this.setValue(params); + } + refresh(params: any): void { + this.params = params; + console.log(params); + this.setValue(params); + } + private setValue(params) { + this.value = params.value; + } +} diff --git a/src/helpers/validate.component.html b/src/helpers/validate.component.html new file mode 100644 index 0000000..b6f8e77 --- /dev/null +++ b/src/helpers/validate.component.html @@ -0,0 +1,6 @@ +
+ +
You must include a last name.
+
Your last name must be at least 5 characters long.
+
Your last name cannot exceed 10 characters.
+
\ No newline at end of file diff --git a/src/helpers/validate.component.ts b/src/helpers/validate.component.ts new file mode 100644 index 0000000..58c0a71 --- /dev/null +++ b/src/helpers/validate.component.ts @@ -0,0 +1,50 @@ +import { Component, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core'; +import { FormGroup } from '@angular/forms'; + +import { AgEditorComponent } from 'ag-grid-ng2/main'; + +@Component({ + selector: 'editor-cell', + templateUrl: './validate.component.html', +}) +export class ValidateComponent implements AgEditorComponent, AfterViewInit { + private params: any; + private value: string = null; + + @ViewChild('container', {read: ViewContainerRef}) public container: any; + public form: FormGroup; + public field: string; + + ngAfterViewInit(): void { + this.container.element.nativeElement.focus(); + } + + agInit(params: any): void { + this.params = params; + this.form = params.form; + this.field = params.field; + } + + getValue(): any { + console.log('From getter', this.value); + return this.value; + } + + setValue(value: string): void { + this.value = value; + console.log('From setter', this.value); + } + + isPopup(): boolean { + return true; + } + + editorChange(event): boolean { + event.preventDefault(); + event.stopPropagation(); + this.setValue(this.form.value[this.field]); + this.params.api.stopEditing(); + event.stopPropagation(); + return false; + } +} -- libgit2 0.21.4