@schneideress/dashboardframework 0.0.266 → 0.0.268

package/fesm2015/schneideress-dashboardframework.js

@@ -417,6 +417,7 @@ let RADashboardArea = class RADashboardArea {
         this.domResized = false;
         this.showEmptyDashboard = false;
         this.isWidgetMgmnt = false;
+        this.initialWidgetCount = 10;
         this.widgetHeight = 2;
         this.widgetWidth = 4;
         this.hideDashboardBanner = new EventEmitter();
@@ -609,6 +610,8 @@ let RADashboardArea = class RADashboardArea {
     }
     /** To retrieve widgets based on userDashboardid and area name */
     loadWidgets(userDashboarId, areaKey) {
+        if (this.templateConfig && this.templateConfig.initialWidgetCount)
+            this.initialWidgetCount = this.templateConfig.initialWidgetCount;
         let widgetInfo = {
             dashboardId: userDashboarId.toString(),
             dashboardAreaKey: areaKey
@@ -637,6 +640,46 @@ let RADashboardArea = class RADashboardArea {
             }
         });
     }
+    widgetLoaded(widget) {
+        let lst = this.widgetList.filter((item) => {
+            return item.widgetLoaded == true;
+        });
+        widget.widgetLoaded = true;
+        if (lst.length == 0) {
+            this.startLoadWidgetData(this.widgetList);
+        }
+    }
+    startLoadWidgetData(lst) {
+        if (lst) {
+            if (lst.length < this.initialWidgetCount) {
+                for (let i = 0; i < lst.length; i++)
+                    this.loadWidgetData(lst[i]);
+            }
+            else
+                for (let i = 0; i < this.initialWidgetCount; i++)
+                    this.loadWidgetData(lst[i]);
+        }
+    }
+    loadWidgetData(widget) {
+        widget.dataTriggered = true;
+        if (widget.widgetLoaded) {
+            setTimeout(() => {
+                widget.canLoadData = true;
+            });
+        }
+        else
+            setTimeout(() => {
+                this.loadWidgetData(widget);
+            }, 1000);
+    }
+    dataLoaded() {
+        for (let i = 0; i < this.widgetList.length; i++) {
+            if (!this.widgetList[i].dataTriggered) {
+                this.loadWidgetData(this.widgetList[i]);
+                break;
+            }
+        }
+    }
     /** To set Area(Gridster) height dynamically as widgets are added/removed */
     setAreaHeight() {
         setTimeout(() => {
@@ -886,6 +929,10 @@ __decorate([
     Input('dashboard-info'),
     __metadata("design:type", Object)
 ], RADashboardArea.prototype, "dashboardInfo", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], RADashboardArea.prototype, "templateConfig", void 0);
 __decorate([
     Output(),
     __metadata("design:type", Object)
@@ -897,7 +944,7 @@ __decorate([
 RADashboardArea = __decorate([
     Component({
         selector: 'ra-dashboard-area',
-        template: "<div #gridWrapper class=\"wrap gridster gridster-mobile\" [ngStyle]=\"{'height': userWidgets.length > 0 ? (gridheight + 'px') : 'unset'}\">\r\n  <!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n  <gridster [options]=\"options\" style=\"height:100%;\" *ngIf=\"userWidgets.length > 0\">\r\n    <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n      <ra-widget-container [bulk-action-data]=\"bulkActionData\" [dashboard-info]=\"dashboardInfo\" [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\"\r\n        (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\" [global-filter]=\"globalFilter\"\r\n        [grid-cell-height]=\"gridcellHeight\" *ngIf=\"gridcellHeight && gridcellHeight > 0\" [widget-width]=\"item.cols\"\r\n        [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"\r\n        (updateAppliedFilters)=\"updateAppliedFilters($event)\">\r\n      </ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n\r\n  <div class=\"empty-padding kiosk-hide\" *ngIf=\"showEmptyDashboard\">\r\n    <div class=\"empty-wrapper\">\r\n      <div></div>\r\n      <div class=\"empty-prefix\">\r\n        <!-- <i class=\"fal fa-edit edit-icon\"></i> -->\r\n        <span>{{emptyDashboardTitle}}</span>\r\n      </div>\r\n      <hr class=\"horizontalLine-solid\" />\r\n      <div class=\"empty-content light\">\r\n        <div>\r\n          <div class=\"col-sm-12 empty-msg\">\r\n            {{emptyDashboardMsg1}} <br />\r\n            {{emptyDashboardMsg2}}\r\n          </div>\r\n          <button *ngIf=\"isWidgetMgmnt\" class=\"btn btnLib btn-sm dashboard-button light\" (click)=\"buttonClick()\">\r\n            <i class=\"{{emptyDashboardButtonIcon}}\"></i>{{emptyDashboardButtonText}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <notifier-container></notifier-container>\r\n</div>",
+        template: "<div #gridWrapper class=\"wrap gridster gridster-mobile\" [ngStyle]=\"{'height': userWidgets.length > 0 ? (gridheight + 'px') : 'unset'}\">\r\n  <!-- <div #gridWrapper class=\"wrap gridster\"> -->\r\n  <gridster [options]=\"options\" style=\"height:100%;\" *ngIf=\"userWidgets.length > 0\">\r\n    <gridster-item [item]=\"item\" *ngFor=\"let item of widgetList\">\r\n      <ra-widget-container (widgetLoaded)=\"widgetLoaded(item)\" (dataLoaded)=\"dataLoaded()\" [canLoadData]=\"item.canLoadData\" [bulk-action-data]=\"bulkActionData\" [dashboard-info]=\"dashboardInfo\" [app-config]=\"appConfig\" [event-bus]=\"raDashboardEventBus\"\r\n        (widgetDeleted)=\"deleteWidget($event)\" [data]=\"item\" [global-filter]=\"globalFilter\"\r\n        [grid-cell-height]=\"gridcellHeight\" *ngIf=\"gridcellHeight && gridcellHeight > 0\" [widget-width]=\"item.cols\"\r\n        [widget-height]=\"item.rows\" [widget-instance-id]=\"item.widgetInstanceId\" [dom-resized]=\"domResized\"\r\n        (updateAppliedFilters)=\"updateAppliedFilters($event)\">\r\n      </ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n\r\n  <div class=\"empty-padding kiosk-hide\" *ngIf=\"showEmptyDashboard\">\r\n    <div class=\"empty-wrapper\">\r\n      <div></div>\r\n      <div class=\"empty-prefix\">\r\n        <!-- <i class=\"fal fa-edit edit-icon\"></i> -->\r\n        <span>{{emptyDashboardTitle}}</span>\r\n      </div>\r\n      <hr class=\"horizontalLine-solid\" />\r\n      <div class=\"empty-content light\">\r\n        <div>\r\n          <div class=\"col-sm-12 empty-msg\">\r\n            {{emptyDashboardMsg1}} <br />\r\n            {{emptyDashboardMsg2}}\r\n          </div>\r\n          <button *ngIf=\"isWidgetMgmnt\" class=\"btn btnLib btn-sm dashboard-button light\" (click)=\"buttonClick()\">\r\n            <i class=\"{{emptyDashboardButtonIcon}}\"></i>{{emptyDashboardButtonText}}</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <notifier-container></notifier-container>\r\n</div>",
         styles: ["gridster{width:inherit;resize:height;display:flex;background-color:#fff;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;user-select:text;box-shadow:none}gridster-item:hover{box-shadow:0 1px 10px rgba(0,0,0,.15)!important}@media screen and (max-width:685px){.gridster-mobile{height:auto!important;margin-bottom:50px!important}}@media screen and (max-width:350px){.gridster-mobile{min-height:330px!important;margin-bottom:0!important}}.empty-padding{padding:15px 0;background-color:#fff;display:flex}.empty-wrapper{background-color:#fff;border:1px solid #9fa0a4;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:18px;padding:15px}.empty-content{color:#626469;width:100%;padding:15px}.empty-msg{padding:0 0 15px;font-size:16px}.horizontalLine-solid{border-top:1px solid #cbcbcb;margin:0 15px}.dashboard-button{padding:5px 10px 5px 5px!important}.btnLib{background-color:#ededed;color:#333!important}.btn-group-sm>.btn,.btn-sm{padding:5px 20px 5px 5px}.edit-icon{color:#32ad3c;font-size:24px;margin-right:15px}.empty-title{margin-top:10px}@media screen and (max-width:600px){.empty-padding{padding:15px 0;background-color:#fff;width:100%;display:block}.empty-wrapper{display:flex;background-color:#fff;border:1px solid #9fa0a4;min-height:125px;width:100%}.empty-prefix{color:#32ad3c;font-size:16px;display:flex;height:40px;padding:15px}.empty-content{color:#333;display:flex;padding:15px}.empty-msg{padding:0 0 15px;font-size:14px}.edit-icon{color:#32ad3c;font-size:20px;margin-right:6px}.empty-title{margin-top:6px}}"]
     }),
     __metadata("design:paramtypes", [RaDashboardService,
@@ -996,8 +1043,11 @@ let RAWidgetContainer = class RAWidgetContainer {
         this.showExcell = true;
         this.hideTitle = false;
         this.inapplicableFilters = [];
+        this.canLoadData = false;
         this.widgetDeleted = new EventEmitter();
         this.updateAppliedFilters = new EventEmitter();
+        this.dataLoaded = new EventEmitter();
+        this.widgetLoaded = new EventEmitter();
         this.isWidgetStateApplicable = false;
         this.widgetEmptyState = '';
         this.lockVisible = false;
@@ -1048,7 +1098,7 @@ let RAWidgetContainer = class RAWidgetContainer {
                             this.refreshWidget(this.data.widgetInfo);
                     }
                     else {
-                        this.refreshWidget(this.data.widgetInfo);
+                        //this.refreshWidget(this.data.widgetInfo);
                     }
                 }
             }
@@ -1057,6 +1107,10 @@ let RAWidgetContainer = class RAWidgetContainer {
                 this.invokeWidgetResizedEvent();
             }
         }
+        if (changes.canLoadData && changes.canLoadData.currentValue != changes.canLoadData.previousValue) {
+            if (this.canLoadData)
+                this.refreshWidget(this.data.widgetInfo);
+        }
     }
     invokeWidgetResizedEvent() {
         if (this.widgetElement) {
@@ -1234,6 +1288,10 @@ let RAWidgetContainer = class RAWidgetContainer {
                                             this.showPanel = true;
                                         else
                                             this.showPanel = false;
+                                        if (!this.data.dataLoaded) {
+                                            this.data.dataLoaded = true;
+                                            this.dataLoaded.emit();
+                                        }
                                         break;
                                     case 'onConfigEditClicked':
                                         this.editWidget();
@@ -1307,7 +1365,8 @@ let RAWidgetContainer = class RAWidgetContainer {
                             widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
                             widgetConfigFilter.globalFilter = this.globalFilter;
                             widgetConfigFilter.dashboardInfo = me.dashboardInfo;
-                            this.widgetElement.loadContent(widgetConfigFilter);
+                            // this.widgetElement.loadContent(widgetConfigFilter);
+                            this.widgetLoaded.emit();
                             yield this.setLock(widgetConfigFilter.config);
                             yield this.setDownloadIcon();
                         }));
@@ -1748,6 +1807,10 @@ __decorate([
     Input('bulk-action-data'),
     __metadata("design:type", Object)
 ], RAWidgetContainer.prototype, "bulkActionData", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], RAWidgetContainer.prototype, "canLoadData", void 0);
 __decorate([
     Output(),
     __metadata("design:type", Object)
@@ -1756,6 +1819,14 @@ __decorate([
     Output(),
     __metadata("design:type", Object)
 ], RAWidgetContainer.prototype, "updateAppliedFilters", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], RAWidgetContainer.prototype, "dataLoaded", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], RAWidgetContainer.prototype, "widgetLoaded", void 0);
 __decorate([
     Input('dom-resized'),
     __metadata("design:type", Boolean),
@@ -4711,12 +4782,13 @@ DashboardFrameworkModule = __decorate([
 class RaBaseDashboardTemplate {
     constructor(ngZone) {
         this.ngZone = ngZone;
-        this.initialize = (eventBus, userDashboardId, appConfig, dashboardInfo) => {
+        this.initialize = (eventBus, userDashboardId, appConfig, dashboardInfo, templateConfig) => {
             this.ngZone.run(() => {
                 this.userDashboardId = userDashboardId;
                 this.appConfig = appConfig;
                 this.raDashboardEventBus = eventBus;
                 this.dashboardInfo = dashboardInfo;
+                this.templateConfig = templateConfig;
             });
             this.init();
         };