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

Update activity editor controls

Browse source
This commit is contained in:
Sipke Schoorstra 2021-04-03 21:58:56 +02:00
parent a7a373583c
commit fbc9d85d86
11 changed files with 86 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -75,6 +75,7 @@ export namespace Components {
"editorHeight": string;
"propertyDescriptor": ActivityPropertyDescriptor;
"propertyModel": ActivityDefinitionProperty;
"showLabel": boolean;
"singleLineMode": boolean;
}
interface ElsaScriptProperty {
@ -330,9 +331,10 @@ declare namespace LocalJSX {
interface ElsaPropertyEditor {
"context"?: string;
"editorHeight"?: string;
"onLiteralValueChanged"?: (event: CustomEvent<string>) => void;
"onDefaultSyntaxValueChanged"?: (event: CustomEvent<string>) => void;
"propertyDescriptor"?: ActivityPropertyDescriptor;
"propertyModel"?: ActivityDefinitionProperty;
"showLabel"?: boolean;
"singleLineMode"?: boolean;
}
interface ElsaScriptProperty {

46
src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-check-list-property/elsa-check-list-property.tsx
View file

@ -1,5 +1,5 @@
import {Component, h, Prop, State} from '@stencil/core';
import {ActivityDefinitionProperty, ActivityPropertyDescriptor} from "../../../../models";
import {ActivityDefinitionProperty, ActivityPropertyDescriptor, SyntaxNames} from "../../../../models";
import {parseJson} from "../../../../utils/utils";
@Component({
@ -11,42 +11,45 @@ export class ElsaCheckListProperty {
@Prop() propertyDescriptor: ActivityPropertyDescriptor;
@Prop() propertyModel: ActivityDefinitionProperty;
@State() currentValues?: Array<string>
@State() currentValue?: string;
monacoEditor: HTMLElsaMonacoElement;
async componentWillLoad() {
const expression = this.propertyModel.expressions['Literal'] || '[]';
this.currentValues = parseJson(expression) ?? [];
this.currentValue = this.propertyModel.expressions[SyntaxNames.Json] || '[]';
}
onCheckChanged(e: Event) {
const checkbox = (e.target as HTMLInputElement);
const checked = checkbox.checked;
const value = checkbox.value;
let newValue = parseJson(this.currentValue);
if(checked)
this.currentValues = [...this.currentValues, value].distinct();
newValue = [...newValue, value].distinct();
else
this.currentValues = this.currentValues.filter(x => x !== value);
newValue = newValue.filter(x => x !== value);
this.currentValue = JSON.stringify(newValue);
this.propertyModel.expressions[SyntaxNames.Json] = this.currentValue;
}
onDefaultSyntaxValueChanged(e: CustomEvent) {
this.currentValue = e.detail;
}
render() {
const propertyDescriptor = this.propertyDescriptor;
const propertyName = propertyDescriptor.name;
const fieldId = propertyName;
const fieldName = propertyName;
const fieldLabel = propertyDescriptor.label || propertyName;
const fieldHint = propertyDescriptor.hint;
const propertyModel = this.propertyModel;
const fieldId = propertyDescriptor.name;
const options = propertyDescriptor.options as Array<any>;
const values = this.currentValues.map(x => x ? x.trim() : '').filter(x => x.length > 0);
const valuesJson = JSON.stringify(values);
const values = parseJson(this.currentValue) || [];
return (
<div>
<label htmlFor={fieldId} class="block text-sm font-medium text-gray-700">
{fieldLabel}
</label>
<elsa-property-editor propertyDescriptor={propertyDescriptor}
propertyModel={propertyModel}
onDefaultSyntaxValueChanged={e => this.onDefaultSyntaxValueChanged(e)}
editor-height="2.75em"
single-line={true}>
<div class="max-w-lg space-y-3 my-4">
{options.map((option, index) => {
const inputId = `${fieldId}_${index}`;
@ -64,10 +67,7 @@ export class ElsaCheckListProperty {
);
})}
</div>
{fieldHint ? <p class="mt-2 text-sm text-gray-500">{fieldHint}</p> : undefined}
<input type="hidden" name={fieldName} value={valuesJson}/>
</div>
)
</elsa-property-editor>
);
}
}

26
src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-checkbox-property/elsa-checkbox-property.tsx
View file

@ -1,5 +1,5 @@
import {Component, h, Prop, State} from '@stencil/core';
import {ActivityDefinitionProperty, ActivityPropertyDescriptor} from "../../../../models";
import {ActivityDefinitionProperty, ActivityPropertyDescriptor, SyntaxNames} from "../../../../models";
@Component({
tag: 'elsa-checkbox-property',
@ -11,29 +11,39 @@ export class ElsaCheckBoxProperty {
@Prop() propertyDescriptor: ActivityPropertyDescriptor;
@Prop() propertyModel: ActivityDefinitionProperty;
@State() isChecked: boolean
monacoEditor: HTMLElsaMonacoElement;
async componentWillLoad() {
this.isChecked = (this.propertyModel.expressions['Literal'] || '').toLowerCase() == 'true';
this.isChecked = (this.propertyModel.expressions[SyntaxNames.Literal] || '').toLowerCase() == 'true';
}
onCheckChanged(e: Event) {
const checkbox = (e.target as HTMLInputElement);
this.isChecked = checkbox.checked;
const defaultSyntax = this.propertyDescriptor.defaultSyntax || SyntaxNames.Literal;
this.propertyModel.expressions[defaultSyntax] = this.isChecked.toString();
}
onDefaultSyntaxValueChanged(e: CustomEvent) {
this.isChecked = (e.detail || '').toLowerCase() == 'true';
}
render() {
const propertyDescriptor = this.propertyDescriptor;
const propertyModel = this.propertyModel;
const propertyName = propertyDescriptor.name;
const fieldId = propertyName;
const fieldName = propertyName;
const fieldLabel = propertyDescriptor.label || propertyName;
const fieldHint = propertyDescriptor.hint;
const isChecked = this.isChecked;
return (
<div>
<div class="max-w-lg space-y-3 my-4">
<elsa-property-editor propertyDescriptor={propertyDescriptor}
propertyModel={propertyModel}
onDefaultSyntaxValueChanged={e => this.onDefaultSyntaxValueChanged(e)}
editor-height="2.75em"
single-line={true}
showLabel={false}>
<div class="max-w-lg">
<div class="relative flex items-start">
<div class="flex items-center h-5">
<input id={fieldId} name={fieldName} type="checkbox" checked={isChecked} value={'true'} onChange={e => this.onCheckChanged(e)} class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"/>
@ -43,9 +53,7 @@ export class ElsaCheckBoxProperty {
</div>
</div>
</div>
{fieldHint ? <p class="mt-2 text-sm text-gray-500">{fieldHint}</p> : undefined}
</div>
</elsa-property-editor>
)
}
}

35
src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-dropdown-property/elsa-dropdown-property.tsx
View file

@ -1,5 +1,5 @@
import {Component, h, Prop, State} from '@stencil/core';
import {ActivityDefinitionProperty, ActivityPropertyDescriptor} from "../../../../models";
import {ActivityDefinitionProperty, ActivityPropertyDescriptor, SyntaxNames} from "../../../../models";
@Component({
tag: 'elsa-dropdown-property',
@ -13,40 +13,43 @@ export class ElsaDropdownProperty {
@State() currentValue?: string;
async componentWillLoad() {
this.currentValue = this.propertyModel.expressions['Literal'] || '';
const defaultSyntax = this.propertyDescriptor.defaultSyntax || SyntaxNames.Literal;
this.currentValue = this.propertyModel.expressions[defaultSyntax] || '';
}
onChanged(e: Event) {
onChange(e: Event) {
const select = (e.target as HTMLSelectElement);
this.currentValue = select.value;
const defaultSyntax = this.propertyDescriptor.defaultSyntax || SyntaxNames.Literal;
this.propertyModel.expressions[defaultSyntax] = this.currentValue = select.value;
}
onDefaultSyntaxValueChanged(e: CustomEvent) {
this.currentValue = e.detail;
}
render() {
const propertyDescriptor = this.propertyDescriptor;
const propertyModel = this.propertyModel;
const propertyName = propertyDescriptor.name;
const fieldId = propertyName;
const fieldName = propertyName;
const fieldLabel = propertyDescriptor.label || propertyName;
const fieldHint = propertyDescriptor.hint;
const options = propertyDescriptor.options as Array<any> || [];
const currentValue = this.currentValue;
return (
<div>
<label htmlFor={fieldId} class="block text-sm font-medium text-gray-700">
{fieldLabel}
</label>
<select id={fieldId} name={fieldName} class="mt-1 block focus:ring-blue-500 focus:border-blue-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
<elsa-property-editor propertyDescriptor={propertyDescriptor}
propertyModel={propertyModel}
onDefaultSyntaxValueChanged={e => this.onDefaultSyntaxValueChanged(e)}
editor-height="2.75em"
single-line={true}>
<select id={fieldId} name={fieldName} onChange={e => this.onChange(e)} class="mt-1 block focus:ring-blue-500 focus:border-blue-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md">
{options.map(option => {
const value = option.value || option;
const text = option.text || option;
return <option value={value} selected={value === currentValue}>{text}</option>;
})}
</select>
{fieldHint ? <p class="mt-2 text-sm text-gray-500">{fieldHint}</p> : undefined}
</div>
)
</elsa-property-editor>
);
}
}

4
src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-multi-line-property/elsa-multi-line-property.tsx
View file

@ -29,7 +29,7 @@ export class ElsaMultiLineProperty {
this.propertyModel.expressions['Literal'] = this.currentValue = input.value;
}
onLiteralValueChanged(e: CustomEvent) {
onDefaultSyntaxValueChanged(e: CustomEvent) {
this.currentValue = e.detail;
}
@ -52,7 +52,7 @@ export class ElsaMultiLineProperty {
return (
<elsa-property-editor propertyDescriptor={propertyDescriptor}
propertyModel={propertyModel}
onLiteralValueChanged={e => this.onLiteralValueChanged(e)}
onDefaultSyntaxValueChanged={e => this.onDefaultSyntaxValueChanged(e)}
editor-height={editorHeight.propertyEditor}
context={context}>
<textarea id={fieldId} name={fieldName} value={value} onChange={e => this.onChange(e)} class="focus:ring-blue-500 focus:border-blue-500 block w-full min-w-0 rounded-md sm:text-sm border-gray-300" rows={editorHeight.textArea}/>

4
src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-multi-text-property/elsa-multi-text-property.tsx
View file

@ -22,7 +22,7 @@ export class ElsaMultiTextProperty {
this.propertyModel.expressions[SyntaxNames.Json] = this.currentValue;
}
onLiteralValueChanged(e: CustomEvent) {
onDefaultSyntaxValueChanged(e: CustomEvent) {
this.currentValue = e.detail;
}
@ -37,7 +37,7 @@ export class ElsaMultiTextProperty {
return (
<elsa-property-editor propertyDescriptor={propertyDescriptor}
propertyModel={propertyModel}
onLiteralValueChanged={e => this.onLiteralValueChanged(e)}
onDefaultSyntaxValueChanged={e => this.onDefaultSyntaxValueChanged(e)}
editor-height="2em"
single-line={true}>
<elsa-input-tags values={values} fieldId={fieldId} fieldName={fieldName} onValueChanged={e => this.onValueChanged(e.detail)}/>

26
src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-property-editor/elsa-property-editor.tsx
View file

@ -10,12 +10,13 @@ import {enter, leave, toggle} from 'el-transition'
})
export class ElsaPropertyEditor {
@Event() literalValueChanged: EventEmitter<string>;
@Event() defaultSyntaxValueChanged: EventEmitter<string>;
@Prop() propertyDescriptor: ActivityPropertyDescriptor;
@Prop() propertyModel: ActivityDefinitionProperty;
@Prop({attribute: 'editor-height', reflect: true}) editorHeight: string = '6em';
@Prop({attribute: 'single-line', reflect: true}) singleLineMode: boolean = false;
@Prop({attribute: 'context', reflect: true}) context?: string;
@Prop() showLabel: boolean = true;
@State() selectedSyntax?: string;
@State() currentValue?: string;
@ -95,23 +96,18 @@ export class ElsaPropertyEditor {
if (this.selectedSyntax != this.defaultSyntax)
return;
this.literalValueChanged.emit(e.detail);
this.defaultSyntaxValueChanged.emit(e.detail);
}
render() {
const propertyDescriptor = this.propertyDescriptor;
const propertyName = propertyDescriptor.name;
const fieldId = propertyName;
const fieldLabel = propertyDescriptor.label || propertyName;
const fieldHint = propertyDescriptor.hint;
return <div>
<div class="mb-1">
<div class="flex">
<div class="flex-1">
<label htmlFor={fieldId} class="block text-sm font-medium text-gray-700">
{fieldLabel}
</label>
{this.renderLabel()}
</div>
{this.renderContextMenuWidget()}
</div>
@ -121,6 +117,20 @@ export class ElsaPropertyEditor {
</div>
}
renderLabel() {
if (!this.showLabel)
return undefined;
const propertyDescriptor = this.propertyDescriptor;
const propertyName = propertyDescriptor.name;
const fieldId = propertyName;
const fieldLabel = propertyDescriptor.label || propertyName;
return <label htmlFor={fieldId} class="block text-sm font-medium text-gray-700">
{fieldLabel}
</label>;
}
renderContextMenuWidget() {
if (this.supportedSyntaxes.length == 0)
return undefined;

4
src/designer/elsa-workflows-studio/src/components/editors/properties/elsa-single-line-property/elsa-single-line-property.tsx
View file

@ -23,7 +23,7 @@ export class ElsaSingleLineProperty {
this.currentValue = this.propertyModel.expressions[defaultSyntax] || '';
}
onLiteralValueChanged(e: CustomEvent) {
onDefaultSyntaxValueChanged(e: CustomEvent) {
this.currentValue = e.detail;
}
@ -43,7 +43,7 @@ export class ElsaSingleLineProperty {
return (
<elsa-property-editor propertyDescriptor={propertyDescriptor}
propertyModel={propertyModel}
onLiteralValueChanged={e => this.onLiteralValueChanged(e)}
onDefaultSyntaxValueChanged={e => this.onDefaultSyntaxValueChanged(e)}
editor-height="2.75em"
single-line={true}>
<input type="text" id={fieldId} name={fieldName} value={value} onChange={e => this.onChange(e)} class="focus:ring-blue-500 focus:border-blue-500 block w-full min-w-0 rounded-md sm:text-sm border-gray-300"/>

2
src/designer/elsa-workflows-studio/src/property-display-drivers/check-list-driver.tsx
View file

@ -11,7 +11,5 @@ export class CheckListDriver implements PropertyDisplayDriver {
}
update(activity: ActivityModel, property: ActivityPropertyDescriptor, form: FormData) {
const value = form.get(property.name) as string;
setActivityModelProperty(activity, property.name, value, 'Json');
}
}

2
src/designer/elsa-workflows-studio/src/property-display-drivers/checkbox-driver.tsx
View file

@ -11,7 +11,5 @@ export class CheckboxDriver implements PropertyDisplayDriver {
}
update(activity: ActivityModel, property: ActivityPropertyDescriptor, form: FormData) {
const value = form.get(property.name) as string || 'false';
setActivityModelProperty(activity, property.name, value, 'Literal');
}
}

2
src/designer/elsa-workflows-studio/src/property-display-drivers/dropdown-driver.tsx
View file

@ -11,7 +11,5 @@ export class DropdownDriver implements PropertyDisplayDriver {
}
update(activity: ActivityModel, property: ActivityPropertyDescriptor, form: FormData) {
const value = form.get(property.name) as string;
setActivityModelProperty(activity, property.name, value, 'Literal');
}
}