Rework select component (#14)
Reviewed-on: #14
This commit was merged in pull request #14.
This commit is contained in:
@@ -1,5 +1,4 @@
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
|
||||
@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Slider
|
||||
@using GameIdeas.Shared.Dto
|
||||
|
||||
@@ -20,13 +19,13 @@
|
||||
</div>
|
||||
<div class="input-game">
|
||||
<div class="label">@ResourcesKey.Developers :</div>
|
||||
<MultipleSelectList TItem="DeveloperDto" Theme="SelectListTheme" @bind-Values=GameDto.Developers
|
||||
Items="CategoriesDto?.Developers?.Select(d => new SelectElement<DeveloperDto>(d, d.Name))" />
|
||||
<SelectSearch TItem="DeveloperDto" Theme="Theme" GetLabel="@(i => i.Name)"
|
||||
Items="Categories?.Developers" @bind-Values=GameDto.Developers />
|
||||
</div>
|
||||
<div class="input-game">
|
||||
<div class="label">@ResourcesKey.Publishers :</div>
|
||||
<MultipleSelectList TItem="PublisherDto" Theme="SelectListTheme" @bind-Values=GameDto.Publishers
|
||||
Items="CategoriesDto?.Publishers?.Select(p => new SelectElement<PublisherDto>(p, p.Name))" />
|
||||
<SelectSearch TItem="PublisherDto" Theme="Theme" GetLabel="@(i => i.Name)"
|
||||
Items="Categories?.Publishers" @bind-Values=GameDto.Publishers />
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
@@ -38,19 +37,19 @@
|
||||
</div>
|
||||
<div class="input-game">
|
||||
<div class="label">@ResourcesKey.Properties :</div>
|
||||
<MultipleSelectList TItem="PropertyDto" Theme="SelectListTheme" @bind-Values=GameDto.Properties
|
||||
Items="CategoriesDto?.Properties?.Select(p => new SelectElement<PropertyDto>(p, p.Label))" />
|
||||
<SelectSearch TItem="PropertyDto" Theme="Theme" GetLabel="@(i => i.Label)"
|
||||
Items="Categories?.Properties" @bind-Values=GameDto.Properties />
|
||||
</div>
|
||||
<div class="input-game">
|
||||
<div class="label">@ResourcesKey.Genres :</div>
|
||||
<MultipleSelectList TItem="TagDto" Theme="SelectListTheme" @bind-Values=GameDto.Tags
|
||||
Items="CategoriesDto?.Tags?.Select(t => new SelectElement<TagDto>(t, t.Label))" />
|
||||
<div class="label">@ResourcesKey.Tags :</div>
|
||||
<SelectSearch TItem="TagDto" Theme="Theme" GetLabel="@(i => i.Label)"
|
||||
Items="Categories?.Tags" @bind-Values=GameDto.Tags />
|
||||
|
||||
</div>
|
||||
<div class="input-game">
|
||||
<div class="label">@ResourcesKey.Platforms :</div>
|
||||
<MultipleSelectList TItem="PlatformDto" Theme="SelectListTheme" @bind-Values=GameDto.Platforms
|
||||
Items="CategoriesDto?.Platforms?.Select(p => new SelectElement<PlatformDto>(p, p.Label))" />
|
||||
<SelectSearch TItem="PlatformDto" Theme="Theme" GetLabel="@(i => i.Label)"
|
||||
Items="Categories?.Platforms" @bind-Values=GameDto.Platforms />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
using GameIdeas.BlazorApp.Pages.Games.Gateways;
|
||||
using GameIdeas.BlazorApp.Shared.Components.Popup;
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
using GameIdeas.BlazorApp.Shared.Components.Slider;
|
||||
@@ -12,19 +11,17 @@ namespace GameIdeas.BlazorApp.Pages.Games.Components;
|
||||
public partial class GameCreationForm
|
||||
{
|
||||
[Inject] private IJSRuntime Js { get; set; } = default!;
|
||||
[Inject] private IGameGateway GameGateway { get; set; } = default!;
|
||||
[CascadingParameter] private Popup? Popup { get; set; }
|
||||
[Parameter] public CategoriesDto? Categories { get; set; }
|
||||
|
||||
private GameDto GameDto = new();
|
||||
private CategoriesDto CategoriesDto = new();
|
||||
private EditContext? EditContext;
|
||||
private readonly SelectListTheme SelectListTheme = SelectListTheme.Creation;
|
||||
private readonly SelectTheme Theme = SelectTheme.Creation;
|
||||
private readonly SliderParams SliderParams = new() { Gap = 1, Min = 1, Max = 5 };
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
EditContext = new(GameDto);
|
||||
CategoriesDto = await GameGateway.FetchCategories();
|
||||
|
||||
if (Popup != null)
|
||||
{
|
||||
|
||||
@@ -1,45 +1,26 @@
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
|
||||
@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
|
||||
@using GameIdeas.Shared.Dto
|
||||
|
||||
<div class="advanced-filter-container">
|
||||
<span class="title">@ResourcesKey.Filters</span>
|
||||
|
||||
<div class="duplicate">
|
||||
<MultipleSelectList TItem="string"
|
||||
@bind-Values=GameFilterParams!.Platforms
|
||||
Placeholder="@ResourcesKey.Platforms"
|
||||
Theme="SelectListTheme.AdvancedFilter" />
|
||||
<SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
|
||||
@bind-Values=GameFilter.Platforms @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Platforms" />
|
||||
|
||||
<MultipleSelectList TItem="string"
|
||||
Placeholder="@ResourcesKey.Genres"
|
||||
@bind-Values=GameFilterParams!.Tags
|
||||
Theme="SelectListTheme.AdvancedFilter" />
|
||||
<SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
|
||||
@bind-Values=GameFilter.Tags @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Tags" />
|
||||
</div>
|
||||
|
||||
<SelectSearch TItem="PropertyDto" Placeholder="@ResourcesKey.Properties" GetLabel="@(p => p.Label)"
|
||||
@bind-Values=GameFilter.Properties @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Properties" />
|
||||
|
||||
<MultipleSelectList TItem="string"
|
||||
Placeholder="@ResourcesKey.Publishers"
|
||||
@bind-Values=GameFilterParams!.Publishers
|
||||
Theme="SelectListTheme.AdvancedFilter" />
|
||||
<SelectSearch TItem="DeveloperDto" Placeholder="@ResourcesKey.Developers" GetLabel="@(p => p.Name)"
|
||||
@bind-Values=GameFilter.Developers @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Developers" />
|
||||
|
||||
<MultipleSelectList TItem="string"
|
||||
Placeholder="@ResourcesKey.Developers"
|
||||
@bind-Values=GameFilterParams!.Developers
|
||||
Theme="SelectListTheme.AdvancedFilter" />
|
||||
|
||||
<MultipleSelectList TItem="string"
|
||||
Placeholder="@ResourcesKey.StorageSize"
|
||||
@bind-Values=GameFilterParams!.StorageSizes
|
||||
Theme="SelectListTheme.AdvancedFilter" />
|
||||
|
||||
<MultipleSelectList TItem="string"
|
||||
Placeholder="@ResourcesKey.LastModification"
|
||||
@bind-Values=GameFilterParams!.LastModification
|
||||
Theme="SelectListTheme.AdvancedFilter" />
|
||||
|
||||
<MultipleSelectList TItem="string"
|
||||
Placeholder="@ResourcesKey.ReleaseDate"
|
||||
@bind-Values=GameFilterParams!.ReleaseDates
|
||||
Theme="SelectListTheme.AdvancedFilter" />
|
||||
<SelectSearch TItem="PublisherDto" Placeholder="@ResourcesKey.Publishers" GetLabel="@(p => p.Name)"
|
||||
@bind-Values=GameFilter.Publishers @bind-Values:after=HandleValueChanged Theme="Theme" Items="Categories?.Publishers" />
|
||||
|
||||
<span class="title">@ResourcesKey.LastAdd</span>
|
||||
</div>
|
||||
@@ -1,10 +1,19 @@
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
using GameIdeas.Shared.Dto;
|
||||
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; }
|
||||
[Parameter] public GameFilterDto GameFilter { get; set; } = new();
|
||||
[Parameter] public CategoriesDto? Categories { get; set; }
|
||||
[Parameter] public EventCallback<GameFilterDto> GameFilterChanged { get; set; }
|
||||
|
||||
private readonly SelectTheme Theme = SelectTheme.AdvancedFilter;
|
||||
|
||||
private async Task HandleValueChanged()
|
||||
{
|
||||
await GameFilterChanged.InvokeAsync(GameFilter);
|
||||
}
|
||||
}
|
||||
@@ -8,7 +8,7 @@
|
||||
box-sizing: border-box;
|
||||
width: 240px;
|
||||
border-left: 2px solid var(--line);
|
||||
z-index: var(--index-component);
|
||||
z-index: var(--index-content);
|
||||
}
|
||||
|
||||
.duplicate {
|
||||
|
||||
@@ -1,23 +1,21 @@
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Search
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
|
||||
@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
|
||||
@using GameIdeas.BlazorApp.Shared.Components.SliderRange
|
||||
@using GameIdeas.BlazorApp.Shared.Models
|
||||
@using GameIdeas.Shared.Dto
|
||||
@using GameIdeas.Shared.Enum
|
||||
|
||||
<div class="form-filter">
|
||||
<SelectList TItem="Func<GameDto, object>" Items="GameProperties"
|
||||
@bind-Value=GameFilterParams.SortProperty
|
||||
THeader="SortType" Headers="SortTypes"
|
||||
@bind-Header=GameFilterParams.SortType
|
||||
Theme="SelectListTheme.Sort">
|
||||
<Select TItem="SortPropertyDto" ValuesChanged=HandleSortPropertyClicked
|
||||
THeader="SortTypeDto" HeaderValuesChanged=HandleSortTypeClicked
|
||||
Params=SelectParams Theme="SelectTheme.Sort" >
|
||||
<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>
|
||||
</SelectList>
|
||||
</Select>
|
||||
|
||||
<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">
|
||||
@@ -32,29 +30,24 @@
|
||||
</div>
|
||||
|
||||
<div class="search-container">
|
||||
<SearchInput @bind-Text=GameFilterParams.SearchName
|
||||
Placeholder="@ResourcesKey.Research" />
|
||||
<SearchInput @bind-Text="@Value.Title"
|
||||
Placeholder="@ResourcesKey.Research" />
|
||||
</div>
|
||||
|
||||
<div class="select-container">
|
||||
<MultipleSelectList TItem="string"
|
||||
Placeholder="@ResourcesKey.Platforms"
|
||||
@bind-Values=GameFilterParams.Platforms
|
||||
Theme="SelectListTheme.Filter" />
|
||||
<SelectSearch TItem="PlatformDto" Placeholder="@ResourcesKey.Platforms" GetLabel="@(p => p.Label)"
|
||||
@bind-Values=Value.Platforms @bind-Values:after="HandleValueChanged" Theme="SelectTheme.Filter" Items="Categories?.Platforms" />
|
||||
</div>
|
||||
|
||||
<div class="select-container">
|
||||
<MultipleSelectList TItem="string"
|
||||
Placeholder="@ResourcesKey.Genres"
|
||||
@bind-Values=GameFilterParams.Tags
|
||||
Theme="SelectListTheme.Filter" />
|
||||
<SelectSearch TItem="TagDto" Placeholder="@ResourcesKey.Tags" GetLabel="@(p => p.Label)"
|
||||
@bind-Values=Value.Tags @bind-Values:after="HandleValueChanged" Theme="SelectTheme.Filter" Items="Categories?.Tags" />
|
||||
</div>
|
||||
|
||||
<div class="slider-container">
|
||||
<SliderRange Params="SliderRangeParams"
|
||||
@bind-Max=GameFilterParams.MaxRating
|
||||
@bind-Min=GameFilterParams.MinRating />
|
||||
@bind-Max="Value.MaxInterest" @bind-Max:after="HandleValueChanged"
|
||||
@bind-Min="Value.MinInterest" @bind-Min:after="HandleValueChanged" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -10,31 +10,36 @@ 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 GameFilterDto Value { get; set; } = new();
|
||||
[Parameter] public EventCallback<GameFilterDto> ValueChanged { get; set; }
|
||||
[Parameter] public DisplayType DisplayType { get; set; }
|
||||
[Parameter] public EventCallback<DisplayType> DisplayTypeChanged { get; set; }
|
||||
[Parameter] public CategoriesDto? Categories { get; set; }
|
||||
|
||||
private readonly IEnumerable<SelectElement<SortType>> SortTypes = [
|
||||
new(SortType.Ascending, "Ascendant") { IsSelected = true },
|
||||
new(SortType.Descending, "Descendant")
|
||||
|
||||
private readonly List<SortTypeDto> SortTypes = [
|
||||
new() { SortType = SortType.Ascending, Label = "Ascendant" },
|
||||
new() { SortType = SortType.Descending, Label = "Descendant" }
|
||||
];
|
||||
|
||||
private readonly IEnumerable<SelectElement<Func<GameDto?, object?>>> GameProperties = [
|
||||
new(game => game?.Title, "Nom") { IsSelected = true },
|
||||
new(game => game?.ReleaseDate, "Date de parution"),
|
||||
private readonly List<SortPropertyDto> GameProperties = [
|
||||
new() { SortProperty = game => game.Title!, Label = "Titre" },
|
||||
new() { SortProperty = game => game.ReleaseDate!, Label = "Date de parution" }
|
||||
];
|
||||
|
||||
private EditContext? EditContext;
|
||||
private readonly SliderRangeParams SliderRangeParams =
|
||||
new() { Min = 1, Max = 5 };
|
||||
private SelectParams<SortPropertyDto, SortTypeDto> SelectParams = new();
|
||||
private readonly SliderRangeParams SliderRangeParams = new() { Min = 1, Max = 5 };
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
EditContext = new EditContext(GameFilterParams);
|
||||
EditContext.OnFieldChanged += async (s, e) =>
|
||||
SelectParams = new()
|
||||
{
|
||||
await GameFilterParamsChanged.InvokeAsync(GameFilterParams);
|
||||
Headers = SortTypes,
|
||||
GetHeaderLabel = header => header.Label,
|
||||
DefaultHeader = SortTypes.FirstOrDefault(h => h.SortType == SortType.Ascending),
|
||||
Items = GameProperties,
|
||||
GetItemLabel = item => item.Label,
|
||||
DefaultItem = GameProperties.FirstOrDefault(p => p.Label == "Titre")
|
||||
};
|
||||
}
|
||||
|
||||
@@ -43,4 +48,21 @@ public partial class GameFilter
|
||||
DisplayType = displayType;
|
||||
await DisplayTypeChanged.InvokeAsync(displayType);
|
||||
}
|
||||
|
||||
private async Task HandleSortTypeClicked(IEnumerable<SortTypeDto> sortTypes)
|
||||
{
|
||||
Value.SortType = sortTypes.FirstOrDefault();
|
||||
await ValueChanged.InvokeAsync(Value);
|
||||
}
|
||||
|
||||
private async Task HandleSortPropertyClicked(IEnumerable<SortPropertyDto> sortProperties)
|
||||
{
|
||||
Value.SortProperty = sortProperties.FirstOrDefault();
|
||||
await ValueChanged.InvokeAsync(Value);
|
||||
}
|
||||
|
||||
private async Task HandleValueChanged()
|
||||
{
|
||||
await ValueChanged.InvokeAsync(Value);
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
z-index: var(--index-component);
|
||||
z-index: var(--index-content);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
using GameIdeas.Shared.Enum;
|
||||
using GameIdeas.Shared.Dto;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Pages.Games.Filter;
|
||||
|
||||
public class GameFilterParams
|
||||
{
|
||||
public SortType SortType { get; set; } = SortType.Ascending;
|
||||
public Func<GameDto?, object?>? SortProperty { get; set; }
|
||||
public string? SearchName { get; set; }
|
||||
public IEnumerable<string>? Platforms { get; set; }
|
||||
public IEnumerable<string>? Properties { get; set; }
|
||||
public IEnumerable<string>? Tags { 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; } = 5;
|
||||
public int MinRating { get; set; } = 1;
|
||||
}
|
||||
@@ -12,17 +12,18 @@
|
||||
<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
|
||||
|
||||
<GameHeader AddTypeChanged="HandleAddClicked">
|
||||
<GameFilter @bind-DisplayType=DisplayType
|
||||
@bind-GameFilterParams=GameFilterParams />
|
||||
<GameFilter Categories="Categories"
|
||||
@bind-DisplayType=DisplayType
|
||||
@bind-Value=GameFilter/>
|
||||
</GameHeader>
|
||||
|
||||
<div class="container">
|
||||
<div class="content">
|
||||
</div>
|
||||
|
||||
<AdvancedGameFilter @bind-GameFilterParams=GameFilterParams />
|
||||
<AdvancedGameFilter @bind-GameFilter=GameFilter Categories="Categories" />
|
||||
</div>
|
||||
|
||||
<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
|
||||
<GameCreationForm />
|
||||
<GameCreationForm Categories="Categories" />
|
||||
</Popup>
|
||||
|
||||
@@ -1,14 +1,25 @@
|
||||
using GameIdeas.BlazorApp.Pages.Games.Filter;
|
||||
using GameIdeas.BlazorApp.Pages.Games.Gateways;
|
||||
using GameIdeas.BlazorApp.Shared.Components.Popup;
|
||||
using GameIdeas.BlazorApp.Shared.Models;
|
||||
using GameIdeas.Shared.Dto;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Pages.Games;
|
||||
|
||||
public partial class GameBase ()
|
||||
{
|
||||
[Inject] private IGameGateway GameGateway { get; set; } = default!;
|
||||
|
||||
private DisplayType DisplayType = DisplayType.List;
|
||||
private GameFilterParams GameFilterParams = new();
|
||||
private GameFilterDto GameFilter = new();
|
||||
private Popup? ManualAddPopup;
|
||||
private CategoriesDto? Categories;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
Categories = await GameGateway.FetchCategories();
|
||||
await base.OnInitializedAsync();
|
||||
}
|
||||
private void HandleAddClicked(AddType addType)
|
||||
{
|
||||
switch (addType)
|
||||
|
||||
@@ -22,15 +22,15 @@
|
||||
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
|
||||
</svg>
|
||||
</div>
|
||||
<SelectList @ref="SelectListAdd" TItem="AddType" Items="SelectElements"
|
||||
ValueChanged=HandleAddTypeClickedAsync THeader="object"
|
||||
Theme="SelectListTheme.Navigation" AlignRight=true>
|
||||
<Select @ref="SelectListAdd" TItem="KeyValuePair<AddType, string>" THeader="object"
|
||||
ValuesChanged=HandleAddTypeClicked Params=SelectParams
|
||||
Theme="SelectTheme.Navigation">
|
||||
<div class="second-button button">
|
||||
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M1 3H23L12 22" />
|
||||
</svg>
|
||||
</div>
|
||||
</SelectList>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account-container">
|
||||
|
||||
@@ -13,23 +13,35 @@ public partial class GameHeader : ComponentBase
|
||||
[Parameter] public RenderFragment? ChildContent { get; set; }
|
||||
|
||||
|
||||
private readonly IEnumerable<SelectElement<AddType>> SelectElements = [
|
||||
new SelectElement<AddType>(AddType.Manual, ResourcesKey.ManualAdd),
|
||||
new SelectElement<AddType> (AddType.Auto, ResourcesKey.AutoAdd)
|
||||
];
|
||||
private readonly Dictionary<AddType, string> AddTypes = new() {
|
||||
{ AddType.Manual, ResourcesKey.ManualAdd },
|
||||
{ AddType.Auto, ResourcesKey.AutoAdd }
|
||||
};
|
||||
|
||||
private AccountSettings? AccountSettings;
|
||||
private SelectList<AddType, object>? SelectListAdd;
|
||||
private Select<KeyValuePair<AddType, string>, object>? SelectListAdd;
|
||||
private SelectParams<KeyValuePair<AddType, string>, object> SelectParams = new();
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
SelectParams = new()
|
||||
{
|
||||
Items = AddTypes.ToList(),
|
||||
GetItemLabel = item => item.Value,
|
||||
};
|
||||
|
||||
base.OnInitialized();
|
||||
}
|
||||
|
||||
private void HandleIconClicked()
|
||||
{
|
||||
throw new NotImplementedException();
|
||||
}
|
||||
|
||||
private async Task HandleAddTypeClickedAsync(AddType value)
|
||||
private async Task HandleAddTypeClicked(IEnumerable<KeyValuePair<AddType, string>> values)
|
||||
{
|
||||
SelectListAdd?.Close();
|
||||
await AddTypeChanged.InvokeAsync(value);
|
||||
await AddTypeChanged.InvokeAsync(values.FirstOrDefault().Key);
|
||||
}
|
||||
|
||||
private void HandleAccountClicked()
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select.Components;
|
||||
|
||||
public partial class SelectListElement<TItem>
|
||||
{
|
||||
[Parameter] public EventCallback<SelectElement<TItem>?> ValueChanged { get; set; }
|
||||
[Parameter] public SelectElement<TItem>? Value { get; set; }
|
||||
[Parameter] public SelectListTheme Theme { get; set; }
|
||||
private async Task HandleItemClicked()
|
||||
{
|
||||
await ValueChanged.InvokeAsync(Value);
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
.select-element {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
gap: 6px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.select-element:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.selected {
|
||||
width: 12px;
|
||||
min-width: 12px;
|
||||
height: 12px;
|
||||
min-height: 12px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.selected svg {
|
||||
display: block;
|
||||
fill: var(--white)
|
||||
}
|
||||
|
||||
/***** Navigation Theme *****/
|
||||
.navigation {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.navigation:hover {
|
||||
background: var(--violet-selected);
|
||||
}
|
||||
|
||||
.navigation .selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/***** Sort Theme *****/
|
||||
.sort {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.sort:hover {
|
||||
background: var(--input-selected);
|
||||
}
|
||||
|
||||
.sort .select-label {
|
||||
text-wrap: nowrap;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/***** Filter Theme *****/
|
||||
.filter {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.filter:hover {
|
||||
background: var(--input-selected);
|
||||
}
|
||||
|
||||
.filter .select-label {
|
||||
text-wrap: nowrap;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/***** Advanced Filter Theme *****/
|
||||
.advancedfilter {
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.advancedfilter:hover {
|
||||
background: var(--input-selected);
|
||||
}
|
||||
|
||||
.advancedfilter .select-label {
|
||||
text-wrap: nowrap;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,16 @@
|
||||
@typeparam TItem
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Helpers
|
||||
|
||||
<div class="select-element @(Enum.GetName(Theme)?.ToLower())" @onclick=HandleItemClicked>
|
||||
<div class="select-element @SelectHelper.GetClassFromTheme(Theme)"
|
||||
@onclick=HandleElementClicked>
|
||||
<div class="selected">
|
||||
@if (Value != null && Value.IsSelected)
|
||||
@if (IsSelected == true)
|
||||
{
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z" />
|
||||
</svg>
|
||||
}
|
||||
</div>
|
||||
<div class="select-label">
|
||||
@Value?.Label
|
||||
<div class="label">
|
||||
@Label
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,16 @@
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select.Components;
|
||||
|
||||
public partial class SelectRow
|
||||
{
|
||||
[Parameter] public bool? IsSelected { get; set; }
|
||||
[Parameter] public string? Label { get; set; }
|
||||
[Parameter] public SelectTheme Theme { get; set; }
|
||||
[Parameter] public EventCallback OnClick { get; set; }
|
||||
private async Task HandleElementClicked()
|
||||
{
|
||||
await OnClick.InvokeAsync();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
.select-element {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
gap: 6px;
|
||||
height: 20px;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.select-element:hover {
|
||||
cursor: pointer;
|
||||
background: var(--input-selected);
|
||||
}
|
||||
|
||||
.selected {
|
||||
width: 12px;
|
||||
min-width: 12px;
|
||||
height: 12px;
|
||||
min-height: 12px;
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.selected svg {
|
||||
display: block;
|
||||
fill: var(--white)
|
||||
}
|
||||
|
||||
.label {
|
||||
text-wrap: nowrap;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
/***** Navigation Theme *****/
|
||||
.navigation {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
.navigation:hover {
|
||||
background: var(--violet-selected);
|
||||
}
|
||||
|
||||
.navigation .selected {
|
||||
display: none;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select.Helpers;
|
||||
|
||||
public static class SelectHelper
|
||||
{
|
||||
public static string GetClassFromTheme(SelectTheme selectTheme)
|
||||
{
|
||||
return selectTheme switch
|
||||
{
|
||||
SelectTheme.Navigation => "navigation",
|
||||
SelectTheme.Sort => "sort",
|
||||
SelectTheme.Filter => "filter",
|
||||
SelectTheme.AdvancedFilter => "advanced-filter",
|
||||
SelectTheme.Creation => "creation",
|
||||
_ => string.Empty
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
|
||||
public class SelectElement<TItem>(TItem item, string? label)
|
||||
{
|
||||
public TItem Item { get; set; } = item;
|
||||
public string? Label { get; set; } = label;
|
||||
public bool IsSelected { get; set; } = false;
|
||||
public bool IsNew { get; set; } = false;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
|
||||
public class SelectParams<TItem, THeader>
|
||||
{
|
||||
public List<TItem> Items { get; set; } = [];
|
||||
public TItem? DefaultItem { get; set; }
|
||||
public Func<TItem, string> GetItemLabel { get; set; } = _ => string.Empty;
|
||||
public List<THeader> Headers { get; set; } = [];
|
||||
public THeader? DefaultHeader { get; set; }
|
||||
public Func<THeader, string> GetHeaderLabel { get; set; } = _ => string.Empty;
|
||||
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
|
||||
public enum SelectListTheme
|
||||
public enum SelectTheme
|
||||
{
|
||||
Navigation,
|
||||
Sort,
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
|
||||
public enum SelectType
|
||||
{
|
||||
Single,
|
||||
Multiple
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Search
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Components
|
||||
@typeparam TItem
|
||||
|
||||
<div class="select-list">
|
||||
<div class="select-button @(Enum.GetName(Theme)?.ToLower())">
|
||||
<SearchInput @ref=SearchInput
|
||||
Icon="SearchInputIcon.Dropdown"
|
||||
Placeholder="@Placeholder"
|
||||
TextChanged="HandleTextChanged"
|
||||
ClearClicked="HandleTextChanged"
|
||||
SearchClicked="HandleSearchClicked"
|
||||
FocusIn="HandleTextFocusIn"/>
|
||||
</div>
|
||||
<div class="select-container">
|
||||
|
||||
@if (IsContentOpen)
|
||||
{
|
||||
<div class="select-content @(Enum.GetName(Theme)?.ToLower())">
|
||||
@foreach (var item in Items)
|
||||
{
|
||||
<SelectListElement TItem="TItem"
|
||||
Value="item"
|
||||
ValueChanged="HandleItemClicked"
|
||||
Theme="Theme" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
|
||||
IsVisible=IsContentOpen OnClick="HandleContentClosed" />
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
using GameIdeas.BlazorApp.Shared.Components.Search;
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.JSInterop;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select;
|
||||
|
||||
public partial class MultipleSelectList<TItem>
|
||||
{
|
||||
[Inject] IJSRuntime JS { get; set; } = default!;
|
||||
[Parameter] public IEnumerable<TItem>? Values { get; set; }
|
||||
[Parameter] public EventCallback<IEnumerable<TItem>?> ValuesChanged { get; set; }
|
||||
[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 = false;
|
||||
private SearchInput? SearchInput;
|
||||
|
||||
|
||||
protected override async Task OnAfterRenderAsync(bool firstRender)
|
||||
{
|
||||
await JS.InvokeVoidAsync("addResizeListener");
|
||||
|
||||
await base.OnAfterRenderAsync(firstRender);
|
||||
}
|
||||
|
||||
private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
|
||||
{
|
||||
selectedValue.IsSelected = !selectedValue.IsSelected;
|
||||
|
||||
Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
|
||||
SearchInput?.SetText(string.Join(", ", Values));
|
||||
|
||||
await ValuesChanged.InvokeAsync(Values);
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
private async Task HandleTextChanged()
|
||||
{
|
||||
IsContentOpen = false;
|
||||
|
||||
foreach (var item in Items)
|
||||
{
|
||||
item.IsSelected = false;
|
||||
}
|
||||
|
||||
Values = Items.Where(x => x.IsSelected && x.Item != null).Select(x => x.Item!);
|
||||
await ValuesChanged.InvokeAsync(Values);
|
||||
}
|
||||
|
||||
private void HandleSearchClicked()
|
||||
{
|
||||
IsContentOpen = !IsContentOpen;
|
||||
}
|
||||
private void HandleContentClosed()
|
||||
{
|
||||
IsContentOpen = false;
|
||||
}
|
||||
private void HandleTextFocusIn()
|
||||
{
|
||||
IsContentOpen = true;
|
||||
}
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
.select-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
overflow: auto;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
margin-top: 4px;
|
||||
position: absolute;
|
||||
z-index: var(--index-dropdown);
|
||||
border-radius: var(--small-radius);
|
||||
}
|
||||
|
||||
.select-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation-name: fade-in;
|
||||
animation-duration: 0.4s;
|
||||
background: var(--dropdown-content);
|
||||
box-shadow: var(--drop-shadow);
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.select-button {
|
||||
z-index: var(--index-component)
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 2px 6px;
|
||||
border-bottom: 2px solid var(--input-selected);
|
||||
}
|
||||
/* Advanced filter */
|
||||
::deep .select-button.advancedfilter .search-container {
|
||||
height: 24px;
|
||||
background: var(--input-secondary);
|
||||
}
|
||||
|
||||
::deep .select-button.advancedfilter .search-container input::placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* Creation */
|
||||
::deep .select-button.creation .search-container {
|
||||
height: 24px;
|
||||
background: var(--input-secondary);
|
||||
border: solid 1px var(--input-selected);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* width */
|
||||
.select-container::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
.select-container::-webkit-scrollbar-track {
|
||||
background: var(--input-secondary);
|
||||
border-radius: 0 var(--small-radius) var(--small-radius) 0;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
.select-container::-webkit-scrollbar-thumb {
|
||||
background: #555;
|
||||
border-radius: var(--small-radius);
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
.select-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
function offset(el) {
|
||||
var rect = el.getBoundingClientRect(),
|
||||
scrollLeft = window.scrollY || document.documentElement.scrollLeft,
|
||||
scrollTop = window.scrollX || document.documentElement.scrollTop;
|
||||
return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
|
||||
}
|
||||
|
||||
function resizeSelectContent() {
|
||||
const height = window.innerHeight;
|
||||
const selects = document.getElementsByClassName('select-container');
|
||||
for (var i = 0; i < selects.length; i++) {
|
||||
selects[i].style.maxHeight = height - offset(selects[i]).top - 10 + "px";
|
||||
}
|
||||
}
|
||||
|
||||
window.addResizeListener = () => {
|
||||
resizeSelectContent();
|
||||
window.addEventListener('resize', resizeSelectContent);
|
||||
};
|
||||
@@ -0,0 +1,47 @@
|
||||
@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Components
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Helpers
|
||||
|
||||
@typeparam TItem
|
||||
@typeparam THeader
|
||||
|
||||
<div class="select-container">
|
||||
<div class="button" @onclick=HandleButtonClicked>
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<div class="dropdown @SelectHelper.GetClassFromTheme(Theme)">
|
||||
@if (IsContentOpen)
|
||||
{
|
||||
<div class="content">
|
||||
@if (Params.Headers != null)
|
||||
{
|
||||
@foreach (var header in Params.Headers)
|
||||
{
|
||||
<SelectRow IsSelected=HeaderValues?.Contains(header)
|
||||
Label="@Params.GetHeaderLabel(header)" Theme=Theme
|
||||
OnClick="_ => HandleHeaderClicked(header)" />
|
||||
}
|
||||
}
|
||||
|
||||
@if (Params.Headers?.Any() == true)
|
||||
{
|
||||
<span class="line"></span>
|
||||
}
|
||||
|
||||
@if (Params.Items != null)
|
||||
{
|
||||
@foreach (var item in Params.Items)
|
||||
{
|
||||
<SelectRow IsSelected=Values?.Contains(item)
|
||||
Label="@Params.GetItemLabel(item)" Theme=Theme
|
||||
OnClick="_ => HandleValueClicked(item)" />
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
|
||||
IsVisible=IsContentOpen OnClick="HandleContentClosed" />
|
||||
@@ -0,0 +1,85 @@
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select;
|
||||
|
||||
public partial class Select<TItem, THeader>
|
||||
{
|
||||
[Parameter] public RenderFragment? ChildContent { get; set; }
|
||||
[Parameter] public List<TItem> Values { get; set; } = [];
|
||||
[Parameter] public EventCallback<IEnumerable<TItem>> ValuesChanged { get; set; }
|
||||
[Parameter] public List<THeader> HeaderValues { get; set; } = [];
|
||||
[Parameter] public EventCallback<IEnumerable<THeader>> HeaderValuesChanged { get; set; }
|
||||
[Parameter] public SelectParams<TItem, THeader> Params { get; set; } = new();
|
||||
[Parameter] public SelectTheme Theme { get; set; }
|
||||
[Parameter] public SelectType Type { get; set; } = SelectType.Single;
|
||||
[Parameter] public bool DisableClicked { get; set; } = false;
|
||||
|
||||
private bool IsContentOpen = false;
|
||||
|
||||
public void Close() =>
|
||||
IsContentOpen = false;
|
||||
|
||||
public void Open() =>
|
||||
IsContentOpen = true;
|
||||
|
||||
private void HandleButtonClicked()
|
||||
{
|
||||
if (!DisableClicked)
|
||||
IsContentOpen = !IsContentOpen;
|
||||
}
|
||||
|
||||
private void HandleContentClosed() =>
|
||||
IsContentOpen = false;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
if (Params.DefaultItem != null)
|
||||
{
|
||||
Values.Add(Params.DefaultItem);
|
||||
}
|
||||
|
||||
if (Params.DefaultHeader != null)
|
||||
{
|
||||
HeaderValues.Add(Params.DefaultHeader);
|
||||
}
|
||||
}
|
||||
|
||||
private async Task HandleValueClicked(TItem value)
|
||||
{
|
||||
if (Type != SelectType.Multiple || Values == null)
|
||||
{
|
||||
Values = [];
|
||||
}
|
||||
|
||||
if (Values?.Contains(value) == true)
|
||||
{
|
||||
Values.Remove(value);
|
||||
}
|
||||
else
|
||||
{
|
||||
Values!.Add(value);
|
||||
}
|
||||
|
||||
await ValuesChanged.InvokeAsync(Values);
|
||||
}
|
||||
|
||||
private async Task HandleHeaderClicked(THeader header)
|
||||
{
|
||||
if (Type != SelectType.Multiple || HeaderValues == null)
|
||||
{
|
||||
HeaderValues = [];
|
||||
}
|
||||
|
||||
if (HeaderValues?.Contains(header) == true)
|
||||
{
|
||||
HeaderValues.Remove(header);
|
||||
}
|
||||
else
|
||||
{
|
||||
HeaderValues!.Add(header);
|
||||
}
|
||||
|
||||
await HeaderValuesChanged.InvokeAsync(HeaderValues);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
.select-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.button {
|
||||
z-index: var(--index-component)
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
overflow: auto;
|
||||
margin-top: 4px;
|
||||
position: absolute;
|
||||
z-index: var(--index-dropdown);
|
||||
border-radius: var(--small-radius);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: var(--dropdown-content);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation-name: fade-in;
|
||||
animation-duration: 0.2s;
|
||||
box-shadow: var(--drop-shadow);
|
||||
}
|
||||
|
||||
.line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.dropdown::-webkit-scrollbar-track {
|
||||
background: var(--input-secondary);
|
||||
border-radius: 0 var(--small-radius) var(--small-radius) 0;
|
||||
}
|
||||
|
||||
.dropdown::-webkit-scrollbar-thumb {
|
||||
background: #555;
|
||||
border-radius: var(--small-radius);
|
||||
}
|
||||
|
||||
.dropdown::-webkit-scrollbar-thumb:hover {
|
||||
background: #777;
|
||||
}
|
||||
|
||||
/***** Navigation Theme *****/
|
||||
.dropdown.navigation {
|
||||
width: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navigation .content {
|
||||
background: var(--violet);
|
||||
}
|
||||
|
||||
/***** Sort Theme *****/
|
||||
.dropdown.sort {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.sort .content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.sort .content .line {
|
||||
display: block;
|
||||
margin: 2px 6px;
|
||||
border-bottom: 2px solid var(--input-selected);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Components
|
||||
@typeparam TItem
|
||||
@typeparam THeader
|
||||
|
||||
<div class="select-list">
|
||||
<div class="select-button" @onclick=HandleButtonClicked>
|
||||
@ChildContent
|
||||
</div>
|
||||
|
||||
<div class="select-container @(AlignRight ? "align-right" : "")">
|
||||
@if (IsContentOpen)
|
||||
{
|
||||
<div class="select-content @(Enum.GetName(Theme)?.ToLower())">
|
||||
@foreach (var header in Headers)
|
||||
{
|
||||
<SelectListElement TItem="THeader"
|
||||
Value="header"
|
||||
ValueChanged="HandleHeaderClicked"
|
||||
Theme="Theme" />
|
||||
}
|
||||
@if (Headers.Any())
|
||||
{
|
||||
<span class="line"></span>
|
||||
}
|
||||
@foreach (var item in Items)
|
||||
{
|
||||
<SelectListElement TItem="TItem"
|
||||
Value="item"
|
||||
ValueChanged="HandleItemClicked"
|
||||
Theme="Theme" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
|
||||
IsVisible=IsContentOpen OnClick="HandleContentClosed" />
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.Select;
|
||||
|
||||
public partial class SelectList<TItem, THeader>
|
||||
{
|
||||
[Parameter] public RenderFragment? ChildContent { get; set; }
|
||||
[Parameter] public TItem? Value { get; set; }
|
||||
[Parameter] public EventCallback<TItem?> ValueChanged { get; set; }
|
||||
[Parameter] public THeader? Header { get; set; }
|
||||
[Parameter] public EventCallback<THeader?> HeaderChanged { get; set; }
|
||||
[Parameter] public IEnumerable<SelectElement<TItem>> Items { get; set; } = [];
|
||||
[Parameter] public IEnumerable<SelectElement<THeader>> Headers { get; set; } = [];
|
||||
[Parameter] public SelectListTheme Theme { get; set; }
|
||||
[Parameter] public bool AlignRight { get; set; }
|
||||
|
||||
private bool IsContentOpen = false;
|
||||
|
||||
public void Close() =>
|
||||
IsContentOpen = false;
|
||||
|
||||
private void HandleButtonClicked() =>
|
||||
IsContentOpen = !IsContentOpen;
|
||||
|
||||
private void HandleContentClosed()
|
||||
{
|
||||
IsContentOpen = false;
|
||||
}
|
||||
|
||||
private async Task HandleItemClicked(SelectElement<TItem> selectedValue)
|
||||
{
|
||||
foreach (var item in Items)
|
||||
{
|
||||
item.IsSelected = false;
|
||||
}
|
||||
|
||||
selectedValue.IsSelected = true;
|
||||
|
||||
Value = selectedValue.Item;
|
||||
await ValueChanged.InvokeAsync(Value);
|
||||
}
|
||||
|
||||
private async Task HandleHeaderClicked(SelectElement<THeader> selectedValue)
|
||||
{
|
||||
foreach (var header in Headers)
|
||||
{
|
||||
header.IsSelected = false;
|
||||
}
|
||||
|
||||
selectedValue.IsSelected = true;
|
||||
|
||||
Header = selectedValue.Item;
|
||||
await HeaderChanged.InvokeAsync(Header);
|
||||
}
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
.select-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
margin-top: 4px;
|
||||
position: absolute;
|
||||
z-index: var(--index-dropdown)
|
||||
}
|
||||
|
||||
.align-right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.select-content {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: var(--small-radius);
|
||||
animation-name: fade-in;
|
||||
animation-duration: 0.4s;
|
||||
}
|
||||
|
||||
.select-button {
|
||||
z-index: var(--index-component)
|
||||
}
|
||||
|
||||
.line {
|
||||
margin: 2px 6px;
|
||||
border-bottom: 2px solid var(--input-selected);
|
||||
}
|
||||
|
||||
|
||||
/***** Navigation Theme *****/
|
||||
.select-content.navigation {
|
||||
background: var(--violet);
|
||||
box-shadow: var(--drop-shadow);
|
||||
}
|
||||
|
||||
/***** Sort Theme *****/
|
||||
.select-content.sort {
|
||||
background: var(--dropdown-content);
|
||||
box-shadow: var(--drop-shadow);
|
||||
padding: 4px 0;
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Search
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Helpers
|
||||
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
|
||||
|
||||
@typeparam TItem
|
||||
|
||||
<Select @ref=Select TItem="TItem" THeader="string" Theme="Theme" Type="SelectType.Multiple" DisableClicked=true
|
||||
Params="SelectParams" Values=Values ValuesChanged="HandleValuesChanged">
|
||||
|
||||
<div class="@SelectHelper.GetClassFromTheme(Theme)">
|
||||
<SearchInput @ref=SearchInput Icon="SearchInputIcon.Dropdown" Placeholder="@Placeholder"
|
||||
TextChanged="HandleClearClicked" ClearClicked="HandleClearClicked"
|
||||
FocusIn="HandleFocusIn" SearchClicked="HandleFocusIn" />
|
||||
</div>
|
||||
|
||||
</Select>
|
||||
@@ -0,0 +1,46 @@
|
||||
using GameIdeas.BlazorApp.Shared.Components.Search;
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
|
||||
using GameIdeas.BlazorApp.Shared.Components.Select;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace GameIdeas.BlazorApp.Shared.Components.SelectSearch;
|
||||
|
||||
public partial class SelectSearch<TItem>
|
||||
{
|
||||
[Parameter] public SelectTheme Theme { get; set; }
|
||||
[Parameter] public List<TItem> Items { get; set; } = [];
|
||||
[Parameter] public Func<TItem, string> GetLabel { get; set; } = _ => string.Empty;
|
||||
[Parameter] public List<TItem> Values { get; set; } = [];
|
||||
[Parameter] public EventCallback<List<TItem>> ValuesChanged { get; set; }
|
||||
[Parameter] public string Placeholder { get; set; } = string.Empty;
|
||||
|
||||
private SelectParams<TItem, string> SelectParams = new();
|
||||
private SearchInput? SearchInput;
|
||||
private Select<TItem, string>? Select;
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
SelectParams = new()
|
||||
{
|
||||
Items = Items,
|
||||
GetItemLabel = GetLabel
|
||||
};
|
||||
|
||||
base.OnParametersSet();
|
||||
}
|
||||
private async Task HandleValuesChanged(IEnumerable<TItem> values)
|
||||
{
|
||||
Values = values.ToList();
|
||||
SearchInput?.SetText(string.Join(", ", Values.Select(GetLabel)));
|
||||
await ValuesChanged.InvokeAsync(values.ToList());
|
||||
}
|
||||
|
||||
private void HandleClearClicked()
|
||||
{
|
||||
Values = [];
|
||||
}
|
||||
|
||||
private void HandleFocusIn()
|
||||
{
|
||||
Select?.Open();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
/* Advanced filter */
|
||||
.advanced-filter ::deep.search-container {
|
||||
height: 24px;
|
||||
background: var(--input-secondary);
|
||||
}
|
||||
|
||||
.advanced-filter ::deep.search-container input::placeholder {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
/* Creation */
|
||||
.creation ::deep.search-container {
|
||||
height: 24px;
|
||||
background: var(--input-secondary);
|
||||
border: solid 1px var(--input-selected);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -15,7 +15,7 @@ public class Translations (TranslationService translationService)
|
||||
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 Tags => translationService.Translate(nameof(Tags));
|
||||
public string Publishers => translationService.Translate(nameof(Publishers));
|
||||
public string Developers => translationService.Translate(nameof(Developers));
|
||||
public string StorageSize => translationService.Translate(nameof(StorageSize));
|
||||
@@ -57,7 +57,7 @@ public static class ResourcesKey
|
||||
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 Tags => _instance?.Tags ?? throw new InvalidOperationException("ResourcesKey.Tags 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 StorageSize => _instance?.StorageSize ?? throw new InvalidOperationException("ResourcesKey.StorageSize is not initialized.");
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
|
||||
public class CategoriesDto
|
||||
{
|
||||
public IEnumerable<PlatformDto>? Platforms { get; set; }
|
||||
public IEnumerable<PropertyDto>? Properties { get; set; }
|
||||
public IEnumerable<TagDto>? Tags { get; set; }
|
||||
public IEnumerable<DeveloperDto>? Developers { get; set; }
|
||||
public IEnumerable<PublisherDto>? Publishers { get; set; }
|
||||
public List<PlatformDto>? Platforms { get; set; }
|
||||
public List<PropertyDto>? Properties { get; set; }
|
||||
public List<TagDto>? Tags { get; set; }
|
||||
public List<DeveloperDto>? Developers { get; set; }
|
||||
public List<PublisherDto>? Publishers { get; set; }
|
||||
}
|
||||
|
||||
@@ -14,9 +14,9 @@ public class GameDto
|
||||
public double? StorageSpace { get; set; }
|
||||
public string? Description { get; set; }
|
||||
public int Interest { get; set; } = 3;
|
||||
public IEnumerable<PlatformDto>? Platforms { get; set; }
|
||||
public IEnumerable<PropertyDto>? Properties { get; set; }
|
||||
public IEnumerable<TagDto>? Tags { get; set; }
|
||||
public IEnumerable<PublisherDto>? Publishers { get; set; }
|
||||
public IEnumerable<DeveloperDto>? Developers { get; set; }
|
||||
public List<PlatformDto>? Platforms { get; set; }
|
||||
public List<PropertyDto>? Properties { get; set; }
|
||||
public List<TagDto>? Tags { get; set; }
|
||||
public List<PublisherDto>? Publishers { get; set; }
|
||||
public List<DeveloperDto>? Developers { get; set; }
|
||||
}
|
||||
@@ -1,16 +1,19 @@
|
||||
namespace GameIdeas.Shared.Dto;
|
||||
|
||||
namespace GameIdeas.Shared.Dto;
|
||||
|
||||
public class GameFilterDto
|
||||
{
|
||||
public IEnumerable<string>? Platforms { get; set; }
|
||||
public string? Name { get; set; }
|
||||
public IEnumerable<string>? Tags { get; set; }
|
||||
public IEnumerable<string>? Properties { get; set; }
|
||||
public int? MinInterest { get; set; }
|
||||
public int? MaxInterest { get; set; }
|
||||
public IEnumerable<int>? ReleaseYears { get; set; }
|
||||
public IEnumerable<int>? PublisherIds { get; set; }
|
||||
public IEnumerable<int>? DeveloperIds { get; set; }
|
||||
public IEnumerable<int>? CreationUserIds { get; set; }
|
||||
public IEnumerable<int>? ModificationUserIds { get; set; }
|
||||
public SortTypeDto? SortType { get; set; }
|
||||
public SortPropertyDto? SortProperty { get; set; }
|
||||
public string? Title { get; set; }
|
||||
public List<PlatformDto>? Platforms { get; set; }
|
||||
public List<PropertyDto>? Properties { get; set; }
|
||||
public List<TagDto>? Tags { get; set; }
|
||||
public List<PublisherDto>? Publishers { get; set; }
|
||||
public List<DeveloperDto>? Developers { get; set; }
|
||||
public int MinInterest { get; set; } = 1;
|
||||
public int MaxInterest { get; set; } = 5;
|
||||
public List<int>? ReleaseYears { get; set; }
|
||||
public int? MinStorageSize { get; set; }
|
||||
public int? MaxStorageSize { get; set; }
|
||||
}
|
||||
|
||||
7
src/GameIdeas/GameIdeas.Shared/Dto/SortPropertyDto.cs
Normal file
7
src/GameIdeas/GameIdeas.Shared/Dto/SortPropertyDto.cs
Normal file
@@ -0,0 +1,7 @@
|
||||
namespace GameIdeas.Shared.Dto;
|
||||
|
||||
public class SortPropertyDto
|
||||
{
|
||||
public Func<GameDto, object>? SortProperty { get; set; }
|
||||
public string Label { get; set; } = string.Empty;
|
||||
}
|
||||
9
src/GameIdeas/GameIdeas.Shared/Dto/SortTypeDto.cs
Normal file
9
src/GameIdeas/GameIdeas.Shared/Dto/SortTypeDto.cs
Normal file
@@ -0,0 +1,9 @@
|
||||
using GameIdeas.Shared.Enum;
|
||||
|
||||
namespace GameIdeas.Shared.Dto;
|
||||
|
||||
public class SortTypeDto
|
||||
{
|
||||
public SortType SortType { get; set; } = SortType.Ascending;
|
||||
public string Label { get; set; } = string.Empty;
|
||||
}
|
||||
@@ -11,7 +11,7 @@
|
||||
"LastAdd": "Les ajouts récents",
|
||||
"Research": "Rechercher",
|
||||
"Platforms": "Plateformes",
|
||||
"Genres": "Genres",
|
||||
"Tags": "Genres",
|
||||
"Publishers": "Editeurs",
|
||||
"Developers": "Développeurs",
|
||||
"StorageSize": "Taille d'espace",
|
||||
|
||||
@@ -18,11 +18,11 @@ public class CategoryService(GameIdeasContext context, IMapper mapper) : ICatego
|
||||
|
||||
return new()
|
||||
{
|
||||
Platforms = mapper.Map<IEnumerable<PlatformDto>>(platforms),
|
||||
Properties = mapper.Map<IEnumerable<PropertyDto>>(properties),
|
||||
Tags = mapper.Map<IEnumerable<TagDto>>(tags),
|
||||
Developers = mapper.Map<IEnumerable<DeveloperDto>>(developers),
|
||||
Publishers = mapper.Map<IEnumerable<PublisherDto>>(publishers)
|
||||
Platforms = mapper.Map<List<PlatformDto>>(platforms),
|
||||
Properties = mapper.Map<List<PropertyDto>>(properties),
|
||||
Tags = mapper.Map<List<TagDto>>(tags),
|
||||
Developers = mapper.Map<List<DeveloperDto>>(developers),
|
||||
Publishers = mapper.Map<List<PublisherDto>>(publishers)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user