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

Feature: Add advanced filter (#9)

Browse Source 
Reviewed-on: #9
This commit was merged in pull request #9.
This commit is contained in:
Egamorf
2025-04-07 21:20:22 +02:00
parent ab17a08b2b
commit 003f2547a3
19 changed files with 272 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor Normal file
View File

@@ -0,0 +1,52 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
<div class="advanced-filter-container">
<span class="title">@ResourcesKey.Filters</span>
<div class="duplicate">
<MultipleSelectList TItem="string"
Items="Plateforms"
@bind-Values=GameFilterParams!.Plateforms
Placeholder="@ResourcesKey.Platforms"
Theme="SelectListTheme.AdvancedFilter" />
<MultipleSelectList TItem="string"
Items="Genres"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams!.Genres
Theme="SelectListTheme.AdvancedFilter" />
</div>
<MultipleSelectList TItem="string"
Items="Publishers"
Placeholder="@ResourcesKey.Publishers"
@bind-Values=GameFilterParams!.Publishers
Theme="SelectListTheme.AdvancedFilter" />
<MultipleSelectList TItem="string"
Items="Developers"
Placeholder="@ResourcesKey.Developers"
@bind-Values=GameFilterParams!.Developers
Theme="SelectListTheme.AdvancedFilter" />
<MultipleSelectList TItem="string"
Items="StorageSizes"
Placeholder="@ResourcesKey.StorageSizes"
@bind-Values=GameFilterParams!.StorageSizes
Theme="SelectListTheme.AdvancedFilter" />
<MultipleSelectList TItem="string"
Items="LastModifiedDates"
Placeholder="@ResourcesKey.LastModification"
@bind-Values=GameFilterParams!.LastModification
Theme="SelectListTheme.AdvancedFilter" />
<MultipleSelectList TItem="string"
Items="ReleaseDates"
Placeholder="@ResourcesKey.ReleaseDates"
@bind-Values=GameFilterParams!.ReleaseDates
Theme="SelectListTheme.AdvancedFilter" />
<span class="title">@ResourcesKey.LastAdd</span>
</div>

62
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs Normal file
View File

@@ -0,0 +1,62 @@
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
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; }
private readonly IEnumerable<SelectElement<string>> Plateforms = [
new() { Item = "Steam", Label = "Steam" },
new() { Item = "GOG", Label = "GOG" },
new() { Item = "Epic games", Label = "Epic games" },
new() { Item = "Ubisoft", Label = "Ubisoft" },
];
private readonly IEnumerable<SelectElement<string>> Genres = [
new() { Item = "Rogue Like", Label = "Rogue Like" },
new() { Item = "Aventure", Label = "Aventure" },
new() { Item = "RPG", Label = "RPG" },
new() { Item = "Fast FPS", Label = "Fast FPS" },
];
private readonly IEnumerable<SelectElement<string>> Publishers = [
new() { Item = "Electronic Arts", Label = "Electronic Arts" },
new() { Item = "Ubisoft", Label = "Ubisoft" },
new() { Item = "Activision Blizzard", Label = "Activision Blizzard" },
new() { Item = "Bethesda", Label = "Bethesda" },
];
private readonly IEnumerable<SelectElement<string>> Developers = [
new() { Item = "CD Projekt Red", Label = "CD Projekt Red" },
new() { Item = "Naughty Dog", Label = "Naughty Dog" },
new() { Item = "Rockstar Games", Label = "Rockstar Games" },
new() { Item = "FromSoftware", Label = "FromSoftware" },
];
private readonly IEnumerable<SelectElement<string>> StorageSizes = [
new() { Item = "1 Go", Label = "1 Go" },
new() { Item = "10 Go", Label = "10 Go" },
new() { Item = "50 Go", Label = "50 Go" },
new() { Item = "100 Go", Label = "100 Go" },
];
private readonly IEnumerable<SelectElement<string>> LastModifiedDates = [
new() { Item = "2023-12-15", Label = "15 D<>cembre 2023" },
new() { Item = "2024-01-20", Label = "20 Janvier 2024" },
new() { Item = "2024-02-05", Label = "5 F<>vrier 2024" },
new() { Item = "2024-03-10", Label = "10 Mars 2024" },
];
private readonly IEnumerable<SelectElement<string>> ReleaseDates = [
new() { Item = "2023-11-11", Label = "11 Novembre 2023" },
new() { Item = "2024-01-25", Label = "25 Janvier 2024" },
new() { Item = "2024-03-03", Label = "3 Mars 2024" },
new() { Item = "2024-04-15", Label = "15 Avril 2024" },
];
}

28
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css Normal file
View File

@@ -0,0 +1,28 @@
.advanced-filter-container {
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 20px;
padding-left: 10px;
height: 100%;
border-left: 2px solid var(--light-grey);
}
.duplicate {
display: none;
flex-direction: column;
gap: 10px;
}
.title {
font-weight: bold;
color: var(--violet);
height: 24px;
align-content: center
}
@media screen and (max-width: 1000px) {
.duplicate {
display: flex;
}
}

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

@@ -11,7 +11,7 @@
<SelectList TItem="Func<GameDto, object>"
Headers="SortTypes"
Items="GameProperties"
@bind-Value=GameFilterParams.SortProperty
@bind-Value=GameFilterParams!.SortProperty
HeaderChanged=HandleSortTypeChanged
Theme="SelectListTheme.Sort">
<Button>
@@ -36,12 +36,14 @@
</div>
<div class="search-container">
<SearchInput @bind-Text=GameFilterParams.SearchName />
<SearchInput @bind-Text=GameFilterParams.SearchName
Placeholder="@ResourcesKey.Research" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
Items="Plateforms"
Placeholder="@ResourcesKey.Platforms"
@bind-Values=GameFilterParams.Plateforms
Theme="SelectListTheme.Filter" />
</div>
@@ -49,6 +51,7 @@
<div class="select-container">
<MultipleSelectList TItem="string"
Items="Genres"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams.Genres
Theme="SelectListTheme.Filter" />
</div>

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

@@ -10,7 +10,7 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
public partial class GameFilter
{
[Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
[Parameter] public GameFilterParams? GameFilterParams { get; set; }
[Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
[Parameter] public DisplayType DisplayType { get; set; }
[Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
@@ -45,7 +45,7 @@ public partial class GameFilter
protected override void OnInitialized()
{
EditContext = new EditContext(GameFilterParams);
EditContext = new EditContext(GameFilterParams!);
EditContext.OnFieldChanged += async (s, e) =>
{
await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
@@ -54,7 +54,7 @@ public partial class GameFilter
private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
{
GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
GameFilterParams!.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
}
private async Task HandleDisplayClicked(DisplayType displayType)

5
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
View File

@@ -10,6 +10,11 @@ public class GameFilterParams
public string? SearchName { get; set; }
public IEnumerable<string>? Plateforms { get; set; }
public IEnumerable<string>? Genres { 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; }
public int MinRating { get; set; }
}

14
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
View File

@@ -11,6 +11,16 @@
<HeaderLayout>
<Body>
<GameFilter @bind-DisplayType=DisplayType />
<GameFilter @bind-DisplayType=DisplayType
@bind-GameFilterParams=GameFilterParams />
</Body>
</HeaderLayout>
</HeaderLayout>
<div class="container">
<div class="content">
</div>
<AdvancedGameFilter @bind-GameFilterParams=GameFilterParams />
</div>

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
View File

@@ -1,3 +1,4 @@
using GameIdeas.BlazorApp.Pages.Games.Filter;
using GameIdeas.BlazorApp.Pages.Games.Models;
namespace GameIdeas.BlazorApp.Pages.Games;
@@ -5,4 +6,5 @@ namespace GameIdeas.BlazorApp.Pages.Games;
public partial class GamesBase ()
{
private DisplayType DisplayType = DisplayType.List;
private GameFilterParams GameFilterParams = new();
}

11
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css
View File

@@ -0,0 +1,11 @@
.container {
margin-top: 20px;
justify-content: space-between;
display: flex;
flex-direction: row;
height: 100%;
}
.content {
}