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

Add multi-line input control

Browse source
This commit is contained in:
Sipke Schoorstra 2022-01-04 18:11:21 +01:00
parent 09689d8491
commit d172470c00
9 changed files with 96 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/api/Elsa.Api/Endpoints/ActivityDescriptors/List.cs
View file

@ -20,7 +20,11 @@ public static partial class ActivityDescriptors
return Results.Json(model, new JsonSerializerOptions
{
Converters = { new TypeJsonConverter(wellKnownTypeRegistry) },
Converters =
{
new JsonStringEnumConverter(),
new TypeJsonConverter(wellKnownTypeRegistry)
},
PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingDefault
});

6
src/api/Elsa.Api/Endpoints/TriggerDescriptors/List.cs
View file

@ -20,7 +20,11 @@ public static partial class TriggerDescriptors
return Results.Json(model, new JsonSerializerOptions
{
Converters = { new TypeJsonConverter(wellKnownTypeRegistry) },
Converters =
{
new JsonStringEnumConverter(),
new TypeJsonConverter(wellKnownTypeRegistry)
},
PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingDefault
});

7
src/core/Elsa.Management/ActivityInputOptions/EditorHeight.cs Normal file
View file

@ -0,0 +1,7 @@
namespace Elsa.Management.ActivityInputOptions;
public enum EditorHeight
{
Default,
Large
}

3
src/core/Elsa.Management/ActivityInputOptions/MultiLineOptions.cs Normal file
View file

@ -0,0 +1,3 @@
namespace Elsa.Management.ActivityInputOptions;
public record MultiLineOptions(EditorHeight EditorHeight);

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

@ -71,6 +71,9 @@ export namespace Components {
"show": (animate?: boolean) => Promise<void>;
"size": string;
}
interface ElsaMultiLineInput {
"inputContext": NodeInputContext;
}
interface ElsaPager {
"page": number;
"pageSize": number;
@ -206,6 +209,12 @@ declare global {
prototype: HTMLElsaModalDialogElement;
new (): HTMLElsaModalDialogElement;
};
interface HTMLElsaMultiLineInputElement extends Components.ElsaMultiLineInput, HTMLStencilElement {
}
var HTMLElsaMultiLineInputElement: {
prototype: HTMLElsaMultiLineInputElement;
new (): HTMLElsaMultiLineInputElement;
};
interface HTMLElsaPagerElement extends Components.ElsaPager, HTMLStencilElement {
}
var HTMLElsaPagerElement: {
@ -324,6 +333,7 @@ declare global {
"elsa-flowchart": HTMLElsaFlowchartElement;
"elsa-form-panel": HTMLElsaFormPanelElement;
"elsa-modal-dialog": HTMLElsaModalDialogElement;
"elsa-multi-line-input": HTMLElsaMultiLineInputElement;
"elsa-pager": HTMLElsaPagerElement;
"elsa-panel": HTMLElsaPanelElement;
"elsa-radio-list-input": HTMLElsaRadioListInputElement;
@ -394,6 +404,9 @@ declare namespace LocalJSX {
"onShown"?: (event: CustomEvent<any>) => void;
"size"?: string;
}
interface ElsaMultiLineInput {
"inputContext"?: NodeInputContext;
}
interface ElsaPager {
"onPaginated"?: (event: CustomEvent<PagerData>) => void;
"page"?: number;
@ -486,6 +499,7 @@ declare namespace LocalJSX {
"elsa-flowchart": ElsaFlowchart;
"elsa-form-panel": ElsaFormPanel;
"elsa-modal-dialog": ElsaModalDialog;
"elsa-multi-line-input": ElsaMultiLineInput;
"elsa-pager": ElsaPager;
"elsa-panel": ElsaPanel;
"elsa-radio-list-input": ElsaRadioListInput;
@ -519,6 +533,7 @@ declare module "@stencil/core" {
"elsa-flowchart": LocalJSX.ElsaFlowchart & JSXBase.HTMLAttributes<HTMLElsaFlowchartElement>;
"elsa-form-panel": LocalJSX.ElsaFormPanel & JSXBase.HTMLAttributes<HTMLElsaFormPanelElement>;
"elsa-modal-dialog": LocalJSX.ElsaModalDialog & JSXBase.HTMLAttributes<HTMLElsaModalDialogElement>;
"elsa-multi-line-input": LocalJSX.ElsaMultiLineInput & JSXBase.HTMLAttributes<HTMLElsaMultiLineInputElement>;
"elsa-pager": LocalJSX.ElsaPager & JSXBase.HTMLAttributes<HTMLElsaPagerElement>;
"elsa-panel": LocalJSX.ElsaPanel & JSXBase.HTMLAttributes<HTMLElsaPanelElement>;
"elsa-radio-list-input": LocalJSX.ElsaRadioListInput & JSXBase.HTMLAttributes<HTMLElsaRadioListInputElement>;

41
src/designer/elsa-workflows-designer/src/components/inputs/multi-line.tsx Normal file
View file

@ -0,0 +1,41 @@
import {Component, Prop, h} from '@stencil/core';
import {LiteralExpression, SyntaxNames} from "../../models";
import {NodeInputContext} from "../../services/node-input-driver";
import {getInputPropertyValue} from "../../utils";
@Component({
tag: 'elsa-multi-line-input',
shadow: false
})
export class MultiLineInput {
@Prop() inputContext: NodeInputContext;
public render() {
const inputContext = this.inputContext;
const inputProperty = inputContext.inputDescriptor;
const fieldName = inputProperty.name;
const fieldId = inputProperty.name;
const input = getInputPropertyValue(inputContext);
const options = inputProperty.options || {};
const editorHeight = this.getEditorHeight(options);
const value = (input?.expression as LiteralExpression)?.value;
return <textarea name={fieldName} id={fieldId} value={value} rows={editorHeight.textArea} onChange={this.onPropertyEditorChanged}/>
}
private getEditorHeight = (options: any) => {
debugger;
const editorHeightName = options.editorHeight || 'Default';
switch (editorHeightName) {
case 'Large':
return {propertyEditor: '20em', textArea: 10}
default:
return {propertyEditor: '15em', textArea: 6}
}
};
private onPropertyEditorChanged = (e: Event) => {
const inputElement = e.target as HTMLTextAreaElement;
this.inputContext.inputChanged(inputElement.value, SyntaxNames.Literal);
};
}

4
src/designer/elsa-workflows-designer/src/global/tailwind.css
View file

@ -59,6 +59,10 @@ select {
@apply mt-1 block focus:ring-blue-500 focus:border-blue-500 w-full shadow-sm sm:text-sm border-gray-300 rounded-md;
}
textarea {
@apply focus:ring-blue-500 focus:border-blue-500 block w-full min-w-0 rounded-md sm:text-sm border-gray-300;
}
/* Tables */
elsa-modal-dialog table {
@apply min-w-full;

1
src/designer/elsa-workflows-designer/src/services/input-control-registry.tsx
View file

@ -11,6 +11,7 @@ export class InputControlRegistry {
constructor() {
this.add('single-line', c => <elsa-single-line-input inputContext={c}/>);
this.add('multi-line', c => <elsa-multi-line-input inputContext={c}/>);
this.add('dropdown', c => <elsa-dropdown-input inputContext={c}/>);
this.add('check-list', c => <elsa-check-list-input inputContext={c}/>);
this.add('radio-list', c => <elsa-radio-list-input inputContext={c}/>);

16
src/samples/aspnet/Elsa.Samples.Web1/Activities/WriteLines.cs
View file

@ -1,15 +1,18 @@
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Reflection;
using Elsa.Attributes;
using Elsa.Management.ActivityInputOptions;
using Elsa.Management.Models;
using Elsa.Management.Services;
using Elsa.Models;
namespace Elsa.Samples.Web1.Activities;
[Activity("Samples.WriteLines")]
[Category("Samples")]
public class WriteLines : Activity
public class WriteLines : Activity, IActivityPropertyOptionsProvider
{
public WriteLines()
{
@ -35,6 +38,9 @@ public class WriteLines : Activity
[Input(Options = new[] { "Normal", "Bold", "Italic" }, UIHint = InputUIHints.RadioList)]
public Input<string> Format { get; set; } = default!;
[Input(OptionsProvider = typeof(WriteLines), UIHint = InputUIHints.MultiLine)]
public Input<string> Body { get; set; } = default!;
protected override void Execute(ActivityExecutionContext context)
{
@ -43,4 +49,12 @@ public class WriteLines : Activity
foreach (var line in lines)
Console.WriteLine(line);
}
public object? GetOptions(PropertyInfo property)
{
if (property.Name == nameof(Body))
return new MultiLineOptions(EditorHeight.Large);
return null;
}
}