Merge pull request #13783 from ArtemDzhereleiko/AD/bug-fix/notification-template-autocomplete

Enhanced Notification Template Autocomplete: Fixed editing issues and added Create new option

ui-ngx/src/app/modules/home/pages/notification/template/template-notification-dialog.component.ts

@@ -40,6 +40,7 @@ export interface TemplateNotificationDialogData {
   predefinedType?: NotificationType;
   isAdd?: boolean;
   isCopy?: boolean;
+  name?: string;
 }
 
 @Component({
@@ -85,6 +86,9 @@ export class TemplateNotificationDialogComponent
       this.hideSelectType = true;
       this.templateNotificationForm.get('notificationType').setValue(this.data.predefinedType, {emitEvent: false});
     }
+    if (isDefinedAndNotNull(this.data?.name)) {
+      this.templateNotificationForm.get('name').setValue(this.data.name, {emitEvent: false});
+    }
 
     if (data.isAdd || data.isCopy) {
       this.dialogTitle = 'notification.add-notification-template';

ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html

@@ -29,7 +29,7 @@
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
-  <button *ngIf="selectTemplateFormGroup.get('templateName').value && !disabled && allowEdit"
+  <button *ngIf="selectTemplateFormGroup.get('templateName').value?.id && !disabled && allowEdit"
           type="button"
           matSuffix mat-icon-button aria-label="Edit"
           matTooltip="{{ 'notification.edit-notification-template' | translate }}"
@@ -62,6 +62,9 @@
         </div>
         <ng-template #searchNotEmpty>
           <span>{{ 'notification.no-template-matching' | translate : {template: truncate.transform(searchText, true, 6, &apos;...&apos;)} }}</span>
+          <span *ngIf="allowCreate">
+            <a translate (click)="createTemplateByName($event, searchText)">notification.create-new-template</a>
+          </span>
         </ng-template>
       </div>
     </mat-option>

ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts

@@ -212,13 +212,17 @@ export class TemplateAutocompleteComponent implements ControlValueAccessor, OnIn
   }
 
   createTemplate($event: Event, button: MatButton) {
-    if ($event) {
+    $event?.stopPropagation();
-      $event.stopPropagation();
-    }
     button._elementRef.nativeElement.blur();
+    this.createTemplateByName($event);
+  }
+  
+  createTemplateByName($event: Event, name?: string) {
+    $event?.stopPropagation();
     this.openNotificationTemplateDialog({
       isAdd: true,
-      predefinedType: this.notificationTypes
+      predefinedType: this.notificationTypes,
+      name
     });
   }
 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -4072,6 +4072,7 @@
         "no-severity-found": "No severity found",
         "no-severity-matching": "'{{severity}}' not found.",
         "no-template-matching": "No resource matching '{{template}}' were found.",
+        "create-new-template": "Create a new one!",
         "not-found-slack-recipient": "Slack recipient not found",
         "notification": "Notification",
         "notification-center": "Notification center",