Skip to content

Commit

Permalink
Feature(402675):Added Branching Block
Browse files Browse the repository at this point in the history
  • Loading branch information
@GowthamKumarMVS
GowthamKumarMVS committed Dec 27, 2024
1 parent 80a0784 commit d510776
Show file tree
Hide file tree
Showing 6 changed files with 173 additions and 55 deletions.
48 changes: 35 additions & 13 deletions src/app/components/workflow-diagram/workflow-diagram.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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){
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
56 changes: 39 additions & 17 deletions src/app/components/workflow-diagram/workflow-diagram.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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;
}
Expand All @@ -196,17 +197,27 @@ 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;
}
}

public getDiagramLength(): number{
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();
}
Expand All @@ -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();
Expand All @@ -245,6 +254,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
}
});
}

public onUserHandleMouseDown(event: UserHandleEventsArgs) {
if(event.element.name === 'addBlock') {
if(this.diagram.selectedItems.userHandles){
Expand Down Expand Up @@ -274,13 +284,25 @@ 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';

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 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))) {
Expand Down
26 changes: 26 additions & 0 deletions src/app/components/workflow-sidebar/workflow-sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit d510776

Please sign in to comment.