Progress - select
This commit is contained in:
parent
1dabf54e39
commit
d0370a6be4
@ -2,32 +2,48 @@
|
|||||||
|
|
||||||
<style>
|
<style>
|
||||||
.selectbox {
|
.selectbox {
|
||||||
width: 150px;
|
width:max-content;
|
||||||
height: 100px;
|
|
||||||
background: red;
|
|
||||||
transition: height 0.05s;
|
transition: height 0.05s;
|
||||||
overflow:hidden;
|
overflow:hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectbox:hover {
|
|
||||||
height: 400px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="selectbox @CompiledClassList">
|
<div class="selectbox @CompiledClassList" style="height:@GetHeight()" @onclick="@HeightOnFull">
|
||||||
@if (SearchFieldEnabled)
|
@if (SearchFieldEnabled && SearchFieldVisibility)
|
||||||
{
|
{
|
||||||
//search field
|
//search field
|
||||||
|
<input type="search" @oninput="@Search" value="@FilterText" />
|
||||||
}
|
}
|
||||||
|
|
||||||
@foreach (SelectItem<ValueType> item in Items)
|
<div style="overflow-y:scroll; width:max-content;">
|
||||||
{
|
@if(ItemsCount>0)
|
||||||
<Connected.ComponentsN.SelectItem ValueType="ValueType" Text="@item.Text" Value="item.Value" />
|
{
|
||||||
}
|
@foreach (SelectItem<ValueType> item in _itemsToShow)
|
||||||
|
{
|
||||||
|
<Connected.ComponentsN.SelectItem ValueType="ValueType" Text="@item.Text" Value="item.Value" />
|
||||||
|
}
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
<div>Ni elementov</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@if (_pagination()>1)
|
@if (numberOfPages>1)
|
||||||
{
|
{
|
||||||
//pagination
|
<div style="text-align:center; background-color:aliceblue;">
|
||||||
|
@if (numberOfPages < 6)
|
||||||
|
{
|
||||||
|
@for (int i = 1; i <= numberOfPages; i++)
|
||||||
|
{
|
||||||
|
var index = i;
|
||||||
|
<a href="" style ="margin-left:2px; margin-right:2px;" @onclick = "@(()=>SetPage(index))" >@index.ToString()</a>
|
||||||
|
}
|
||||||
|
} else
|
||||||
|
{
|
||||||
|
//pagination of more than 6 pages
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
//pagination
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,5 +1,7 @@
|
|||||||
using Connected.Utilities;
|
using Connected.Utilities;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
|
|
||||||
namespace Connected.ComponentsN;
|
namespace Connected.ComponentsN;
|
||||||
public partial class Select<ValueType>
|
public partial class Select<ValueType>
|
||||||
{
|
{
|
||||||
@ -8,43 +10,113 @@ public partial class Select<ValueType>
|
|||||||
public bool SearchFieldEnabled { get; set; } = false;
|
public bool SearchFieldEnabled { get; set; } = false;
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public int MaxVisibleItems { get; set; } = 7;
|
public int MaxVisibleItems { get; set; } = 5;
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public List<SelectItem<ValueType>> Items
|
public List<SelectItem<ValueType>> Items
|
||||||
{
|
{
|
||||||
get{
|
|
||||||
if (FilterText.Length > 0)
|
|
||||||
{
|
|
||||||
return _items.Where(i => i.Value.ToString().Contains(FilterText) || i.Text.ToString().Contains(FilterText)).ToList();
|
|
||||||
}
|
|
||||||
return _items;
|
|
||||||
}
|
|
||||||
set {
|
set {
|
||||||
_items= value;
|
_originalList = value;
|
||||||
|
_itemsWithFilter= value;
|
||||||
|
_itemsToShow = _itemsWithFilter.Skip(Offset).Take(MaxVisibleItems).ToList();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
private List<SelectItem<ValueType>> _items = new List<SelectItem<ValueType>>();
|
private void SetPage(int page)
|
||||||
|
{
|
||||||
|
_selectedPage = page;
|
||||||
|
SetLists();
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
|
||||||
private int ItemsCount => Items.Count();
|
private void SetLists()
|
||||||
|
{
|
||||||
|
if (FilterText.Length > 0)
|
||||||
|
{
|
||||||
|
_itemsWithFilter = _originalList.Where(i => i.Value.ToString().Contains(FilterText) || i.Text.ToString().Contains(FilterText)).ToList();
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
_itemsWithFilter = _originalList;
|
||||||
|
}
|
||||||
|
_itemsToShow = _itemsWithFilter.Skip(Offset).Take(MaxVisibleItems).ToList();
|
||||||
|
}
|
||||||
|
|
||||||
|
private int Offset
|
||||||
|
{
|
||||||
|
get
|
||||||
|
{
|
||||||
|
return (_selectedPage - 1) * MaxVisibleItems;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
private List<SelectItem<ValueType>> _itemsWithFilter;
|
||||||
|
private List<SelectItem<ValueType>> _itemsToShow;
|
||||||
|
private List<SelectItem<ValueType>> _originalList;
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public int SelectedIndex { get; set; } = 0;
|
public EventCallback<string> ValueChanged { get; set; }
|
||||||
|
private async Task Search(ChangeEventArgs args)
|
||||||
|
{
|
||||||
|
FilterText = args.Value.ToString();
|
||||||
|
SetLists();
|
||||||
|
_pagination();
|
||||||
|
await ValueChanged.InvokeAsync(args.Value.ToString());
|
||||||
|
}
|
||||||
|
|
||||||
|
private int ItemsCount => _itemsWithFilter.Count();
|
||||||
|
|
||||||
|
private int Height = 20;
|
||||||
|
|
||||||
|
private bool SearchFieldVisibility = false;
|
||||||
|
|
||||||
|
private void HeightOnFull()
|
||||||
|
{
|
||||||
|
if (Height < 400)
|
||||||
|
{
|
||||||
|
SearchFieldVisibility = true;
|
||||||
|
Height = 400;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void HeightToDefault()
|
||||||
|
{
|
||||||
|
if (Height > 20)
|
||||||
|
{
|
||||||
|
SearchFieldVisibility = false;
|
||||||
|
Height = 20;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private string GetHeight()
|
||||||
|
{
|
||||||
|
return Height.ToString() + "px;";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string FilterText { get; set; } = string.Empty;
|
public string FilterText { get; set; } = string.Empty;
|
||||||
|
|
||||||
private int _pagination()
|
private int numberOfPages = 1;
|
||||||
|
private void _pagination()
|
||||||
{
|
{
|
||||||
int result = 0;
|
int result = 1;
|
||||||
if (MaxVisibleItems<ItemsCount)
|
|
||||||
|
int totalItems = _itemsWithFilter.Count;
|
||||||
|
if (MaxVisibleItems < totalItems)
|
||||||
{
|
{
|
||||||
result = (int)(ItemsCount / MaxVisibleItems) + (ItemsCount % MaxVisibleItems);
|
result = (int)(totalItems / MaxVisibleItems);
|
||||||
|
if (totalItems % MaxVisibleItems > 0) result++;
|
||||||
}
|
}
|
||||||
return result;
|
if (!numberOfPages.Equals(result))
|
||||||
|
{
|
||||||
|
numberOfPages = result;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
private int _selectedPage = 1;
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string ClassList { get; set; } = string.Empty;
|
public string ClassList { get; set; } = string.Empty;
|
||||||
@ -60,4 +132,11 @@ public partial class Select<ValueType>
|
|||||||
.Build();
|
.Build();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected override Task OnParametersSetAsync()
|
||||||
|
{
|
||||||
|
_pagination();
|
||||||
|
SetLists();
|
||||||
|
return base.OnParametersSetAsync();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user