Merge pull request #7658 from engix-ltd/hide_widget_in_desktop

[3.4.2] UI: Make possible to hide widget in desktop mode.

ui-ngx/src/app/core/services/dashboard-utils.service.ts

@@ -395,7 +395,8 @@ export class DashboardUtilsService {
       sizeY: originalSize ? originalSize.sizeY : widget.sizeY,
       mobileOrder: widget.config.mobileOrder,
       mobileHeight: widget.config.mobileHeight,
-      mobileHide: widget.config.mobileHide
+      mobileHide: widget.config.mobileHide,
+      desktopHide: widget.config.desktopHide
     };
     if (isUndefined(originalColumns)) {
       originalColumns = 24;

ui-ngx/src/app/modules/home/components/dashboard-page/add-widget-dialog.component.ts

@@ -140,6 +140,7 @@ export class AddWidgetDialogComponent extends DialogComponent<AddWidgetDialogCom
     this.widget.config.mobileOrder = widgetConfig.layout.mobileOrder;
     this.widget.config.mobileHeight = widgetConfig.layout.mobileHeight;
     this.widget.config.mobileHide = widgetConfig.layout.mobileHide;
+    this.widget.config.desktopHide = widgetConfig.layout.desktopHide;
     this.dialogRef.close(this.widget);
   }
 }

ui-ngx/src/app/modules/home/components/widget/widget-config.component.html

@@ -492,6 +492,9 @@
                 <mat-slide-toggle formControlName="mobileHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
                   {{ 'widget-config.mobile-hide' | translate }}
                 </mat-slide-toggle>
+                <mat-slide-toggle formControlName="desktopHide" (click)="$event.stopPropagation()" fxLayoutAlign="center">
+                  {{ 'widget-config.desktop-hide' | translate }}
+                </mat-slide-toggle>
               </mat-panel-title>
               <mat-panel-description fxLayoutAlign="end center" fxHide.xs translate>
                 widget-config.advanced-settings

ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts

@@ -255,7 +255,8 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
     this.layoutSettings = this.fb.group({
       mobileOrder: [null, [Validators.pattern(/^-?[0-9]+$/)]],
       mobileHeight: [null, [Validators.min(1), Validators.max(10), Validators.pattern(/^\d*$/)]],
-      mobileHide: [false]
+      mobileHide: [false],
+      desktopHide: [false]
     });
     this.actionsSettings = this.fb.group({
       actionsData: [null, []]
@@ -554,7 +555,8 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
             {
               mobileOrder: layout.mobileOrder,
               mobileHeight: layout.mobileHeight,
-              mobileHide: layout.mobileHide
+              mobileHide: layout.mobileHide,
+              desktopHide: layout.desktopHide
             },
             {emitEvent: false}
           );
@@ -563,7 +565,8 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
             {
               mobileOrder: null,
               mobileHeight: null,
-              mobileHide: false
+              mobileHide: false,
+              desktopHide: false
             },
             {emitEvent: false}
           );

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts

@@ -116,8 +116,12 @@ export class DashboardWidgets implements Iterable<DashboardWidget> {
   }
 
   get activeDashboardWidgets(): Array<DashboardWidget> {
-    if (this.dashboard.isMobileSize && !this.dashboard.isEdit) {
+    if (!this.dashboard.isEdit) {
-      return this.dashboardWidgets.filter(w => !w.mobileHide);
+      if (this.dashboard.isMobileSize) {
+        return this.dashboardWidgets.filter(w => !w.mobileHide);
+      } else {
+        return this.dashboardWidgets.filter(w => !w.desktopHide);
+      }
     }
     return this.dashboardWidgets;
   }
@@ -358,6 +362,10 @@ export class DashboardWidget implements GridsterItem, IDashboardWidget {
     return this.widgetLayout ? this.widgetLayout.mobileHide === true : false;
   }
 
+  get desktopHide(): boolean {
+    return this.widgetLayout ? this.widgetLayout.desktopHide === true : false;
+  }
+
   set gridsterItemComponent(item: GridsterItemComponentInterface) {
     this.gridsterItemComponentValue = item;
     this.gridsterItemComponentSubject.next(this.gridsterItemComponentValue);

ui-ngx/src/app/shared/models/dashboard.models.ts

@@ -36,6 +36,7 @@ export interface DashboardInfo extends BaseData<DashboardId>, ExportableEntity<D
 export interface WidgetLayout {
   sizeX?: number;
   sizeY?: number;
+  desktopHide?: boolean;
   mobileHide?: boolean;
   mobileHeight?: number;
   mobileOrder?: number;

ui-ngx/src/app/shared/models/widget.models.ts

@@ -606,6 +606,7 @@ export interface WidgetConfig {
   showLegend?: boolean;
   legendConfig?: LegendConfig;
   timewindow?: Timewindow;
+  desktopHide?: boolean;
   mobileHide?: boolean;
   mobileHeight?: number;
   mobileOrder?: number;

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -3707,6 +3707,7 @@
         "order": "Order",
         "height": "Height",
         "mobile-hide": "Hide widget in mobile mode",
+        "desktop-hide": "Hide widget in desktop mode",
         "units": "Special symbol to show next to value",
         "decimals": "Number of digits after floating point",
         "timewindow": "Timewindow",