UI: fixed mob qr code admin settings not applying, extra small screen layout imprvmts, qr code clickble in mobile mode

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

@@ -27,6 +27,7 @@ export enum AuthActionTypes {
   UPDATE_AUTH_USER = '[Auth] Update Auth User',
   UPDATE_LAST_PUBLIC_DASHBOARD_ID = '[Auth] Update Last Public Dashboard Id',
   UPDATE_HAS_REPOSITORY = '[Auth] Change Has Repository',
+  UPDATE_MOBILE_QR_ENABLED = '[Auth] Update Mobile QR Enabled',
   UPDATE_OPENED_MENU_SECTION = '[Preferences] Update Opened Menu Section',
   PUT_USER_SETTINGS = '[Preferences] Put user settings',
   DELETE_USER_SETTINGS = '[Preferences] Delete user settings',
@@ -72,6 +73,12 @@ export class ActionAuthUpdateHasRepository implements Action {
   constructor(readonly payload: { hasRepository: boolean }) {}
 }
 
+export class ActionUpdateMobileQrCodeEnabled implements Action {
+  readonly type = AuthActionTypes.UPDATE_MOBILE_QR_ENABLED;
+
+  constructor(readonly payload: { mobileQrEnabled: boolean }) {}
+}
+
 export class ActionPreferencesUpdateOpenedMenuSection implements Action {
   readonly type = AuthActionTypes.UPDATE_OPENED_MENU_SECTION;
 
@@ -93,4 +100,4 @@ export class ActionPreferencesDeleteUserSettings implements Action {
 export type AuthActions = ActionAuthAuthenticated | ActionAuthUnauthenticated |
   ActionAuthLoadUser | ActionAuthUpdateUserDetails | ActionAuthUpdateLastPublicDashboardId | ActionAuthUpdateHasRepository |
   ActionPreferencesUpdateOpenedMenuSection | ActionPreferencesPutUserSettings | ActionPreferencesDeleteUserSettings |
-  ActionAuthUpdateAuthUser;
+  ActionAuthUpdateAuthUser | ActionUpdateMobileQrCodeEnabled;

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

@@ -70,6 +70,9 @@ export const authReducer = (
     case AuthActionTypes.UPDATE_HAS_REPOSITORY:
       return { ...state, ...action.payload};
 
+    case AuthActionTypes.UPDATE_MOBILE_QR_ENABLED:
+      return { ...state, ...action.payload};
+
     case AuthActionTypes.UPDATE_OPENED_MENU_SECTION:
       const openedMenuSections = new Set(state.userSettings.openedMenuSections);
       if (action.payload.opened) {

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html

@@ -19,7 +19,7 @@
   <div class="tb-flex row align-center shrink"
        [class.row]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.RIGHT"
        [class.row-reverse]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.LEFT">
-    <canvas #canvas class="tb-qrcode"></canvas>
+    <canvas #canvas class="tb-qrcode" (click)="navigateByDeepLink($event)"></canvas>
     <div class="tb-flex column" *ngIf="mobileAppSettings?.qrCodeConfig.badgeEnabled && showBadgeContainer">
       <img *ngIf="mobileAppSettings.iosConfig.enabled" src="assets/android-ios-stores-badges/ios_store_en_black_badge.svg">
       <img *ngIf="mobileAppSettings.androidConfig.enabled" src="assets/android-ios-stores-badges/android_store_en_black_badge.svg">

ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts

@@ -58,6 +58,7 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
   showBadgeContainer = true;
 
   private mobileAppSettingsValue: MobileAppSettings | MobileAppQrCodeWidgetSettings;
+  private deepLink: string;
   private deepLinkTTL: number;
   private deepLinkTTLTimeoutID: NodeJS.Timeout;
 
@@ -101,12 +102,22 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
     clearTimeout(this.deepLinkTTLTimeoutID);
   }
 
+  navigateByDeepLink($event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    if (this.ctx.isMobile) {
+      window.open(this.deepLink, '_blank');
+    }
+  }
+
   private initMobileAppQRCode() {
     if (this.deepLinkTTLTimeoutID) {
       clearTimeout(this.deepLinkTTLTimeoutID);
       this.deepLinkTTLTimeoutID = null;
     }
     this.mobileAppService.getMobileAppDeepLink().subscribe(link => {
+      this.deepLink = link;
       this.deepLinkTTL = Number(this.utilsService.getQueryParam('ttl', link)) * MINUTE;
       this.updateQRCode(link);
       this.deepLinkTTLTimeoutID = setTimeout(() => this.initMobileAppQRCode(), this.deepLinkTTL);

ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html

@@ -27,7 +27,7 @@
   <mat-card-content style="padding-top: 16px">
     <div class="tb-form-panel no-border no-padding" [formGroup]="mobileAppSettingsForm">
       <div class="tb-form-panel">
-        <div fxLayout="row" fxLayoutAlign="space-between center">
+        <div class="tb-form-row column-xs no-border no-padding space-between">
           <div class="tb-form-panel-title" translate>admin.mobile-app.applications</div>
           <tb-toggle-select formControlName="useDefaultApp">
             <tb-toggle-option [value]="true">{{ 'admin.mobile-app.default' | translate }}</tb-toggle-option>
@@ -104,7 +104,7 @@
         </div>
       </div>
       <div class="tb-form-panel" formGroupName="qrCodeConfig">
-        <div class="tb-flex row space-between align-center">
+        <div class="tb-form-row column-xs no-border no-padding space-between">
           <div class="tb-form-panel-title" translate>admin.mobile-app.appearance-on-home-page</div>
           <tb-toggle-select formControlName="showOnHomePage">
             <tb-toggle-option [value]="true">{{ 'admin.mobile-app.enabled' | translate }}</tb-toggle-option>

ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts

@@ -27,6 +27,7 @@ import {
   badgePositionTranslationsMap,
   MobileAppSettings
 } from '@shared/models/mobile-app.models';
+import { ActionUpdateMobileQrCodeEnabled } from '@core/auth/auth.actions';
 
 @Component({
   selector: 'tb-mobile-app-settings',
@@ -77,26 +78,41 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf
     ).subscribe(value => {
       this.iosEnableChanged(value);
     });
+    this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe(value => {
+      if (value) {
+        this.mobileAppSettingsForm.get('qrCodeConfig').enable({emitEvent: false});
+      } else {
+        this.mobileAppSettingsForm.get('qrCodeConfig').disable({emitEvent: false});
+        this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').enable({emitEvent: false});
+      }
+      this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true});
+      this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabelEnabled').updateValueAndValidity({onlySelf: true});
+    });
     this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(value => {
       if (value) {
         if (this.mobileAppSettingsForm.get('androidConfig.enabled').value || this.mobileAppSettingsForm.get('iosConfig.enabled').value) {
+          this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').enable({emitEvent: false});
           this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').enable({emitEvent: false});
+        } else {
+          this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').disable({emitEvent: false});
+          this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false});
         }
       } else {
         this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false});
       }
     });
-    this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe(value => {
-      this.updateLabelControl(value);
-    });
     this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabelEnabled').valueChanges.pipe(
       takeUntil(this.destroy$)
     ).subscribe(value => {
-      this.updateLabelControl(value);
+      if (value && this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value) {
+        this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').enable({emitEvent: false});
+      } else {
+        this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').disable({emitEvent: false});
+      }
     });
   }
 
@@ -121,7 +137,7 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf
       qrCodeConfig: this.fb.group({
         showOnHomePage: [true],
         badgeEnabled: [true],
-        badgePosition: [{value: BadgePosition.RIGHT, disabled: true}],
+        badgePosition: [BadgePosition.RIGHT],
         qrCodeLabelEnabled: [true],
         qrCodeLabel: ['', [Validators.required, Validators.maxLength(50)]]
       })
@@ -143,7 +159,7 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf
       this.mobileAppSettingsForm.get('androidConfig.appPackage').disable({emitEvent: false});
       this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').disable({emitEvent: false});
     }
-    this.updateBadgeControls(value);
+    this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true});
   }
 
   private iosEnableChanged(value: boolean): void {
@@ -154,37 +170,20 @@ export class MobileAppSettingsComponent extends PageComponent implements HasConf
     } else {
       this.mobileAppSettingsForm.get('iosConfig.appId').disable({emitEvent: false});
     }
-    this.updateBadgeControls(value);
+    this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true});
-  }
-
-  private updateBadgeControls(value: boolean) {
-    if (this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').value) {
-      if (value) {
-        this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').enable({emitEvent: false});
-        if (this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').value) {
-          this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').enable({emitEvent: false});
-        }
-      } else {
-        if (!this.mobileAppSettingsForm.get('iosConfig.enabled').value && !this.mobileAppSettingsForm.get('androidConfig.enabled').value) {
-          this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').disable({emitEvent: false});
-          this.mobileAppSettingsForm.get('qrCodeConfig.badgePosition').disable({emitEvent: false});
-        }
-      }
-    }
-  }
-
-  private updateLabelControl(value: boolean) {
-    if (value) {
-      this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').enable({emitEvent: false});
-    } else {
-      this.mobileAppSettingsForm.get('qrCodeConfig.qrCodeLabel').disable({emitEvent: false});
-    }
   }
 
   save(): void {
+    const showOnHomePagePreviousValue = this.mobileAppSettings.qrCodeConfig.showOnHomePage;
     this.mobileAppSettings = {...this.mobileAppSettings, ...this.mobileAppSettingsForm.getRawValue()};
     this.mobileAppService.saveMobileAppSettings(this.mobileAppSettings)
-      .subscribe((settings) => this.processMobileAppSettings(settings));
+      .subscribe((settings) => {
+        const showOnHomePageValue = settings.qrCodeConfig.showOnHomePage;
+        if (showOnHomePagePreviousValue !== showOnHomePageValue) {
+          this.store.dispatch(new ActionUpdateMobileQrCodeEnabled({mobileQrEnabled: showOnHomePageValue}));
+        }
+        this.processMobileAppSettings(settings);
+      });
   }
 
   confirmForm(): FormGroup {

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

@@ -33,6 +33,7 @@ import {
 } from '@core/auth/auth.selectors';
 import { EntityKeyType } from '@shared/models/query/query.models';
 import { ResourcesService } from '@core/services/resources.service';
+import { isDefinedAndNotNull } from '@core/utils';
 
 const sysAdminHomePageJson = '/assets/dashboard/sys_admin_home_page.json';
 const tenantAdminHomePageJson = '/assets/dashboard/tenant_admin_home_page.json';
@@ -83,12 +84,12 @@ const applySystemParametersToHomeDashboard = (store: Store<AppState>,
             }
           }
         }
-        if (params.mobileQrEnabled) {
+        if (isDefinedAndNotNull(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(true));
+                  .replace(/\${mobileQrEnabled:([^}]+)}/, `\${mobileQrEnabled:${String(params.mobileQrEnabled)}}`);
               break;
             }
           }

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

@@ -2670,7 +2670,7 @@
           "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    ctx.dashboardWidget.widgetLayout.mobileHide = false;\n    html += '<tb-dashboard-state stateId=\"mobile_app_qr_code\" [ctx]=\"ctx\"></tb-dashboard-state>';\n} else {\n    ctx.dashboardWidget.widgetLayout.mobileHide = true;\n    html += '<tb-getting-started-widget style=\"padding: 16px;\"></tb-getting-started-widget>';\n}\nhtml += '</div>';\nreturn html;",
+            "markdownTextFunction": "let html = '<div style=\"width: 100%; height: 100%;\">';\nlet supportMobile = '${mobileQrEnabled:valuePlaceholder}';\nlet supportMobileValue = supportMobile.match(/\\${mobileQrEnabled:([^}]+)}/)[1];\nif (supportMobileValue === 'true') {\n    ctx.dashboardWidget.widgetLayout.mobileHide = false;\n    html += '<tb-dashboard-state stateId=\"mobile_app_qr_code\" [ctx]=\"ctx\"></tb-dashboard-state>';\n} else {\n    ctx.dashboardWidget.widgetLayout.mobileHide = true;\n    html += '<tb-getting-started-widget style=\"padding: 16px;\"></tb-getting-started-widget>';\n}\nhtml += '</div>';\nreturn html;",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ""
           },

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

@@ -1125,7 +1125,7 @@
           "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    ctx.dashboardWidget.widgetLayout.mobileHide = false;\n    html += '<tb-dashboard-state stateId=\"mobile_app_qr_code\" [ctx]=\"ctx\"></tb-dashboard-state>';\n} else {\n    ctx.dashboardWidget.widgetLayout.mobileHide = true;\n    html += '<tb-getting-started-widget style=\"padding: 16px;\"></tb-getting-started-widget>';\n}\nhtml += '</div>';\nreturn html;",
+            "markdownTextFunction": "let html = '<div style=\"width: 100%; height: 100%;\">';\nlet supportMobile = '${mobileQrEnabled:valuePlaceholder}';\nlet supportMobileValue = supportMobile.match(/\\${mobileQrEnabled:([^}]+)}/)[1];\nif (supportMobileValue === 'true') {\n    ctx.dashboardWidget.widgetLayout.mobileHide = false;\n    html += '<tb-dashboard-state stateId=\"mobile_app_qr_code\" [ctx]=\"ctx\"></tb-dashboard-state>';\n} else {\n    ctx.dashboardWidget.widgetLayout.mobileHide = true;\n    html += '<tb-getting-started-widget style=\"padding: 16px;\"></tb-getting-started-widget>';\n}\nhtml += '</div>';\nreturn html;",
             "applyDefaultMarkdownStyle": false,
             "markdownCss": ""
           },