From de0b9760bbb1b57c65c4164755c7b625cda122a9 Mon Sep 17 00:00:00 2001 From: rusikv Date: Thu, 23 May 2024 21:39:28 +0300 Subject: [PATCH] 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 | 9 ++- ui-ngx/src/app/core/auth/auth.reducer.ts | 3 + .../mobile-app-qrcode-widget.component.html | 2 +- .../lib/mobile-app-qrcode-widget.component.ts | 11 +++ .../admin/mobile-app-settings.component.html | 4 +- .../admin/mobile-app-settings.component.ts | 67 +++++++++---------- .../home-links/home-links-routing.module.ts | 5 +- .../assets/dashboard/sys_admin_home_page.json | 2 +- .../dashboard/tenant_admin_home_page.json | 2 +- 9 files changed, 63 insertions(+), 42 deletions(-) diff --git a/ui-ngx/src/app/core/auth/auth.actions.ts b/ui-ngx/src/app/core/auth/auth.actions.ts index cd44bcde7e..86c80e2d8b 100644 --- a/ui-ngx/src/app/core/auth/auth.actions.ts +++ b/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; diff --git a/ui-ngx/src/app/core/auth/auth.reducer.ts b/ui-ngx/src/app/core/auth/auth.reducer.ts index cc9d01532a..73e0d04eb1 100644 --- a/ui-ngx/src/app/core/auth/auth.reducer.ts +++ b/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) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html index cd12f22cf0..7e6331b82b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html @@ -19,7 +19,7 @@
- +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts index bb6063d4a2..b8c9229201 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts +++ b/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); diff --git a/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html index 391dbfb1fa..208520bbf0 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html +++ b/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.html @@ -27,7 +27,7 @@
-
+
admin.mobile-app.applications
{{ 'admin.mobile-app.default' | translate }} @@ -104,7 +104,7 @@
-
+
admin.mobile-app.appearance-on-home-page
{{ 'admin.mobile-app.enabled' | translate }} diff --git a/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts b/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts index ba5f56917e..edba183919 100644 --- a/ui-ngx/src/app/modules/home/pages/admin/mobile-app-settings.component.ts +++ b/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); - } - - 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}); - } + this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true}); } 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 { diff --git a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts b/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts index a455bac64d..303a1bce4e 100644 --- a/ui-ngx/src/app/modules/home/pages/home-links/home-links-routing.module.ts +++ b/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, } } } - 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; } } diff --git a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json b/ui-ngx/src/assets/dashboard/sys_admin_home_page.json index 24bac97279..b79190fddd 100644 --- a/ui-ngx/src/assets/dashboard/sys_admin_home_page.json +++ b/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 = '
';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", + "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled:valuePlaceholder}';\nlet supportMobileValue = supportMobile.match(/\\${mobileQrEnabled:([^}]+)}/)[1];\nif (supportMobileValue === 'true') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", "applyDefaultMarkdownStyle": false, "markdownCss": "" }, diff --git a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json b/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json index 40792caf09..25e4feca45 100644 --- a/ui-ngx/src/assets/dashboard/tenant_admin_home_page.json +++ b/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 = '
';\nlet supportMobile = '${mobileQrEnabled}' || false;\nif (supportMobile && typeof supportMobile === 'boolean') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", + "markdownTextFunction": "let html = '
';\nlet supportMobile = '${mobileQrEnabled:valuePlaceholder}';\nlet supportMobileValue = supportMobile.match(/\\${mobileQrEnabled:([^}]+)}/)[1];\nif (supportMobileValue === 'true') {\n ctx.dashboardWidget.widgetLayout.mobileHide = false;\n html += '';\n} else {\n ctx.dashboardWidget.widgetLayout.mobileHide = true;\n html += '';\n}\nhtml += '
';\nreturn html;", "applyDefaultMarkdownStyle": false, "markdownCss": "" },