From 8c5978e929d027665ea05b03bbfec66e1cede560 Mon Sep 17 00:00:00 2001
From: GowthamKumarMSF4219 <gowthamkumar.murugavel@syncfusion.com>
Date: Tue, 31 Dec 2024 18:02:54 +0530
Subject: [PATCH] Feature(402675):context menu

---
 src/app/app.component.ts                      |  2 +-
 .../workflow-diagram.component.html           | 16 ++++--
 .../workflow-diagram.component.ts             | 56 ++++++++++++++-----
 .../workflow-sidebar.component.html           | 15 +++--
 4 files changed, 63 insertions(+), 26 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 dbb7ff2..25a1f9b 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.html
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -14,6 +14,8 @@
       <input #fileInput type="file" accept=".json" style="display: none" (change)="onFileSelected($event)"/>
     </div>
   </div>
+  <ejs-contextmenu #contextmenu id='contextmenu' [items]= 'menuItems'></ejs-contextmenu>
+
   <div>
     <ejs-diagram class="diagram-container" #diagram 
     id="diagram" [width]="'100%'" [height]="649" [nodes]="nodes"
@@ -24,9 +26,10 @@
     <ng-template #userHandleTemplate let-data>
       <div class="dropDown-container">
         @if (data.name === 'addBlock') {
-          <button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton target="#listview"
-          (open)="onOpenDropDownButton($event)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
-          (beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
+          <!-- <button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton target="#listview"
+          (open)="onOpenDropDownButton($event, null, null)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
+          (beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button> -->
+          <button #addbtn ejs-button id="addbtn" iconCss='e-icons e-plus' cssClass='e-caret-hide'></button>
         }
         @else if (data.name === 'editBlock'){
           <button #editbtn ejs-button id="editbtn" iconCss='e-icons e-edit' cssClass='e-caret-hide'></button>
@@ -38,6 +41,7 @@
     </ng-template>
 
     <ng-template #nodeTemplate let-data>
+      <div class="workflowNode">
       @if(data.data.chatWorkflowBlockId !== chatWorkflowBlockTypeEnum.SendTextMessage && data.data.chatWorkflowBlockId !== chatWorkflowBlockTypeEnum.GetCustomerDetails) {
         <div><label style="padding: 5px;">{{ data.data.fieldDetails.description }}</label></div>
       }
@@ -145,7 +149,6 @@
                     <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 (click)="onClick">Click</button>
                         <button #dropdownbutton id="dropdownbutton-{{$index}}" ejs-dropdownbutton target="#listview"
                         (open)="onOpenDropDownButton($event, option, $index)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
                         (beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
@@ -171,11 +174,12 @@
           }
         }
       }
+      </div>
     </ng-template>
   </ejs-diagram>
 
-  <ejs-listview #listview id='listview' [dataSource]='listdata' cssClass='bc-block-option' [fields]='fields' [showHeader]='true'
-    [headerTitle]='headertitle' [animation]='animation' (select)="onSelectListView($event)"></ejs-listview>
+  <!-- <ejs-listview #listview id='listview' [dataSource]='listdata' cssClass='bc-block-option' [fields]='fields' [showHeader]='true'
+    [headerTitle]='headertitle' [animation]='animation' (select)="onSelectListView($event)"></ejs-listview> -->
   </div>
 
 </div>
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
index ace6c52..318356c 100644
--- a/src/app/components/workflow-diagram/workflow-diagram.component.ts
+++ b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -2,14 +2,14 @@ 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, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails } from '../../models/appModel';
+  DataBindingService, SnapConstraints} from '@syncfusion/ej2-angular-diagrams';
+import { BranchDetail, ChatWorkflowRulesData, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails } 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 { ClickEventArgs, ContextMenuComponent, ContextMenuModule, MenuComponent, MenuItemModel, MenuModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations';
 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';
@@ -28,7 +28,7 @@ Diagram.Inject(HierarchicalTree, LineDistribution, PrintAndExport);
   selector: 'app-workflow-diagram',
   standalone: true,
   providers: [HierarchicalTreeService, DataBindingService, WorkflowService],
-  imports: [DiagramModule, DialogModule, DropDownButtonModule, ButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, SwitchModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent],
+  imports: [DiagramModule,ContextMenuModule , MenuModule, DialogModule, DropDownButtonModule, ButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, SwitchModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent],
   templateUrl: './workflow-diagram.component.html',
   styleUrl: './workflow-diagram.component.scss'
 })
@@ -38,6 +38,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
   @ViewChild('listview') listView!: ListViewComponent;
   @ViewChild('workflowSidebar') sidebarComponent!: WorkflowSidebarComponent;
   @ViewChild('fileInput', { static: false }) fileInput!: ElementRef;
+  @ViewChild('contextmenu') contextmenu!: ContextMenuComponent;
 
   @Input() workflowID!: number | null;
 
@@ -76,6 +77,30 @@ export class WorkflowDiagramComponent implements AfterViewInit {
     },
   ];
 
+  public menuItems: MenuItemModel[] = [
+    {
+      text: 'View',
+      items: [
+          {
+              text: 'Toolbars',
+              items: [
+                  { text: 'Menu Bar' },
+                  { text: 'Bookmarks Toolbar' },
+                  { text: 'Customize' },
+              ]
+          },
+          {
+              text: 'Zoom',
+              items: [
+                  { text: 'Zoom In' },
+                  { text: 'Zoom Out' },
+                  { text: 'Reset' },
+              ]
+          },
+          { text: 'Full Screen' }
+      ]
+  }
+  ];
   public listdata: { [key: string]: any }[] = LIST_DATA;
   public fields: {[key: string]: string} ={ tooltip: 'text'};
   public headertitle = 'Block';
@@ -186,7 +211,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
       this.clickedNodeRuleId = (clickedBlock.data as ChatWorkflowRulesData).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;
+      let isBranchNode = (this.diagram.nodes[index].data as ChatWorkflowRulesData).chatWorkflowBlockId == 10;
       if(isLastNode && this.diagram.selectedItems.userHandles) {
         if(!isBranchNode){
           this.diagram.selectedItems.userHandles[0].visible = true;
@@ -250,7 +275,9 @@ export class WorkflowDiagramComponent implements AfterViewInit {
         this.diagram.selectedItems.userHandles[1].visible = false;
         this.diagram.selectedItems.userHandles[2].visible = false;
       }
-      this.dropdownbutton.toggle();
+      var addbtn=document.getElementById('addbtn');
+      var addPos = addbtn.getBoundingClientRect();
+      this.contextmenu.open(addPos.top + window.scrollY, addPos.left+window.scrollX);
     }
     else if(event.element.name === 'editBlock'){
       if(this.diagram.selectedItems.userHandles){
@@ -271,19 +298,22 @@ export class WorkflowDiagramComponent implements AfterViewInit {
     }
   }
 
-  public onOpenDropDownButton(args: OpenCloseMenuEventArgs, option: any | null, index: number | null) : void {
-    if(index!=null){
+  public onOpenDropDownButton(args: OpenCloseMenuEventArgs, option: any | null, index: number | null) {
+    console.log("Drop :" + args.element);
+    if (index != null) {
       this.dropdownbutton.toggle();
-      if(this.diagram.selectedItems.userHandles){
+      if (this.diagram.selectedItems.userHandles) {
         this.diagram.selectedItems.userHandles[1].visible = false;
         this.diagram.selectedItems.userHandles[2].visible = false;
       }
     }
-    let dropDownContainer = document.querySelector('.dropDown-container') as HTMLElement;
-    args.element.parentElement!.style.top = dropDownContainer.getBoundingClientRect().top + dropDownContainer.offsetHeight +'px';
+    else {
+      let dropDownContainer = document.querySelector('.dropDown-container') as HTMLElement;
+      args.element.parentElement!.style.top = dropDownContainer.getBoundingClientRect().top + dropDownContainer.offsetHeight + 'px';
 
-    let ulElement = document.querySelector('ul') as HTMLElement;
-    args.element.parentElement!.style.left = dropDownContainer.getBoundingClientRect().left - (ulElement.getBoundingClientRect().width / 2)+ (dropDownContainer.getBoundingClientRect().width / 2)+'px' ;
+      let ulElement = document.querySelector('ul') as HTMLElement;
+      args.element.parentElement!.style.left = dropDownContainer.getBoundingClientRect().left - (ulElement.getBoundingClientRect().width / 2) + (dropDownContainer.getBoundingClientRect().width / 2) + 'px';
+    }
   }
 
   public onBeforeCloseDropDownButton(args: BeforeOpenCloseMenuEventArgs) {
diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.html b/src/app/components/workflow-sidebar/workflow-sidebar.component.html
index 20c0937..c5413bd 100644
--- a/src/app/components/workflow-sidebar/workflow-sidebar.component.html
+++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.html
@@ -116,9 +116,11 @@
                         </div>
                         }
                         @case(chatWorkflowEditorTypeEnum.DateTime){
+                        <div>
                             <div *ngTemplateOutlet="sideBarPlaceholderTemplate"></div>
                             <label> From: <ejs-datetimepicker [(ngModel)]="fromDate" name="fromdatetimepicker"></ejs-datetimepicker></label>
                             <label> To: <ejs-datetimepicker [(ngModel)]="toDate" name="todatetimepicker"></ejs-datetimepicker></label>
+                        </div>
                         }
                         @case(chatWorkflowEditorTypeEnum.Number){
                         <div>
@@ -166,6 +168,13 @@
                         </div>
                     </div> 
                 }
+                @case(chatWorkflowBlockTypeEnum.GetCustomerDetails){
+                    <div>
+                        <ejs-checkbox label="Get Customer Email" [(ngModel)]="getEmailInfo" name="getEmailInfo" [checked]="true" [disabled] = "true"></ejs-checkbox>
+                        <ejs-checkbox label="Get Customer Name" [(ngModel)]="getNameInfo" name="getNameInfo"></ejs-checkbox>
+                        <ejs-checkbox label="Get Customer Phone Number" [(ngModel)]="getPhoneNumberInfo" name="getPhoneNumberInfo"></ejs-checkbox>
+                    </div>
+                }
                 @case(chatWorkflowBlockTypeEnum.BranchOnPickerInput){
                     @switch(nodeEditType){
                         @case(chatWorkflowEditorTypeEnum.ButtonsBranch){
@@ -191,12 +200,6 @@
                         </div>
                         }
                     }
-                @case(chatWorkflowBlockTypeEnum.GetCustomerDetails){
-                    <div>
-                        <ejs-checkbox label="Get Customer Email" [(ngModel)]="getEmailInfo" name="getEmailInfo" [checked]="true" [disabled] = "true"></ejs-checkbox>
-                        <ejs-checkbox label="Get Customer Name" [(ngModel)]="getNameInfo" name="getNameInfo"></ejs-checkbox>
-                        <ejs-checkbox label="Get Customer Phone Number" [(ngModel)]="getPhoneNumberInfo" name="getPhoneNumberInfo"></ejs-checkbox>
-                    </div>
                 }
             }
         </form>