dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactoring and fix notification delivery method in mobile

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-06-12 18:16:24 +03:00
parent fa7fcda2c7
commit 7dd5cada35
7 changed files with 78 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
View File

@ -26,7 +26,7 @@
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px;">
<mat-card-content>
<form [formGroup]="smsProvider" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async">
<tb-sms-provider-configuration
@ -46,53 +46,54 @@
</form>
</mat-card-content>
</mat-card>
<mat-card appearance="outlined" class="settings-card">
<mat-card-header>
<mat-card-title>
<span class="mat-headline-5" translate>admin.slack-settings</span>
</mat-card-title>
<span fxFlex></span>
<div tb-help="slackSettings"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px;">
<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<mat-card appearance="outlined" class="settings-card">
<mat-card-header>
<mat-card-title>
<span class="mat-headline-5" translate>admin.slack-settings</span>
</mat-card-title>
<span fxFlex></span>
<div tb-help="slackSettings"></div>
</mat-card-header>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content>
<section formGroupName="SLACK">
<mat-form-field class="mat-block">
<mat-label translate>admin.slack-api-token</mat-label>
<input matInput formControlName="botToken" />
<input matInput formControlName="botToken"/>
</mat-form-field>
</section>
</fieldset>
</form>
</mat-card-content>
<mat-card-header>
<mat-card-title>
<span class="mat-headline-5" translate>admin.mobile-settings</span>
</mat-card-title>
<span fxFlex></span>
<!-- <div tb-help="slackSettings"></div>-->
</mat-card-header>
<mat-card-content style="padding-top: 16px;">
<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<section formGroupName="MOBILE">
<tb-file-input style="margin-bottom: 16px;"
required
</mat-card-content>
<mat-card-header>
<mat-card-title>
<span class="mat-headline-5" translate>admin.mobile-settings</span>
</mat-card-title>
<span fxFlex></span>
<!-- <div tb-help="mobileSettings"></div>-->
</mat-card-header>
<mat-card-content>
<section formGroupName="MOBILE" style="margin-bottom: 16px;">
<tb-file-input required
formControlName="firebaseServiceAccountCredentials"
dropLabel="{{ 'admin.select-firebase-service-account-file' | translate }}"
[label]="'admin.firebase-service-account-file' | translate">
label="{{ 'admin.firebase-service-account-file' | translate }}"
accept=".json,application/json"
allowedExtensions="json"
[existingFileName]="notificationSettingsForm.get('deliveryMethodsConfigs.MOBILE.firebaseServiceAccountCredentialsFileName')?.value"
(fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE.firebaseServiceAccountCredentialsFileName').patchValue($event)">
</tb-file-input>
</section>
<div fxLayout="row" fxLayoutAlign="end center" class="layout-wrap">
<button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
<div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end">
<button mat-button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
type="submit">{{'action.save' | translate}}
</button>
</div>
</fieldset>
</form>
</mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
</fieldset>
</form>

25
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
View File

@ -39,13 +39,19 @@
<mat-step [stepControl]="notificationRequestForm">
<ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template>
<form [formGroup]="notificationRequestForm">
<div fxLayout="row" fxLayoutAlign="center">
<mat-button-toggle-group class="tb-notification-use-template-toggle-group"
style="width: 320px;"
formControlName="useTemplate">
<mat-button-toggle fxFlex [value]=false>{{ 'notification.start-from-scratch' | translate }}</mat-button-toggle>
<mat-button-toggle fxFlex [value]=true>{{ 'notification.use-template' | translate }}</mat-button-toggle>
</mat-button-toggle-group>
<div fxLayoutAlign="center">
<tb-toggle-header (valueChange)="notificationRequestForm.get('useTemplate').patchValue($event)"
class="tb-notification-use-template-toggle-group"
ignoreMdLgSize
useSelectOnMdLg="false"
appearance="fill"
name="useTemplate"
[options]="[
{ name: translate.instant('notification.start-from-scratch'), value: false},
{ name: translate.instant('notification.use-template'), value: true}
]"
[value]="notificationRequestForm.get('useTemplate').value">
</tb-toggle-header>
</div>
<div *ngIf="notificationRequestForm.get('useTemplate').value; else scratchTemplate">
<tb-template-autocomplete
@ -413,11 +419,12 @@
</section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.MOBILE?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center">
<mat-icon class="tb-mat-18" svgIcon="mdi:smartphone"></mat-icon>
<mat-icon class="tb-mat-18" svgIcon="mdi:cellphone-text"></mat-icon>
<div class="group-title" translate>notification.delivery-method.mobile-preview</div>
</div>
<div class="notification-content">
{{ preview.processedTemplates.MOBILE.body }}
<div class="subject">{{ preview.processedTemplates.MOBILE.subject }}</div>
<div>{{ preview.processedTemplates.MOBILE.body }}</div>
</div>
</section>
<section class="preview-group">

57
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
View File

@ -17,7 +17,7 @@
@import "../../../../../../theme";
:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
width: 820px;
width: 930px;
height: 100%;
max-width: 100%;
max-height: 100vh;
@ -76,6 +76,7 @@
.delivery-method-container {
display: inline-flex;
flex: 1 1 calc(50% - 8px);
max-width: calc(50% - 8px);
padding: 16px 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
@ -211,58 +212,8 @@
}
}
.mat-button-toggle-group.tb-notification-use-template-toggle-group {
&.mat-button-toggle-group-appearance-standard {
border: none;
border-radius: 18px;
margin-bottom: 24px;
.mat-button-toggle + .mat-button-toggle {
border-left: none;
}
}
.mat-button-toggle {
background: rgba(0, 0, 0, 0.06);
height: 36px;
align-items: center;
display: flex;
.mat-button-toggle-ripple {
top: 2px;
left: 2px;
right: 2px;
bottom: 2px;
border-radius: 18px;
}
}
.mat-button-toggle-button {
color: #959595;
}
.mat-button-toggle-focus-overlay {
border-radius: 18px;
margin: 2px;
}
.mat-button-toggle-checked .mat-button-toggle-button {
background-color: $tb-primary-color;
color: #fff;
border-radius: 18px;
margin-left: 2px;
margin-right: 2px;
}
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
line-height: 34px;
font-size: 16px;
font-weight: 500;
}
.mat-button-toggle-checked.mat-button-toggle-appearance-standard:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
opacity: .01;
}
.tb-notification-use-template-toggle-group {
margin-bottom: 24px;
}
.preview-group {

8
ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
View File

@ -90,7 +90,7 @@ export class SentNotificationDialogComponent extends
protected fb: FormBuilder,
private notificationService: NotificationService,
private dialog: MatDialog,
private translate: TranslateService) {
public translate: TranslateService) {
super(store, router, dialogRef, fb);
this.notificationDeliveryMethods.forEach(method => {
@ -309,13 +309,17 @@ export class SentNotificationDialogComponent extends
}
allowConfigureDeliveryMethod(deliveryMethod: NotificationDeliveryMethod): boolean {
const tenantAllowConfigureDeliveryMethod = new Set([
NotificationDeliveryMethod.SLACK,
NotificationDeliveryMethod.MOBILE
]);
if (deliveryMethod === NotificationDeliveryMethod.WEB) {
return false;
}
if(this.isSysAdmin()) {
return true;
} else if (this.isTenantAdmin()) {
return deliveryMethod === NotificationDeliveryMethod.SLACK || deliveryMethod === NotificationDeliveryMethod.MOBILE;
return tenantAllowConfigureDeliveryMethod.has(deliveryMethod);
}
return false;
}

7
ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
View File

@ -271,6 +271,13 @@
trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
</div>
<form [formGroup]="mobileTemplateForm" fxLayoutGap="8px">
<mat-form-field class="mat-block">
<mat-label translate>notification.subject</mat-label>
<input matInput formControlName="subject">
<mat-error *ngIf="mobileTemplateForm.get('subject').hasError('required')">
{{ 'notification.subject-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block">
<mat-label translate>notification.message</mat-label>
<textarea matInput

3
ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
View File

@ -17,7 +17,7 @@
@import "../../../../../../theme";
:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
width: 800px;
width: 840px;
height: 100%;
max-width: 100%;
max-height: 100vh;
@ -70,6 +70,7 @@
.delivery-method-container {
display: inline-flex;
flex: 1 1 calc(50% - 8px);
max-width: calc(50% - 8px);
padding: 16px 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;

4
ui-ngx/src/app/shared/models/notification.models.ts
View File

@ -88,7 +88,8 @@ export interface NotificationSettings {
deliveryMethodsConfigs: { [key in NotificationDeliveryMethod]: NotificationDeliveryMethodConfig };
}
export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig & MobileNotificationDeliveryMethodConfig>{
export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig &
MobileNotificationDeliveryMethodConfig>{
enabled: boolean;
method: NotificationDeliveryMethod;
}
@ -99,6 +100,7 @@ interface SlackNotificationDeliveryMethodConfig {
interface MobileNotificationDeliveryMethodConfig {
firebaseServiceAccountCredentials: string;
firebaseServiceAccountCredentialsFileName: string;
}
export interface SlackConversation {