From ebb5c634a3c3bf654dfc9807e0093a9e7cde5c5c Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 27 Jan 2023 15:48:18 +0200 Subject: [PATCH] UI: revert user settings --- .../core/ws/notification-websocket.service.ts | 1 + .../notification-center.component.html | 129 ++++++------------ .../notification-center.component.scss | 71 ++++++---- .../notification-center.component.ts | 65 +-------- .../notification-table/inbox-table-config.ts | 31 +---- .../notification-table.component.ts | 8 +- .../shared/models/notification-ws.models.ts | 7 +- 7 files changed, 100 insertions(+), 212 deletions(-) diff --git a/ui-ngx/src/app/core/ws/notification-websocket.service.ts b/ui-ngx/src/app/core/ws/notification-websocket.service.ts index 5cced2a371..020bdf4615 100644 --- a/ui-ngx/src/app/core/ws/notification-websocket.service.ts +++ b/ui-ngx/src/app/core/ws/notification-websocket.service.ts @@ -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(); diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.html index 529fa91afd..bd7925d7a1 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.html @@ -16,92 +16,47 @@ -->
- -
-
- - - - - - - - - - - - - - - - - - - - Content 1 - Loaded - - - - -
- -
- - - -
+
+
+ + + + + + + + + + + + + + + + + + + + Content 1 - Loaded + + + + +
+ +
+ + +
- -
-
- -
Notification settings
-
-
-
- Current user allow delivery method -
-
-
- - {{ notificationDeliveryMethodTranslateMap.get(deliveryMethods) | translate }} - -
-
- - Slack bot token - - - {{ 'notification.link-required' | translate }} - - -
-
-
-
- -
-
- - +
diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.scss b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.scss index dae717255b..e3726e4c02 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.scss @@ -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 { diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.ts b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.ts index 6eceb003c6..64635cb470 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-center.component.ts @@ -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, - private notificationService: NotificationService, - private fb: FormBuilder) { + protected store: 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() { @@ -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(); - }); - } } diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts index 247206ff68..482100b168 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/inbox-table-config.ts @@ -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 { constructor(private notificationService: NotificationService, private translate: TranslateService, - private datePipe: DatePipe, - private toggleSettings: EventEmitter) { + private datePipe: DatePipe) { super(); this.entitiesDeleteEnabled = false; this.entityTranslations = { @@ -60,20 +58,12 @@ export class InboxTableConfig extends EntityTableConfig { 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('createdTime', 'notification.created-time', this.datePipe, '150px'), @@ -107,13 +97,6 @@ export class InboxTableConfig extends EntityTableConfig { }); } - private togleNotificationSettings($event: Event) { - if ($event) { - $event.stopPropagation(); - } - this.toggleSettings.emit(); - } - private markAsRead($event, entity){ if ($event) { $event.stopPropagation(); diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/notification-table.component.ts b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/notification-table.component.ts index 810b27481e..a07b5dbb46 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/notification-table.component.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/notification-table.component.ts @@ -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 = new EventEmitter(); - @ViewChild(EntitiesTableComponent, {static: true}) entitiesTable: EntitiesTableComponent; entityTableConfig: EntityTableConfig; @@ -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( diff --git a/ui-ngx/src/app/shared/models/notification-ws.models.ts b/ui-ngx/src/app/shared/models/notification-ws.models.ts index 29581eddad..ef077097d6 100644 --- a/ui-ngx/src/app/shared/models/notification-ws.models.ts +++ b/ui-ngx/src/app/shared/models/notification-ws.models.ts @@ -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; } }