@schneideress/dashboardframework 0.0.182 → 0.0.184

package/fesm2015/schneideress-dashboardframework.js

@@ -1,4 +1,4 @@
-import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Component, NgZone, Input, ViewChild, HostListener, EventEmitter, Renderer2, Output, ViewEncapsulation, ElementRef, ChangeDetectorRef, Host, NgModule } from '@angular/core';
+import { Injectable, Injector, ɵɵdefineInjectable, ɵɵinject, INJECTOR, Component, NgZone, Input, ViewChild, EventEmitter, Renderer2, Output, ViewEncapsulation, ElementRef, ChangeDetectorRef, Host, NgModule } from '@angular/core';
 import { of, Subject } from 'rxjs';
 import { BaseService, RATranslateService, RAPermissionService, RACommonModule } from '@schneideress/ra-common';
 import { filter, map } from 'rxjs/operators';
@@ -360,11 +360,13 @@ const GridsterConfigDefaultSettings = {
  */
 class RADashboardResponsiveService {
     constructor() {
+        this.resized = new Subject();
+        this.maxColsDesktop = 8;
         this.resInfo = [
-            { 'start': 0, 'end': 767, 'minCols': 1, 'maxCols': 1 },
-            { 'start': 768, 'end': 1024, 'minCols': 1, 'maxCols': 2 },
-            { 'start': 1025, 'end': 1366, 'minCols': 1, 'maxCols': 6 },
-            { 'start': 1367, 'end': 9999999999, 'minCols': 1, 'maxCols': 8 }
+            { 'id': 1, 'start': 0, 'end': 767, 'minCols': 1, 'maxCols': 1 },
+            { 'id': 2, 'start': 768, 'end': 1024, 'minCols': 1, 'maxCols': 2 },
+            { 'id': 3, 'start': 1025, 'end': 1366, 'minCols': 1, 'maxCols': 6 },
+            { 'id': 4, 'start': 1367, 'end': 9999999999, 'minCols': 1, 'maxCols': this.maxColsDesktop }
         ];
         this.setScreenWidth();
         window.addEventListener('resize', (/**
@@ -384,13 +386,18 @@ class RADashboardResponsiveService {
             this.currentResInfo = this.resInfo[3];
         }
         else {
-            this.currentResInfo = this.resInfo.filter((/**
+            /** @type {?} */
+            let resInfo = this.resInfo.filter((/**
              * @param {?} item
              * @return {?}
              */
             (item) => {
                 return item.end >= this.screenWidth && item.start <= this.screenWidth;
             }))[0];
+            if (!this.currentResInfo || this.currentResInfo.id != resInfo.id) {
+                this.currentResInfo = resInfo;
+                this.resized.next();
+            }
         }
     }
     /**
@@ -450,13 +457,18 @@ class RADashboardResponsiveService {
      * @return {?}
      */
     getGridsterItem(widget) {
+        if (widget.widgetSettings && typeof widget.widgetSettings === 'string') {
+            widget.widgetSettings = JSON.parse(widget.widgetSettings);
+        }
         /** @type {?} */
         let gridsterItem = (/** @type {?} */ ({
             cols: this.getWidth(widget.width),
             rows: this.getHeight(widget.height),
             x: this.IsDesktopView ? widget.position_x : 0,
             y: this.IsDesktopView ? widget.position_y : 0,
-            widgetInfo: widget
+            widgetInfo: widget,
+            minItemRows: this.getMinItemRows(widget),
+            minItemCols: this.getMinItemCols(widget)
         }));
         return gridsterItem;
     }
@@ -467,12 +479,36 @@ class RADashboardResponsiveService {
      */
     getWidth(width) {
         if (!this.IsDesktopView) {
-            width = Math.floor(width / 10 * this.currentResInfo.maxCols);
+            width = Math.floor(width / this.maxColsDesktop * this.currentResInfo.maxCols);
             if (width < this.currentResInfo.minCols)
                 width = this.currentResInfo.minCols;
         }
         return width;
     }
+    /**
+     * @private
+     * @param {?} widget
+     * @return {?}
+     */
+    getMinItemRows(widget) {
+        if (this.IsDesktopView) {
+            if (widget.widgetSettings && widget.widgetSettings.minRows) {
+                return widget.widgetSettings.minRows;
+            }
+        }
+    }
+    /**
+     * @private
+     * @param {?} widget
+     * @return {?}
+     */
+    getMinItemCols(widget) {
+        if (this.IsDesktopView) {
+            if (widget.widgetSettings && widget.widgetSettings.minCols) {
+                return widget.widgetSettings.minCols;
+            }
+        }
+    }
     /**
      * @private
      * @param {?} height
@@ -480,7 +516,7 @@ class RADashboardResponsiveService {
      */
     getHeight(height) {
         if (!this.IsDesktopView) {
-            height = Math.floor(height / 10 * this.currentResInfo.maxCols);
+            height = Math.floor(height / this.maxColsDesktop * this.currentResInfo.maxCols);
             if (height < this.currentResInfo.minCols)
                 height = this.currentResInfo.minCols;
         }
@@ -494,6 +530,10 @@ RADashboardResponsiveService.decorators = [
 RADashboardResponsiveService.ctorParameters = () => [];
 /** @nocollapse */ RADashboardResponsiveService.ngInjectableDef = ɵɵdefineInjectable({ factory: function RADashboardResponsiveService_Factory() { return new RADashboardResponsiveService(); }, token: RADashboardResponsiveService, providedIn: "root" });
 if (false) {
+    /** @type {?} */
+    RADashboardResponsiveService.prototype.resized;
+    /** @type {?} */
+    RADashboardResponsiveService.prototype.maxColsDesktop;
     /**
      * @type {?}
      * @private
@@ -541,38 +581,37 @@ class RADashboardArea {
         this.widgetWidth = 4;
     }
     /**
-     * @param {?} event
      * @return {?}
      */
-    onResize(event) {
-        this.widgetList = [];
-        setTimeout((/**
+    ngOnInit() {
+        this.initiateGridsterConfig();
+        this.responsiveService.resized.subscribe((/**
          * @return {?}
          */
         () => {
-            this.initiateGridsterConfig();
-            this.options.api.optionsChanged();
-            if (this.userWidgets) {
-                this.widgetList = this.mapObjectListToGridsterItemList(this.userWidgets);
-                setTimeout((/**
-                 * @return {?}
-                 */
-                () => {
-                    this.setAreaHeight();
-                }));
-            }
-            else {
-                this.loadWidgets(this.userDashboardId, this.areaKey);
-            }
-            this.domResized = !this.domResized;
+            this.widgetList = [];
+            setTimeout((/**
+             * @return {?}
+             */
+            () => {
+                this.initiateGridsterConfig();
+                this.options.api.optionsChanged();
+                if (this.userWidgets) {
+                    this.widgetList = this.mapObjectListToGridsterItemList(this.userWidgets);
+                    setTimeout((/**
+                     * @return {?}
+                     */
+                    () => {
+                        this.setAreaHeight();
+                    }));
+                }
+                else {
+                    this.loadWidgets(this.userDashboardId, this.areaKey);
+                }
+                this.domResized = !this.domResized;
+            }));
         }));
     }
-    /**
-     * @return {?}
-     */
-    ngOnInit() {
-        this.initiateGridsterConfig();
-    }
     /**
      * @param {?} changes
      * @return {?}
@@ -598,11 +637,8 @@ class RADashboardArea {
          * @return {?}
          */
         (gridster) => {
-            console.log('grid inititalized');
-            console.log(this.options.api);
             if (this.options.api) {
                 this.gridcellHeight = this.options.api.getCurrentRowHeight();
-                console.log('cell height is' + this.gridcellHeight);
             }
         });
         this.options.itemChangeCallback = (/**
@@ -908,10 +944,17 @@ class RADashboardArea {
      * @return {?}
      */
     rearrangeWidgets() {
-        this.options.compactType = 'compactUp&Left';
-        this.options.api.optionsChanged();
-        this.options.compactType = 'none';
-        this.options.api.optionsChanged();
+        for (let i = 0; i < this.userWidgets.length; i++) {
+            this.userWidgets[i].position_x = 0;
+            this.userWidgets[i].position_y = 0;
+            this.widgetList = this.mapObjectListToGridsterItemList(this.userWidgets);
+            setTimeout((/**
+             * @return {?}
+             */
+            () => {
+                this.setAreaHeight();
+            }));
+        }
     }
     /**
      * To add widget instance to the database with the next available position and to make changes in
@@ -922,6 +965,17 @@ class RADashboardArea {
     addWidget(data) {
         data.height = this.widgetHeight;
         data.width = this.widgetWidth;
+        if (data.widgetSettings) {
+            if (typeof data.widgetSettings === 'string')
+                data.widgetSettings = JSON.parse(data.widgetSettings);
+            if (data.widgetSettings.defaultCols) {
+                data.width = data.widgetSettings.defaultCols;
+            }
+            if (data.widgetSettings.defaultRows) {
+                data.height = data.widgetSettings.defaultRows;
+            }
+            data.widgetSettings = null;
+        }
         data = this.setPositions(data);
         /** to find the available position in gridster, temp commenting the code-returning higher y value than normal */
         data.dashboardAreaKey = this.areaKey;
@@ -974,12 +1028,12 @@ class RADashboardArea {
             if (this.userWidgets.length > 0) {
                 /** @type {?} */
                 let widget = this.userWidgets[this.userWidgets.length - 1];
-                if (widget.position_x + widget.width > 5) {
+                if (widget.position_x + widget.width > (this.responsiveService.maxColsDesktop / 2)) {
                     data.position_y = widget.position_y + 1;
                 }
                 else {
                     data.position_y = widget.position_y;
-                    data.position_x = 10 - (widget.position_x + widget.width);
+                    data.position_x = this.responsiveService.maxColsDesktop - (widget.position_x + widget.width);
                 }
             }
         }
@@ -1078,8 +1132,7 @@ RADashboardArea.propDecorators = {
     widgetHeight: [{ type: Input, args: ['widget-height',] }],
     widgetWidth: [{ type: Input, args: ['widget-width',] }],
     appConfig: [{ type: Input, args: ['app-config',] }],
-    gridWrapper: [{ type: ViewChild, args: ['gridWrapper', { static: false },] }],
-    onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
+    gridWrapper: [{ type: ViewChild, args: ['gridWrapper', { static: false },] }]
 };
 if (false) {
     /** @type {?} */
@@ -1473,7 +1526,7 @@ class RAWidgetContainer {
                 globalFilter: this.globalFilter,
                 configChanges: this.getConfigChanges(false)
             }));
-            if (widgetInfo.widgetSettings && widgetInfo.widgetSettings.length > 0) {
+            if (widgetInfo.widgetSettings) {
                 this.widgetSettings = this.getParsedConfig(widgetInfo.widgetSettings);
                 this.applayWidgetSettings(this.widgetSettings);
             }
@@ -1561,7 +1614,7 @@ class RAWidgetContainer {
                             widgetContainer.isWidgetLoaded = true;
                             widgetConfigFilter.appConfig = this.appConfig;
                             widgetConfigFilter.widgetInfo = widgetInfo;
-                            // widgetConfigFilter.widgetInfo = <IWidgetInfo>{};
+                            widgetConfigFilter.configChanges = this.getConfigChanges(false);
                             widgetConfigFilter.widgetInfo.widgetName = widgetInfo.widgetName;
                             widgetContainer.widgetElement.loadContent(widgetConfigFilter);
                             yield widgetContainer.setLock(widgetConfigFilter.config);