diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html index 5373217d56..42c4a68fbc 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html +++ b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.html @@ -50,6 +50,23 @@ requiredText="notification.targets-required" [entityType]="entityType.NOTIFICATION_TARGET"> +
+ + {{ 'notification.scheduler-later' | translate }} + +
+ + + + notification.time + + + + +
+
diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss index fed8fa0592..00aab7c880 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss +++ b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.component.scss @@ -19,6 +19,19 @@ :host-context(.tb-fullscreen-dialog .mat-dialog-container) { width: 640px; + .additional-config-group { + padding: 16px 16px 4px; + margin-bottom: 12px; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 6px; + width: 100%; + height: 100%; + + .toggle { + margin-bottom: 12px; + } + } + .preview-group { padding: 16px; margin-bottom: 10px; diff --git a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts index fb83aea235..c79cb8dc2a 100644 --- a/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts +++ b/ui-ngx/src/app/modules/home/pages/notification-center/request-table/request-notification-dialog.componet.ts @@ -30,7 +30,8 @@ import { BreakpointObserver } from '@angular/cdk/layout'; import { MatStepper } from '@angular/material/stepper'; import { StepperOrientation, StepperSelectionEvent } from '@angular/cdk/stepper'; import { MediaBreakpoints } from '@shared/models/constants'; -import { map } from 'rxjs/operators'; +import { map, takeUntil } from 'rxjs/operators'; +import { getCurrentTime } from '@shared/models/time/time.models'; export interface RequestNotificationDialogData { request?: NotificationRequest; @@ -73,7 +74,24 @@ export class RequestNotificationDialogComponent extends this.notificationRequestForm = this.fb.group({ templateId: [null, Validators.required], - targets: [null, Validators.required] + targets: [null, Validators.required], + additionalConfig: this.fb.group({ + enabled: [false], + timezone: [{value: '', disabled: true}, Validators.required], + time: [{value: 0, disabled: true}, Validators.required] + }) + }); + + this.notificationRequestForm.get('additionalConfig.enabled').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe(value => { + if (value) { + this.notificationRequestForm.get('additionalConfig.timezone').enable({emitEvent: false}); + this.notificationRequestForm.get('additionalConfig.time').enable({emitEvent: false}); + } else { + this.notificationRequestForm.get('additionalConfig.timezone').disable({emitEvent: false}); + this.notificationRequestForm.get('additionalConfig.time').disable({emitEvent: false}); + } }); if (data.isAdd) { @@ -149,8 +167,14 @@ export class RequestNotificationDialogComponent extends } private get notificationFormValue(): NotificationRequest { - const formValue: NotificationRequest = deepTrim(this.notificationRequestForm.value); - formValue.additionalConfig = {sendingDelayInSec: 0}; + const formValue = deepTrim(this.notificationRequestForm.value); + let delay = 0; + if (formValue.additionalConfig.enabled) { + delay = (this.notificationRequestForm.value.additionalConfig.time.valueOf() - this.minDate().valueOf()) / 1000; + } + formValue.additionalConfig = { + sendingDelayInSec: delay > 0 ? delay : 0 + }; return formValue; } @@ -165,4 +189,8 @@ export class RequestNotificationDialogComponent extends } }); } + + minDate(): Date { + return new Date(getCurrentTime(this.notificationRequestForm.get('additionalConfig.timezone').value).format('lll')); + } } 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 e441e5a6a5..deb75f885a 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2742,6 +2742,7 @@ "review": "Review", "rules": "Rules", "platform-users": "Platform users", + "scheduler-later": "Schedule for later", "search-notification": "Search notification", "search-targets": "Search recipients", "search-templates": "Search templates", @@ -2789,6 +2790,7 @@ }, "templates": "Templates", "text": "Text", + "time": "Time", "type": "Type", "unread": "Unread", "view-all": "View all",