Rework multiple select list
All checks were successful
Game Ideas build for PR / build_blazor_app (pull_request) Successful in 46s

This commit is contained in:
2025-04-13 23:41:37 +02:00
parent bef0a0cc7e
commit 879be55442
24 changed files with 257 additions and 99 deletions

View File

@@ -42,7 +42,7 @@
Items="CategoriesDto?.Properties?.Select(p => new SelectElement<PropertyDto>(p, p.Label))" />
</div>
<div class="input-game">
<div class="label">@ResourcesKey.Genres :</div>
<div class="label">@ResourcesKey.Tags :</div>
<MultipleSelectList TItem="TagDto" Theme="SelectListTheme" @bind-Values=GameDto.Tags
Items="CategoriesDto?.Tags?.Select(t => new SelectElement<TagDto>(t, t.Label))" />

View File

@@ -1,4 +1,3 @@
using GameIdeas.BlazorApp.Pages.Games.Gateways;
using GameIdeas.BlazorApp.Shared.Components.Popup;
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Components.Slider;
@@ -12,8 +11,8 @@ namespace GameIdeas.BlazorApp.Pages.Games.Components;
public partial class GameCreationForm
{
[Inject] private IJSRuntime Js { get; set; } = default!;
[Inject] private IGameGateway GameGateway { get; set; } = default!;
[CascadingParameter] private Popup? Popup { get; set; }
[Parameter] public CategoriesDto Categories { get; set; } = new();
private GameDto GameDto = new();
private CategoriesDto CategoriesDto = new();
@@ -24,7 +23,6 @@ public partial class GameCreationForm
protected override async Task OnInitializedAsync()
{
EditContext = new(GameDto);
CategoriesDto = await GameGateway.FetchCategories();
if (Popup != null)
{

View File

@@ -1,32 +1,26 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
@using GameIdeas.Shared.Dto
<div class="advanced-filter-container">
<span class="title">@ResourcesKey.Filters</span>
<div class="duplicate">
<MultipleSelectList TItem="PlatformDto"
@bind-Values=GameFilter!.Platforms
Placeholder="@ResourcesKey.Platforms"
Theme="Theme" />
<SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
ValuesChanged=HandlePlatformsChanged Values=GameFilter.Platforms Theme="Theme" Items="Categories?.Platforms" />
<MultipleSelectList TItem="TagDto"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilter.Tags
Theme="Theme" />
<SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
ValuesChanged=HandleTagsChanged Values=GameFilter.Tags Theme="Theme" Items="Categories?.Tags" />
</div>
<SelectSearch TItem="PropertyDto" Placeholder="@ResourcesKey.Properties" GetLabel="@(p => p.Label)"
ValuesChanged=HandlePropertiesChanged Values=GameFilter.Properties Theme="Theme" Items="Categories?.Properties" />
<MultipleSelectList TItem="PublisherDto"
Placeholder="@ResourcesKey.Publishers"
@bind-Values=GameFilter!.Publishers
Theme="Theme" />
<SelectSearch TItem="DeveloperDto" Placeholder="@ResourcesKey.Developers" GetLabel="@(p => p.Name)"
ValuesChanged=HandleDevelopersChanged Values=GameFilter.Developers Theme="Theme" Items="Categories?.Developers" />
<MultipleSelectList TItem="DeveloperDto"
Placeholder="@ResourcesKey.Developers"
@bind-Values=GameFilter!.Developers
Theme="Theme" />
<SelectSearch TItem="PublisherDto" Placeholder="@ResourcesKey.Publishers" GetLabel="@(p => p.Name)"
ValuesChanged=HandlePublishersChanged Values=GameFilter.Publishers Theme="Theme" Items="Categories?.Publishers" />
<span class="title">@ResourcesKey.LastAdd</span>
</div>
</div>

View File

@@ -1,4 +1,4 @@
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
using GameIdeas.Shared.Dto;
using Microsoft.AspNetCore.Components;
@@ -6,7 +6,35 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
public partial class AdvancedGameFilter
{
[Parameter] public GameFilterDto? GameFilter { get; set; }
[Parameter] public GameFilterDto GameFilter { get; set; } = new();
[Parameter] public CategoriesDto? Categories { get; set; }
[Parameter] public EventCallback<GameFilterDto> GameFilterChanged { get; set; }
private readonly SelectListTheme Theme = SelectListTheme.AdvancedFilter;
private readonly SelectTheme Theme = SelectTheme.AdvancedFilter;
private async Task HandlePublishersChanged(List<PublisherDto> args)
{
GameFilter.Publishers = args;
await GameFilterChanged.InvokeAsync(GameFilter);
}
private async Task HandleDevelopersChanged(List<DeveloperDto> args)
{
GameFilter.Developers = args;
await GameFilterChanged.InvokeAsync(GameFilter);
}
private async Task HandlePropertiesChanged(List<PropertyDto> args)
{
GameFilter.Properties = args;
await GameFilterChanged.InvokeAsync(GameFilter);
}
private async Task HandleTagsChanged(List<TagDto> args)
{
GameFilter.Tags = args;
await GameFilterChanged.InvokeAsync(GameFilter);
}
private async Task HandlePlatformsChanged(List<PlatformDto> args)
{
GameFilter.Platforms = args;
await GameFilterChanged.InvokeAsync(GameFilter);
}
}

View File

@@ -8,7 +8,7 @@
box-sizing: border-box;
width: 240px;
border-left: 2px solid var(--line);
z-index: var(--index-component);
z-index: var(--index-content);
}
.duplicate {

View File

@@ -1,8 +1,7 @@
@using GameIdeas.BlazorApp.Shared.Components.Search
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Components.SelectList
@using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
@using GameIdeas.BlazorApp.Shared.Components.SliderRange
@using GameIdeas.BlazorApp.Shared.Models
@using GameIdeas.Shared.Dto
@@ -31,29 +30,24 @@
</div>
<div class="search-container">
<SearchInput @bind-Text=Value.Title
<SearchInput TextChanged=HandleTitleChanged Text="@Value.Title"
Placeholder="@ResourcesKey.Research" />
</div>
<div class="select-container">
<MultipleSelectList TItem="PlatformDto"
Placeholder="@ResourcesKey.Platforms"
@bind-Values=Value.Platforms
Theme="SelectListTheme.Filter" />
<SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
ValuesChanged=HandlePlatformsChanged Values=Value.Platforms Theme="SelectTheme.Filter" Items="Categories?.Platforms" />
</div>
<div class="select-container">
<MultipleSelectList TItem="TagDto"
Placeholder="@ResourcesKey.Genres"
@bind-Values=Value.Tags
Theme="SelectListTheme.Filter" />
<SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
ValuesChanged=HandleTagsChanged Values=Value.Tags Theme="SelectTheme.Filter" Items="Categories?.Tags" />
</div>
<div class="slider-container">
<SliderRange Params="SliderRangeParams"
@bind-Max=Value.MaxInterest
@bind-Min=Value.MinInterest />
MaxChanged=HandleMaxChanged Max="Value.MaxInterest"
MinChanged=HandleMinChanged Min="Value.MinInterest" />
</div>
</div>

View File

@@ -14,31 +14,24 @@ public partial class GameFilter
[Parameter] public EventCallback<GameFilterDto> ValueChanged { get; set; }
[Parameter] public DisplayType DisplayType { get; set; }
[Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
[Parameter] public CategoriesDto? Categories { get; set; }
private SelectParams<SortPropertyDto, SortTypeDto> SelectParams = new();
private readonly IEnumerable<SortTypeDto> SortTypes = [
private readonly List<SortTypeDto> SortTypes = [
new() { SortType = SortType.Ascending, Label = "Ascendant" },
new() { SortType = SortType.Descending, Label = "Descendant" }
];
private readonly IEnumerable<SortPropertyDto> GameProperties = [
private readonly List<SortPropertyDto> GameProperties = [
new() { SortProperty = game => game.Title!, Label = "Titre" },
new() { SortProperty = game => game.ReleaseDate!, Label = "Date de parution" }
];
private EditContext? EditContext;
private readonly SliderRangeParams SliderRangeParams =
new() { Min = 1, Max = 5 };
private SelectParams<SortPropertyDto, SortTypeDto> SelectParams = new();
private readonly SliderRangeParams SliderRangeParams = new() { Min = 1, Max = 5 };
protected override void OnInitialized()
{
EditContext = new EditContext(Value);
EditContext.OnFieldChanged += async (s, e) =>
{
await ValueChanged.InvokeAsync(Value);
};
SelectParams = new()
{
Headers = SortTypes,
@@ -65,4 +58,29 @@ public partial class GameFilter
Value.SortProperty = sortProperties.FirstOrDefault();
await ValueChanged.InvokeAsync(Value);
}
private async Task HandleTagsChanged(List<TagDto> args)
{
Value.Tags = args;
await ValueChanged.InvokeAsync(Value);
}
private async Task HandleMinChanged(int args)
{
Value.MinInterest = args;
await ValueChanged.InvokeAsync(Value);
}
private async Task HandleMaxChanged(int args)
{
Value.MaxInterest = args;
await ValueChanged.InvokeAsync(Value);
}
private async Task HandlePlatformsChanged(List<PlatformDto> args)
{
Value.Platforms = args;
await ValueChanged.InvokeAsync(Value);
}
private async Task HandleTitleChanged(string args)
{
Value.Title = args;
await ValueChanged.InvokeAsync(Value);
}
}

View File

@@ -3,7 +3,7 @@
flex-direction: row;
gap: 8px;
align-items: center;
z-index: var(--index-component);
z-index: var(--index-content);
}
.search-container {

View File

@@ -12,7 +12,8 @@
<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
<GameHeader AddTypeChanged="HandleAddClicked">
<GameFilter @bind-DisplayType=DisplayType
<GameFilter Categories="Categories"
@bind-DisplayType=DisplayType
@bind-Value=GameFilter/>
</GameHeader>
@@ -20,9 +21,9 @@
<div class="content">
</div>
<AdvancedGameFilter @bind-GameFilter=GameFilter/>
<AdvancedGameFilter @bind-GameFilter=GameFilter Categories="Categories" />
</div>
<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
<GameCreationForm />
<GameCreationForm Categories="Categories" />
</Popup>

View File

@@ -1,15 +1,25 @@
using GameIdeas.BlazorApp.Pages.Games.Gateways;
using GameIdeas.BlazorApp.Shared.Components.Popup;
using GameIdeas.BlazorApp.Shared.Models;
using GameIdeas.Shared.Dto;
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Pages.Games;
public partial class GameBase ()
{
[Inject] private IGameGateway GameGateway { get; set; } = default!;
private DisplayType DisplayType = DisplayType.List;
private GameFilterDto GameFilter = new();
private Popup? ManualAddPopup;
private CategoriesDto? Categories;
protected override async Task OnInitializedAsync()
{
Categories = await GameGateway.FetchCategories();
await base.OnInitializedAsync();
}
private void HandleAddClicked(AddType addType)
{
switch (addType)

View File

@@ -26,7 +26,7 @@ public partial class GameHeader : ComponentBase
{
SelectParams = new()
{
Items = AddTypes,
Items = AddTypes.ToList(),
GetItemLabel = item => item.Value,
};

View File

@@ -11,7 +11,7 @@ public static class SelectHelper
SelectTheme.Navigation => "navigation",
SelectTheme.Sort => "sort",
SelectTheme.Filter => "filter",
SelectTheme.AdvancedFilter => "advenced-filter",
SelectTheme.AdvancedFilter => "advanced-filter",
SelectTheme.Creation => "creation",
_ => string.Empty
};

View File

@@ -2,10 +2,10 @@
public class SelectParams<TItem, THeader>
{
public IEnumerable<TItem> Items { get; set; } = [];
public List<TItem> Items { get; set; } = [];
public TItem? DefaultItem { get; set; }
public Func<TItem, string> GetItemLabel { get; set; } = _ => string.Empty;
public IEnumerable<THeader> Headers { get; set; } = [];
public List<THeader> Headers { get; set; } = [];
public THeader? DefaultHeader { get; set; }
public Func<THeader, string> GetHeaderLabel { get; set; } = _ => string.Empty;

View File

@@ -14,23 +14,29 @@
@if (IsContentOpen)
{
<div class="content @SelectHelper.GetClassFromTheme(Theme)">
@foreach (var header in Params.Headers)
@if (Params.Headers != null)
{
<SelectRow IsSelected=HeaderValues?.Contains(header)
Label="@Params.GetHeaderLabel(header)" Theme=Theme
OnClick="_ => HandleHeaderClicked(header)" />
@foreach (var header in Params.Headers)
{
<SelectRow IsSelected=HeaderValues?.Contains(header)
Label="@Params.GetHeaderLabel(header)" Theme=Theme
OnClick="_ => HandleHeaderClicked(header)" />
}
}
@if (Params.Headers.Any())
@if (Params.Headers?.Any() == true)
{
<span class="line"></span>
}
@foreach (var item in Params.Items)
@if (Params.Items != null)
{
<SelectRow IsSelected=Values?.Contains(item)
Label="@Params.GetItemLabel(item)" Theme=Theme
OnClick="_ => HandleValueClicked(item)" />
@foreach (var item in Params.Items)
{
<SelectRow IsSelected=Values?.Contains(item)
Label="@Params.GetItemLabel(item)" Theme=Theme
OnClick="_ => HandleValueClicked(item)" />
}
}
</div>
}

View File

@@ -41,34 +41,39 @@ public partial class Select<TItem, THeader>
private async Task HandleValueClicked(TItem value)
{
if (Type != SelectType.Multiple)
if (Type != SelectType.Multiple || Values == null)
{
Values?.Clear();
Values = [];
}
if (Values?.Contains(value) == true)
{
Values.Remove(value);
}
else
{
Values!.Add(value);
}
Values?.Add(value);
await ValuesChanged.InvokeAsync(Values);
StateHasChanged();
}
private async Task HandleHeaderClicked(THeader header)
{
if (Type != SelectType.Multiple)
if (Type != SelectType.Multiple || HeaderValues == null)
{
HeaderValues?.Clear();
HeaderValues = [];
}
if (HeaderValues?.Contains(header) == true)
{
HeaderValues.Remove(header);
}
else
{
HeaderValues!.Add(header);
}
HeaderValues?.Add(header);
await HeaderValuesChanged.InvokeAsync(HeaderValues);
}
}

View File

@@ -12,6 +12,7 @@
position: absolute;
z-index: var(--index-dropdown);
border-radius: var(--small-radius);
width: 100%;
}
.dropdown.align-right {
@@ -19,27 +20,52 @@
}
.content {
background: var(--dropdown-content);
overflow: hidden;
display: flex;
flex-direction: column;
animation-name: fade-in;
animation-duration: 0.2s;
box-shadow: var(--drop-shadow);
}
.line {
display: none;
}
.dropdown::-webkit-scrollbar {
width: 10px;
}
.dropdown::-webkit-scrollbar-track {
background: var(--input-secondary);
border-radius: 0 var(--small-radius) var(--small-radius) 0;
}
.dropdown::-webkit-scrollbar-thumb {
background: #555;
border-radius: var(--small-radius);
}
.dropdown::-webkit-scrollbar-thumb:hover {
background: #777;
}
/***** Navigation Theme *****/
.dropdown.navigation {
width: auto;
}
.content.navigation {
background: var(--violet);
box-shadow: var(--drop-shadow);
}
/***** Sort Theme *****/
.dropdown.sort {
width: auto;
}
.content.sort {
background: var(--dropdown-content);
box-shadow: var(--drop-shadow);
padding: 4px 0;
}

View File

@@ -0,0 +1,19 @@
@using GameIdeas.BlazorApp.Shared.Components.Search
@using GameIdeas.BlazorApp.Shared.Components.SelectList
@using GameIdeas.BlazorApp.Shared.Components.SelectList.Helpers
@using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
@typeparam TItem
<Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType.Multiple"
Params="SelectParams" Values=Values ValuesChanged="HandleValuesChanged">
<div class="@SelectHelper.GetClassFromTheme(Theme)">
<SearchInput @ref=SearchInput
Icon="SearchInputIcon.Dropdown"
Placeholder="@Placeholder"
TextChanged="HandleTextChanged"
ClearClicked="HandleClearClicked" />
</div>
</Select>

View File

@@ -0,0 +1,42 @@
using GameIdeas.BlazorApp.Shared.Components.Search;
using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components.SelectSearch;
public partial class SelectSearch<TItem>
{
[Parameter] public SelectTheme Theme { get; set; }
[Parameter] public List<TItem> Items { get; set; } = [];
[Parameter] public Func<TItem, string> GetLabel { get; set; } = _ => string.Empty;
[Parameter] public List<TItem> Values { get; set; } = [];
[Parameter] public EventCallback<List<TItem>> ValuesChanged { get; set; }
[Parameter] public string Placeholder { get; set; } = string.Empty;
private SelectParams<TItem, string> SelectParams = new();
private SearchInput? SearchInput;
protected override void OnParametersSet()
{
SelectParams = new()
{
Items = Items,
GetItemLabel = GetLabel
};
base.OnParametersSet();
}
private async Task HandleValuesChanged(IEnumerable<TItem> values)
{
Values = values.ToList();
await ValuesChanged.InvokeAsync(values.ToList());
}
private void HandleClearClicked()
{
Values = [];
}
private void HandleTextChanged()
{
Values = [];
}
}

View File

@@ -0,0 +1,17 @@
/* Advanced filter */
::deep .advanced-filter .search-container {
height: 24px;
background: var(--input-secondary);
}
::deep .advanced-filter .search-container input::placeholder {
color: #bbb;
}
/* Creation */
::deep .creation .search-container {
height: 24px;
background: var(--input-secondary);
border: solid 1px var(--input-selected);
box-sizing: border-box;
}

View File

@@ -15,7 +15,7 @@ public class Translations (TranslationService translationService)
public string LastAdd => translationService.Translate(nameof(LastAdd));
public string Research => translationService.Translate(nameof(Research));
public string Platforms => translationService.Translate(nameof(Platforms));
public string Genres => translationService.Translate(nameof(Genres));
public string Tags => translationService.Translate(nameof(Tags));
public string Publishers => translationService.Translate(nameof(Publishers));
public string Developers => translationService.Translate(nameof(Developers));
public string StorageSize => translationService.Translate(nameof(StorageSize));
@@ -57,7 +57,7 @@ public static class ResourcesKey
public static string LastAdd => _instance?.LastAdd ?? throw new InvalidOperationException("ResourcesKey.LastAdd is not initialized.");
public static string Research => _instance?.Research ?? throw new InvalidOperationException("ResourcesKey.Research is not initialized.");
public static string Platforms => _instance?.Platforms ?? throw new InvalidOperationException("ResourcesKey.Platforms is not initialized.");
public static string Genres => _instance?.Genres ?? throw new InvalidOperationException("ResourcesKey.Genres is not initialized.");
public static string Tags => _instance?.Tags ?? throw new InvalidOperationException("ResourcesKey.Tags is not initialized.");
public static string Publishers => _instance?.Publishers ?? throw new InvalidOperationException("ResourcesKey.Publishers is not initialized.");
public static string Developers => _instance?.Developers ?? throw new InvalidOperationException("ResourcesKey.Developers is not initialized.");
public static string StorageSize => _instance?.StorageSize ?? throw new InvalidOperationException("ResourcesKey.StorageSize is not initialized.");

View File

@@ -2,9 +2,9 @@
public class CategoriesDto
{
public IEnumerable<PlatformDto>? Platforms { get; set; }
public IEnumerable<PropertyDto>? Properties { get; set; }
public IEnumerable<TagDto>? Tags { get; set; }
public IEnumerable<DeveloperDto>? Developers { get; set; }
public IEnumerable<PublisherDto>? Publishers { get; set; }
public List<PlatformDto>? Platforms { get; set; }
public List<PropertyDto>? Properties { get; set; }
public List<TagDto>? Tags { get; set; }
public List<DeveloperDto>? Developers { get; set; }
public List<PublisherDto>? Publishers { get; set; }
}

View File

@@ -6,14 +6,14 @@ public class GameFilterDto
public SortTypeDto? SortType { get; set; }
public SortPropertyDto? SortProperty { get; set; }
public string? Title { get; set; }
public IEnumerable<PlatformDto>? Platforms { get; set; }
public IEnumerable<PropertyDto>? Properties { get; set; }
public IEnumerable<TagDto>? Tags { get; set; }
public IEnumerable<PublisherDto>? Publishers { get; set; }
public IEnumerable<DeveloperDto>? Developers { get; set; }
public List<PlatformDto>? Platforms { get; set; }
public List<PropertyDto>? Properties { get; set; }
public List<TagDto>? Tags { get; set; }
public List<PublisherDto>? Publishers { get; set; }
public List<DeveloperDto>? Developers { get; set; }
public int MinInterest { get; set; } = 1;
public int MaxInterest { get; set; } = 5;
public IEnumerable<int>? ReleaseYears { get; set; }
public List<int>? ReleaseYears { get; set; }
public int? MinStorageSize { get; set; }
public int? MaxStorageSize { get; set; }
}

View File

@@ -11,7 +11,7 @@
"LastAdd": "Les ajouts récents",
"Research": "Rechercher",
"Platforms": "Plateformes",
"Genres": "Genres",
"Tags": "Genres",
"Publishers": "Editeurs",
"Developers": "Développeurs",
"StorageSize": "Taille d'espace",

View File

@@ -18,11 +18,11 @@ public class CategoryService(GameIdeasContext context, IMapper mapper) : ICatego
return new()
{
Platforms = mapper.Map<IEnumerable<PlatformDto>>(platforms),
Properties = mapper.Map<IEnumerable<PropertyDto>>(properties),
Tags = mapper.Map<IEnumerable<TagDto>>(tags),
Developers = mapper.Map<IEnumerable<DeveloperDto>>(developers),
Publishers = mapper.Map<IEnumerable<PublisherDto>>(publishers)
Platforms = mapper.Map<List<PlatformDto>>(platforms),
Properties = mapper.Map<List<PropertyDto>>(properties),
Tags = mapper.Map<List<TagDto>>(tags),
Developers = mapper.Map<List<DeveloperDto>>(developers),
Publishers = mapper.Map<List<PublisherDto>>(publishers)
};
}
}