Rework select component (#14)

Reviewed-on: #14

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor

@@ -1,5 +1,4 @@
-@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
-@using GameIdeas.BlazorApp.Shared.Components.Select.Models
 @using GameIdeas.BlazorApp.Shared.Components.Slider
 @using GameIdeas.Shared.Dto
 
@@ -20,13 +19,13 @@
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Developers :</div>
-                <MultipleSelectList TItem="DeveloperDto" Theme="SelectListTheme" @bind-Values=GameDto.Developers
+                <SelectSearch TItem="DeveloperDto" Theme="Theme" GetLabel="@(i => i.Name)" 
-                                    Items="CategoriesDto?.Developers?.Select(d => new SelectElement<DeveloperDto>(d, d.Name))" />
+                              Items="Categories?.Developers" @bind-Values=GameDto.Developers />
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Publishers :</div>
-                <MultipleSelectList TItem="PublisherDto" Theme="SelectListTheme" @bind-Values=GameDto.Publishers
+                <SelectSearch TItem="PublisherDto" Theme="Theme" GetLabel="@(i => i.Name)"
-                                    Items="CategoriesDto?.Publishers?.Select(p => new SelectElement<PublisherDto>(p, p.Name))" />
+                              Items="Categories?.Publishers" @bind-Values=GameDto.Publishers />
             </div>
         </div>
         <div class="container">
@@ -38,19 +37,19 @@
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Properties :</div>
-                <MultipleSelectList TItem="PropertyDto" Theme="SelectListTheme" @bind-Values=GameDto.Properties
+                <SelectSearch TItem="PropertyDto" Theme="Theme" GetLabel="@(i => i.Label)"
-                                    Items="CategoriesDto?.Properties?.Select(p => new SelectElement<PropertyDto>(p, p.Label))" />
+                              Items="Categories?.Properties" @bind-Values=GameDto.Properties />
             </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 
+                <SelectSearch TItem="TagDto" Theme="Theme" GetLabel="@(i => i.Label)"
-                                    Items="CategoriesDto?.Tags?.Select(t => new SelectElement<TagDto>(t, t.Label))" />
+                              Items="Categories?.Tags" @bind-Values=GameDto.Tags />
 
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Platforms :</div>
-                <MultipleSelectList TItem="PlatformDto" Theme="SelectListTheme" @bind-Values=GameDto.Platforms 
+                <SelectSearch TItem="PlatformDto" Theme="Theme" GetLabel="@(i => i.Label)"
-                                    Items="CategoriesDto?.Platforms?.Select(p => new SelectElement<PlatformDto>(p, p.Label))" />
+                              Items="Categories?.Platforms" @bind-Values=GameDto.Platforms />
             </div>
         </div>
     </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs

@@ -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,19 +11,17 @@ 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; }
 
     private GameDto GameDto = new();
-    private CategoriesDto CategoriesDto = new();
     private EditContext? EditContext;
-    private readonly SelectListTheme SelectListTheme = SelectListTheme.Creation;
+    private readonly SelectTheme Theme = SelectTheme.Creation;
     private readonly SliderParams SliderParams = new() { Gap = 1, Min = 1, Max = 5 };
 
     protected override async Task OnInitializedAsync()
     {
         EditContext = new(GameDto);
-        CategoriesDto = await GameGateway.FetchCategories();
 
         if (Popup != null)
         {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor

@@ -1,45 +1,26 @@
-@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
-@using GameIdeas.BlazorApp.Shared.Components.Select.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="string"
+        <SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
-                            @bind-Values=GameFilterParams!.Platforms
+                      @bind-Values=GameFilter.Platforms @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Platforms" />
-                            Placeholder="@ResourcesKey.Platforms"
-                            Theme="SelectListTheme.AdvancedFilter" />
 
-        <MultipleSelectList TItem="string"
+        <SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
-                            Placeholder="@ResourcesKey.Genres"
+                      @bind-Values=GameFilter.Tags @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Tags" />
-                            @bind-Values=GameFilterParams!.Tags
-                            Theme="SelectListTheme.AdvancedFilter" />
     </div>
 
+    <SelectSearch TItem="PropertyDto" Placeholder="@ResourcesKey.Properties" GetLabel="@(p => p.Label)"
+                  @bind-Values=GameFilter.Properties @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Properties" />
 
-    <MultipleSelectList TItem="string"
+    <SelectSearch TItem="DeveloperDto" Placeholder="@ResourcesKey.Developers" GetLabel="@(p => p.Name)"
-                        Placeholder="@ResourcesKey.Publishers"
+                  @bind-Values=GameFilter.Developers @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Developers" />
-                        @bind-Values=GameFilterParams!.Publishers
-                        Theme="SelectListTheme.AdvancedFilter" />
 
-    <MultipleSelectList TItem="string"
+    <SelectSearch TItem="PublisherDto" Placeholder="@ResourcesKey.Publishers" GetLabel="@(p => p.Name)"
-                        Placeholder="@ResourcesKey.Developers"
+                  @bind-Values=GameFilter.Publishers @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Publishers" />
-                        @bind-Values=GameFilterParams!.Developers
-                        Theme="SelectListTheme.AdvancedFilter" />
-
-    <MultipleSelectList TItem="string"
-                        Placeholder="@ResourcesKey.StorageSize"
-                        @bind-Values=GameFilterParams!.StorageSizes
-                        Theme="SelectListTheme.AdvancedFilter" />
-
-    <MultipleSelectList TItem="string"
-                        Placeholder="@ResourcesKey.LastModification"
-                        @bind-Values=GameFilterParams!.LastModification
-                        Theme="SelectListTheme.AdvancedFilter" />
-
-    <MultipleSelectList TItem="string"
-                        Placeholder="@ResourcesKey.ReleaseDate"
-                        @bind-Values=GameFilterParams!.ReleaseDates
-                        Theme="SelectListTheme.AdvancedFilter" />
 
     <span class="title">@ResourcesKey.LastAdd</span>
-</div>
+</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs

@@ -1,10 +1,19 @@
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
 public partial class AdvancedGameFilter
 {
-    [Parameter] public GameFilterParams? GameFilterParams { get; set; }
+    [Parameter] public GameFilterDto GameFilter { get; set; } = new();
-    [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
+    [Parameter] public CategoriesDto? Categories { get; set; }
+    [Parameter] public EventCallback<GameFilterDto> GameFilterChanged { get; set; }
+
+    private readonly SelectTheme Theme = SelectTheme.AdvancedFilter;
+
+    private async Task HandleValueChanged()
+    {
+        await GameFilterChanged.InvokeAsync(GameFilter);
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css

@@ -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 {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor

@@ -1,23 +1,21 @@
 @using GameIdeas.BlazorApp.Shared.Components.Search
 @using GameIdeas.BlazorApp.Shared.Components.Select
 @using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
 @using GameIdeas.BlazorApp.Shared.Components.SliderRange
 @using GameIdeas.BlazorApp.Shared.Models
 @using GameIdeas.Shared.Dto
-@using GameIdeas.Shared.Enum
 
 <div class="form-filter">
-    <SelectList TItem="Func<GameDto, object>" Items="GameProperties" 
+    <Select TItem="SortPropertyDto" ValuesChanged=HandleSortPropertyClicked
-                @bind-Value=GameFilterParams.SortProperty
+            THeader="SortTypeDto" HeaderValuesChanged=HandleSortTypeClicked
-                THeader="SortType" Headers="SortTypes"
+            Params=SelectParams Theme="SelectTheme.Sort" >
-                @bind-Header=GameFilterParams.SortType
-                Theme="SelectListTheme.Sort">
         <div class="square-button">
             <svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                 <path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
             </svg>
         </div>
-    </SelectList>
+    </Select>
 
     <div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
         <svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
@@ -32,29 +30,24 @@
     </div>
 
     <div class="search-container">
-        <SearchInput @bind-Text=GameFilterParams.SearchName
+        <SearchInput @bind-Text="@Value.Title"
-                        Placeholder="@ResourcesKey.Research" />
+                     Placeholder="@ResourcesKey.Research" />
     </div>
 
     <div class="select-container">
-        <MultipleSelectList TItem="string"
+        <SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
-                            Placeholder="@ResourcesKey.Platforms"
+                      @bind-Values=Value.Platforms @bind-Values:after="HandleValueChanged" Theme="SelectTheme.Filter" Items="Categories?.Platforms" />
-                            @bind-Values=GameFilterParams.Platforms
-                            Theme="SelectListTheme.Filter" />
     </div>
 
     <div class="select-container">
-        <MultipleSelectList TItem="string"
+        <SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
-                            Placeholder="@ResourcesKey.Genres"
+                      @bind-Values=Value.Tags @bind-Values:after="HandleValueChanged" Theme="SelectTheme.Filter" Items="Categories?.Tags" />
-                            @bind-Values=GameFilterParams.Tags
-                            Theme="SelectListTheme.Filter" />
     </div>
 
     <div class="slider-container">
         <SliderRange Params="SliderRangeParams"
-                     @bind-Max=GameFilterParams.MaxRating
+                     @bind-Max="Value.MaxInterest" @bind-Max:after="HandleValueChanged"
-                     @bind-Min=GameFilterParams.MinRating />
+                     @bind-Min="Value.MinInterest" @bind-Min:after="HandleValueChanged" />
     </div>
 </div>
 
-

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs

@@ -10,31 +10,36 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
 
 public partial class GameFilter
 {
-    [Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
+    [Parameter] public GameFilterDto Value { get; set; } = new();
-    [Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
+    [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 readonly IEnumerable<SelectElement<SortType>> SortTypes = [
+
-        new(SortType.Ascending, "Ascendant") { IsSelected = true },
+    private readonly List<SortTypeDto> SortTypes = [
-        new(SortType.Descending, "Descendant")
+        new() { SortType = SortType.Ascending, Label = "Ascendant" },
-    ];
+        new() { SortType = SortType.Descending, Label = "Descendant" }
-    
-    private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> GameProperties = [
-        new(game => game?.Title, "Nom") { IsSelected = true },
-        new(game => game?.ReleaseDate, "Date de parution"),
     ];
 
-    private EditContext? EditContext;
+    private readonly List<SortPropertyDto> GameProperties = [
-    private readonly SliderRangeParams SliderRangeParams =
+        new() { SortProperty = game => game.Title!, Label = "Titre" },
-        new() { Min = 1, Max = 5 };
+        new() { SortProperty = game => game.ReleaseDate!, Label = "Date de parution" }
+    ];
+
+    private SelectParams<SortPropertyDto, SortTypeDto> SelectParams = new();
+    private readonly SliderRangeParams SliderRangeParams = new() { Min = 1, Max = 5 };
 
     protected override void OnInitialized()
     {
-        EditContext = new EditContext(GameFilterParams);
+        SelectParams = new()
-        EditContext.OnFieldChanged += async (s, e) =>
         {
-            await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
+            Headers = SortTypes,
+            GetHeaderLabel = header => header.Label,
+            DefaultHeader = SortTypes.FirstOrDefault(h => h.SortType == SortType.Ascending),
+            Items = GameProperties,
+            GetItemLabel = item => item.Label,
+            DefaultItem = GameProperties.FirstOrDefault(p => p.Label == "Titre")
         };
     }
 
@@ -43,4 +48,21 @@ public partial class GameFilter
         DisplayType = displayType;
         await DisplayTypeChanged.InvokeAsync(displayType);
     }
+
+    private async Task HandleSortTypeClicked(IEnumerable<SortTypeDto> sortTypes)
+    {
+        Value.SortType = sortTypes.FirstOrDefault();
+        await ValueChanged.InvokeAsync(Value);
+    }
+
+    private async Task HandleSortPropertyClicked(IEnumerable<SortPropertyDto> sortProperties)
+    {
+        Value.SortProperty = sortProperties.FirstOrDefault();
+        await ValueChanged.InvokeAsync(Value);
+    }
+
+    private async Task HandleValueChanged()
+    {
+        await ValueChanged.InvokeAsync(Value);
+    }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs

@@ -1,21 +0,0 @@
-using GameIdeas.Shared.Enum;
-using GameIdeas.Shared.Dto;
-
-namespace GameIdeas.BlazorApp.Pages.Games.Filter;
-
-public class GameFilterParams
-{
-    public SortType SortType { get; set; } = SortType.Ascending;
-    public Func<GameDto?, object?>? SortProperty { get; set; }
-    public string? SearchName { get; set; }
-    public IEnumerable<string>? Platforms { get; set; }
-    public IEnumerable<string>? Properties { get; set; }
-    public IEnumerable<string>? Tags { get; set; }
-    public IEnumerable<string>? Publishers { get; set; }
-    public IEnumerable<string>? Developers { get; set; }
-    public IEnumerable<string>? StorageSizes { get; set; }
-    public IEnumerable<string>? LastModification { get; set; }
-    public IEnumerable<string>? ReleaseDates { get; set; }
-    public int MaxRating { get; set; } = 5;
-    public int MinRating { get; set; } = 1;
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor

@@ -12,17 +12,18 @@
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
 <GameHeader AddTypeChanged="HandleAddClicked">
-    <GameFilter @bind-DisplayType=DisplayType
+    <GameFilter Categories="Categories"
-                @bind-GameFilterParams=GameFilterParams />
+                @bind-DisplayType=DisplayType
+                @bind-Value=GameFilter/>
 </GameHeader>
 
 <div class="container">
     <div class="content">
     </div>
 
-    <AdvancedGameFilter @bind-GameFilterParams=GameFilterParams />
+    <AdvancedGameFilter @bind-GameFilter=GameFilter Categories="Categories" />
 </div>
 
 <Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
-    <GameCreationForm />
+    <GameCreationForm Categories="Categories" />
 </Popup>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs

@@ -1,14 +1,25 @@
-using GameIdeas.BlazorApp.Pages.Games.Filter;
+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 GameFilterParams GameFilterParams = new();
+    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)

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor

@@ -22,15 +22,15 @@
                         <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
                     </svg>
                 </div>
-                <SelectList @ref="SelectListAdd" TItem="AddType" Items="SelectElements"
+                <Select @ref="SelectListAdd" TItem="KeyValuePair<AddType, string>" THeader="object" 
-                            ValueChanged=HandleAddTypeClickedAsync THeader="object"
+                        ValuesChanged=HandleAddTypeClicked Params=SelectParams
-                            Theme="SelectListTheme.Navigation" AlignRight=true>
+                        Theme="SelectTheme.Navigation">
                     <div class="second-button button">
                         <svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                             <path d="M1 3H23L12 22" />
                         </svg>
                     </div>
-                </SelectList>
+                </Select>
             </div>
         </div>
         <div class="account-container">

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs

@@ -13,23 +13,35 @@ public partial class GameHeader : ComponentBase
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
 
-    private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
+    private readonly Dictionary<AddType, string> AddTypes = new() {
-        new SelectElement<AddType>(AddType.Manual, ResourcesKey.ManualAdd),
+        { AddType.Manual, ResourcesKey.ManualAdd },
-        new SelectElement<AddType> (AddType.Auto, ResourcesKey.AutoAdd)
+        { AddType.Auto, ResourcesKey.AutoAdd }
-    ];
+    };
 
     private AccountSettings? AccountSettings;
-    private SelectList<AddType, object>? SelectListAdd;
+    private Select<KeyValuePair<AddType, string>, object>? SelectListAdd;
+    private SelectParams<KeyValuePair<AddType, string>, object> SelectParams = new();
+
+    protected override void OnInitialized()
+    {
+        SelectParams = new()
+        {
+            Items = AddTypes.ToList(),
+            GetItemLabel = item => item.Value,
+        };
+
+        base.OnInitialized();
+    }
 
     private void HandleIconClicked()
     {
         throw new NotImplementedException();
     }
 
-    private async Task HandleAddTypeClickedAsync(AddType value)
+    private async Task HandleAddTypeClicked(IEnumerable<KeyValuePair<AddType, string>> values)
     {
         SelectListAdd?.Close();
-        await AddTypeChanged.InvokeAsync(value);
+        await AddTypeChanged.InvokeAsync(values.FirstOrDefault().Key);
     }
 
     private void HandleAccountClicked()

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.cs

@@ -1,15 +0,0 @@
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
-using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Components.Select.Components;
-
-public partial class SelectListElement<TItem>
-{
-    [Parameter] public EventCallback<SelectElement<TItem>?> ValueChanged { get; set; }
-    [Parameter] public SelectElement<TItem>? Value { get; set; }
-    [Parameter] public SelectListTheme Theme { get; set; }
-    private async Task HandleItemClicked()
-    {
-        await ValueChanged.InvokeAsync(Value);
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css

@@ -1,81 +0,0 @@
-.select-element {
-    display: flex;
-    flex-direction: row;
-    width: auto;
-    gap: 6px;
-    height: 20px;
-    align-items: center;
-}
-
-    .select-element:hover {
-        cursor: pointer;
-    }
-
-.selected {
-    width: 12px;
-    min-width: 12px;
-    height: 12px;
-    min-height: 12px;
-    border: 1px solid var(--line);
-}
-
-.selected svg {
-    display: block;
-    fill: var(--white)
-}
-
-/***** Navigation Theme *****/
-.navigation {
-    padding: 4px 8px;
-}
-    .navigation:hover {
-        background: var(--violet-selected);
-    }
-
-    .navigation .selected {
-        display: none;
-    } 
-
-/***** Sort Theme *****/
-.sort {
-    padding: 2px 6px;
-}
-
-    .sort:hover {
-        background: var(--input-selected);
-    }
-
-    .sort .select-label {
-        text-wrap: nowrap;
-        margin-right: 6px;
-    }
-
-/***** Filter Theme *****/
-.filter {
-    padding: 2px 6px;
-}
-
-    .filter:hover {
-        background: var(--input-selected);
-    }
-
-    .filter .select-label {
-        text-wrap: nowrap;
-        margin-right: 6px;
-    }
-
-/***** Advanced Filter Theme *****/
-.advancedfilter {
-    padding: 2px 6px;
-}
-
-    .advancedfilter:hover {
-        background: var(--input-selected);
-    }
-
-    .advancedfilter .select-label {
-        text-wrap: nowrap;
-        margin-right: 6px;
-    }
-
-

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor

@@ -1,15 +1,16 @@
-@typeparam TItem
+@using GameIdeas.BlazorApp.Shared.Components.Select.Helpers
 
-<div class="select-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
+<div class="select-element @SelectHelper.GetClassFromTheme(Theme)"
+     @onclick=HandleElementClicked>
     <div class="selected">
-        @if (Value != null && Value.IsSelected)
+        @if (IsSelected == true)
         {
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                 <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />
             </svg>
         }
     </div>
-    <div class="select-label">
+    <div class="label">
-        @Value?.Label
+        @Label
     </div>
-</div>
+</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.cs

@@ -0,0 +1,16 @@
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select.Components;
+
+public partial class SelectRow
+{
+    [Parameter] public bool? IsSelected { get; set; }
+    [Parameter] public string? Label { get; set; }
+    [Parameter] public SelectTheme Theme { get; set; }
+    [Parameter] public EventCallback OnClick { get; set; }
+    private async Task HandleElementClicked()
+    {
+        await OnClick.InvokeAsync();
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectRow.razor.css

@@ -0,0 +1,45 @@
+.select-element {
+    display: flex;
+    flex-direction: row;
+    width: auto;
+    gap: 6px;
+    height: 20px;
+    align-items: center;
+    padding: 2px 6px;
+}
+
+    .select-element:hover {
+        cursor: pointer;
+        background: var(--input-selected);
+    }
+
+.selected {
+    width: 12px;
+    min-width: 12px;
+    height: 12px;
+    min-height: 12px;
+    border: 1px solid var(--line);
+}
+
+    .selected svg {
+        display: block;
+        fill: var(--white)
+    }
+
+.label {
+    text-wrap: nowrap;
+    margin-right: 6px;
+}
+
+/***** Navigation Theme *****/
+.navigation {
+    padding: 4px 8px;
+}
+
+    .navigation:hover {
+        background: var(--violet-selected);
+    }
+
+    .navigation .selected {
+        display: none;
+    }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Helpers/SelectHelper.cs

@@ -0,0 +1,19 @@
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select.Helpers;
+
+public static class SelectHelper
+{
+    public static string GetClassFromTheme(SelectTheme selectTheme)
+    {
+        return selectTheme switch
+        {
+            SelectTheme.Navigation => "navigation",
+            SelectTheme.Sort => "sort",
+            SelectTheme.Filter => "filter",
+            SelectTheme.AdvancedFilter => "advanced-filter",
+            SelectTheme.Creation => "creation",
+            _ => string.Empty
+        };
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectElement.cs

@@ -1,9 +0,0 @@
-namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
-
-public class SelectElement<TItem>(TItem item, string? label)
-{
-    public TItem Item { get; set; } = item;
-    public string? Label { get; set; } = label;
-    public bool IsSelected { get; set; } = false;
-    public bool IsNew { get; set; } = false;
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectParams.cs

@@ -0,0 +1,12 @@
+namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
+
+public class SelectParams<TItem, THeader>
+{
+    public List<TItem> Items { get; set; } = [];
+    public TItem? DefaultItem { get; set; }
+    public Func<TItem, string> GetItemLabel { get; set; } = _ => string.Empty;
+    public List<THeader> Headers { get; set; } = [];
+    public THeader? DefaultHeader { get; set; }
+    public Func<THeader, string> GetHeaderLabel { get; set; } = _ => string.Empty;
+
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs

@@ -1,6 +1,6 @@
 namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
 
-public enum SelectListTheme
+public enum SelectTheme
 {
     Navigation,
     Sort,

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectType.cs

@@ -0,0 +1,7 @@
+namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
+
+public enum SelectType
+{
+    Single,
+    Multiple
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor

@@ -1,35 +0,0 @@
-@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
-@using GameIdeas.BlazorApp.Shared.Components.Search
-@using GameIdeas.BlazorApp.Shared.Components.Select.Components
-@typeparam TItem
-
-<div class="select-list">
-    <div class="select-button @(Enum.GetName(Theme)?.ToLower())">
-        <SearchInput @ref=SearchInput
-                     Icon="SearchInputIcon.Dropdown"
-                     Placeholder="@Placeholder"
-                     TextChanged="HandleTextChanged"
-                     ClearClicked="HandleTextChanged"
-                     SearchClicked="HandleSearchClicked"
-                     FocusIn="HandleTextFocusIn"/>
-    </div>
-    <div class="select-container">
-
-        @if (IsContentOpen)
-        {
-            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
-                @foreach (var item in Items)
-                {
-                    <SelectListElement TItem="TItem"
-                                       Value="item"
-                                       ValueChanged="HandleItemClicked"
-                                       Theme="Theme" />
-                }
-            </div>
-        }
-    </div>
-</div>
-
-<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
-                IsVisible=IsContentOpen OnClick="HandleContentClosed" />
-

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.cs

@@ -1,65 +0,0 @@
-using GameIdeas.BlazorApp.Shared.Components.Search;
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
-using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
-
-namespace GameIdeas.BlazorApp.Shared.Components.Select;
-
-public partial class MultipleSelectList<TItem>
-{
-    [Inject] IJSRuntime JS { get; set; } = default!;
-    [Parameter] public IEnumerable<TItem>? Values { get; set; }
-    [Parameter] public EventCallback<IEnumerable<TItem>?> ValuesChanged { get; set; }
-    [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
-    [Parameter] public SelectListTheme Theme { get; set; }
-    [Parameter] public bool AlignRight { get; set; }
-    [Parameter] public string? Placeholder { get; set; }
-
-    private bool IsContentOpen = false;
-    private SearchInput? SearchInput;
-
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await JS.InvokeVoidAsync("addResizeListener");
-
-        await base.OnAfterRenderAsync(firstRender);
-    }
-
-    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
-    {
-        selectedValue.IsSelected = !selectedValue.IsSelected;
-
-        Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
-        SearchInput?.SetText(string.Join(", ", Values));
-
-        await ValuesChanged.InvokeAsync(Values);
-        StateHasChanged();
-    }
-
-    private async Task HandleTextChanged()
-    {
-        IsContentOpen = false;
-
-        foreach (var item in Items)
-        {
-            item.IsSelected = false;
-        }
-
-        Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
-        await ValuesChanged.InvokeAsync(Values);
-    }
-
-    private void HandleSearchClicked()
-    {
-        IsContentOpen = !IsContentOpen;
-    }
-    private void HandleContentClosed()
-    {
-        IsContentOpen = false;
-    }
-    private void HandleTextFocusIn()
-    {
-        IsContentOpen = true;
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css

@@ -1,72 +0,0 @@
-.select-list {
-    position: relative;
-}
-
-.select-container {
-    overflow: auto;
-    right: 0;
-    min-width: 100%;
-    margin-top: 4px;
-    position: absolute;
-    z-index: var(--index-dropdown);
-    border-radius: var(--small-radius);
-}
-
-.select-content {
-    display: flex;
-    flex-direction: column;
-    animation-name: fade-in;
-    animation-duration: 0.4s;
-    background: var(--dropdown-content);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-}
-
-.select-button {
-    z-index: var(--index-component)
-}
-
-.line {
-    margin: 2px 6px;
-    border-bottom: 2px solid var(--input-selected);
-}
-/* Advanced filter */
-::deep .select-button.advancedfilter .search-container {
-    height: 24px;
-    background: var(--input-secondary);
-}
-
-    ::deep .select-button.advancedfilter .search-container input::placeholder {
-        color: #bbb;
-    }
-
-/* Creation */
-::deep .select-button.creation .search-container {
-    height: 24px;
-    background: var(--input-secondary);
-    border: solid 1px var(--input-selected);
-    box-sizing: border-box;
-}
-
-/* width */
-.select-container::-webkit-scrollbar {
-    width: 10px;
-}
-
-/* Track */
-.select-container::-webkit-scrollbar-track {
-    background: var(--input-secondary);
-    border-radius: 0 var(--small-radius) var(--small-radius) 0;
-}
-
-/* Handle */
-.select-container::-webkit-scrollbar-thumb {
-    background: #555;
-    border-radius: var(--small-radius);
-}
-
-    /* Handle on hover */
-    .select-container::-webkit-scrollbar-thumb:hover {
-        background: #777;
-    }
-

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.js

@@ -1,19 +0,0 @@
-function offset(el) {
-    var rect = el.getBoundingClientRect(),
-        scrollLeft = window.scrollY || document.documentElement.scrollLeft,
-        scrollTop = window.scrollX || document.documentElement.scrollTop;
-    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
-}
-
-function resizeSelectContent() {
-    const height = window.innerHeight;
-    const selects = document.getElementsByClassName('select-container');
-    for (var i = 0; i < selects.length; i++) {
-        selects[i].style.maxHeight = height - offset(selects[i]).top - 10 + "px";
-    }
-}
-
-window.addResizeListener = () => {
-    resizeSelectContent();
-    window.addEventListener('resize', resizeSelectContent);
-};

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor

@@ -0,0 +1,47 @@
+@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
+@using GameIdeas.BlazorApp.Shared.Components.Select.Components
+@using GameIdeas.BlazorApp.Shared.Components.Select.Helpers
+
+@typeparam TItem
+@typeparam THeader
+
+<div class="select-container">
+    <div class="button" @onclick=HandleButtonClicked>
+        @ChildContent
+    </div>
+
+    <div class="dropdown @SelectHelper.GetClassFromTheme(Theme)">
+        @if (IsContentOpen)
+        {
+            <div class="content">
+                @if (Params.Headers != null)
+                {
+                    @foreach (var header in Params.Headers)
+                    {
+                        <SelectRow IsSelected=HeaderValues?.Contains(header)
+                                   Label="@Params.GetHeaderLabel(header)" Theme=Theme
+                                   OnClick="_ => HandleHeaderClicked(header)" />
+                    }
+                }
+
+                @if (Params.Headers?.Any() == true)
+                {
+                    <span class="line"></span>
+                }
+
+                @if (Params.Items != null)
+                {
+                    @foreach (var item in Params.Items)
+                    {
+                        <SelectRow IsSelected=Values?.Contains(item)
+                                   Label="@Params.GetItemLabel(item)" Theme=Theme
+                                   OnClick="_ => HandleValueClicked(item)" />
+                    }
+                }
+            </div>
+        }
+    </div>
+</div>
+
+<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
+                IsVisible=IsContentOpen OnClick="HandleContentClosed" />

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.cs

@@ -0,0 +1,85 @@
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Select;
+
+public partial class Select<TItem, THeader>
+{
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public List<TItem> Values { get; set; } = [];
+    [Parameter] public EventCallback<IEnumerable<TItem>> ValuesChanged { get; set; }
+    [Parameter] public List<THeader> HeaderValues { get; set; } = [];
+    [Parameter] public EventCallback<IEnumerable<THeader>> HeaderValuesChanged { get; set; }
+    [Parameter] public SelectParams<TItem, THeader> Params { get; set; } = new();
+    [Parameter] public SelectTheme Theme { get; set; }
+    [Parameter] public SelectType Type { get; set; } = SelectType.Single;
+    [Parameter] public bool DisableClicked { get; set; } = false;
+
+    private bool IsContentOpen = false;
+
+    public void Close() =>
+        IsContentOpen = false;
+
+    public void Open() =>
+        IsContentOpen = true;
+
+    private void HandleButtonClicked()
+    {
+        if (!DisableClicked)
+            IsContentOpen = !IsContentOpen;
+    }
+
+    private void HandleContentClosed() =>
+        IsContentOpen = false;
+
+    protected override void OnInitialized()
+    {
+        if (Params.DefaultItem != null)
+        {
+            Values.Add(Params.DefaultItem);
+        }
+
+        if (Params.DefaultHeader != null)
+        {
+            HeaderValues.Add(Params.DefaultHeader);
+        }
+    }
+
+    private async Task HandleValueClicked(TItem value)
+    {
+        if (Type != SelectType.Multiple || Values == null)
+        {
+            Values = [];
+        }
+
+        if (Values?.Contains(value) == true)
+        {
+            Values.Remove(value);
+        }
+        else
+        {
+            Values!.Add(value);
+        }
+
+        await ValuesChanged.InvokeAsync(Values);
+    }
+
+    private async Task HandleHeaderClicked(THeader header)
+    {
+        if (Type != SelectType.Multiple || HeaderValues == null)
+        {
+            HeaderValues = [];
+        }
+
+        if (HeaderValues?.Contains(header) == true)
+        {
+            HeaderValues.Remove(header);
+        }
+        else
+        {
+            HeaderValues!.Add(header);
+        }
+
+        await HeaderValuesChanged.InvokeAsync(HeaderValues);
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Select.razor.css

@@ -0,0 +1,75 @@
+.select-container {
+    position: relative;
+}
+
+.button {
+    z-index: var(--index-component)
+}
+
+.dropdown {
+    overflow: auto;
+    margin-top: 4px;
+    position: absolute;
+    z-index: var(--index-dropdown);
+    border-radius: var(--small-radius);
+    width: 100%;
+}
+
+.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;
+    right: 0;
+}
+
+.navigation .content {
+    background: var(--violet);
+}
+
+/***** Sort Theme *****/
+.dropdown.sort {
+    width: auto;
+}
+
+.sort .content {
+    padding: 4px 0;
+}
+
+    .sort .content .line {
+        display: block;
+        margin: 2px 6px;
+        border-bottom: 2px solid var(--input-selected);
+    }
+
+

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor

@@ -1,40 +0,0 @@
-@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
-@using GameIdeas.BlazorApp.Shared.Components.Select.Components
-@typeparam TItem 
-@typeparam THeader
-
-<div class="select-list">
-    <div class="select-button" @onclick=HandleButtonClicked>
-        @ChildContent
-    </div>
-
-    <div class="select-container @(AlignRight ? "align-right" : "")">
-        @if (IsContentOpen)
-        {
-            <div class="select-content @(Enum.GetName(Theme)?.ToLower())">
-                @foreach (var header in Headers)
-                {
-                    <SelectListElement TItem="THeader"
-                                       Value="header"
-                                       ValueChanged="HandleHeaderClicked"
-                                       Theme="Theme" />
-                }
-                @if (Headers.Any())
-                {
-                    <span class="line"></span>
-                }
-                @foreach (var item in Items)
-                {
-                    <SelectListElement TItem="TItem"
-                                       Value="item"
-                                       ValueChanged="HandleItemClicked"
-                                       Theme="Theme" />
-                }
-            </div>
-        }
-    </div>
-</div>
-
-<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
-                IsVisible=IsContentOpen OnClick="HandleContentClosed" />
-

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs

@@ -1,56 +0,0 @@
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
-using Microsoft.AspNetCore.Components;
-
-namespace GameIdeas.BlazorApp.Shared.Components.Select;
-
-public partial class SelectList<TItem, THeader> 
-{
-    [Parameter] public RenderFragment? ChildContent { get; set; }
-    [Parameter] public TItem? Value { get; set; }
-    [Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
-    [Parameter] public THeader? Header { get; set; }
-    [Parameter] public EventCallback<THeader?> HeaderChanged { get; set; }
-    [Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
-    [Parameter] public IEnumerable<SelectElement<THeader>> Headers { get; set; } = [];
-    [Parameter] public SelectListTheme Theme { get; set; }
-    [Parameter] public bool AlignRight { get; set; }
-
-    private bool IsContentOpen = false;
-
-    public void Close() =>
-        IsContentOpen = false;
-
-    private void HandleButtonClicked() =>
-        IsContentOpen = !IsContentOpen;
-
-    private void HandleContentClosed()
-    {
-        IsContentOpen = false;
-    }
-
-    private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
-    {
-        foreach (var item in Items)
-        {
-            item.IsSelected = false;
-        }
-
-        selectedValue.IsSelected = true;
-
-        Value = selectedValue.Item;
-        await ValueChanged.InvokeAsync(Value);
-    }
-
-    private async Task HandleHeaderClicked(SelectElement<THeader> selectedValue)
-    {
-        foreach (var header in Headers)
-        {
-            header.IsSelected = false;
-        }
-
-        selectedValue.IsSelected = true;
-
-        Header = selectedValue.Item;
-        await HeaderChanged.InvokeAsync(Header);
-    }
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css

@@ -1,45 +0,0 @@
-.select-list {
-    position: relative;
-}
-
-.select-container {
-    margin-top: 4px;
-    position: absolute;
-    z-index: var(--index-dropdown)
-}
-
-.align-right {
-    right: 0;
-}
-
-.select-content {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    border-radius: var(--small-radius);
-    animation-name: fade-in;
-    animation-duration: 0.4s;
-}
-
-.select-button {
-    z-index: var(--index-component)
-}
-
-.line {
-    margin: 2px 6px;
-    border-bottom: 2px solid var(--input-selected);
-}
-
-
-/***** Navigation Theme *****/
-.select-content.navigation {
-    background: var(--violet);
-    box-shadow: var(--drop-shadow);
-}
-
-/***** Sort Theme *****/
-.select-content.sort {
-    background: var(--dropdown-content);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.cs

@@ -0,0 +1,46 @@
+using GameIdeas.BlazorApp.Shared.Components.Search;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.Select;
+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;
+    private Select<TItem, string>? Select;
+    protected override void OnParametersSet()
+    {
+        SelectParams = new()
+        {
+            Items = Items,
+            GetItemLabel = GetLabel
+        };
+
+        base.OnParametersSet();
+    }
+    private async Task HandleValuesChanged(IEnumerable<TItem> values)
+    {
+        Values = values.ToList();
+        SearchInput?.SetText(string.Join(", ", Values.Select(GetLabel)));
+        await ValuesChanged.InvokeAsync(values.ToList());
+    }
+
+    private void HandleClearClicked()
+    {
+        Values = [];
+    }
+
+    private void HandleFocusIn()
+    {
+        Select?.Open();
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectSearch/SelectSearch.razor.css

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

src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs

@@ -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.");

src/GameIdeas/GameIdeas.Shared/Dto/CategoriesDto.cs

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

src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs

@@ -14,9 +14,9 @@ public class GameDto
     public double? StorageSpace { get; set; }
     public string? Description { get; set; }
     public int Interest { get; set; } = 3;
-    public IEnumerable<PlatformDto>? Platforms { get; set; }
+    public List<PlatformDto>? Platforms { get; set; }
-    public IEnumerable<PropertyDto>? Properties { get; set; }
+    public List<PropertyDto>? Properties { get; set; }
-    public IEnumerable<TagDto>? Tags { get; set; }
+    public List<TagDto>? Tags { get; set; }
-    public IEnumerable<PublisherDto>? Publishers { get; set; }
+    public List<PublisherDto>? Publishers { get; set; }
-    public IEnumerable<DeveloperDto>? Developers { get; set; }
+    public List<DeveloperDto>? Developers { get; set; }
 }

src/GameIdeas/GameIdeas.Shared/Dto/GameFilterDto.cs

@@ -1,16 +1,19 @@
-namespace GameIdeas.Shared.Dto;
+
+namespace GameIdeas.Shared.Dto;
 
 public class GameFilterDto
 {
-    public IEnumerable<string>? Platforms { get; set; }
+    public SortTypeDto? SortType { get; set; }
-    public string? Name { get; set; }
+    public SortPropertyDto? SortProperty { get; set; }
-    public IEnumerable<string>? Tags { get; set; }
+    public string? Title { get; set; }
-    public IEnumerable<string>? Properties { get; set; }
+    public List<PlatformDto>? Platforms { get; set; }
-    public int? MinInterest { get; set; }
+    public List<PropertyDto>? Properties { get; set; }
-    public int? MaxInterest { get; set; }
+    public List<TagDto>? Tags { get; set; }
-    public IEnumerable<int>? ReleaseYears { get; set; }
+    public List<PublisherDto>? Publishers { get; set; }
-    public IEnumerable<int>? PublisherIds { get; set; }
+    public List<DeveloperDto>? Developers { get; set; }
-    public IEnumerable<int>? DeveloperIds { get; set; }
+    public int MinInterest { get; set; } = 1;
-    public IEnumerable<int>? CreationUserIds { get; set; }
+    public int MaxInterest { get; set; } = 5;
-    public IEnumerable<int>? ModificationUserIds { get; set; }
+    public List<int>? ReleaseYears { get; set; }
+    public int? MinStorageSize { get; set; }
+    public int? MaxStorageSize { get; set; }
 }

src/GameIdeas/GameIdeas.Shared/Dto/SortPropertyDto.cs

@@ -0,0 +1,7 @@
+namespace GameIdeas.Shared.Dto;
+
+public class SortPropertyDto
+{
+    public Func<GameDto, object>? SortProperty { get; set; }
+    public string Label { get; set; } = string.Empty;
+}

src/GameIdeas/GameIdeas.Shared/Dto/SortTypeDto.cs

@@ -0,0 +1,9 @@
+using GameIdeas.Shared.Enum;
+
+namespace GameIdeas.Shared.Dto;
+
+public class SortTypeDto
+{
+    public SortType SortType { get; set; } = SortType.Ascending;
+    public string Label { get; set; } = string.Empty;
+}

src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json

@@ -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",

src/GameIdeas/Server/GameIdeas.WebAPI/Services/CategoryService.cs

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