UI: Added allow edit notification template in template selector

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
+          required allowCreate allowEdit
-          allowCreate
           formControlName="templateId"
           [notificationTypes]="ruleNotificationForm.get('triggerType').value">
         </tb-template-autocomplete>

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
+            required allowCreate allowEdit
-            allowCreate
             formControlName="templateId"
             [notificationTypes]="notificationType.GENERAL">
           </tb-template-autocomplete>

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"

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: {
+      data: dialogData
-        predefinedType: this.notificationTypes
-      }
     }).afterClosed()
       .subscribe((res) => {
         if (res) {