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

add sort button

Browse Source
This commit is contained in:
Egamorf
2025-03-02 19:51:43 +01:00
parent ce0c43b48a
commit 73114e9321
15 changed files with 133 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor Normal file
View File

@@ -0,0 +1,23 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.Shared.Dto
<EditForm EditContext="EditContext">
<SelectList TItem="Func<GameDto, object>"
Headers="SortTypes"
Items="GameProperties"
@bind-Value=GameFilterParams.GameProperty
HeaderChanged=HandleSortTypeChanged
Theme="SelectListTheme.Sort">
<Button>
<div class="sort-button">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M18 21L14 17H17V7H14L18 3L22 7H19V17H22M2 19V17H12V19M2 13V11H9V13M2 7V5H6V7H2Z" />
</svg>
</div>
</Button>
</SelectList>
</EditForm>

37
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs Normal file
View File

@@ -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<SelectElement<Func<GameDto?, object?>>> SortTypes = [
new() { Item = _ => SortType.Ascending, Label = "Ascendant", IsSelected = true },
new() { Item = _ => SortType.Descending, Label = "Descendant" }
];
private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> 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<GameDto?, object?> getHeader)
{
GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
}
}

17
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css Normal file
View File

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

10
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs Normal file
View File

@@ -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<GameDto?, object?>? GameProperty { get; set; }
}

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

@@ -1,6 +1,6 @@
@page "/Games" @page "/Games"
@using GameIdeas.BlazorApp.Layouts @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.Components
@using GameIdeas.BlazorApp.Shared.Layouts.Header @using GameIdeas.BlazorApp.Shared.Layouts.Header
@using GameIdeas.Resources @using GameIdeas.Resources
@@ -11,6 +11,6 @@
<HeaderLayout> <HeaderLayout>
<Body> <Body>
<HeaderGame /> <GameFilter />
</Body> </Body>
</HeaderLayout> </HeaderLayout>

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor
View File

@@ -1,3 +0,0 @@


6
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.cs
View File

@@ -1,6 +0,0 @@
namespace GameIdeas.BlazorApp.Pages.Games.Header;
public partial class HeaderGame
{
}

1
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/HeaderGame.razor.css
View File

@@ -1 +0,0 @@


20
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSetting.cs
View File

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

6
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css
View File

@@ -4,7 +4,7 @@
position: fixed; position: fixed;
animation-name: fade-in; animation-name: fade-in;
animation-duration: 0.4s; animation-duration: 0.4s;
border: 2px solid var(--light-grey); border: 2px solid var(--low-white);
background: var(--black); background: var(--black);
right: 10px; right: 10px;
margin-top: 4px; margin-top: 4px;
@@ -17,7 +17,7 @@
.login-form { .login-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 20px 6px; padding: 20px 8px;
gap: 20px; gap: 20px;
max-width: 400px; max-width: 400px;
} }
@@ -31,7 +31,7 @@
::deep .input-text { ::deep .input-text {
background: var(--light-grey); background: var(--light-grey);
border: 2px solid rgb(255, 255, 255, 0.3); border: 2px solid var(--low-white);
border-radius: var(--small-radius); border-radius: var(--small-radius);
padding: 6px; padding: 6px;
color: var(--white); color: var(--white);

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

@@ -25,6 +25,26 @@
} }
/***** Sort Theme *****/ /***** Sort Theme *****/
.sort .select-label:hover { .sort {
color: var(--light-grey); 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;
}

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

@@ -21,8 +21,8 @@
} }
.line { .line {
margin: 0 6px; margin: 2px 6px;
border-bottom: 2px solid var(--light-grey); border-bottom: 2px solid var(--low-white);
} }
@@ -36,5 +36,6 @@
.select-content.sort { .select-content.sort {
background: var(--black); background: var(--black);
box-shadow: var(--drop-shadow); box-shadow: var(--drop-shadow);
padding: 4px 0;
} }

1
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
View File

@@ -10,6 +10,7 @@
--light-grey: #5C5C5E; --light-grey: #5C5C5E;
--black: rgba(44, 43, 46, 0.8); --black: rgba(44, 43, 46, 0.8);
--white: #fff; --white: #fff;
--low-white: rgb(255, 255, 255, 0.1);
--semi-black: rgba(0, 0, 0, 0.5); --semi-black: rgba(0, 0, 0, 0.5);
--line-black: rgba(0, 0, 0, 0.2); --line-black: rgba(0, 0, 0, 0.2);
--small-radius: 4px; --small-radius: 4px;

7
src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs Normal file
View File

@@ -0,0 +1,7 @@
namespace GameIdeas.Shared.Dto;
public class GameDto
{
public string? Name { get; set; }
public string? ReleaseDate { get; set; }
}

7
src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs Normal file
View File

@@ -0,0 +1,7 @@
namespace GameIdeas.Shared.Enum;
public enum SortType
{
Ascending,
Descending
}