Task(405222): Integrate Add API in Workflow Designer

src/app/api/workflowDesignerAPI.ts

@@ -1,6 +1,7 @@
 export interface WorkflowListPathsType {
     readonly updateWorkflowRules: string;
     readonly deleteWorkflowRules: string;
+    readonly addWorkflowRules: string;
 }
 
 // Define the path template once
@@ -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;

src/app/components/workflow-diagram/workflow-diagram.component.html

@@ -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>

src/app/components/workflow-diagram/workflow-diagram.component.ts

@@ -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';
@@ -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;
@@ -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;
 
@@ -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;
     }
   }
@@ -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);

src/app/components/workflow-sidebar/workflow-sidebar.component.ts

@@ -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({
@@ -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;
@@ -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);
   }
 
@@ -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();
   }
@@ -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;
@@ -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 = {
@@ -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,
@@ -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 },