@schneideress/dashboardframework 0.0.146 → 0.0.148

package/fesm2015/schneideress-dashboardframework.js

@@ -254,6 +254,8 @@ const RAEvent = {
     ConfigAddClick: "configAddClick",
     /** triggers when a user click on the save button in widget configuration window */
     ConfigChanged: "configChanged",
+    /**To rearrange widgets in a dashboard */
+    RearrangeClicked: "rearrangeClicked",
     /**dashboard customize button click */
     DashboardCustomizeClick: "dashboardCustomizeClick",
     /**triggers when user clicks on the dashboard change icon in header section */
@@ -571,6 +573,138 @@ const GridsterConfigDefaultSettings = {
     //itemInitCallback: (item) => this.itemInitCallback(item)
 };
 
+/**
+ * @fileoverview added by tsickle
+ * Generated from: lib/ra.dashboard.responsive.service.ts
+ * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+const DesktopViewStart = 1367;
+class RADashboardResponsiveService {
+    constructor() {
+        this.resInfo = [
+            { 'start': 0, 'end': 767, 'minCols': 1, 'maxCols': 1 },
+            { 'start': 768, 'end': 1024, 'minCols': 1, 'maxCols': 2 },
+            { 'start': 1025, 'end': DesktopViewStart - 1, 'minCols': 2, 'maxCols': 6 },
+            { 'start': DesktopViewStart, 'end': 9999999999, 'minCols': 2, 'maxCols': 10 }
+        ];
+        this.setScreenWidth();
+        window.addEventListener('resize', (/**
+         * @return {?}
+         */
+        () => {
+            this.setScreenWidth();
+        }));
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    setScreenWidth() {
+        this.screenWidth = screen.width;
+        this.currentResInfo = this.resInfo.filter((/**
+         * @param {?} item
+         * @return {?}
+         */
+        (item) => {
+            return item.end >= this.screenWidth && item.start <= this.screenWidth;
+        }))[0];
+    }
+    /**
+     * @return {?}
+     */
+    get IsDesktopView() {
+        return this.screenWidth >= DesktopViewStart;
+    }
+    /**
+     * @return {?}
+     */
+    get GridsterConfig() {
+        /** @type {?} */
+        let config = GridsterConfigDefaultSettings;
+        config.minCols = this.currentResInfo.maxCols;
+        config.maxCols = this.currentResInfo.maxCols;
+        config.minRows = this.currentResInfo.minCols;
+        config.maxItemCols = this.currentResInfo.maxCols;
+        config.minItemCols = this.currentResInfo.minCols;
+        config.minItemRows = this.currentResInfo.minCols;
+        config.minItemArea = this.currentResInfo.minCols * this.currentResInfo.minCols;
+        config.defaultItemCols = this.currentResInfo.minCols;
+        config.defaultItemRows = this.currentResInfo.minCols;
+        if (!this.IsDesktopView) {
+            config.resizable.enabled = false;
+            config.swap = false;
+            config.draggable.enabled = false;
+        }
+        return config;
+    }
+    /**
+     * To map IwidgetInfo object to gridsterItem
+     * @param {?} widget
+     * @return {?}
+     */
+    getGridsterItem(widget) {
+        /** @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
+        }));
+        return gridsterItem;
+    }
+    /**
+     * @private
+     * @param {?} width
+     * @return {?}
+     */
+    getWidth(width) {
+        if (!this.IsDesktopView) {
+            width = Math.floor(width / 10 * this.currentResInfo.maxCols);
+            if (width < this.currentResInfo.minCols)
+                width = this.currentResInfo.minCols;
+        }
+        return width;
+    }
+    /**
+     * @private
+     * @param {?} height
+     * @return {?}
+     */
+    getHeight(height) {
+        if (!this.IsDesktopView) {
+            height = Math.floor(height / 10 * this.currentResInfo.maxCols);
+            if (height < this.currentResInfo.minCols)
+                height = this.currentResInfo.minCols;
+        }
+        return height;
+    }
+}
+RADashboardResponsiveService.decorators = [
+    { type: Injectable, args: [{ providedIn: 'root' },] }
+];
+/** @nocollapse */
+RADashboardResponsiveService.ctorParameters = () => [];
+/** @nocollapse */ RADashboardResponsiveService.ngInjectableDef = ɵɵdefineInjectable({ factory: function RADashboardResponsiveService_Factory() { return new RADashboardResponsiveService(); }, token: RADashboardResponsiveService, providedIn: "root" });
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardResponsiveService.prototype.screenWidth;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardResponsiveService.prototype.resInfo;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardResponsiveService.prototype.currentResInfo;
+}
+
 /**
  * @fileoverview added by tsickle
  * Generated from: lib/ra-dashboard-area/ra.dashboard.area.ts
@@ -583,13 +717,15 @@ class RADashboardArea {
      * @param {?} ngxService
      * @param {?} translateService
      * @param {?} notifier
+     * @param {?} responsiveService
      */
-    constructor(dashboardService, ngZone, ngxService, translateService, notifier) {
+    constructor(dashboardService, ngZone, ngxService, translateService, notifier, responsiveService) {
         this.dashboardService = dashboardService;
         this.ngZone = ngZone;
         this.ngxService = ngxService;
         this.translateService = translateService;
         this.notifier = notifier;
+        this.responsiveService = responsiveService;
         this.widgetList = Array();
         this.gridheight = 300;
         this.gridcellHeight = 0;
@@ -603,30 +739,28 @@ class RADashboardArea {
      * @return {?}
      */
     onResize(event) {
-        /** @type {?} */
-        var areaContext = this;
+        this.widgetList = [];
         setTimeout((/**
          * @return {?}
          */
-        function () {
-            areaContext.setAreaHeight();
-            areaContext.domResized = !areaContext.domResized;
-        }), 1000);
+        () => {
+            this.initiateGridsterConfig();
+            this.options.api.optionsChanged();
+            if (this.userWidgets) {
+                this.widgetList = this.mapObjectListToGridsterItemList(this.userWidgets);
+                this.setAreaHeight();
+            }
+            else {
+                this.loadWidgets(this.userDashboardId, this.areaKey);
+            }
+            this.domResized = !this.domResized;
+        }));
     }
     /**
      * @return {?}
      */
     ngOnInit() {
         this.initiateGridsterConfig();
-        this.widgetRearrangeSubject.subscribe((/**
-         * @param {?} event
-         * @return {?}
-         */
-        event => {
-            console.log('in subscribe subject & value is');
-            console.log(event);
-            this.rearrangeWidgets();
-        }));
     }
     /**
      * @param {?} changes
@@ -641,27 +775,24 @@ class RADashboardArea {
             this.inititateEventBusSubscritions();
         }
     }
-    // public invokeResizeEvent() {
-    //   this.widgetContainers.forEach(function(container,i){
-    //     container.invokeWidgetResizedEvent();
-    //   });
-    // }
     /**
      * To set GridsterConfig
      * @return {?}
      */
     initiateGridsterConfig() {
-        /** @type {?} */
-        let areaContext = this;
         /**To override default configuration values to the gridster control */
-        this.options = GridsterConfigDefaultSettings;
+        this.options = this.responsiveService.GridsterConfig;
         this.options.itemChangeCallback = (/**
          * @param {?} item
          * @return {?}
          */
-        function (item) {
-            areaContext.setAreaHeight();
-            areaContext.updateWidgets();
+        (item) => {
+            if (this.responsiveService.IsDesktopView) {
+                if (item.widgetInfo && item.widgetInfo.widgetInstanceId) {
+                    this.updateWidgetPosition(item.widgetInfo.widgetInstanceId);
+                }
+            }
+            this.setAreaHeight();
         });
     }
     /**
@@ -705,6 +836,18 @@ class RADashboardArea {
                 this.addWidget(e);
             }));
         }));
+        this.rearrangeWidgetClick = this.raDashboardEventBus.subscribe(RAEvent.RearrangeClicked).subscribe((/**
+         * @param {?} e
+         * @return {?}
+         */
+        (e) => {
+            this.ngZone.run((/**
+             * @return {?}
+             */
+            () => {
+                this.rearrangeWidgets();
+            }));
+        }));
         this.widgetLibraryDoneClick = this.raDashboardEventBus.subscribe(RAEvent.widgetLibraryDoneClick).subscribe((/**
          * @param {?} widgetList
          * @return {?}
@@ -715,9 +858,6 @@ class RADashboardArea {
              */
             () => {
                 if (widgetList) {
-                    // widgetList.forEach(widgetInfo => {
-                    //   this.addWidget(widgetInfo);
-                    // });
                     this.addWidgetListToGridster(widgetList, 0);
                 }
             }));
@@ -765,8 +905,8 @@ class RADashboardArea {
             this.widgetDeleteEvent.unsubscribe();
         if (this.widgetLibraryDoneClick)
             this.widgetLibraryDoneClick.unsubscribe();
-        if (this.widgetRearrangeSubject)
-            this.widgetRearrangeSubject.unsubscribe();
+        if (this.rearrangeWidgetClick)
+            this.rearrangeWidgetClick.unsubscribe();
     }
     /**
      * To update position/dimention of all widgets in the area
@@ -781,6 +921,57 @@ class RADashboardArea {
         }));
         return true;
     }
+    /**
+     * To update widget dimensions
+     * @param {?} widgetInstanceId
+     * @return {?}
+     */
+    updateWidgetPosition(widgetInstanceId) {
+        /** @type {?} */
+        let widgetFilteredList = [];
+        /** @type {?} */
+        let widget = this.widgetList.filter((/**
+         * @param {?} filtered
+         * @return {?}
+         */
+        filtered => filtered.widgetInfo && filtered.widgetInfo.widgetInstanceId == widgetInstanceId));
+        if (widget && widget.length > 0) {
+            widgetFilteredList.push(widget[0]);
+            /** @type {?} */
+            let widgetList = this.mapGridsterListToObject(widgetFilteredList);
+            this.dashboardService.updateWidgets(this.formatWidgetDataForPositionDetails(widgetList), this.appConfig).subscribe((/**
+             * @param {?} widgets
+             * @return {?}
+             */
+            widgets => {
+            }));
+        }
+        return true;
+    }
+    /**
+     * To restrict request payload to be of min size (position & size details)
+     * @param {?} widgetItemList
+     * @return {?}
+     */
+    formatWidgetDataForPositionDetails(widgetItemList) {
+        /** @type {?} */
+        let itemList = [];
+        widgetItemList.forEach((/**
+         * @param {?} widgetItem
+         * @return {?}
+         */
+        function (widgetItem) {
+            /** @type {?} */
+            let item = (/** @type {?} */ ({}));
+            item.widgetInstanceId = widgetItem.widgetInstanceId;
+            item.position_x = widgetItem.position_x;
+            item.position_y = widgetItem.position_y;
+            item.width = widgetItem.width;
+            item.height = widgetItem.height;
+            itemList.push(item);
+        }));
+        return itemList;
+    }
     /**
      * To retrieve widgets based on userDashboardid and area name
      * @param {?} userDashboarId
@@ -788,22 +979,37 @@ class RADashboardArea {
      * @return {?}
      */
     loadWidgets(userDashboarId, areaKey) {
-        /** @type {?} */
-        let areaContext = this;
         /** @type {?} */
         let widgetInfo = (/** @type {?} */ ({
             dashboardId: userDashboarId.toString(),
             dashboardAreaKey: areaKey
         }));
-        areaContext.widgetList = [];
+        this.widgetList = [];
         this.dashboardService.getWidgetsByDashboardArea(widgetInfo, this.appConfig).subscribe((/**
          * @param {?} widgets
          * @return {?}
          */
         widgets => {
+            //sorting the widgets y, x
+            widgets = widgets.sort((/**
+             * @param {?} a
+             * @param {?} b
+             * @return {?}
+             */
+            (a, b) => {
+                if (a['position_y'] > b['position_y'])
+                    return 1;
+                if (a['position_y'] < b['position_y'])
+                    return -1;
+                if (a['position_x'] > b['position_x'])
+                    return 1;
+                if (a['position_x'] < b['position_x'])
+                    return -1;
+            }));
+            this.userWidgets = widgets;
             if (widgets && widgets.length > 0) {
-                areaContext.widgetList = this.mapObjectListToGridsterItemList(widgets);
-                areaContext.setAreaHeight();
+                this.widgetList = this.mapObjectListToGridsterItemList(widgets);
+                this.setAreaHeight();
             }
         }));
     }
@@ -855,7 +1061,6 @@ class RADashboardArea {
             areaHeight = 600;
         }
         this.gridheight = areaHeight;
-        console.log('area height adjusted1');
     }
     /**
      * To remove a widget instance from dashboard and to save info in database
@@ -885,7 +1090,6 @@ class RADashboardArea {
      * @return {?}
      */
     rearrangeWidgets() {
-        console.log('in rearrange widgets methd');
         this.options.compactType = 'compactUp&Left';
         this.options.api.optionsChanged();
         this.options.compactType = 'none';
@@ -898,20 +1102,11 @@ class RADashboardArea {
      * @return {?}
      */
     addWidget(data) {
-        /** @type {?} */
-        let widgetid = data.widgetId;
         data.height = this.widgetHeight;
         data.width = this.widgetWidth;
         data.position_x = 0;
         data.position_y = 0;
-        /** @type {?} */
-        let gridsterItem = this.mapObjectsToGridsterItem(data);
         /** to find the available position in gridster, temp commenting the code-returning higher y value than normal */
-        // 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();
@@ -920,7 +1115,8 @@ class RADashboardArea {
          * @return {?}
          */
         widget => {
-            gridsterItem = this.mapObjectsToGridsterItem(widget);
+            /** @type {?} */
+            let gridsterItem = this.responsiveService.getGridsterItem(widget);
             this.widgetList.push(gridsterItem);
             this.setAreaHeight();
             if (this.options.api) {
@@ -931,13 +1127,18 @@ class RADashboardArea {
                     this.gridcellHeight = curRowHeight;
                 }
             }
-            /**To save added widget position in db */
-            setTimeout((/**
-             * @return {?}
-             */
-            () => {
-                this.updateWidgets();
-            }), 1000);
+            /** @type {?} */
+            var widgetInstanceId = 0;
+            if (widget && widget.widgetInstanceId) {
+                widgetInstanceId = widget.widgetInstanceId;
+                /**To save added widget position in db */
+                setTimeout((/**
+                 * @return {?}
+                 */
+                () => {
+                    this.updateWidgetPosition(widgetInstanceId);
+                }), 1000);
+            }
             this.raDashboardEventBus.publish(RAEvent.WidgetAdded, widget);
         }));
     }
@@ -947,33 +1148,13 @@ class RADashboardArea {
      * @return {?}
      */
     copyWidget(data) {
+        data.position_x = 0;
+        data.position_y = 0;
         /** @type {?} */
-        let gridsterItem = this.mapObjectsToGridsterItem(data);
-        if (this.options.api) {
-            gridsterItem = this.options.api.getFirstPossiblePosition(gridsterItem);
-        }
-        data.position_x = gridsterItem.x;
-        data.position_y = gridsterItem.y;
-        gridsterItem = this.mapObjectsToGridsterItem(data);
+        let gridsterItem = this.responsiveService.getGridsterItem(data);
         this.widgetList.push(gridsterItem);
         this.setAreaHeight();
     }
-    /**
-     * To map IwidgetInfo object to gridsterItem
-     * @param {?} widget
-     * @return {?}
-     */
-    mapObjectsToGridsterItem(widget) {
-        /** @type {?} */
-        let gridsterItem = (/** @type {?} */ ({
-            cols: widget.width,
-            rows: widget.height,
-            x: widget.position_x,
-            y: widget.position_y,
-            widgetInfo: widget
-        }));
-        return gridsterItem;
-    }
     /**
      * @param {?} widgetList
      * @return {?}
@@ -986,7 +1167,7 @@ class RADashboardArea {
          * @return {?}
          */
         widget => {
-            widgetArray.push(this.mapObjectsToGridsterItem(widget));
+            widgetArray.push(this.responsiveService.getGridsterItem(widget));
         }));
         return widgetArray;
     }
@@ -1035,7 +1216,8 @@ RADashboardArea.ctorParameters = () => [
     { type: NgZone },
     { type: NgxUiLoaderService },
     { type: RATranslateService },
-    { type: NotifierService }
+    { type: NotifierService },
+    { type: RADashboardResponsiveService }
 ];
 RADashboardArea.propDecorators = {
     userDashboardId: [{ type: Input, args: ['user-dashboard-id',] }],
@@ -1045,7 +1227,6 @@ RADashboardArea.propDecorators = {
     widgetHeight: [{ type: Input, args: ['widget-height',] }],
     widgetWidth: [{ type: Input, args: ['widget-width',] }],
     appConfig: [{ type: Input, args: ['app-config',] }],
-    widgetRearrangeSubject: [{ type: Input }],
     gridWrapper: [{ type: ViewChild, args: ['gridWrapper', { static: false },] }],
     onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
 };
@@ -1058,11 +1239,21 @@ if (false) {
     RADashboardArea.prototype.gridheight;
     /** @type {?} */
     RADashboardArea.prototype.gridcellHeight;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardArea.prototype.userWidgets;
     /**
      * @type {?}
      * @private
      */
     RADashboardArea.prototype.conifgAddClick;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardArea.prototype.rearrangeWidgetClick;
     /**
      * @type {?}
      * @private
@@ -1100,8 +1291,6 @@ if (false) {
     /** @type {?} */
     RADashboardArea.prototype.appConfig;
     /** @type {?} */
-    RADashboardArea.prototype.widgetRearrangeSubject;
-    /** @type {?} */
     RADashboardArea.prototype.gridWrapper;
     /**
      * @type {?}
@@ -1128,6 +1317,11 @@ if (false) {
      * @private
      */
     RADashboardArea.prototype.notifier;
+    /**
+     * @type {?}
+     * @private
+     */
+    RADashboardArea.prototype.responsiveService;
 }
 
 /**
@@ -6437,7 +6631,6 @@ class RaBaseDashboardTemplate {
      */
     constructor(ngZone) {
         this.ngZone = ngZone;
-        this.widgetRearrangeSubject = new Subject();
         this.initialize = (/**
          * @param {?} eventBus
          * @param {?} userDashboardId
@@ -6455,17 +6648,6 @@ class RaBaseDashboardTemplate {
             }));
             this.init();
         });
-        this.rearrangeWidgets = (/**
-         * @return {?}
-         */
-        () => {
-            this.ngZone.run((/**
-             * @return {?}
-             */
-            () => {
-                this.widgetRearrangeSubject.next(true);
-            }));
-        });
     }
     /**
      * @return {?}
@@ -6479,8 +6661,7 @@ class RaBaseDashboardTemplate {
 RaBaseDashboardTemplate.propDecorators = {
     dashboardId: [{ type: Input, args: ['dashboard-id',] }],
     globalFilter: [{ type: Input, args: ['global-filter',] }],
-    initialize: [{ type: Input }],
-    rearrangeWidgets: [{ type: Input }]
+    initialize: [{ type: Input }]
 };
 if (false) {
     /** @type {?} */
@@ -6490,15 +6671,11 @@ if (false) {
     /** @type {?} */
     RaBaseDashboardTemplate.prototype.appConfig;
     /** @type {?} */
-    RaBaseDashboardTemplate.prototype.widgetRearrangeSubject;
-    /** @type {?} */
     RaBaseDashboardTemplate.prototype.dashboardId;
     /** @type {?} */
     RaBaseDashboardTemplate.prototype.globalFilter;
     /** @type {?} */
     RaBaseDashboardTemplate.prototype.initialize;
-    /** @type {?} */
-    RaBaseDashboardTemplate.prototype.rearrangeWidgets;
     /**
      * @type {?}
      * @private
@@ -6612,5 +6789,5 @@ if (false) {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { DashboardFrameworkModule, RADashboardArea, RADashboardEventBus, RAEvent, RAEventKey, RAWidgetContainer, RaBaseDashboardFilter, RaBaseDashboardTemplate, RaDashboardService, GridsterModule as ɵa, GridsterComponent as ɵb, GridsterItemComponent as ɵc, GridsterPreviewComponent as ɵd, customNotifierOptions as ɵe };
+export { DashboardFrameworkModule, RADashboardArea, RADashboardEventBus, RADashboardResponsiveService, RAEvent, RAEventKey, RAWidgetContainer, RaBaseDashboardFilter, RaBaseDashboardTemplate, RaDashboardService, GridsterModule as ɵa, GridsterComponent as ɵb, GridsterItemComponent as ɵc, GridsterPreviewComponent as ɵd, customNotifierOptions as ɵe };
 //# sourceMappingURL=schneideress-dashboardframework.js.map