@schneideress/dashboardframework 0.0.10 → 0.0.12

package/fesm5/schneideress-dashboardframework.js

@@ -4,6 +4,7 @@ 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 { NotifierService, NotifierModule } from 'angular-notifier';
 import { BrowserModule } from '@angular/platform-browser';
 import { HttpClientModule } from '@angular/common/http';
 import { CommonModule } from '@angular/common';
@@ -203,19 +204,6 @@ var RaDashboardService = /** @class */ (function (_super) {
      */
     function (widgetInfo) {
     };
-    /** To Collapse current widget*/
-    /**
-     * To Collapse current widget
-     * @param {?} widgetInfo
-     * @return {?}
-     */
-    RaDashboardService.prototype.collapse = /**
-     * To Collapse current widget
-     * @param {?} widgetInfo
-     * @return {?}
-     */
-    function (widgetInfo) {
-    };
     RaDashboardService.decorators = [
         { type: Injectable, args: [{
                     providedIn: 'root'
@@ -372,6 +360,10 @@ var RAEvent = {
     CopyWidget: "CopyWidget",
     /**triggers when user clicks on Move widget */
     MoveWidget: "MoveWidget",
+    /**triggers when user raise delete widget event */
+    WidgetDelete: "WidgetDelete",
+    /** used to add widget to widgetlist when user copies a widget to current dashboard */
+    AddWidget: "AddWidget",
 };
 /** @enum {string} */
 var RAEventKey = {
@@ -477,10 +469,11 @@ var GridsterConfigDefaultSettings = {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var RADashboardArea = /** @class */ (function () {
-    function RADashboardArea(dashboardService, ngZone, ngxService) {
+    function RADashboardArea(dashboardService, ngZone, ngxService, notifier) {
         this.dashboardService = dashboardService;
         this.ngZone = ngZone;
         this.ngxService = ngxService;
+        this.notifier = notifier;
         this.widgetList = Array();
         this.gridheight = 300;
         this.widgetHeight = 20;
@@ -495,6 +488,21 @@ var RADashboardArea = /** @class */ (function () {
     function () {
         this.initiateGridsterConfig();
     };
+    /**
+     * @param {?} changes
+     * @return {?}
+     */
+    RADashboardArea.prototype.ngOnChanges = /**
+     * @param {?} changes
+     * @return {?}
+     */
+    function (changes) {
+        if (this.raDashboardEventBus && this.userDashboardId && this.areaKey) {
+            this.initiateGridsterConfig();
+            this.loadWidgets(this.userDashboardId, this.areaKey);
+            this.inititateEventBusSubscritions();
+        }
+    };
     /**To set GridsterConfig */
     /**
      * To set GridsterConfig
@@ -518,34 +526,53 @@ var RADashboardArea = /** @class */ (function () {
             areaContext.updateWidgets();
         });
     };
+    /** To initiate eventbus subsctiptions */
     /**
-     * @param {?} changes
+     * To initiate eventbus subsctiptions
      * @return {?}
      */
-    RADashboardArea.prototype.ngOnChanges = /**
-     * @param {?} changes
+    RADashboardArea.prototype.inititateEventBusSubscritions = /**
+     * To initiate eventbus subsctiptions
      * @return {?}
      */
-    function (changes) {
+    function () {
         var _this = this;
-        if (changes.raDashboardEventBus && changes.raDashboardEventBus.currentValue != changes.raDashboardEventBus.previousValue) {
-            this.conifgAddClick = this.raDashboardEventBus.subscribe(RAEvent.ConfigAddClick).subscribe((/**
-             * @param {?} e
+        this.widgetDeleteEvent = this.raDashboardEventBus.subscribe(RAEvent.WidgetDelete).subscribe((/**
+         * @param {?} instanceId
+         * @return {?}
+         */
+        function (instanceId) {
+            _this.ngZone.run((/**
              * @return {?}
              */
-            function (e) {
-                _this.ngZone.run((/**
-                 * @return {?}
-                 */
-                function () {
-                    _this.addWidget(e);
-                }));
+            function () {
+                _this.deleteWidget(instanceId, true);
             }));
-        }
-        if (this.raDashboardEventBus && this.userDashboardId && this.areaKey) {
-            this.initiateGridsterConfig();
-            this.loadWidgets(this.userDashboardId, this.areaKey);
-        }
+        }));
+        this.widgetAddEvent = this.raDashboardEventBus.subscribe(RAEvent.AddWidget).subscribe((/**
+         * @param {?} widgetInfo
+         * @return {?}
+         */
+        function (widgetInfo) {
+            _this.ngZone.run((/**
+             * @return {?}
+             */
+            function () {
+                _this.copyWidget(widgetInfo);
+            }));
+        }));
+        this.conifgAddClick = this.raDashboardEventBus.subscribe(RAEvent.ConfigAddClick).subscribe((/**
+         * @param {?} e
+         * @return {?}
+         */
+        function (e) {
+            _this.ngZone.run((/**
+             * @return {?}
+             */
+            function () {
+                _this.addWidget(e);
+            }));
+        }));
     };
     /**
      * @return {?}
@@ -555,11 +582,16 @@ var RADashboardArea = /** @class */ (function () {
      */
     function () {
         this.conifgAddClick.unsubscribe();
+        this.widgetAddEvent.unsubscribe();
+        this.widgetDeleteEvent.unsubscribe();
     };
+    /**To update position/dimention of all widgets in the area */
     /**
+     * To update position/dimention of all widgets in the area
      * @return {?}
      */
     RADashboardArea.prototype.updateWidgets = /**
+     * To update position/dimention of all widgets in the area
      * @return {?}
      */
     function () {
@@ -646,14 +678,17 @@ var RADashboardArea = /** @class */ (function () {
     /**
      * To remove a widget instance from dashboard and to save info in database
      * @param {?} widgetInstanceId
+     * @param {?=} isalertDisabled
      * @return {?}
      */
     RADashboardArea.prototype.deleteWidget = /**
      * To remove a widget instance from dashboard and to save info in database
      * @param {?} widgetInstanceId
+     * @param {?=} isalertDisabled
      * @return {?}
      */
-    function (widgetInstanceId) {
+    function (widgetInstanceId, isalertDisabled) {
+        if (isalertDisabled === void 0) { isalertDisabled = false; }
         /** @type {?} */
         var widget = this.widgetList.filter((/**
          * @param {?} item
@@ -665,6 +700,9 @@ var RADashboardArea = /** @class */ (function () {
         if (widget.length > 0) {
             this.widgetList.splice(this.widgetList.indexOf(widget[0]), 1);
             this.setAreaHeight();
+            if (!isalertDisabled) {
+                this.notifier.notify('success', "Widget (" + widget[0].widgetInfo.widgetTitle + ") deleted successfully!");
+            }
         }
     };
     /**To add widget instance to the database with the next available position and to make changes in
@@ -708,9 +746,32 @@ var RADashboardArea = /** @class */ (function () {
             gridsterItem = _this.mapObjectsToGridsterItem(widget);
             _this.widgetList.push(gridsterItem);
             _this.setAreaHeight();
-            _this.ngxService.stop();
+            //this.ngxService.stop();
         }));
     };
+    /** To add widget to current widget list ,invoked from copy widget window*/
+    /**
+     * To add widget to current widget list ,invoked from copy widget window
+     * @param {?} data
+     * @return {?}
+     */
+    RADashboardArea.prototype.copyWidget = /**
+     * To add widget to current widget list ,invoked from copy widget window
+     * @param {?} data
+     * @return {?}
+     */
+    function (data) {
+        /** @type {?} */
+        var 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);
+        this.widgetList.push(gridsterItem);
+        this.setAreaHeight();
+    };
     /**To map IwidgetInfo object to gridsterItem */
     /**
      * To map IwidgetInfo object to gridsterItem
@@ -796,7 +857,7 @@ 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\r\n",
+                    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  <notifier-container></notifier-container>\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}"]
                 }] }
     ];
@@ -804,7 +865,8 @@ var RADashboardArea = /** @class */ (function () {
     RADashboardArea.ctorParameters = function () { return [
         { type: RaDashboardService },
         { type: NgZone },
-        { type: NgxUiLoaderService }
+        { type: NgxUiLoaderService },
+        { type: NotifierService }
     ]; };
     RADashboardArea.propDecorators = {
         userDashboardId: [{ type: Input, args: ['user-dashboard-id',] }],
@@ -823,9 +885,10 @@ var RADashboardArea = /** @class */ (function () {
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var RAWidgetContainer = /** @class */ (function () {
-    function RAWidgetContainer(dashboardService, ngxService) {
+    function RAWidgetContainer(dashboardService, ngxService, notifier) {
         this.dashboardService = dashboardService;
         this.ngxService = ngxService;
+        this.notifier = notifier;
         this.isIEOrEdge = /msie\s|trident\/|edge\//i.test(window.navigator.userAgent);
         this.widgetDeleted = new EventEmitter();
     }
@@ -908,9 +971,12 @@ var RAWidgetContainer = /** @class */ (function () {
          */
         function (status) {
             widgetContainerContext.ngxService.stop();
-            {
+            if (status) {
                 widgetContainerContext.widgetDeleted.emit(_this.data.widgetInfo.widgetInstanceId);
             }
+            else {
+                widgetContainerContext.notifier.notify('error', "Failed to remove widget (" + _this.data.widgetInfo.widgetTitle + ")!");
+            }
         }));
     };
     /** To Move or change position if current widget container*/
@@ -923,7 +989,6 @@ var RAWidgetContainer = /** @class */ (function () {
      * @return {?}
      */
     function () {
-        console.log('in move widget');
         this.raDashboardEventBus.publish(RAEvent.MoveWidget, this.data.widgetInfo);
         // this.dashboardService.moveWidget(widgetInfo);
     };
@@ -1030,14 +1095,15 @@ 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()\">Copy</a>\r\n                <a (click)=\"moveWidget()\">Move</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 hr{margin:0!important}.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)}"]
+                    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 gearIcon\"> <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()\">Copy</a>\r\n                <a (click)=\"moveWidget()\">Move</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 hr{margin:0!important}.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}.gearIcon{color:#42b4e6}.hr{border:0;border-top:1px solid rgba(0,0,0,.1)}"]
                 }] }
     ];
     /** @nocollapse */
     RAWidgetContainer.ctorParameters = function () { return [
         { type: RaDashboardService },
-        { type: NgxUiLoaderService }
+        { type: NgxUiLoaderService },
+        { type: NotifierService }
     ]; };
     RAWidgetContainer.propDecorators = {
         ctlWidget: [{ type: ViewChild, args: ['ctlWidget', { static: false },] }],
@@ -1051,6 +1117,52 @@ var RAWidgetContainer = /** @class */ (function () {
     return RAWidgetContainer;
 }());
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+/** @type {?} */
+var customNotifierOptions = {
+    position: {
+        horizontal: {
+            position: 'right',
+            distance: 12
+        },
+        vertical: {
+            position: 'top',
+            distance: 12,
+            gap: 10
+        }
+    },
+    theme: 'material',
+    behaviour: {
+        autoHide: 5000,
+        onClick: 'hide',
+        onMouseover: 'pauseAutoHide',
+        showDismissButton: true,
+        stacking: 4
+    },
+    animations: {
+        enabled: true,
+        show: {
+            preset: 'slide',
+            speed: 300,
+            easing: 'ease'
+        },
+        hide: {
+            preset: 'fade',
+            speed: 300,
+            easing: 'ease',
+            offset: 50
+        },
+        shift: {
+            speed: 300,
+            easing: 'ease'
+        },
+        overlap: 150
+    }
+};
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -5566,7 +5678,8 @@ var DashboardFrameworkModule = /** @class */ (function () {
                         BrowserModule,
                         GridsterModule,
                         HttpClientModule,
-                        NgxUiLoaderModule
+                        NgxUiLoaderModule,
+                        NotifierModule.withConfig(customNotifierOptions)
                     ],
                     exports: [
                         RADashboardArea
@@ -5639,5 +5752,5 @@ var RaBaseDashboardFilter = /** @class */ (function () {
     return RaBaseDashboardFilter;
 }());
 
-export { DashboardFrameworkModule, RADashboardArea, RADashboardEventBus, RAEvent, RAEventKey, RAWidgetContainer, RaBaseDashboardFilter, RaBaseDashboardTemplate, RaDashboardService, GridsterModule as ɵa, GridsterComponent as ɵb, GridsterItemComponent as ɵc, GridsterPreviewComponent as ɵd };
+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 };
 //# sourceMappingURL=schneideress-dashboardframework.js.map