diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.html b/src/app/components/workflow-diagram/workflow-diagram.component.html index d6ee089..3f014ca 100644 --- a/src/app/components/workflow-diagram/workflow-diagram.component.html +++ b/src/app/components/workflow-diagram/workflow-diagram.component.html @@ -38,8 +38,19 @@ -
+ @if(data.data.chatWorkflowBlockId !== chatWorkflowBlockTypeEnum.SendTextMessage){ +
+ } @switch (data.data.chatWorkflowBlockId){ + @case(chatWorkflowBlockTypeEnum.SendTextMessage){ + + +
+
+
Private
+
+
+ } @case(chatWorkflowBlockTypeEnum.GetPickerInput){ @switch (data.data.chatWorkflowEditorTypeId){ @case (chatWorkflowEditorTypeEnum.Boolean){ diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.scss b/src/app/components/workflow-diagram/workflow-diagram.component.scss index b29a128..b938991 100644 --- a/src/app/components/workflow-diagram/workflow-diagram.component.scss +++ b/src/app/components/workflow-diagram/workflow-diagram.component.scss @@ -44,16 +44,6 @@ border-radius: 5px; font-size: 15px; } - -.custom-node-container { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - padding: 5px; - box-sizing: border-box; -} .custom-input { width: 90%; @@ -153,3 +143,24 @@ .diagram-serialization .e-open::before { content: "\e713"; } + +.private-label-container { + position: absolute; + bottom: 0; + width: 100%; + + .private-label { + text-align: center; + font-weight: normal; + color: #721c24; + background-color: #e29ca3; + padding: 1px; + } + + .separator { + width: 100%; + border: none; + border-top: 1px solid #ddd; + margin: 10px 0 0 0; + } +} diff --git a/src/app/components/workflow-diagram/workflow-diagram.component.ts b/src/app/components/workflow-diagram/workflow-diagram.component.ts index f1c66a9..5c733d0 100644 --- a/src/app/components/workflow-diagram/workflow-diagram.component.ts +++ b/src/app/components/workflow-diagram/workflow-diagram.component.ts @@ -13,11 +13,11 @@ import { LIST_DATA } from '../../data/list-data'; 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 { 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 { ButtonModule, SwitchModule } from '@syncfusion/ej2-angular-buttons'; +import { ButtonModule } 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 @@ -47,7 +47,6 @@ export class WorkflowDiagramComponent implements AfterViewInit { public chatWorkflowEditorTypeEnum = ChatWorkflowEditorTypeEnum; public chatWorkflowBlockTypeEnum = ChatWorkflowBlockTypeEnum; - // public data: RuleData[] = RULE_DATA; public data: RuleData2[] = RULE_DATA3; public nodes: NodeModel[] = []; public connectors: ConnectorModel[] = []; diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.html b/src/app/components/workflow-sidebar/workflow-sidebar.component.html index 4aea947..93ba9e3 100644 --- a/src/app/components/workflow-sidebar/workflow-sidebar.component.html +++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.html @@ -167,6 +167,16 @@ } } } + @case(chatWorkflowBlockTypeEnum.SendTextMessage){ +
+ + +
+ + +
+
+ } } diff --git a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts index f514dbc..44b40e4 100644 --- a/src/app/components/workflow-sidebar/workflow-sidebar.component.ts +++ b/src/app/components/workflow-sidebar/workflow-sidebar.component.ts @@ -1,19 +1,19 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'; -import { ClickEventArgs, SidebarComponent, SidebarModule, ToolbarModule } from '@syncfusion/ej2-angular-navigations'; +import { SidebarComponent, SidebarModule } from '@syncfusion/ej2-angular-navigations'; 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 { NodeModel } from '@syncfusion/ej2-angular-diagrams'; -import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns'; +import { DropDownListComponent, DropDownListModule } from '@syncfusion/ej2-angular-dropdowns'; import { DatePickerModule, DateTimePickerModule } from '@syncfusion/ej2-angular-calendars'; -import { ButtonModule } from '@syncfusion/ej2-angular-buttons'; +import { ButtonModule, SwitchModule } from '@syncfusion/ej2-angular-buttons'; @Component({ selector: 'app-workflow-sidebar', standalone: true, - imports: [SidebarModule, FormsModule, CommonModule, DatePickerModule, DateTimePickerModule, ButtonModule], + imports: [SidebarModule, FormsModule, CommonModule, DatePickerModule, DateTimePickerModule, ButtonModule, SwitchModule, DropDownListModule ], templateUrl: './workflow-sidebar.component.html', styleUrl: './workflow-sidebar.component.scss' }) @@ -43,7 +43,6 @@ export class WorkflowSidebarComponent { public type: string = 'Push'; public width: string = '280px'; public checkedIsPrivate: boolean = false; - public customMessage: string = ''; public newNodeWidth: number = 200; public newNodeHeight: number = 150; public newNode: NodeModel = {}; @@ -56,6 +55,10 @@ export class WorkflowSidebarComponent { public newNodeInfo: any; private updatePending = false; + textFormatDDLOptions: Array<{ text: string, value: number }>; + ddlTextFormatFields: Object = { text: 'text', value: 'value' }; + public value = 1; + @Input() nodeEditType!: number; @Input() nodeBlockType!: number; @Input() sidebarHeader!: string; @@ -66,8 +69,21 @@ export class WorkflowSidebarComponent { constructor() { + this.textFormatDDLOptions = this.enumToArray(TextFormatEnum); } + // Convert enum to array of objects + private enumToArray(enumObj: any): Array<{ text: string, value: number }> { + return Object.keys(enumObj) + .filter(key => isNaN(Number(key))) + .map(key => { + return { + text: key, + value: enumObj[key as keyof typeof enumObj] + } + }); + } + public onSideBarCreated(args: any) { (this.sidebar as SidebarComponent).hide(); (this.sidebar as SidebarComponent).position = "Right"; @@ -181,13 +197,15 @@ export class WorkflowSidebarComponent { this.fieldOptionRegexValue = ""; this.addOption = false; this.editIndex = -1; + this.checkedIsPrivate = false; + this.ddlTextFormat.value = TextFormatEnum.Text } // Construct the add or update block details addOrUpdateBlock(sourceNodeId: string) { switch (this.nodeBlockType) { case (this.chatWorkflowBlockTypeEnum.SendTextMessage): { let messageInfo: MessageDetails = { - text: this.customMessage, + text: this.sideBarLabel, isPrivate: this.checkedIsPrivate, textFormat: this.ddlTextFormat.value as TextFormatEnum } diff --git a/src/app/data/list-data.ts b/src/app/data/list-data.ts index 4c189e0..24a3a77 100644 --- a/src/app/data/list-data.ts +++ b/src/app/data/list-data.ts @@ -39,6 +39,8 @@ export const LIST_DATA: { [key: string]: any }[] = [ { 'text': 'Custom Message', 'id': '2', + 'blockid': 6, + 'editerTypeId': null, 'category': 'Action', }, { diff --git a/src/app/models/enum.ts b/src/app/models/enum.ts index 04ebc59..dbfc67f 100644 --- a/src/app/models/enum.ts +++ b/src/app/models/enum.ts @@ -1,6 +1,6 @@ export enum TextFormatEnum { - Text = 2, - Html = 1, + Text = 1, + Html = 2, Markdown = 3 }