From d5107762228fbe945892506fc66b12b988e7631d Mon Sep 17 00:00:00 2001
From: GowthamKumarMSF4219 <gowthamkumar.murugavel@syncfusion.com>
Date: Fri, 27 Dec 2024 11:33:16 +0530
Subject: [PATCH] Feature(402675):Added Branching Block

---
 .../workflow-diagram.component.html           | 48 ++++++++----
 .../workflow-diagram.component.ts             | 56 +++++++++-----
 .../workflow-sidebar.component.html           | 26 +++++++
 .../workflow-sidebar.component.ts             | 76 ++++++++++++++-----
 src/app/data/list-data.ts                     | 19 ++++-
 src/app/models/appModel.ts                    |  3 -
 6 files changed, 173 insertions(+), 55 deletions(-)

diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
index e0dfbfa..0557596 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.html
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -38,19 +38,8 @@
     </ng-template>
 
     <ng-template #nodeTemplate let-data>
-      @if(data.data.chatWorkflowBlockId !== chatWorkflowBlockTypeEnum.SendTextMessage){
-        <div><label style="padding: 5px;">{{ data.data.fieldDetails.description }}</label></div>
-      }
+      <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){
@@ -125,6 +114,39 @@
             }
           }
         }
+        @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)){
+                      <div class="dropDown-container{{$index}}">
+                        <button #dropdownbutton id="dropdownbutton-{{$index}}" ejs-dropdownbutton target="#listview"
+                        (open)="onOpenDropDownButton1($event, option, $index)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
+                        (beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
+                      </div>                      
+                    }
+                  </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>
@@ -135,7 +157,7 @@
 
 </div>
 
-<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [selectedBlockId]="selectedBlockId" [selectedWorkFlowId]="selectedWorkFlowId" (addNodeAndConnect)="onaddNodeAndConnect($event)" (updateNode)="onUpdateNode($event)"></app-workflow-sidebar>
+<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [selectedBlockId]="selectedBlockId" [selectedWorkFlowId]="selectedWorkFlowId" (addNodeAndConnect)="onaddNodeAndConnect()" (updateNode)="onUpdateNode($event)"></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 7167071..bfa260f 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.ts
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -2,23 +2,20 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, Input, Output, view
 import { ComplexHierarchicalTree, ConnectionPointOrigin, ConnectorConstraints, ConnectorModel, DecoratorModel, Diagram,  DiagramComponent, DiagramModule, 
   HierarchicalTree, HierarchicalTreeService, HtmlModel, IClickEventArgs, IExportOptions, LayoutModel, LineDistribution, Node, NodeModel, PrintAndExport, 
   SelectorConstraints, SelectorModel, SnapSettingsModel, TextModel, UserHandleEventsArgs, UserHandleModel, DataSourceModel, 
-  DataBindingService} from '@syncfusion/ej2-angular-diagrams';
-import { ChatWorkflowRulesData, ChatWorkflowRulesData2, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleData2 } from '../../models/appModel';
-import { RULE_DATA, RULE_DATA2, RULE_DATA3 } from '../../data/rule-data';
+  DataBindingService,
+  SnapConstraints} from '@syncfusion/ej2-angular-diagrams';
+import { BranchDetail, ChatWorkflowRulesData, ChatWorkflowRulesData2, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleData2 } from '../../models/appModel';
 import { DialogModule } from '@syncfusion/ej2-angular-popups';
 import { BeforeOpenCloseMenuEventArgs, DropDownButtonComponent, DropDownButtonModule, ItemModel, OpenCloseMenuEventArgs } from '@syncfusion/ej2-angular-splitbuttons';
 import { CommonModule } from '@angular/common';
 import { ListViewComponent, ListViewModule, SelectEventArgs } from '@syncfusion/ej2-angular-lists';
 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 { 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 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
 import { Adaptor, DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
@@ -47,7 +44,6 @@ export class WorkflowDiagramComponent implements AfterViewInit {
 
   public chatWorkflowEditorTypeEnum = ChatWorkflowEditorTypeEnum; 
   public chatWorkflowBlockTypeEnum = ChatWorkflowBlockTypeEnum;
-  public data: RuleData2[] = RULE_DATA3;
   public nodes: NodeModel[] = [];
   public connectors: ConnectorModel[] = [];
   public closeOnDocumentClick: boolean = true;
@@ -137,9 +133,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 = {
@@ -186,8 +181,14 @@ 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.selectedWorkFlowId = this.workflowID;
+      const index = this.diagram.nodes.findIndex(node => node.id === this.selectedBlockId);
+      let isBranchNode = (this.diagram.nodes[index].data as RuleData2).chatWorkflowBlockId == 10;
       if(isLastNode && this.diagram.selectedItems.userHandles) {
-        this.diagram.selectedItems.userHandles[0].visible = true;
+        if(!isBranchNode){
+          this.diagram.selectedItems.userHandles[0].visible = true;
+        }
         this.diagram.selectedItems.userHandles[1].visible = true;
         this.diagram.selectedItems.userHandles[2].visible = true;
       }
@@ -196,8 +197,6 @@ export class WorkflowDiagramComponent implements AfterViewInit {
         this.diagram.selectedItems.userHandles[1].visible = true;
         this.diagram.selectedItems.userHandles[2].visible = false;
       }
-       this.selectedBlockId = clickedBlock.id;
-       this.selectedWorkFlowId = this.workflowID;
     }
   }
 
@@ -205,8 +204,20 @@ export class WorkflowDiagramComponent implements AfterViewInit {
     return this.diagram.nodes.length;
   }
 
+  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;
+  }
+
   // Method to add a new node and connect it
-  public onaddNodeAndConnect([sourceNodeId, newNode]: [string, NodeModel]): void {
+  public onaddNodeAndConnect(): void {
+    console.log("Hoi");
     this.diagram.setProperties({ nodes: [], connectors: [] }, true);
     this.diagram.refresh();
   }
@@ -233,9 +244,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
 
   // on node delete 
   public onDeleteNode(nodeObject) : void{
-    let ruleData : RuleData2 = nodeObject.data as RuleData2;
-    const index = this.diagram.nodes.findIndex(node => (node.data as RuleData2).successRuleId === ruleData.id);
-    this.workflowService.deleteRule(ruleData.id).then((result) => {
+    this.workflowService.deleteRule((nodeObject.data as RuleData2).id).then((result) => {
       console.log(result.message);
       this.diagram.setProperties({ nodes: [], connectors: [] }, true);
       this.diagram.refresh();
@@ -245,6 +254,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
       }
     });
   }
+
   public onUserHandleMouseDown(event: UserHandleEventsArgs) {
     if(event.element.name === 'addBlock') {
       if(this.diagram.selectedItems.userHandles){
@@ -274,6 +284,8 @@ export class WorkflowDiagramComponent implements AfterViewInit {
   }
 
   public onOpenDropDownButton(args: OpenCloseMenuEventArgs) {
+    console.log("Drop :" + args.element );
+
     let dropDownContainer = document.querySelector('.dropDown-container') as HTMLElement;
     args.element.parentElement!.style.top = dropDownContainer.getBoundingClientRect().top + dropDownContainer.offsetHeight +'px';
 
@@ -281,6 +293,16 @@ export class WorkflowDiagramComponent implements AfterViewInit {
     args.element.parentElement!.style.left = dropDownContainer.getBoundingClientRect().left - (ulElement.getBoundingClientRect().width / 2)+ (dropDownContainer.getBoundingClientRect().width / 2)+'px' ;
   }
 
+  public onOpenDropDownButton1(args: OpenCloseMenuEventArgs, option: any, index: number) {
+    console.log("Option Selected:", option);
+    console.log("Index:", index);
+    this.dropdownbutton.toggle();
+    if(this.diagram.selectedItems.userHandles){
+      this.diagram.selectedItems.userHandles[1].visible = false;
+      this.diagram.selectedItems.userHandles[2].visible = false;
+    }
+  }
+
   public onBeforeCloseDropDownButton(args: BeforeOpenCloseMenuEventArgs) {
     args.cancel = this.isParentListItem;
     if (!(this.isParentListItem || ((args.event.target as HTMLElement).closest(".bc-block-option.e-listview")==null))) {
diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.html b/src/app/components/workflow-sidebar/workflow-sidebar.component.html
index d376206..75fe408 100644
--- a/src/app/components/workflow-sidebar/workflow-sidebar.component.html
+++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.html
@@ -166,6 +166,32 @@
                         </div>
                     </div> 
                 }
+                @case(chatWorkflowBlockTypeEnum.BranchOnPickerInput){
+                    @switch(nodeEditType){
+                        @case(chatWorkflowEditorTypeEnum.ButtonsBranch){
+                        <div>
+                            <div class="button-list" *ngTemplateOutlet="removeButtonTemplate"></div>
+                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate"></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"></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: { visibility: true }"></div>
+                        </div>
+                        }
+                    }
+                }
             }
         </form>
     </div>
diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
index ded2f3b..0a69a6c 100644
--- a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
+++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
@@ -3,7 +3,7 @@ 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 { FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleData2 } from '../../models/appModel';
+import { BranchDetail, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleData2 } 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';
@@ -64,7 +64,7 @@ export class WorkflowSidebarComponent {
   @Input() sidebarHeader!: string;
   @Input() selectedBlockId!: string;
   @Input() selectedWorkFlowId!: number;
-  @Output() addNodeAndConnect = new EventEmitter<[string, NodeModel]>();
+  @Output() addNodeAndConnect = new EventEmitter();
   @Output() updateNode = new EventEmitter<[string, RuleData2]>();
 
 
@@ -198,7 +198,7 @@ export class WorkflowSidebarComponent {
     this.addOption = false;
     this.editIndex = -1;
     this.checkedIsPrivate = false;
-    this.ddlTextFormat.value = TextFormatEnum.Text
+    // this.ddlTextFormat.value = TextFormatEnum.Text
   }
   // Construct the add or update block details
   addOrUpdateBlock(sourceNodeId: string) {
@@ -209,27 +209,27 @@ export class WorkflowSidebarComponent {
           isPrivate: this.checkedIsPrivate,
           textFormat: this.ddlTextFormat.value as TextFormatEnum
         }
-        this.newNodeInfo = this.createNodeInfo(null, this.nodeBlockType, this.selectedWorkFlowId, null, null, messageInfo);
+        this.newNodeInfo = this.createNodeInfo(null, this.nodeBlockType, this.selectedWorkFlowId, null, null, messageInfo, 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);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.Buttons): {
             let fieldOptionInfo = this.mapOptionsToFieldOptions();
             let fieldInfo = this.createFieldInfo(null);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null);
             this.newNodeHeight += (this.options.length * 25);
             break;
           }
           case this.chatWorkflowEditorTypeEnum.DropDown: {
             let fieldOptionInfo = this.mapOptionsToFieldOptions();
             let fieldInfo = this.createFieldInfo(null);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null);
             this.newNodeHeight += (this.options.length * 25);
             break;
           }
@@ -237,14 +237,14 @@ export class WorkflowSidebarComponent {
             let fieldValidationInfo = this.createFieldValidationInfo(this.fieldOptionMinValue.toString(), this.fieldOptionMaxValue.toString(), "");
             let fieldOptionInfo = this.mapOptionsToFieldOptions();
             let fieldInfo = this.createFieldInfo(fieldValidationInfo);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null);
             this.newNodeHeight += (this.options.length * 25);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.List): {
             let fieldOptionInfo = this.mapOptionsToFieldOptions();
             let fieldInfo = this.createFieldInfo(null);
-            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null);
             this.newNodeHeight += (this.options.length * 25);
             break;
           }
@@ -256,13 +256,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);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, 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);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.Date): {
@@ -273,7 +273,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);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
             break;
           }
           case (this.chatWorkflowEditorTypeEnum.DateTime): {
@@ -283,41 +283,71 @@ 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);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, 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);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, 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);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, 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);
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, null, null, null);
             break;
           }
         }
         break;
       }
+      case (this.chatWorkflowBlockTypeEnum.BranchOnPickerInput): {
+        switch (this.nodeEditType) {
+          case (this.chatWorkflowEditorTypeEnum.ButtonsBranch): {
+            let fieldOptionInfo = this.mapOptionsToFieldOptions();
+            let fieldInfo = this.createFieldInfo(null);
+            let branchInfo = this.createBrandInfo();
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, branchInfo);
+            this.newNodeHeight += (this.options.length * 25);
+            break;
+          }
+          case (this.chatWorkflowEditorTypeEnum.DropdownBranch): {
+            let fieldOptionInfo = this.mapOptionsToFieldOptions();
+            let fieldInfo = this.createFieldInfo(null);
+            let branchInfo = this.createBrandInfo();
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, branchInfo);
+            this.newNodeHeight += (this.options.length * 25);
+            break;
+          }
+          case (this.chatWorkflowEditorTypeEnum.ListBranch): {
+            let fieldOptionInfo = this.mapOptionsToFieldOptions();
+            let fieldInfo = this.createFieldInfo(null);
+            let branchInfo = this.createBrandInfo();
+            this.newNodeInfo = this.createNodeInfo(this.nodeEditType, this.nodeBlockType, this.selectedWorkFlowId, fieldInfo, fieldOptionInfo, null, null);
+            this.newNodeHeight += (this.options.length * 25);
+            break;
+          }
+        }
+      }
     }
     if (this.isEdit) {
       this.updateNode.emit([sourceNodeId, this.newNodeInfo]);
     }
     else {
       this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, this.newNodeInfo);
-      this.addNodeAndConnect.emit([sourceNodeId, this.newNode]);
+      this.addNodeAndConnect.emit();
     }
   }
 
-  public createNodeInfo(editorTypeId: number | null, blockId: number, workflowId: number, fieldInfo: FieldDetails | null, fieldOptionInfo: FieldOptionDetail[] | null, messageInfo: MessageDetails | null): RuleData2 {
+  public createNodeInfo(editorTypeId: number | null, blockId: number, workflowId: number, 
+    fieldInfo: FieldDetails | null, fieldOptionInfo: FieldOptionDetail[] | null, messageInfo: MessageDetails | null, 
+    branchInfo: BranchDetail[] | null): RuleData2 {
     let ruleDataId = this.isEdit ? 0 : WorkflowSidebarComponent.nodeLength++; // Need to set value dynamically from db
     return {
       id: ruleDataId,
@@ -328,7 +358,7 @@ export class WorkflowSidebarComponent {
       chatWorkflowBlockId: blockId,
       chatWorkflowEditorTypeId: editorTypeId,
       fieldDetails: fieldInfo,
-      branchDetails: null,
+      branchDetails: branchInfo,
       messageDetails: messageInfo,
       fieldOptionDetails: fieldOptionInfo
     };
@@ -359,6 +389,14 @@ export class WorkflowSidebarComponent {
     }
   }
 
+  public createBrandInfo() : BranchDetail[]{
+    return this.options.map(button => ({
+      value: button.value,
+      successWorkflowId: null,
+      successRuleId: null
+    }));
+  }
+
   public createNode(width: number, height: number, nodeInfo: RuleData2): NodeModel {
     return {
       id: `node${nodeInfo.id}`,
diff --git a/src/app/data/list-data.ts b/src/app/data/list-data.ts
index 24a3a77..4ebe8a0 100644
--- a/src/app/data/list-data.ts
+++ b/src/app/data/list-data.ts
@@ -178,18 +178,31 @@ export const LIST_DATA: { [key: string]: any }[] = [
           'id': '11',
           'category': 'Branching',
           'child': [{
-                '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 2a7510c..ec921b6 100644
--- a/src/app/models/appModel.ts
+++ b/src/app/models/appModel.ts
@@ -59,9 +59,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;