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

Fix multi-text input control

Browse source
This commit is contained in:
Sipke Schoorstra 2021-05-11 13:26:35 +02:00
parent e8f0449c02
commit e065e16b5a
7 changed files with 104 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/activities/Elsa.Activities.Rebus/Consumers/MessageConsumer.cs
View file

@ -12,10 +12,10 @@ namespace Elsa.Activities.Rebus.Consumers
public class MessageConsumer<T> : IHandleMessages<T> where T : notnull
{
// TODO: Design multi-tenancy.
private const string TenantId = default;
private const string? TenantId = default;
private readonly IMediator _mediator;
public MessageConsumer(IMediator mediator)
{
_mediator = mediator;
@ -26,8 +26,8 @@ namespace Elsa.Activities.Rebus.Consumers
var correlationId = MessageContext.Current.TransportMessage.Headers.GetValueOrNull(Headers.CorrelationId);
await _mediator.Send(new TriggerWorkflowsRequest(
nameof(RebusMessageReceived),
new MessageReceivedBookmark {MessageType = message.GetType().Name, CorrelationId = correlationId},
new MessageReceivedBookmark {MessageType = message.GetType().Name},
new MessageReceivedBookmark { MessageType = message.GetType().Name, CorrelationId = correlationId },
new MessageReceivedBookmark { MessageType = message.GetType().Name },
message,
correlationId,
default,

38
src/designer/elsa-workflows-studio/src/components/controls/elsa-input-tags/elsa-input-tags-dropdown.tsx
View file

@ -15,37 +15,38 @@ export class ElsaInputTagsDropdown {
@Prop() dropdownValues?: Array<SelectListItem> = [];
@Event({ bubbles: true }) valueChanged: EventEmitter<Array<string | SelectListItem>>;
@State() currentValues?: Array<SelectListItem> = [];
@State() dropdownTags?: Array<SelectListItem> = [];
@Watch('values')
valuesChangedHandler(newValue: Array<string | SelectListItem>) {
let values: Array<SelectListItem> = [];
newValue.forEach(value => {
this.dropdownValues.forEach(tag => {
if (value === tag.value) {
values.push(tag);
}
const dropdownValues = this.dropdownValues || [];
if(!!newValue) {
newValue.forEach(value => {
dropdownValues.forEach(tag => {
if (value === tag.value) {
values.push(tag);
}
})
})
})
}
this.currentValues = values || [];
}
componentWillLoad() {
this.dropdownTags = this.dropdownValues;
const dropdownValues = this.dropdownValues || [];
let values: Array<SelectListItem> = [];
this.values.forEach(value => {
this.dropdownValues.forEach(tag => {
dropdownValues.forEach(tag => {
if (value === tag.value) {
values.push(tag);
}
})
})
this.currentValues = values;
const tagsToRemove: Array<string> = this.currentValues.map(tag => tag.value);
this.dropdownTags = this.dropdownTags.filter(tag => !tagsToRemove.includes(tag.value));
}
async onTagSelected(e: any) {
@ -64,7 +65,6 @@ export class ElsaInputTagsDropdown {
values.push(currentTag);
this.currentValues = values.distinct();
input.value = "Add";
this.dropdownTags = this.dropdownTags.filter(tag => tag.value !== currentTag.value);
await this.valueChanged.emit(values);
}
@ -72,12 +72,12 @@ export class ElsaInputTagsDropdown {
e.preventDefault();
this.currentValues = this.currentValues.filter(tag => tag.value !== currentTag.value);
this.dropdownTags = [...this.dropdownTags, currentTag].sort((tag1, tag2) => tag1.value.localeCompare(tag2.value));
await this.valueChanged.emit(this.currentValues);
}
render() {
let values: Array<SelectListItem> = this.currentValues || [];
let dropdownItems = this.dropdownValues.filter(x => values.findIndex(y => y.value === x.value) < 0);
if (!Array.isArray(values))
values = [];
@ -95,13 +95,11 @@ export class ElsaInputTagsDropdown {
</a>
))}
<select id={this.fieldId} class="inline-block text-xs bg-green-400 text-white py-2 px-3 mr-1 mb-1 pr-8 rounded" onChange={(e) => this.onTagSelected(e)}>
<select id={this.fieldId} class="inline-block text-xs py-2 px-3 mr-1 mb-1 pr-8 border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 rounded" onChange={(e) => this.onTagSelected(e)}>
<option value="Add" disabled selected>{this.placeHolder}</option>
{this.dropdownTags.map(tag =>
{dropdownItems.map(tag =>
(
<option value={tag.value}>
<span>{tag.text}</span>
</option>
<option value={tag.value}>{tag.text}</option>
)
)}
</select>

28
src/designer/elsa-workflows-studio/src/components/controls/elsa-input-tags/elsa-input-tags.tsx
View file

@ -23,6 +23,14 @@ export class ElsaInputTags {
this.currentValues = this.values;
}
async addItem(item: string)
{
const values = [...this.currentValues];
values.push(item);
this.currentValues = values.distinct();
await this.valueChanged.emit(values);
}
async onInputKeyDown(e: KeyboardEvent) {
if (e.key != "Enter")
return;
@ -35,11 +43,19 @@ export class ElsaInputTags {
if (value.length == 0)
return;
const values = [...this.currentValues];
values.push(value);
this.currentValues = values.distinct();
await this.addItem(value);
input.value = '';
}
async onInputBlur(e: Event) {
const input = e.target as HTMLInputElement;
const value = input.value.trim();
if (value.length == 0)
return;
await this.addItem(value);
input.value = '';
await this.valueChanged.emit(values);
}
async onDeleteTagClick(e: Event, tag: string) {
@ -65,7 +81,9 @@ export class ElsaInputTags {
<span class="text-white hover:text-white ml-1">&times;</span>
</a>
))}
<input type="text" id={this.fieldId} onKeyDown={e => this.onInputKeyDown(e)}
<input type="text" id={this.fieldId}
onKeyDown={e => this.onInputKeyDown(e)}
onBlur={e => this.onInputBlur(e)}
class="tag-input inline-block text-sm outline-none focus:outline-none border-none shadow:none focus:border-none focus:border-transparent focus:shadow-none"
placeholder={this.placeHolder}/>
<input type="hidden" name={this.fieldName} value={valuesJson}/>

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

@ -23,12 +23,12 @@ export class ElsaMultiTextProperty {
}
onValueChanged(newValue: Array<string | number | boolean | SelectListItem>) {
const newValues = newValue.map(dropdown => {
if (typeof dropdown === 'string') return dropdown;
if (typeof dropdown === 'number') return dropdown.toString();
if (typeof dropdown === 'boolean') return dropdown.toString();
const newValues = newValue.map(item => {
if (typeof item === 'string') return item;
if (typeof item === 'number') return item.toString();
if (typeof item === 'boolean') return item.toString();
return dropdown.value;
return item.value;
})
this.currentValue = JSON.stringify(newValues);
@ -58,10 +58,10 @@ export class ElsaMultiTextProperty {
const fieldName = propertyName;
const values = parseJson(this.currentValue);
const items = this.items;
const valueType = propertyDescriptor.options !== null ? 'dropdown' : 'multi-text';
const useDropdown = !!propertyDescriptor.options && propertyDescriptor.options.length > 0;
const propertyOptions = this.createKeyValueOptions(items);
const elsaInputTags = valueType === 'multi-text' ?
const elsaInputTags = useDropdown ?
<elsa-input-tags-dropdown dropdownValues={propertyOptions} values={values} fieldId={fieldId} fieldName={fieldName} onValueChanged={e => this.onValueChanged(e.detail)} /> :
<elsa-input-tags values={values} fieldId={fieldId} fieldName={fieldName} onValueChanged={e => this.onValueChanged(e.detail)} />;

31
src/samples/server/Elsa.Samples.Server.Host/Activities/MultiTextWithOptionsSampleActivity.cs Normal file
View file

@ -0,0 +1,31 @@
using System.Reflection;
using Elsa.ActivityResults;
using Elsa.Attributes;
using Elsa.Design;
using Elsa.Expressions;
using Elsa.Metadata;
using Elsa.Services;
namespace Elsa.Samples.Server.Host.Activities
{
public class ClosedMultiTextSampleActivity : Activity, IActivityPropertyOptionsProvider
{
[ActivityProperty(
UIHint = ActivityPropertyUIHints.MultiText,
OptionsProvider = typeof(ClosedMultiTextSampleActivity),
DefaultSyntax = SyntaxNames.Json,
SupportedSyntaxes = new[] { SyntaxNames.Json, SyntaxNames.JavaScript, SyntaxNames.Liquid }
)]
public string? FavoriteLanguage { get; set; }
public object GetOptions(PropertyInfo property) => new[]
{
new SelectListItem("C#", "csharp"),
new SelectListItem("JavaScript", "javascript"),
new SelectListItem("Rust", "rust"),
new SelectListItem("PHP", "php"),
};
protected override IActivityExecutionResult OnExecute() => Done(FavoriteLanguage);
}
}

19
src/samples/server/Elsa.Samples.Server.Host/Activities/OpenMultiTextSampleActivity.cs Normal file
View file

@ -0,0 +1,19 @@
using Elsa.ActivityResults;
using Elsa.Attributes;
using Elsa.Design;
using Elsa.Expressions;
using Elsa.Services;
namespace Elsa.Samples.Server.Host.Activities
{
public class OpenMultiTextSampleActivity : Activity
{
[ActivityProperty(
UIHint = ActivityPropertyUIHints.MultiText,
DefaultSyntax = SyntaxNames.Json,
SupportedSyntaxes = new[] { SyntaxNames.Json, SyntaxNames.JavaScript, SyntaxNames.Liquid }
)]
public string? FavoriteLanguage { get; set; }
protected override IActivityExecutionResult OnExecute() => Done(FavoriteLanguage);
}
}

2
src/samples/server/Elsa.Samples.Server.Host/Activities/VehicleActivity.cs
View file

@ -16,7 +16,7 @@ namespace Elsa.Samples.Server.Host.Activities
[Action]
public class VehicleActivity : Activity, IActivityPropertyOptionsProvider, IRuntimeSelectListItemsProvider
{
private Random _random;
private readonly Random _random;
public VehicleActivity()
{