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

UI: Add check allow delivery method when send notification without template

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-04-24 13:18:41 +03:00
parent 631f1db378
commit 5da7ca848f
7 changed files with 150 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui-ngx/src/app/core/http/notification.service.ts
View File

@ -22,6 +22,7 @@ import { PageLink } from '@shared/models/page/page-link';
import { PageData } from '@shared/models/page/page-data';
import {
Notification,
NotificationDeliveryMethod,
NotificationRequest,
NotificationRequestInfo,
NotificationRequestPreview,
@ -71,6 +72,10 @@ export class NotificationService {
return this.http.get<NotificationRequest>(`/api/notification/request/${id}`, defaultHttpOptionsFromConfig(config));
}
public getAvailableDeliveryMethods(config?: RequestConfig): Observable<Array<NotificationDeliveryMethod>> {
return this.http.get<Array<NotificationDeliveryMethod>>(`/api/notification/deliveryMethods`, defaultHttpOptionsFromConfig(config));
}
public deleteNotificationRequest(id: string, config?: RequestConfig): Observable<void> {
return this.http.delete<void>(`/api/notification/request/${id}`, defaultHttpOptionsFromConfig(config));
}

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

@ -62,13 +62,33 @@
<label [ngClass]="{'tb-error': notificationRequestForm.get('template.configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
<div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
<section formGroupName="deliveryMethodsTemplates" fxLayout="row wrap" style="margin-bottom: 12px;">
<section *ngFor="let deliveryMethods of notificationDeliveryMethods; even as isEven" class="delivery-method-container"
[formGroupName]="deliveryMethods" fxFlex="50%" [ngClass]={even:isEven}>
<mat-slide-toggle class="delivery-method" formControlName="enabled">
{{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }}
</mat-slide-toggle>
</section>
<section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
<ng-container *ngFor="let deliveryMethods of notificationDeliveryMethods">
<a *ngIf="isInteractDeliveryMethod(deliveryMethods); else deliveryMethod"
class="delivery-method-container interact"
[routerLink]="configurationPage(deliveryMethods)"
[formGroupName]="deliveryMethods"
[matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
matTooltipPosition="above">
<mat-slide-toggle class="delivery-method" formControlName="enabled">
{{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }}
</mat-slide-toggle>
<mat-icon *ngIf="isInteractDeliveryMethod(deliveryMethods)">
chevron_right
</mat-icon>
</a>
<ng-template #deliveryMethod>
<section class="delivery-method-container"
[formGroupName]="deliveryMethods"
[matTooltip]="getDeliveryMethodsTooltip(deliveryMethods)"
[matTooltipDisabled]="getDeliveryMethodsTemplatesControl(deliveryMethods).enabled"
matTooltipPosition="above">
<mat-slide-toggle class="delivery-method" formControlName="enabled">
{{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }}
</mat-slide-toggle>
</section>
</ng-template>
</ng-container>
</section>
</section>
</section>

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

@ -60,19 +60,28 @@
}
}
.delivery-method-container {
padding-bottom: 8px;
.delivery-methods-container {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 8px;
&.even {
padding-right: 8px;
}
.delivery-method {
.delivery-method-container {
display: inline-flex;
flex: 1 1 calc(50% - 8px);
padding: 16px 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
width: 100%;
height: 100%;
&.interact {
cursor: pointer;
color: inherit;
}
.delivery-method {
width: 100%;
height: 100%;
}
}
}
@ -258,3 +267,13 @@
}
}
}
:host ::ng-deep {
.delivery-methods-container {
.delivery-method-container {
&.interact * {
cursor: pointer;
}
}
}
}

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

@ -27,7 +27,7 @@ import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { Router } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NotificationService } from '@core/http/notification.service';
import { deepTrim, guid, isDefinedAndNotNull } from '@core/utils';
import { Observable } from 'rxjs';
@ -44,6 +44,10 @@ import {
} from '@home/pages/notification/recipient/recipient-notification-dialog.component';
import { MatButton } from '@angular/material/button';
import { TemplateConfiguration } from '@home/pages/notification/template/template-configuration';
import { Authority } from '@shared/models/authority.enum';
import { AuthUser } from '@shared/models/user.model';
import { getCurrentAuthUser } from '@core/auth/auth.selectors';
import { TranslateService } from '@ngx-translate/core';
export interface RequestNotificationDialogData {
request?: NotificationRequest;
@ -76,6 +80,8 @@ export class SentNotificationDialogComponent extends
dialogTitle = 'notification.notify-again';
private authUser: AuthUser = getCurrentAuthUser(this.store);
constructor(protected store: Store<AppState>,
protected router: Router,
protected dialogRef: MatDialogRef<SentNotificationDialogComponent, NotificationRequest>,
@ -83,9 +89,16 @@ export class SentNotificationDialogComponent extends
private breakpointObserver: BreakpointObserver,
protected fb: FormBuilder,
private notificationService: NotificationService,
private dialog: MatDialog) {
private dialog: MatDialog,
private translate: TranslateService) {
super(store, router, dialogRef, fb);
this.notificationDeliveryMethods.forEach(method => {
if (method !== NotificationDeliveryMethod.WEB) {
this.templateNotificationForm.get('configuration.deliveryMethodsTemplates').get(method).disable({emitEvent: false});
}
});
this.stepperOrientation = this.breakpointObserver.observe(MediaBreakpoints['gt-sm'])
.pipe(map(({matches}) => matches ? 'horizontal' : 'vertical'));
@ -148,6 +161,16 @@ export class SentNotificationDialogComponent extends
}
this.notificationRequestForm.get('useTemplate').setValue(useTemplate, {onlySelf : true});
}
this.notificationService.getAvailableDeliveryMethods({ignoreLoading: true}).subscribe(allowMethods => {
this.notificationDeliveryMethods.forEach(method => {
if (allowMethods.includes(method)) {
this.getDeliveryMethodsTemplatesControl(method).enable({emitEvent: true});
} else {
this.getDeliveryMethodsTemplatesControl(method).setValue(false, {emitEvent: true}); //used for notify again
}
});
});
}
ngOnDestroy() {
@ -240,6 +263,14 @@ export class SentNotificationDialogComponent extends
});
}
private isSysAdmin(): boolean {
return this.authUser.authority === Authority.SYS_ADMIN;
}
private isTenantAdmin(): boolean {
return this.authUser.authority === Authority.TENANT_ADMIN;
}
minDate(): Date {
return new Date(getCurrentTime(this.notificationRequestForm.get('additionalConfig.timezone').value).format('lll'));
}
@ -272,4 +303,41 @@ export class SentNotificationDialogComponent extends
}
});
}
getDeliveryMethodsTemplatesControl(deliveryMethod: NotificationDeliveryMethod): AbstractControl {
return this.templateNotificationForm.get('configuration.deliveryMethodsTemplates').get(deliveryMethod).get('enabled');
}
getDeliveryMethodsTooltip(deliveryMethod: NotificationDeliveryMethod): string {
if (this.allowConfigureDeliveryMethod(deliveryMethod)) {
return this.translate.instant('notification.delivery-method-not-configure-click');
}
return this.translate.instant('notification.delivery-method-not-configure-contact');
}
allowConfigureDeliveryMethod(deliveryMethod: NotificationDeliveryMethod): boolean {
if (deliveryMethod === NotificationDeliveryMethod.WEB) {
return false;
}
if(this.isSysAdmin()) {
return true;
} else if (this.isTenantAdmin()) {
return deliveryMethod === NotificationDeliveryMethod.SLACK;
}
return false;
}
isInteractDeliveryMethod(deliveryMethod: NotificationDeliveryMethod) {
return this.getDeliveryMethodsTemplatesControl(deliveryMethod).disabled && this.allowConfigureDeliveryMethod(deliveryMethod);
}
configurationPage(deliveryMethod: NotificationDeliveryMethod) {
switch (deliveryMethod) {
case NotificationDeliveryMethod.EMAIL:
return '/settings/outgoing-mail';
case NotificationDeliveryMethod.SMS:
case NotificationDeliveryMethod.SLACK:
return '/settings/notifications';
}
}
}

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

@ -57,9 +57,10 @@
<label [ngClass]="{'tb-error': templateNotificationForm.get('configuration.deliveryMethodsTemplates').hasError('atLeastOne')}"
class="tb-title tb-required">{{ "notification.delivery-methods" | translate }}</label>
<div class="tb-hint" translate>notification.at-least-one-should-be-selected</div>
<section formGroupName="deliveryMethodsTemplates" fxLayout="row warap">
<section *ngFor="let deliveryMethods of notificationDeliveryMethods; even as isEven" class="delivery-method-container"
[formGroupName]="deliveryMethods" fxFlex="50%" [ngClass]={even:isEven}>
<section formGroupName="deliveryMethodsTemplates" class="delivery-methods-container">
<section *ngFor="let deliveryMethods of notificationDeliveryMethods"
class="delivery-method-container"
[formGroupName]="deliveryMethods">
<mat-slide-toggle class="delivery-method" formControlName="enabled">
{{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }}
</mat-slide-toggle>

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

@ -61,19 +61,23 @@
}
}
.delivery-method-container {
padding-bottom: 8px;
.delivery-methods-container {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 8px;
&.even {
padding-right: 8px;
}
.delivery-method {
.delivery-method-container {
display: inline-flex;
flex: 1 1 calc(50% - 8px);
padding: 16px 12px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 6px;
width: 100%;
height: 100%;
.delivery-method {
width: 100%;
height: 100%;
}
}
}

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

@ -2820,6 +2820,8 @@
"web": "Web",
"web-preview": "Web notification preview"
},
"delivery-method-not-configure-click": "Delivery method is not configured. Click to setup.",
"delivery-method-not-configure-contact": "Delivery method is not configured. Contact your system administrator.",
"delivery-methods": "Delivery methods",
"description": "Description",
"device-activity-trigger-settings": "Device active trigger settings",
@ -2906,7 +2908,7 @@
},
"recipients": "Recipients",
"recipients-count": "{ count, plural, =1 {1 recipient} other {# recipients} }",
"recipients-required": "Recipients is required",
"recipients-required": "Recipients are required",
"request-search": "Request search",
"request-status": {
"processing": "Processing",