Improve Variables UI
This commit is contained in:
parent
269627adf1
commit
7f9f2d8fcd
|
|
@ -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>;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue