Improve Variables UI

This commit is contained in:
Sipke Schoorstra 2022-11-30 14:15:48 +01:00
parent 269627adf1
commit 7f9f2d8fcd
3 changed files with 10 additions and 44 deletions

View file

@ -136,15 +136,6 @@ export namespace Components {
"workflowDefinition": WorkflowDefinition;
"zoomToFit": () => Promise<void>;
}
interface ElsaFlowchartEditor {
"export": () => Promise<Activity>;
"monacoLibPath": string;
"newRoot": () => Promise<Activity>;
}
interface ElsaFlowchartEditorToolbar {
"autoLayout": (direction: "TB" | "BT" | "LR" | "RL") => Promise<void>;
"zoomToFit": () => Promise<void>;
}
interface ElsaFormPanel {
"actions": Array<PanelActionDefinition>;
"mainTitle": string;
@ -439,18 +430,6 @@ declare global {
prototype: HTMLElsaFlowchartElement;
new (): HTMLElsaFlowchartElement;
};
interface HTMLElsaFlowchartEditorElement extends Components.ElsaFlowchartEditor, HTMLStencilElement {
}
var HTMLElsaFlowchartEditorElement: {
prototype: HTMLElsaFlowchartEditorElement;
new (): HTMLElsaFlowchartEditorElement;
};
interface HTMLElsaFlowchartEditorToolbarElement extends Components.ElsaFlowchartEditorToolbar, HTMLStencilElement {
}
var HTMLElsaFlowchartEditorToolbarElement: {
prototype: HTMLElsaFlowchartEditorToolbarElement;
new (): HTMLElsaFlowchartEditorToolbarElement;
};
interface HTMLElsaFormPanelElement extends Components.ElsaFormPanel, HTMLStencilElement {
}
var HTMLElsaFormPanelElement: {
@ -710,8 +689,6 @@ declare global {
"elsa-dropdown-input": HTMLElsaDropdownInputElement;
"elsa-flow-switch-editor": HTMLElsaFlowSwitchEditorElement;
"elsa-flowchart": HTMLElsaFlowchartElement;
"elsa-flowchart-editor": HTMLElsaFlowchartEditorElement;
"elsa-flowchart-editor-toolbar": HTMLElsaFlowchartEditorToolbarElement;
"elsa-form-panel": HTMLElsaFormPanelElement;
"elsa-home-page": HTMLElsaHomePageElement;
"elsa-input-control-switch": HTMLElsaInputControlSwitchElement;
@ -838,13 +815,6 @@ declare namespace LocalJSX {
"onGraphUpdated"?: (event: CustomEvent<GraphUpdatedArgs>) => void;
"workflowDefinition"?: WorkflowDefinition;
}
interface ElsaFlowchartEditor {
"monacoLibPath"?: string;
}
interface ElsaFlowchartEditorToolbar {
"autoLayout"?: (direction: "TB" | "BT" | "LR" | "RL") => Promise<void>;
"zoomToFit"?: () => Promise<void>;
}
interface ElsaFormPanel {
"actions"?: Array<PanelActionDefinition>;
"mainTitle"?: string;
@ -1062,8 +1032,6 @@ declare namespace LocalJSX {
"elsa-dropdown-input": ElsaDropdownInput;
"elsa-flow-switch-editor": ElsaFlowSwitchEditor;
"elsa-flowchart": ElsaFlowchart;
"elsa-flowchart-editor": ElsaFlowchartEditor;
"elsa-flowchart-editor-toolbar": ElsaFlowchartEditorToolbar;
"elsa-form-panel": ElsaFormPanel;
"elsa-home-page": ElsaHomePage;
"elsa-input-control-switch": ElsaInputControlSwitch;
@ -1128,8 +1096,6 @@ declare module "@stencil/core" {
"elsa-dropdown-input": LocalJSX.ElsaDropdownInput & JSXBase.HTMLAttributes<HTMLElsaDropdownInputElement>;
"elsa-flow-switch-editor": LocalJSX.ElsaFlowSwitchEditor & JSXBase.HTMLAttributes<HTMLElsaFlowSwitchEditorElement>;
"elsa-flowchart": LocalJSX.ElsaFlowchart & JSXBase.HTMLAttributes<HTMLElsaFlowchartElement>;
"elsa-flowchart-editor": LocalJSX.ElsaFlowchartEditor & JSXBase.HTMLAttributes<HTMLElsaFlowchartEditorElement>;
"elsa-flowchart-editor-toolbar": LocalJSX.ElsaFlowchartEditorToolbar & JSXBase.HTMLAttributes<HTMLElsaFlowchartEditorToolbarElement>;
"elsa-form-panel": LocalJSX.ElsaFormPanel & JSXBase.HTMLAttributes<HTMLElsaFormPanelElement>;
"elsa-home-page": LocalJSX.ElsaHomePage & JSXBase.HTMLAttributes<HTMLElsaHomePageElement>;
"elsa-input-control-switch": LocalJSX.ElsaInputControlSwitch & JSXBase.HTMLAttributes<HTMLElsaInputControlSwitchElement>;

View file

@ -26,7 +26,7 @@ export class VariableEditorDialogContent {
const variableTypeName = variable.typeName;
const availableTypes: Array<VariableDescriptor> = descriptorsStore.variableDescriptors;
const groupedVariableTypes = _.groupBy(availableTypes, x => x.category);
const storageDrivers: Array<StorageDriverDescriptor> = [{id: null, displayName: '-'}, ...descriptorsStore.storageDrivers];
const storageDrivers: Array<StorageDriverDescriptor> = descriptorsStore.storageDrivers;
return (
<div>

View file

@ -27,18 +27,18 @@ export class VariablePickerInput {
currentValue = defaultValue ? defaultValue.toString() : undefined;
}
debugger;
return (
<WorkflowDefinitionTunnel.Consumer>
{({workflowDefinition}) => {
const variables = workflowDefinition?.variables ?? [];
return<FormEntry fieldId={fieldId} label={displayName} hint={description}>
let variables: Variable[] = workflowDefinition?.variables ?? [];
variables = [null, ...variables];
return <FormEntry fieldId={fieldId} label={displayName} hint={description}>
<select id={fieldId} name={fieldName} onChange={e => this.onChange(e)}>
{variables.map((variable: Variable) => {
const isSelected = variable.name == currentValue?.name;
const json = JSON.stringify(variable);
return <option value={variable.name} selected={isSelected} data-variable={json}>{variable.name}</option>;
const variableName = variable?.name;
const isSelected = variableName == currentValue?.name;
const json = variable ? JSON.stringify(variable) : '';
return <option value={variableName} selected={isSelected} data-variable={json}>{variableName}</option>;
})}
</select>
</FormEntry>
@ -48,9 +48,9 @@ export class VariablePickerInput {
}
private onChange = (e: Event) => {
debugger;
const inputElement = e.target as HTMLSelectElement;
const variable = inputElement.selectedOptions.length == 0 ? null : JSON.parse(inputElement.selectedOptions[0].dataset.variable);
const json = inputElement.selectedOptions[0].dataset.variable;
const variable = inputElement.selectedIndex <= 0 ? null : JSON.parse(json);
this.inputContext.inputChanged(variable, SyntaxNames.Literal);
}
}