Feature(402681):update edit content

SyncfusionExamples · Dec 18, 2024 · 2934018 · 2934018
1 parent a21d3fd
commit 2934018
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html
@@ -131,7 +131,7 @@
 
 </div>
 
-<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [selectedBlockId]="selectedBlockId" [selectedWorkFlowId]="selectedWorkFlowId" (addNodeAndConnect)="onaddNodeAndConnect($event)"></app-workflow-sidebar>
+<app-workflow-sidebar #workflowSidebar [nodeEditType]="nodeEditType" [nodeBlockType]="nodeBlockType" [sidebarHeader]="sidebarHeader" [selectedBlockId]="selectedBlockId" [selectedWorkFlowId]="selectedWorkFlowId" (addNodeAndConnect)="onaddNodeAndConnect($event)" (updateNode)="onUpdateNode($event)"></app-workflow-sidebar>
 
 <!-- <div style="display: none;">
   <ejs-uploader #defaultupload id='fileupload' (success)='onUploadSuccess($event)' [asyncSettings]='asyncSettings'></ejs-uploader>

diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -238,7 +238,7 @@ export class WorkflowDiagramComponent implements AfterViewInit{
   public onaddNodeAndConnect([sourceNodeId, newNode]: [string, NodeModel]): void {
     // Add the new node to the diagram
     this.diagram.addNode(newNode);
-    this.nodes.push(newNode);
+    // this.nodes.push(newNode);
     // Create a new connector to link the new node to the source node
     const newConnectorId = `connector${++this.connectorIdCounter}`;
     const newConnector: ConnectorModel = {
@@ -253,6 +253,17 @@ export class WorkflowDiagramComponent implements AfterViewInit{
     this.diagram.doLayout();
   }
 
+  public onUpdateNode([sourceNodeId, newNode]: [string, NodeModel]) : void {
+    const index = this.nodes.findIndex(node => node.id === sourceNodeId);
+    const id = (this.nodes[index].addInfo as RuleData2).id;
+    (newNode.addInfo as RuleData2).id = id;
+    this.diagram.nodes[index].addInfo = newNode.addInfo;
+    this.diagram.nodes[index].height = 500;
+    this.nodes[0].addInfo = this.diagram.nodes[0].addInfo;
+    this.diagram.dataBind();
+    console.log(this.nodes[0].addInfo);
+  }
+
   public onUserHandleMouseDown(event: UserHandleEventsArgs) {
     if(event.element.name === 'addBlock') {
       if(this.diagram.selectedItems.userHandles){

diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.html b/src/app/components/workflow-sidebar/workflow-sidebar.component.html
@@ -5,7 +5,7 @@
             <div class="form-header"> {{sidebarHeader}}</div>
             <div>
                 <label>
-                    Label: <input type="text" [(ngModel)]="sideBarLabel" name="sideBarLabel" placeholder="Enter label..." class="description-box" required />
+                    Label: <input type="text" [(ngModel)]="sideBarLabel" name="sideBarLabel" placeholder="Enter label..." class="description-box" (change)="enableSaveButton()" required />
                 </label>
             </div>
 

diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts
@@ -51,13 +51,17 @@ export class WorkflowSidebarComponent {
   public isEdit: boolean = false;
   public isEditButton: boolean = false;
   public editIndex: number = -1;
+  public isDisabled: boolean = true;
+  public soureId: string = "";
 
   @Input() nodeEditType!: number;
   @Input() nodeBlockType!: number;
   @Input() sidebarHeader!: string;
   @Input() selectedBlockId!: string;
   @Input() selectedWorkFlowId!: number;
   @Output() addNodeAndConnect = new EventEmitter<[string, NodeModel]>();
+  @Output() updateNode = new EventEmitter<[string, NodeModel]>();
+
 
   constructor() {
   }
@@ -101,9 +105,14 @@ export class WorkflowSidebarComponent {
     this.buttons.splice(index, 1);
   }
 
+  enableSaveButton() {
+    this.isDisabled = false;
+  }
+
   setBlockValues(nodeInfo: NodeModel){
     this.isEdit = true;
     let nodeDetails = nodeInfo.addInfo as RuleData2;
+    this.soureId = nodeInfo?.id ?? "";
     this.nodeBlockType = nodeDetails.chatWorkflowBlockId;
     this.nodeEditType = nodeDetails.chatWorkflowEditorTypeId ?? 0;
     this.sideBarLabel = nodeDetails.fieldDetails?.label as string;
@@ -127,10 +136,12 @@ export class WorkflowSidebarComponent {
     this.fieldOptionMinValue = 0;
     this.fieldOptionMaxValue = 0;
     this.fieldOptionRegexValue = "";
+    this.isDisabled = true;
   }
 
   onUpdateCloseSideBarClick(): void{
-
+    this.addBlock(this.soureId)
+    this.sidebar?.hide();
   }
 
   editButton(index: number): void{
@@ -276,10 +287,12 @@ export class WorkflowSidebarComponent {
         break;
       }
     }
-    this.addNodeAndConnect.emit([sourceNodeId, this.newNode]);
-    this.sideBarLabel = "";
-    this.sideBarDescription = "";
-    this.sideBarPlaceholder = "";
+    if(this.isEdit){
+      this.updateNode.emit([sourceNodeId, this.newNode]);
+    }
+    else{
+      this.addNodeAndConnect.emit([sourceNodeId, this.newNode]);
+    }
   }
 
   public createNodeInfo(editorTypeId: number | null, blockId: number, workflowId: number, fieldInfo: FieldDetails | null, fieldOptionInfo: FieldOptionDetail[] | null, messageInfo: MessageDetails | null): RuleData2 {