@schneideress/dashboardframework 0.0.5 → 0.0.7

package/fesm2015/schneideress-dashboardframework.js

@@ -2,6 +2,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';
@@ -55,9 +56,7 @@ class RaDashboardService extends BaseService {
      */
     getWidgetsByDashboardArea(widgetInfo, appConfig) {
         this.baseUrl = appConfig.apiBaseUrl;
-        /** @type {?} */
-        var url = 'widget/GetWidgetByArea';
-        return this.post(url, widgetInfo);
+        return this.post('widget/GetWidgetByArea', widgetInfo);
     }
     /**
      * @param {?} widgetList
@@ -66,9 +65,7 @@ class RaDashboardService extends BaseService {
      */
     updateWidgets(widgetList, appConfig) {
         this.baseUrl = appConfig.apiBaseUrl;
-        /** @type {?} */
-        var url = 'widget/UpdateAreaWidgets';
-        return this.post(url, widgetList);
+        return this.post('widget/UpdateAreaWidgets', widgetList);
     }
     /**
      * @param {?} widgetInfo
@@ -95,9 +92,7 @@ class RaDashboardService extends BaseService {
      */
     addWidget(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
@@ -107,9 +102,7 @@ class RaDashboardService extends BaseService {
      */
     deleteWidget(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
@@ -119,9 +112,7 @@ class RaDashboardService extends BaseService {
      */
     updateWidget(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
@@ -364,10 +355,12 @@ class RADashboardArea {
     /**
      * @param {?} dashboardService
      * @param {?} ngZone
+     * @param {?} ngxService
      */
-    constructor(dashboardService, ngZone) {
+    constructor(dashboardService, ngZone, ngxService) {
         this.dashboardService = dashboardService;
         this.ngZone = ngZone;
+        this.ngxService = ngxService;
         this.widgetList = Array();
         this.gridheight = 300;
         this.widgetHeight = 20;
@@ -377,18 +370,22 @@ class RADashboardArea {
      * @return {?}
      */
     ngOnInit() {
-        /**
-         * To override default configuration values to the gridster control
-         * @type {?}
-         */
+        this.initiateGridsterConfig();
+    }
+    /**
+     * To set GridsterConfig
+     * @return {?}
+     */
+    initiateGridsterConfig() {
+        /** @type {?} */
         let 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();
         });
@@ -413,6 +410,7 @@ class RADashboardArea {
             }));
         }
         if (this.raDashboardEventBus && this.userDashboardId && this.areaKey) {
+            this.initiateGridsterConfig();
             this.loadWidgets(this.userDashboardId, this.areaKey);
         }
     }
@@ -426,7 +424,6 @@ class RADashboardArea {
      * @return {?}
      */
     updateWidgets() {
-        console.log('in update widgets');
         this.dashboardService.updateWidgets(this.mapGridsterListToObject(this.widgetList), this.appConfig).subscribe((/**
          * @param {?} widgets
          * @return {?}
@@ -442,20 +439,26 @@ class RADashboardArea {
      * @return {?}
      */
     loadWidgets(userDashboarId, areaKey) {
+        /** @type {?} */
+        let areaContext = this;
         /** @type {?} */
         let widgetInfo = (/** @type {?} */ ({
             dashboardId: userDashboarId.toString(),
             dashboardAreaKey: areaKey
         }));
-        /** @type {?} */
-        let widgets = this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe((/**
+        this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe((/**
          * @param {?} widgets
          * @return {?}
          */
         widgets => {
-            if (widgets) {
-                this.widgetList = this.mapObjectListToGridsterItemList(widgets);
-                this.setAreaHeight();
+            if (widgets && widgets.length > 0) {
+                areaContext.widgetList = this.mapObjectListToGridsterItemList(widgets);
+                setTimeout((/**
+                 * @return {?}
+                 */
+                () => {
+                    areaContext.setAreaHeight();
+                }), 2000);
             }
         }));
     }
@@ -479,11 +482,17 @@ class RADashboardArea {
                 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
@@ -519,11 +528,14 @@ class RADashboardArea {
         data.position_y = 0;
         /** @type {?} */
         let 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 {?}
@@ -532,6 +544,7 @@ class RADashboardArea {
             gridsterItem = this.mapObjectsToGridsterItem(widget);
             this.widgetList.push(gridsterItem);
             this.setAreaHeight();
+            this.ngxService.stop();
         }));
     }
     /**
@@ -600,14 +613,15 @@ class RADashboardArea {
 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 = () => [
     { type: RaDashboardService },
-    { type: NgZone }
+    { type: NgZone },
+    { type: NgxUiLoaderService }
 ];
 RADashboardArea.propDecorators = {
     userDashboardId: [{ type: Input, args: ['user-dashboard-id',] }],
@@ -626,9 +640,11 @@ RADashboardArea.propDecorators = {
 class RAWidgetContainer {
     /**
      * @param {?} dashboardService
+     * @param {?} ngxService
      */
-    constructor(dashboardService) {
+    constructor(dashboardService, ngxService) {
         this.dashboardService = dashboardService;
+        this.ngxService = ngxService;
         this.isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
         this.widgetDeleted = new EventEmitter();
     }
@@ -679,11 +695,13 @@ class RAWidgetContainer {
      * @return {?}
      */
     deleteWidget() {
+        this.ngxService.start();
         this.dashboardService.deleteWidget(this.data.widgetInfo, this.appConfig).subscribe((/**
          * @param {?} status
          * @return {?}
          */
         status => {
+            this.ngxService.stop();
             {
                 this.widgetDeleted.emit(this.data.widgetInfo.widgetInstanceId);
             }
@@ -718,8 +736,6 @@ class RAWidgetContainer {
      * @return {?}
      */
     configChangeEventHandler(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);
@@ -743,7 +759,7 @@ class RAWidgetContainer {
             globalFilter: this.globalFilter
         }));
         /** @type {?} */
-        let widgetCOntainer = this;
+        let widgetContainer = this;
         this.dashboardService.loadExternalScript(widgetInfo.scriptUrl, (/**
          * @return {?}
          */
@@ -754,7 +770,10 @@ class RAWidgetContainer {
              * @return {?}
              */
             () => {
-                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);
         }));
     }
@@ -781,7 +800,8 @@ RAWidgetContainer.decorators = [
 ];
 /** @nocollapse */
 RAWidgetContainer.ctorParameters = () => [
-    { type: RaDashboardService }
+    { type: RaDashboardService },
+    { type: NgxUiLoaderService }
 ];
 RAWidgetContainer.propDecorators = {
     ctlWidget: [{ type: ViewChild, args: ['ctlWidget', { static: false },] }],
@@ -2503,7 +2523,7 @@ GridsterComponent.decorators = [
                 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 */
@@ -4736,7 +4756,8 @@ DashboardFrameworkModule.decorators = [
                 imports: [
                     BrowserModule,
                     GridsterModule,
-                    HttpClientModule
+                    HttpClientModule,
+                    NgxUiLoaderModule
                 ],
                 exports: [
                     RADashboardArea