feature(405222): integrate add API to workflow designer

src/app/api/workflowDesignerAPI.ts

@@ -1,11 +1,13 @@
 export interface WorkflowListPathsType {
     readonly updateWorkflowRules: string;
     readonly deleteWorkflowRules: string;
+    readonly addWorkflowRules: string;
 }
 
 const apiPaths: WorkflowListPathsType = {
     updateWorkflowRules: `{baseUrl}/{workflowId}/rules/{ruleId}/update`,
     deleteWorkflowRules: `{baseUrl}/{ruleId}/rules`,
+    addWorkflowRules: `{baseUrl}`
 }
 
 export const WorkflowApiPaths: WorkflowListPathsType = apiPaths;

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

@@ -135,7 +135,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()" (updateNode)="onUpdateNode($event)"></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

@@ -97,6 +97,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
   public nodeEditType!: number;
   public selectedBlockId!: string;
   public selectedWorkFlowId!: number;
+  public clickedNodeRuleId: number;
 
   public dataSourceSettings!: DataSourceModel;
 
@@ -197,6 +198,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
         this.diagram.selectedItems.userHandles[2].visible = false;
       }
        this.selectedBlockId = clickedBlock.id;
+       this.clickedNodeRuleId = (clickedBlock.data as RuleData2).id;
        this.selectedWorkFlowId = this.workflowID;
     }
   }
@@ -206,7 +208,7 @@ export class WorkflowDiagramComponent implements AfterViewInit {
   }
 
   // Method to add a new node and connect it
-  public onaddNodeAndConnect([sourceNodeId, newNode]: [string, NodeModel]): void {
+  public onDiagramRefresh(): void {
     this.diagram.setProperties({ nodes: [], connectors: [] }, true);
     this.diagram.refresh();
   }

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 { FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleData2 } from '../../models/appModel';
+import { ChatWorkflowAddRuleRequest, 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';
 import { ButtonModule, 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;
@@ -62,13 +63,12 @@ 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();
+  @Output() updateNode = new EventEmitter<[number, RuleData2]>();
 
-
-  constructor() {
+  constructor(private workflowService: WorkflowService) {
     this.textFormatDDLOptions = this.enumToArray(TextFormatEnum);
   }
 
@@ -96,12 +96,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();
   }
@@ -171,7 +171,7 @@ export class WorkflowSidebarComponent {
   setBlockValues(nodeInfo: NodeModel) {
     this.isEdit = true;
     let nodeDetails = nodeInfo.data as RuleData2;
-    this.soureId = nodeInfo?.id ?? "";
+    this.clickedNodeRuleId = nodeDetails.id;
     this.nodeBlockType = nodeDetails.chatWorkflowBlockId;
     this.nodeEditType = nodeDetails.chatWorkflowEditorTypeId ?? 0;
     this.sideBarLabel = nodeDetails.fieldDetails?.label as string;
@@ -198,10 +198,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 = {
@@ -309,22 +308,45 @@ export class WorkflowSidebarComponent {
       }
     }
     if (this.isEdit) {
-      this.updateNode.emit([sourceNodeId, this.newNodeInfo]);
+      this.updateNode.emit([this.clickedNodeRuleId, this.newNodeInfo]);
     }
     else {
-      this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, this.newNodeInfo);
-      this.addNodeAndConnect.emit([sourceNodeId, this.newNode]);
+      this.onAddRule();
+        // this.newNode = this.createNode(this.newNodeWidth, this.newNodeHeight, this.newNodeInfo);
     }
   }
 
+  public onAddRule(): void {
+    var addRuleRequest : ChatWorkflowAddRuleRequest = {
+      previousWorkflowRuleId: 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 createNodeInfo(editorTypeId: number | null, blockId: number, workflowId: number, fieldInfo: FieldDetails | null, fieldOptionInfo: FieldOptionDetail[] | null, messageInfo: MessageDetails | null): RuleData2 {
     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,

src/app/models/appModel.ts

@@ -73,7 +73,7 @@ export interface RuleData2 {
   chatWorkflowId: number;
   successWorkflowId?: number | null;
   successRuleId?: number | null;
-  isActive: boolean;
+  isActive?: boolean;
   chatWorkflowBlockId: number;
   chatWorkflowEditorTypeId?: number | null;
   fieldDetails?: FieldDetails | null;
@@ -83,10 +83,20 @@ export interface RuleData2 {
 }
 
 // Define the main Workflow interface
-export interface ChatWorkflowRulesData {
+export interface ChatWorkflowRulesData extends ChatWorkflowCommonObject {
   id: number;
   successWorkflowId?: number | null;
   successRuleId?: number | null;
+}
+
+export interface ChatWorkflowRulesData2 {
+  chatWorkflowEditorTypeId?: number | null;
+  fieldDetails?: FieldDetails | null;
+  fieldOptionDetails?: FieldOptionDetail[] | null;
+}
+
+export interface ChatWorkflowCommonObject {
+  chatWorkflowId: number;
   chatWorkflowBlockId: number;
   chatWorkflowEditorTypeId?: number | null;
   fieldDetails?: FieldDetails | null;
@@ -96,8 +106,11 @@ export interface ChatWorkflowRulesData {
   parentId?: number | null;
 }
 
-export interface ChatWorkflowRulesData2 {
-  chatWorkflowEditorTypeId?: number | null;
-  fieldDetails?: FieldDetails | null;
-  fieldOptionDetails?: FieldOptionDetail[] | null;
+export interface ChatWorkflowAddRuleRequest extends ChatWorkflowCommonObject {
+  previousWorkflowRuleId?: number;
+}
+
+export interface AddWorkflowRulesResponse {
+  workflowRuleId: number;
+  successMessage: string;
 }

src/app/services/workflow.service.ts

@@ -1,7 +1,7 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { WorkflowApiPaths } from '../api/workflowDesignerAPI';
-import { ChatWorkflowRulesData2 } from '../models/appModel';
+import { ChatWorkflowAddRuleRequest, ChatWorkflowRulesData2 } from '../models/appModel';
 
 @Injectable({
   providedIn: 'root'
@@ -31,4 +31,10 @@ export class WorkflowService {
 
     return this.http.delete<{ message: string }>(url, this.httpOptions).toPromise();
   }
+
+  addRule(addRuleRequest: ChatWorkflowAddRuleRequest, ): Promise<{ workflowRuleId: number, message: string }> {
+    const url = WorkflowApiPaths.addWorkflowRules.replace('{baseUrl}', this.baseUrl);
+
+    return this.http.post<{ workflowRuleId: number, message: string }>(url, addRuleRequest, this.httpOptions).toPromise();
+  }
 }