Add filtering functionality to Index page

the-urlist · Dec 27, 2023 · 545cada · 545cada
1 parent 440e154
commit 545cada
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 3 deletions.
diff --git a/Item.cs b/Item.cs
@@ -5,4 +5,6 @@ public class Item
 {
     public int Id { get; set; }
     public string Name { get; set; } = "";
+
+    public bool Disabled { get; set; } = false;
 }
diff --git a/Pages/Index.razor b/Pages/Index.razor
@@ -32,4 +32,7 @@
         <section class="section has-background-white">
         <DragHandles></DragHandles>
     </section>
+    <section class="section">
+        <Filtering></Filtering>
+    </section>
 </div>
diff --git a/Shared/Filtering.razor b/Shared/Filtering.razor
@@ -0,0 +1,86 @@
+<div class="container">
+    <h1 class="title is-size-1 has-text-centered">Filtering</h1>
+    <p class="mb-4">In the list below, you cannot drag the item in red. This is because it is filtered out with a filter CSS class. Pass the name of this class to the `Filter` property to filter out an item.</p>
+    <Tabs CodeContent="@codeContent">
+        <ExampleContent>
+            <div class="columns">
+                <div class="column is-half">
+                    <SortableList Id="filtering" Filter=".filtered" Items="items" OnUpdate="@SortList" Context="item">
+                        <SortableItemTemplate>
+                            <div class="card has-border-light has-text-white has-cursor-grab @(item.Disabled ? "filtered has-background-danger" : "has-background-blazor")">
+                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
+                            </div>
+                        </SortableItemTemplate>
+                    </SortableList>
+                </div>
+            </div>
+        </ExampleContent>
+    </Tabs>
+</div>
+
+@code {
+
+    private string codeContent = $@"
+    <SortableList Id=""filtering"" Filter="".filtered"" Items=""items"" OnUpdate=""@SortList"" Context=""item"">
+        <SortableItemTemplate>
+            <div class=""card has-border-light has-text-white has-cursor-grab @(item.Disabled ? ""filtered has-background-danger"" : ""has-background-blazor"")"">
+                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
+            </div>
+        </SortableItemTemplate>
+    </SortableList>
+
+    @code {{
+        private void SortList((int oldIndex, int newIndex) indices)
+        {{
+            // deconstruct the tuple
+            var (oldIndex, newIndex) = indices;
+
+            var items = this.items;
+            var itemToMove = items[oldIndex];
+            items.RemoveAt(oldIndex);
+
+            if (newIndex < items.Count)
+            {{
+                items.Insert(newIndex, itemToMove);
+            }}
+            else
+            {{
+                items.Add(itemToMove);
+            }}
+
+            StateHasChanged();
+        }}
+    }}";
+
+    public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
+
+    // on initialized, set a random item in the list to disabled
+    protected override void OnInitialized()
+    {
+        var random = new Random();
+        var randomIndex = random.Next(0, items.Count);
+        items[randomIndex].Disabled = true;
+    }
+
+
+    private void SortList((int oldIndex, int newIndex) indices)
+    {
+        // deconstruct the tuple
+        var (oldIndex, newIndex) = indices;
+
+        var items = this.items;
+        var itemToMove = items[oldIndex];
+        items.RemoveAt(oldIndex);
+
+        if (newIndex < items.Count)
+        {
+            items.Insert(newIndex, itemToMove);
+        }
+        else
+        {
+            items.Add(itemToMove);
+        }
+
+        StateHasChanged();
+    }
+}
diff --git a/Shared/Filtering.razor.css b/Shared/Filtering.razor.css
diff --git a/Shared/SimpleList.razor b/Shared/SimpleList.razor
@@ -1,5 +1,5 @@
 <div class="container">
-    <h1 class="title is-size-1 has-text-centered">Simple List</h1>
+    <h1 class="title is-size-1 has-text-centered">Filtering</h1>
     <Tabs CodeContent="@codeContent">
         <ExampleContent>
             <div class="columns">

diff --git a/Shared/SortableList.razor b/Shared/SortableList.razor
@@ -47,6 +47,9 @@
     [Parameter]
     public string Handle { get; set; } = string.Empty;
 
+    [Parameter]
+    public string? Filter { get; set; }
+
     private DotNetObjectReference<SortableList<T>>? selfReference;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -55,7 +58,7 @@
         {
             selfReference = DotNetObjectReference.Create(this);
             var module = await JS.InvokeAsync<IJSObjectReference>("import", "./Shared/SortableList.razor.js");
-            await module.InvokeAsync<string>("init", Id, Group, Pull, Put, Sort, Handle, selfReference);
+            await module.InvokeAsync<string>("init", Id, Group, Pull, Put, Sort, Handle, Filter, selfReference);
         }
     }
 

diff --git a/Shared/SortableList.razor.js b/Shared/SortableList.razor.js
@@ -1,4 +1,4 @@
-export function init(id, group, pull, put, sort, handle, component) {
+export function init(id, group, pull, put, sort, handle, filter, component) {
     console.log(id, pull, put, sort);
     var sortable = new Sortable(document.getElementById(id), {
         animation: 200,
@@ -7,6 +7,7 @@ export function init(id, group, pull, put, sort, handle, component) {
             pull: pull || true,
             put: put
         },
+        filter: filter || undefined,
         sort: sort,
         forceFallback: true,
         handle: handle || undefined,