Feature: Add advanced filter #9
@@ -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>
|
||||
@@ -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" },
|
||||
];
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
.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: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
color: var(--violet);
|
||||
height: 24px;
|
||||
align-content: center
|
||||
}
|
||||
@@ -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,7 +36,8 @@
|
||||
</div>
|
||||
|
||||
<div class="search-container">
|
||||
<SearchInput @bind-Text=GameFilterParams.SearchName />
|
||||
<SearchInput @bind-Text=GameFilterParams.SearchName
|
||||
Placeholder="@ResourcesKey.Research" />
|
||||
</div>
|
||||
|
||||
<div class="select-container">
|
||||
|
||||
@@ -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)
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
.container {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
||||
}
|
||||
@@ -1,8 +1,9 @@
|
||||
<div class="search-container">
|
||||
<input type="text"
|
||||
class="search-field"
|
||||
placeholder="@Placeholder"
|
||||
@bind=@Text
|
||||
@bind:event="oninput"
|
||||
@bind:event="oninput"
|
||||
@bind:after=HandleTextChanged />
|
||||
|
||||
@if (!string.IsNullOrEmpty(Text))
|
||||
|
||||
@@ -5,6 +5,7 @@ namespace GameIdeas.BlazorApp.Shared.Components.Search;
|
||||
public partial class SearchInput
|
||||
{
|
||||
[Parameter] public string? Text { get; set; }
|
||||
[Parameter] public string? Placeholder { get; set; }
|
||||
[Parameter] public EventCallback<string> TextChanged { get; set; }
|
||||
[Parameter] public EventCallback ClearClicked { get; set; }
|
||||
[Parameter] public EventCallback SearchClicked { get; set; }
|
||||
|
||||
@@ -4,5 +4,6 @@ public enum SelectListTheme
|
||||
{
|
||||
Navigation,
|
||||
Sort,
|
||||
Filter
|
||||
Filter,
|
||||
AdvancedFilter
|
||||
}
|
||||
|
||||
@@ -6,6 +6,7 @@
|
||||
<div class="select-button" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
|
||||
<SearchInput @ref=SearchInput
|
||||
Icon="SearchInputIcon.Dropdown"
|
||||
Placeholder="@Placeholder"
|
||||
TextChanged="HandleTextChanged"
|
||||
ClearClicked="HandleTextChanged"
|
||||
SearchClicked="HandleSearchClicked" />
|
||||
|
||||
@@ -11,6 +11,7 @@ public partial class MultipleSelectList<TItem>
|
||||
[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
|
||||
{
|
||||
|
||||
@@ -6,3 +6,4 @@
|
||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
@using Microsoft.AspNetCore.Components.WebAssembly.Http
|
||||
@using Microsoft.JSInterop
|
||||
@using GameIdeas.Resources
|
||||
|
||||
@@ -11,6 +11,16 @@ public class Translations (TranslationService translationService)
|
||||
public string EnterUsername => translationService.Translate(nameof(EnterUsername));
|
||||
public string EnterPassword => translationService.Translate(nameof(EnterPassword));
|
||||
public string UserManager => translationService.Translate(nameof(UserManager));
|
||||
public string Filters => translationService.Translate(nameof(Filters));
|
||||
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 Publishers => translationService.Translate(nameof(Publishers));
|
||||
public string Developers => translationService.Translate(nameof(Developers));
|
||||
public string StorageSizes => translationService.Translate(nameof(StorageSizes));
|
||||
public string LastModification => translationService.Translate(nameof(LastModification));
|
||||
public string ReleaseDates => translationService.Translate(nameof(ReleaseDates));
|
||||
}
|
||||
|
||||
public static class ResourcesKey
|
||||
@@ -30,4 +40,14 @@ public static class ResourcesKey
|
||||
public static string EnterUsername => _instance?.EnterUsername ?? throw new InvalidOperationException("ResourcesKey.EnterUsername is not initialized.");
|
||||
public static string EnterPassword => _instance?.EnterPassword ?? throw new InvalidOperationException("ResourcesKey.EnterPassword is not initialized.");
|
||||
public static string UserManager => _instance?.UserManager ?? throw new InvalidOperationException("ResourcesKey.UserManager is not initialized.");
|
||||
public static string Filters => _instance?.Filters ?? throw new InvalidOperationException("ResourcesKey.Filters is not initialized.");
|
||||
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 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 StorageSizes => _instance?.StorageSizes ?? throw new InvalidOperationException("ResourcesKey.StorageSizes is not initialized.");
|
||||
public static string LastModification => _instance?.LastModification ?? throw new InvalidOperationException("ResourcesKey.LastModification is not initialized.");
|
||||
public static string ReleaseDates => _instance?.ReleaseDates ?? throw new InvalidOperationException("ResourcesKey.ReleaseDates is not initialized.");
|
||||
}
|
||||
@@ -1,10 +1,20 @@
|
||||
{
|
||||
"GamesIdeas": "Game Ideas",
|
||||
"ManualAdd": "Manuel",
|
||||
"AutoAdd": "Automatique",
|
||||
"Login": "Se connecter",
|
||||
"Logout": "Se déconnecter",
|
||||
"EnterUsername": "Nom d'utilisateur",
|
||||
"EnterPassword": "Mot de passe",
|
||||
"UserManager": "Gestion des utilisateurs"
|
||||
"GamesIdeas": "Game Ideas",
|
||||
"ManualAdd": "Manuel",
|
||||
"AutoAdd": "Automatique",
|
||||
"Login": "Se connecter",
|
||||
"Logout": "Se déconnecter",
|
||||
"EnterUsername": "Nom d'utilisateur",
|
||||
"EnterPassword": "Mot de passe",
|
||||
"UserManager": "Gestion des utilisateurs",
|
||||
"Filters": "Les filtres",
|
||||
"LastAdd": "Les ajouts récents",
|
||||
"Research": "Rechercher",
|
||||
"Platforms": "Plateformes",
|
||||
"Genres": "Genres",
|
||||
"Publishers": "Editeurs",
|
||||
"Developers": "Développeurs",
|
||||
"StorageSizes": "Taille d'espace",
|
||||
"LastModification": "Dernière modifications",
|
||||
"ReleaseDates": "Dates de parution"
|
||||
}
|
||||
Reference in New Issue
Block a user