Validation try

Yarik
1 parent d78dcf2b
Showing 8 changed files with 132 additions and 51 deletions Show diff stats
src/app/app.module.ts
src/app/app.routes.ts
src/app/data/bus-stop/bus-stop.component.html
src/app/data/bus-stop/bus-stop.component.ts
src/app/data/bus-stop/bus-stop.scss
src/helpers/renderervalid.component.ts
src/helpers/validate.component.html
src/helpers/validate.component.ts
 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&lt;any&gt;[] = [
     }),
     CovalentHighlightModule.forRoot(),
     CovalentMarkdownModule.forRoot(),
+    CovalentLoadingModule.forRoot(),
     appRoutes,
     NgxChartsModule,
   ], // modules needed to run this module
@@ -70,7 +71,7 @@ const httpInterceptorProviders: Type&lt;any&gt;[] = [
     Title,
     BusStopCreateService,
     BooleanSelectListService,
-    BusStopService
+    BusStopService,
   ], // additional providers needed for this module
   entryComponents: [ ],
   bootstrap: [ AppComponent ],
@@ -9,10 +9,10 @@ import { BusStopComponent } from &#39;./data/bus-stop/bus-stop.component&#39;;
 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},
-      ]}
+      ]},
   ]},
 ];
 <md-card tdMediaToggle="gt-xs" [mediaClasses]="['push']">
-<<<<<<< HEAD
-    <div>
-        <h1>Rich Grid with Pure JavaScript</h1>
-        <div style="clear: both;"></div>
-        <div *ngIf="showGrid">
-            <button md-raised-button color="accent" (click)="addNewRow()" type="button">Добавить новое поле</button>
-            <button md-raised-button color="warn" (click)="deleteRows()" type="button">Удалить</button>
-            <div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
-                Loading
-            </div>
-            <div *ngIf="isLoading" class="">
-                ...Loading
-            </div>
-            <ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-dark" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
-                toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)"
-                (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()"
-                (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged()" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)">
-            </ag-grid-ng2>
-=======
     <div *ngIf="showGrid">
-        <div class="control_button">
-            <button md-fab color="accent" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
-            <button md-fab color="warn" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
->>>>>>> f4c3aacea95ba58d99581795e79264058b7dd372
-        </div>
-        <div *ngIf="isLoading" class="">
-            ...Loading
-        </div>
         <ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-dark" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
             toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)"
             (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()"
             (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged()" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)">
         </ag-grid-ng2>
+        <div class="control_button">
+            <div *tdLoading="'loading'; mode:'indeterminate'; type:'circle'; strategy:'replace'; color:'accent'"></div>
+            <button md-fab color="accent" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
+            <button md-fab color="warn" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
+        </div>
     </div>
 </md-card>
 \ No newline at end of file
-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 &#39;../../../models/surface-type-select-list&#39;
     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 = <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)
@@ -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
+import { Component } from '@angular/core';
+
+import { AgRendererComponent } from 'ag-grid-ng2/main';
+
+@Component({
+    selector: 'render-cell',
+    template: `<span *ngIf="this.value !== undefined">{{this.value}}</span>`,
+})
+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;
+    }
+}
+<div #container class="form-group" [ngClass]="{'has-error':!form.controls[field].valid && form.controls[field].touched}">
+    <input class="form-control" type="text" placeholder="Doe" [formControl]="form.controls[field]" [(ngModel)]="value">
+    <div *ngIf="form.controls[field].hasError('required') && form.controls[field].touched" class="alert alert-danger">You must include a last name.</div>
+    <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>
+    <div *ngIf="form.controls[field].hasError('maxlength') && form.controls[field].touched" class="alert alert-danger">Your last name cannot exceed 10 characters.</div>
+</div>
 \ No newline at end of file
+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;
+    }
+}