UI: Change model action button in Microsoft Teams notification

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.html

@@ -384,28 +384,54 @@
                   </mat-slide-toggle>
                 </mat-panel-title>
               </mat-expansion-panel-header>
-              <ng-template matExpansionPanelContent>
+              <ng-template matExpansionPanelContent class="tb-extension-panel">
                 <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
                   <mat-form-field class="mat-block" fxFlex>
                     <mat-label translate>notification.button-text</mat-label>
-                    <input matInput formControlName="name" required>
-                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.name').hasError('required')">
+                    <input matInput formControlName="text" required>
+                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.text').hasError('required')">
                       {{ 'notification.button-text-required' | translate }}
                     </mat-error>
-                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.name').hasError('maxlength')">
+                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.text').hasError('maxlength')">
                       {{ 'notification.button-text-max-length' | translate :
-                      {length: microsoftTeamsTemplateForm.get('button.name').getError('maxlength').requiredLength}
+                      {length: microsoftTeamsTemplateForm.get('button.text').getError('maxlength').requiredLength}
                       }}
                     </mat-error>
                   </mat-form-field>
-                  <mat-form-field fxFlex>
+                </div>
+                <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
+                  <mat-form-field fxFlex="30" fxFlex.xs="100">
+                    <mat-label translate>notification.action-type</mat-label>
+                    <mat-select formControlName="linkType">
+                      <mat-option *ngFor="let actionButtonLinkType of actionButtonLinkTypes" [value]="actionButtonLinkType">
+                        {{ actionButtonLinkTypeTranslateMap.get(actionButtonLinkType) | translate }}
+                      </mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field fxFlex
+                                  *ngIf="microsoftTeamsTemplateForm.get('button.linkType').value === actionButtonLinkType.LINK; else dashboardSelector">
                     <mat-label translate>notification.link</mat-label>
-                    <input matInput formControlName="uri" required>
-                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.uri').hasError('required')">
+                    <input matInput formControlName="link" required>
+                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.link').hasError('required')">
                       {{ 'notification.link-required' | translate }}
                     </mat-error>
                   </mat-form-field>
+                  <ng-template #dashboardSelector>
+                    <tb-dashboard-autocomplete
+                      fxFlex="35" fxFlex.xs="100"
+                      required
+                      formControlName="dashboardId">
+                    </tb-dashboard-autocomplete>
+                    <tb-dashboard-state-autocomplete fxFlex="35" fxFlex.xs="100"
+                                                     [dashboardId]="microsoftTeamsTemplateForm.get('button.dashboardId').value"
+                                                     formControlName="dashboardState">
+                    </tb-dashboard-state-autocomplete>
+                  </ng-template>
                 </div>
+                <mat-slide-toggle formControlName="setEntityIdInState" class="toggle"
+                                  *ngIf="microsoftTeamsTemplateForm.get('button.linkType').value === actionButtonLinkType.DASHBOARD">
+                  {{ 'notification.set-entity-from-notification' | translate }}
+                </mat-slide-toggle>
               </ng-template>
             </mat-expansion-panel>
           </div>

ui-ngx/src/app/modules/home/pages/notification/sent/sent-notification-dialog.component.scss

@@ -242,8 +242,12 @@
       }
     }
 
-    .tb-form-panel .mat-expansion-panel.tb-settings > .mat-expansion-panel-content > .mat-expansion-panel-body {
-      gap: 0;
+    .tb-form-panel .mat-expansion-panel.tb-settings {
+      padding: 11px 16px;
+
+      & > .mat-expansion-panel-content > .mat-expansion-panel-body {
+        gap: 0;
+      }
     }
   }
 

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

@@ -98,15 +98,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
           icon: [{value: 'notifications', disabled: true}, Validators.required],
           color: [{value: '#757575', disabled: true}]
         }),
-        actionButtonConfig: this.fb.group({
-          enabled: [false],
-          text: [{value: '', disabled: true}, [Validators.required, Validators.maxLength(50)]],
-          linkType: [ActionButtonLinkType.LINK],
-          link: [{value: '', disabled: true}, Validators.required],
-          dashboardId: [{value: null, disabled: true}, Validators.required],
-          dashboardState: [{value: null, disabled: true}],
-          setEntityIdInState: [{value: true, disabled: true}],
-        }),
+        actionButtonConfig: this.createButtonConfigForm()
       })
     });
 
@@ -122,37 +114,6 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
       }
     });
 
-    this.webTemplateForm.get('additionalConfig.actionButtonConfig.enabled').valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      if (value) {
-        this.webTemplateForm.get('additionalConfig.actionButtonConfig').enable({emitEvent: false});
-        this.webTemplateForm.get('additionalConfig.actionButtonConfig.linkType').updateValueAndValidity({onlySelf: true});
-      } else {
-        this.webTemplateForm.get('additionalConfig.actionButtonConfig').disable({emitEvent: false});
-        this.webTemplateForm.get('additionalConfig.actionButtonConfig.enabled').enable({emitEvent: false});
-      }
-    });
-
-    this.webTemplateForm.get('additionalConfig.actionButtonConfig.linkType').valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      const isEnabled = this.webTemplateForm.get('additionalConfig.actionButtonConfig.enabled').value;
-      if (isEnabled) {
-        if (value === ActionButtonLinkType.LINK) {
-          this.webTemplateForm.get('additionalConfig.actionButtonConfig.link').enable({emitEvent: false});
-          this.webTemplateForm.get('additionalConfig.actionButtonConfig.dashboardId').disable({emitEvent: false});
-          this.webTemplateForm.get('additionalConfig.actionButtonConfig.dashboardState').disable({emitEvent: false});
-          this.webTemplateForm.get('additionalConfig.actionButtonConfig.setEntityIdInState').disable({emitEvent: false});
-        } else {
-          this.webTemplateForm.get('additionalConfig.actionButtonConfig.link').disable({emitEvent: false});
-          this.webTemplateForm.get('additionalConfig.actionButtonConfig.dashboardId').enable({emitEvent: false});
-          this.webTemplateForm.get('additionalConfig.actionButtonConfig.dashboardState').enable({emitEvent: false});
-          this.webTemplateForm.get('additionalConfig.actionButtonConfig.setEntityIdInState').enable({emitEvent: false});
-        }
-      }
-    });
-
     this.emailTemplateForm = this.fb.group({
       subject: ['', Validators.required],
       body: ['', Validators.required]
@@ -170,22 +131,7 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
       subject: [''],
       body: ['', Validators.required],
       themeColor: [''],
-      button: this.fb.group({
-        enabled: [false],
-        name: [{value: '', disabled: true}, [Validators.required, Validators.maxLength(50)]],
-        uri: [{value: '', disabled: true}, Validators.required],
-      }),
-    });
-
-    this.microsoftTeamsTemplateForm.get('button.enabled').valueChanges.pipe(
-      takeUntil(this.destroy$)
-    ).subscribe((value) => {
-      if (value) {
-        this.microsoftTeamsTemplateForm.get('button').enable({emitEvent: false});
-      } else {
-        this.microsoftTeamsTemplateForm.get('button').disable({emitEvent: false});
-        this.microsoftTeamsTemplateForm.get('button.enabled').enable({emitEvent: false});
-      }
+      button: this.createButtonConfigForm()
     });
 
     this.deliveryMethodFormsMap = new Map<NotificationDeliveryMethod, FormGroup>([
@@ -224,4 +170,48 @@ export abstract class TemplateConfiguration<T, R = any> extends DialogComponent<
     });
     return deepTrim(template);
   }
+
+  private createButtonConfigForm(): FormGroup {
+    const form = this.fb.group({
+      enabled: [false],
+      text: [{value: '', disabled: true}, [Validators.required, Validators.maxLength(50)]],
+      linkType: [ActionButtonLinkType.LINK],
+      link: [{value: '', disabled: true}, Validators.required],
+      dashboardId: [{value: null, disabled: true}, Validators.required],
+      dashboardState: [{value: null, disabled: true}],
+      setEntityIdInState: [{value: true, disabled: true}],
+    });
+
+    form.get('enabled').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((value) => {
+      if (value) {
+        form.enable({emitEvent: false});
+        form.get('linkType').updateValueAndValidity({onlySelf: true});
+      } else {
+        form.disable({emitEvent: false});
+        form.get('enabled').enable({emitEvent: false});
+      }
+    });
+
+    form.get('linkType').valueChanges.pipe(
+      takeUntil(this.destroy$)
+    ).subscribe((value) => {
+      const isEnabled = form.get('enabled').value;
+      if (isEnabled) {
+        if (value === ActionButtonLinkType.LINK) {
+          form.get('link').enable({emitEvent: false});
+          form.get('dashboardId').disable({emitEvent: false});
+          form.get('dashboardState').disable({emitEvent: false});
+          form.get('setEntityIdInState').disable({emitEvent: false});
+        } else {
+          form.get('link').disable({emitEvent: false});
+          form.get('dashboardId').enable({emitEvent: false});
+          form.get('dashboardState').enable({emitEvent: false});
+          form.get('setEntityIdInState').enable({emitEvent: false});
+        }
+      }
+    });
+    return form;
+  }
 }

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

@@ -310,28 +310,54 @@
                   </mat-slide-toggle>
                 </mat-panel-title>
               </mat-expansion-panel-header>
-              <ng-template matExpansionPanelContent>
+              <ng-template matExpansionPanelContent class="tb-extension-panel">
                 <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
                   <mat-form-field class="mat-block" fxFlex>
                     <mat-label translate>notification.button-text</mat-label>
-                    <input matInput formControlName="name" required>
-                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.name').hasError('required')">
+                    <input matInput formControlName="text" required>
+                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.text').hasError('required')">
                       {{ 'notification.button-text-required' | translate }}
                     </mat-error>
-                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.name').hasError('maxlength')">
+                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.text').hasError('maxlength')">
                       {{ 'notification.button-text-max-length' | translate :
-                      {length: microsoftTeamsTemplateForm.get('button.name').getError('maxlength').requiredLength}
+                      {length: microsoftTeamsTemplateForm.get('button.text').getError('maxlength').requiredLength}
                       }}
                     </mat-error>
                   </mat-form-field>
-                  <mat-form-field fxFlex>
+                </div>
+                <div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
+                  <mat-form-field fxFlex="30" fxFlex.xs="100">
+                    <mat-label translate>notification.action-type</mat-label>
+                    <mat-select formControlName="linkType">
+                      <mat-option *ngFor="let actionButtonLinkType of actionButtonLinkTypes" [value]="actionButtonLinkType">
+                        {{ actionButtonLinkTypeTranslateMap.get(actionButtonLinkType) | translate }}
+                      </mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                  <mat-form-field fxFlex
+                                  *ngIf="microsoftTeamsTemplateForm.get('button.linkType').value === actionButtonLinkType.LINK; else dashboardSelector">
                     <mat-label translate>notification.link</mat-label>
-                    <input matInput formControlName="uri" required>
-                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.uri').hasError('required')">
+                    <input matInput formControlName="link" required>
+                    <mat-error *ngIf="microsoftTeamsTemplateForm.get('button.link').hasError('required')">
                       {{ 'notification.link-required' | translate }}
                     </mat-error>
                   </mat-form-field>
+                  <ng-template #dashboardSelector>
+                    <tb-dashboard-autocomplete
+                      fxFlex="35" fxFlex.xs="100"
+                      required
+                      formControlName="dashboardId">
+                    </tb-dashboard-autocomplete>
+                    <tb-dashboard-state-autocomplete fxFlex="35" fxFlex.xs="100"
+                                                     [dashboardId]="microsoftTeamsTemplateForm.get('button.dashboardId').value"
+                                                     formControlName="dashboardState">
+                    </tb-dashboard-state-autocomplete>
+                  </ng-template>
                 </div>
+                <mat-slide-toggle formControlName="setEntityIdInState" class="toggle"
+                                  *ngIf="microsoftTeamsTemplateForm.get('button.linkType').value === actionButtonLinkType.DASHBOARD">
+                  {{ 'notification.set-entity-from-notification' | translate }}
+                </mat-slide-toggle>
               </ng-template>
             </mat-expansion-panel>
           </div>

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

@@ -126,8 +126,12 @@
       }
     }
 
-    .tb-form-panel .mat-expansion-panel.tb-settings > .mat-expansion-panel-content > .mat-expansion-panel-body {
-      gap: 0;
+    .tb-form-panel .mat-expansion-panel.tb-settings {
+      padding: 11px 16px;
+
+      & > .mat-expansion-panel-content > .mat-expansion-panel-body {
+        gap: 0;
+      }
     }
   }
 }

ui-ngx/src/app/shared/models/notification.models.ts

@@ -328,15 +328,17 @@ interface WebDeliveryMethodAdditionalConfig {
     icon: string;
     color: string;
   };
-  actionButtonConfig: {
-    enabled: boolean;
-    text: string;
-    linkType: ActionButtonLinkType;
-    link?: string;
-    dashboardId?: string;
-    dashboardState?: string;
-    setEntityIdInState?: boolean;
-  };
+  actionButtonConfig: NotificationButtonConfig;
+}
+
+interface NotificationButtonConfig {
+  enabled: boolean;
+  text: string;
+  linkType: ActionButtonLinkType;
+  link?: string;
+  dashboardId?: string;
+  dashboardState?: string;
+  setEntityIdInState?: boolean;
 }
 
 interface EmailDeliveryMethodNotificationTemplate {
@@ -350,11 +352,7 @@ interface SlackDeliveryMethodNotificationTemplate {
 
 interface MicrosoftTeamsDeliveryMethodNotificationTemplate {
   subject?: string;
-  button: {
-    enabled: boolean;
-    name?: string;
-    uri?: string;
-  };
+  button: NotificationButtonConfig;
 }
 
 export enum NotificationStatus {