From a734346619bb73c9288af0b66c6491254a640197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9rard=20Frantz?= <gf@gerardfrantz.com>
Date: Sat, 9 Mar 2024 09:49:03 +0100
Subject: [PATCH] Adding the Class parameter to SortableList Updating the
 samples

---
 Pages/Index.razor                      |  3 +
 Shared/Demos/SimpleListWithClass.razor | 85 ++++++++++++++++++++++++++
 Shared/SortableList.razor              |  5 +-
 wwwroot/index.html                     |  2 +
 4 files changed, 94 insertions(+), 1 deletion(-)
 create mode 100644 Shared/Demos/SimpleListWithClass.razor

diff --git a/Pages/Index.razor b/Pages/Index.razor
index 191bc9d..d5bdfc2 100644
--- a/Pages/Index.razor
+++ b/Pages/Index.razor
@@ -40,4 +40,7 @@
     <section class="section">
         <ForceFallback></ForceFallback>
     </section>
+    <section class="section">
+        <SimpleListWithClass></SimpleListWithClass>
+    </section>
 </div>
\ No newline at end of file
diff --git a/Shared/Demos/SimpleListWithClass.razor b/Shared/Demos/SimpleListWithClass.razor
new file mode 100644
index 0000000..18f2e07
--- /dev/null
+++ b/Shared/Demos/SimpleListWithClass.razor
@@ -0,0 +1,85 @@
+<div class="container">
+    <h1 class="title is-size-1 has-text-centered">Simple List</h1>
+    <Tabs CodeContent="@codeContent">
+        <ExampleContent>
+            <div class="columns">
+                <div class="column is-half">
+                    <SortableList Id="simpleListWithClass" Class="d-flex flex-wrap gap-2" Items="items" OnUpdate="@SortList" Context="item">
+                        <SortableItemTemplate>
+                            <div class="card has-border-light has-background-blazor has-text-white has-cursor-grab">
+                                <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=""simpleListWithClass"" Class=""d-flex flex-wrap gap-2"" Items=""items"" OnUpdate=""@SortList"" Context=""item"">
+        <SortableItemTemplate>
+            <div class=""has-border has-background-white has-cursor-pointer"">
+                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
+            </div>
+        </SortableItemTemplate>
+    </SortableList>
+
+    @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:00}}"" }}).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();
+        }}
+    }}";
+
+    public List<Item> items = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i:00}" }).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
index 1f0e298..5472321 100644
--- a/Shared/SortableList.razor
+++ b/Shared/SortableList.razor
@@ -5,7 +5,7 @@
 
 @typeparam T
 
-<div id="@Id">
+<div id="@Id" class="@Class">
     @foreach (var item in Items)
     {
         @if (SortableItemTemplate is not null)
@@ -53,6 +53,9 @@
     [Parameter]
     public bool ForceFallback { get; set; } = true;
 
+    [Parameter]
+    public string? Class { get; set; }
+
     private DotNetObjectReference<SortableList<T>>? selfReference;
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
diff --git a/wwwroot/index.html b/wwwroot/index.html
index 3942904..8a263cc 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" />
     <!-- font awesome from cdn -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
     <link href="BlazorSortable.styles.css" rel="stylesheet" />
 </head>
 
@@ -23,6 +24,7 @@
     </div>
     <script src="_framework/blazor.webassembly.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 </body>
 
 </html>
\ No newline at end of file