tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Add mobile qr code widget settings

pull/11835/head
Vladyslav_Prykhodko 2 years ago
parent
cf7161c2ef
commit
7f7dbee381
14 changed files with 302 additions and 245 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      ui-ngx/src/app/core/services/menu.models.ts
  2. 6
      ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.html
  3. 4
      ui-ngx/src/app/modules/home/components/widget/lib/mobile-app-qrcode-widget.component.ts
  4. 2
      ui-ngx/src/app/modules/home/pages/admin/admin.module.ts
  5. 28
      ui-ngx/src/app/modules/home/pages/mobile/mobile-routing.module.ts
  6. 4
      ui-ngx/src/app/modules/home/pages/mobile/mobile.module.ts
  7. 37
      ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings-routing.module.ts
  8. 220
      ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.html
  9. 150
      ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.ts
  10. 26
      ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.module.ts
  11. 3
      ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
  12. 19
      ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
  13. 24
      ui-ngx/src/app/shared/models/mobile-app.models.ts
  14. 8
      ui-ngx/src/assets/locale/locale.constant-en_US.json

16
ui-ngx/src/app/core/services/menu.models.ts
View File

@ -68,7 +68,7 @@ export enum MenuId {
mobile_center = 'mobile_center',
mobile_apps = 'mobile_apps',
mobile_bundles = 'mobile_bundles',
mobile_app_settings = 'mobile_app_settings',
mobile_qr_code_widget = 'mobile_qr_code_widget',
settings = 'settings',
general = 'general',
mail_server = 'mail_server',
@ -304,14 +304,14 @@ export const menuSectionMap = new Map<MenuId, MenuSection>([
}
],
[
MenuId.mobile_app_settings,
MenuId.mobile_qr_code_widget,
{
id: MenuId.mobile_app_settings,
name: 'admin.mobile-app.mobile-app',
fullName: 'admin.mobile-app.mobile-app',
id: MenuId.mobile_qr_code_widget,
name: 'mobile.qr-code-widget',
fullName: 'mobile.qr-code-widget',
type: 'link',
path: '/mobile-center/mobile-app',
icon: 'smartphone'
path: '/mobile-center/qr-code-widget',
icon: 'qr_code'
}
],
[
@ -714,7 +714,7 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
pages: [
{id: MenuId.mobile_apps},
{id: MenuId.mobile_bundles},
{id: MenuId.mobile_app_settings}
{id: MenuId.mobile_qr_code_widget}
]
},
{

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

@ -27,13 +27,13 @@
[class.row-reverse]="mobileAppSettings?.qrCodeConfig.badgePosition === badgePosition.LEFT">
<div class="tb-qrcode" (click)="navigateByDeepLink($event)" [innerHTML]="qrCodeSVG | safe: 'html'"></div>
<div class="tb-badges" [class.tb-no-interaction]="previewMode"
*ngIf="(mobileAppSettings?.iosConfig.enabled || mobileAppSettings?.androidConfig.enabled) &&
*ngIf="(mobileAppSettings?.iosConfig?.enabled || mobileAppSettings?.androidConfig?.enabled) &&
mobileAppSettings?.qrCodeConfig.badgeEnabled && showBadgeContainer">
<a *ngIf="mobileAppSettings?.iosConfig.enabled" [href]="appStoreLink" target="_blank">
<a *ngIf="mobileAppSettings?.iosConfig?.enabled" [href]="appStoreLink" target="_blank">
<img alt="{{ 'widgets.mobile-app-qr-code.download-on-the-app-store' | translate }}"
src="assets/android-ios-stores-badges/ios_store_en_black_badge.svg">
</a>
<a *ngIf="mobileAppSettings?.androidConfig.enabled" [href]="googlePlayLink" target="_blank">
<a *ngIf="mobileAppSettings?.androidConfig?.enabled" [href]="googlePlayLink" target="_blank">
<img alt="{{ 'widgets.mobile-app-qr-code.get-it-on-google-play' | translate }}"
src="assets/android-ios-stores-badges/android_store_en_black_badge.svg">
</a>

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

@ -157,8 +157,8 @@ export class MobileAppQrcodeWidgetComponent extends PageComponent implements OnI
private updateQRCode(link: string) {
import('qrcode').then((QRCode) => {
QRCode.toString(link, (err, string) => {
this.qrCodeSVG = string;
QRCode.toString(link, (err, svgElement) => {
this.qrCodeSVG = svgElement;
this.cd.markForCheck();
})
});

2
ui-ngx/src/app/modules/home/pages/admin/admin.module.ts
View File

@ -32,7 +32,6 @@ import { QueueComponent } from '@home/pages/admin/queue/queue.component';
import { RepositoryAdminSettingsComponent } from '@home/pages/admin/repository-admin-settings.component';
import { AutoCommitAdminSettingsComponent } from '@home/pages/admin/auto-commit-admin-settings.component';
import { TwoFactorAuthSettingsComponent } from '@home/pages/admin/two-factor-auth-settings.component';
import { WidgetComponentsModule } from '@home/components/widget/widget-components.module';
import { OAuth2Module } from '@home/pages/admin/oauth2/oauth2.module';
@NgModule({
@ -56,7 +55,6 @@ import { OAuth2Module } from '@home/pages/admin/oauth2/oauth2.module';
SharedModule,
HomeComponentsModule,
AdminRoutingModule,
WidgetComponentsModule,
OAuth2Module
]
})

28
ui-ngx/src/app/modules/home/pages/mobile/mobile-routing.module.ts
View File

@ -19,11 +19,9 @@ import { RouterModule, Routes } from '@angular/router';
import { RouterTabsComponent } from '@home/components/router-tabs.component';
import { Authority } from '@shared/models/authority.enum';
import { MenuId } from '@core/services/menu.models';
import { MobileAppTableConfigResolver } from '@home/pages/mobile/applications/mobile-app-table-config.resolver';
import { MobileQrCodeWidgetSettingsComponent } from '@home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component';
import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
import { applicationsRoutes } from '@home/pages/mobile/applications/applications-routing.module';
import { bundlesRoutes } from '@home/pages/mobile/bundes/bundles-routing.module';
import { qrCodeWidgetRoutes } from '@home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings-routing.module';
const routes: Routes = [
{
@ -46,34 +44,12 @@ const routes: Routes = [
},
...applicationsRoutes,
...bundlesRoutes,
{
path: 'mobile-app',
component: MobileQrCodeWidgetSettingsComponent,
canDeactivate: [ConfirmOnExitGuard],
data: {
auth: [Authority.SYS_ADMIN],
title: 'admin.mobile-app.mobile-app',
breadcrumb: {
menuId: MenuId.mobile_app_settings
}
}
}
...qrCodeWidgetRoutes
]
}
];
routes.push(
{
path: 'security-settings/oauth2/mobile-applications',
pathMatch: 'full',
redirectTo: '/mobile-center/applications'
}
);
@NgModule({
providers: [
MobileAppTableConfigResolver
],
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})

4
ui-ngx/src/app/modules/home/pages/mobile/mobile.module.ts
View File

@ -21,6 +21,9 @@ import { HomeComponentsModule } from '@home/components/home-components.module';
import { MobileRoutingModule } from '@home/pages/mobile/mobile-routing.module';
import { MobileApplicationModule } from '@home/pages/mobile/applications/applications.module';
import { MobileBundlesModule } from '@home/pages/mobile/bundes/bundles.module';
import {
MobileQrCodeWidgetSettingsModule
} from '@home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.module';
@NgModule({
imports: [
@ -29,6 +32,7 @@ import { MobileBundlesModule } from '@home/pages/mobile/bundes/bundles.module';
HomeComponentsModule,
MobileApplicationModule,
MobileBundlesModule,
MobileQrCodeWidgetSettingsModule,
MobileRoutingModule,
]
})

37
ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings-routing.module.ts
View File

@ -0,0 +1,37 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Authority } from '@shared/models/authority.enum';
import { MenuId } from '@core/services/menu.models';
import {
MobileQrCodeWidgetSettingsComponent
} from '@home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component';
import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
export const qrCodeWidgetRoutes: Routes = [
{
path: 'qr-code-widget',
component: MobileQrCodeWidgetSettingsComponent,
canDeactivate: [ConfirmOnExitGuard],
data: {
auth: [Authority.TENANT_ADMIN, Authority.SYS_ADMIN],
title: 'mobile.qr-code-widget',
breadcrumb: {
menuId: MenuId.mobile_qr_code_widget
}
}
}
];
const routes: Routes = [
{
path: 'settings/mobile-app',
pathMatch: 'full',
redirectTo: '/mobile-center/qr-code-widget'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class MobileQrCodeWidgetSettingsRoutingModule { }

220
ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.html
View File

@ -34,110 +34,122 @@
<tb-toggle-option [value]="false">{{ 'admin.mobile-app.custom' | translate }}</tb-toggle-option>
</tb-toggle-select>
</div>
<div class="tb-form-panel stroked no-padding no-gap" formGroupName="androidConfig">
<div class="tb-form-row no-border no-padding-bottom">
<mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()">
{{ 'admin.mobile-app.android' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-panel no-border no-padding-top"
*ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('androidConfig.enabled').value">
<div class="tb-form-row column-xs">
<div class="fixed-title-width-230">{{ 'admin.mobile-app.app-package-name' | translate }}</div>
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="appPackage" placeholder="{{'admin.mobile-app.set' | translate}}">
<mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="'admin.mobile-app.app-package-name-required' | translate"
*ngIf="mobileAppSettingsForm.get('androidConfig.appPackage').hasError('required')
&& mobileAppSettingsForm.get('androidConfig.appPackage').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
</div>
</div>
<div class="tb-form-panel no-border no-padding-top"
*ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('androidConfig.enabled').value">
<div class="tb-form-row column-xs">
<div class="fixed-title-width-230">{{ 'admin.mobile-app.sha256-certificate-fingerprints' | translate }}</div>
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="sha256CertFingerprints" placeholder="{{'admin.mobile-app.set' | translate}}">
<mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="'admin.mobile-app.sha256-certificate-fingerprints-required' | translate"
*ngIf="mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').hasError('required')
&& mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
</div>
</div>
<div class="tb-form-panel no-border no-padding-top"
*ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('androidConfig.enabled').value">
<div class="tb-form-row column-xs">
<div class="fixed-title-width-230">{{ 'admin.mobile-app.google-play-link' | translate }}</div>
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="storeLink" placeholder="{{'admin.mobile-app.set' | translate}}">
<mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="'admin.mobile-app.google-play-link-required' | translate"
*ngIf="mobileAppSettingsForm.get('androidConfig.storeLink').hasError('required')
&& mobileAppSettingsForm.get('androidConfig.storeLink').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
</div>
</div>
</div>
<div class="tb-form-panel stroked no-padding no-gap" formGroupName="iosConfig">
<div class="tb-form-row no-border no-padding-bottom">
<mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()">
{{ 'admin.mobile-app.ios' | translate }}
</mat-slide-toggle>
</div>
<div class="tb-form-panel no-border no-padding-top"
*ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('iosConfig.enabled').value">
<div class="tb-form-row column-xs">
<div class="fixed-title-width-230">{{ 'admin.mobile-app.app-id' | translate }}</div>
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="appId" placeholder="{{'admin.mobile-app.set' | translate}}">
<mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="'admin.mobile-app.app-id-required' | translate"
*ngIf="mobileAppSettingsForm.get('iosConfig.appId').hasError('required')
&& mobileAppSettingsForm.get('iosConfig.appId').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
</div>
</div>
<div class="tb-form-panel no-border no-padding-top"
*ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('iosConfig.enabled').value">
<div class="tb-form-row column-xs">
<div class="fixed-title-width-230">{{ 'admin.mobile-app.app-store-link' | translate }}</div>
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<input matInput formControlName="storeLink" placeholder="{{'admin.mobile-app.set' | translate}}">
<mat-icon matSuffix
matTooltipPosition="above"
matTooltipClass="tb-error-tooltip"
[matTooltip]="'admin.mobile-app.app-store-link-required' | translate"
*ngIf="mobileAppSettingsForm.get('iosConfig.storeLink').hasError('required')
&& mobileAppSettingsForm.get('iosConfig.storeLink').touched"
class="tb-error">
warning
</mat-icon>
</mat-form-field>
</div>
</div>
<div class="tb-form-row column-xs" *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value">
<div class="fixed-title-width-230">{{ 'mobile.bundle' | translate }}</div>
<tb-entity-autocomplete
fxFlex
useFullEntityId
appearance="outline"
subscriptSizing="dynamic"
[additionalClasses]="['flex']"
[entityType]="entityType.MOBILE_APP_BUNDLE"
formControlName="mobileAppBundleId">
</tb-entity-autocomplete>
</div>
<!-- <div class="tb-form-panel stroked no-padding no-gap" formGroupName="androidConfig">-->
<!-- <div class="tb-form-row no-border no-padding-bottom">-->
<!-- <mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()">-->
<!-- {{ 'admin.mobile-app.android' | translate }}-->
<!-- </mat-slide-toggle>-->
<!-- </div>-->
<!-- <div class="tb-form-panel no-border no-padding-top"-->
<!-- *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('androidConfig.enabled').value">-->
<!-- <div class="tb-form-row column-xs">-->
<!-- <div class="fixed-title-width-230">{{ 'admin.mobile-app.app-package-name' | translate }}</div>-->
<!-- <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">-->
<!-- <input matInput formControlName="appPackage" placeholder="{{'admin.mobile-app.set' | translate}}">-->
<!-- <mat-icon matSuffix-->
<!-- matTooltipPosition="above"-->
<!-- matTooltipClass="tb-error-tooltip"-->
<!-- [matTooltip]="'admin.mobile-app.app-package-name-required' | translate"-->
<!-- *ngIf="mobileAppSettingsForm.get('androidConfig.appPackage').hasError('required')-->
<!-- && mobileAppSettingsForm.get('androidConfig.appPackage').touched"-->
<!-- class="tb-error">-->
<!-- warning-->
<!-- </mat-icon>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="tb-form-panel no-border no-padding-top"-->
<!-- *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('androidConfig.enabled').value">-->
<!-- <div class="tb-form-row column-xs">-->
<!-- <div class="fixed-title-width-230">{{ 'admin.mobile-app.sha256-certificate-fingerprints' | translate }}</div>-->
<!-- <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">-->
<!-- <input matInput formControlName="sha256CertFingerprints" placeholder="{{'admin.mobile-app.set' | translate}}">-->
<!-- <mat-icon matSuffix-->
<!-- matTooltipPosition="above"-->
<!-- matTooltipClass="tb-error-tooltip"-->
<!-- [matTooltip]="'admin.mobile-app.sha256-certificate-fingerprints-required' | translate"-->
<!-- *ngIf="mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').hasError('required')-->
<!-- && mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').touched"-->
<!-- class="tb-error">-->
<!-- warning-->
<!-- </mat-icon>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="tb-form-panel no-border no-padding-top"-->
<!-- *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('androidConfig.enabled').value">-->
<!-- <div class="tb-form-row column-xs">-->
<!-- <div class="fixed-title-width-230">{{ 'admin.mobile-app.google-play-link' | translate }}</div>-->
<!-- <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">-->
<!-- <input matInput formControlName="storeLink" placeholder="{{'admin.mobile-app.set' | translate}}">-->
<!-- <mat-icon matSuffix-->
<!-- matTooltipPosition="above"-->
<!-- matTooltipClass="tb-error-tooltip"-->
<!-- [matTooltip]="'admin.mobile-app.google-play-link-required' | translate"-->
<!-- *ngIf="mobileAppSettingsForm.get('androidConfig.storeLink').hasError('required')-->
<!-- && mobileAppSettingsForm.get('androidConfig.storeLink').touched"-->
<!-- class="tb-error">-->
<!-- warning-->
<!-- </mat-icon>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="tb-form-panel stroked no-padding no-gap" formGroupName="iosConfig">-->
<!-- <div class="tb-form-row no-border no-padding-bottom">-->
<!-- <mat-slide-toggle class="mat-slide" formControlName="enabled" (click)="$event.stopPropagation()">-->
<!-- {{ 'admin.mobile-app.ios' | translate }}-->
<!-- </mat-slide-toggle>-->
<!-- </div>-->
<!-- <div class="tb-form-panel no-border no-padding-top"-->
<!-- *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('iosConfig.enabled').value">-->
<!-- <div class="tb-form-row column-xs">-->
<!-- <div class="fixed-title-width-230">{{ 'admin.mobile-app.app-id' | translate }}</div>-->
<!-- <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">-->
<!-- <input matInput formControlName="appId" placeholder="{{'admin.mobile-app.set' | translate}}">-->
<!-- <mat-icon matSuffix-->
<!-- matTooltipPosition="above"-->
<!-- matTooltipClass="tb-error-tooltip"-->
<!-- [matTooltip]="'admin.mobile-app.app-id-required' | translate"-->
<!-- *ngIf="mobileAppSettingsForm.get('iosConfig.appId').hasError('required')-->
<!-- && mobileAppSettingsForm.get('iosConfig.appId').touched"-->
<!-- class="tb-error">-->
<!-- warning-->
<!-- </mat-icon>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="tb-form-panel no-border no-padding-top"-->
<!-- *ngIf="!mobileAppSettingsForm.get('useDefaultApp').value && mobileAppSettingsForm.get('iosConfig.enabled').value">-->
<!-- <div class="tb-form-row column-xs">-->
<!-- <div class="fixed-title-width-230">{{ 'admin.mobile-app.app-store-link' | translate }}</div>-->
<!-- <mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">-->
<!-- <input matInput formControlName="storeLink" placeholder="{{'admin.mobile-app.set' | translate}}">-->
<!-- <mat-icon matSuffix-->
<!-- matTooltipPosition="above"-->
<!-- matTooltipClass="tb-error-tooltip"-->
<!-- [matTooltip]="'admin.mobile-app.app-store-link-required' | translate"-->
<!-- *ngIf="mobileAppSettingsForm.get('iosConfig.storeLink').hasError('required')-->
<!-- && mobileAppSettingsForm.get('iosConfig.storeLink').touched"-->
<!-- class="tb-error">-->
<!-- warning-->
<!-- </mat-icon>-->
<!-- </mat-form-field>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</div>
<div class="tb-form-panel" formGroupName="qrCodeConfig">
<div class="tb-form-row column-xs no-border no-padding space-between">
@ -154,7 +166,7 @@
{{ 'admin.mobile-app.badges' | translate }}
</mat-slide-toggle>
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="badgePosition" appearance="outline" subscriptSizing="dynamic">
<mat-select formControlName="badgePosition">
<mat-option *ngFor="let badgePosition of badgePositionTranslationsMap | keyvalue" [value]="badgePosition.key">
{{ badgePosition.value | translate }}
</mat-option>

150
ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component.ts
View File

@ -28,6 +28,7 @@ import {
QrCodeSettings
} from '@shared/models/mobile-app.models';
import { ActionUpdateMobileQrCodeEnabled } from '@core/auth/auth.actions';
import { EntityType } from '@shared/models/entity-type.models';
@Component({
selector: 'tb-mobile-qr-code-widget',
@ -37,12 +38,12 @@ import { ActionUpdateMobileQrCodeEnabled } from '@core/auth/auth.actions';
export class MobileQrCodeWidgetSettingsComponent extends PageComponent implements HasConfirmForm, OnDestroy {
mobileAppSettingsForm: FormGroup;
mobileAppSettings: QrCodeSettings;
private readonly destroy$ = new Subject<void>();
readonly badgePositionTranslationsMap = badgePositionTranslationsMap;
readonly entityType = EntityType;
badgePositionTranslationsMap = badgePositionTranslationsMap;
private readonly destroy$ = new Subject<void>();
constructor(protected store: Store<AppState>,
private mobileAppService: MobileApplicationService,
@ -55,33 +56,36 @@ export class MobileQrCodeWidgetSettingsComponent extends PageComponent implement
takeUntil(this.destroy$)
).subscribe(value => {
if (value) {
this.mobileAppSettingsForm.get('androidConfig.appPackage').disable({emitEvent: false});
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').disable({emitEvent: false});
this.mobileAppSettingsForm.get('androidConfig.storeLink').disable({emitEvent: false});
this.mobileAppSettingsForm.get('iosConfig.appId').disable({emitEvent: false});
this.mobileAppSettingsForm.get('iosConfig.storeLink').disable({emitEvent: false});
this.mobileAppSettingsForm.get('mobileAppBundleId').disable({emitEvent: false});
// this.mobileAppSettingsForm.get('androidConfig.appPackage').disable({emitEvent: false});
// this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').disable({emitEvent: false});
// this.mobileAppSettingsForm.get('androidConfig.storeLink').disable({emitEvent: false});
// this.mobileAppSettingsForm.get('iosConfig.appId').disable({emitEvent: false});
// this.mobileAppSettingsForm.get('iosConfig.storeLink').disable({emitEvent: false});
} else {
if (this.mobileAppSettingsForm.get('androidConfig.enabled').value) {
this.mobileAppSettingsForm.get('androidConfig.appPackage').enable({emitEvent: false});
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').enable({emitEvent: false});
this.mobileAppSettingsForm.get('androidConfig.storeLink').enable({emitEvent: false});
}
if (this.mobileAppSettingsForm.get('iosConfig.enabled').value) {
this.mobileAppSettingsForm.get('iosConfig.appId').enable({emitEvent: false});
this.mobileAppSettingsForm.get('iosConfig.storeLink').enable({emitEvent: false});
}
this.mobileAppSettingsForm.get('mobileAppBundleId').enable({emitEvent: false});
// if (this.mobileAppSettingsForm.get('androidConfig.enabled').value) {
// this.mobileAppSettingsForm.get('androidConfig.appPackage').enable({emitEvent: false});
// this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').enable({emitEvent: false});
// this.mobileAppSettingsForm.get('androidConfig.storeLink').enable({emitEvent: false});
// }
// if (this.mobileAppSettingsForm.get('iosConfig.enabled').value) {
// this.mobileAppSettingsForm.get('iosConfig.appId').enable({emitEvent: false});
// this.mobileAppSettingsForm.get('iosConfig.storeLink').enable({emitEvent: false});
// }
}
});
this.mobileAppSettingsForm.get('androidConfig.enabled').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe(value => {
this.androidEnableChanged(value);
});
this.mobileAppSettingsForm.get('iosConfig.enabled').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe(value => {
this.iosEnableChanged(value);
});
// this.mobileAppSettingsForm.get('androidConfig.enabled').valueChanges.pipe(
// takeUntil(this.destroy$)
// ).subscribe(value => {
// this.androidEnableChanged(value);
// });
// this.mobileAppSettingsForm.get('iosConfig.enabled').valueChanges.pipe(
// takeUntil(this.destroy$)
// ).subscribe(value => {
// this.iosEnableChanged(value);
// });
this.mobileAppSettingsForm.get('qrCodeConfig.showOnHomePage').valueChanges.pipe(
takeUntil(this.destroy$)
).subscribe(value => {
@ -98,13 +102,13 @@ export class MobileQrCodeWidgetSettingsComponent extends PageComponent implement
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});
}
// 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});
}
@ -129,17 +133,18 @@ export class MobileQrCodeWidgetSettingsComponent extends PageComponent implement
private buildMobileAppSettingsForm() {
this.mobileAppSettingsForm = this.fb.group({
useDefaultApp: [true],
androidConfig: this.fb.group({
enabled: [true],
appPackage: [{value: '', disabled: true}, [Validators.required]],
sha256CertFingerprints: [{value: '', disabled: true}, [Validators.required]],
storeLink: ['', [Validators.required]]
}),
iosConfig: this.fb.group({
enabled: [true],
appId: [{value: '', disabled: true}, [Validators.required]],
storeLink: ['', [Validators.required]]
}),
mobileAppBundleId: [{value: null, disabled: true}, Validators.required],
// androidConfig: this.fb.group({
// enabled: [true],
// appPackage: [{value: '', disabled: true}, [Validators.required]],
// sha256CertFingerprints: [{value: '', disabled: true}, [Validators.required]],
// storeLink: ['', [Validators.required]]
// }),
// iosConfig: this.fb.group({
// enabled: [true],
// appId: [{value: '', disabled: true}, [Validators.required]],
// storeLink: ['', [Validators.required]]
// }),
qrCodeConfig: this.fb.group({
showOnHomePage: [true],
badgeEnabled: [true],
@ -155,33 +160,33 @@ export class MobileQrCodeWidgetSettingsComponent extends PageComponent implement
this.mobileAppSettingsForm.reset(this.mobileAppSettings);
}
private androidEnableChanged(value: boolean): void {
if (value) {
if (!this.mobileAppSettingsForm.get('useDefaultApp').value) {
this.mobileAppSettingsForm.get('androidConfig.appPackage').enable({emitEvent: false});
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').enable({emitEvent: false});
this.mobileAppSettingsForm.get('androidConfig.storeLink').enable({emitEvent: false});
}
} else {
this.mobileAppSettingsForm.get('androidConfig.appPackage').disable({emitEvent: false});
this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').disable({emitEvent: false});
this.mobileAppSettingsForm.get('androidConfig.storeLink').disable({emitEvent: false});
}
this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true});
}
private iosEnableChanged(value: boolean): void {
if (value) {
if (!this.mobileAppSettingsForm.get('useDefaultApp').value) {
this.mobileAppSettingsForm.get('iosConfig.appId').enable({emitEvent: false});
this.mobileAppSettingsForm.get('iosConfig.storeLink').enable({emitEvent: false});
}
} else {
this.mobileAppSettingsForm.get('iosConfig.appId').disable({emitEvent: false});
this.mobileAppSettingsForm.get('iosConfig.storeLink').disable({emitEvent: false});
}
this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true});
}
// private androidEnableChanged(value: boolean): void {
// if (value) {
// if (!this.mobileAppSettingsForm.get('useDefaultApp').value) {
// this.mobileAppSettingsForm.get('androidConfig.appPackage').enable({emitEvent: false});
// this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').enable({emitEvent: false});
// this.mobileAppSettingsForm.get('androidConfig.storeLink').enable({emitEvent: false});
// }
// } else {
// this.mobileAppSettingsForm.get('androidConfig.appPackage').disable({emitEvent: false});
// this.mobileAppSettingsForm.get('androidConfig.sha256CertFingerprints').disable({emitEvent: false});
// this.mobileAppSettingsForm.get('androidConfig.storeLink').disable({emitEvent: false});
// }
// this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true});
// }
//
// private iosEnableChanged(value: boolean): void {
// if (value) {
// if (!this.mobileAppSettingsForm.get('useDefaultApp').value) {
// this.mobileAppSettingsForm.get('iosConfig.appId').enable({emitEvent: false});
// this.mobileAppSettingsForm.get('iosConfig.storeLink').enable({emitEvent: false});
// }
// } else {
// this.mobileAppSettingsForm.get('iosConfig.appId').disable({emitEvent: false});
// this.mobileAppSettingsForm.get('iosConfig.storeLink').disable({emitEvent: false});
// }
// this.mobileAppSettingsForm.get('qrCodeConfig.badgeEnabled').updateValueAndValidity({onlySelf: true});
// }
save(): void {
const showOnHomePagePreviousValue = this.mobileAppSettings.qrCodeConfig.showOnHomePage;
@ -199,5 +204,4 @@ export class MobileQrCodeWidgetSettingsComponent extends PageComponent implement
confirmForm(): FormGroup {
return this.mobileAppSettingsForm;
}
}

26
ui-ngx/src/app/modules/home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.module.ts
View File

@ -0,0 +1,26 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SharedModule } from '@shared/shared.module';
import { HomeComponentsModule } from '@home/components/home-components.module';
import {
MobileQrCodeWidgetSettingsComponent
} from '@home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings.component';
import { WidgetComponentsModule } from '@home/components/widget/widget-components.module';
import {
MobileQrCodeWidgetSettingsRoutingModule
} from '@home/pages/mobile/qr-code-widget/mobile-qr-code-widget-settings-routing.module';
@NgModule({
declarations: [
MobileQrCodeWidgetSettingsComponent
],
imports: [
CommonModule,
SharedModule,
HomeComponentsModule,
WidgetComponentsModule,
MobileQrCodeWidgetSettingsRoutingModule
]
})
export class MobileQrCodeWidgetSettingsModule { }

3
ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.html
View File

@ -15,7 +15,8 @@
limitations under the License.
-->
<mat-form-field [formGroup]="selectEntityFormGroup" class="mat-block" [appearance]="appearance">
<mat-form-field [formGroup]="selectEntityFormGroup" class="mat-block" [appearance]="appearance" [subscriptSizing]="subscriptSizing"
[class]="additionalClasses">
<mat-label>{{ label | translate }}</mat-label>
<input matInput type="text"
#entityInput

19
ui-ngx/src/app/shared/components/entity/entity-autocomplete.component.ts
View File

@ -25,7 +25,7 @@ import {
Output,
ViewChild
} from '@angular/core';
import { MatFormFieldAppearance } from '@angular/material/form-field';
import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { merge, Observable, of, Subject } from 'rxjs';
import { catchError, debounceTime, map, share, switchMap, tap } from 'rxjs/operators';
@ -39,7 +39,7 @@ import { EntityService } from '@core/http/entity.service';
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
import { Authority } from '@shared/models/authority.enum';
import { getEntityDetailsPageURL, isDefinedAndNotNull, isEqual } from '@core/utils';
import { coerceBoolean } from '@shared/decorators/coercion';
import { coerceArray, coerceBoolean } from '@shared/decorators/coercion';
@Component({
selector: 'tb-entity-autocomplete',
@ -135,6 +135,13 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
@coerceBoolean()
allowCreateNew: boolean;
@Input()
subscriptSizing: SubscriptSizing = 'fixed';
@Input()
@coerceArray()
additionalClasses: Array<string>;
@Output()
entityChanged = new EventEmitter<BaseData<EntityId>>();
@ -274,11 +281,17 @@ export class EntityAutocompleteComponent implements ControlValueAccessor, OnInit
this.notFoundEntities = 'queue-statistics.no-queue-statistics-text';
break;
case EntityType.MOBILE_APP:
this.entityText = 'mobile.applications';
this.entityText = 'mobile.application';
this.noEntitiesMatchingText = 'mobile.no-application-matching';
this.entityRequiredText = 'mobile.application-required';
this.notFoundEntities = 'mobile.no-application-text';
break;
case EntityType.MOBILE_APP_BUNDLE:
this.entityText = 'mobile.bundle';
this.noEntitiesMatchingText = 'mobile.no-bundle-matching';
this.entityRequiredText = 'mobile.bundle-required';
this.notFoundEntities = 'mobile.no-bundle-text';
break;
case AliasEntityType.CURRENT_CUSTOMER:
this.entityText = 'customer.default-customer';
this.noEntitiesMatchingText = 'customer.no-customers-matching';

24
ui-ngx/src/app/shared/models/mobile-app.models.ts
View File

@ -24,8 +24,8 @@ import { deepClone, isNotEmptyStr } from '@core/utils';
export interface QrCodeSettings extends HasTenantId {
useDefaultApp: boolean;
mobileAppBundleId: MobileAppBundleId
androidConfig: AndroidConfig; //TODO: need remove
iosConfig: IosConfig; //TODO: need remove
androidConfig: any; //TODO: need remove
iosConfig: any; //TODO: need remove
qrCodeConfig: QRCodeConfig;
defaultGooglePlayLink: string;
defaultAppStoreLink: string;
@ -34,19 +34,6 @@ export interface QrCodeSettings extends HasTenantId {
}
}
export interface AndroidConfig {
enabled: boolean;
appPackage: string;
sha256CertFingerprints: string;
storeLink: string;
}
export interface IosConfig {
enabled: boolean;
appId: string;
storeLink: string;
}
export interface QRCodeConfig {
showOnHomePage: boolean;
badgeEnabled: boolean;
@ -55,11 +42,6 @@ export interface QRCodeConfig {
qrCodeLabel: string;
}
export interface MobileOSBadgeURL {
iOS: string;
android: string;
}
export enum BadgePosition {
RIGHT = 'RIGHT',
LEFT = 'LEFT'
@ -70,8 +52,6 @@ export const badgePositionTranslationsMap = new Map<BadgePosition, string>([
[BadgePosition.LEFT, 'admin.mobile-app.left']
]);
export type QrCodeConfig = AndroidConfig & IosConfig;
export enum MobileAppStatus {
DRAFT = 'DRAFT',
PUBLISHED = 'PUBLISHED',

8
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -4071,6 +4071,7 @@
"application-package": "Application Package",
"application-secret": "Application Secret",
"application-secret-required": "Application Secret is required",
"application": "Application",
"applications": "Applications",
"copy-app-id": "Copy App ID",
"copy-app-store-link": "Copy App Store link",
@ -4111,6 +4112,7 @@
"version-information": "Version information",
"min-version-release-notes": "Min version release notes",
"latest-version-release-notes": "Latest version release notes",
"bundle": "Bundle",
"bundles": "Bundles",
"add-bundle": "Add bundle",
"title": "Title",
@ -4126,8 +4128,11 @@
"description": "Description",
"basic-settings": "Basic settings",
"no-application-matching": "No application matching '{{entity}}' were found.",
"no-bundle-matching": "No bundle matching '{{entity}}' were found.",
"application-required": "Application is required.",
"bundle-required": "Bundle is required.",
"no-application-text": "No applications found",
"no-bundle-text": "No bundle found",
"layout": "Layout",
"pages": "Pages",
"hide-all-pages": "Hide all pages",
@ -4152,7 +4157,8 @@
"custom-page": "Custom page",
"edit-page": "Edit page",
"edit-custom-page": "Edit custom page",
"delete-page": "Delete page"
"delete-page": "Delete page",
"qr-code-widget": "QR code widget"
},
"notification": {
"action-button": "Action button",

Write Preview
Loading…
Cancel
Save