Rework select component (#14)

Reviewed-on: #14
This commit was merged in pull request #14.
This commit is contained in:
2025-04-14 09:01:50 +02:00
parent 225e8ba140
commit 3d713d5749
44 changed files with 577 additions and 604 deletions

View File

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

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,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)
{

View File

@@ -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"
@bind-Values=GameFilterParams!.Platforms
Placeholder="@ResourcesKey.Platforms"
Theme="SelectListTheme.AdvancedFilter" />
<SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
@bind-Values=GameFilter.Platforms @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Platforms" />
<MultipleSelectList TItem="string"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams!.Tags
Theme="SelectListTheme.AdvancedFilter" />
<SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
@bind-Values=GameFilter.Tags @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Tags" />
</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"
Placeholder="@ResourcesKey.Publishers"
@bind-Values=GameFilterParams!.Publishers
Theme="SelectListTheme.AdvancedFilter" />
<SelectSearch TItem="DeveloperDto" Placeholder="@ResourcesKey.Developers" GetLabel="@(p => p.Name)"
@bind-Values=GameFilter.Developers @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Developers" />
<MultipleSelectList TItem="string"
Placeholder="@ResourcesKey.Developers"
@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" />
<SelectSearch TItem="PublisherDto" Placeholder="@ResourcesKey.Publishers" GetLabel="@(p => p.Name)"
@bind-Values=GameFilter.Publishers @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Publishers" />
<span class="title">@ResourcesKey.LastAdd</span>
</div>

View File

@@ -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 EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
[Parameter] public GameFilterDto GameFilter { get; set; } = new();
[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);
}
}

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,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"
@bind-Value=GameFilterParams.SortProperty
THeader="SortType" Headers="SortTypes"
@bind-Header=GameFilterParams.SortType
Theme="SelectListTheme.Sort">
<Select TItem="SortPropertyDto" ValuesChanged=HandleSortPropertyClicked
THeader="SortTypeDto" HeaderValuesChanged=HandleSortTypeClicked
Params=SelectParams Theme="SelectTheme.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" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
Placeholder="@ResourcesKey.Platforms"
@bind-Values=GameFilterParams.Platforms
Theme="SelectListTheme.Filter" />
<SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
@bind-Values=Value.Platforms @bind-Values:after="HandleValueChanged" Theme="SelectTheme.Filter" Items="Categories?.Platforms" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams.Tags
Theme="SelectListTheme.Filter" />
<SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
@bind-Values=Value.Tags @bind-Values:after="HandleValueChanged" Theme="SelectTheme.Filter" Items="Categories?.Tags" />
</div>
<div class="slider-container">
<SliderRange Params="SliderRangeParams"
@bind-Max=GameFilterParams.MaxRating
@bind-Min=GameFilterParams.MinRating />
@bind-Max="Value.MaxInterest" @bind-Max:after="HandleValueChanged"
@bind-Min="Value.MinInterest" @bind-Min:after="HandleValueChanged" />
</div>
</div>

View File

@@ -10,31 +10,36 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
public partial class GameFilter
{
[Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
[Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
[Parameter] public GameFilterDto Value { get; set; } = new();
[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 },
new(SortType.Descending, "Descendant")
private readonly List<SortTypeDto> SortTypes = [
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 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(GameFilterParams);
EditContext.OnFieldChanged += async (s, e) =>
SelectParams = new()
{
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);
}
}

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

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

View File

@@ -12,17 +12,18 @@
<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
<GameHeader AddTypeChanged="HandleAddClicked">
<GameFilter @bind-DisplayType=DisplayType
@bind-GameFilterParams=GameFilterParams />
<GameFilter Categories="Categories"
@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>

View File

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

View File

@@ -22,15 +22,15 @@
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<SelectList @ref="SelectListAdd" TItem="AddType" Items="SelectElements"
ValueChanged=HandleAddTypeClickedAsync THeader="object"
Theme="SelectListTheme.Navigation" AlignRight=true>
<Select @ref="SelectListAdd" TItem="KeyValuePair<AddType, string>" THeader="object"
ValuesChanged=HandleAddTypeClicked Params=SelectParams
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">

View File

@@ -13,23 +13,35 @@ public partial class GameHeader : ComponentBase
[Parameter] public RenderFragment? ChildContent { get; set; }
private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
new SelectElement<AddType>(AddType.Manual, ResourcesKey.ManualAdd),
new SelectElement<AddType> (AddType.Auto, ResourcesKey.AutoAdd)
];
private readonly Dictionary<AddType, string> AddTypes = new() {
{ AddType.Manual, ResourcesKey.ManualAdd },
{ 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()

View File

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

View File

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

View File

@@ -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">
@Value?.Label
<div class="label">
@Label
</div>
</div>

View File

@@ -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();
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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();
}
}

View File

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

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

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

View File

@@ -1,16 +1,19 @@
namespace GameIdeas.Shared.Dto;

namespace GameIdeas.Shared.Dto;
public class GameFilterDto
{
public IEnumerable<string>? Platforms { get; set; }
public string? Name { get; set; }
public IEnumerable<string>? Tags { get; set; }
public IEnumerable<string>? Properties { get; set; }
public int? MinInterest { get; set; }
public int? MaxInterest { get; set; }
public IEnumerable<int>? ReleaseYears { get; set; }
public IEnumerable<int>? PublisherIds { get; set; }
public IEnumerable<int>? DeveloperIds { get; set; }
public IEnumerable<int>? CreationUserIds { get; set; }
public IEnumerable<int>? ModificationUserIds { get; set; }
public SortTypeDto? SortType { get; set; }
public SortPropertyDto? SortProperty { get; set; }
public string? Title { 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 List<int>? ReleaseYears { get; set; }
public int? MinStorageSize { get; set; }
public int? MaxStorageSize { get; set; }
}

View File

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

View File

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

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