refactor bus stop

Administrator
1 parent 4384eb9b
Showing 5 changed files with 190 additions and 71 deletions Show diff stats
src/app/pages/statements/components/busStop2/busStop2.component.ts
src/app/pages/statements/components/busStop2/busStop2.html
src/app/pages/statements/components/busStop2/busStop2.service.ts
src/app/pages/statements/components/busStop2/directory.service.ts
src/app/services/busstopcreate.service.ts
@@ -22,7 +22,6 @@ import { RendererComponent } from &#39;../../../../components/renderer.component&#39;;
   templateUrl: './busStop2.html',
 })
 export class BusStop2 {
-  // source: LocalDataSource = new LocalDataSource();
   public showGrid: boolean;
   public rowData: any[] = [];
@@ -40,45 +39,52 @@ export class BusStop2 {
     protected service: BusStop2Service,
     private dataService: BusStopCreateService,
     ) {
-    this.gridOptions = <GridOptions>{};
-    this.gridOptions.rowModelType = 'virtual';
-    this.showGrid = true;
-    let dataSource = {
-            rowCount: null, // behave as infinite scroll
-            getRows: function (params) {
-                // At this point in your code, you would call the server, using $http if in AngularJS.
-                // To make the demo look real, wait for 500ms before returning
-                    // take a slice of the total rows
-                    let rowsThisPage = this.rowData.slice(params.startRow, params.endRow);
-                    // if on or after the last page, work out the last row.
-                    let lastRow = -1;
-                    if (this.rowData.length <= params.endRow) {
-                        lastRow = this.rowData.length;
-                    }
-                    // call the success callback
-                    params.successCallback(rowsThisPage, lastRow);
-            }.bind(this)
-        };
-        this.gridOptions.datasource =  dataSource;
+      this.gridOptions = <GridOptions>{};
+      this.showGrid = true;
+      this.gridOptions.rowModelType = 'virtual';
       this.dataService.getModels().then(models => {
         this.regions = models.regionSelectListDsM as RegionSelectList[];
         this.states = models.stateCommonSelectListDsM as StateCommonSelectList[];
         this.surfaceTypes = models.surfaceTypeSelectListDsM as SurfaceTypeSelectList[];
         this.settlements = models.settlementSelectListDsM as SettlementSelectList[];
         this.roads = models.roadSelectListDsM as RoadSelectList[];
-        this.service.getData().then((data) => {
+      }).then(() => {
+            this.createColumnDefs();
+      });
+      this.service.getData().then((data) => {
           if (data.length){
-            // this.source.load(data);
             this.rowData = data;
           } else {
             this.rowData = [new busStop2];
           }
-        this.createColumnDefs();
-        this.gridOptions.api.refreshVirtualPageCache();
-        });
+      }).then(() => {
+          this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
+          this.gridOptions.api.refreshVirtualPageCache();
       });
   }
+
+  setRowData(allOfTheData) {
+      let dataSource = {
+          rowCount: null, // behave as infinite scroll
+          getRows: function (params) {
+              console.log('asking for ' + params.startRow + ' to ' + params.endRow);
+              // At this point in your code, you would call the server, using $http if in AngularJS.
+              // To make the demo look real, wait for 500ms before returning
+              // take a slice of the total rows
+              let rowsThisPage = allOfTheData.slice(params.startRow, params.endRow);
+              // if on or after the last page, work out the last row.
+              let lastRow = -1;
+              if (allOfTheData.length <= params.endRow) {
+                  lastRow = allOfTheData.length;
+              }
+              // call the success callback
+              params.successCallback(rowsThisPage, lastRow);
+          }
+      };
+      return dataSource;
+
+  }
   onDeleteConfirm(event): void {
     if (window.confirm('Вы уверены что хотите удалить??')) {
       event.confirm.resolve();
@@ -88,29 +94,10 @@ export class BusStop2 {
   }
   public addNewRow() {
         this.rowData.unshift(new busStop2());
+        this.gridOptions.api.setDatasource(this.setRowData(this.rowData));
         this.gridOptions.api.refreshVirtualPageCache();
   }
-  private setRowData(data) {
-    let dataSource = {
-            rowCount: null, // behave as infinite scroll
-            getRows: function (params) {
-                // At this point in your code, you would call the server, using $http if in AngularJS.
-                // To make the demo look real, wait for 500ms before returning
-                setTimeout( function() {
-                    // take a slice of the total rows
-                    var rowsThisPage = data.slice(params.startRow, params.endRow);
-                    // if on or after the last page, work out the last row.
-                    var lastRow = -1;
-                    if (data.length <= params.endRow) {
-                        lastRow = data.length;
-                    }
-                    // call the success callback
-                    params.successCallback(rowsThisPage, lastRow);
-                }, 500);
-            }
-        };
-        this.gridOptions.datasource =  dataSource;
-  }
+
   private createColumnDefs() {
     this.columnDefs = [
       {
@@ -124,7 +111,6 @@ export class BusStop2 {
       {
         headerName: 'ID',
         field: 'id',
-        editable: true,
         width: 150
       },
       {
@@ -180,4 +166,75 @@ export class BusStop2 {
       }
     ];
   }
+
+
+    private onCellClicked($event) {
+        console.log('onCellClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
+    }
+
+    private onCellValueChanged($event) {
+        console.log($event.data);
+        console.log('onCellValueChanged: ' + $event.oldValue + ' to ' + $event.newValue);
+    }
+
+    private onCellDoubleClicked($event) {
+        console.log('onCellDoubleClicked: ' + $event.rowIndex + ' ' + $event.colDef.field);
+    }
+
+    private onCellContextMenu($event) {
+        console.log('onCellContextMenu: ' + $event.rowIndex + ' ' + $event.colDef.field);
+    }
+
+    private onCellFocused($event) {
+        console.log('onCellFocused: (' + $event.rowIndex + ',' + $event.colIndex + ')');
+    }
+
+    private onRowSelected($event) {
+        // taking out, as when we 'select all', it prints to much to the console!!
+        // console.log('onRowSelected: ' + $event.node.data.name);
+    }
+
+    private onSelectionChanged() {
+        console.log('selectionChanged');
+    }
+
+    private onBeforeFilterChanged() {
+        console.log('beforeFilterChanged');
+    }
+
+    private onAfterFilterChanged() {
+        console.log('afterFilterChanged');
+    }
+
+    private onFilterModified() {
+        console.log('onFilterModified');
+    }
+
+    private onBeforeSortChanged() {
+        console.log('onBeforeSortChanged');
+    }
+
+    private onAfterSortChanged() {
+        console.log('onAfterSortChanged');
+    }
+
+    private onVirtualRowRemoved($event) {
+        // because this event gets fired LOTS of times, we don't print it to the
+        // console. if you want to see it, just uncomment out this line
+        // console.log('onVirtualRowRemoved: ' + $event.rowIndex);
+    }
+
+    private onRowClicked($event) {
+        console.log('onRowClicked: ' + $event.node.data.name);
+    }
+
+    public onQuickFilterChanged($event) {
+        this.gridOptions.api.setQuickFilter($event.target.value);
+    }
+
+    // here we use one generic event to handle all the column type events.
+    // the method just prints the event name
+    private onColumnEvent($event) {
+        console.log('onColumnEvent: ' + $event);
+    }
 }
@@ -3,8 +3,47 @@
     <div class="row">
         <ba-card title="Автобусні зупинки" baCardClass="with-scroll">
             <button class="btn btn-warning" (click)="addNewRow()" type="button">Добавить новое поле</button>
-            <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">
+            <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)"
+            (cellValueChanged)="onCellValueChanged($event)"
+    
+            (cellContextMenu)="onCellContextMenu($event)"
+            
+            (cellFocused)="onCellFocused($event)"
+            (rowSelected)="onRowSelected($event)"
+            (selectionChanged)="onSelectionChanged()"
+            (beforeFilterChanged)="onBeforeFilterChanged()"
+            (afterFilterChanged)="onAfterFilterChanged()"
+            (filterModified)="onFilterModified()"
+            (beforeSortChanged)="onBeforeSortChanged()"
+            (afterSortChanged)="onAfterSortChanged()"
+            (virtualRowRemoved)="onVirtualRowRemoved($event)"
+
+
+            (columnEverythingChanged)="onColumnEvent($event)"
+            (columnRowGroupChanged)="onColumnEvent($event)"
+            (columnValueChanged)="onColumnEvent($event)"
+            (columnMoved)="onColumnEvent($event)"
+            (columnVisible)="onColumnEvent($event)"
+            (columnGroupOpened)="onColumnEvent($event)"
+            (columnResized)="onColumnEvent($event)"
+            (columnPinnedCountChanged)="onColumnEvent($event)">
+            >
             </ag-grid-ng2>
         </ba-card>
     </div>
@@ -11,26 +11,26 @@ export class BusStop2Service {
   private headers = new Headers({'Content-Type': 'application/json'});
   constructor(private http: Http) { }
   getData(): Promise<busStop2[]> {
-    let busStops: busStop2[] = [{
-      roadId: 1,
-      regionId: 1,
-      settlementId: 1,
-      surfaceTypeId: '1',
-      locationLeft: '1',
-      locationRight: '1',
-      stateCommonId: 1,
-      areaStopAvailability: '',
-      areaLandAvailability: '',
-      pocketAvailability: '',
-      toiletAvailability: '',
-      yearBuild: '',
-      yearRepair: '',
-    }];
-    return Promise.resolve(busStops);
-    // return this.http.get(this.url)
-    //   .toPromise()
-    //   .then(response => response.json().busStopEditDsM as busStop2[])
-    //   .catch(this.handleError);
+    // let busStops: busStop2[] = [{
+    //   roadId: 1,
+    //   regionId: 1,
+    //   settlementId: 1,
+    //   surfaceTypeId: '1',
+    //   locationLeft: '1',
+    //   locationRight: '1',
+    //   stateCommonId: 1,
+    //   areaStopAvailability: '',
+    //   areaLandAvailability: '',
+    //   pocketAvailability: '',
+    //   toiletAvailability: '',
+    //   yearBuild: '',
+    //   yearRepair: '',
+    // }];
+    // return Promise.resolve(busStops);
+    return this.http.get(this.url)
+      .toPromise()
+      .then(response => response.json().busStopEditDsM as busStop2[])
+      .catch(this.handleError);
   }
   private handleError(error: any): Promise<any> {
     console.error('An error occured', error);
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import 'rxjs/add/operator/toPromise';
+
+import { busStop2 } from './busStop2';
+
+@Injectable()
+export class BusStop2Service {
+  private url = 'http://localhost:5000/busstop/directory';
+  private headers = new Headers({'Content-Type': 'application/json'});
+  constructor(private http: Http) { }
+  getData(): Promise<busStop2[]> {
+    return this.http.get(this.url)
+      .toPromise()
+      .then(response => response.json())
+      .catch(this.handleError);
+  }
+  private handleError(error: any): Promise<any> {
+    console.error('An error occured', error);
+    return Promise.reject(error.message || error);
+  }
+}
@@ -5,7 +5,7 @@ import &#39;rxjs/add/operator/toPromise&#39;;
 @Injectable()
 export class BusStopCreateService {
-    private apiUrl = 'http://localhost:5000/busstop';
+    private apiUrl = 'http://localhost:5000/busstop/directory';
     private headers = new Headers({'Content-Type': 'applicaton/json'});
     constructor(private http: Http) { }
     getModels(): Promise<any> {