Add game header #5
@@ -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>
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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; }
|
||||
}
|
||||
@@ -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 @@
|
||||
|
||||
<HeaderLayout>
|
||||
<Body>
|
||||
<HeaderGame />
|
||||
<GameFilter />
|
||||
</Body>
|
||||
</HeaderLayout>
|
||||
@@ -1,3 +0,0 @@
|
||||
|
||||
|
||||
|
||||
@@ -1,6 +0,0 @@
|
||||
namespace GameIdeas.BlazorApp.Pages.Games.Header;
|
||||
|
||||
public partial class HeaderGame
|
||||
{
|
||||
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -25,6 +25,26 @@
|
||||
}
|
||||
|
||||
/***** Sort Theme *****/
|
||||
.sort .select-label:hover {
|
||||
color: var(--light-grey);
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
7
src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
Normal file
7
src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
Normal 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
7
src/GameIdeas/GameIdeas.Shared/Enum/SortType.cs
Normal file
@@ -0,0 +1,7 @@
|
||||
namespace GameIdeas.Shared.Enum;
|
||||
|
||||
public enum SortType
|
||||
{
|
||||
Ascending,
|
||||
Descending
|
||||
}
|
||||
Reference in New Issue
Block a user