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

Add game header (#5)

Browse Source 
Co-authored-by: Maxime Adler <madler@sqli.com>
Reviewed-on: #5
This commit was merged in pull request #5.
This commit is contained in:
Egamorf
2025-03-20 18:33:28 +01:00
parent 4183b4b616
commit 3dfabdad74
47 changed files with 1043 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,65 @@
@using GameIdeas.BlazorApp.Shared.Components.Search
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Components.SliderRange
@using GameIdeas.Shared.Dto
@using GameIdeas.BlazorApp.Pages.Games.Models
<EditForm EditContext="EditContext">
<div class="form-filter">
<SelectList TItem="Func<GameDto, object>"
Headers="SortTypes"
Items="GameProperties"
@bind-Value=GameFilterParams.SortProperty
HeaderChanged=HandleSortTypeChanged
Theme="SelectListTheme.Sort">
<Button>
<div class="square-button">
<svg class="sort-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M10,13H22V11H10M10,19H22V17H10M10,7H22V5H10M6,7H8.5L5,3.5L1.5,7H4V17H1.5L5,20.5L8.5,17H6V7Z" />
</svg>
</div>
</Button>
</SelectList>
<div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.List))">
<svg class="list-icon @(DisplayType == DisplayType.List ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" />
</svg>
</div>
<div class="square-button" @onclick="@(() => HandleDisplayClicked(DisplayType.Card))">
<svg class="card-icon @(DisplayType == DisplayType.Card ? "selected-icon" : "")" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
</svg>
</div>
<div class="search-container">
<SearchInput @bind-Text=GameFilterParams.SearchName />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
Items="Plateforms"
@bind-Values=GameFilterParams.Plateforms
Theme="SelectListTheme.Filter" />
</div>
<div class="select-container">
<MultipleSelectList TItem="string"
Items="Genres"
@bind-Values=GameFilterParams.Genres
Theme="SelectListTheme.Filter" />
</div>
<div class="slider-container">
<SliderRange Params="SliderRangeParams"
@bind-Max=GameFilterParams.MaxRating
@bind-Min=GameFilterParams.MinRating />
</div>
</div>
</EditForm>

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

@@ -0,0 +1,65 @@
using GameIdeas.BlazorApp.Pages.Games.Models;
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Components.SliderRange;
using GameIdeas.Shared.Dto;
using GameIdeas.Shared.Enum;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
namespace GameIdeas.BlazorApp.Pages.Games.Filter;
public partial class GameFilter
{
[Parameter] public GameFilterParams GameFilterParams { get; set; } = new();
[Parameter] public EventCallback<GameFilterParams> GameFilterParamsChanged { get; set; }
[Parameter] public DisplayType DisplayType { get; set; }
[Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
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 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 EditContext? EditContext;
private SliderRangeParams SliderRangeParams =
new() { Min = 1, ValueMin = 1, ValueMax = 5, Max = 5 };
protected override void OnInitialized()
{
EditContext = new EditContext(GameFilterParams);
EditContext.OnFieldChanged += async (s, e) =>
{
await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
};
}
private void HandleSortTypeChanged(Func<GameDto?, object?> getHeader)
{
GameFilterParams.SortType = (SortType?)getHeader(null) ?? SortType.Ascending;
}
private async Task HandleDisplayClicked(DisplayType displayType)
{
DisplayType = displayType;
await DisplayTypeChanged.InvokeAsync(displayType);
}
}

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

@@ -0,0 +1,69 @@
.form-filter {
display: flex;
flex-direction: row;
gap: 8px;
align-items: center;
}
.search-container {
width: 150px;
min-width: 150px;
}
.slider-container {
width: 150px;
min-width: 150px;
}
.select-container {
width: 150px;
min-width: 150px;
}
.square-button {
height: 28px;
min-height: 28px;
width: 28px;
min-width: 28px;
border-radius: var(--small-radius);
background: var(--black);
overflow: hidden;
}
.square-button:first-child {
margin-right: 16px;
}
.square-button svg {
fill: var(--white);
}
.square-button svg:hover {
cursor: pointer;
background: var(--low-white);
}
.selected-icon {
fill: var(--violet) !important;
}
.sort-icon {
padding: 2px;
}
.list-icon {
padding-right: 1px;
padding-top: 0.5px;
padding-bottom: 0.5px;
}
.card-icon {
padding-top: 1px;
padding-right: 1px;
}
@media screen and (max-width: 1000px) {
.select-container {
display: none;
}
}

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

@@ -0,0 +1,15 @@
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?>? SortProperty { get; set; }
public string? SearchName { get; set; }
public IEnumerable<string>? Plateforms { get; set; }
public IEnumerable<string>? Genres { get; set; }
public int MaxRating { get; set; }
public int MinRating { get; set; }
}

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

@@ -1,15 +1,16 @@
@page "/Games"
@using GameIdeas.BlazorApp.Layouts
@using GameIdeas.BlazorApp.Pages.Games.Filter
@using GameIdeas.BlazorApp.Shared.Components
@using GameIdeas.BlazorApp.Shared.Headers
@using GameIdeas.BlazorApp.Shared.Layouts.Header
@using GameIdeas.Resources
@layout MainLayout
<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
<HeaderBase>
<HeaderLayout>
<Body>
<div>PROUT</div>
<GameFilter @bind-DisplayType=DisplayType />
</Body>
</HeaderBase>
</HeaderLayout>

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

@@ -1,6 +1,8 @@
using GameIdeas.BlazorApp.Pages.Games.Models;
namespace GameIdeas.BlazorApp.Pages.Games;
public partial class GamesBase ()
{
private DisplayType DisplayType = DisplayType.List;
}

20
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/AccountSetting.cs
View File

@@ -1,20 +0,0 @@
namespace GameIdeas.BlazorApp.Pages.Games.Models;
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/Pages/Games/Models/AddType.cs
View File

@@ -5,9 +5,3 @@ public enum AddType
Manual,
Auto
}
public class AddTypeParams(AddType addType, string label)
{
public AddType AddType { get; set; } = addType;
public string? Label { get; set; } = label;
}

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Models/DisplayType.cs Normal file
View File

@@ -0,0 +1,7 @@
namespace GameIdeas.BlazorApp.Pages.Games.Models;
public enum DisplayType
{
Card,
List
}