src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor

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

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

@@ -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" },
+    ];
+
+
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor

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

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

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs

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

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

@@ -6,6 +6,7 @@
     gap: 6px;
     height: 20px;
     align-items: center;
+    z-index: 501;
 }
 
     .select-element:hover {
@@ -64,4 +65,32 @@
         margin-right: 6px;
     }
 
+/***** Filter Theme *****/
+.filter {
+    padding: 2px 6px;
+}
+
+    .filter:hover {
+        background: var(--low-white);
+    }
+
+    .filter .select-label {
+        text-wrap: nowrap;
+        margin-right: 6px;
+    }
+
+/***** Filter Theme *****/
+.advancedfilter {
+    padding: 2px 6px;
+}
+
+    .advancedfilter:hover {
+        background: var(--low-white);
+    }
+
+    .advancedfilter .select-label {
+        text-wrap: nowrap;
+        margin-right: 6px;
+    }
+
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs

@@ -4,5 +4,6 @@ public enum SelectListTheme
 {
     Navigation,
     Sort,
-    Filter
+    Filter,
+    AdvancedFilter
 }

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

@@ -3,9 +3,10 @@
 @typeparam TItem
 
 <div class="select-list" tabindex="1001" @ref="BaseElement">
-    <div class="select-button" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
+    <div class="select-button @(Enum.GetName(Theme)?.ToLower())" @onfocusin=HandleFocusIn @onfocusout=HandleFocusOut>
         <SearchInput @ref=SearchInput
                      Icon="SearchInputIcon.Dropdown"
+                     Placeholder="@Placeholder"
                      TextChanged="HandleTextChanged"
                      ClearClicked="HandleTextChanged"
                      SearchClicked="HandleSearchClicked" />

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

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

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

@@ -5,6 +5,7 @@
 .select-container {
     margin-top: 4px;
     position: absolute;
+    z-index: 500;
 }
 
 .align-right {
@@ -18,6 +19,7 @@
     border-radius: var(--small-radius);
     animation-name: fade-in;
     animation-duration: 0.4s;
+    z-index: 500;
 }
 
 .line {
@@ -47,3 +49,17 @@
     min-width: 150px;
 }
 
+/***** AdvanceFilter Theme *****/
+.select-content.advancedfilter {
+    background: var(--light-grey);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+    min-width: 150px;
+}
+
+::deep .select-button.advancedfilter .search-container {
+    height: 24px;
+    width: 210px;
+    border: 2px solid var(--low-white);
+}
+

src/GameIdeas/Client/GameIdeas.BlazorApp/_Imports.razor

@@ -6,3 +6,4 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
+@using GameIdeas.Resources

src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs

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

src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json

@@ -1,10 +1,20 @@
 {
-  "GamesIdeas": "Game Ideas",
+    "GamesIdeas": "Game Ideas",
-  "ManualAdd": "Manuel",
+    "ManualAdd": "Manuel",
-  "AutoAdd": "Automatique",
+    "AutoAdd": "Automatique",
-  "Login": "Se connecter",
+    "Login": "Se connecter",
-  "Logout": "Se déconnecter",
+    "Logout": "Se déconnecter",
-  "EnterUsername": "Nom d'utilisateur",
+    "EnterUsername": "Nom d'utilisateur",
-  "EnterPassword": "Mot de passe",
+    "EnterPassword": "Mot de passe",
-  "UserManager": "Gestion des utilisateurs"
+    "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"
 }