Skip to content

Commit

Permalink
Feature(402681):Sidebar update for edit
Browse files Browse the repository at this point in the history
  • Loading branch information
@GowthamKumarMVS
GowthamKumarMVS committed Dec 17, 2024
1 parent 2a9fff2 commit a21d3fd
Show file tree
Hide file tree
Showing 6 changed files with 162 additions and 57 deletions.
26 changes: 10 additions & 16 deletions src/app/components/workflow-diagram/workflow-diagram.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,44 +22,46 @@
[getConnectorDefaults]="getConnectorDefaults" (created)="onDiagramCreated()" [selectedItems]="selectedItems"
(onUserHandleMouseDown)="onUserHandleMouseDown($event)" (click)="onNodeClick($event)" [snapSettings]="snapSettings">

<ng-template #userHandleTemplate>
<ng-template #userHandleTemplate let-data>
<div class="dropDown-container">
<button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton target="#listview"
@if (data.name === 'addBlock') {
<button #dropdownbutton id="dropdownbutton" ejs-dropdownbutton target="#listview"
(open)="onOpenDropDownButton($event)" iconCss='e-icons e-plus' cssClass='e-caret-hide'
(beforeClose)="onBeforeCloseDropDownButton($event)" (beforeOpen)="onBeforeOpenDropDownButton()"></button>
}
@else{
<button #editbtn ejs-button id="editbtn" iconCss='e-icons e-edit' cssClass='e-caret-hide'></button>
}
</div>
</ng-template>

<ng-template #nodeTemplate let-data>
<div><label style="padding: 5px;">{{ data.addInfo.fieldDetails.label }}</label></div>
@switch (data.addInfo.chatWorkflowBlockId){
@case(chatWorkflowBlockTypeEnum.GetPickerInput){
@switch (data.addInfo.chatWorkflowEditorTypeId){
@case (chatWorkflowEditorTypeEnum.Boolean){
<ng-container>
<div><label style="padding: 5px;">{{ data.addInfo.fieldDetails.label }}</label></div>
<div><button type="button" ejs-button style="width: 85%;" class="e-btn e-success">Yes</button></div>
<div><button type="button" ejs-button style="width: 85%;" class="e-btn e-danger">No</button></div>
</ng-container>
}
@case (chatWorkflowEditorTypeEnum.Buttons){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<div *ngFor="let option of data.addInfo.fieldOptionDetails; let i = index" class="button-item">
@for(option of data.addInfo.fieldOptionDetails; track $index){
<button ejs-button cssClass="e-primary" style="width: 85%;">{{option.label}}</button>
</div>
}
</ng-container>
}
@case (chatWorkflowEditorTypeEnum.DropDown){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-dropdownlist [dataSource]="data.addInfo.fieldOptionDetails" [fields]="ddlFields"
[placeholder]="data.addInfo.fieldDetails.placeholder" cssClass="e-primary" width="85%">
</ejs-dropdownlist>
</ng-container>
}
@case(chatWorkflowEditorTypeEnum.MultiSelect){
<ng-container >
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-multiselect [dataSource]="data.addInfo.fieldOptionDetails" [fields]="ddlFields"
[placeholder]="data.addInfo.fieldDetails.placeholder"
[maximumSelectionLength]="data.addInfo.fieldDetails.fieldValidation.max" cssClass="e-primary" width="85%">
Expand All @@ -68,7 +70,6 @@
}
@case(chatWorkflowEditorTypeEnum.List){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-listview id='sample-list' [dataSource]='data.addInfo.fieldOptionDetails'
[fields]='ddlFields'></ejs-listview>
</ng-container>
Expand All @@ -79,49 +80,42 @@
@switch (data.addInfo.chatWorkflowEditorTypeId){
@case(chatWorkflowEditorTypeEnum.Text){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-textbox [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"></ejs-textbox>
</ng-container>
}
@case(chatWorkflowEditorTypeEnum.TextArea){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-textarea [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"
[maxLength]="data.addInfo.fieldDetails.fieldValidation.max"></ejs-textarea>
</ng-container>
}
@case(chatWorkflowEditorTypeEnum.Date){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-datepicker [placeholder]="data.addInfo.fieldDetails.placeholder" [readonly]="true"></ejs-datepicker>
</ng-container>
}
@case(chatWorkflowEditorTypeEnum.DateTime){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-datetimepicker [placeholder]="data.addInfo.fieldDetails.placeholder"
[readonly]="true"></ejs-datetimepicker>
</ng-container>
}
@case(chatWorkflowEditorTypeEnum.Number){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-numerictextbox format='n0' [min]="'data.addInfo.fieldDetails.fieldValidation.min'"
[max]="'data.addInfo.fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo.fieldDetails.placeholder"
readonly="true" floatLabelType='Auto'></ejs-numerictextbox>
</ng-container>
}
@case(chatWorkflowEditorTypeEnum.Decimal){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-numerictextbox [min]="'data.addInfo.fieldDetails.fieldValidation.min'"
[max]="'data.addInfo.fieldDetails.fieldValidation.max'" [placeholder]="data.addInfo.fieldDetails.placeholder"
readonly="true" floatLabelType='Auto'></ejs-numerictextbox>
</ng-container>
}
@case(chatWorkflowEditorTypeEnum.Regex){
<ng-container>
<div><label style="padding: 5px;">{{data.addInfo.fieldDetails.label}}</label></div>
<ejs-textbox [placeholder]="data.addInfo.fieldDetails.placeholder" readonly="true"></ejs-textbox>
</ng-container>
}
Expand Down
21 changes: 0 additions & 21 deletions src/app/components/workflow-diagram/workflow-diagram.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
36 changes: 28 additions & 8 deletions src/app/components/workflow-diagram/workflow-diagram.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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'
})
Expand All @@ -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',
}
];

Expand Down Expand Up @@ -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;
}
Expand All @@ -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 = {
Expand All @@ -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';

Expand Down
34 changes: 26 additions & 8 deletions src/app/components/workflow-sidebar/workflow-sidebar.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,15 @@
</ng-template>

<ng-template #removeButtonTemplate>
<div *ngFor="let button of buttons; let i = index" class="button-item">
<button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
<button ejs-button type="button" cssClass="e-danger remove-icon" (click)="removeButton(i)">✖</button>
</div>
@for(button of buttons; track $index){
<div class="button-item">
<button ejs-button cssClass="e-primary" style="width: 75%;">{{button.label}}</button>
@if(isEdit){
<button ejs-button type="button" iconCss='e-icons e-edit' (click)="editButton($index)"></button>
}
<button ejs-button type="button" iconCss='e-icons e-close' (click)="removeButton($index)"></button>
</div>
}
</ng-template>

<ng-template #addButtonTemplate let-isVisible="visibility">
Expand All @@ -50,9 +55,17 @@
<div>
<input #optionDescription type="text" placeholder="Option Description" class="button-input" [style.visibility]="isVisible ? 'visible' : 'hidden'" />
</div>
<div>
<button type="button" style="width: 100%;" (click)="addButton(optionLabel.value, optionValue.value, null, optionLabel, optionValue, null)" class="e-btn">Add Option</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){
Expand Down Expand Up @@ -157,7 +170,12 @@
</form>
</div>
<div class="center-align">
<button ejs-button id="close" (click)="onCloseSideBarClick()" class="e-btn close-btn">Save & Close</button>
@if(isEdit){
<button ejs-button id="update" (click)="onUpdateCloseSideBarClick()" class="e-btn close-btn">Update</button>
}
@else{
<button ejs-button id="close" (click)="onAddCloseSideBarClick()" class="e-btn close-btn">Save & Close</button>
}
<button ejs-button id="cancel" (click)="onCancelSideBarClick()" class="e-btn close-btn">Cancel</button>
</div>
</ejs-sidebar>
21 changes: 21 additions & 0 deletions src/app/components/workflow-sidebar/workflow-sidebar.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Loading

0 comments on commit a21d3fd

Please sign in to comment.