Fix tag editors two-way data binding

This commit is contained in:
Pat Hartl 2023-03-20 19:55:19 -05:00
parent 86f5479a11
commit 1ef4469fbf
2 changed files with 25 additions and 15 deletions

View file

@ -12,31 +12,41 @@
@code { @code {
[Parameter] public Func<TItem, string> OptionLabelSelector { get; set; } [Parameter] public Func<TItem, string> OptionLabelSelector { get; set; }
[Parameter] public IEnumerable<TItem> Entities { get; set; } [Parameter] public IEnumerable<TItem> Entities { get; set; }
[Parameter] public ICollection<TItem> SelectedEntities { get; set; }
private IEnumerable<Guid> SelectedValues; [Parameter] public ICollection<TItem> Values { get; set; }
[Parameter] public EventCallback<ICollection<TItem>> ValuesChanged { get; set; }
protected override void OnInitialized() private IEnumerable<Guid> SelectedValues
{ {
if (SelectedEntities != null) get
SelectedValues = SelectedEntities.Select(e => e.Id); {
return Values?.Select(e => e.Id);
}
set
{
if (value != null)
Values = value.ToList() as ICollection<TItem>;
}
} }
private void OnSelectedItemsChanged(IEnumerable<Guid> values) private async Task OnSelectedItemsChanged(IEnumerable<Guid> values)
{ {
var toAdd = values.Where(v => !SelectedEntities.Any(e => e.Id == v)).ToList(); var toAdd = values.Where(v => !Values.Any(e => e.Id == v)).ToList();
var toRemove = SelectedEntities.Where(e => !values.Any(v => v == e.Id)).ToList(); var toRemove = Values.Where(e => !values.Any(v => v == e.Id)).ToList();
foreach (var value in toAdd) foreach (var value in toAdd)
{ {
SelectedEntities.Add(Entities.First(e => e.Id == value)); Values.Add(Entities.First(e => e.Id == value));
} }
foreach (var value in toRemove) foreach (var value in toRemove)
{ {
SelectedEntities.Remove(value); Values.Remove(value);
} }
SelectedValues = SelectedEntities.Select(e => e.Id); if (ValuesChanged.HasDelegate)
await ValuesChanged.InvokeAsync();
StateHasChanged();
} }
} }

View file

@ -56,16 +56,16 @@
<Checkbox @bind-Checked="@context.Singleplayer" /> <Checkbox @bind-Checked="@context.Singleplayer" />
</FormItem> </FormItem>
<FormItem Label="Developers"> <FormItem Label="Developers">
<TagsInput Entities="Companies" SelectedEntities="Game.Developers" OptionLabelSelector="c => c.Name" TItem="Company" /> <TagsInput Entities="Companies" @bind-Values="Game.Developers" OptionLabelSelector="c => c.Name" TItem="Company" />
</FormItem> </FormItem>
<FormItem Label="Publishers"> <FormItem Label="Publishers">
<TagsInput Entities="Companies" SelectedEntities="Game.Publishers" OptionLabelSelector="c => c.Name" TItem="Company" /> <TagsInput Entities="Companies" @bind-Values="Game.Publishers" OptionLabelSelector="c => c.Name" TItem="Company" />
</FormItem> </FormItem>
<FormItem Label="Genres"> <FormItem Label="Genres">
<TagsInput Entities="Genres" SelectedEntities="Game.Genres" OptionLabelSelector="c => c.Name" TItem="Genre" /> <TagsInput Entities="Genres" @bind-Values="Game.Genres" OptionLabelSelector="c => c.Name" TItem="Genre" />
</FormItem> </FormItem>
<FormItem Label="Tags"> <FormItem Label="Tags">
<TagsInput Entities="Tags" SelectedEntities="Game.Tags" OptionLabelSelector="c => c.Name" TItem="Data.Models.Tag" /> <TagsInput Entities="Tags" @bind-Values="Game.Tags" OptionLabelSelector="c => c.Name" TItem="Data.Models.Tag" />
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button Type="@ButtonType.Primary" OnClick="Save" Icon="@IconType.Fill.Save">Save</Button> <Button Type="@ButtonType.Primary" OnClick="Save" Icon="@IconType.Fill.Save">Save</Button>