Add search input
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
@@ -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; }
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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()
|
||||
{
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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.");
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
namespace GameIdeas.Shared.Constants;
|
||||
|
||||
public class GlobalConstants
|
||||
{
|
||||
public const string EnterKeyCode = "Enter";
|
||||
public const string PadEnterKeyCode = "NumpadEnter";
|
||||
}
|
||||
@@ -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"
|
||||
}
|
||||
Reference in New Issue
Block a user