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