PRJ-Game-Ideas/game-ideas
3
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Rework select component #14

Merged
Egamorf merged 7 commits from feature/rework-select-list into main 2025-04-14 09:01:50 +02:00
Conversation 0 Commits 7 Files Changed 44 +394 -93
21 changed files with 394 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d0ac061d18 - Show all commits

41
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor
View File

@@ -1,45 +1,32 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@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
<MultipleSelectList TItem="PlatformDto"
@bind-Values=GameFilter!.Platforms
Placeholder="@ResourcesKey.Platforms"
Theme="SelectListTheme.AdvancedFilter" />
Theme="Theme" />
<MultipleSelectList TItem="string"
<MultipleSelectList TItem="TagDto"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams!.Tags
Theme="SelectListTheme.AdvancedFilter" />
@bind-Values=GameFilter.Tags
Theme="Theme" />
</div>
<MultipleSelectList TItem="string"
<MultipleSelectList TItem="PublisherDto"
Placeholder="@ResourcesKey.Publishers"
@bind-Values=GameFilterParams!.Publishers
Theme="SelectListTheme.AdvancedFilter" />
@bind-Values=GameFilter!.Publishers
Theme="Theme" />
<MultipleSelectList TItem="string"
<MultipleSelectList TItem="DeveloperDto"
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" />
@bind-Values=GameFilter!.Developers
Theme="Theme" />
<span class="title">@ResourcesKey.LastAdd</span>
</div>

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

@@ -1,10 +1,12 @@
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; }
[Parameter] public EventCallback<GameFilterDto> GameFilterChanged { get; set; }
private readonly SelectListTheme Theme = SelectListTheme.AdvancedFilter;
}

29
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
View File

@@ -1,23 +1,22 @@
@using GameIdeas.BlazorApp.Shared.Components.Search
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Components.SelectList
@using GameIdeas.BlazorApp.Shared.Components.SelectList.Models
@using GameIdeas.BlazorApp.Shared.Components.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,28 +31,28 @@
</div>
<div class="search-container">
<SearchInput @bind-Text=GameFilterParams.SearchName
Placeholder="@ResourcesKey.Research" />
<SearchInput @bind-Text=Value.Title
Placeholder="@ResourcesKey.Research" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
<MultipleSelectList TItem="PlatformDto"
Placeholder="@ResourcesKey.Platforms"
@bind-Values=GameFilterParams.Platforms
@bind-Values=Value.Platforms
Theme="SelectListTheme.Filter" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
<MultipleSelectList TItem="TagDto"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams.Tags
@bind-Values=Value.Tags
Theme="SelectListTheme.Filter" />
</div>
<div class="slider-container">
<SliderRange Params="SliderRangeParams"
@bind-Max=GameFilterParams.MaxRating
@bind-Min=GameFilterParams.MinRating />
@bind-Max=Value.MaxInterest
@bind-Min=Value.MinInterest />
</div>
</div>

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

@@ -1,4 +1,4 @@
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
using GameIdeas.BlazorApp.Shared.Components.SliderRange;
using GameIdeas.BlazorApp.Shared.Models;
using GameIdeas.Shared.Dto;
@@ -10,19 +10,21 @@ 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; }
private readonly IEnumerable<SelectElement<SortType>> SortTypes = [
new(SortType.Ascending, "Ascendant") { IsSelected = true },
new(SortType.Descending, "Descendant")
private SelectParams<SortPropertyDto, SortTypeDto> SelectParams = new();
private readonly IEnumerable<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 IEnumerable<SortPropertyDto> GameProperties = [
new() { SortProperty = game => game.Title!, Label = "Titre" },
new() { SortProperty = game => game.ReleaseDate!, Label = "Date de parution" }
];
private EditContext? EditContext;
@@ -31,10 +33,20 @@ public partial class GameFilter
protected override void OnInitialized()
{
EditContext = new EditContext(GameFilterParams);
EditContext = new EditContext(Value);
EditContext.OnFieldChanged += async (s, e) =>
{
await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
await ValueChanged.InvokeAsync(Value);
};
SelectParams = new()
{
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 +55,14 @@ 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);
}
}

21
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
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;
}

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
View File

@@ -13,14 +13,14 @@
<GameHeader AddTypeChanged="HandleAddClicked">
<GameFilter @bind-DisplayType=DisplayType
@bind-GameFilterParams=GameFilterParams />
@bind-Value=GameFilter/>
</GameHeader>
<div class="container">
<div class="content">
</div>
<AdvancedGameFilter @bind-GameFilterParams=GameFilterParams />
<AdvancedGameFilter @bind-GameFilter=GameFilter/>
</div>
<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">

5
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs
View File

@@ -1,14 +1,15 @@
using GameIdeas.BlazorApp.Pages.Games.Filter;
using GameIdeas.BlazorApp.Shared.Components.Popup;
using GameIdeas.BlazorApp.Shared.Models;
using GameIdeas.Shared.Dto;
namespace GameIdeas.BlazorApp.Pages.Games;
public partial class GameBase ()
{
private DisplayType DisplayType = DisplayType.List;
private GameFilterParams GameFilterParams = new();
private GameFilterDto GameFilter = new();
private Popup? ManualAddPopup;
private void HandleAddClicked(AddType addType)
{
switch (addType)

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

@@ -18,7 +18,7 @@
flex-direction: column;
border-radius: var(--small-radius);
animation-name: fade-in;
animation-duration: 0.4s;
animation-duration: 0.2s;
}
.select-button {

16
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Components/SelectRow.razor Normal file
View File

@@ -0,0 +1,16 @@
@using GameIdeas.BlazorApp.Shared.Components.SelectList.Helpers
<div class="select-element @SelectHelper.GetClassFromTheme(Theme)"
@onclick=HandleElementClicked>
<div class="selected">
@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="label">
@Label
</div>
</div>

16
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Components/SelectRow.razor.cs Normal file
View File

@@ -0,0 +1,16 @@
using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components.SelectList.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();
}
}

45
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Components/SelectRow.razor.css Normal file
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;
}

19
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Helpers/SelectHelper.cs Normal file
View File

@@ -0,0 +1,19 @@
using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
namespace GameIdeas.BlazorApp.Shared.Components.SelectList.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 => "advenced-filter",
SelectTheme.Creation => "creation",
_ => string.Empty
};
}
}

12
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectParams.cs Normal file
View File

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

10
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectTheme.cs Normal file
View File

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

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Models/SelectType.cs Normal file
View File

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

41
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor Normal file
View File

@@ -0,0 +1,41 @@
@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
@using GameIdeas.BlazorApp.Shared.Components.SelectList.Components
@using GameIdeas.BlazorApp.Shared.Components.SelectList.Helpers
@typeparam TItem
@typeparam THeader
<div class="select-container">
<div class="button" @onclick=HandleButtonClicked>
@ChildContent
</div>
<div class="dropdown @(AlignRight ? "align-right" : "")">
@if (IsContentOpen)
{
<div class="content @SelectHelper.GetClassFromTheme(Theme)">
@foreach (var header in Params.Headers)
{
<SelectRow IsSelected=HeaderValues?.Contains(header)
Label="@Params.GetHeaderLabel(header)" Theme=Theme
OnClick="_ => HandleHeaderClicked(header)" />
}
@if (Params.Headers.Any())
{
<span class="line"></span>
}
@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" />

74
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.cs Normal file
View File

@@ -0,0 +1,74 @@
using GameIdeas.BlazorApp.Shared.Components.SelectList.Models;
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components.SelectList;
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 AlignRight { get; set; } = false;
private bool IsContentOpen = false;
public void Close() =>
IsContentOpen = false;
private void HandleButtonClicked() =>
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?.Clear();
}
if (Values?.Contains(value) == true)
{
Values.Remove(value);
}
Values?.Add(value);
await ValuesChanged.InvokeAsync(Values);
StateHasChanged();
}
private async Task HandleHeaderClicked(THeader header)
{
if (Type != SelectType.Multiple)
{
HeaderValues?.Clear();
}
if (HeaderValues?.Contains(header) == true)
{
HeaderValues.Remove(header);
}
HeaderValues?.Add(header);
await HeaderValuesChanged.InvokeAsync(HeaderValues);
}
}

52
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SelectList/Select.razor.css Normal file
View File

@@ -0,0 +1,52 @@
.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);
}
.dropdown.align-right {
right: 0;
}
.content {
overflow: hidden;
display: flex;
flex-direction: column;
animation-name: fade-in;
animation-duration: 0.2s;
}
.line {
display: none;
}
/***** Navigation Theme *****/
.content.navigation {
background: var(--violet);
box-shadow: var(--drop-shadow);
}
/***** Sort Theme *****/
.content.sort {
background: var(--dropdown-content);
box-shadow: var(--drop-shadow);
padding: 4px 0;
}
.content.sort .line {
display: block;
margin: 2px 6px;
border-bottom: 2px solid var(--input-selected);
}

25
src/GameIdeas/GameIdeas.Shared/Dto/GameFilterDto.cs
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 SortTypeDto? SortType { get; set; }
public SortPropertyDto? SortProperty { get; set; }
public string? Title { get; set; }
public IEnumerable<PlatformDto>? Platforms { get; set; }
public IEnumerable<PropertyDto>? Properties { get; set; }
public IEnumerable<TagDto>? Tags { get; set; }
public IEnumerable<PublisherDto>? Publishers { get; set; }
public IEnumerable<DeveloperDto>? Developers { get; set; }
public int MinInterest { get; set; } = 1;
public int MaxInterest { get; set; } = 5;
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 int? MinStorageSize { get; set; }
public int? MaxStorageSize { get; set; }
}

7
src/GameIdeas/GameIdeas.Shared/Dto/SortPropertyDto.cs Normal file
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;
}

9
src/GameIdeas/GameIdeas.Shared/Dto/SortTypeDto.cs Normal file
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;
}