Dropdown

Yarik
1 parent d675b823
Showing 16 changed files with 157 additions and 25 deletions Show diff stats
src/app/app.module.ts
src/app/components/editor.component.ts
src/app/components/renderer.component.ts
src/app/models/regionselectlist.ts
src/app/models/roadselectlist.ts
src/app/models/settlementselectlist.ts
src/app/models/statecommonselectlist.ts
src/app/models/surfacetypeselectlist.ts
src/app/pages/statements/components/busStop2/busStop2.component.ts
src/app/pages/statements/components/busStop2/busStop2.ts
src/app/pages/statements/statements.module.ts
src/app/services/regionselectlist.service.ts
src/app/services/roadselectlist.service.ts
src/app/services/settlementselectlist.service.ts
src/app/services/statecommonselectlist.service.ts
src/app/services/surfacetypeselectlist.service.ts
@@ -5,6 +5,9 @@ import { HttpModule } from &#39;@angular/http&#39;;
 import { RouterModule } from '@angular/router';
 import { removeNgStyles, createNewHosts, createInputTransfer } from '@angularclass/hmr';
  
+// Services
+import { RegionSelectListService } from './services/regionselectlist.service';
+
 /*
  * Platform and Environment providers/directives/pipes
  */
@@ -50,7 +53,8 @@ export type StoreType = {
   ],
   providers: [ // expose our Services and Providers into Angular's dependency injection
     ENV_PROVIDERS,
-    APP_PROVIDERS
+    APP_PROVIDERS,
+    RegionSelectListService
   ]
 })
  
+import { Component, ViewContainerRef, ViewChild, AfterViewInit } from '@angular/core';
+
+import { AgEditorComponent } from 'ag-grid-ng2/main';
+
+import { RegionSelectList } from '../models/regionselectlist';
+
+@Component({
+    selector: 'editor-cell',
+    template: `
+        <div #container>
+            <p *ngFor="let item of data" (click)="onClick(item)" >{{item.name}}</p>
+        </div>
+    `
+})
+export class EditorComponent implements AgEditorComponent, AfterViewInit {
+    @ViewChild('container', {read: ViewContainerRef}) public container;
+    public item: any;
+    public data: RegionSelectList[];
+    private params: any;
+    ngAfterViewInit() {
+        this.container.element.nativeElement.focus();
+    }
+
+    agInit(params: any): void {
+        this.params = params;
+        this.data = params.data || [];
+        // this.setHappy(params.value === "Happy");
+    }
+
+    getValue(): any {
+        return this.item;
+    }
+
+    isPopup(): boolean {
+        return true;
+    }
+
+    setValue(item: any): void {
+        this.item = item;
+    }
+
+    onClick(item: any) {
+        this.setValue(item);
+        this.params.api.stopEditing();
+    }
+
+    onKeyDown(event): boolean {
+        event.stopPropagation();
+        return false;
+    }
+}
+import { Component } from '@angular/core';
+
+import { AgRendererComponent } from 'ag-grid-ng2/main';
+
+import { RegionSelectList } from '../models/regionselectlist';
+
+@Component({
+    selector: 'render-cell',
+    template: `<span *ngIf="this.region">{{this.region.name}}</span>`
+})
+export class RendererComponent implements AgRendererComponent {
+    private params: any;
+    private region: RegionSelectList;
+    agInit(params: any): void {
+        this.params = params;
+        console.log(params);
+        this.setValue(params);
+    }
+    refresh(params: any): void {
+        this.params = params;
+        console.log(params);
+        this.setValue(params);
+    }
+    private setValue(params) {
+        this.region = params.value;
+        console.log(params);
+    }
+}
+export class RegionSelectList {
+    regionId: number;
+    name: string;
+ }
+export class RoadSelectList { }
+export class SettlementSelectList { }
+export class StateCommonSelectList { }
+export class SurfaceTypeSelectList { }
@@ -4,6 +4,10 @@ import { BusStop2Service } from &#39;./busStop2.service&#39;;
 import { busStop2 } from './busStop2';
 import { LocalDataSource } from 'ng2-smart-table';
 import { GridOptions } from 'ag-grid/main';
+import { RegionSelectListService } from '../../../../services/regionselectlist.service';
+import { RegionSelectList } from '../../../../models/regionselectlist';
+import { EditorComponent } from '../../../../components/editor.component';
+import { RendererComponent } from '../../../../components/renderer.component';
  
 @Component({
   selector: 'statement-table',
@@ -19,24 +23,27 @@ export class BusStop2 {
   public showGrid: boolean;
   public rowData: any[];
   public rowCount: string;
+  public regions: RegionSelectList[];
   private gridOptions: GridOptions;
   private columnDefs: any[];
  
  
-  constructor(protected service: BusStop2Service) {
+  constructor(protected service: BusStop2Service, private regionlistservice: RegionSelectListService) {
+    this.regionlistservice.getModels().then(models => {
+      this.regions = models;
+      this.createColumnDefs();
+    });
     this.gridOptions = <GridOptions>{};
     // this.gridOptions.rowModelType = 'virtual';
     this.service.getData().then((data) => {
       console.log(data);
-      if(data.length){
+      if (data.length){
         // this.source.load(data);
         this.rowData = data;
       } else {
-         this.rowData = [new busStop2]
+         this.rowData = [new busStop2];
       }
-  
     });
-    this.createColumnDefs();
     this.showGrid = true;
   }
  
@@ -66,15 +73,20 @@ export class BusStop2 {
       },
       {
         headerName: 'Назва дороги',
-        field: 'road',
+        field: 'roadId',
         editable: true,
         width: 150
       },
       {
         headerName: 'Область',
-        field: 'region',
+        field: 'regionId',
         editable: true,
-        width: 150
+        width: 150,
+        cellEditorFramework: EditorComponent,
+        cellRendererFramework: RendererComponent,
+        cellEditorParams: {
+          data: this.regions
+        }
       },
       {
         headerName: 'Місцезнаходження, км+ справа',
@@ -90,7 +102,7 @@ export class BusStop2 {
       },
       {
         headerName: 'Технічний стан',
-        field: 'state',
+        field: 'stateCommonId',
         editable: true,
         width: 150
       }
 export class busStop2 {
-    RoadId: number;
-    RegionId: number;
-    SettlementId: number;
-    LocationLeft: string;
-    LocationRight: string;
-    SurfaceTypeId: string;
-    AreaStopAvailability: string;
-    AreaLandAvailability: string;
-    PocketAvailability: string;
-    ToiletAvailability: string;
-    YearBuild: string;
-    YearRepair: string;
-    StateCommonId: number;
+    roadId: number;
+    regionId: number;
+    settlementId: number;
+    locationLeft: string;
+    locationRight: string;
+    surfaceTypeId: string;
+    areaStopAvailability: string;
+    areaLandAvailability: string;
+    pocketAvailability: string;
+    toiletAvailability: string;
+    yearBuild: string;
+    yearRepair: string;
+    stateCommonId: number;
 }
@@ -9,6 +9,8 @@ import { routing }       from &#39;./statements.routing&#39;;
 import { Statements } from './statements.component';
 import { BusStop } from './components/busStop/busStop.component';
 import { BusStop2 } from './components/busStop2/busStop2.component';
+import { EditorComponent } from '../../components/editor.component';
+import { RendererComponent } from '../../components/renderer.component';
 import { BusStopService } from './components/busStop/busStop.service';
 import { BusStop2Service } from './components/busStop2/busStop2.service';
  
@@ -20,13 +22,17 @@ import { BusStop2Service } from &#39;./components/busStop2/busStop2.service&#39;;
     routing,
     Ng2SmartTableModule,
     AgGridModule.withComponents([
-      BusStop2
+      BusStop2,
+      EditorComponent,
+      RendererComponent,
     ]),
   ],
   declarations: [
     Statements,
     BusStop,
-    BusStop2
+    BusStop2,
+    EditorComponent,
+    RendererComponent,
   ],
   providers: [
     BusStopService,
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+
+import { RegionSelectList } from '../models/regionselectlist';
+
+@Injectable()
+export class RegionSelectListService {
+    private apiUrl = 'http://localhost:5000/directory/regionds';
+    private headers = new Headers({'Content-Type': 'applicaton/json'});
+    constructor(private http: Http) { }
+    getModels(): Promise<RegionSelectList[]> {
+        return this.http.get(this.apiUrl)
+            .toPromise()
+            .then(response => response.json().regionSelectListDsM as RegionSelectList[])
+            .catch(this.handleError);
+    }
+    private handleError(error: any): Promise<any> {
+        console.error('An error occured', error);
+        return Promise.reject(error.message || error);
+    }
+}