diff --git a/ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.html index 21093f74d8..5ca844ef59 100644 --- a/ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.html +++ b/ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.html @@ -31,7 +31,7 @@ diff --git a/ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.ts b/ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.ts index 087dcb2674..24eed58032 100644 --- a/ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.ts +++ b/ui-ngx/src/app/modules/home/components/notification/slack-conversation-autocomplete.component.ts @@ -17,21 +17,11 @@ import { Component, ElementRef, forwardRef, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; import { Observable, of } from 'rxjs'; -import { - debounceTime, - distinctUntilChanged, - map, - publishReplay, - refCount, - share, - switchMap, - tap -} from 'rxjs/operators'; +import { debounceTime, map, publishReplay, refCount, share, switchMap, tap } from 'rxjs/operators'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { TranslateService } from '@ngx-translate/core'; import { coerceBooleanProperty } from '@angular/cdk/coercion'; -import { EntityId } from '@shared/models/id/entity-id'; import { EntityService } from '@core/http/entity.service'; import { TruncatePipe } from '@shared/pipe/truncate.pipe'; import { @@ -84,7 +74,7 @@ export class SlackConversationAutocompleteComponent implements ControlValueAcces slackSearchText = ''; - private modelValue: string | null; + private modelValue: SlackConversation | null; private dirty = false; private latestSearchConversetionResult: Array = null; private slackConversetionFetchObservable$: Observable> = null; @@ -122,7 +112,7 @@ export class SlackConversationAutocompleteComponent implements ControlValueAcces if (typeof value === 'string' || !value) { modelValue = null; } else { - modelValue = value.id; + modelValue = value; } this.updateView(modelValue); if (value === null) { @@ -160,22 +150,11 @@ export class SlackConversationAutocompleteComponent implements ControlValueAcces return (text && text.length > 0); } - writeValue(value: EntityId | null): void { + writeValue(value: SlackConversation | null): void { this.slackSearchText = ''; if (value != null) { - // this.notificationService.getNotificationTemplateById(value.id, {ignoreLoading: true, ignoreErrors: true}).subscribe( - // (entity) => { - // this.modelValue = entity.id; - // this.conversationSlackFormGroup.get('conversation').patchValue(entity, {emitEvent: false}); - // }, - // () => { - // this.modelValue = null; - // this.conversationSlackFormGroup.get('conversation').patchValue('', {emitEvent: false}); - // if (value !== null) { - // this.propagateChange(this.modelValue); - // } - // } - // ); + this.modelValue = value; + this.conversationSlackFormGroup.get('conversation').patchValue(value, {emitEvent: false}); } else { this.modelValue = null; this.conversationSlackFormGroup.get('conversation').patchValue('', {emitEvent: false}); @@ -190,14 +169,14 @@ export class SlackConversationAutocompleteComponent implements ControlValueAcces } } - updateView(value: string | null) { + updateView(value: SlackConversation | null) { if (!isEqual(this.modelValue, value)) { this.modelValue = value; this.propagateChange(this.modelValue); } } - displayTemplateFn(slackConversation?: SlackConversation): string | undefined { + displaySlackConversationFn(slackConversation?: SlackConversation): string | undefined { return slackConversation ? slackConversation.name : undefined; } diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/targets-table-config.ts b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/targets-table-config.ts index 16cb1fa1e6..538069804d 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/targets-table-config.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/notification-table/targets-table-config.ts @@ -62,9 +62,10 @@ export class TargetsTableConfig extends EntityTableConfig { this.columns.push( new EntityTableColumn('name', 'notification.notification-target', '20%'), - new EntityTableColumn('type', 'notification.type', '40%', - (target) => this.translate.instant(NotificationTargetTypeTranslationMap.get(target.type))), - new EntityTableColumn('configuration.description', 'notification.description', '40%', + new EntityTableColumn('configuration.type', 'notification.type', '40%', + (target) => this.translate.instant(NotificationTargetTypeTranslationMap.get(target.configuration.type)), + () => ({}), false), + new EntityTableColumn('configuration.description', 'notification.description', '40%', (target) => target.configuration.description || '', () => ({}), false) ); diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.component.html index 9bbf2a9829..f7ea9d57f6 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.component.html @@ -36,18 +36,19 @@ {{ 'notification.target-name-required' | translate }} - - -
-
{{ notificationTargetTypeTranslationMap.get(notificationTargetType) | translate }}
-
-
-
+ + + +
+
{{ notificationTargetTypeTranslationMap.get(notificationTargetType) | translate }}
+
+
+
+ *ngIf="targetNotificationForm.get('configuration.type').value === notificationTargetType.PLATFORM_USERS"> - notification.target-type.type + notification.target-type.user-filters {{ notificationTargetConfigTypeTranslateMap.get(type) | translate }} @@ -76,6 +77,20 @@
+
+ + + +
+
{{ slackChanelTypesTranslateMap.get(slackChanelType) | translate }}
+
+
+
+ + +
notification.description diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss b/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss index 18a5bf0ba9..b56d9161b9 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss +++ b/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.scss @@ -15,11 +15,18 @@ */ @import "../../../../../../theme"; +:host { + .tb-title { + display: block; + padding-bottom: 6px; + } +} + :host ::ng-deep { .mat-radio-group { display: flex; flex-direction: row; - margin-bottom: 8px; + margin-bottom: 14px; .mat-radio-button { flex: 1 1 100%; diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.ts b/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.ts index 6d69db61aa..309af5d4a9 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/targets-table/target-notification-dialog.componet.ts @@ -19,7 +19,9 @@ import { NotificationTargetConfigType, NotificationTargetConfigTypeTranslateMap, NotificationTargetType, - NotificationTargetTypeTranslationMap + NotificationTargetTypeTranslationMap, + SlackChanelType, + SlackChanelTypesTranslateMap } from '@shared/models/notification.models'; import { Component, Inject, OnDestroy } from '@angular/core'; import { DialogComponent } from '@shared/components/dialog.component'; @@ -54,6 +56,9 @@ export class TargetNotificationDialogComponent extends notificationTargetConfigType = NotificationTargetConfigType; notificationTargetConfigTypes: NotificationTargetConfigType[] = Object.values(NotificationTargetConfigType); notificationTargetConfigTypeTranslateMap = NotificationTargetConfigTypeTranslateMap; + slackChanelTypes = Object.keys(SlackChanelType) as SlackChanelType[]; + slackChanelTypesTranslateMap = SlackChanelTypesTranslateMap; + entityType = EntityType; isAdd = true; @@ -73,18 +78,38 @@ export class TargetNotificationDialogComponent extends this.targetNotificationForm = this.fb.group({ name: [null, Validators.required], - type: [NotificationTargetType.PLATFORM_USERS], configuration: this.fb.group({ - description: [null], + type: [NotificationTargetType.PLATFORM_USERS], usersFilter: this.fb.group({ type: [NotificationTargetConfigType.ALL_USERS], usersIds: [{value: null, disabled: true}, Validators.required], customerId: [{value: null, disabled: true}, Validators.required], getCustomerIdFromOriginatorEntity: [{value: false, disabled: true}] - }) + }), + conversationType: [{value: SlackChanelType.DIRECT, disabled: true}], + conversation: [{value: '', disabled: true}, Validators.required], + description: [null] }) }); + this.targetNotificationForm.get('configuration.type').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe((type: NotificationTargetType) => { + this.targetNotificationForm.get('configuration').disable({emitEvent: false}); + switch (type) { + case NotificationTargetType.PLATFORM_USERS: + this.targetNotificationForm.get('configuration.usersFilter').enable({emitEvent: false}); + this.targetNotificationForm.get('configuration.usersFilter.type').updateValueAndValidity({onlySelf: true}); + break; + case NotificationTargetType.SLACK: + this.targetNotificationForm.get('configuration.conversationType').enable({emitEvent: false}); + this.targetNotificationForm.get('configuration.conversation').enable({emitEvent: false}); + break; + } + this.targetNotificationForm.get('configuration.type').enable({emitEvent: false}); + this.targetNotificationForm.get('configuration.description').enable({emitEvent: false}); + }); + this.targetNotificationForm.get('configuration.usersFilter.type').valueChanges.pipe( takeUntil(this.destroy$) ).subscribe((type: NotificationTargetConfigType) => { @@ -111,8 +136,7 @@ export class TargetNotificationDialogComponent extends if (isDefined(data.target)) { this.targetNotificationForm.patchValue(data.target, {emitEvent: false}); - this.targetNotificationForm.get('type').updateValueAndValidity({onlySelf: true}); - this.targetNotificationForm.get('configuration.usersFilter.type').updateValueAndValidity({onlySelf: true}); + this.targetNotificationForm.get('configuration.type').updateValueAndValidity({onlySelf: true}); } } @@ -131,7 +155,7 @@ export class TargetNotificationDialogComponent extends if (isDefined(this.data.target)) { formValue = Object.assign({}, this.data.target, formValue); } - formValue.configuration.type = formValue.type; + formValue.type = formValue.configuration.type; this.notificationService.saveNotificationTarget(formValue).subscribe( (target) => this.dialogRef.close(target) ); diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html index 0aa15e225c..aec3e29958 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.html @@ -93,7 +93,11 @@ notification.message - +
@@ -155,7 +159,11 @@
notification.message - +
@@ -165,20 +173,12 @@
notification.message - + - - - -
-
{{ slackChanelTypesTranslateMap.get(slackChanelType) | translate }}
-
-
-
- -
diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.ts b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.ts index 123757d751..55b29ff9f7 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/template-table/template-notification-dialog.component.ts @@ -19,9 +19,7 @@ import { NotificationDeliveryMethodTranslateMap, NotificationTemplate, NotificationTemplateTypeTranslateMap, - NotificationType, - SlackChanelType, - SlackChanelTypesTranslateMap + NotificationType } from '@shared/models/notification.models'; import { Component, Inject, OnDestroy, ViewChild } from '@angular/core'; import { DialogComponent } from '@shared/components/dialog.component'; @@ -66,11 +64,9 @@ export class TemplateNotificationDialogComponent dialogTitle = 'notification.edit-notification-template'; notificationTypes = Object.keys(NotificationType) as NotificationType[]; - slackChanelTypes = Object.keys(SlackChanelType) as SlackChanelType[]; notificationDeliveryMethods = Object.keys(NotificationDeliveryMethod) as NotificationDeliveryMethod[]; notificationTemplateTypeTranslateMap = NotificationTemplateTypeTranslateMap; notificationDeliveryMethodTranslateMap = NotificationDeliveryMethodTranslateMap; - slackChanelTypesTranslateMap = SlackChanelTypesTranslateMap; selectedIndex = 0; @@ -168,9 +164,7 @@ export class TemplateNotificationDialogComponent }); this.slackTemplateForm = this.fb.group({ - body: [''], - conversationId: ['', Validators.required], - conversationType: [SlackChanelType.DIRECT] + body: [''] }); this.deliveryMethodFormsMap = new Map([ diff --git a/ui-ngx/src/app/shared/models/notification.models.ts b/ui-ngx/src/app/shared/models/notification.models.ts index 4fe90210a5..d3f98741dc 100644 --- a/ui-ngx/src/app/shared/models/notification.models.ts +++ b/ui-ngx/src/app/shared/models/notification.models.ts @@ -147,9 +147,8 @@ interface CustomerUsersNotificationTargetConfig { } export interface SlackNotificationTargetConfig { - conversationType: SlackConversation; - conversationId: string; - conversationName: string; + conversationType: SlackChanelType; + conversation: SlackConversation; } export enum NotificationTargetType { PLATFORM_USERS = 'PLATFORM_USERS', @@ -242,9 +241,9 @@ export enum NotificationRequestStatus { } export const NotificationRequestStatusTranslateMap = new Map([ - [NotificationRequestStatus.PROCESSING, 'notification.requet-status.processing'], - [NotificationRequestStatus.SCHEDULED, 'notification.requet-status.scheduled'], - [NotificationRequestStatus.SENT, 'notification.requet-status.sent'] + [NotificationRequestStatus.PROCESSING, 'notification.request-status.processing'], + [NotificationRequestStatus.SCHEDULED, 'notification.request-status.scheduled'], + [NotificationRequestStatus.SENT, 'notification.request-status.sent'] ]); export enum SlackChanelType { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 5e61277fde..b3651547e5 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2725,8 +2725,9 @@ "notification-center": "Notification center", "notification-target": "Notification recipient", "notify-again": "Notify again", + "recipient-type": "Recipient type", "recipients-count": "{ count, plural, 1 {1 Recipient} other {# Recipients} }", - "requet-status": { + "request-status": { "processing": "Processing", "scheduled": "Scheduled", "sent": "Sent" @@ -2759,7 +2760,7 @@ "target-type": { "all-users": "All users", "customer-users": "Customer users", - "type": "Type", + "user-filters": "User filter", "user-list": "User list" }, "targets": "Recipients",