Feature(402681):option edit

SyncfusionExamples · Dec 19, 2024 · 636baef · 636baef
1 parent 4726465
commit 636baef
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 72 deletions.
diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts
@@ -236,14 +236,15 @@ export class WorkflowDiagramComponent implements AfterViewInit{
     this.diagram.doLayout();
   }
 
-  public onUpdateNode([sourceNodeId, newNode]: [string, NodeModel]) : void {
+  public onUpdateNode([sourceNodeId, newNode]: [string, RuleData2]) : 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;
+    newNode.id = id;
+    this.diagram.nodes[index].addInfo = newNode;
     this.diagram.nodes[index].height = 500;
     this.nodes[0].addInfo = this.diagram.nodes[0].addInfo;
-    this.diagram.dataBind();
+    // this.diagram.dataBind();
+    this.diagram.doLayout();
     console.log(this.nodes[0].addInfo);
   }
 

diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.html b/src/app/components/workflow-sidebar/workflow-sidebar.component.html
@@ -42,6 +42,16 @@
                         }
                         <button ejs-button type="button" iconCss='e-icons e-close'  (click)="removeButton($index)"></button>
                     </div>
+                    @if(editIndex==$index){
+                        <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate; context: { visibility: isVisible(nodeEditType) }"></div>
+                    }
+                }
+            </ng-template>
+
+            <ng-template #addOptionTemplate let-isVisible="visibility">
+                <button ejs-button  type="button" iconCss='e-icons e-plus' (click)="addOptionClick()">Add Option</button>
+                @if(addOption){
+                    <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate; context: { visibility: isVisible }"></div>
                 }
             </ng-template>
 
@@ -53,19 +63,12 @@
                     <input #optionValue type="text" placeholder="Option Value" class="button-input" />
                 </div>
                 <div>
-                    <input #optionDescription type="text" placeholder="Option Description" class="button-input" [style.visibility]="isVisible ? 'visible' : 'hidden'" />
+                    <input #optionDescription type="text" placeholder="Option Description" class="button-input" [style.display]="isVisible ? 'block' : 'none'"/>
+                </div>
+                <div>
+                    <button ejs-button  type="button" iconCss='e-icons e-check' (click)="addButton(optionLabel.value, optionValue.value, isVisible ? optionDescription.value : null, optionLabel, optionValue, isVisible ? optionDescription : null)"></button>
+                    <button ejs-button  type="button" iconCss='e-icons e-close'  (click)="cancelOption(optionLabel, optionValue, isVisible ? optionDescription : null)"></button>
                 </div>
-                @if(isEditButton){
-                    <div>
-                        <button type="button" (click)="editOptionButton(optionLabel.value, optionValue.value, isVisible ? optionDescription.value : null, optionLabel, optionValue, isVisible ? optionDescription : null)" class="e-btn">Update Option</button>
-                        <button type="button" (click)="cancelOption(optionLabel, optionValue, isVisible ? optionDescription : null)" class="e-btn">Cancel</button>
-                    </div>
-                }
-                @else{
-                    <div>
-                        <button type="button" style="width: 100%;" (click)="addButton(optionLabel.value, optionValue.value, isVisible ? optionDescription.value : null, optionLabel, optionValue, isVisible ? optionDescription : null)" class="e-btn">Add Option</button>
-                    </div>
-                }
             </ng-template>
 
             @switch(nodeBlockType){
@@ -80,23 +83,23 @@
                         @case(chatWorkflowEditorTypeEnum.Buttons){
                         <div>
                             <div class="button-list" *ngTemplateOutlet="removeButtonTemplate"></div>
-                            <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate"></div>
+                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate"></div>
                         </div>
                         }
                         @case(chatWorkflowEditorTypeEnum.DropDown){
                         <div>
                             <div *ngTemplateOutlet="sideBarDescriptionTemplate"></div>
                             <div *ngTemplateOutlet="sideBarPlaceholderTemplate"></div>
                             <div class="button-list"  *ngTemplateOutlet="removeButtonTemplate"></div>
-                            <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate"></div>
+                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate"></div>
                         </div>
                         }
                         @case(chatWorkflowEditorTypeEnum.MultiSelect){
                         <div>
                             <div *ngTemplateOutlet="sideBarDescriptionTemplate"></div>
                             <div *ngTemplateOutlet="sideBarPlaceholderTemplate"></div>
                             <div class="button-list" *ngTemplateOutlet="removeButtonTemplate"></div>
-                            <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate"></div>
+                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate"></div>
                             <div *ngTemplateOutlet="fieldOptionMinValueTemplate"></div>
                             <div *ngTemplateOutlet="fieldOptionMaxValueTemplate"></div>
                         </div>
@@ -106,7 +109,7 @@
                             <div *ngTemplateOutlet="sideBarDescriptionTemplate"></div>
                             <div *ngTemplateOutlet="sideBarPlaceholderTemplate"></div>
                             <div class="button-list"  *ngTemplateOutlet="removeButtonTemplate"></div>
-                            <div class="add-button-form" *ngTemplateOutlet="addButtonTemplate; context: { visibility: true }"></div>
+                            <div class="add-button-form" *ngTemplateOutlet="addOptionTemplate; context: { visibility: true }"></div>
                         </div>
                         }
                     }