kevin/BlazorDeepDive
1
0
Fork 0
Code

Move Search bar into its own component.

Browse Source
This commit is contained in:
Kevin Matsubara 2025-03-27 12:32:42 +01:00
parent 7cf251570c
commit bdfc834753
3 changed files with 48 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
ServerManagement/Components/Controls/SearchBarComponent.razor Normal file
View File

@ -0,0 +1,25 @@
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Search servers"
@bind-value="serverFilter"
@bind-value:event="oninput" />
<button class="btn btn-outline-secondary" type="button" id="button-search" @onclick="HandleSearch">Search</button>
</div>
@code {
private string _serverFilter = "";
private string serverFilter {
get => _serverFilter;
set
{
_serverFilter = value;
}
}
[Parameter]
public EventCallback<string> FilterSearchTerm { get; set; }
private void HandleSearch()
{
FilterSearchTerm.InvokeAsync(serverFilter);
}
}

12
ServerManagement/Components/Controls/ServerListComponent.razor
View File

@ -8,12 +8,22 @@
} }
@code { @code {
private List<Server>? servers;
[Parameter] [Parameter]
public string? CityName { get; set; } public string? CityName { get; set; }
private List<Server>? servers; [Parameter]
public string SearchFilter { get; set; } = "";
protected override void OnParametersSet() protected override void OnParametersSet()
{
if (string.IsNullOrWhiteSpace(this.SearchFilter))
{ {
servers = ServersRepository.GetServersByCity(CityName ?? "Eindhoven"); servers = ServersRepository.GetServersByCity(CityName ?? "Eindhoven");
} }
else
{
servers = ServersRepository.SearchServers(SearchFilter);
}
}
} }

31
ServerManagement/Components/Pages/Servers.razor
View File

@ -6,39 +6,30 @@
<br/> <br/>
<CityListComponent SelectCityCallBack="HandleCitySelection"></CityListComponent> <CityListComponent SelectCityCallBack="HandleCitySelection"></CityListComponent>
<br/> <br/>
<div class="input-group mb-3"> <SearchBarComponent FilterSearchTerm="HandleSearch"></SearchBarComponent>
<input type="text" class="form-control" placeholder="Search servers"
@bind-value="serverFilter"
@bind-value:event="oninput" />
<button class="btn btn-outline-secondary" type="button" id="button-search" @onclick="HandleSearch">Search</button>
</div>
<br/> <br/>
<a href="@($"/servers/add")" class="btn btn-primary">Add</a> <a href="@($"/servers/add")" class="btn btn-primary">Add</a>
<br/> <br/>
<ServerListComponent CityName="@this.selectedCity"></ServerListComponent> <ServerListComponent
CityName="@this.selectedCity"
SearchFilter="@this.searchFilter">
</ServerListComponent>
@code { @code {
private string selectedCity = "Eindhoven"; private string selectedCity = "Eindhoven";
private string _serverFilter = ""; private string searchFilter = "";
private string serverFilter {
get => _serverFilter;
set
{
_serverFilter = value;
//this.servers = ServersRepository.SearchServers(_serverFilter);
//this.selectedCity = string.Empty;
}
}
private void HandleCitySelection(string cityName) private void HandleCitySelection(string cityName)
{ {
this.searchFilter = string.Empty;
this.selectedCity = cityName; this.selectedCity = cityName;
} }
private void HandleSearch() private void HandleSearch(string searchFilter)
{ {
//this.servers = ServersRepository.SearchServers(serverFilter); this.selectedCity = string.Empty;
// this.selectedCity = string.Empty; this.searchFilter = searchFilter;
} }
} }