From e8c57c9d5a60e48ed107449497b3e820918dbca5 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 19 May 2023 18:01:37 +0300
Subject: [PATCH] UI: Added allow edit notification template in template
 selector

---
 .../rule-notification-dialog.component.html   |  3 +-
 .../sent-notification-dialog.component.html   |  3 +-
 .../template-autocomplete.component.html      |  8 ++++++
 .../template-autocomplete.component.ts        | 28 ++++++++++++++++---
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
index fc48392e8c..4e7a133009 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/rule/rule-notification-dialog.component.html
@@ -59,8 +59,7 @@
           </mat-error>
         </mat-form-field>
         <tb-template-autocomplete
-          required
-          allowCreate
+          required allowCreate allowEdit
           formControlName="templateId"
           [notificationTypes]="ruleNotificationForm.get('triggerType').value">
         </tb-template-autocomplete>
diff --git a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
index 27b8968344..4ff13778e5 100644
--- a/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html
@@ -49,8 +49,7 @@
         </div>
         <div *ngIf="notificationRequestForm.get('useTemplate').value; else scratchTemplate">
           <tb-template-autocomplete
-            required
-            allowCreate
+            required allowCreate allowEdit
             formControlName="templateId"
             [notificationTypes]="notificationType.GENERAL">
           </tb-template-autocomplete>
diff --git a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html
index 8657228de6..3fe45a4da0 100644
--- a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.html
@@ -29,6 +29,14 @@
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
+  <button *ngIf="selectTemplateFormGroup.get('templateName').value && !disabled && allowEdit"
+          type="button"
+          matSuffix mat-icon-button aria-label="Edit"
+          matTooltip="{{ 'notification.edit-notification-template' | translate }}"
+          matTooltipPosition="above"
+          (click)="editTemplate($event)">
+    <mat-icon class="material-icons">edit</mat-icon>
+  </button>
   <button #createTemplateButton
           mat-button color="primary" matSuffix
           *ngIf="allowCreate && !selectTemplateFormGroup.get('templateName').value && !disabled"
diff --git a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts
index 04d971bc24..c9cbe09da8 100644
--- a/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/notification/template-autocomplete.component.ts
@@ -17,7 +17,7 @@
 import { Component, ElementRef, forwardRef, Input, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Observable, of } from 'rxjs';
-import { catchError, debounceTime, distinctUntilChanged, map, share, switchMap, tap } from 'rxjs/operators';
+import { catchError, debounceTime, map, share, switchMap, tap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { TranslateService } from '@ngx-translate/core';
@@ -66,6 +66,10 @@ export class TemplateAutocompleteComponent implements ControlValueAccessor, OnIn
   @coerceBoolean()
   allowCreate = false;
 
+  @Input()
+  @coerceBoolean()
+  allowEdit = false;
+
 
   @Input()
   disabled: boolean;
@@ -196,18 +200,34 @@ export class TemplateAutocompleteComponent implements ControlValueAccessor, OnIn
     }, 0);
   }
 
+  editTemplate($event: Event) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    this.notificationService.getNotificationTemplateById(this.modelValue.id).subscribe(
+      (template) => {
+        this.openNotificationTemplateDialog({template});
+      }
+    );
+  }
+
   createTemplate($event: Event, button: MatButton) {
     if ($event) {
       $event.stopPropagation();
     }
     button._elementRef.nativeElement.blur();
+    this.openNotificationTemplateDialog({
+      isAdd: true,
+      predefinedType: this.notificationTypes
+    });
+  }
+
+  private openNotificationTemplateDialog(dialogData?: TemplateNotificationDialogData) {
     this.dialog.open<TemplateNotificationDialogComponent, TemplateNotificationDialogData,
       NotificationTemplate>(TemplateNotificationDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
-      data: {
-        predefinedType: this.notificationTypes
-      }
+      data: dialogData
     }).afterClosed()
       .subscribe((res) => {
         if (res) {