Add search input

This commit is contained in:
2025-03-10 20:59:46 +01:00
parent 47af962a38
commit fbcd40834e
11 changed files with 128 additions and 10 deletions

View File

@@ -1,4 +1,5 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Search
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.Shared.Dto
@using GameIdeas.BlazorApp.Pages.Games.Models
@@ -8,7 +9,7 @@
<SelectList TItem="Func<GameDto, object>"
Headers="SortTypes"
Items="GameProperties"
@bind-Value=GameFilterParams.GameProperty
@bind-Value=GameFilterParams.SortProperty
HeaderChanged=HandleSortTypeChanged
Theme="SelectListTheme.Sort">
<Button>
@@ -31,6 +32,9 @@
<path d="M16,5V11H21V5M10,11H15V5H10M16,18H21V12H16M10,18H15V12H10M4,18H9V12H4M4,11H9V5H4V11Z" />
</svg>
</div>
<SearchInput @bind-Text=GameFilterParams.SearchName />
</div>
</EditForm>

View File

@@ -6,5 +6,6 @@ namespace GameIdeas.BlazorApp.Pages.Games.Filter;
public class GameFilterParams
{
public SortType? SortType { get; set; }
public Func<GameDto?, object?>? GameProperty { get; set; }
public Func<GameDto?, object?>? SortProperty { get; set; }
public string? SearchName { get; set; }
}

View File

@@ -36,10 +36,13 @@
else
{
<div class="settings-list">
<div class="settings-element">
@ResourcesKey.UserManager
</div>
<span class="line"></span>
<div class="settings-element" @onclick="HandleLogoutClicked">
@ResourcesKey.Logout
</div>
@* <span class="line"></span> *@
</div>
}
</div>

View File

@@ -39,17 +39,17 @@ public partial class AccountSettings (
{
if (EditContext?.Validate() == false)
{
LoginDto.Password = string.Empty;
return;
}
IsLoading = true;
await Task.Delay(TimeSpan.FromSeconds(5));
Close();
AuthentificationService.Login();
IsLoading = false;
LoginDto = new();
Close();
AuthentificationService.Login();
EditContext = new EditContext(LoginDto);
}
private void HandleLogoutClicked()
{

View File

@@ -5,7 +5,7 @@
animation-name: fade-in;
animation-duration: 0.4s;
border: 2px solid var(--low-white);
background: var(--black);
background: var(--semi-black);
right: 10px;
margin-top: 4px;
}
@@ -30,7 +30,7 @@
}
::deep .input-text {
background: var(--light-grey);
background: var(--low-white);
border: 2px solid var(--low-white);
border-radius: var(--small-radius);
padding: 6px;

View File

@@ -0,0 +1,18 @@
<EditForm EditContext="EditContext">
<div class="search-container">
<InputText class="search-field"
@bind-Value=Text />
<div class="clear-icon" @onclick=HandleClearClicked>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
</svg>
</div>
<div type="submit" class="search-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</svg>
</div>
</div>
</EditForm>

View File

@@ -0,0 +1,29 @@
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using System.Threading.Tasks;
namespace GameIdeas.BlazorApp.Shared.Components.Search;
public partial class SearchInput
{
[Parameter] public string? Text { get; set; }
[Parameter] public EventCallback<string> TextChanged { get; set; }
private EditContext? EditContext;
protected override void OnInitialized()
{
Text = string.Empty;
EditContext = new EditContext(Text);
EditContext.OnFieldChanged += async (s, e) =>
{
await TextChanged.InvokeAsync(Text);
};
}
private void HandleClearClicked()
{
Text = string.Empty;
}
}

View File

@@ -0,0 +1,53 @@
.search-container {
display: flex;
flex-direction: row;
gap: 4px;
height: 28px;
padding-left: 8px;
padding-right: 2px;
border-radius: var(--small-radius);
background: var(--black);
overflow: hidden;
align-items: center;
width: 140px;
}
::deep .search-field {
border: none !important;
outline: none !important;
background: none !important;
color: var(--white);
height: 100%;
padding: 0;
min-width: 0;
}
.clear-icon {
min-height: 18px;
min-width: 18px;
height: 18px;
width: 18px;
}
.clear-icon:hover {
cursor: pointer;
}
.clear-icon svg {
fill: var(--white);
}
.search-icon {
min-height: 24px;
min-width: 24px;
height: 24px;
width: 24px;
}
.search-icon:hover {
cursor: pointer;
}
.search-icon svg {
fill: var(--white);
}

View File

@@ -10,6 +10,7 @@ public class Translations (TranslationService translationService)
public string Logout => translationService.Translate(nameof(Logout));
public string EnterUsername => translationService.Translate(nameof(EnterUsername));
public string EnterPassword => translationService.Translate(nameof(EnterPassword));
public string UserManager => translationService.Translate(nameof(UserManager));
}
public static class ResourcesKey
@@ -28,4 +29,5 @@ public static class ResourcesKey
public static string Logout => _instance?.Logout ?? throw new InvalidOperationException("ResourcesKey.Logout is not initialized.");
public static string EnterUsername => _instance?.EnterUsername ?? throw new InvalidOperationException("ResourcesKey.EnterUsername is not initialized.");
public static string EnterPassword => _instance?.EnterPassword ?? throw new InvalidOperationException("ResourcesKey.EnterPassword is not initialized.");
public static string UserManager => _instance?.UserManager ?? throw new InvalidOperationException("ResourcesKey.UserManager is not initialized.");
}

View File

@@ -0,0 +1,7 @@
namespace GameIdeas.Shared.Constants;
public class GlobalConstants
{
public const string EnterKeyCode = "Enter";
public const string PadEnterKeyCode = "NumpadEnter";
}

View File

@@ -5,5 +5,6 @@
"Login": "Se connecter",
"Logout": "Se déconnecter",
"EnterUsername": "Nom d'utilisateur",
"EnterPassword": "Mot de passe"
"EnterPassword": "Mot de passe",
"UserManager": "Gestion des utilisateurs"
}