UI: Notification request setting scheduler for later

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">
         </tb-entity-list>
+        <section formGroupName="additionalConfig" class="additional-config-group">
+          <mat-slide-toggle formControlName="enabled" class="toggle">
+            {{ 'notification.scheduler-later' | translate }}
+          </mat-slide-toggle>
+          <div *ngIf="notificationRequestForm.get('additionalConfig.enabled').value" fxLayout="column">
+            <tb-timezone-select userTimezoneByDefault
+                                required
+                                formControlName="timezone">
+            </tb-timezone-select>
+            <mat-form-field>
+              <mat-label translate>notification.time</mat-label>
+              <mat-datetimepicker-toggle [for]="startTimePicker" matPrefix></mat-datetimepicker-toggle>
+              <mat-datetimepicker #startTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
+              <input required matInput fxFlex formControlName="time" [min]="minDate()" [matDatetimepicker]="startTimePicker">
+            </mat-form-field>
+          </div>
+        </section>
       </form>
     </mat-step>
     <mat-step>

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;

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'));
+  }
 }

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",