Add DisablingSorting section to Index page and update SortableList co…

…mponent
the-urlist · Dec 26, 2023 · 5a97365 · 5a97365
1 parent fa89fdf
commit 5a97365
Show file tree

Hide file tree

Showing 8 changed files with 184 additions and 29 deletions.
diff --git a/Item.cs b/Item.cs
@@ -0,0 +1,8 @@
+namespace BlazorSortable;
+
+
+public class Item
+{
+    public int Id { get; set; }
+    public string Name { get; set; } = "";
+}
diff --git a/Pages/Index.razor b/Pages/Index.razor
@@ -26,4 +26,7 @@
     <section class="section has-background-white">
         <Cloning></Cloning>
     </section>
+    <section class="section">
+        <DisablingSorting></DisablingSorting>
+    </section>
 </div>
diff --git a/Shared/Cloning.razor b/Shared/Cloning.razor
@@ -1,11 +1,11 @@
 <div class="container">
     <h1 class="title is-size-1 has-text-centered">Cloning</h1>
     <p class="mb-4">Cloning is enabled by the "Pull='Clone'" property. This allows cloning of an item by dropping it into a shared list.</p>
-    <Tabs CodeContent="Test">
+    <Tabs CodeContent="@codeContent">
         <ExampleContent>
             <div class="columns">
                 <div class="column">
-                    <SortableList Group="cloning" Pull="clone" Items="items1" Context="item" OnRemove="ListOneRemove">
+                    <SortableList Id="clone1" Group="cloning" Pull="clone" Items="items1" Context="item" OnRemove="ListOneRemove">
                         <SortableItemTemplate>
                             <div class="card has-border has-background-blazor has-text-white">
                                 <p class="is-size-4 p-2 ml-4">@item.Name</p>
@@ -14,7 +14,7 @@
                     </SortableList>
                 </div>
                 <div class="column">
-                    <SortableList Group="cloning" Pull="clone" OnRemove="ListTwoRemove" Items="items2" Context="item">
+                    <SortableList Id="clone2" Group="cloning" Pull="clone" OnRemove="ListTwoRemove" Items="items2" Context="item">
                         <SortableItemTemplate>
                             <div class=" card has-border has-background-blazor has-text-white">
                                 <p class="is-size-4 p-2 ml-4">@item.Name</p>
@@ -30,13 +30,42 @@
 
 @code {
 
-    private bool showCode = false;
+        private string codeContent = $@"
+    <SortableList Group=""cloning"" Pull=""clone"" Items=""items1"" Context=""item"" OnRemove=""ListOneRemove"">
+        <SortableItemTemplate>
+            <div class="" card has-border has-background-white"">
+                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
+            </div>
+        </SortableItemTemplate>
+    </SortableList>
+    <SortableList Group=""cloning"" Pull=""clone"" OnRemove=""ListTwoRemove"" Items=""items2"" Context=""item"">
+        <SortableItemTemplate>
+            <div class=""card has-background-white has-border"">
+                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
+            </div>
+        </SortableItemTemplate>
+    </SortableList>
 
-    public class Item
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = "";
-    }
+    @code {{
+        private void ListOneRemove((int oldIndex, int newIndex) indices)
+        {{
+            var item = items1[indices.oldIndex];
+            var clone = item;
+
+            items1.Remove(items1[indices.oldIndex]);
+        }}
+
+        private void ListTwoRemove((int oldIndex, int newIndex) indices)
+        {{
+            var item = items2[indices.oldIndex];
+            var clone = item;
+
+            items2.Remove(items2[indices.oldIndex]);
+        }}
+    }}
+    ";
+
+    private bool showCode = false;
 
     public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
 
@@ -47,7 +76,6 @@
         // get the item at the old index in list 1
         var item = items1[indices.oldIndex];
 
-        // make a copy
         var clone = item;
 
         // add it to the new index in list 2
@@ -59,8 +87,11 @@
         // get the item at the old index in list 2
         var item = items2[indices.oldIndex];
 
+        // make a copy
+        var clone = item;
+
         // add it to the new index in list 1
-        items1.Insert(indices.newIndex, item);
+        items1.Insert(indices.newIndex, clone);
     }
 
 }
diff --git a/Shared/DisablingSorting.razor b/Shared/DisablingSorting.razor
@@ -0,0 +1,116 @@
+<div class="container">
+    <h1 class="title is-size-1 has-text-centered">Disabling Sorting</h1>
+    <p class="mb-4">You can disable sorting with the `Sort` option set to `false`. You can also disable dropping items on a list by setting the `Put` to `false`. In the example below, you can drag from list 1 to list 2, but not from list 2 to list 1. You can sort list 2, but not list 1.</p>
+    <Tabs CodeContent="@codeContent">
+        <ExampleContent>
+            <div class="columns">
+                <div class="column">
+                    <SortableList Id="disabledOne" Group="disabledSorting" Pull="clone" Put="false" Sort="false" Items="items1" Context="item" OnRemove="ListOneRemove">
+                        <SortableItemTemplate>
+                            <div class="card has-border has-background-white">
+                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
+                            </div>
+                        </SortableItemTemplate>
+                    </SortableList>
+                </div>
+                <div class="column">
+                    <SortableList Id="disabledTwo" Group="disabledSorting" Pull="clone" Items="items2" Context="item" OnUpdate="SortList">
+                        <SortableItemTemplate>
+                            <div class=" card has-border has-background-white">
+                                <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=""disabledOne"" Group=""disabledSorting"" Pull=""clone"" Put=""false"" Sort=""false"" Items=""items1"" Context=""item"" OnRemove=""ListOneRemove"">
+            <SortableItemTemplate>
+                <div class=""card has-border has-background-blazor has-text-white"">
+                    <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
+                </div>
+            </SortableItemTemplate>
+        </SortableList>
+    
+        <SortableList Id=""disabledTwo"" Group=""disabledSorting"" Pull=""clone"" Items=""items2"" Context=""item"" OnUpdate=""SortList"">
+            <SortableItemTemplate>
+                <div class="" card has-border has-background-blazor has-text-white"">
+                    <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
+
+                </div>
+            </SortableItemTemplate>
+        </SortableList>
+
+        @code {{
+            private void ListOneRemove((int oldIndex, int newIndex) indices)
+            {{
+                var item = items1[indices.oldIndex];
+
+                var clone = item;
+
+                items2.Insert(indices.newIndex, clone);
+            }}
+
+            private void SortList((int oldIndex, int newIndex) indices)
+            {{
+                // deconstruct the tuple
+                var (oldIndex, newIndex) = indices;
+
+                var items = this.items2;
+                var itemToMove = items[oldIndex];
+                items.RemoveAt(oldIndex);
+
+                if (newIndex < items2.Count)
+                {{
+                    items.Insert(newIndex, itemToMove);
+                }}
+                else
+                {{
+                    items.Add(itemToMove);
+                }}
+
+                StateHasChanged();
+            }}
+        }}";
+
+    public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
+
+    public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
+
+    private void ListOneRemove((int oldIndex, int newIndex) indices)
+    {
+        var item = items1[indices.oldIndex];
+
+        var clone = item;
+
+        items2.Insert(indices.newIndex, clone);
+    }
+
+    private void SortList((int oldIndex, int newIndex) indices)
+    {
+        // deconstruct the tuple
+        var (oldIndex, newIndex) = indices;
+
+        var items = this.items2;
+        var itemToMove = items[oldIndex];
+        items.RemoveAt(oldIndex);
+
+        if (newIndex < items2.Count)
+        {
+            items.Insert(newIndex, itemToMove);
+        }
+        else
+        {
+            items.Add(itemToMove);
+        }
+
+        StateHasChanged();
+    }
+
+}
diff --git a/Shared/SharedLists.razor b/Shared/SharedLists.razor
@@ -5,7 +5,7 @@
         <ExampleContent>
             <div class="columns">
                 <div class="column">
-                    <SortableList Group="sharedLists" Items="items1" Context="item" OnRemove="ListOneRemove">
+                    <SortableList Id="shared1" Group="sharedLists" Items="items1" Context="item" OnRemove="ListOneRemove">
                         <SortableItemTemplate>
                             <div class=" card has-border has-background-white">
                                 <p class="is-size-4 p-2 ml-4">@item.Name</p>
@@ -14,7 +14,7 @@
                     </SortableList>
                 </div>
                 <div class="column">
-                    <SortableList Group="sharedLists" OnRemove="ListTwoRemove" Items="items2" Context="item">
+                    <SortableList Id="shared2" Group="sharedLists" OnRemove="ListTwoRemove" Items="items2" Context="item">
                         <SortableItemTemplate>
                             <div class="card has-background-white has-border">
                                 <p class="is-size-4 p-2 ml-4">@item.Name</p>
@@ -71,12 +71,6 @@
         }}
     }}
     ";
-    public class Item
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = "";
-
-    }
 
     public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
 

diff --git a/Shared/SimpleList.razor b/Shared/SimpleList.razor
@@ -4,7 +4,7 @@
         <ExampleContent>
             <div class="columns">
                 <div class="column is-half">
-                    <SortableList Id="sortable" Items="items" OnUpdate="@SortList" Context="item">
+                    <SortableList Id="simpleList" Items="items" OnUpdate="@SortList" Context="item">
                         <SortableItemTemplate>
                             <div class="card has-border has-background-blazor has-text-white has-cursor-pointer">
                                 <p class="is-size-4 p-2 ml-4">@item.Name</p>
@@ -56,12 +56,6 @@
             StateHasChanged();
         }}
     }}";
-
-    public class Item
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = "";
-    }
 
     public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();
 

diff --git a/Shared/SortableList.razor b/Shared/SortableList.razor
@@ -38,6 +38,12 @@
     [Parameter]
     public string? Pull { get; set; }
 
+    [Parameter]
+    public bool Put { get; set; } = true;
+
+    [Parameter]
+    public bool Sort { get; set; } = true;
+
     [Parameter]
     public string Handle { get; set; } = string.Empty;
 
@@ -49,7 +55,7 @@
         {
             selfReference = DotNetObjectReference.Create(this);
             var module = await JS.InvokeAsync<IJSObjectReference>("import", "./Shared/SortableList.razor.js");
-            await module.InvokeAsync<string>("init", Id, Group, Pull, Handle, selfReference);
+            await module.InvokeAsync<string>("init", Id, Group, Pull, Put, Sort, Handle, selfReference);
         }
     }
 

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