gerrit.onap Code Review - portal/sdk.git/blob

   1 import { Component, OnInit,  EventEmitter, Output, Input  } from '@angular/core';
   2 import {CompactType, DisplayGrid, GridsterConfig, GridsterItem, GridType} from 'angular-gridster2';
   3 import { DashboardReportGridService } from './dashboard-report-grid.service';
   4
   5
   6 @Component({
   7   selector: 'app-dashboard-report-grid',
   8   templateUrl: './dashboard-report-grid.component.html',
   9   styleUrls: ['./dashboard-report-grid.component.css']
  10 })
  11 export class DashboardReportGridComponent implements OnInit {
  12
  13   options: GridsterConfig;
  14   originalDashboardLength : number;
  15   reportNo : {};
  16   reportDataList : any;
  17   reportChartList : any;
  18   filteredItemsData : any;
  19   filteredItemsChart : any;
  20   // dashboard : {}[];
  21   reportList : {}[];
  22   showSpinner : boolean;
  23
  24   @Input("fetchedDashboardObj") dashboard :  Array<GridsterItem> = new Array();
  25   // @Input("fetchedDashboardObj") fetchedDashboardObj : any;
  26
  27
  28   @Output() transferDashboardObj = new EventEmitter<any>();
  29
  30   constructor(private _dashboardReportGridService : DashboardReportGridService) {
  31     this.reportDataList = new Array();
  32     this.reportChartList = new Array();
  33     this.reportList = new Array();
  34   }
  35
  36   ngOnInit() {
  37
  38     this.showSpinner = true;
  39     // this.dashboard = this.fetchedDashboardObj;
  40
  41
  42     this.options = {
  43       gridType: GridType.Fixed,
  44       margin: 10,
  45       outerMargin: true,
  46       outerMarginTop: 10,
  47       outerMarginRight: 10,
  48       outerMarginBottom: 700,
  49       outerMarginLeft: 10,
  50       scrollSensitivity: 10,
  51       scrollSpeed: 20,
  52       emptyCellDragMaxCols: null,
  53       emptyCellDragMaxRows: null,
  54       emptyCellDropCallback: this.emptyCellClick.bind(this),
  55       emptyCellDragCallback: this.emptyCellClick.bind(this),
  56       ignoreContentClass: 'gridster-item-content',
  57       enableOccupiedCellDrop : true,
  58       ignoreMarginInRow: false,
  59       draggable: {
  60         enabled: true,
  61       },
  62       resizable: {
  63         enabled: true,
  64       },
  65       swap: false,
  66       pushItems: true,
  67       disablePushOnDrag: false,
  68       disablePushOnResize: false,
  69       pushDirections: {north: true, east: true, south: true, west: true},
  70       pushResizeItems: true,
  71       disableWindowResize: true,
  72       disableWarnings: false,
  73       scrollToNewItems: true,
  74       enableDropToAdd : true,
  75       enableEmptyCellDrop : true,
  76       minCols : 2,
  77       minRows : 2,
  78     };
  79
  80     this._dashboardReportGridService.getReportList()
  81     .subscribe((responseReportList) => {
  82       let i=0;
  83
  84       while(responseReportList["rows"][0][i])
  85       {
  86         let j=0;
  87         let name = "";
  88         let id = "";
  89
  90         while(responseReportList["rows"][0][i][j])
  91         {
  92           if(responseReportList["rows"][0][i][j]["columnId"] === "rep_id")
  93           {
  94             id = responseReportList["rows"][0][i][j]["searchresultField"]["displayValue"];
  95           }
  96
  97           if(responseReportList["rows"][0][i][j]["columnId"] === "rep_name")
  98           {
  99             name = responseReportList["rows"][0][i][j]["searchresultField"]["displayValue"];
 100           }
 101
 102
 103           j++;
 104         }
 105         this.reportDataList.push({name : name, id : "Data#" + id});
 106         this.reportChartList.push({name : name, id : "Chart#" + id});
 107         i++
 108       }
 109       // console.log(responseReportList["rows"][0]);
 110       this.assignCopy();
 111       this.showSpinner = false;
 112     });
 113
 114
 115     // this.reportDataList = [
 116     //   {name : "E911 report - PointClickTool - 911 Contacts", id : "Data#1972"}
 117     // ];
 118
 119     // this.reportChartList = [
 120     //   {name : "E911 report - PointClickTool - 911 Contacts", id : "Chart#1972"}
 121     // ];
 122
 123
 124     this.assignCopy();
 125   }
 126
 127   changedOptions() {
 128     if (this.options.api && this.options.api.optionsChanged) {
 129       this.options.api.optionsChanged();
 130     }
 131   }
 132
 133   assignCopy(){
 134
 135       this.filteredItemsData = Object.assign([], this.reportDataList);
 136       this.filteredItemsChart = Object.assign([], this.reportChartList);
 137
 138
 139  }
 140
 141   filterItem(value){
 142     if(!value){
 143         this.assignCopy();
 144     } // when nothing has typed
 145     this.filteredItemsData = Object.assign([], this.reportDataList).filter(
 146        item => (item["name"].toLowerCase().indexOf(value.toLowerCase()) > -1 || item["id"].toLowerCase().indexOf(value.toLowerCase()) > -1)
 147     )
 148     this.filteredItemsChart = Object.assign([], this.reportChartList).filter(
 149       item => (item["name"].toLowerCase().indexOf(value.toLowerCase()) > -1 || item["id"].toLowerCase().indexOf(value.toLowerCase()) > -1)
 150    )
 151  }
 152
 153   emptyCellClick(event: MouseEvent, item: GridsterItem) {
 154     // console.info('empty cell click', event, item);
 155     console.log(this.dashboard);
 156     this.dashboard.push(item);
 157   }
 158
 159   removeItem($event, item) {
 160     $event.preventDefault();
 161     $event.stopPropagation();
 162     this.dashboard.splice(this.dashboard.indexOf(item), 1);
 163     console.log(item.hasContent["id"].split("#")[0]);
 164     if(item.hasContent["id"].split("#")[0] === "Data")
 165     {
 166       this.reportDataList.push(item.hasContent);
 167       this.assignCopy();
 168     }
 169
 170     if(item.hasContent["id"].split("#")[0] === "Chart")
 171     {
 172       this.reportChartList.push(item.hasContent);
 173       this.assignCopy();
 174     }
 175
 176   }
 177
 178   addItem() {
 179     this.dashboard.push({x: 0, y: 0, cols: 1, rows: 1,  dragEnabled: true, resizeEnabled: true, label: 'Drag&Resize Enabled', hasContent:'Hey'});
 180   }
 181
 182   dragStartHandler(ev, report : {}) {
 183
 184     this.originalDashboardLength = this.dashboard.length;
 185     ev.dataTransfer.setData('text/plain', 'Drag Me Button');
 186     ev.dataTransfer.dropEffect = 'copy';
 187     this.reportNo = report;
 188     console.log(this.reportNo);
 189
 190
 191     console.log(this.dashboard.length);
 192
 193
 194   }
 195
 196   ngDoCheck()
 197   {
 198     if(this.dashboard.length > this.originalDashboardLength)
 199     {
 200       console.log(this.reportNo);
 201       this.dashboard[this.dashboard.length-1]["hasContent"]= this.reportNo;
 202
 203
 204     for(let i=0; i<this.reportDataList.length; i++)
 205     {
 206       if(this.reportDataList[i]["id"] === this.reportNo["id"])
 207       {
 208         this.reportDataList.splice(i, 1);
 209         this.assignCopy();
 210       }
 211     }
 212
 213     for(let i=0; i<this.reportChartList.length; i++)
 214     {
 215       if(this.reportChartList[i]["id"] === this.reportNo["id"])
 216       {
 217         this.reportChartList.splice(i, 1);
 218         this.assignCopy();
 219       }
 220     }
 221
 222     }
 223
 224     this.transferDashboardObj.emit(this.dashboard);
 225   }
 226
 227 }
 228