Skip to content

Commit

Permalink
Merge pull request #22 from SyncfusionExamples/AddAPIIntegration
Browse files Browse the repository at this point in the history 
Task(405222): Integrate Add API in Workflow Designer
  • Loading branch information
@NavinVinayagam
NavinVinayagam authored Jan 2, 2025
2 parents a161a1b + dca2cf5 commit a94cac2
Show file tree
Hide file tree
Showing 7 changed files with 88 additions and 738 deletions.
2 changes: 2 additions & 0 deletions src/app/api/workflowDesignerAPI.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export interface WorkflowListPathsType {
readonly updateWorkflowRules: string;
readonly deleteWorkflowRules: string;
readonly addWorkflowRules: string;
}

// Define the path template once
Expand All @@ -9,6 +10,7 @@ const workflowRulesPath = `{baseUrl}/{workflowId}/rules/{ruleId}`;
const apiPaths: WorkflowListPathsType = {
updateWorkflowRules: workflowRulesPath,
deleteWorkflowRules: workflowRulesPath,
addWorkflowRules: `{baseUrl}/rules`
}

export const WorkflowApiPaths: WorkflowListPathsType = apiPaths;
2 changes: 1 addition & 1 deletion src/app/components/workflow-diagram/workflow-diagram.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,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" [clickedNodeRuleId]="clickedNodeRuleId" [selectedWorkFlowId]="selectedWorkFlowId" (diagramRefresh)="onDiagramRefresh()"></app-workflow-sidebar>

<!-- <div style="display: none;">
<ejs-uploader #defaultupload id='fileupload' (success)='onUploadSuccess($event)' [asyncSettings]='asyncSettings'></ejs-uploader>
Expand Down
41 changes: 13 additions & 28 deletions src/app/components/workflow-diagram/workflow-diagram.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ import { ComplexHierarchicalTree, ConnectionPointOrigin, ConnectorConstraints, C
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_DATA3 } from '../../data/rule-data';
import { 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';
Expand Down Expand Up @@ -47,7 +46,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 @@ -90,13 +88,14 @@ export class WorkflowDiagramComponent implements AfterViewInit {

private nodeIdCounter: number = 0;
private connectorIdCounter: number = 0;
public newNodeData: RuleData2[] = [];
public newNodeData: ChatWorkflowRulesData[] = [];

public sidebarHeader!: string;
public nodeBlockType!: number;
public nodeEditType!: number;
public selectedBlockId!: string;
public selectedWorkFlowId!: number;
public clickedNodeRuleId: number;

public dataSourceSettings!: DataSourceModel;

Expand Down Expand Up @@ -198,6 +197,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
this.diagram.selectedItems.userHandles[2].visible = false;
}
this.selectedBlockId = clickedBlock.id;
this.clickedNodeRuleId = (clickedBlock.data as ChatWorkflowRulesData).id;
this.selectedWorkFlowId = this.workflowID;
}
}
Expand All @@ -207,35 +207,20 @@ export class WorkflowDiagramComponent implements AfterViewInit {
}

// Method to add a new node and connect it
public onaddNodeAndConnect([sourceNodeId, newNode]: [string, NodeModel]): void {
this.diagram.setProperties({ nodes: [], connectors: [] }, true);
this.diagram.refresh();
}
// public onDiagramRefresh(): void {
// this.diagram.setProperties({ nodes: [], connectors: [] }, true);
// this.diagram.refresh();
// }

// Update the Node and reload
public onUpdateNode([sourceNodeId, newNode]: [string, RuleData2]) : void {
const index = this.diagram.nodes.findIndex(node => node.id === sourceNodeId);
newNode.id = (this.diagram.nodes[index].data as RuleData2).id;
var workBody : ChatWorkflowRulesData2 = {
chatWorkflowEditorTypeId : newNode.chatWorkflowEditorTypeId,
fieldDetails: newNode.fieldDetails,
fieldOptionDetails : newNode.fieldOptionDetails
};
this.workflowService.updateRule(newNode.chatWorkflowId, newNode.id, workBody).then((result) => {
console.log(result.message);
this.diagram.setProperties({ nodes: [], connectors: [] }, true);
public onDiagramRefresh(): void {
this.diagram.setProperties({ nodes: [], connectors: [] }, true);
this.diagram.refresh();
}).catch((e : HttpErrorResponse) => {
if(e && e.error?.Message){
console.log("Update failed");
}
});
}

// 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);
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);
this.workflowService.deleteRule(ruleData.chatWorkflowId, ruleData.id).then((result) => {
console.log(result.message);
this.diagram.setProperties({ nodes: [], connectors: [] }, true);
Expand Down
74 changes: 55 additions & 19 deletions src/app/components/workflow-sidebar/workflow-sidebar.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,13 @@ 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 { CustomerBlockFieldDetails, FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleData2 } from '../../models/appModel';
import { 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';


@Component({
Expand Down Expand Up @@ -50,7 +52,6 @@ export class WorkflowSidebarComponent {
public isEdit: boolean = false;
public isEditButton: boolean = false;
public editIndex: number = -1;
public soureId: string = "";
public addOption: boolean = false;
public newNodeInfo: any;
private updatePending = false;
Expand All @@ -66,13 +67,11 @@ export class WorkflowSidebarComponent {
@Input() nodeEditType!: number;
@Input() nodeBlockType!: number;
@Input() sidebarHeader!: string;
@Input() selectedBlockId!: string;
@Input() clickedNodeRuleId!: number;
@Input() selectedWorkFlowId!: number;
@Output() addNodeAndConnect = new EventEmitter<[string, NodeModel]>();
@Output() updateNode = new EventEmitter<[string, RuleData2]>();
@Output() diagramRefresh = new EventEmitter();


constructor() {
constructor(private workflowService: WorkflowService) {
this.textFormatDDLOptions = this.enumToArray(TextFormatEnum);
}

Expand Down Expand Up @@ -100,12 +99,12 @@ export class WorkflowSidebarComponent {
// Add the new block
onAddCloseSideBarClick(): void {
this.sidebar?.hide();
this.addOrUpdateBlock(this.selectedBlockId);
this.addOrUpdateBlock(this.clickedNodeRuleId);
this.removeSetBlockValues();
}
// Update the existing block
onUpdateCloseSideBarClick(): void {
this.addOrUpdateBlock(this.soureId)
this.addOrUpdateBlock(this.clickedNodeRuleId)
this.sidebar?.hide();
this.removeSetBlockValues();
}
Expand Down Expand Up @@ -174,8 +173,8 @@ export class WorkflowSidebarComponent {
// Set the node(block) values
setBlockValues(nodeInfo: NodeModel) {
this.isEdit = true;
let nodeDetails = nodeInfo.data as RuleData2;
this.soureId = nodeInfo?.id ?? "";
let nodeDetails = nodeInfo.data as ChatWorkflowRulesData;
this.clickedNodeRuleId = nodeDetails.id;
this.nodeBlockType = nodeDetails.chatWorkflowBlockId;
this.nodeEditType = nodeDetails.chatWorkflowEditorTypeId ?? 0;
this.sideBarLabel = nodeDetails.fieldDetails?.label as string;
Expand All @@ -202,10 +201,9 @@ export class WorkflowSidebarComponent {
this.addOption = false;
this.editIndex = -1;
this.checkedIsPrivate = false;
this.ddlTextFormat.value = TextFormatEnum.Text
}
// Construct the add or update block details
addOrUpdateBlock(sourceNodeId: string) {
addOrUpdateBlock(clickedNodeRuleId: number) {
switch (this.nodeBlockType) {
case (this.chatWorkflowBlockTypeEnum.SendTextMessage): {
let messageInfo: MessageDetails = {
Expand Down Expand Up @@ -322,22 +320,60 @@ export class WorkflowSidebarComponent {
}
}
if (this.isEdit) {
this.updateNode.emit([sourceNodeId, this.newNodeInfo]);
this.onUpdateRule();
}
else {
this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, this.newNodeInfo);
this.addNodeAndConnect.emit([sourceNodeId, this.newNode]);
this.onAddRule();
}
}

public createNodeInfo(editorTypeId: number | null, blockId: number, workflowId: number, fieldInfo: FieldDetails | null, fieldOptionInfo: FieldOptionDetail[] | null, messageInfo: MessageDetails | null, customerBlockFieldInfo: CustomerBlockFieldDetails | null): RuleData2 {
public onAddRule(): void {
var addRuleRequest : ChatWorkflowCommonObject = {
parentRuleId: this.clickedNodeRuleId,
chatWorkflowId: this.selectedWorkFlowId,
chatWorkflowBlockId: this.newNodeInfo.chatWorkflowBlockId,
chatWorkflowEditorTypeId : this.newNodeInfo.chatWorkflowEditorTypeId,
fieldDetails: this.newNodeInfo.fieldDetails,
messageDetails: this.newNodeInfo.messageDetails,
branchDetails: this.newNodeInfo.branchDetails,
fieldOptionDetails : this.newNodeInfo.fieldOptionDetails
};
this.workflowService.addRule(addRuleRequest).then((result) => {
console.log(result.message);
if (result) {
this.diagramRefresh.emit();
this.newNodeInfo.id = result.workflowRuleId;
}
}).catch((e : HttpErrorResponse) => {
if(e && e.error?.Message){
console.log("Add failed");
}
});
}

public onUpdateRule(): void {
var updateRuleRequest : ChatWorkflowRulesUpdateRequest = {
chatWorkflowEditorTypeId : this.newNodeInfo.chatWorkflowEditorTypeId,
fieldDetails: this.newNodeInfo.fieldDetails,
fieldOptionDetails : this.newNodeInfo.fieldOptionDetails
};
this.workflowService.updateRule(this.selectedWorkFlowId, this.clickedNodeRuleId, updateRuleRequest).then((result) => {
console.log(result.message);
this.diagramRefresh.emit();
}).catch((e : HttpErrorResponse) => {
if(e && e.error?.Message){
console.log("Update failed");
}
});
}

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
return {
id: ruleDataId,
chatWorkflowId: workflowId,
successWorkflowId: null,
successRuleId: null,
isActive: true,
chatWorkflowBlockId: blockId,
chatWorkflowEditorTypeId: editorTypeId,
fieldDetails: fieldInfo,
Expand Down Expand Up @@ -373,7 +409,7 @@ export class WorkflowSidebarComponent {
}
}

public createNode(width: number, height: number, nodeInfo: RuleData2): NodeModel {
public createNode(width: number, height: number, nodeInfo: ChatWorkflowRulesData): NodeModel {
return {
id: `node${nodeInfo.id}`,
style: { fill: '#FFFFFF', strokeColor: '#0f2c60', strokeWidth: 5 },
Expand Down
Loading

0 comments on commit a94cac2

Please sign in to comment.