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

UI: Refactoring and fix notification delivery method in mobile

pull/8522/head
Vladyslav_Prykhodko 3 years ago
parent
fa7fcda2c7
commit
7dd5cada35
7 changed files with 78 additions and 105 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
  2. 25
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
  3. 57
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss
  4. 8
      ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.componet.ts
  5. 7
      ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.html
  6. 3
      ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.scss
  7. 4
      ui-ngx/src/app/shared/models/notification.models.ts

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 color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
</mat-progress-bar> </mat-progress-bar>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<mat-card-content style="padding-top: 16px;"> <mat-card-content>
<form [formGroup]="smsProvider" (ngSubmit)="save()"> <form [formGroup]="smsProvider" (ngSubmit)="save()">
<fieldset [disabled]="isLoading$ | async"> <fieldset [disabled]="isLoading$ | async">
<tb-sms-provider-configuration <tb-sms-provider-configuration
@ -46,53 +46,54 @@
</form> </form>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
<mat-card appearance="outlined" class="settings-card"> <form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
<mat-card-header> <fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<mat-card-title> <mat-card appearance="outlined" class="settings-card">
<span class="mat-headline-5" translate>admin.slack-settings</span> <mat-card-header>
</mat-card-title> <mat-card-title>
<span fxFlex></span> <span class="mat-headline-5" translate>admin.slack-settings</span>
<div tb-help="slackSettings"></div> </mat-card-title>
</mat-card-header> <span fxFlex></span>
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> <div tb-help="slackSettings"></div>
</mat-progress-bar> </mat-card-header>
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
<mat-card-content style="padding-top: 16px;"> </mat-progress-bar>
<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()"> <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs"> <mat-card-content>
<section formGroupName="SLACK"> <section formGroupName="SLACK">
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label translate>admin.slack-api-token</mat-label> <mat-label translate>admin.slack-api-token</mat-label>
<input matInput formControlName="botToken" /> <input matInput formControlName="botToken"/>
</mat-form-field> </mat-form-field>
</section> </section>
</fieldset> </mat-card-content>
</form> <mat-card-header>
</mat-card-content> <mat-card-title>
<mat-card-header> <span class="mat-headline-5" translate>admin.mobile-settings</span>
<mat-card-title> </mat-card-title>
<span class="mat-headline-5" translate>admin.mobile-settings</span> <span fxFlex></span>
</mat-card-title> <!-- <div tb-help="mobileSettings"></div>-->
<span fxFlex></span> </mat-card-header>
<!-- <div tb-help="slackSettings"></div>--> <mat-card-content>
</mat-card-header> <section formGroupName="MOBILE" style="margin-bottom: 16px;">
<mat-card-content style="padding-top: 16px;"> <tb-file-input required
<form [formGroup]="notificationSettingsForm" (ngSubmit)="saveNotification()">
<fieldset [disabled]="isLoading$ | async" formGroupName="deliveryMethodsConfigs">
<section formGroupName="MOBILE">
<tb-file-input style="margin-bottom: 16px;"
required
formControlName="firebaseServiceAccountCredentials" formControlName="firebaseServiceAccountCredentials"
dropLabel="{{ 'admin.select-firebase-service-account-file' | translate }}" 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> </tb-file-input>
</section> </section>
<div fxLayout="row" fxLayoutAlign="end center" class="layout-wrap"> <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" <button mat-button mat-raised-button color="primary"
[disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
type="submit">{{'action.save' | translate}} type="submit">{{'action.save' | translate}}
</button> </button>
</div> </div>
</fieldset> </mat-card-content>
</form> </mat-card>
</mat-card-content> </fieldset>
</mat-card> </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"> <mat-step [stepControl]="notificationRequestForm">
<ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template> <ng-template matStepLabel>{{ 'notification.compose' | translate }}</ng-template>
<form [formGroup]="notificationRequestForm"> <form [formGroup]="notificationRequestForm">
<div fxLayout="row" fxLayoutAlign="center"> <div fxLayoutAlign="center">
<mat-button-toggle-group class="tb-notification-use-template-toggle-group" <tb-toggle-header (valueChange)="notificationRequestForm.get('useTemplate').patchValue($event)"
style="width: 320px;" class="tb-notification-use-template-toggle-group"
formControlName="useTemplate"> ignoreMdLgSize
<mat-button-toggle fxFlex [value]=false>{{ 'notification.start-from-scratch' | translate }}</mat-button-toggle> useSelectOnMdLg="false"
<mat-button-toggle fxFlex [value]=true>{{ 'notification.use-template' | translate }}</mat-button-toggle> appearance="fill"
</mat-button-toggle-group> 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>
<div *ngIf="notificationRequestForm.get('useTemplate').value; else scratchTemplate"> <div *ngIf="notificationRequestForm.get('useTemplate').value; else scratchTemplate">
<tb-template-autocomplete <tb-template-autocomplete
@ -413,11 +419,12 @@
</section> </section>
<section class="preview-group notification" *ngIf="preview.processedTemplates.MOBILE?.enabled"> <section class="preview-group notification" *ngIf="preview.processedTemplates.MOBILE?.enabled">
<div fxLayout="row" fxLayoutGap="8px" fxLayoutAlign="start center"> <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 class="group-title" translate>notification.delivery-method.mobile-preview</div>
</div> </div>
<div class="notification-content"> <div class="notification-content">
{{ preview.processedTemplates.MOBILE.body }} <div class="subject">{{ preview.processedTemplates.MOBILE.subject }}</div>
<div>{{ preview.processedTemplates.MOBILE.body }}</div>
</div> </div>
</section> </section>
<section class="preview-group"> <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"; @import "../../../../../../theme";
:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) { :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
width: 820px; width: 930px;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
max-height: 100vh; max-height: 100vh;
@ -76,6 +76,7 @@
.delivery-method-container { .delivery-method-container {
display: inline-flex; display: inline-flex;
flex: 1 1 calc(50% - 8px); flex: 1 1 calc(50% - 8px);
max-width: calc(50% - 8px);
padding: 16px 12px; padding: 16px 12px;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px; border-radius: 6px;
@ -211,58 +212,8 @@
} }
} }
.mat-button-toggle-group.tb-notification-use-template-toggle-group { .tb-notification-use-template-toggle-group {
&.mat-button-toggle-group-appearance-standard { margin-bottom: 24px;
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;
}
} }
.preview-group { .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, protected fb: FormBuilder,
private notificationService: NotificationService, private notificationService: NotificationService,
private dialog: MatDialog, private dialog: MatDialog,
private translate: TranslateService) { public translate: TranslateService) {
super(store, router, dialogRef, fb); super(store, router, dialogRef, fb);
this.notificationDeliveryMethods.forEach(method => { this.notificationDeliveryMethods.forEach(method => {
@ -309,13 +309,17 @@ export class SentNotificationDialogComponent extends
} }
allowConfigureDeliveryMethod(deliveryMethod: NotificationDeliveryMethod): boolean { allowConfigureDeliveryMethod(deliveryMethod: NotificationDeliveryMethod): boolean {
const tenantAllowConfigureDeliveryMethod = new Set([
NotificationDeliveryMethod.SLACK,
NotificationDeliveryMethod.MOBILE
]);
if (deliveryMethod === NotificationDeliveryMethod.WEB) { if (deliveryMethod === NotificationDeliveryMethod.WEB) {
return false; return false;
} }
if(this.isSysAdmin()) { if(this.isSysAdmin()) {
return true; return true;
} else if (this.isTenantAdmin()) { } else if (this.isTenantAdmin()) {
return deliveryMethod === NotificationDeliveryMethod.SLACK || deliveryMethod === NotificationDeliveryMethod.MOBILE; return tenantAllowConfigureDeliveryMethod.has(deliveryMethod);
} }
return false; 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> trigger-text="{{ 'notification.see-documentation' | translate }}"></span>
</div> </div>
<form [formGroup]="mobileTemplateForm" fxLayoutGap="8px"> <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-form-field class="mat-block">
<mat-label translate>notification.message</mat-label> <mat-label translate>notification.message</mat-label>
<textarea matInput <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"; @import "../../../../../../theme";
:host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) { :host-context(.tb-fullscreen-dialog .mat-mdc-dialog-container) {
width: 800px; width: 840px;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
max-height: 100vh; max-height: 100vh;
@ -70,6 +70,7 @@
.delivery-method-container { .delivery-method-container {
display: inline-flex; display: inline-flex;
flex: 1 1 calc(50% - 8px); flex: 1 1 calc(50% - 8px);
max-width: calc(50% - 8px);
padding: 16px 12px; padding: 16px 12px;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px; 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 }; deliveryMethodsConfigs: { [key in NotificationDeliveryMethod]: NotificationDeliveryMethodConfig };
} }
export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig & MobileNotificationDeliveryMethodConfig>{ export interface NotificationDeliveryMethodConfig extends Partial<SlackNotificationDeliveryMethodConfig &
MobileNotificationDeliveryMethodConfig>{
enabled: boolean; enabled: boolean;
method: NotificationDeliveryMethod; method: NotificationDeliveryMethod;
} }
@ -99,6 +100,7 @@ interface SlackNotificationDeliveryMethodConfig {
interface MobileNotificationDeliveryMethodConfig { interface MobileNotificationDeliveryMethodConfig {
firebaseServiceAccountCredentials: string; firebaseServiceAccountCredentials: string;
firebaseServiceAccountCredentialsFileName: string;
} }
export interface SlackConversation { export interface SlackConversation {

Write Preview
Loading…
Cancel
Save