diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html index 4bee5dc..c8a2504 100644 --- a/src/app/components/workflow-diagram/workflow-diagram.component.html +++ b/src/app/components/workflow-diagram/workflow-diagram.component.html @@ -22,36 +22,39 @@ [getConnectorDefaults]="getConnectorDefaults" (created)="onDiagramCreated()" [selectedItems]="selectedItems" (onUserHandleMouseDown)="onUserHandleMouseDown($event)" (click)="onNodeClick($event)" [snapSettings]="snapSettings"> - +
- + } + @else{ + + }
+
@switch (data.addInfo.chatWorkflowBlockId){ @case(chatWorkflowBlockTypeEnum.GetPickerInput){ @switch (data.addInfo.chatWorkflowEditorTypeId){ @case (chatWorkflowEditorTypeEnum.Boolean){ -
} @case (chatWorkflowEditorTypeEnum.Buttons){ -
-
+ @for(option of data.addInfo.fieldOptionDetails; track $index){ -
+ } } @case (chatWorkflowEditorTypeEnum.DropDown){ -
@@ -59,7 +62,6 @@ } @case(chatWorkflowEditorTypeEnum.MultiSelect){ -
@@ -68,7 +70,6 @@ } @case(chatWorkflowEditorTypeEnum.List){ -
@@ -79,33 +80,28 @@ @switch (data.addInfo.chatWorkflowEditorTypeId){ @case(chatWorkflowEditorTypeEnum.Text){ -
} @case(chatWorkflowEditorTypeEnum.TextArea){ -
} @case(chatWorkflowEditorTypeEnum.Date){ -
} @case(chatWorkflowEditorTypeEnum.DateTime){ -
} @case(chatWorkflowEditorTypeEnum.Number){ -
@@ -113,7 +109,6 @@ } @case(chatWorkflowEditorTypeEnum.Decimal){ -
@@ -121,7 +116,6 @@ } @case(chatWorkflowEditorTypeEnum.Regex){ -
} diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.scss b/src/app/components/workflow-diagram/workflow-diagram.component.scss index 115c70f..b29a128 100644 --- a/src/app/components/workflow-diagram/workflow-diagram.component.scss +++ b/src/app/components/workflow-diagram/workflow-diagram.component.scss @@ -102,27 +102,6 @@ justify-content: space-between; margin-bottom: 10px; } - -.add-button-form { - display: flex; - flex-direction: column; - gap: 10px; - margin-bottom: 20px; -} - -.button-input { - width: 100%; - padding: 10px; - border: 1px solid #ddd; - border-radius: 4px; - box-sizing: border-box; -} - -.form-footer { - margin-top: 20px; - display: flex; - justify-content: space-between; -} .error { color: red; diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts index 671d133..95e54df 100644 --- a/src/app/components/workflow-diagram/workflow-diagram.component.ts +++ b/src/app/components/workflow-diagram/workflow-diagram.component.ts @@ -7,14 +7,14 @@ import { BeforeOpenCloseMenuEventArgs, DropDownButtonComponent, DropDownButtonMo import { CommonModule } from '@angular/common'; import { ListViewComponent, ListViewModule, SelectEventArgs } from '@syncfusion/ej2-angular-lists'; import { LIST_DATA } from '../../data/list-data'; -import { ClickEventArgs, SidebarComponent, SidebarModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations'; +import { ClickEventArgs, ToolbarModule } from '@syncfusion/ej2-angular-navigations'; import { FormsModule } from '@angular/forms'; import workflowData from '../../data/workflow-data.json'; // Adjust the path as needed import { DropDownList, DropDownListComponent, DropDownListModule, MultiSelectModule } from '@syncfusion/ej2-angular-dropdowns'; import { NumericTextBoxModule, TextAreaModule, TextBoxModule, UploaderModule } from '@syncfusion/ej2-angular-inputs'; import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars'; import { TextFormatEnum, ChatWorkflowEditorTypeEnum, ChatWorkflowBlockTypeEnum } from '../../models/enum'; -import { SwitchModule } from '@syncfusion/ej2-angular-buttons'; +import { ButtonModule, SwitchModule } from '@syncfusion/ej2-angular-buttons'; import sampleWorkflowData from '../../data/sample-workflow-data.json'; // Adjust the path as needed import { AsyncSettingsModel, FileInfo, Uploader } from '@syncfusion/ej2-inputs'; import { WorkflowSidebarComponent } from '../workflow-sidebar/workflow-sidebar.component'; // Import child component @@ -27,7 +27,7 @@ Diagram.Inject(HierarchicalTree, LineDistribution, PrintAndExport); selector: 'app-workflow-diagram', standalone: true, providers: [HierarchicalTreeService], - imports: [DiagramModule, DialogModule, DropDownButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, SwitchModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent], + imports: [DiagramModule, DialogModule, DropDownButtonModule, ButtonModule, CommonModule, ListViewModule, DropDownListModule, MultiSelectModule, NumericTextBoxModule, TextBoxModule, TextAreaModule, DatePickerModule, DateTimePickerModule, SwitchModule, ToolbarModule, UploaderModule, WorkflowSidebarComponent], templateUrl: './workflow-diagram.component.html', styleUrl: './workflow-diagram.component.scss' }) @@ -49,12 +49,20 @@ export class WorkflowDiagramComponent implements AfterViewInit{ public handles: UserHandleModel[] = [ { - name: 'plusIcon', + name: 'addBlock', visible: false, offset: 0.4, side: 'Bottom', margin: { top: 0, bottom: 0, left: 0, right: 0 }, backgroundColor: 'skyblue', + }, + { + name: 'editBlock', + visible: false, + offset: 0.4, + side: 'Right', + margin: { top: 0, bottom: 0, left: 0, right: 0 }, + backgroundColor: 'skyblue', } ]; @@ -212,9 +220,11 @@ export class WorkflowDiagramComponent implements AfterViewInit{ let isLastNode = clickedBlock.outEdges.length == 0; if(isLastNode && this.diagram.selectedItems.userHandles) { this.diagram.selectedItems.userHandles[0].visible = true; + this.diagram.selectedItems.userHandles[1].visible = true; } else if(this.diagram.selectedItems.userHandles){ this.diagram.selectedItems.userHandles[0].visible = false; + this.diagram.selectedItems.userHandles[1].visible = true; } this.selectedBlockId = clickedBlock.id; } @@ -228,6 +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); // Create a new connector to link the new node to the source node const newConnectorId = `connector${++this.connectorIdCounter}`; const newConnector: ConnectorModel = { @@ -243,15 +254,24 @@ export class WorkflowDiagramComponent implements AfterViewInit{ } public onUserHandleMouseDown(event: UserHandleEventsArgs) { - if(event.element.name === 'plusIcon') { + if(event.element.name === 'addBlock') { + if(this.diagram.selectedItems.userHandles){ + this.diagram.selectedItems.userHandles[0].visible = false; + this.diagram.selectedItems.userHandles[1].visible = false; + } this.dropdownbutton.toggle(); } + else if(event.element.name === 'editBlock'){ + if(this.diagram.selectedItems.userHandles){ + this.diagram.selectedItems.userHandles[1].visible = false; + } + let Obje = this.diagram.getNodeObject(this.selectedBlockId); + this.sidebarComponent?.setBlockValues(Obje); + this.sidebarComponent?.sidebar?.show(); + } } public onOpenDropDownButton(args: OpenCloseMenuEventArgs) { - if(this.diagram.selectedItems.userHandles){ - this.diagram.selectedItems.userHandles[0].visible = false; - } let dropDownContainer = document.querySelector('.dropDown-container') as HTMLElement; args.element.parentElement!.style.top = dropDownContainer.getBoundingClientRect().top + dropDownContainer.offsetHeight +'px'; diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.html b/src/app/components/workflow-sidebar/workflow-sidebar.component.html index dcb8f15..f0d0635 100644 --- a/src/app/components/workflow-sidebar/workflow-sidebar.component.html +++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.html @@ -34,10 +34,15 @@ -
- - -
+ @for(button of buttons; track $index){ +
+ + @if(isEdit){ + + } + +
+ } @@ -50,9 +55,17 @@
-
- -
+ @if(isEditButton){ +
+ + +
+ } + @else{ +
+ +
+ } @switch(nodeBlockType){ @@ -157,7 +170,12 @@
- + @if(isEdit){ + + } + @else{ + + }
\ No newline at end of file diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.scss b/src/app/components/workflow-sidebar/workflow-sidebar.component.scss index 0c10437..68f2897 100644 --- a/src/app/components/workflow-sidebar/workflow-sidebar.component.scss +++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.scss @@ -67,4 +67,25 @@ padding: 10px; color: #000000; text-align: center; +} + +.add-button-form { + display: flex; + flex-direction: column; + gap: 10px; + margin-bottom: 20px; +} + +.button-input { + width: 100%; + padding: 10px; + border: 1px solid #ddd; + border-radius: 4px; + box-sizing: border-box; +} + +.button-item { + display: flex; + justify-content: space-between; + margin-bottom: 10px; } \ No newline at end of file diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts index 4b13cc2..99feb91 100644 --- a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts +++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; +import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'; import { ClickEventArgs, SidebarComponent, SidebarModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations'; import { TextFormatEnum, ChatWorkflowEditorTypeEnum, ChatWorkflowBlockTypeEnum } from '../../models/enum'; import { FormsModule } from '@angular/forms'; @@ -7,18 +7,23 @@ import { FieldDetails, FieldOptionDetail, FieldValidation, MessageDetails, RuleD import { NodeModel } from '@syncfusion/ej2-angular-diagrams'; import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns'; import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars'; +import { ButtonModule } from '@syncfusion/ej2-angular-buttons'; @Component({ selector: 'app-workflow-sidebar', standalone: true, - imports: [SidebarModule, FormsModule, CommonModule, DatePickerModule, DateTimePickerModule], + imports: [SidebarModule, FormsModule, CommonModule, DatePickerModule, DateTimePickerModule, ButtonModule], templateUrl: './workflow-sidebar.component.html', styleUrl: './workflow-sidebar.component.scss' }) export class WorkflowSidebarComponent { @ViewChild('sidebar') sidebar?: SidebarComponent; @ViewChild('ddlTextFormat') ddlTextFormat!: DropDownListComponent; + @ViewChild('optionLabel') optionLabelRef!: ElementRef; + @ViewChild('optionValue') optionValueRef!: ElementRef; + @ViewChild('optionDescription') optionDescriptionRef!: ElementRef; + public chatWorkflowEditorTypeEnum = ChatWorkflowEditorTypeEnum; public chatWorkflowBlockTypeEnum = ChatWorkflowBlockTypeEnum; @@ -43,6 +48,10 @@ export class WorkflowSidebarComponent { public newNodeHeight: number = 150; public newNode: NodeModel = {}; + public isEdit: boolean = false; + public isEditButton: boolean = false; + public editIndex: number = -1; + @Input() nodeEditType!: number; @Input() nodeBlockType!: number; @Input() sidebarHeader!: string; @@ -53,14 +62,19 @@ export class WorkflowSidebarComponent { constructor() { } - onCloseSideBarClick(): void { + onAddCloseSideBarClick(): void { this.sidebar?.hide(); this.addBlock(this.selectedBlockId); - this.buttons = []; + this.removeSetBlockValues(); } onCancelSideBarClick(): void { this.sidebar?.hide(); + this.removeSetBlockValues(); + if(this.isEdit){ + this.isEdit = false; + this.isEditButton = false; + } } public onSideBarCreated(args: any) { @@ -86,6 +100,65 @@ export class WorkflowSidebarComponent { removeButton(index: number): void { this.buttons.splice(index, 1); } + + setBlockValues(nodeInfo: NodeModel){ + this.isEdit = true; + let nodeDetails = nodeInfo.addInfo as RuleData2; + this.nodeBlockType = nodeDetails.chatWorkflowBlockId; + this.nodeEditType = nodeDetails.chatWorkflowEditorTypeId ?? 0; + this.sideBarLabel = nodeDetails.fieldDetails?.label as string; + this.sideBarDescription = nodeDetails.fieldDetails?.description as string; + this.sideBarPlaceholder = nodeDetails.fieldDetails?.placeholder as string; + this.buttons = nodeDetails?.fieldOptionDetails?.map(fieldOption => ({ + label: fieldOption.label, + value: fieldOption.value, + description: fieldOption.description ?? null + })) || []; + this.fieldOptionMinValue = Number(nodeDetails?.fieldDetails?.fieldValidation?.min); + this.fieldOptionMaxValue = Number(nodeDetails?.fieldDetails?.fieldValidation?.max); + this.fieldOptionRegexValue = nodeDetails?.fieldDetails?.fieldValidation?.regex ?? ""; + } + + removeSetBlockValues(){ + this.sideBarLabel = ""; + this.sideBarDescription = ""; + this.sideBarPlaceholder = ""; + this.buttons = []; + this.fieldOptionMinValue = 0; + this.fieldOptionMaxValue = 0; + this.fieldOptionRegexValue = ""; + } + + onUpdateCloseSideBarClick(): void{ + + } + + editButton(index: number): void{ + let button = this.buttons[index]; + this.optionLabelRef.nativeElement.value = button.label; + this.optionValueRef.nativeElement.value = button.value; + this.optionDescriptionRef.nativeElement.value = button.value; + this.isEditButton = true; + this.editIndex = index; + } + + editOptionButton(label: string, value: string, description: string | null, labelInput: HTMLInputElement, valueInput: HTMLInputElement, descriptionInput: HTMLInputElement | null){ + let button = this.buttons[this.editIndex]; + this.buttons[this.editIndex].label = label; + this.buttons[this.editIndex].value = value; + this.buttons[this.editIndex].description = description; + + this.cancelOption(labelInput, valueInput, descriptionInput); + } + + cancelOption(labelInput: HTMLInputElement, valueInput: HTMLInputElement, descriptionInput: HTMLInputElement | null){ + labelInput.value = ''; + valueInput.value = ''; + if (descriptionInput) { + descriptionInput.value = ''; + } + this.isEditButton = false; + } addBlock(sourceNodeId: string) { switch (this.nodeBlockType) {