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.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,5 +1,5 @@
 using GameIdeas.BlazorApp.Shared.Components.Popup;
-using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
 using GameIdeas.BlazorApp.Shared.Components.Slider;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
@@ -12,12 +12,11 @@ public partial class GameCreationForm
 {
     [Inject] private IJSRuntime Js { get; set; } = default!;
     [CascadingParameter] private Popup? Popup { get; set; }
-    [Parameter] public CategoriesDto Categories { get; set; } = new();
+    [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()

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

@@ -24,7 +24,7 @@
                 </div>
                 <Select @ref="SelectListAdd" TItem="KeyValuePair<AddType, string>" THeader="object" 
                         ValuesChanged=HandleAddTypeClicked Params=SelectParams
-                        Theme="SelectTheme.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" />

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

@@ -1,15 +0,0 @@
-@typeparam TItem
-
-<div class="select-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
-    <div class="selected">
-        @if (Value != null && Value.IsSelected)
-        {
-            <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">
-        @Value?.Label
-    </div>
-</div>

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/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/SelectTheme.cs

@@ -1,10 +0,0 @@
-namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
-
-public enum SelectListTheme
-{
-    Navigation,
-    Sort,
-    Filter,
-    AdvancedFilter,
-    Creation
-}

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/SelectList/Select.razor

@@ -10,10 +10,10 @@
         @ChildContent
     </div>
 
-    <div class="dropdown @(AlignRight ? "align-right" : "")">
+    <div class="dropdown @SelectHelper.GetClassFromTheme(Theme)">
         @if (IsContentOpen)
         {
-            <div class="content @SelectHelper.GetClassFromTheme(Theme)">
+            <div class="content">
                 @if (Params.Headers != null)
                 {
                     @foreach (var header in Params.Headers)

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

@@ -13,7 +13,6 @@ public partial class Select<TItem, THeader>
     [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 AlignRight { get; set; } = false;
 
     private bool IsContentOpen = false;
 

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

@@ -15,10 +15,6 @@
     width: 100%;
 }
 
-    .dropdown.align-right {
-        right: 0;
-    }
-
 .content {
     background: var(--dropdown-content);
     overflow: hidden;
@@ -54,9 +50,10 @@
 /***** Navigation Theme *****/
 .dropdown.navigation {
     width: auto;
+    right: 0;
 }
 
-.content.navigation {
+.navigation .content {
     background: var(--violet);
 }
 
@@ -65,11 +62,11 @@
     width: auto;
 }
 
-.content.sort {
+.sort .content {
     padding: 4px 0;
 }
 
-    .content.sort .line {
+    .sort .content .line {
         display: block;
         margin: 2px 6px;
         border-bottom: 2px solid var(--input-selected);

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

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

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; }
 }