From 525acf7f708d2f9806958711989a7c2886c67cbc Mon Sep 17 00:00:00 2001
From: devaskim <devaskim@users.noreply.github.com>
Date: Tue, 20 Sep 2022 14:08:02 +0500
Subject: [PATCH] Let table's data keys to hide in mobile mode.

---
 .../components/widget/lib/alarms-table-widget.component.ts | 2 +-
 .../widget/lib/entities-table-widget.component.ts          | 2 +-
 .../cards/entities-table-key-settings.component.html       | 3 +++
 .../home/components/widget/lib/table-widget.models.ts      | 7 ++++---
 ui-ngx/src/assets/locale/locale.constant-en_US.json        | 1 +
 5 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
index 2412f59f5f..18078d3255 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts
@@ -423,7 +423,7 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit,
         this.contentsInfo[dataKey.def].units = dataKey.units;
         this.contentsInfo[dataKey.def].decimals = dataKey.decimals;
         this.columnWidth[dataKey.def] = getColumnWidth(keySettings);
-        this.columnDefaultVisibility[dataKey.def] = getColumnDefaultVisibility(keySettings);
+        this.columnDefaultVisibility[dataKey.def] = getColumnDefaultVisibility(keySettings, this.ctx);
         this.columnSelectionAvailability[dataKey.def] = getColumnSelectionAvailability(keySettings);
         this.columns.push(dataKey);
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
index 8685fb8e86..5617ddcc9b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts
@@ -444,7 +444,7 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni
         this.contentsInfo[dataKey.def].units = dataKey.units;
         this.contentsInfo[dataKey.def].decimals = dataKey.decimals;
         this.columnWidth[dataKey.def] = getColumnWidth(keySettings);
-        this.columnDefaultVisibility[dataKey.def] = getColumnDefaultVisibility(keySettings);
+        this.columnDefaultVisibility[dataKey.def] = getColumnDefaultVisibility(keySettings, this.ctx);
         this.columnSelectionAvailability[dataKey.def] = getColumnSelectionAvailability(keySettings);
         this.columns.push(dataKey);
       });
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html
index 8714a5b820..81086f046c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/entities-table-key-settings.component.html
@@ -79,6 +79,9 @@
       <mat-option [value]="'hidden'">
         {{ 'widgets.table.column-visibility-hidden' | translate }}
       </mat-option>
+      <mat-option [value]="'hidden-mobile'">
+        {{ 'widgets.table.column-visibility-hidden-mobile' | translate }}
+      </mat-option>
     </mat-select>
   </mat-form-field>
   <mat-form-field fxFlex class="mat-block">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
index 0747ddffc1..bcd0cd4c80 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/table-widget.models.ts
@@ -27,7 +27,7 @@ import { TranslateService } from '@ngx-translate/core';
 
 const tinycolor = tinycolor_;
 
-type ColumnVisibilityOptions = 'visible' | 'hidden';
+type ColumnVisibilityOptions = 'visible' | 'hidden' | 'hidden-mobile';
 
 type ColumnSelectionOptions = 'enabled' | 'disabled';
 
@@ -302,8 +302,9 @@ export function widthStyle(width: string): any {
   return widthStyleObj;
 }
 
-export function getColumnDefaultVisibility(keySettings: TableWidgetDataKeySettings): boolean {
-  return !(isDefined(keySettings.defaultColumnVisibility) && keySettings.defaultColumnVisibility === 'hidden');
+export function getColumnDefaultVisibility(keySettings: TableWidgetDataKeySettings, ctx?: WidgetContext): boolean {
+  return !(isDefined(keySettings.defaultColumnVisibility) && (keySettings.defaultColumnVisibility === 'hidden' ||
+      (ctx && ctx.isMobile && keySettings.defaultColumnVisibility === 'hidden-mobile')));
 }
 
 export function getColumnSelectionAvailability(keySettings: TableWidgetDataKeySettings): boolean {
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 1fd934d92d..74b50fa969 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4608,6 +4608,7 @@
             "default-column-visibility": "Default column visibility",
             "column-visibility-visible": "Visible",
             "column-visibility-hidden": "Hidden",
+            "column-visibility-hidden-mobile": "Hidden in mobile mode",
             "column-selection-to-display": "Column selection in 'Columns to Display'",
             "column-selection-to-display-enabled": "Enabled",
             "column-selection-to-display-disabled": "Disabled",