UI: Added support mobileQrEnabled settings in tenant admin home page dashboard

ui-ngx/src/app/core/auth/auth.models.ts

@@ -24,6 +24,7 @@ export interface SysParamsState {
   hasRepository: boolean;
   tbelEnabled: boolean;
   persistDeviceStateToTelemetry: boolean;
+  mobileQrEnabled: boolean;
   userSettings: UserSettings;
   maxResourceSize: number;
 }

ui-ngx/src/app/core/auth/auth.reducer.ts

@@ -29,6 +29,7 @@ const emptyUserAuthState: AuthPayload = {
   hasRepository: false,
   tbelEnabled: false,
   persistDeviceStateToTelemetry: false,
+  mobileQrEnabled: false,
   maxResourceSize: 0,
   userSettings: initialUserSettings
 };

ui-ngx/src/app/core/auth/auth.selectors.ts

@@ -78,6 +78,17 @@ export const selectPersistDeviceStateToTelemetry = createSelector(
   (state: AuthState) => state.persistDeviceStateToTelemetry
 );
 
+export const selectMobileQrEnabled = createSelector(
+  selectAuthState,
+  (state: AuthState) => state.mobileQrEnabled
+);
+
+export const selectPersistDeviceStateToTelemetryAndMobileQrEnabled = createSelector(
+  selectPersistDeviceStateToTelemetry,
+  selectMobileQrEnabled,
+  (persistDeviceStateToTelemetry, mobileQrEnabled) => ({persistDeviceStateToTelemetry, mobileQrEnabled})
+);
+
 export const selectUserSettings = createSelector(
   selectAuthState,
   (state: AuthState) => state.userSettings

ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts

@@ -25,7 +25,7 @@ import { DashboardService } from '@core/http/dashboard.service';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { map } from 'rxjs/operators';
-import { getCurrentAuthUser, selectPersistDeviceStateToTelemetry } from '@core/auth/auth.selectors';
+import { getCurrentAuthUser, selectPersistDeviceStateToTelemetryAndMobileQrEnabled } from '@core/auth/auth.selectors';
 import { EntityKeyType } from '@shared/models/query/query.models';
 import { ResourcesService } from '@core/services/resources.service';
 
@@ -35,16 +35,25 @@ const customerUserHomePageJson = '/assets/dashboard/customer_user_home_page.json
 
 const updateDeviceActivityKeyFilterIfNeeded = (store: Store<AppState>,
                                                dashboard$: Observable<HomeDashboard>): Observable<HomeDashboard> =>
-  store.pipe(select(selectPersistDeviceStateToTelemetry)).pipe(
+  store.pipe(select(selectPersistDeviceStateToTelemetryAndMobileQrEnabled)).pipe(
-    mergeMap((persistToTelemetry) => dashboard$.pipe(
+    mergeMap((params) => dashboard$.pipe(
       map((dashboard) => {
-        if (persistToTelemetry) {
+        if (params.persistDeviceStateToTelemetry) {
           for (const filterId of Object.keys(dashboard.configuration.filters)) {
             if (['Active Devices', 'Inactive Devices'].includes(dashboard.configuration.filters[filterId].filter)) {
               dashboard.configuration.filters[filterId].keyFilters[0].key.type = EntityKeyType.TIME_SERIES;
             }
           }
         }
+        if (params.mobileQrEnabled) {
+          for (const widgetId of Object.keys(dashboard.configuration.widgets)) {
+            if (dashboard.configuration.widgets[widgetId].config.title === 'Select show mobile QR code') {
+              dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction =
+                (dashboard.configuration.widgets[widgetId].config.settings.markdownTextFunction as string)
+                  .replace('\'${mobileQrEnabled}\'', String(params.mobileQrEnabled));
+            }
+          }
+        }
         return dashboard;
       })
     ))

ui-ngx/src/assets/dashboard/tenant_admin_home_page.json

@@ -101,38 +101,6 @@
         "id": "867f82cf-ecf2-2d5c-35cb-08c6f2edc3a4",
         "typeFullFqn": "system.home_page_widgets.documentation_links"
       },
-      "a23185ad-dc46-806c-0e50-5b21fb080ace": {
-        "type": "static",
-        "sizeX": 7.5,
-        "sizeY": 6.5,
-        "config": {
-          "datasources": [],
-          "timewindow": {
-            "realtime": {
-              "timewindowMs": 60000
-            }
-          },
-          "showTitle": false,
-          "backgroundColor": "rgb(255, 255, 255)",
-          "color": "rgba(0, 0, 0, 0.87)",
-          "padding": "16px",
-          "settings": {
-            "columns": 3
-          },
-          "title": "Getting started",
-          "dropShadow": false,
-          "enableFullscreen": false,
-          "widgetStyle": {},
-          "widgetCss": "",
-          "pageSize": 1024,
-          "noDataDisplayMessage": "",
-          "showLegend": false
-        },
-        "row": 0,
-        "col": 0,
-        "id": "a23185ad-dc46-806c-0e50-5b21fb080ace",
-        "typeFullFqn": "system.home_page_widgets.getting_started"
-      },
       "ebbd0a6e-8a47-e770-5086-7f4974250f2d": {
         "type": "static",
         "sizeX": 7.5,
@@ -1144,7 +1112,108 @@
         "col": 0,
         "id": "8e71a398-caf5-540d-cec5-6e5dc264343e"
       },
-      "b9d704a2-f579-dbff-f123-f953d92081fd": {
+      "35bda856-2495-4f72-e35e-925bac8b8da7": {
+        "typeFullFqn": "system.cards.markdown_card",
+        "type": "latest",
+        "sizeX": 5,
+        "sizeY": 3.5,
+        "config": {
+          "datasources": [],
+          "timewindow": {
+            "displayValue": "",
+            "selectedTab": 0,
+            "realtime": {
+              "realtimeType": 1,
+              "interval": 1000,
+              "timewindowMs": 60000,
+              "quickInterval": "CURRENT_DAY"
+            },
+            "history": {
+              "historyType": 0,
+              "interval": 1000,
+              "timewindowMs": 60000,
+              "fixedTimewindow": {
+                "startTimeMs": 1715005524783,
+                "endTimeMs": 1715091924783
+              },
+              "quickInterval": "CURRENT_DAY"
+            },
+            "aggregation": {
+              "type": "AVG",
+              "limit": 25000
+            }
+          },
+          "showTitle": false,
+          "backgroundColor": "#fff",
+          "color": "rgba(0, 0, 0, 0.87)",
+          "padding": "0px",
+          "settings": {
+            "useMarkdownTextFunction": true,
+            "markdownTextPattern": "### Markdown/HTML card\n - **Current entity**: ${entityName}.\n - **Current value**: ${Random}.",
+            "markdownTextFunction": "let html = '<div style=\"width: 100%; height: 100%;\">';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n    html += '<tb-dashboard-state stateId=\"mobile_app_qr_code\" [ctx]=\"ctx\"></tb-dashboard-state>';\n} else {\n    html += '<tb-getting-started-widget style=\"padding: 16px;\"></tb-getting-started-widget>';\n}\nhtml += '</div>';\nreturn html;",
+            "applyDefaultMarkdownStyle": false,
+            "markdownCss": ""
+          },
+          "title": "Select show mobile QR code",
+          "showTitleIcon": false,
+          "iconColor": "rgba(0, 0, 0, 0.87)",
+          "iconSize": "24px",
+          "titleTooltip": "",
+          "dropShadow": true,
+          "enableFullscreen": false,
+          "widgetStyle": {
+            "border": "none",
+            "boxShadow": "none",
+            "padding": 0
+          },
+          "titleStyle": {
+            "fontSize": "16px",
+            "fontWeight": 400
+          },
+          "showLegend": false,
+          "useDashboardTimewindow": true,
+          "displayTimewindow": true,
+          "widgetCss": "",
+          "pageSize": 1024,
+          "noDataDisplayMessage": ""
+        },
+        "row": 0,
+        "col": 0,
+        "id": "35bda856-2495-4f72-e35e-925bac8b8da7"
+      },
+      "ed33e56f-293b-aaaa-ad19-0cf499dc926f": {
+        "type": "static",
+        "sizeX": 7.5,
+        "sizeY": 6.5,
+        "config": {
+          "datasources": [],
+          "timewindow": {
+            "realtime": {
+              "timewindowMs": 60000
+            }
+          },
+          "showTitle": false,
+          "backgroundColor": "rgb(255, 255, 255)",
+          "color": "rgba(0, 0, 0, 0.87)",
+          "padding": "16px",
+          "settings": {
+            "columns": 3
+          },
+          "title": "Getting started",
+          "dropShadow": false,
+          "enableFullscreen": false,
+          "widgetStyle": {},
+          "widgetCss": "",
+          "pageSize": 1024,
+          "noDataDisplayMessage": "",
+          "showLegend": false
+        },
+        "row": 0,
+        "col": 0,
+        "id": "ed33e56f-293b-aaaa-ad19-0cf499dc926f",
+        "typeFullFqn": "system.home_page_widgets.getting_started"
+      },
+      "8c5207d8-7103-4dc2-db48-d61c0c8c61fd": {
         "typeFullFqn": "system.home_page_widgets.home_mobile_app_qr_code",
         "type": "static",
         "sizeX": 6,
@@ -1183,7 +1252,7 @@
         },
         "row": 0,
         "col": 0,
-        "id": "b9d704a2-f579-dbff-f123-f953d92081fd"
+        "id": "8c5207d8-7103-4dc2-db48-d61c0c8c61fd"
       }
     },
     "states": {
@@ -1208,13 +1277,6 @@
                 "col": 28,
                 "mobileHide": true
               },
-              "a23185ad-dc46-806c-0e50-5b21fb080ace": {
-                "sizeX": 35,
-                "sizeY": 42,
-                "row": 0,
-                "col": 85,
-                "mobileHide": true
-              },
               "ebbd0a6e-8a47-e770-5086-7f4974250f2d": {
                 "sizeX": 28,
                 "sizeY": 16,
@@ -1254,13 +1316,11 @@
                 "col": 43,
                 "mobileOrder": 0
               },
-              "b9d704a2-f579-dbff-f123-f953d92081fd": {
+              "35bda856-2495-4f72-e35e-925bac8b8da7": {
                 "sizeX": 35,
-                "sizeY": 16,
+                "sizeY": 58,
-                "row": 42,
+                "row": 0,
-                "col": 85,
+                "col": 85
-                "mobileOrder": 5,
-                "mobileHeight": 7
               }
             },
             "gridSettings": {
@@ -1330,6 +1390,39 @@
             }
           }
         }
+      },
+      "mobile_app_qr_code": {
+        "name": "Mobile App QR code",
+        "root": false,
+        "layouts": {
+          "main": {
+            "widgets": {
+              "ed33e56f-293b-aaaa-ad19-0cf499dc926f": {
+                "sizeX": 120,
+                "sizeY": 45,
+                "row": 0,
+                "col": 0
+              },
+              "8c5207d8-7103-4dc2-db48-d61c0c8c61fd": {
+                "sizeX": 120,
+                "sizeY": 17,
+                "row": 45,
+                "col": 0
+              }
+            },
+            "gridSettings": {
+              "backgroundColor": "#eeeeee",
+              "columns": 120,
+              "margin": 12,
+              "outerMargin": false,
+              "backgroundSizeMode": "100%",
+              "autoFillHeight": true,
+              "backgroundImageUrl": null,
+              "mobileAutoFillHeight": false,
+              "mobileRowHeight": 20
+            }
+          }
+        }
       }
     },
     "entityAliases": {
@@ -1465,4 +1558,4 @@
     }
   },
   "name": "Tenant Administrator Home Page"
-}
+}