Progress - select

src/Connected.Components/ComponentsN/Select.razor

@@ -2,32 +2,48 @@
 
 <style>
     .selectbox {
-        width: 150px;
-        height: 100px;
-        background: red;
+        width:max-content;
         transition: height 0.05s;
         overflow:hidden;
     }
-
-    .selectbox:hover {
-        height: 400px;
-    }
 </style>
 
-<div class="selectbox @CompiledClassList">
-    @if (SearchFieldEnabled)
+<div class="selectbox @CompiledClassList" style="height:@GetHeight()" @onclick="@HeightOnFull">
+    @if (SearchFieldEnabled && SearchFieldVisibility)
     {
         //search field
+        <input type="search" @oninput="@Search" value="@FilterText" />
     }
 
-    @foreach (SelectItem<ValueType> item in Items)
-    {
-        <Connected.ComponentsN.SelectItem ValueType="ValueType" Text="@item.Text" Value="item.Value" />
-    }
+    <div style="overflow-y:scroll; width:max-content;">
+        @if(ItemsCount>0)
+        {
+            @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>

src/Connected.Components/ComponentsN/Select.razor.cs

@@ -1,5 +1,7 @@
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
 namespace Connected.ComponentsN;
 public partial class Select<ValueType>
 {
@@ -8,43 +10,113 @@ public partial class Select<ValueType>
 	public bool SearchFieldEnabled { get; set; } = false;
 
 	[Parameter]
-	public int MaxVisibleItems { get; set; } = 7;
+	public int MaxVisibleItems { get; set; } = 5;
 
 	[Parameter]
 	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 {
-			_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]
-	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]
 	public string FilterText { get; set; } = string.Empty;
 
-	private int _pagination()
+	private int numberOfPages = 1;
+	private void _pagination()
 	{
-		int result = 0;
-		if (MaxVisibleItems<ItemsCount)
+		int result = 1;
+
+		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]
 	public string ClassList { get; set; } = string.Empty;
@@ -60,4 +132,11 @@ public partial class Select<ValueType>
 				.Build();
 		}
 	}
+
+	protected override Task OnParametersSetAsync()
+	{
+		_pagination();
+		SetLists();
+		return base.OnParametersSetAsync();
+	}
 }