Task(402661): Custom Message node customization

src/app/components/workflow-diagram/workflow-diagram.component.html

@@ -38,8 +38,19 @@
     </ng-template>
 
     <ng-template #nodeTemplate let-data>
-      <div><label style="padding: 5px;">{{ data.data.fieldDetails.label }}</label></div>
+      @if(data.data.chatWorkflowBlockId !== chatWorkflowBlockTypeEnum.SendTextMessage){
+        <div><label style="padding: 5px;">{{ data.data.fieldDetails.label }}</label></div>
+      }
       @switch (data.data.chatWorkflowBlockId){
+        @case(chatWorkflowBlockTypeEnum.SendTextMessage){
+          <ng-container>
+            <label>{{data.data.messageDetails.text}}</label>
+            <div *ngIf="data.data.messageDetails.isPrivate" class="private-label-container">
+              <hr class="separator"/>
+              <div class="private-label"><i>Private</i></div>
+            </div>
+          </ng-container>
+        }
         @case(chatWorkflowBlockTypeEnum.GetPickerInput){
           @switch (data.data.chatWorkflowEditorTypeId){
             @case (chatWorkflowEditorTypeEnum.Boolean){

src/app/components/workflow-diagram/workflow-diagram.component.scss

@@ -44,16 +44,6 @@
   border-radius: 5px;
   font-size: 15px;
 }
-
-.custom-node-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: 5px;
-  box-sizing: border-box;
-}
 
 .custom-input {
   width: 90%;
@@ -153,3 +143,24 @@
 .diagram-serialization .e-open::before {
   content: "\e713";
 }
+
+.private-label-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  .private-label {
+    text-align: center;
+    font-weight: normal;
+    color: #721c24;
+    background-color: #e29ca3;
+    padding: 1px;
+  }
+
+  .separator {
+    width: 100%;
+    border: none;
+    border-top: 1px solid #ddd;
+    margin: 10px 0 0 0;
+  }
+}

src/app/components/workflow-diagram/workflow-diagram.component.ts

@@ -13,11 +13,11 @@ import { LIST_DATA } from '../../data/list-data';
 import { ClickEventArgs, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
 import { FormsModule } from '@angular/forms';
 import workflowData from '../../data/workflow-data.json'; // Adjust the path as needed
-import { DropDownList, DropDownListComponent, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
+import { DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns';
 import { NumericTextBoxModule, TextAreaModule, TextBoxModule, UploaderModule } from '@syncfusion/ej2-angular-inputs';
 import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';
 import { TextFormatEnum, ChatWorkflowEditorTypeEnum, ChatWorkflowBlockTypeEnum } from '../../models/enum';
-import { ButtonModule, SwitchModule } from '@syncfusion/ej2-angular-buttons';
+import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
 import sampleWorkflowData from '../../data/sample-workflow-data.json'; // Adjust the path as needed
 import { AsyncSettingsModel, FileInfo, Uploader } from '@syncfusion/ej2-inputs';
 import { WorkflowSidebarComponent } from '../workflow-sidebar/workflow-sidebar.component';  // Import child component
@@ -30,7 +30,7 @@ Diagram.Inject(HierarchicalTree, LineDistribution, PrintAndExport);
   selector: 'app-workflow-diagram',
   standalone: true,
   providers: [HierarchicalTreeService, DataBindingService],
-  imports: [DiagramModule, DialogModule, DropDownButtonModule, ButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, SwitchModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent],
+  imports: [DiagramModule, DialogModule, DropDownButtonModule, ButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent ],
   templateUrl: './workflow-diagram.component.html',
   styleUrl: './workflow-diagram.component.scss'
 })
@@ -45,7 +45,6 @@ export class WorkflowDiagramComponent implements AfterViewInit {
 
   public chatWorkflowEditorTypeEnum = ChatWorkflowEditorTypeEnum; 
   public chatWorkflowBlockTypeEnum = ChatWorkflowBlockTypeEnum;
-  // public data: RuleData[] = RULE_DATA;
   public data: RuleData2[] = RULE_DATA3;
   public nodes: NodeModel[] = [];
   public connectors: ConnectorModel[] = [];

src/app/components/workflow-sidebar/workflow-sidebar.component.html

@@ -167,6 +167,16 @@
                         }
                     }
                 }
+                @case(chatWorkflowBlockTypeEnum.SendTextMessage){
+                    <div>                        
+                        <label>Text Format: </label>
+                        <ejs-dropdownlist #ddlTextFormat [(value)]='value' [dataSource]="textFormatDDLOptions" [fields]="ddlTextFormatFields" cssClass="e-primary"></ejs-dropdownlist>
+                        <div>
+                            <label>Is Private: </label>
+                            <ejs-switch [(ngModel)]="checkedIsPrivate" name="customMessageIsPrivate" cssClass="custom-iOS" [checked]="false" ></ejs-switch>
+                        </div>
+                    </div> 
+                }
             }
         </form>
     </div>

src/app/components/workflow-sidebar/workflow-sidebar.component.ts

@@ -1,19 +1,19 @@
 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
-import { ClickEventArgs, SidebarComponent, SidebarModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
+import { SidebarComponent, SidebarModule } from '@syncfusion/ej2-angular-navigations';
 import { TextFormatEnum, ChatWorkflowEditorTypeEnum, ChatWorkflowBlockTypeEnum } from '../../models/enum';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleData2 } from '../../models/appModel';
 import { NodeModel } from '@syncfusion/ej2-angular-diagrams';
-import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
+import { DropDownListComponent, DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
 import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';
-import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
+import { ButtonModule, SwitchModule } from '@syncfusion/ej2-angular-buttons';
 
 
 @Component({
   selector: 'app-workflow-sidebar',
   standalone: true,
-  imports: [SidebarModule, FormsModule, CommonModule, DatePickerModule, DateTimePickerModule, ButtonModule],
+  imports: [SidebarModule, FormsModule, CommonModule, DatePickerModule, DateTimePickerModule, ButtonModule, SwitchModule, DropDownListModule ],
   templateUrl: './workflow-sidebar.component.html',
   styleUrl: './workflow-sidebar.component.scss'
 })
@@ -43,7 +43,6 @@ export class WorkflowSidebarComponent {
   public type: string = 'Push';
   public width: string = '280px';
   public checkedIsPrivate: boolean = false;
-  public customMessage: string = '';
   public newNodeWidth: number = 200;
   public newNodeHeight: number = 150;
   public newNode: NodeModel = {};
@@ -56,6 +55,10 @@ export class WorkflowSidebarComponent {
   public newNodeInfo: any;
   private updatePending = false;
 
+  textFormatDDLOptions: Array<{ text: string, value: number }>;
+  ddlTextFormatFields: Object = { text: 'text', value: 'value' };
+  public value = 1;
+
   @Input() nodeEditType!: number;
   @Input() nodeBlockType!: number;
   @Input() sidebarHeader!: string;
@@ -66,8 +69,21 @@ export class WorkflowSidebarComponent {
 
 
   constructor() {
+    this.textFormatDDLOptions = this.enumToArray(TextFormatEnum);
   }
 
+  // Convert enum to array of objects
+  private enumToArray(enumObj: any): Array<{ text: string, value: number }> {
+    return Object.keys(enumObj)
+      .filter(key => isNaN(Number(key)))
+      .map(key => {
+        return {
+          text: key,
+          value: enumObj[key as keyof typeof enumObj]
+        }
+      });
+  }
+
   public onSideBarCreated(args: any) {
     (this.sidebar as SidebarComponent).hide();
     (this.sidebar as SidebarComponent).position = "Right";
@@ -180,13 +196,15 @@ export class WorkflowSidebarComponent {
     this.fieldOptionRegexValue = "";
     this.addOption = false;
     this.editIndex = -1;
+    this.checkedIsPrivate = false;
+    this.ddlTextFormat.value = TextFormatEnum.Text
   }
   // Construct the add or update block details
   addOrUpdateBlock(sourceNodeId: string) {
     switch (this.nodeBlockType) {
       case (this.chatWorkflowBlockTypeEnum.SendTextMessage): {
         let messageInfo: MessageDetails = {
-          text: this.customMessage,
+          text: this.sideBarLabel,
           isPrivate: this.checkedIsPrivate,
           textFormat: this.ddlTextFormat.value as TextFormatEnum
         }

src/app/data/list-data.ts

@@ -39,6 +39,8 @@ export const LIST_DATA: { [key: string]: any }[] = [
         {
             'text': 'Custom Message',
             'id': '2',
+            'blockid': 6,
+            'editerTypeId': null,
             'category': 'Action',
         },
         {

src/app/models/enum.ts

@@ -1,6 +1,6 @@
 export enum TextFormatEnum {
-  Text = 2,
-  Html = 1,
+  Text = 1,
+  Html = 2,
   Markdown = 3
 }