Add font awesome and update MainLayout and SortableList

the-urlist · Dec 25, 2023 · 5d8e6f6 · 5d8e6f6
1 parent d78322c
commit 5d8e6f6
Show file tree

Hide file tree

Showing 8 changed files with 310 additions and 69 deletions.
diff --git a/MainLayout.razor b/MainLayout.razor
@@ -1,5 +1,29 @@
 @inherits LayoutComponentBase
 
 <main>
-    @Body
+    <div class="columns m-5">
+        <div class="column is-narrow">
+            <aside class="menu">
+                <p class="menu-label">
+                    Sortable Lists
+                </p>
+                <ul class="menu-list">
+                    <li>
+                        <a href="singlelist">Single List</a>
+                        <ul>
+                            <li>
+                                <a href="draghandles">Drag Handles</a>
+                            </li>
+                        </ul>
+                    </li>
+                    <li>
+                        <a href="multiplelists">Multiple Lists</a>
+                    </li>
+                </ul>
+            </aside>
+        </div>
+        <div class="column">
+            @Body
+        </div>
+    </div>
 </main>
diff --git a/Pages/DragHandles.razor b/Pages/DragHandles.razor
@@ -0,0 +1,75 @@
+@page "/draghandles"
+
+<div class="container">
+    <h1 class="title is-size-1 has-text-centered">Drag Handles</h1>
+    <div class="buttons is-centered">
+        <a class="button is-dark" href="https://github.com/your-repo" target="_blank">
+            <span class="icon">
+                <i class="fab fa-github"></i>
+            </span>
+            <span>View on GitHub</span>
+        </a>
+    </div>
+    <div class="columns">
+        <div class="column has-background-primary-light">
+            <SortableList Id="sortable" Handle=".drag-handle" Items="items" OnUpdate="@SortList" Context="item">
+                <SortableItemTemplate>
+                    <div class="columns is-vcentered">
+                        <div class="column is-narrow">
+                            <div class="drag-handle">
+                                <i class="is-size-4 fas fa-grip-vertical"></i>
+                            </div>
+                        </div>
+                        <div class="column">
+                            <div class="card has-background-primary">
+                                <p class="is-size-4 p-2 ml-4 has-text-white">@item.Name</p>
+                            </div>
+
+                        </div>
+                    </div>
+                </SortableItemTemplate>
+            </SortableList>
+        </div>
+        <code class="column is-half m-5 is-size-4 p-4">
+            <p>List&lt;Item&gt; items = [</p>
+            @foreach (var item in items)
+            {
+                                                                                                                                <p class="m-4">{ Id: @item.Id, Name: "@item.Name" },</p>
+            }
+            <p>]</p>
+        </code>
+    </div>
+</div>
+
+@code {
+
+    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();
+
+
+    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/Pages/Index.razor b/Pages/Index.razor
@@ -4,65 +4,6 @@
 
 <div style="height: 100vh; padding-top: 100px;">
     <div class="container">
-        <h1 class="title is-size-1 has-text-primary has-text-centered">Blazor Sortable</h1>
-        <div class="buttons is-centered">
-            <a class="button is-dark" href="https://github.com/your-repo" target="_blank">
-                <span class="icon">
-                    <i class="fab fa-github"></i>
-                </span>
-                <span>View on GitHub</span>
-            </a>
-        </div>
-        <div class="columns">
-            <div class="column has-background-primary-light">
-                <SortableList Id="sortable" Items="items" OnUpdate="@SortList" Context="item">
-                    <SortableItemTemplate>
-                        <div class="card m-4 has-background-primary">
-                            <p class="is-size-4 p-2 ml-4 has-text-white">@item.Name</p>
-                        </div>
-                    </SortableItemTemplate>
-                </SortableList>
-            </div>
-            <code class="column is-half m-5 is-size-4 p-4">
-                <p>List&lt;Item&gt; items = [</p>
-                @foreach (var item in items)
-                {
-                        <p class="m-4">{ Id: @item.Id, Name: "@item.Name" },</p>
-                }
-                ]
-            </code>
-        </div>
+        <h1 class="title is-size-1 has-text-centered">Blazor Sortable</h1>
     </div>
-</div>
-@code {
-
-    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();
-
-
-    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();
-    }
-}
+</div>
diff --git a/Pages/MultipleLists.razor b/Pages/MultipleLists.razor
@@ -0,0 +1,109 @@
+@page "/multipleLists"
+
+<div class="container">
+    <h1 class="title is-size-1 has-text-centered">Multiple Lists</h1>
+    <div class="buttons is-centered">
+        <a class="button is-dark" href="https://github.com/your-repo" target="_blank">
+            <span class="icon">
+                <i class="fab fa-github"></i>
+            </span>
+            <span>View on GitHub</span>
+        </a>
+    </div>
+    <div class="columns">
+        <div class="column has-background-light">
+            <SortableList Group="groupName" Items="items1" Context="item" OnRemove="ListOneRemove">
+                <SortableItemTemplate>
+                    <div class="card m-4 has-background-light">
+                        <p class="is-size-4 p-2 ml-4">@item.Name</p>
+                        <p class="p-2 ml-4">@item.Description</p>
+                    </div>
+                </SortableItemTemplate>
+            </SortableList>
+        </div>
+        <div class="column has-background-light">
+            <SortableList group="groupName" OnRemove="ListTwoRemove" Items="items2" Context="item">
+                <SortableItemTemplate>
+                    <div class="card m-4 has-background-light">
+                        <p class="is-size-4 p-2 ml-4">@item.Name</p>
+                        <p class="p-2 ml-4">@item.Description</p>
+                    </div>
+                </SortableItemTemplate>
+            </SortableList>
+        </div>
+    </div>
+</div>
+
+@code {
+
+    public class Item
+    {
+        public int Id { get; set; }
+        public string Name { get; set; }
+        public string Description { get; set; }
+        public decimal Price { get; set; }
+    }
+
+    public List<Item> items1 = new List<Item>
+{
+new Item { Id = 1, Name = "Apple iPhone 13", Description = "256GB, Midnight", Price = 1099 },
+new Item { Id = 2, Name = "Samsung Galaxy S21", Description = "128GB, Phantom Gray", Price = 799 },
+new Item { Id = 3, Name = "Google Pixel 6 Pro", Description = "128GB, Stormy Black", Price = 899 },
+new Item { Id = 4, Name = "OnePlus 9 Pro", Description = "128GB, Morning Mist", Price = 969 },
+new Item { Id = 5, Name = "Sony WH-1000XM4", Description = "Wireless Noise-Cancelling Headphones", Price = 348 },
+};
+
+    public List<Item> items2 = new List<Item>
+{
+new Item { Id = 6, Name = "To Kill a Mockingbird", Description = "By Harper Lee", Price = 7 },
+new Item { Id = 7, Name = "1984", Description = "By George Orwell", Price = 9 },
+new Item { Id = 8, Name = "The Great Gatsby", Description = "By F. Scott Fitzgerald", Price = 10 },
+new Item { Id = 9, Name = "Moby Dick", Description = "By Herman Melville", Price = 11 },
+new Item { Id = 10, Name = "War and Peace", Description = "By Leo Tolstoy", Price = 12 },
+};
+
+    private void ListOneRemove((int oldIndex, int newIndex) indices)
+    {
+        // get the item at the old index in list 1
+        var item = items1[indices.oldIndex];
+
+        // add it to the new index in list 2
+        items2.Insert(indices.newIndex, item);
+
+        // remove the item from the old index in list 1
+        items1.Remove(items1[indices.oldIndex]);
+    }
+
+    private void ListTwoRemove((int oldIndex, int newIndex) indices)
+    {
+        // get the item at the old index in list 2
+        var item = items2[indices.oldIndex];
+
+        // add it to the new index in list 1
+        items1.Insert(indices.newIndex, item);
+
+        // remove the item from the old index in list 2
+        items2.Remove(items2[indices.oldIndex]);
+    }
+
+    @* 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/Pages/SingleList.razor b/Pages/SingleList.razor
@@ -0,0 +1,65 @@
+@page "/singlelist"
+
+<div class="container">
+    <h1 class="title is-size-1 has-text-centered">Single List</h1>
+    <div class="buttons is-centered">
+        <a class="button is-dark" href="https://github.com/your-repo" target="_blank">
+            <span class="icon">
+                <i class="fab fa-github"></i>
+            </span>
+            <span>View on GitHub</span>
+        </a>
+    </div>
+    <div class="columns">
+        <div class="column has-background-primary-light">
+            <SortableList Id="sortable" Items="items" OnUpdate="@SortList" Context="item">
+                <SortableItemTemplate>
+                    <div class="card m-4 has-background-primary">
+                        <p class="is-size-4 p-2 ml-4 has-text-white">@item.Name</p>
+                    </div>
+                </SortableItemTemplate>
+            </SortableList>
+        </div>
+        <code class="column is-half m-5 is-size-4 p-4">
+            <p>List&lt;Item&gt; items = [</p>
+            @foreach (var item in items)
+            {
+                                    <p class="m-4">{ Id: @item.Id, Name: "@item.Name" },</p>
+            }
+            <p>]</p>
+        </code>
+    </div>
+</div>
+
+@code {
+
+    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();
+
+
+    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/SortableList.razor b/Shared/SortableList.razor
@@ -27,7 +27,16 @@
     public EventCallback<(int oldIndex, int newIndex)> OnUpdate { get; set; }
 
     [Parameter]
-    public string Id { get; set; } = "blazorSortable";
+    public EventCallback<(int oldIndex, int newIndex)> OnRemove { get; set; }
+
+    [Parameter]
+    public string Id { get; set; } = Guid.NewGuid().ToString();
+
+    [Parameter]
+    public string Group { get; set; } = Guid.NewGuid().ToString();
+
+    [Parameter]
+    public string Handle { get; set; } = string.Empty;
 
     private DotNetObjectReference<SortableList<T>>? selfReference;
 
@@ -37,16 +46,23 @@
         {
             selfReference = DotNetObjectReference.Create(this);
             var module = await JS.InvokeAsync<IJSObjectReference>("import", "./Shared/SortableList.razor.js");
-            await module.InvokeAsync<string>("init", Id, selfReference);
+            await module.InvokeAsync<string>("init", Id, Group, Handle, selfReference);
         }
     }
 
     [JSInvokable]
-    public void Drop(int oldIndex, int newIndex)
+    public void OnUpdateJS(int oldIndex, int newIndex)
     {
         // invoke the OnUpdate event passing in the oldIndex and the newIndex
         OnUpdate.InvokeAsync((oldIndex, newIndex));
     }
 
+    [JSInvokable]
+    public void OnRemoveJS(int oldIndex, int newIndex)
+    {
+        // remove the item from the list
+        OnRemove.InvokeAsync((oldIndex, newIndex));
+    }
+
     public void Dispose() => selfReference?.Dispose();
 }