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() {
while (this.isOpened && this.cmdsWrapper.hasCommands()) {
this.dataStream.next(this.cmdsWrapper.preparePublishCommands());
this.cmdsWrapper.clear();
this.checkToClose();
}
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">
<mat-drawer-container class="tb-absolute-fill tb-notification-draw-container">
<div class="tb-notification-center-content">
<div class="tabs-container">
<mat-tab-group #matTabGroup (selectedIndexChange)="updateData()">
<mat-tab label="{{ 'notification.inbox' | translate }}">
<tb-notification-table
[notificationType]="entityType.NOTIFICATION"
(toggleSettings)="toggleNotificationSettings()">
</tb-notification-table>
</mat-tab>
<mat-tab label="{{ 'notification.sent' | translate }}" #requestTab="matTab">
<tb-notification-table
#notificationRequest
[notificationType]="entityType.NOTIFICATION_REQUEST">
</tb-notification-table>
</mat-tab>
<mat-tab label="{{ 'notification.templates' | translate }}">
<tb-notification-table
[notificationType]="entityType.NOTIFICATION_TEMPLATE">
</tb-notification-table>
</mat-tab>
<mat-tab label="{{ 'notification.targets' | translate }}">
<tb-notification-table
[notificationType]="entityType.NOTIFICATION_TARGET">
</tb-notification-table>
</mat-tab>
<mat-tab label="{{ 'notification.rules' | translate }}">
<ng-template matTabContent>
Content 1 - Loaded
</ng-template>
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
<button mat-flat-button color="primary" (click)="sendNotification($event)">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon>send</mat-icon>{{ 'notification.send-notification' | translate }}
</div>
</button>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
<div class="tb-notification-center-content">
<div class="tabs-container">
<mat-tab-group #matTabGroup (selectedIndexChange)="updateData()">
<mat-tab label="{{ 'notification.inbox' | translate }}">
<tb-notification-table
[notificationType]="entityType.NOTIFICATION">
</tb-notification-table>
</mat-tab>
<mat-tab label="{{ 'notification.sent' | translate }}" #requestTab="matTab">
<tb-notification-table
#notificationRequest
[notificationType]="entityType.NOTIFICATION_REQUEST">
</tb-notification-table>
</mat-tab>
<mat-tab label="{{ 'notification.templates' | translate }}">
<tb-notification-table
[notificationType]="entityType.NOTIFICATION_TEMPLATE">
</tb-notification-table>
</mat-tab>
<mat-tab label="{{ 'notification.targets' | translate }}">
<tb-notification-table
[notificationType]="entityType.NOTIFICATION_TARGET">
</tb-notification-table>
</mat-tab>
<mat-tab label="{{ 'notification.rules' | translate }}">
<ng-template matTabContent>
Content 1 - Loaded
</ng-template>
</mat-tab>
<mat-tab disabled>
<ng-template mat-tab-label>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center">
<button mat-flat-button color="primary" (click)="sendNotification($event)">
<div fxLayout="row" fxLayoutAlign="start center">
<mat-icon>send</mat-icon>{{ 'notification.send-notification' | translate }}
</div>
</button>
</div>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>
<mat-drawer mode="over"
#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%;
display: block;
.tb-notification-center {
padding: 8px;
width: 100%;
height: 100%;
display: block;
.tb-notification-draw-container {
margin: 8px;
}
.tb-notification-center-content {
width: 100%;
height: 100%;
@ -58,34 +55,52 @@
flex-direction: column;
flex: 1 1 100%;
}
}
.notification-settings {
width: 100%;
padding: 24px;
.title {
margin: 0;
line-height: 1.4rem;
}
.fields-group {
padding: 8px 16px 0;
margin: 10px 0;
border: 1px groove rgba(0, 0, 0, .25);
border-radius: 4px;
legend {
color: rgba(0, 0, 0, .7);
}
.delivery-method {
margin-bottom: 8px;
}
}
//.mat-toolbar-tools{
// min-height: auto;
//}
//
//.title-container{
// overflow: hidden;
//}
//
//.tb-entity-table-title {
// padding-right: 20px;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
//}
//
//.table-container {
// overflow: auto;
//}
//
//.tb-entity-table-info{
// 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} {
.tb-notification-center {
.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.
///
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 { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@ -23,30 +23,16 @@ import {
NotificationTableComponent
} from '@home/pages/notification-center/notification-table/notification-table.component';
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({
selector: 'tb-notification-center',
templateUrl: './notification-center.component.html',
styleUrls: ['notification-center.component.scss']
})
export class NotificationCenterComponent extends PageComponent implements AfterViewInit {
export class NotificationCenterComponent extends PageComponent {
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('requestTab', {static: true}) requestTab: MatTab;
@ViewChild('notificationRequest', {static: true}) notificationRequestTable: NotificationTableComponent;
@ -54,38 +40,8 @@ export class NotificationCenterComponent extends PageComponent implements AfterV
constructor(
protected store: Store<AppState>,
private notificationService: NotificationService,
private fb: FormBuilder) {
protected store: Store<AppState>) {
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() {
@ -103,19 +59,4 @@ export class NotificationCenterComponent extends PageComponent implements AfterV
sendNotification($event: Event) {
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 { TranslateService } from '@ngx-translate/core';
import { take } from 'rxjs/operators';
import { EventEmitter } from '@angular/core';
export class InboxTableConfig extends EntityTableConfig<Notification> {
constructor(private notificationService: NotificationService,
private translate: TranslateService,
private datePipe: DatePipe,
private toggleSettings: EventEmitter<void>) {
private datePipe: DatePipe) {
super();
this.entitiesDeleteEnabled = false;
this.entityTranslations = {
@ -60,20 +58,12 @@ export class InboxTableConfig extends EntityTableConfig<Notification> {
this.headerComponent = InboxTableHeaderComponent;
this.headerActionDescriptors = [
{
name: 'Notification setting',
icon: 'settings',
isEnabled: () => true,
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.headerActionDescriptors = [{
name: this.translate.instant('notification.mark-all-as-read'),
icon: 'done_all',
isEnabled: () => true,
onAction: $event => this.markAllRead($event)
}];
this.columns.push(
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){
if ($event) {
$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.
///
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 { NotificationService } from '@core/http/notification.service';
import { TargetsTableConfig } from '@home/pages/notification-center/notification-table/targets-table-config';
@ -36,9 +36,6 @@ export class NotificationTableComponent implements OnInit {
@Input()
notificationType = EntityType.NOTIFICATION;
@Output()
toggleSettings: EventEmitter<void> = new EventEmitter<void>();
@ViewChild(EntitiesTableComponent, {static: true}) entitiesTable: EntitiesTableComponent;
entityTableConfig: EntityTableConfig<any>;
@ -73,8 +70,7 @@ export class NotificationTableComponent implements OnInit {
return new InboxTableConfig(
this.notificationService,
this.translate,
this.datePipe,
this.toggleSettings
this.datePipe
);
case EntityType.NOTIFICATION_TEMPLATE:
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;
markAsReadCmd: MarkAsReadCmd;
markAllAsReadCmd: MarkAllAsReadCmd;
#hasSend = false;
public hasCommands(): boolean {
return !this.#hasSend && (isDefinedAndNotNull(this.unreadCountSubCmd) ||
return isDefinedAndNotNull(this.unreadCountSubCmd) ||
isDefinedAndNotNull(this.unreadSubCmd) ||
isDefinedAndNotNull(this.unsubCmd) ||
isDefinedAndNotNull(this.markAsReadCmd) ||
isDefinedAndNotNull(this.markAllAsReadCmd));
isDefinedAndNotNull(this.markAllAsReadCmd);
}
public clear() {
@ -252,7 +251,6 @@ export class NotificationPluginCmdsWrapper {
this.unsubCmd = null;
this.markAsReadCmd = null;
this.markAllAsReadCmd = null;
this.#hasSend = false;
}
public preparePublishCommands(): NotificationPluginCmdsWrapper {
@ -262,7 +260,6 @@ export class NotificationPluginCmdsWrapper {
preparedWrapper.unsubCmd = this.unsubCmd || undefined;
preparedWrapper.markAsReadCmd = this.markAsReadCmd || undefined;
preparedWrapper.markAllAsReadCmd = this.markAllAsReadCmd || undefined;
this.#hasSend = true;
return preparedWrapper;
}
}