@schneideress/dashboardframework 0.0.6 → 0.0.8

package/fesm5/schneideress-dashboardframework.js

@@ -3,6 +3,7 @@ import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Compo
 import { of, Subject } from 'rxjs';
 import { BaseService } from '@schneideress/ess-util';
 import { filter, map } from 'rxjs/operators';
+import { NgxUiLoaderService, NgxUiLoaderModule } from 'ngx-ui-loader';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
@@ -472,9 +473,10 @@ var GridsterConfigDefaultSettings = {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var RADashboardArea = /** @class */ (function () {
-    function RADashboardArea(dashboardService, ngZone) {
+    function RADashboardArea(dashboardService, ngZone, ngxService) {
         this.dashboardService = dashboardService;
         this.ngZone = ngZone;
+        this.ngxService = ngxService;
         this.widgetList = Array();
         this.gridheight = 300;
         this.widgetHeight = 20;
@@ -487,18 +489,27 @@ var RADashboardArea = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        /**
-         * To override default configuration values to the gridster control
-         * @type {?}
-         */
+        this.initiateGridsterConfig();
+    };
+    /**To set GridsterConfig */
+    /**
+     * To set GridsterConfig
+     * @return {?}
+     */
+    RADashboardArea.prototype.initiateGridsterConfig = /**
+     * To set GridsterConfig
+     * @return {?}
+     */
+    function () {
+        /** @type {?} */
         var areaContext = this;
+        /**To override default configuration values to the gridster control */
         this.options = GridsterConfigDefaultSettings;
         this.options.itemChangeCallback = (/**
          * @param {?} item
          * @return {?}
          */
         function (item) {
-            console.log('in change call back');
             areaContext.setAreaHeight();
             areaContext.updateWidgets();
         });
@@ -528,6 +539,7 @@ var RADashboardArea = /** @class */ (function () {
             }));
         }
         if (this.raDashboardEventBus && this.userDashboardId && this.areaKey) {
+            this.initiateGridsterConfig();
             this.loadWidgets(this.userDashboardId, this.areaKey);
         }
     };
@@ -547,7 +559,6 @@ var RADashboardArea = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        console.log('in update widgets');
         this.dashboardService.updateWidgets(this.mapGridsterListToObject(this.widgetList), this.appConfig).subscribe((/**
          * @param {?} widgets
          * @return {?}
@@ -572,6 +583,8 @@ var RADashboardArea = /** @class */ (function () {
     function (userDashboarId, areaKey) {
         var _this = this;
         /** @type {?} */
+        var areaContext = this;
+        /** @type {?} */
         var widgetInfo = (/** @type {?} */ ({
             dashboardId: userDashboarId.toString(),
             dashboardAreaKey: areaKey
@@ -581,9 +594,14 @@ var RADashboardArea = /** @class */ (function () {
          * @return {?}
          */
         function (widgets) {
-            if (widgets) {
-                _this.widgetList = _this.mapObjectListToGridsterItemList(widgets);
-                _this.setAreaHeight();
+            if (widgets && widgets.length > 0) {
+                areaContext.widgetList = _this.mapObjectListToGridsterItemList(widgets);
+                setTimeout((/**
+                 * @return {?}
+                 */
+                function () {
+                    areaContext.setAreaHeight();
+                }), 2000);
             }
         }));
     };
@@ -612,9 +630,11 @@ var RADashboardArea = /** @class */ (function () {
                 areaScrollHeight = currentHeight;
             }
         }));
-        areaHeight = areaScrollHeight * this.options.api.getCurrentRowHeight() + 2;
-        if (areaHeight < 300) {
-            areaHeight = 300;
+        if (this.options.api) {
+            areaHeight = areaScrollHeight * this.options.api.getCurrentRowHeight() + 2;
+        }
+        if (areaHeight < 600) {
+            areaHeight = 600;
         }
         this.gridheight = areaHeight;
     };
@@ -668,11 +688,14 @@ var RADashboardArea = /** @class */ (function () {
         data.position_y = 0;
         /** @type {?} */
         var gridsterItem = this.mapObjectsToGridsterItem(data);
-        gridsterItem = this.options.api.getFirstPossiblePosition(gridsterItem);
+        if (this.options.api) {
+            gridsterItem = this.options.api.getFirstPossiblePosition(gridsterItem);
+        }
         data.position_x = gridsterItem.x;
         data.position_y = gridsterItem.y;
         data.dashboardAreaKey = this.areaKey;
         data.dashboardId = this.userDashboardId;
+        this.ngxService.start();
         this.dashboardService.addWidget(data, this.appConfig).subscribe((/**
          * @param {?} widget
          * @return {?}
@@ -681,6 +704,7 @@ var RADashboardArea = /** @class */ (function () {
             gridsterItem = _this.mapObjectsToGridsterItem(widget);
             _this.widgetList.push(gridsterItem);
             _this.setAreaHeight();
+            _this.ngxService.stop();
         }));
     };
     /**To map IwidgetInfo object to gridsterItem */
@@ -768,14 +792,15 @@ var RADashboardArea = /** @class */ (function () {
     RADashboardArea.decorators = [
         { type: Component, args: [{
                     selector: 'ra-dashboard-area',
-                    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\" [widget-instance-id]=\"item.widgetInstanceId\"></ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n</div>\r\n",
-                    styles: ["gridster{width:inherit;resize:height;display:flex;min-height:300px}gridster-item{border:1px solid #ccc;background:#fff!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}"]
+                    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\" [widget-instance-id]=\"item.widgetInstanceId\"></ra-widget-container>\r\n    </gridster-item>\r\n  </gridster>\r\n</div>\r\n\r\n",
+                    styles: ["gridster{width:inherit;resize:height;display:flex;min-height:600px}gridster-item{border:1px solid #ccc;background:#fff!important}.dvheader{width:100%;height:35px;background:#000;color:#fff;padding:7px 3px 5px 6px;text-transform:uppercase}"]
                 }] }
     ];
     /** @nocollapse */
     RADashboardArea.ctorParameters = function () { return [
         { type: RaDashboardService },
-        { type: NgZone }
+        { type: NgZone },
+        { type: NgxUiLoaderService }
     ]; };
     RADashboardArea.propDecorators = {
         userDashboardId: [{ type: Input, args: ['user-dashboard-id',] }],
@@ -794,8 +819,9 @@ var RADashboardArea = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var RAWidgetContainer = /** @class */ (function () {
-    function RAWidgetContainer(dashboardService) {
+    function RAWidgetContainer(dashboardService, ngxService) {
         this.dashboardService = dashboardService;
+        this.ngxService = ngxService;
         this.isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
         this.widgetDeleted = new EventEmitter();
     }
@@ -869,13 +895,17 @@ var RAWidgetContainer = /** @class */ (function () {
      */
     function () {
         var _this = this;
-        this.dashboardService.deleteWidget(this.data.widgetInfo, this.appConfig).subscribe((/**
+        /** @type {?} */
+        var widgetContainerContext = this;
+        widgetContainerContext.ngxService.start();
+        widgetContainerContext.dashboardService.deleteWidget(this.data.widgetInfo, this.appConfig).subscribe((/**
          * @param {?} status
          * @return {?}
          */
         function (status) {
+            widgetContainerContext.ngxService.stop();
             {
-                _this.widgetDeleted.emit(_this.data.widgetInfo.widgetInstanceId);
+                widgetContainerContext.widgetDeleted.emit(_this.data.widgetInfo.widgetInstanceId);
             }
         }));
     };
@@ -930,8 +960,6 @@ var RAWidgetContainer = /** @class */ (function () {
      * @return {?}
      */
     function (config) {
-        console.log('in config change config');
-        console.log(config);
         this.data.widgetInfo.widgetConfigInfo.config = config;
         this.refreshWidget(this.data.widgetInfo);
         this.updateWidget(this.data.widgetInfo);
@@ -1006,13 +1034,14 @@ var RAWidgetContainer = /** @class */ (function () {
     RAWidgetContainer.decorators = [
         { type: Component, args: [{
                     selector: 'ra-widget-container',
-                    template: "<div class=\"wc-wrapper\">\r\n  <div class=\"wcheader\">\r\n    <div class=\"col-md-12 wc-mover\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-11 float-left\" style=\"width:96%;\">{{data.widgetInfo.title?data.widgetInfo.title:\"Title\"}}\r\n        </div>\r\n        <div class=\"col-md-1\">\r\n          <div class=\"float-right\">\r\n            <div class=\"dropdown\">\r\n              <div class=\"dropbtn\"> <i class=\"fal fa-cog\"></i></div>\r\n              <div class=\"dropdown-content\">\r\n                <a (click)=\"editWidget()\">Edit</a>\r\n                <a (click)=\"copyWidget(data)\">Copy</a>\r\n                <a (click)=\"moveWidget(data)\">Move</a>\r\n                <a (click)=\"collapse(data)\">Collapse</a>\r\n                <hr class=\"hr\" style=\"\">\r\n                <a (click)=\"deleteWidget()\">Delete</a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\">\r\n    <div class=\"wcBodyBorder\" #ctlWidget></div>\r\n  </div>\r\n</div>\r\n",
+                    template: "<div class=\"wc-wrapper\">\r\n  <div class=\"wcheader\">\r\n    <div class=\"col-md-12 wc-mover\">\r\n      <div class=\"row\">\r\n        <div class=\"col-md-11 float-left\" style=\"width:96%;\">{{data.widgetInfo.title?data.widgetInfo.title:\"Title\"}}\r\n        </div>\r\n        <div class=\"col-md-1\">\r\n          <div class=\"float-right\">\r\n            <div class=\"dropdown\">\r\n              <div class=\"dropbtn\"> <i class=\"fal fa-cog\"></i></div>\r\n              <div class=\"dropdown-content\">\r\n                <a (click)=\"editWidget()\">Edit</a>\r\n                <a (click)=\"copyWidget(data)\">Copy</a>\r\n                <a (click)=\"moveWidget(data)\">Move</a>\r\n                <a (click)=\"collapse(data)\">Collapse</a>\r\n                <hr class=\"hr\">\r\n                <a (click)=\"deleteWidget()\">Delete</a>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"wcBody\">\r\n    <div class=\"wcBodyBorder\" #ctlWidget></div>\r\n  </div>\r\n</div>\r\n",
                     styles: [".wcheader{width:100%;height:26px;background:#fff;color:#3dcd58;padding:7px 7px 0 6px;font-family:\"Arial Rounded MT\";border-bottom:1px solid;border-color:#fff;font-size:16px}.wc-mover{cursor:all-scroll}.wcBody{padding:8px}.wcBodyBorder{border:1px dashed #e6e2e2}.sp_icon{float:left;margin:0 15% 0 0}.dropbtn{cursor:pointer;color:#42b4e6}.dropdown{display:none;position:relative}.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:1;font-size:12px;font-family:\"Arial Rounded MT\"}.dropdown-content a{color:#000;padding:5px 16px;text-decoration:none;display:block;cursor:pointer}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown:hover .dropdown-content,.wc-wrapper:hover .dropdown{display:block}.dropdown:hover .dropbtn{color:#2b7797}.hr{border:0;border-top:1px solid rgba(0,0,0,.1)}"]
                 }] }
     ];
     /** @nocollapse */
     RAWidgetContainer.ctorParameters = function () { return [
-        { type: RaDashboardService }
+        { type: RaDashboardService },
+        { type: NgxUiLoaderService }
     ]; };
     RAWidgetContainer.propDecorators = {
         ctlWidget: [{ type: ViewChild, args: ['ctlWidget', { static: false },] }],
@@ -5540,7 +5569,8 @@ var DashboardFrameworkModule = /** @class */ (function () {
                     imports: [
                         BrowserModule,
                         GridsterModule,
-                        HttpClientModule
+                        HttpClientModule,
+                        NgxUiLoaderModule
                     ],
                     exports: [
                         RADashboardArea