SemianiakaVY/elsa-core
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

Incremental work on variables editor

Browse source
This commit is contained in:
Sipke Schoorstra 2022-06-04 21:03:40 +02:00
parent 2a3f8a13ba
commit 2ffdec1b61
3 changed files with 67 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/designer/elsa-workflows-designer/src/components.d.ts vendored
View file

@ -184,6 +184,8 @@ export namespace Components {
"tooltipContent": any;
"tooltipPosition"?: string;
}
interface ElsaVariablesEditor {
}
interface ElsaWorkflowDefinitionBrowser {
"hide": () => Promise<void>;
"show": () => Promise<void>;
@ -441,6 +443,12 @@ declare global {
prototype: HTMLElsaTooltipElement;
new (): HTMLElsaTooltipElement;
};
interface HTMLElsaVariablesEditorElement extends Components.ElsaVariablesEditor, HTMLStencilElement {
}
var HTMLElsaVariablesEditorElement: {
prototype: HTMLElsaVariablesEditorElement;
new (): HTMLElsaVariablesEditorElement;
};
interface HTMLElsaWorkflowDefinitionBrowserElement extends Components.ElsaWorkflowDefinitionBrowser, HTMLStencilElement {
}
var HTMLElsaWorkflowDefinitionBrowserElement: {
@ -551,6 +559,7 @@ declare global {
"elsa-studio": HTMLElsaStudioElement;
"elsa-switch-editor": HTMLElsaSwitchEditorElement;
"elsa-tooltip": HTMLElsaTooltipElement;
"elsa-variables-editor": HTMLElsaVariablesEditorElement;
"elsa-workflow-definition-browser": HTMLElsaWorkflowDefinitionBrowserElement;
"elsa-workflow-definition-editor": HTMLElsaWorkflowDefinitionEditorElement;
"elsa-workflow-definition-editor-toolbox": HTMLElsaWorkflowDefinitionEditorToolboxElement;
@ -728,6 +737,8 @@ declare namespace LocalJSX {
"tooltipContent"?: any;
"tooltipPosition"?: string;
}
interface ElsaVariablesEditor {
}
interface ElsaWorkflowDefinitionBrowser {
"onWorkflowDefinitionSelected"?: (event: CustomEvent<WorkflowDefinitionSummary>) => void;
}
@ -814,6 +825,7 @@ declare namespace LocalJSX {
"elsa-studio": ElsaStudio;
"elsa-switch-editor": ElsaSwitchEditor;
"elsa-tooltip": ElsaTooltip;
"elsa-variables-editor": ElsaVariablesEditor;
"elsa-workflow-definition-browser": ElsaWorkflowDefinitionBrowser;
"elsa-workflow-definition-editor": ElsaWorkflowDefinitionEditor;
"elsa-workflow-definition-editor-toolbox": ElsaWorkflowDefinitionEditorToolbox;
@ -864,6 +876,7 @@ declare module "@stencil/core" {
"elsa-studio": LocalJSX.ElsaStudio & JSXBase.HTMLAttributes<HTMLElsaStudioElement>;
"elsa-switch-editor": LocalJSX.ElsaSwitchEditor & JSXBase.HTMLAttributes<HTMLElsaSwitchEditorElement>;
"elsa-tooltip": LocalJSX.ElsaTooltip & JSXBase.HTMLAttributes<HTMLElsaTooltipElement>;
"elsa-variables-editor": LocalJSX.ElsaVariablesEditor & JSXBase.HTMLAttributes<HTMLElsaVariablesEditorElement>;
"elsa-workflow-definition-browser": LocalJSX.ElsaWorkflowDefinitionBrowser & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionBrowserElement>;
"elsa-workflow-definition-editor": LocalJSX.ElsaWorkflowDefinitionEditor & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorElement>;
"elsa-workflow-definition-editor-toolbox": LocalJSX.ElsaWorkflowDefinitionEditorToolbox & JSXBase.HTMLAttributes<HTMLElsaWorkflowDefinitionEditorToolboxElement>;

53
src/designer/elsa-workflows-designer/src/components/designer/variables-editor/variables-editor.tsx Normal file
View file

@ -0,0 +1,53 @@
import {Component, h} from "@stencil/core";
import {DeleteIcon, EditIcon} from "../../icons/tooling";
@Component({
tag: 'elsa-variables-editor',
shadow: false
})
export class VariablesEditor {
render() {
return (
<div>
<div class="flex justify-end m-4">
<button class="btn btn-primary">Add variable</button>
</div>
<div class="align-middle inline-block min-w-full border-b border-gray-200">
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Value</th>
<th scope="col"/>
</tr>
</thead>
<tbody>
<tr>
<td class="whitespace-nowrap">CurrentValue</td>
<td class="whitespace-nowrap">String</td>
<td></td>
<td class="pr-6">
<elsa-context-menu
menuItems={[
{text: 'Edit', clickHandler: e => this.onEditClick(e), icon: <EditIcon/>},
{text: 'Delete', clickHandler: e => this.onDeleteClick(e), icon: <DeleteIcon/>},
]}
/>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
private onEditClick = (e: Event) => {
e.preventDefault();
};
private onDeleteClick = (e: Event) => {
e.preventDefault();
};
}

2
src/designer/elsa-workflows-designer/src/components/designer/workflow-definition-editor/workflow-definition-properties-editor.tsx
View file

@ -148,7 +148,7 @@ export class WorkflowDefinitionPropertiesEditor {
private renderVariablesTab = () => {
return <div>
TODO: Variables editor
<elsa-variables-editor />
</div>
};