From e9597b7c6997a74b5f89ae052c9d0a5ce020c9e9 Mon Sep 17 00:00:00 2001
From: GowthamKumarMSF4219 <gowthamkumar.murugavel@syncfusion.com>
Date: Fri, 3 Jan 2025 10:47:00 +0530
Subject: [PATCH 1/2] Feature(402675):Branching on Picker Input

---
 src/app/app.component.ts                      |   2 +-
 .../workflow-diagram.component.html           |  34 +++-
 .../workflow-diagram.component.ts             |  53 ++++--
 .../workflow-sidebar.component.html           |  47 ++++-
 .../workflow-sidebar.component.scss           |   6 +
 .../workflow-sidebar.component.ts             | 163 ++++++++++++++----
 src/app/data/list-data.ts                     |  19 +-
 src/app/models/appModel.ts                    |   9 +-
 src/app/services/workflow.service.ts          |   8 +-
 9 files changed, 274 insertions(+), 67 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6d4b862..7e3a116 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -10,5 +10,5 @@ import { WorkflowDiagramComponent } from './components/workflow-diagram/workflow
 })
 
 export class AppComponent {
-public workflowID: number = 7;
+public workflowID: number = 8;
 }
\ No newline at end of file
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
index 546a5e6..16fc05d 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.html
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -19,7 +19,7 @@
 
   <div>
     <ejs-diagram class="diagram-container" #diagram 
-    id="diagram" [width]="'100%'" [height]="649" [nodes]="nodes"
+    id="diagram" [width]="'100%'" [height]="'900'" [nodes]="nodes"
     [connectors]="connectors" [layout]="layout" [getNodeDefaults]="getNodeDefaults"
     [getConnectorDefaults]="getConnectorDefaults" (created)="onDiagramCreated()" [selectedItems]="selectedItems"
     (onUserHandleMouseDown)="onUserHandleMouseDown($event)" (click)="onNodeClick($event)" [snapSettings]="snapSettings" [dataSourceSettings]='dataSourceSettings'>
@@ -137,13 +137,43 @@
             }
           }
         }
+        @case(chatWorkflowBlockTypeEnum.BranchOnPickerInput){
+          @switch (data.data.chatWorkflowEditorTypeId){
+            @case (chatWorkflowEditorTypeEnum.ButtonsBranch){
+              <ng-container>
+                @for(option of data.data.fieldOptionDetails; track $index){
+                  <div class="button-item">
+                    <button ejs-button cssClass="e-primary" style="width: 75%;">{{$index+1}}.{{option.label}}</button>
+                    @if(checkBranchAdd(data.data.branchDetails, option.value)){
+                      <button #addbtn ejs-button id="addbtn{{$index}}" iconCss='e-icons e-plus' cssClass='e-caret-hide' 
+                      (click)="onClickAddBtn(option, $index)"></button>
+                    }
+                  </div>
+                }
+              </ng-container>
+            }
+            @case (chatWorkflowEditorTypeEnum.DropdownBranch){
+              <ng-container>
+                <ejs-dropdownlist [dataSource]="data.data.fieldOptionDetails" [fields]="ddlFields"
+                  [placeholder]="data.data.fieldDetails.placeholder" cssClass="e-primary" width="85%">
+                </ejs-dropdownlist>
+              </ng-container>
+            }
+            @case(chatWorkflowEditorTypeEnum.ListBranch){
+              <ng-container>
+                <ejs-listview id='sample-list' [dataSource]='data.data.fieldOptionDetails'
+                  [fields]='ddlFields'></ejs-listview>
+              </ng-container>
+            }
+          }
+        }
       }
     </ng-template>
   </ejs-diagram>
   </div>
 </div>
 
-<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [clickedNodeRuleId]="clickedNodeRuleId" [selectedWorkFlowId]="selectedWorkFlowId" (ruleNodeChange)="onRuleNodeChange()"></app-workflow-sidebar>
+<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [clickedNodeRuleId]="clickedNodeRuleId" [selectedWorkFlowId]="selectedWorkFlowId" [optionValue]="optionValue" (ruleNodeChange)="onRuleNodeChange()"></app-workflow-sidebar>
 
 <!-- <div style="display: none;">
   <ejs-uploader #defaultupload id='fileupload' (success)='onUploadSuccess($event)' [asyncSettings]='asyncSettings'></ejs-uploader>
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
index fffb6e6..61ddfde 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.ts
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -2,8 +2,9 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, Input, ViewChild }
 import { ConnectionPointOrigin, ConnectorConstraints, ConnectorModel, DecoratorModel, Diagram,  DiagramComponent, DiagramModule, 
   HierarchicalTree, HierarchicalTreeService, HtmlModel, IClickEventArgs, LayoutModel, LineDistribution, Node, NodeModel, PrintAndExport, 
   SelectorConstraints, SelectorModel, SnapSettingsModel, UserHandleEventsArgs, UserHandleModel, DataSourceModel, 
-  DataBindingService} from '@syncfusion/ej2-angular-diagrams';
-import { ChatWorkflowRulesData } from '../../models/appModel';
+  DataBindingService,
+  SnapConstraints} from '@syncfusion/ej2-angular-diagrams';
+import { BranchDetail, ChatWorkflowRulesData, FieldOptionDetail } from '../../models/appModel';
 import { DialogModule } from '@syncfusion/ej2-angular-popups';
 import { BeforeOpenCloseMenuEventArgs} from '@syncfusion/ej2-angular-splitbuttons';
 import { CommonModule } from '@angular/common';
@@ -78,7 +79,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
   public headertitle = 'Block';
   public animation: Object  = { duration: 0};
   public isParentListItem : boolean = false;
-  
+  public optionValue!: string;
 
   private nodeIdCounter: number = 0;
   private connectorIdCounter: number = 0;
@@ -131,9 +132,8 @@ export class WorkflowDiagramComponent implements AfterViewInit {
 
   // Configure snapSettings to hide grid lines
   public snapSettings: SnapSettingsModel = {
-    horizontalGridlines: { lineColor: 'transparent', lineIntervals: [] },
-    verticalGridlines: { lineColor: 'transparent', lineIntervals: [] },
-    constraints: 0 // Disable all snapping
+    constraints:  SnapConstraints.All,
+    gridType: 'Dots'
   };
 
   public selectedItems: SelectorModel = {
@@ -180,8 +180,15 @@ export class WorkflowDiagramComponent implements AfterViewInit {
     if (args.actualObject instanceof Node) {
       const clickedBlock = args.actualObject as Node;
       let isLastNode = clickedBlock.outEdges.length == 0;
+      this.selectedBlockId = clickedBlock.id;
+      this.clickedNodeRuleId = (clickedBlock.data as ChatWorkflowRulesData).id;
+      this.selectedWorkFlowId = this.workflowID;
       if(isLastNode && this.diagram.selectedItems.userHandles) {
-        this.diagram.selectedItems.userHandles[0].visible = true;
+        const index = this.diagram.nodes.findIndex(node => node.id === this.selectedBlockId);
+        let isBranchNode = (this.diagram.nodes[index].data as ChatWorkflowRulesData).chatWorkflowBlockId == 10;
+        if(!isBranchNode){
+          this.diagram.selectedItems.userHandles[0].visible = true;
+        }
         this.diagram.selectedItems.userHandles[1].visible = true;
         this.diagram.selectedItems.userHandles[2].visible = true;
       }
@@ -190,14 +197,8 @@ export class WorkflowDiagramComponent implements AfterViewInit {
         this.diagram.selectedItems.userHandles[1].visible = true;
         this.diagram.selectedItems.userHandles[2].visible = false;
       }
-       this.selectedBlockId = clickedBlock.id;
-       this.clickedNodeRuleId = (clickedBlock.data as ChatWorkflowRulesData).id;
-       this.selectedWorkFlowId = this.workflowID;
-    }
-  }
 
-  public getDiagramLength(): number{
-    return this.diagram.nodes.length;
+    }
   }
 
   // Need to refresh the diagram whenever a node is added or modified
@@ -206,7 +207,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
     this.diagram.refresh();
   }
 
-  // on node delete 
+  // on rule node delete 
   public onDeleteNode(nodeObject) : void {
     let ruleData : ChatWorkflowRulesData = nodeObject.data as ChatWorkflowRulesData;
     const index = this.diagram.nodes.findIndex(node => (node.data as ChatWorkflowRulesData).successRuleId === ruleData.id);
@@ -220,6 +221,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
       }
     });
   }
+
   public onUserHandleMouseDown(event: UserHandleEventsArgs) {
     if(event.element.name === 'addBlock') {
       if(this.diagram.selectedItems.userHandles){
@@ -262,6 +264,27 @@ export class WorkflowDiagramComponent implements AfterViewInit {
     }
   }
   
+  public checkBranchAdd(branchInfo : BranchDetail[] | null, value: string ): boolean{
+    if(branchInfo != null){
+      for (const branch of branchInfo) {
+        if (branch.value === value && branch.successRuleId == null) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  
+  public onClickAddBtn(option : FieldOptionDetail | null, index : string){
+    console.log(option + "  \n" + index)
+    var addbtn=document.getElementById('addbtn' + index);
+    var addPos = addbtn.getBoundingClientRect();
+    this.optionValue = option.value;
+    this.contextmenu.open(addPos.top + window.scrollY, addPos.left+addPos.width +window.scrollX);
+    this.diagram.selectedItems.userHandles[1].visible = false;
+    this.diagram.selectedItems.userHandles[2].visible = false;
+  }
+  
   public onBeforeCloseContextMenu(args: BeforeOpenCloseMenuEventArgs) {
     if(!this.isParentListItem && !((args.event.target as HTMLElement).closest(".e-menu-item")==null)) {
         this.sidebarComponent?.sidebar?.show();
diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.html b/src/app/components/workflow-sidebar/workflow-sidebar.component.html
index 36afc3d..7e15ff5 100644
--- a/src/app/components/workflow-sidebar/workflow-sidebar.component.html
+++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.html
@@ -38,27 +38,27 @@
                         <button ejs-button type="button" iconCss='e-icons e-close'  (click)="removeOption($index)"></button>
                     </div>
                     @if(editIndex==$index){
-                        <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate; context: { visibility: isVisible(nodeEditType) }"></div>
+                        <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate; context: { desc_visibility: isVisible(nodeEditType), value_visibility: isValueVisible(nodeBlockType)}"></div>
                     }
                 }
             </ng-template>
 
-            <ng-template #addOptionTemplate let-isVisible="visibility">
+            <ng-template #addOptionTemplate let-isDescVisible="desc_visibility" let-isValueVisible="value_visibility">
                 <button ejs-button  type="button" iconCss='e-icons e-plus' (click)="onAddOption()">Add Option</button>
                 @if(addOption){
-                    <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate; context: { visibility: isVisible }"></div>
+                    <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate; context: { desc_visibility: isDescVisible, value_visibility : isValueVisible }"></div>
                 }
             </ng-template>
 
-            <ng-template #addButtonTemplate let-isVisible="visibility">
+            <ng-template #addButtonTemplate let-isDescVisible="desc_visibility" let-isValueVisible="value_visibility">
                 <div>
                     <input #optionLabel type="text" placeholder="Option Label" class="button-input" />
                 </div>
                 <div>
-                    <input #optionValue type="text" placeholder="Option Value" class="button-input" />
+                    <input #optionValue type="text" placeholder="Option Value" class="button-input" [style.display]="isValueVisible ? 'none' : 'block'"/>
                 </div>
                 <div>
-                    <input #optionDescription type="text" placeholder="Option Description" class="button-input" [style.display]="isVisible ? 'block' : 'none'"/>
+                    <input #optionDescription type="text" placeholder="Option Description" class="button-input" [style.display]="isDescVisible ? 'block' : 'none'"/>
                 </div>
                 <div>
                     <button ejs-button  type="button" iconCss='e-icons e-check' (click)="addOrUpdateSaveOption(optionLabel.value, optionValue.value, isVisible ? optionDescription.value : null, optionLabel, optionValue, isVisible ? optionDescription : null)"></button>
@@ -101,7 +101,7 @@
                         <div>
                             <div *ngTemplateOutlet="sideBarPlaceholderTemplate"></div>
                             <div class="button-list"  *ngTemplateOutlet="removeButtonTemplate"></div>
-                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate; context: { visibility: true }"></div>
+                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate; context: { desc_visibility: true , value_visibility: false}"></div>
                         </div>
                         }
                     }
@@ -173,6 +173,33 @@
                         <ejs-checkbox label="Get Customer Phone Number" [(ngModel)]="getPhoneNumberInfo" name="getPhoneNumberInfo"></ejs-checkbox>
                     </div>
                 }
+                
+                @case(chatWorkflowBlockTypeEnum.BranchOnPickerInput){
+                    @switch(nodeEditType){
+                        @case(chatWorkflowEditorTypeEnum.ButtonsBranch){
+                        <div>
+                            <div class="button-list" *ngTemplateOutlet="removeButtonTemplate"></div>
+                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate; context: { desc_visibility: false, value_visibility: true }"></div>
+                        </div>
+                        }
+                        @case(chatWorkflowEditorTypeEnum.DropdownBranch){
+                        <div>
+                            <div *ngTemplateOutlet="sideBarDescriptionTemplate"></div>
+                            <div *ngTemplateOutlet="sideBarPlaceholderTemplate"></div>
+                            <div class="button-list"  *ngTemplateOutlet="removeButtonTemplate"></div>
+                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate; context: { desc_visibility: false, value_visibility: true }"></div>
+                        </div>
+                        }
+                        @case(chatWorkflowEditorTypeEnum.ListBranch){
+                        <div>
+                            <div *ngTemplateOutlet="sideBarDescriptionTemplate"></div>
+                            <div *ngTemplateOutlet="sideBarPlaceholderTemplate"></div>
+                            <div class="button-list"  *ngTemplateOutlet="removeButtonTemplate"></div>
+                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate; context: { desc_visibility: true, value_visibility: true }"></div>
+                        </div>
+                        }
+                    }
+                }
             }
         </form>
     </div>
@@ -185,4 +212,8 @@
         }
         <button ejs-button id="cancel" (click)="onCancelSideBarClick()" class="e-btn close-btn">Cancel</button>
     </div>
-</ejs-sidebar>
\ No newline at end of file
+</ejs-sidebar>
+
+<ejs-dialog id='dialog' #ejDialog [animationSettings]='animationSettings'
+     content='Are you sure you want to permanently delete all success rules?'
+     [visible]='false' [buttons]='buttons' [position]='position'>
\ No newline at end of file
diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.scss b/src/app/components/workflow-sidebar/workflow-sidebar.component.scss
index 68f2897..18034e7 100644
--- a/src/app/components/workflow-sidebar/workflow-sidebar.component.scss
+++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.scss
@@ -88,4 +88,10 @@
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
+}
+
+#dialog {
+  align-items: center;
+  justify-content: center;
+  width: 300px;
 }
\ No newline at end of file
diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
index 9615af3..f80fd5c 100644
--- a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
+++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
@@ -3,19 +3,21 @@ import { SidebarComponent, SidebarModule } from '@syncfusion/ej2-angular-navigat
 import { TextFormatEnum, ChatWorkflowEditorTypeEnum, ChatWorkflowBlockTypeEnum } from '../../models/enum';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
-import { ChatWorkflowCommonObject, ChatWorkflowRulesData, ChatWorkflowRulesUpdateRequest, CustomerBlockFieldDetails, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails } from '../../models/appModel';
+import { BranchDetail, ChatWorkflowCommonObject, ChatWorkflowRulesData, ChatWorkflowRulesUpdateRequest, CustomerBlockFieldDetails, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails } from '../../models/appModel';
 import { NodeModel } from '@syncfusion/ej2-angular-diagrams';
 import { DropDownListComponent, DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
 import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';
 import { ButtonModule, CheckBoxModule, SwitchModule } from '@syncfusion/ej2-angular-buttons';
 import { WorkflowService } from '../../services/workflow.service';
 import { HttpErrorResponse } from '@angular/common/http';
+import { DialogComponent, DialogModule } from '@syncfusion/ej2-angular-popups';
+import { v1 as uuidv1 } from 'uuid';
 
 
 @Component({
   selector: 'app-workflow-sidebar',
   standalone: true,
-  imports: [SidebarModule, FormsModule, CommonModule, DatePickerModule, DateTimePickerModule, ButtonModule, CheckBoxModule, SwitchModule, DropDownListModule ],
+  imports: [SidebarModule, FormsModule, DialogModule, CommonModule, DatePickerModule, DateTimePickerModule, ButtonModule, CheckBoxModule, SwitchModule, DropDownListModule ],
   templateUrl: './workflow-sidebar.component.html',
   styleUrl: './workflow-sidebar.component.scss'
 })
@@ -25,12 +27,16 @@ export class WorkflowSidebarComponent {
   @ViewChild('optionLabel', { static: false }) optionLabelRef!: ElementRef;
   @ViewChild('optionValue', { static: false }) optionValueRef!: ElementRef;
   @ViewChild('optionDescription', { static: false }) optionDescriptionRef!: ElementRef;
-
+  @ViewChild('ejDialog') ejDialog: DialogComponent;
 
 
   public chatWorkflowEditorTypeEnum = ChatWorkflowEditorTypeEnum;
   public chatWorkflowBlockTypeEnum = ChatWorkflowBlockTypeEnum;
   public options: Array<{ label: string, value: string, description: string | null }> = [];
+  public addOptions: Array<{ label: string, value: string, description: string | null }> = [];
+  public editOptions: Array<{ label: string, value: string, description: string | null }> = [];
+  public deleteOptions: Array<{ label: string, value: string, description: string | null }> = [];
+
   public sideBarLabel: string = '';
   public sideBarDescription: string = '';
   public sideBarPlaceholder: string = '';
@@ -67,10 +73,38 @@ export class WorkflowSidebarComponent {
   @Input() nodeEditType!: number;
   @Input() nodeBlockType!: number;
   @Input() sidebarHeader!: string;
+  @Input() optionValue!: string;
   @Input() clickedNodeRuleId!: number;
   @Input() selectedWorkFlowId!: number;
   @Output() ruleNodeChange = new EventEmitter();
 
+
+  // Enables the footer buttons
+  public buttons: Object = [
+    {
+        'click': () => this.onDialogClose(true),
+        // Accessing button component properties by buttonModel property
+          buttonModel:{
+          content:'Yes',
+          iconCss: 'e-icons e-ok-icon',
+          //Enables the primary button
+          isPrimary: true
+        }
+    },
+    {
+        'click': () => this.onDialogClose(false),
+        // Accessing button component properties by buttonModel property
+          buttonModel:{
+          content:'No',
+          iconCss: 'e-icons e-close-icon'
+        }
+    }
+  ];
+
+  //Animation options
+  public animationSettings: Object = { effect: 'Zoom', duration: 400, delay: 0 };
+  public position: object={ X: '400', Y: '200' };
+
   constructor(private workflowService: WorkflowService) {
     this.textFormatDDLOptions = this.enumToArray(TextFormatEnum);
   }
@@ -119,12 +153,25 @@ export class WorkflowSidebarComponent {
   }
   // Add and Save option
   addOrUpdateSaveOption(label: string, value: string, description: string | null, labelInput: HTMLInputElement, valueInput: HTMLInputElement, descriptionInput: HTMLInputElement | null): void {
+    value = (this.nodeBlockType == ChatWorkflowBlockTypeEnum.BranchOnPickerInput) ? uuidv1() : value;
     const option = { label: label.trim(), value: value.trim(), description };
     if(this.isEditButton){
       this.options[this.editIndex] = option;
+      let addIndex = this.addOptions.findIndex(x => x.value == option.value);
+      let editedIndex = this.editOptions.findIndex(x => x.value == option.value);
+      if( addIndex > -1 ){
+        this.addOptions[addIndex] = option;
+      }
+      else if(editedIndex > -1){
+        this.editOptions[editedIndex] = option;
+      }
+      else{
+        this.editOptions.push(option);
+      }
     } 
     else {
       this.options.push({ label, value, description });
+      this.addOptions.push({ label, value, description });
     }
     this.cancelOption(labelInput, valueInput, descriptionInput);
   }
@@ -132,7 +179,7 @@ export class WorkflowSidebarComponent {
   // edit option value loading
   editOption(index: number): void {
     this.isEditButton = true;
-    this.editIndex = index;
+    this.editIndex = index; 
     this.addOption = false;
     this.updatePending = true; 
   }
@@ -150,6 +197,9 @@ export class WorkflowSidebarComponent {
   isVisible(nodeEditType: ChatWorkflowEditorTypeEnum): boolean {
     return nodeEditType === ChatWorkflowEditorTypeEnum.List;
   }
+  isValueVisible(nodeBlockType: ChatWorkflowBlockTypeEnum) : boolean{
+    return nodeBlockType === ChatWorkflowBlockTypeEnum.BranchOnPickerInput;
+  }
   // cancel the option
   cancelOption(labelInput: HTMLInputElement, valueInput: HTMLInputElement, descriptionInput: HTMLInputElement | null) {
     labelInput.value = '';
@@ -166,9 +216,26 @@ export class WorkflowSidebarComponent {
     this.addOption = true;
     this.editIndex = -1;
   }
+
+  public removeIndex!: number;
   // remove the option
   removeOption(index: number): void {
-    this.options.splice(index, 1);
+    if(this.nodeBlockType==10){
+      this.ejDialog.show();
+      this.removeIndex = index
+    }
+    else{
+      this.options.splice(index, 1);
+    }
+  }
+  // Hide the Dialog when click the footer button.
+  public onDialogClose(buttonValue: boolean) {
+    this.ejDialog!.hide();
+    if(buttonValue){
+      this.deleteOptions.push(this.options[this.removeIndex]);
+      this.options.splice(this.removeIndex, 1);
+    }
+    this.removeIndex = null;
   }
   // Set the node(block) values
   setBlockValues(nodeInfo: NodeModel) {
@@ -211,42 +278,42 @@ export class WorkflowSidebarComponent {
           isPrivate: this.checkedIsPrivate,
           textFormat: this.ddlTextFormat.value as TextFormatEnum
         }
-        this.newNodeInfo = this.createNodeInfo(null, this.nodeBlockType, this.selectedWorkFlowId, null, null, messageInfo, null);
+        this.newNodeInfo = this.createNodeInfo(null, this.nodeBlockType, this.selectedWorkFlowId, null, null, messageInfo, null, null);
         break;
       }
       case (this.chatWorkflowBlockTypeEnum.GetPickerInput): {
         switch (this.nodeEditType) {
           case (this.chatWorkflowEditorTypeEnum.Boolean): {
             let fieldInfo = this.createFieldInfo(null);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.Buttons): {
-            let fieldOptionInfo = this.mapOptionsToFieldOptions();
+            let fieldOptionInfo = this.mapOptionsToFieldOptions(false);
             let fieldInfo = this.createFieldInfo(null);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null, null);
             this.newNodeHeight += (this.options.length * 25);
             break;
           }
           case this.chatWorkflowEditorTypeEnum.DropDown: {
-            let fieldOptionInfo = this.mapOptionsToFieldOptions();
+            let fieldOptionInfo = this.mapOptionsToFieldOptions(false);
             let fieldInfo = this.createFieldInfo(null);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null, null);
             this.newNodeHeight += (this.options.length * 25);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.MultiSelect): {
             let fieldValidationInfo = this.createFieldValidationInfo(this.fieldOptionMinValue.toString(), this.fieldOptionMaxValue.toString(), "");
-            let fieldOptionInfo = this.mapOptionsToFieldOptions();
+            let fieldOptionInfo = this.mapOptionsToFieldOptions(false);
             let fieldInfo = this.createFieldInfo(fieldValidationInfo);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null, null);
             this.newNodeHeight += (this.options.length * 25);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.List): {
-            let fieldOptionInfo = this.mapOptionsToFieldOptions();
+            let fieldOptionInfo = this.mapOptionsToFieldOptions(false);
             let fieldInfo = this.createFieldInfo(null);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null, null);
             this.newNodeHeight += (this.options.length * 25);
             break;
           }
@@ -258,13 +325,13 @@ export class WorkflowSidebarComponent {
           case (this.chatWorkflowEditorTypeEnum.Text): {
             let fieldValidationInfo = this.createFieldValidationInfo("", this.fieldOptionMaxValue.toString(), "");
             let fieldInfo = this.createFieldInfo(fieldValidationInfo);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.TextArea): {
             let fieldValidationInfo = this.createFieldValidationInfo("", this.fieldOptionMaxValue.toString(), "");
             let fieldInfo = this.createFieldInfo(fieldValidationInfo);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.Date): {
@@ -275,7 +342,7 @@ export class WorkflowSidebarComponent {
 
             let fieldValidationInfo = this.createFieldValidationInfo(minDate, maxDate, "");
             let fieldInfo = this.createFieldInfo(fieldValidationInfo);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.DateTime): {
@@ -285,25 +352,25 @@ export class WorkflowSidebarComponent {
 
             let fieldValidationInfo = this.createFieldValidationInfo(minDateTime, maxDateTime, "");
             let fieldInfo = this.createFieldInfo(fieldValidationInfo);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.Number): {
             let fieldValidationInfo = this.createFieldValidationInfo(this.fieldOptionMinValue.toString(), this.fieldOptionMaxValue.toString(), "");
             let fieldInfo = this.createFieldInfo(fieldValidationInfo);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.Decimal): {
             let fieldValidationInfo = this.createFieldValidationInfo(this.fieldOptionMinValue.toString(), this.fieldOptionMaxValue.toString(), "");
             let fieldInfo = this.createFieldInfo(fieldValidationInfo);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.Regex): {
             let fieldValidationInfo = this.createFieldValidationInfo("", "", this.fieldOptionRegexValue);
             let fieldInfo = this.createFieldInfo(fieldValidationInfo);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null, null);
             break;
           }
         }
@@ -315,9 +382,37 @@ export class WorkflowSidebarComponent {
           isNameEditorEnabled: this.getNameInfo,
           isPhoneEditorEnabled: this.getPhoneNumberInfo,
         }
-        this.newNodeInfo = this.createNodeInfo(null, this.nodeBlockType, this.selectedWorkFlowId, null, null, null, customerBlockFieldInfo);
+        this.newNodeInfo = this.createNodeInfo(null, this.nodeBlockType, this.selectedWorkFlowId, null, null, null, customerBlockFieldInfo, null);
         break;
       }
+      case (this.chatWorkflowBlockTypeEnum.BranchOnPickerInput): {
+        switch (this.nodeEditType) {
+          case (this.chatWorkflowEditorTypeEnum.ButtonsBranch): {
+            let fieldOptionInfo = this.mapOptionsToFieldOptions(true);
+            let fieldInfo = this.createFieldInfo(null);
+            let branchInfo = this.createBrandInfo();
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null, branchInfo);
+            this.newNodeHeight += (this.options.length * 25);
+            break;
+          }
+          case (this.chatWorkflowEditorTypeEnum.DropdownBranch): {
+            let fieldOptionInfo = this.mapOptionsToFieldOptions(true);
+            let fieldInfo = this.createFieldInfo(null);
+            let branchInfo = this.createBrandInfo();
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null, branchInfo);
+            this.newNodeHeight += (this.options.length * 25);
+            break;
+          }
+          case (this.chatWorkflowEditorTypeEnum.ListBranch): {
+            let fieldOptionInfo = this.mapOptionsToFieldOptions(true);
+            let fieldInfo = this.createFieldInfo(null);
+            let branchInfo = this.createBrandInfo();
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null, branchInfo);
+            this.newNodeHeight += (this.options.length * 25);
+            break;
+          }
+        }
+      }
     }
     if (this.isEdit) {
       this.onUpdateRule();
@@ -338,7 +433,7 @@ export class WorkflowSidebarComponent {
       branchDetails: this.newNodeInfo.branchDetails,
       fieldOptionDetails : this.newNodeInfo.fieldOptionDetails
     };
-    this.workflowService.addRule(addRuleRequest).then((result) => {
+    this.workflowService.addRule(addRuleRequest, this.optionValue).then((result) => {
       console.log(result.message);
       if (result) {
         this.ruleNodeChange.emit();
@@ -354,7 +449,9 @@ export class WorkflowSidebarComponent {
     var updateRuleRequest : ChatWorkflowRulesUpdateRequest = {
       chatWorkflowEditorTypeId : this.newNodeInfo.chatWorkflowEditorTypeId,
       fieldDetails: this.newNodeInfo.fieldDetails,
-      fieldOptionDetails : this.newNodeInfo.fieldOptionDetails
+      addFieldOptionDetails: this.addOptions,
+      updateFieldOptionDetails: this.editOptions,
+      deleteFieldOptionDetails: this.deleteOptions
     };
     this.workflowService.updateRule(this.selectedWorkFlowId, this.clickedNodeRuleId, updateRuleRequest).then((result) => {
       console.log(result.message);
@@ -366,24 +463,22 @@ export class WorkflowSidebarComponent {
     });
   }
 
-  public createNodeInfo(editorTypeId: number | null, blockId: number, workflowId: number, fieldInfo: FieldDetails | null, fieldOptionInfo: FieldOptionDetail[] | null, messageInfo: MessageDetails | null, customerBlockFieldInfo: CustomerBlockFieldDetails | null): ChatWorkflowRulesData {
-    let ruleDataId = this.isEdit ? 0 : WorkflowSidebarComponent.nodeLength++; // Need to set value dynamically from db
+  public createNodeInfo(editorTypeId: number | null, blockId: number, workflowId: number, fieldInfo: FieldDetails | null, fieldOptionInfo: FieldOptionDetail[] | null, messageInfo: MessageDetails | null, customerBlockFieldInfo: CustomerBlockFieldDetails | null, brandInfo: BranchDetail[] | null): ChatWorkflowRulesData {
     return {
-      id: ruleDataId,
       chatWorkflowId: workflowId,
       successWorkflowId: null,
       successRuleId: null,
       chatWorkflowBlockId: blockId,
       chatWorkflowEditorTypeId: editorTypeId,
       fieldDetails: fieldInfo,
-      branchDetails: null,
+      branchDetails: brandInfo,
       messageDetails: messageInfo,
       fieldOptionDetails: fieldOptionInfo,
       customerBlockFieldInfo: customerBlockFieldInfo
     };
   }
 
-  public mapOptionsToFieldOptions(): FieldOptionDetail[] {
+  public mapOptionsToFieldOptions(isBranch : boolean): FieldOptionDetail[] {
     return this.options.map(button => ({
       label: button.label,
       value: button.value,
@@ -407,4 +502,12 @@ export class WorkflowSidebarComponent {
       fieldValidation: fieldValidationInfo
     }
   }
+
+  public createBrandInfo() : BranchDetail[]{
+    return this.options.map(button => ({
+      value: button.value,
+      successWorkflowId: null,
+      successRuleId: null
+    }));
+  }
 }
diff --git a/src/app/data/list-data.ts b/src/app/data/list-data.ts
index 2d1c603..ab76a92 100644
--- a/src/app/data/list-data.ts
+++ b/src/app/data/list-data.ts
@@ -153,18 +153,31 @@ export const LIST_DATA: { [key: string]: any }[] = [
           'id': '11',
           'category': 'Branching',
           'items': [{
-                'text': 'Buttons',
+                'text': 'ButtonsBranch',
                 'id': '11001',
+                'blockid': 10,
+                'editerTypeId': 14,
                 'category': 'Selection',
             },
             {
-                'text': 'List',
+                'text': 'DropdownBranch',
                 'id': '11002',
+                'blockid': 10,
+                'editerTypeId': 15,
+                'category': 'Selection',
+            },
+            {
+                'text': 'ListBranch',
+                'id': '11003',
+                'blockid': 10,
+                'editerTypeId': 16,
                 'category': 'Selection',
             },
             {
-                'text': 'Card',
+                'text': 'CardBranch',
                 'id': '11003',
+                'blockid': 10,
+                'editerTypeId': 17,
                 'category': 'Selection',
             }]
       }]
diff --git a/src/app/models/appModel.ts b/src/app/models/appModel.ts
index 69100ea..1590b8a 100644
--- a/src/app/models/appModel.ts
+++ b/src/app/models/appModel.ts
@@ -38,9 +38,6 @@ export interface MessageDetails {
 
 // Define BranchDetails interface
 export interface BranchDetail {
-  id?: number | null;
-  type?: string | null;
-  name?: string | null;
   successRuleId?: number| null;
   successWorkflowId?: number | null;
   value?: string | null;
@@ -54,7 +51,7 @@ export interface CustomerBlockFieldDetails {
 
 // Define the main Workflow interface
 export interface ChatWorkflowRulesData extends ChatWorkflowCommonObject {
-  id: number;
+  id?: number;
   successWorkflowId?: number | null;
   successRuleId?: number | null;
 }
@@ -62,7 +59,9 @@ export interface ChatWorkflowRulesData extends ChatWorkflowCommonObject {
 export interface ChatWorkflowRulesUpdateRequest {
   chatWorkflowEditorTypeId?: number | null;
   fieldDetails?: FieldDetails | null;
-  fieldOptionDetails?: FieldOptionDetail[] | null;
+  addFieldOptionDetails?: FieldOptionDetail[] | null;
+  updateFieldOptionDetails?: FieldOptionDetail[] | null;
+  deleteFieldOptionDetails?: FieldOptionDetail[] | null;
 }
 
 export interface ChatWorkflowCommonObject {
diff --git a/src/app/services/workflow.service.ts b/src/app/services/workflow.service.ts
index a8a5cb6..d0fb74a 100644
--- a/src/app/services/workflow.service.ts
+++ b/src/app/services/workflow.service.ts
@@ -33,9 +33,11 @@ export class WorkflowService {
     return this.http.delete<{ message: string }>(url, this.httpOptions).toPromise();
   }
 
-  addRule(addRuleRequest: ChatWorkflowCommonObject): Promise<{ workflowRuleId: number, message: string }> {
-    const url = WorkflowApiPaths.addWorkflowRules.replace('{baseUrl}', this.baseUrl);
-
+  addRule(addRuleRequest: ChatWorkflowCommonObject, branchValue : string | null): Promise<{ workflowRuleId: number, message: string }> {
+    let url = WorkflowApiPaths.addWorkflowRules.replace('{baseUrl}', this.baseUrl);
+    if (branchValue != null) {
+      url += `?branchValue=${branchValue}`;
+    }
     return this.http.post<{ workflowRuleId: number, message: string }>(url, addRuleRequest, this.httpOptions).toPromise();
   }
 }

From 7739a51da5fed860d02dcbaebdec4a8b549015f1 Mon Sep 17 00:00:00 2001
From: GowthamKumarMSF4219 <gowthamkumar.murugavel@syncfusion.com>
Date: Fri, 3 Jan 2025 15:56:36 +0530
Subject: [PATCH 2/2] Feature(402675):missed commit

---
 .../workflow-sidebar/workflow-sidebar.component.ts           | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
index f80fd5c..9bc455d 100644
--- a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
+++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
@@ -153,7 +153,6 @@ export class WorkflowSidebarComponent {
   }
   // Add and Save option
   addOrUpdateSaveOption(label: string, value: string, description: string | null, labelInput: HTMLInputElement, valueInput: HTMLInputElement, descriptionInput: HTMLInputElement | null): void {
-    value = (this.nodeBlockType == ChatWorkflowBlockTypeEnum.BranchOnPickerInput) ? uuidv1() : value;
     const option = { label: label.trim(), value: value.trim(), description };
     if(this.isEditButton){
       this.options[this.editIndex] = option;
@@ -170,6 +169,7 @@ export class WorkflowSidebarComponent {
       }
     } 
     else {
+      value = (this.nodeBlockType == ChatWorkflowBlockTypeEnum.BranchOnPickerInput) ? uuidv1() : value;
       this.options.push({ label, value, description });
       this.addOptions.push({ label, value, description });
     }
@@ -262,6 +262,9 @@ export class WorkflowSidebarComponent {
     this.sideBarDescription = "";
     this.sideBarPlaceholder = "";
     this.options = [];
+    this.addOptions = [];
+    this.editOptions = [];
+    this.deleteOptions = [];
     this.fieldOptionMinValue = 0;
     this.fieldOptionMaxValue = 0;
     this.fieldOptionRegexValue = "";