@schneideress/dashboardframework 0.0.98 → 0.0.100

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -827,13 +827,13 @@
827
827
  minRows: 2,
828
828
  maxRows: 100,
829
829
  maxItemCols: 10,
830
- minItemCols: 3,
830
+ minItemCols: 2,
831
831
  maxItemRows: 1000,
832
- minItemRows: 3,
832
+ minItemRows: 2,
833
833
  maxItemArea: 1000,
834
- minItemArea: 3,
835
- defaultItemCols: 3,
836
- defaultItemRows: 3,
834
+ minItemArea: 4,
835
+ defaultItemCols: 2,
836
+ defaultItemRows: 2,
837
837
  // fixedColWidth: 105,
838
838
  // fixedRowHeight: 105,
839
839
  keepFixedHeightInMobile: false,
@@ -887,6 +887,7 @@
887
887
  this.widgetList = Array();
888
888
  this.gridheight = 300;
889
889
  this.isWidgetLoaded = false;
890
+ this.domResized = false;
890
891
  this.widgetHeight = 3;
891
892
  this.widgetWidth = 5;
892
893
  }
@@ -906,6 +907,7 @@
906
907
  */
907
908
  function () {
908
909
  areaContext.setAreaHeight();
910
+ areaContext.domResized = !areaContext.domResized;
909
911
  }), 1000);
910
912
  };
911
913
  /**
@@ -934,12 +936,28 @@
934
936
  this.inititateEventBusSubscritions();
935
937
  }
936
938
  };
939
+ // public invokeResizeEvent() {
940
+ // this.widgetContainers.forEach(function(container,i){
941
+ // container.invokeWidgetResizedEvent();
942
+ // });
943
+ // }
937
944
  /**To set GridsterConfig */
945
+ // public invokeResizeEvent() {
946
+ // this.widgetContainers.forEach(function(container,i){
947
+ // container.invokeWidgetResizedEvent();
948
+ // });
949
+ // }
938
950
  /**
939
951
  * To set GridsterConfig
940
952
  * @return {?}
941
953
  */
942
- RADashboardArea.prototype.initiateGridsterConfig = /**
954
+ RADashboardArea.prototype.initiateGridsterConfig =
955
+ // public invokeResizeEvent() {
956
+ // this.widgetContainers.forEach(function(container,i){
957
+ // container.invokeWidgetResizedEvent();
958
+ // });
959
+ // }
960
+ /**
943
961
  * To set GridsterConfig
944
962
  * @return {?}
945
963
  */
@@ -1186,7 +1204,7 @@
1186
1204
  areaHeight = 600;
1187
1205
  }
1188
1206
  this.gridheight = areaHeight;
1189
- console.log('area height adjusted');
1207
+ console.log('area height adjusted1');
1190
1208
  };
1191
1209
  /** To remove a widget instance from dashboard and to save info in database */
1192
1210
  /**
@@ -1384,7 +1402,7 @@
1384
1402
  RADashboardArea.decorators = [
1385
1403
  { type: core.Component, args: [{
1386
1404
  selector: 'ra-dashboard-area',
1387
- template: "<div #gridWrapper class=\"wrap gridster\" [style.height.px]=\"gridheight\" >\r\n<!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n <gridster [options]=\"options\" style=\"height:100%;\">\r\n <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\" (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\"\r\n [global-filter]=\"globalFilter\" [grid-cell-height]=\"item.widgetInfo.rowHeight\" [widget-width]=\"item.cols\" [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\"></ra-widget-container>\r\n </gridster-item>\r\n </gridster>\r\n <notifier-container></notifier-container>\r\n</div>\r\n\r\n",
1405
+ template: "<div #gridWrapper class=\"wrap gridster\" [style.height.px]=\"gridheight\" >\r\n<!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n <gridster [options]=\"options\" style=\"height:100%;\">\r\n <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n <ra-widget-container [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\" (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\"\r\n [global-filter]=\"globalFilter\" [grid-cell-height]=\"item.widgetInfo.rowHeight\" [widget-width]=\"item.cols\" [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"></ra-widget-container>\r\n </gridster-item>\r\n </gridster>\r\n <notifier-container></notifier-container>\r\n</div>\r\n\r\n",
1388
1406
  styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#ededed;overflow-y:hidden!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}gridster-item{box-sizing:border-box;z-index:1;position:absolute;overflow:hidden;transition:.3s;display:none;background:#fff;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;box-shadow:0 1px 10px rgba(0,0,0,.05)}gridster-item:hover{box-shadow:0 1px 10px rgba(0,0,0,.15)}"]
1389
1407
  }] }
1390
1408
  ];
@@ -1442,6 +1460,8 @@
1442
1460
  */
1443
1461
  RADashboardArea.prototype.isWidgetLoaded;
1444
1462
  /** @type {?} */
1463
+ RADashboardArea.prototype.domResized;
1464
+ /** @type {?} */
1445
1465
  RADashboardArea.prototype.userDashboardId;
1446
1466
  /** @type {?} */
1447
1467
  RADashboardArea.prototype.areaKey;
@@ -1507,6 +1527,8 @@
1507
1527
  this.dropDownShown = false;
1508
1528
  this.isDownloadChartVisible = false;
1509
1529
  this.enableTitleLine = false;
1530
+ this.toolTipValue = ' ';
1531
+ this.toolTipWidth = '0px';
1510
1532
  this.widgetDeleted = new core.EventEmitter();
1511
1533
  this.renderer.listen('window', 'click', (/**
1512
1534
  * @param {?} e
@@ -1527,6 +1549,17 @@
1527
1549
  }
1528
1550
  }));
1529
1551
  }
1552
+ Object.defineProperty(RAWidgetContainer.prototype, "setResized", {
1553
+ set: /**
1554
+ * @param {?} resized
1555
+ * @return {?}
1556
+ */
1557
+ function (resized) {
1558
+ this.invokeWidgetResizedEvent();
1559
+ },
1560
+ enumerable: true,
1561
+ configurable: true
1562
+ });
1530
1563
  /**
1531
1564
  * @param {?} changes
1532
1565
  * @return {?}
@@ -1556,14 +1589,23 @@
1556
1589
  }
1557
1590
  if (changes.width && changes.width.currentValue != changes.width.previousValue ||
1558
1591
  (changes.height && changes.height.currentValue != changes.height.previousValue)) {
1559
- if (this.widgetElement) {
1560
- /** @type {?} */
1561
- var size = {};
1562
- size.height = this.height;
1563
- size.width = this.width;
1564
- size.cellHeight = this.gridCellHeight;
1565
- this.widgetElement.widgetResized(size);
1566
- }
1592
+ this.invokeWidgetResizedEvent();
1593
+ }
1594
+ };
1595
+ /**
1596
+ * @return {?}
1597
+ */
1598
+ RAWidgetContainer.prototype.invokeWidgetResizedEvent = /**
1599
+ * @return {?}
1600
+ */
1601
+ function () {
1602
+ if (this.widgetElement) {
1603
+ /** @type {?} */
1604
+ var size = {};
1605
+ size.height = this.height;
1606
+ size.width = this.width;
1607
+ size.cellHeight = this.gridCellHeight;
1608
+ this.widgetElement.widgetResized(size);
1567
1609
  }
1568
1610
  };
1569
1611
  /**
@@ -1794,6 +1836,27 @@
1794
1836
  });
1795
1837
  });
1796
1838
  };
1839
+ /**
1840
+ * @param {?} event
1841
+ * @return {?}
1842
+ */
1843
+ RAWidgetContainer.prototype.mouseOver = /**
1844
+ * @param {?} event
1845
+ * @return {?}
1846
+ */
1847
+ function (event) {
1848
+ this.toolTipValue = ' ';
1849
+ this.toolTipWidth = '0px';
1850
+ /** @type {?} */
1851
+ var element = this.searchInput.nativeElement;
1852
+ if (element.offsetWidth < element.scrollWidth) {
1853
+ this.toolTipValue = element.innerHTML;
1854
+ this.toolTipWidth = '300px';
1855
+ }
1856
+ else {
1857
+ this.toolTipWidth = '0px';
1858
+ }
1859
+ };
1797
1860
  /**
1798
1861
  * @private
1799
1862
  * @param {?} config
@@ -1943,7 +2006,7 @@
1943
2006
  RAWidgetContainer.decorators = [
1944
2007
  { type: core.Component, args: [{
1945
2008
  selector: 'ra-widget-container',
1946
- template: "<div class=\"wc-wrapper\" (mouseleave)=\"hideDropDown()\">\r\n <div class=\"wcheader widget-move\" [ngClass]=\"{'underLine': enableTitleLine}\">\r\n <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;\">\r\n <div style=\"display:flex;margin-top:10px;\">\r\n\r\n <div class=\"col-md-11 float-left title-label\">\r\n <ra-tooltip [value]=\"data.widgetInfo.widgetTitle\" [width]=\"'300px'\">\r\n <span>{{data.widgetInfo.widgetTitle}}</span>\r\n </ra-tooltip>\r\n </div>\r\n\r\n\r\n <div class=\"col-md-1\" style=\"cursor:default;padding-right: 0px;\">\r\n <div class=\"float-right\" style=\"display: flex;\">\r\n <div class=\"title-bar-icon download download-icon\" *ngIf=\"isDownloadIconVisible\">\r\n <i class=\"fas fa-download\" (mouseover)=\"setDownloadIcon()\" #widgetDownload\r\n (click)=\"downloadClicked()\"></i>\r\n <div class=\"download-content\" [ngClass]=\"{'dropdown-click': isDownloadChartVisible}\">\r\n <a (click)=\"downloadIconClicked('PNG')\">\r\n <i class=\"fal fa-file-image\"></i>\r\n <span>{{'PNG'|translate}}</span>\r\n </a>\r\n <a (click)=\"downloadIconClicked('JPEG')\">\r\n <i class=\"fal fa-file\"></i>\r\n <span>{{'JPEG'|translate}}</span>\r\n </a>\r\n <a (click)=\"downloadIconClicked('PDF')\">\r\n <i class=\"fal fa-file-pdf\"></i>\r\n <span>{{'PDF'|translate}}</span>\r\n </a>\r\n <a (click)=\"downloadIconClicked('SVG')\">\r\n <i class=\"fal fa-file-alt\"></i>\r\n <span>{{'SVG'|translate}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"dropdown\">\r\n <div class=\"dropbtn title-bar-icon\"> <i #widgetDropdown class=\"fas fa-cog\" (click)=\"showDropDown()\"></i>\r\n </div>\r\n <div class=\"dropdown-content widget-config-item\" [ngClass]=\"{'dropdown-click': dropDownShown}\">\r\n <a (click)=\"editWidget()\">\r\n <i class=\"fal fa-edit\"></i>\r\n <span>{{'Edit'|translate}}</span>\r\n </a>\r\n <a (click)=\"copyWidget()\">\r\n <i class=\"fal fa-copy\"></i>\r\n <span>{{'Copy'|translate}}</span>\r\n </a>\r\n <a (click)=\"moveWidget()\">\r\n <i class=\"fal fa-arrows-alt\"></i>\r\n <span>{{'Move'|translate}}</span>\r\n </a>\r\n <hr class=\"hr\">\r\n <a (click)=\"deleteWidget()\">\r\n <i class=\"fal fa-times\" style=\"padding-left: 3px;\"></i>\r\n <span>{{'Delete'|translate}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <ra-tooltip [value]=\"lockTitle\" [width]=\"'300px'\">\r\n <div class=\"title-bar-lock-icon\">\r\n <i [ngClass]=\"lockClass\"></i>\r\n\r\n </div>\r\n </ra-tooltip>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wcBody\">\r\n <div class=\"m-fadeOut widget-overlay\" [ngClass]=\"{'m-fadeIn': showPanel}\">\r\n <div class=\"lds-roller\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </div>\r\n <perfect-scrollbar [scrollIndicators]=\"true\">\r\n <div #ctlWidget></div>\r\n </perfect-scrollbar>\r\n </div>\r\n</div>",
2009
+ template: "<div class=\"wc-wrapper\" (mouseleave)=\"hideDropDown()\">\r\n <div class=\"wcheader widget-move\" [ngClass]=\"{'underLine': enableTitleLine}\">\r\n <div class=\"col-md-12 wc-mover\" style=\"padding-left: 0px;height:inherit;\">\r\n <div style=\"display:flex;margin-top:10px;\">\r\n\r\n <div class=\"col-md-11 float-left title-label\">\r\n <ra-tooltip [value]=\"toolTipValue\" [width]=\"toolTipWidth\">\r\n <div style=\"text-overflow: ellipsis;white-space: nowrap;overflow: hidden;\" (mouseover)=\"mouseOver($event)\"\r\n #searchInput>{{data.widgetInfo.widgetTitle}}</div>\r\n </ra-tooltip>\r\n </div>\r\n\r\n\r\n <div class=\"col-md-1\" style=\"cursor:default;padding-right: 0px;\">\r\n <div class=\"float-right\" style=\"display: flex;\">\r\n <div class=\"title-bar-icon download download-icon\" *ngIf=\"isDownloadIconVisible\">\r\n <i class=\"fal fa-download\" (mouseover)=\"setDownloadIcon()\" #widgetDownload\r\n (click)=\"downloadClicked()\"></i>\r\n <div class=\"download-content\" [ngClass]=\"{'dropdown-click': isDownloadChartVisible}\">\r\n <a (click)=\"downloadIconClicked('PNG')\">\r\n <i class=\"fal fa-file-image\"></i>\r\n <span>{{'PNG'|translate}}</span>\r\n </a>\r\n <a (click)=\"downloadIconClicked('JPEG')\">\r\n <i class=\"fal fa-file\"></i>\r\n <span>{{'JPEG'|translate}}</span>\r\n </a>\r\n <a (click)=\"downloadIconClicked('PDF')\">\r\n <i class=\"fal fa-file-pdf\"></i>\r\n <span>{{'PDF'|translate}}</span>\r\n </a>\r\n <a (click)=\"downloadIconClicked('SVG')\">\r\n <i class=\"fal fa-file-alt\"></i>\r\n <span>{{'SVG'|translate}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <div class=\"dropdown\">\r\n <div class=\"dropbtn title-bar-icon\"> <i #widgetDropdown class=\"fal fa-cog\" (click)=\"showDropDown()\"></i>\r\n </div>\r\n <div class=\"dropdown-content widget-config-item\" [ngClass]=\"{'dropdown-click': dropDownShown}\">\r\n <a (click)=\"editWidget()\">\r\n <i class=\"fal fa-edit\"></i>\r\n <span>{{'Edit'|translate}}</span>\r\n </a>\r\n <a (click)=\"copyWidget()\">\r\n <i class=\"fal fa-copy\"></i>\r\n <span>{{'Copy'|translate}}</span>\r\n </a>\r\n <a (click)=\"moveWidget()\">\r\n <i class=\"fal fa-arrows-alt\"></i>\r\n <span>{{'Move'|translate}}</span>\r\n </a>\r\n <hr class=\"hr\">\r\n <a (click)=\"deleteWidget()\">\r\n <i class=\"fal fa-times\" style=\"padding-left: 3px;\"></i>\r\n <span>{{'Delete'|translate}}</span>\r\n </a>\r\n </div>\r\n </div>\r\n <ra-tooltip [value]=\"lockTitle\" [width]=\"'300px'\">\r\n <div class=\"title-bar-lock-icon\">\r\n <i [ngClass]=\"lockClass\"></i>\r\n\r\n </div>\r\n </ra-tooltip>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"wcBody\">\r\n <div class=\"m-fadeOut widget-overlay\" [ngClass]=\"{'m-fadeIn': showPanel}\">\r\n <div class=\"lds-roller\">\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n <div></div>\r\n </div>\r\n </div>\r\n <perfect-scrollbar [scrollIndicators]=\"true\">\r\n <div #ctlWidget></div>\r\n </perfect-scrollbar>\r\n </div>\r\n</div>",
1947
2010
  styles: [".wcheader{width:100%;height:45px;background:#fff;color:#3dcd58;position:absolute;left:0;top:0}.underLine{border-bottom:2px solid #d4d7d8}.wc-wrapper{height:100%;position:relative;margin:auto 15px}.wc-mover{cursor:all-scroll}.wcBody{width:100%;position:absolute;top:46px;left:0;bottom:15px}.wcBodyBorder{border:1px dashed #e6e2e2}.sp_icon{float:left;margin:0 15% 0 0}.dropbtn{cursor:pointer;color:#42b4e6}.dropdown{visibility:hidden;opacity:0;transition:visibility,opacity .5s linear;position:relative}.dropdown hr{margin:0!important}.dropdown-content{display:none;position:absolute;right:0;background-color:#f9f9f9;min-width:100px;box-shadow:0 8px 16px 8px rgba(0,0,0,.2);z-index:2;font-size:12px;font-weight:400}.dropdown-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown-click{display:block!important;-webkit-animation:.3s ease-out slide-down;animation:.3s ease-out slide-down}.download-icon{cursor:pointer}.dropdown:hover .dropdown-content{color:#fff}.wc-wrapper:hover .dropdown{visibility:visible;opacity:1}.title-bar-icon{margin:0 3px;color:#42b4e6}.title-bar-lock-icon{margin:0 3px}.hr{border:0;border-top:1px solid rgba(0,0,0,.1)}@keyframes slide-down{0%{opacity:0;transform:translateY(-20%)}100%{opacity:1;transform:translateY(0)}}@-webkit-keyframes slide-down{0%{opacity:0;-webkit-transform:translateY(-20%)}100%{opacity:1;-webkit-transform:translateY(0)}}.widget-config-item i{font-size:17px;color:#42b4e6}.widget-config-item span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}.locked{color:#42b4e6}.partiallocked{color:#a0d9f2}.unlocked{display:none}.download{visibility:hidden;opacity:0;transition:visibility,opacity .5s linear;position:relative}.wc-wrapper:hover .download{visibility:visible;opacity:1}.download-content{display:none;position:absolute;right:0;background-color:#f9f9f9;min-width:100px;box-shadow:0 8px 16px 8px rgba(0,0,0,.2);z-index:2;font-size:12px;font-weight:400}.download-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.download-content a:hover{background-color:#f1f1f1}.download-content a i{font-size:17px;color:#42b4e6}.download-content a span{font-size:12px;font:inherit;padding-left:12px;color:#42b4e6}.title-label{width:96%;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}"]
1948
2011
  }] }
1949
2012
  ];
@@ -1960,6 +2023,7 @@
1960
2023
  ctlWidget: [{ type: core.ViewChild, args: ['ctlWidget', { static: false },] }],
1961
2024
  widgetDropdown: [{ type: core.ViewChild, args: ['widgetDropdown', { static: false },] }],
1962
2025
  widgetDownload: [{ type: core.ViewChild, args: ['widgetDownload', { static: false },] }],
2026
+ searchInput: [{ type: core.ViewChild, args: ['searchInput', { static: false },] }],
1963
2027
  widgetInstanceId: [{ type: core.Input, args: ['widget-instance-id',] }],
1964
2028
  globalFilter: [{ type: core.Input, args: ['global-filter',] }],
1965
2029
  data: [{ type: core.Input, args: ['data',] }],
@@ -1968,7 +2032,8 @@
1968
2032
  width: [{ type: core.Input, args: ['widget-width',] }],
1969
2033
  height: [{ type: core.Input, args: ['widget-height',] }],
1970
2034
  gridCellHeight: [{ type: core.Input, args: ['grid-cell-height',] }],
1971
- widgetDeleted: [{ type: core.Output }]
2035
+ widgetDeleted: [{ type: core.Output }],
2036
+ setResized: [{ type: core.Input, args: ['dom-resized',] }]
1972
2037
  };
1973
2038
  return RAWidgetContainer;
1974
2039
  }());
@@ -2012,12 +2077,18 @@
2012
2077
  /** @type {?} */
2013
2078
  RAWidgetContainer.prototype.enableTitleLine;
2014
2079
  /** @type {?} */
2080
+ RAWidgetContainer.prototype.toolTipValue;
2081
+ /** @type {?} */
2082
+ RAWidgetContainer.prototype.toolTipWidth;
2083
+ /** @type {?} */
2015
2084
  RAWidgetContainer.prototype.ctlWidget;
2016
2085
  /** @type {?} */
2017
2086
  RAWidgetContainer.prototype.widgetDropdown;
2018
2087
  /** @type {?} */
2019
2088
  RAWidgetContainer.prototype.widgetDownload;
2020
2089
  /** @type {?} */
2090
+ RAWidgetContainer.prototype.searchInput;
2091
+ /** @type {?} */
2021
2092
  RAWidgetContainer.prototype.widgetInstanceId;
2022
2093
  /** @type {?} */
2023
2094
  RAWidgetContainer.prototype.globalFilter;
@@ -2037,6 +2108,8 @@
2037
2108
  RAWidgetContainer.prototype.widgetDeleted;
2038
2109
  /** @type {?} */
2039
2110
  RAWidgetContainer.prototype.lockTitle;
2111
+ /** @type {?} */
2112
+ RAWidgetContainer.prototype.domResized;
2040
2113
  /**
2041
2114
  * @type {?}
2042
2115
  * @private