@schneideress/dashboardframework 0.0.5 → 0.0.7

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';
@@ -77,9 +78,7 @@ var RaDashboardService = /** @class */ (function (_super) {
      */
     function (widgetInfo, appConfig) {
         this.baseUrl = appConfig.apiBaseUrl;
-        /** @type {?} */
-        var url = 'widget/GetWidgetByArea';
-        return this.post(url, widgetInfo);
+        return this.post('widget/GetWidgetByArea', widgetInfo);
     };
     /**
      * @param {?} widgetList
@@ -93,9 +92,7 @@ var RaDashboardService = /** @class */ (function (_super) {
      */
     function (widgetList, appConfig) {
         this.baseUrl = appConfig.apiBaseUrl;
-        /** @type {?} */
-        var url = 'widget/UpdateAreaWidgets';
-        return this.post(url, widgetList);
+        return this.post('widget/UpdateAreaWidgets', widgetList);
     };
     /**
      * @param {?} widgetInfo
@@ -144,9 +141,7 @@ var RaDashboardService = /** @class */ (function (_super) {
      */
     function (widgetInfo, appConfig) {
         this.baseUrl = appConfig.apiBaseUrl;
-        /** @type {?} */
-        var url = 'widget/AddWidgetUser';
-        return this.post(url, widgetInfo);
+        return this.post('widget/AddWidgetUser', widgetInfo);
     };
     /** To Delete current widget from DOM*/
     /**
@@ -163,9 +158,7 @@ var RaDashboardService = /** @class */ (function (_super) {
      */
     function (widgetInfo, appConfig) {
         this.baseUrl = appConfig.apiBaseUrl;
-        /** @type {?} */
-        var url = 'widget/DeleteWidgetUser';
-        return this.post(url, widgetInfo);
+        return this.post('widget/DeleteWidgetUser', widgetInfo);
     };
     /**To Update widgetInfo in database */
     /**
@@ -182,9 +175,7 @@ var RaDashboardService = /** @class */ (function (_super) {
      */
     function (widgetInfo, appConfig) {
         this.baseUrl = appConfig.apiBaseUrl;
-        /** @type {?} */
-        var url = 'widget/UpdateUserWidget';
-        return this.post(url, widgetInfo);
+        return this.post('widget/UpdateUserWidget', widgetInfo);
     };
     /** To Move or change position if current widget container*/
     /**
@@ -482,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;
@@ -497,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();
         });
@@ -538,6 +539,7 @@ var RADashboardArea = /** @class */ (function () {
             }));
         }
         if (this.raDashboardEventBus && this.userDashboardId && this.areaKey) {
+            this.initiateGridsterConfig();
             this.loadWidgets(this.userDashboardId, this.areaKey);
         }
     };
@@ -557,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 {?}
@@ -582,19 +583,25 @@ var RADashboardArea = /** @class */ (function () {
     function (userDashboarId, areaKey) {
         var _this = this;
         /** @type {?} */
+        var areaContext = this;
+        /** @type {?} */
         var widgetInfo = (/** @type {?} */ ({
             dashboardId: userDashboarId.toString(),
             dashboardAreaKey: areaKey
         }));
-        /** @type {?} */
-        var widgets = this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe((/**
+        this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe((/**
          * @param {?} widgets
          * @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);
             }
         }));
     };
@@ -623,11 +630,17 @@ 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 < 300) {
+                areaHeight = 300;
+            }
+            this.gridheight = areaHeight;
+        }
+        else {
+            console.log('api not defined');
+            console.log(this.options);
         }
-        this.gridheight = areaHeight;
     };
     /** To remove a widget instance from dashboard and to save info in database */
     /**
@@ -679,11 +692,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 {?}
@@ -692,6 +708,7 @@ var RADashboardArea = /** @class */ (function () {
             gridsterItem = _this.mapObjectsToGridsterItem(widget);
             _this.widgetList.push(gridsterItem);
             _this.setAreaHeight();
+            _this.ngxService.stop();
         }));
     };
     /**To map IwidgetInfo object to gridsterItem */
@@ -779,14 +796,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;background:#f1f1f1;border:1px solid #ccc;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: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}"]
                 }] }
     ];
     /** @nocollapse */
     RADashboardArea.ctorParameters = function () { return [
         { type: RaDashboardService },
-        { type: NgZone }
+        { type: NgZone },
+        { type: NgxUiLoaderService }
     ]; };
     RADashboardArea.propDecorators = {
         userDashboardId: [{ type: Input, args: ['user-dashboard-id',] }],
@@ -805,8 +823,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();
     }
@@ -880,11 +899,13 @@ var RAWidgetContainer = /** @class */ (function () {
      */
     function () {
         var _this = this;
+        this.ngxService.start();
         this.dashboardService.deleteWidget(this.data.widgetInfo, this.appConfig).subscribe((/**
          * @param {?} status
          * @return {?}
          */
         function (status) {
+            _this.ngxService.stop();
             {
                 _this.widgetDeleted.emit(_this.data.widgetInfo.widgetInstanceId);
             }
@@ -941,8 +962,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);
@@ -977,7 +996,7 @@ var RAWidgetContainer = /** @class */ (function () {
             globalFilter: this.globalFilter
         }));
         /** @type {?} */
-        var widgetCOntainer = this;
+        var widgetContainer = this;
         this.dashboardService.loadExternalScript(widgetInfo.scriptUrl, (/**
          * @return {?}
          */
@@ -988,7 +1007,10 @@ var RAWidgetContainer = /** @class */ (function () {
              * @return {?}
              */
             function () {
-                widgetCOntainer.widgetElement.loadContent(widgetConfigFilter, _this.appConfig);
+                widgetConfigFilter.appConfig = _this.appConfig;
+                widgetConfigFilter.widgetInfo = (/** @type {?} */ ({}));
+                widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
+                widgetContainer.widgetElement.loadContent(widgetConfigFilter, _this.appConfig);
             }), 2000);
         }));
     };
@@ -1020,7 +1042,8 @@ var RAWidgetContainer = /** @class */ (function () {
     ];
     /** @nocollapse */
     RAWidgetContainer.ctorParameters = function () { return [
-        { type: RaDashboardService }
+        { type: RaDashboardService },
+        { type: NgxUiLoaderService }
     ]; };
     RAWidgetContainer.propDecorators = {
         ctlWidget: [{ type: ViewChild, args: ['ctlWidget', { static: false },] }],
@@ -3002,7 +3025,7 @@ var GridsterComponent = /** @class */ (function () {
                     selector: 'gridster',
                     template: "<div class=\"gridster-column\" *ngFor=\"let column of gridColumns; let i = index;\"\r\n     [ngStyle]=\"gridRenderer.getGridColumnStyle(i)\"></div>\r\n<div class=\"gridster-row\" *ngFor=\"let row of gridRows; let i = index;\"\r\n     [ngStyle]=\"gridRenderer.getGridRowStyle(i)\"></div>\r\n<ng-content></ng-content>\r\n<gridster-preview class=\"gridster-preview\"></gridster-preview>\r\n",
                     encapsulation: ViewEncapsulation.None,
-                    styles: ["gridster{clear:both;position:relative;box-sizing:border-box;background:grey;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;overflow:auto}gridster.fit{overflow-x:hidden;overflow-y:hidden}gridster.scrollVertical{overflow-x:hidden;overflow-y:auto}gridster.scrollHorizontal{overflow-x:auto;overflow-y:hidden}gridster.fixed{overflow:auto}gridster.mobile{overflow-x:hidden;overflow-y:auto}gridster.mobile gridster-item{position:relative}gridster .gridster-column,gridster .gridster-row{position:absolute;display:none;transition:.3s;box-sizing:border-box}gridster.display-grid .gridster-column,gridster.display-grid .gridster-row{display:block}gridster .gridster-column{border-left:1px solid #ccc;border-right:1px solid #ccc}gridster .gridster-row{border-top:1px solid #ccc;border-bottom:1px solid #ccc}"]
+                    styles: ["gridster{clear:both;position:relative;box-sizing:border-box;background:#fff;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;overflow:auto}gridster.fit{overflow-x:hidden;overflow-y:hidden}gridster.scrollVertical{overflow-x:hidden;overflow-y:auto}gridster.scrollHorizontal{overflow-x:auto;overflow-y:hidden}gridster.fixed{overflow:auto}gridster.mobile{overflow-x:hidden;overflow-y:auto}gridster.mobile gridster-item{position:relative}gridster .gridster-column,gridster .gridster-row{position:absolute;display:none;transition:.3s;box-sizing:border-box}gridster.display-grid .gridster-column,gridster.display-grid .gridster-row{display:block}gridster .gridster-column{border-left:1px solid #ccc;border-right:1px solid #ccc}gridster .gridster-row{border-top:1px solid #ccc;border-bottom:1px solid #ccc}"]
                 }] }
     ];
     /** @nocollapse */
@@ -5548,7 +5571,8 @@ var DashboardFrameworkModule = /** @class */ (function () {
                     imports: [
                         BrowserModule,
                         GridsterModule,
-                        HttpClientModule
+                        HttpClientModule,
+                        NgxUiLoaderModule
                     ],
                     exports: [
                         RADashboardArea