From 73114e932127022cfe852747355fd6424474e38d Mon Sep 17 00:00:00 2001 From: Egamorf Date: Sun, 2 Mar 2025 19:51:43 +0100 Subject: [PATCH] add sort button --- .../Pages/Games/Filter/GameFilter.razor | 23 ++++++++++++ .../Pages/Games/Filter/GameFilter.razor.cs | 37 +++++++++++++++++++ .../Pages/Games/Filter/GameFilter.razor.css | 17 +++++++++ .../Pages/Games/Filter/GameFilterParams.cs | 10 +++++ .../Pages/Games/GamesBase.razor | 4 +- .../Pages/Games/Header/HeaderGame.razor | 3 -- .../Pages/Games/Header/HeaderGame.razor.cs | 6 --- .../Pages/Games/Header/HeaderGame.razor.css | 1 - .../Components/Account/AccountSetting.cs | 20 ---------- .../Account/AccountSettings.razor.css | 6 +-- .../Components/SelectListElement.razor.css | 26 +++++++++++-- .../Components/Select/SelectList.razor.css | 5 ++- .../GameIdeas.BlazorApp/wwwroot/css/app.css | 1 + src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs | 7 ++++ .../GameIdeas.Shared/Enum/SortType.cs | 7 ++++ 15 files changed, 133 insertions(+), 40 deletions(-) create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css delete mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs create mode 100644 src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs create mode 100644 src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor new file mode 100644 index 0000000..79c9572 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor @@ -0,0 +1,23 @@ +@using GameIdeas.BlazorApp.Shared.Components.Select +@using GameIdeas.Shared.Dto + + + + + + + + + + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs new file mode 100644 index 0000000..5868c38 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs @@ -0,0 +1,37 @@ +using GameIdeas.BlazorApp.Shared.Components.Select; +using GameIdeas.Shared.Dto; +using GameIdeas.Shared.Enum; +using Microsoft.AspNetCore.Components.Forms; + +namespace GameIdeas.BlazorApp.Pages.Games.Filter; + +public partial class GameFilter +{ + private readonly IEnumerable>> SortTypes = [ + new() { Item = _ => SortType.Ascending, Label = "Ascendant", IsSelected = true }, + new() { Item = _ => SortType.Descending, Label = "Descendant" } + ]; + + private readonly IEnumerable>> GameProperties = [ + new() { Item = game => game?.Name, Label = "Nom", IsSelected = true }, + new() { Item = game => game?.ReleaseDate, Label = "Date de parution" } + ]; + + private EditContext? EditContext; + private GameFilterParams GameFilterParams = new(); + + protected override void OnInitialized() + { + EditContext = new EditContext(GameFilterParams); + EditContext.OnFieldChanged += HandleFormChanged; + } + + private void HandleFormChanged(object? sender, FieldChangedEventArgs e) + { + throw new NotImplementedException(); + } + private void HandleSortTypeChanged(Func getHeader) + { + GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending; + } +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css new file mode 100644 index 0000000..a1e4e53 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css @@ -0,0 +1,17 @@ +.sort-button { + height: 28px; + width: 28px; + border-radius: var(--small-radius); + background: var(--black); + overflow: hidden; +} + +.sort-button svg { + fill: var(--white); + padding: 2px; +} + + .sort-button svg:hover { + cursor: pointer; + background: var(--low-white); + } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs new file mode 100644 index 0000000..c98d496 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs @@ -0,0 +1,10 @@ +using GameIdeas.Shared.Enum; +using GameIdeas.Shared.Dto; + +namespace GameIdeas.BlazorApp.Pages.Games.Filter; + +public class GameFilterParams +{ + public SortType? SortType { get; set; } + public Func? GameProperty { get; set; } +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor index 0e9af03..d317dda 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor @@ -1,6 +1,6 @@ @page "/Games" @using GameIdeas.BlazorApp.Layouts -@using GameIdeas.BlazorApp.Pages.Games.Header +@using GameIdeas.BlazorApp.Pages.Games.Filter @using GameIdeas.BlazorApp.Shared.Components @using GameIdeas.BlazorApp.Shared.Layouts.Header @using GameIdeas.Resources @@ -11,6 +11,6 @@ - + \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor deleted file mode 100644 index 171fad3..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs deleted file mode 100644 index 875ea39..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs +++ /dev/null @@ -1,6 +0,0 @@ -namespace GameIdeas.BlazorApp.Pages.Games.Header; - -public partial class HeaderGame -{ - -} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css deleted file mode 100644 index 5f28270..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs deleted file mode 100644 index 487c78a..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs +++ /dev/null @@ -1,20 +0,0 @@ -namespace GameIdeas.BlazorApp.Shared.Components.Account; - -public enum AccountSetting -{ - Logout -} - -public class AccountSettingParams -{ - public string Label { get; set; } - public AccountSetting AccountSetting { get; set; } - public bool ForConnected { get; set; } - - public AccountSettingParams(string label, AccountSetting accountSetting, bool forConnected) - { - Label = label; - AccountSetting = accountSetting; - ForConnected = forConnected; - } -} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css index de479fc..7550294 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css @@ -4,7 +4,7 @@ position: fixed; animation-name: fade-in; animation-duration: 0.4s; - border: 2px solid var(--light-grey); + border: 2px solid var(--low-white); background: var(--black); right: 10px; margin-top: 4px; @@ -17,7 +17,7 @@ .login-form { display: flex; flex-direction: column; - padding: 20px 6px; + padding: 20px 8px; gap: 20px; max-width: 400px; } @@ -31,7 +31,7 @@ ::deep .input-text { background: var(--light-grey); - border: 2px solid rgb(255, 255, 255, 0.3); + border: 2px solid var(--low-white); border-radius: var(--small-radius); padding: 6px; color: var(--white); diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css index 9f39b89..38ad19b 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css @@ -25,6 +25,26 @@ } /***** Sort Theme *****/ -.sort .select-label:hover { - color: var(--light-grey); -} \ No newline at end of file +.sort { + gap: 6px; + display: flex; + flex-direction: row; + width: 100%; + padding: 2px 6px; +} + + .sort:hover { + background: var(--low-white); + } + +.sort .selected { + width: 20px; + height: 20px; +} + +.sort .select-label { + text-wrap: nowrap; + margin-right: 6px; +} + + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css index ead1cd6..bdbf6ba 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css @@ -21,8 +21,8 @@ } .line { - margin: 0 6px; - border-bottom: 2px solid var(--light-grey); + margin: 2px 6px; + border-bottom: 2px solid var(--low-white); } @@ -36,5 +36,6 @@ .select-content.sort { background: var(--black); box-shadow: var(--drop-shadow); + padding: 4px 0; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css index b9df5af..b744d36 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css @@ -10,6 +10,7 @@ --light-grey: #5C5C5E; --black: rgba(44, 43, 46, 0.8); --white: #fff; + --low-white: rgb(255, 255, 255, 0.1); --semi-black: rgba(0, 0, 0, 0.5); --line-black: rgba(0, 0, 0, 0.2); --small-radius: 4px; diff --git a/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs b/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs new file mode 100644 index 0000000..293a672 --- /dev/null +++ b/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs @@ -0,0 +1,7 @@ +namespace GameIdeas.Shared.Dto; + +public class GameDto +{ + public string? Name { get; set; } + public string? ReleaseDate { get; set; } +} \ No newline at end of file diff --git a/src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs b/src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs new file mode 100644 index 0000000..e3091cc --- /dev/null +++ b/src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs @@ -0,0 +1,7 @@ +namespace GameIdeas.Shared.Enum; + +public enum SortType +{ + Ascending, + Descending +}