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

UI: revert user settings

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2023-01-27 15:48:18 +02:00
parent 9e35f4bd0f
commit ebb5c634a3
7 changed files with 100 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui-ngx/src/app/core/ws/notification-websocket.service.ts
View File

@ -161,6 +161,7 @@ export class NotificationWebsocketService implements NotificationWsService {
private publishCommands() { private publishCommands() {
while (this.isOpened && this.cmdsWrapper.hasCommands()) { while (this.isOpened && this.cmdsWrapper.hasCommands()) {
this.dataStream.next(this.cmdsWrapper.preparePublishCommands()); this.dataStream.next(this.cmdsWrapper.preparePublishCommands());
this.cmdsWrapper.clear();
this.checkToClose(); this.checkToClose();
} }
this.tryOpenSocket(); this.tryOpenSocket();

129
ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.html
View File

@ -16,92 +16,47 @@
--> -->
<div class="tb-notification-center"> <div class="tb-notification-center">
<mat-drawer-container class="tb-absolute-fill tb-notification-draw-container"> <div class="tb-notification-center-content">
<div class="tb-notification-center-content"> <div class="tabs-container">
<div class="tabs-container"> <mat-tab-group #matTabGroup (selectedIndexChange)="updateData()">
<mat-tab-group #matTabGroup (selectedIndexChange)="updateData()"> <mat-tab label="{{ 'notification.inbox' | translate }}">
<mat-tab label="{{ 'notification.inbox' | translate }}"> <tb-notification-table
<tb-notification-table [notificationType]="entityType.NOTIFICATION">
[notificationType]="entityType.NOTIFICATION" </tb-notification-table>
(toggleSettings)="toggleNotificationSettings()"> </mat-tab>
</tb-notification-table> <mat-tab label="{{ 'notification.sent' | translate }}" #requestTab="matTab">
</mat-tab> <tb-notification-table
<mat-tab label="{{ 'notification.sent' | translate }}" #requestTab="matTab"> #notificationRequest
<tb-notification-table [notificationType]="entityType.NOTIFICATION_REQUEST">
#notificationRequest </tb-notification-table>
[notificationType]="entityType.NOTIFICATION_REQUEST"> </mat-tab>
</tb-notification-table> <mat-tab label="{{ 'notification.templates' | translate }}">
</mat-tab> <tb-notification-table
<mat-tab label="{{ 'notification.templates' | translate }}"> [notificationType]="entityType.NOTIFICATION_TEMPLATE">
<tb-notification-table </tb-notification-table>
[notificationType]="entityType.NOTIFICATION_TEMPLATE"> </mat-tab>
</tb-notification-table> <mat-tab label="{{ 'notification.targets' | translate }}">
</mat-tab> <tb-notification-table
<mat-tab label="{{ 'notification.targets' | translate }}"> [notificationType]="entityType.NOTIFICATION_TARGET">
<tb-notification-table </tb-notification-table>
[notificationType]="entityType.NOTIFICATION_TARGET"> </mat-tab>
</tb-notification-table> <mat-tab label="{{ 'notification.rules' | translate }}">
</mat-tab> <ng-template matTabContent>
<mat-tab label="{{ 'notification.rules' | translate }}"> Content 1 - Loaded
<ng-template matTabContent> </ng-template>
Content 1 - Loaded </mat-tab>
</ng-template> <mat-tab disabled>
</mat-tab> <ng-template mat-tab-label>
<mat-tab disabled> <div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
<ng-template mat-tab-label> <button mat-flat-button color="primary" (click)="sendNotification($event)">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center"> <div fxLayout="row" fxLayoutAlign="start center">
<button mat-flat-button color="primary" (click)="sendNotification($event)"> <mat-icon>send</mat-icon>{{ 'notification.send-notification' | translate }}
<div fxLayout="row" fxLayoutAlign="start center"> </div>
<mat-icon>send</mat-icon>{{ 'notification.send-notification' | translate }} </button>
</div> </div>
</button> </ng-template>
</div> </mat-tab>
</ng-template> </mat-tab-group>
</mat-tab>
</mat-tab-group>
</div>
</div> </div>
<mat-drawer mode="over" </div>
#notificationSettings
position="end"
class="notification-settings">
<div>
<div fxLayout="row" fxLayoutAlign="start center">
<button mat-icon-button (click)="toggleNotificationSettings()">
<mat-icon>chevron_left</mat-icon>
</button>
<h6 class="title">Notification settings</h6>
</div>
<div style="max-width: 450px">
<fieldset class="fields-group">
<legend class="group-title">Current user allow delivery method</legend>
<form [formGroup]="notificationSettingsForm">
<section formGroupName="deliveryMethodsConfigs">
<section *ngFor="let deliveryMethods of notificationDeliveryMethods" [formGroupName]="deliveryMethods">
<mat-slide-toggle class="delivery-method" formControlName="enabled">
{{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }}
</mat-slide-toggle>
</section>
<section formGroupName="SLACK">
<mat-form-field class="mat-block">
<mat-label>Slack bot token</mat-label>
<input matInput formControlName="botToken" required>
<mat-error *ngIf="notificationSettingsForm.get('deliveryMethodsConfigs.SLACK.botToken').hasError('required')">
{{ 'notification.link-required' | translate }}
</mat-error>
</mat-form-field>
</section>
</section>
</form>
</fieldset>
<button mat-raised-button
[disabled]="notificationSettingsForm.pristine || notificationSettingsForm.invalid"
(click)="saveNotificationSettigs($event)"
color="primary">
Save
</button>
</div>
</div>
</mat-drawer>
</mat-drawer-container>
</div> </div>

71
ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.scss
View File

@ -20,14 +20,11 @@
height: 100%; height: 100%;
display: block; display: block;
.tb-notification-center { .tb-notification-center {
padding: 8px;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
.tb-notification-draw-container {
margin: 8px;
}
.tb-notification-center-content { .tb-notification-center-content {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -58,34 +55,52 @@
flex-direction: column; flex-direction: column;
flex: 1 1 100%; flex: 1 1 100%;
} }
}
.notification-settings { //.mat-toolbar-tools{
width: 100%; // min-height: auto;
padding: 24px; //}
//
.title { //.title-container{
margin: 0; // overflow: hidden;
line-height: 1.4rem; //}
} //
//.tb-entity-table-title {
.fields-group { // padding-right: 20px;
padding: 8px 16px 0; // white-space: nowrap;
margin: 10px 0; // overflow: hidden;
border: 1px groove rgba(0, 0, 0, .25); // text-overflow: ellipsis;
border-radius: 4px; //}
//
legend { //.table-container {
color: rgba(0, 0, 0, .7); // overflow: auto;
} //}
//
.delivery-method { //.tb-entity-table-info{
margin-bottom: 8px; // white-space: nowrap;
} // overflow: hidden;
} // text-overflow: ellipsis;
//}
//
//.button-widget-action{
// margin-left: auto;
// overflow: hidden;
// text-overflow: ellipsis;
//}
} }
} }
//@media #{$mat-xs} {
// .mat-toolbar {
// height: auto;
// min-height: 100px;
//
// .tb-entity-table-title{
// padding-bottom: 5px;
// width: 100%;
// }
// }
//}
@media #{$mat-xs} { @media #{$mat-xs} {
.tb-notification-center { .tb-notification-center {
.tb-notification-center-content { .tb-notification-center-content {

65
ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { AfterViewInit, Component, QueryList, ViewChild, ViewChildren } from '@angular/core'; import { Component, QueryList, ViewChild, ViewChildren } from '@angular/core';
import { PageComponent } from '@shared/components/page.component'; import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state'; import { AppState } from '@core/core.state';
@ -23,30 +23,16 @@ import {
NotificationTableComponent NotificationTableComponent
} from '@home/pages/notification-center/notification-table/notification-table.component'; } from '@home/pages/notification-center/notification-table/notification-table.component';
import { EntityType } from '@shared/models/entity-type.models'; import { EntityType } from '@shared/models/entity-type.models';
import { MatDrawer } from '@angular/material/sidenav';
import { NotificationService } from '@core/http/notification.service';
import {
NotificationDeliveryMethod,
NotificationDeliveryMethodTranslateMap,
NotificationTemplateTypeTranslateMap
} from '@shared/models/notification.models';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { deepTrim } from '@core/utils';
@Component({ @Component({
selector: 'tb-notification-center', selector: 'tb-notification-center',
templateUrl: './notification-center.component.html', templateUrl: './notification-center.component.html',
styleUrls: ['notification-center.component.scss'] styleUrls: ['notification-center.component.scss']
}) })
export class NotificationCenterComponent extends PageComponent implements AfterViewInit { export class NotificationCenterComponent extends PageComponent {
entityType = EntityType; entityType = EntityType;
notificationSettingsForm: FormGroup;
notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[];
notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap;
@ViewChild('notificationSettings', {static: true}) notificationSettings!: MatDrawer;
@ViewChild('matTabGroup', {static: true}) matTabs: MatTabGroup; @ViewChild('matTabGroup', {static: true}) matTabs: MatTabGroup;
@ViewChild('requestTab', {static: true}) requestTab: MatTab; @ViewChild('requestTab', {static: true}) requestTab: MatTab;
@ViewChild('notificationRequest', {static: true}) notificationRequestTable: NotificationTableComponent; @ViewChild('notificationRequest', {static: true}) notificationRequestTable: NotificationTableComponent;
@ -54,38 +40,8 @@ export class NotificationCenterComponent extends PageComponent implements AfterV
constructor( constructor(
protected store: Store<AppState>, protected store: Store<AppState>) {
private notificationService: NotificationService,
private fb: FormBuilder) {
super(store); super(store);
this.notificationSettingsForm = this.fb.group({
deliveryMethodsConfigs: this.fb.group({})
});
this.notificationDeliveryMethods.forEach(method => {
(this.notificationSettingsForm.get('deliveryMethodsConfigs') as FormGroup)
.addControl(method, this.fb.group({method, enabled: method !== NotificationDeliveryMethod.SLACK}), {emitEvent: false});
});
(this.notificationSettingsForm.get('deliveryMethodsConfigs.SLACK') as FormGroup)
.addControl('botToken', this.fb.control({value: '', disabled: true}, Validators.required), {emitEvent: false});
this.notificationSettingsForm.get('deliveryMethodsConfigs.SLACK.enabled').valueChanges.subscribe(value => {
if (value) {
this.notificationSettingsForm.get('deliveryMethodsConfigs.SLACK.botToken').enable({emitEvent: true});
} else {
this.notificationSettingsForm.get('deliveryMethodsConfigs.SLACK.botToken').disable({emitEvent: true});
}
});
}
ngAfterViewInit() {
this.notificationSettings.openedStart.subscribe(() => {
this.notificationService.getNotificationSettings().subscribe(
value => {
this.notificationSettingsForm.patchValue(value, {emitEvent: false});
this.notificationSettingsForm.get('deliveryMethodsConfigs.SLACK.enabled').updateValueAndValidity({onlySelf: true});
}
);
});
} }
updateData() { updateData() {
@ -103,19 +59,4 @@ export class NotificationCenterComponent extends PageComponent implements AfterV
sendNotification($event: Event) { sendNotification($event: Event) {
this.notificationRequestTable.entityTableConfig.onEntityAction({event: $event, action: this.requestTab.isActive ? 'add' : 'add-without-update', entity: null}); this.notificationRequestTable.entityTableConfig.onEntityAction({event: $event, action: this.requestTab.isActive ? 'add' : 'add-without-update', entity: null});
} }
toggleNotificationSettings() {
this.notificationSettings.toggle().then(() => {});
}
saveNotificationSettigs($event: Event) {
if ($event) {
$event.stopPropagation();
}
const formValue = deepTrim(this.notificationSettingsForm.getRawValue());
this.notificationService.saveNotificationSettings(formValue).subscribe(value => {
this.notificationSettingsForm.patchValue(value, {emitEvent: false});
this.notificationSettingsForm.markAsPristine();
});
}
} }

31
ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts
View File

@ -32,14 +32,12 @@ import { NotificationService } from '@core/http/notification.service';
import { InboxTableHeaderComponent } from '@home/pages/notification-center/inbox-table/inbox-table-header.component'; import { InboxTableHeaderComponent } from '@home/pages/notification-center/inbox-table/inbox-table-header.component';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators'; import { take } from 'rxjs/operators';
import { EventEmitter } from '@angular/core';
export class InboxTableConfig extends EntityTableConfig<Notification> { export class InboxTableConfig extends EntityTableConfig<Notification> {
constructor(private notificationService: NotificationService, constructor(private notificationService: NotificationService,
private translate: TranslateService, private translate: TranslateService,
private datePipe: DatePipe, private datePipe: DatePipe) {
private toggleSettings: EventEmitter<void>) {
super(); super();
this.entitiesDeleteEnabled = false; this.entitiesDeleteEnabled = false;
this.entityTranslations = { this.entityTranslations = {
@ -60,20 +58,12 @@ export class InboxTableConfig extends EntityTableConfig<Notification> {
this.headerComponent = InboxTableHeaderComponent; this.headerComponent = InboxTableHeaderComponent;
this.headerActionDescriptors = [ this.headerActionDescriptors = [{
{ name: this.translate.instant('notification.mark-all-as-read'),
name: 'Notification setting', icon: 'done_all',
icon: 'settings', isEnabled: () => true,
isEnabled: () => true, onAction: $event => this.markAllRead($event)
onAction: $event => this.togleNotificationSettings($event) }];
},
{
name: this.translate.instant('notification.mark-all-as-read'),
icon: 'done_all',
isEnabled: () => true,
onAction: $event => this.markAllRead($event)
}
];
this.columns.push( this.columns.push(
new DateEntityTableColumn<Notification>('createdTime', 'notification.created-time', this.datePipe, '150px'), new DateEntityTableColumn<Notification>('createdTime', 'notification.created-time', this.datePipe, '150px'),
@ -107,13 +97,6 @@ export class InboxTableConfig extends EntityTableConfig<Notification> {
}); });
} }
private togleNotificationSettings($event: Event) {
if ($event) {
$event.stopPropagation();
}
this.toggleSettings.emit();
}
private markAsRead($event, entity){ private markAsRead($event, entity){
if ($event) { if ($event) {
$event.stopPropagation(); $event.stopPropagation();

8
ui-ngx/src/app/modules/home/pages/notification-center/notification-table/notification-table.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { EntitiesTableComponent } from '@home/components/entity/entities-table.component'; import { EntitiesTableComponent } from '@home/components/entity/entities-table.component';
import { NotificationService } from '@core/http/notification.service'; import { NotificationService } from '@core/http/notification.service';
import { TargetsTableConfig } from '@home/pages/notification-center/notification-table/targets-table-config'; import { TargetsTableConfig } from '@home/pages/notification-center/notification-table/targets-table-config';
@ -36,9 +36,6 @@ export class NotificationTableComponent implements OnInit {
@Input() @Input()
notificationType = EntityType.NOTIFICATION; notificationType = EntityType.NOTIFICATION;
@Output()
toggleSettings: EventEmitter<void> = new EventEmitter<void>();
@ViewChild(EntitiesTableComponent, {static: true}) entitiesTable: EntitiesTableComponent; @ViewChild(EntitiesTableComponent, {static: true}) entitiesTable: EntitiesTableComponent;
entityTableConfig: EntityTableConfig<any>; entityTableConfig: EntityTableConfig<any>;
@ -73,8 +70,7 @@ export class NotificationTableComponent implements OnInit {
return new InboxTableConfig( return new InboxTableConfig(
this.notificationService, this.notificationService,
this.translate, this.translate,
this.datePipe, this.datePipe
this.toggleSettings
); );
case EntityType.NOTIFICATION_TEMPLATE: case EntityType.NOTIFICATION_TEMPLATE:
return new TemplateTableConfig( return new TemplateTableConfig(

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

@ -236,14 +236,13 @@ export class NotificationPluginCmdsWrapper {
unsubCmd: UnsubscribeCmd; unsubCmd: UnsubscribeCmd;
markAsReadCmd: MarkAsReadCmd; markAsReadCmd: MarkAsReadCmd;
markAllAsReadCmd: MarkAllAsReadCmd; markAllAsReadCmd: MarkAllAsReadCmd;
#hasSend = false;
public hasCommands(): boolean { public hasCommands(): boolean {
return !this.#hasSend && (isDefinedAndNotNull(this.unreadCountSubCmd) || return isDefinedAndNotNull(this.unreadCountSubCmd) ||
isDefinedAndNotNull(this.unreadSubCmd) || isDefinedAndNotNull(this.unreadSubCmd) ||
isDefinedAndNotNull(this.unsubCmd) || isDefinedAndNotNull(this.unsubCmd) ||
isDefinedAndNotNull(this.markAsReadCmd) || isDefinedAndNotNull(this.markAsReadCmd) ||
isDefinedAndNotNull(this.markAllAsReadCmd)); isDefinedAndNotNull(this.markAllAsReadCmd);
} }
public clear() { public clear() {
@ -252,7 +251,6 @@ export class NotificationPluginCmdsWrapper {
this.unsubCmd = null; this.unsubCmd = null;
this.markAsReadCmd = null; this.markAsReadCmd = null;
this.markAllAsReadCmd = null; this.markAllAsReadCmd = null;
this.#hasSend = false;
} }
public preparePublishCommands(): NotificationPluginCmdsWrapper { public preparePublishCommands(): NotificationPluginCmdsWrapper {
@ -262,7 +260,6 @@ export class NotificationPluginCmdsWrapper {
preparedWrapper.unsubCmd = this.unsubCmd || undefined; preparedWrapper.unsubCmd = this.unsubCmd || undefined;
preparedWrapper.markAsReadCmd = this.markAsReadCmd || undefined; preparedWrapper.markAsReadCmd = this.markAsReadCmd || undefined;
preparedWrapper.markAllAsReadCmd = this.markAllAsReadCmd || undefined; preparedWrapper.markAllAsReadCmd = this.markAllAsReadCmd || undefined;
this.#hasSend = true;
return preparedWrapper; return preparedWrapper;
} }
} }