[SortableList] Adding Properties FromListId and ToListId (#2385)

* feat: allow FluentSortableList to know where an item was dragged from and dropped to * Renamed properties * Changed example back to two lists The swapping is still handled differently (getting the list through the ids) than before. * Reverted to the previous example with added traces for the id. * Added a test to verify the Id is added to the list * Renamed the test to clarify intent * Added unit test for OnUpdate * Changed parameter names to reflect property names * Reverted changes made by the IDE --------- Co-authored-by: Denis Voituron <[email protected]>
microsoft · Jul 16, 2024 · f8f0e5a · f8f0e5a
1 parent f8998c7
commit f8f0e5a
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 14 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -7959,6 +7959,18 @@
             Gets the index of the item in the list after the update.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableListEventArgs.FromListId">
+            <summary>
+            Gets the id of the list the item was in before the update.
+            May be null if no Id was set for <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1"/>
+            </summary>
+        </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSortableListEventArgs.ToListId">
+            <summary>
+            Gets the id of the list the item is in after the update.
+            May be null if no Id was set for <see cref="T:Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1"/>
+            </summary>
+        </member>
         <member name="T:Microsoft.FluentUI.AspNetCore.Components.FluentSpacer">
             <summary />
         </member>

diff --git a/examples/Demo/Shared/Pages/SortableList/Examples/SortableListMoveBetweenLists.razor b/examples/Demo/Shared/Pages/SortableList/Examples/SortableListMoveBetweenLists.razor
@@ -48,6 +48,8 @@
 
         // remove the item from the old index in list 1
         items1.Remove(items1[args.OldIndex]);
+
+        DemoLogger.WriteLine($"Moved item from list {args.FromListId} to list {args.ToListId}");
     }
 
     private void ListTwoRemove(FluentSortableListEventArgs args)
@@ -64,6 +66,8 @@
 
         // remove the item from the old index in list 2
         items2.Remove(items2[args.OldIndex]);
+
+        DemoLogger.WriteLine($"Moved item from list {args.FromListId} to list {args.ToListId}");
     }
     private void SortListOne(FluentSortableListEventArgs args)
     {

diff --git a/src/Core/Components/SortableList/FluentSortableList.razor b/src/Core/Components/SortableList/FluentSortableList.razor
@@ -7,7 +7,7 @@
 
 @if (ItemTemplate is not null)
 {
-    <div @ref="@Element" class="@ClassValue" style="@StyleValue">
+    <div @ref="@Element" id="@Id" class="@ClassValue" style="@StyleValue">
         @foreach (var item in Items)
         {
             <div class="sortable-item @(GetItemFiltered(item) ? "filtered" : "")">@ItemTemplate(item)</div>

diff --git a/src/Core/Components/SortableList/FluentSortableList.razor.cs b/src/Core/Components/SortableList/FluentSortableList.razor.cs
@@ -126,22 +126,22 @@ protected bool GetItemFiltered(TItem item)
     }
 
     [JSInvokable]
-    public void OnUpdateJS(int oldIndex, int newIndex)
+    public void OnUpdateJS(int oldIndex, int newIndex, string fromListId, string toListId)
     {
         if (OnUpdate.HasDelegate)
         {
-            // invoke the OnUpdate event passing in the oldIndex and the newIndex
-            OnUpdate.InvokeAsync(new FluentSortableListEventArgs(oldIndex, newIndex));
+            // invoke the OnUpdate event passing in the oldIndex, the newIndex, the fromId and the toId
+            OnUpdate.InvokeAsync(new FluentSortableListEventArgs(oldIndex, newIndex, fromListId, toListId));
         }
     }
 
     [JSInvokable]
-    public void OnRemoveJS(int oldIndex, int newIndex)
+    public void OnRemoveJS(int oldIndex, int newIndex, string fromListId, string toListId)
     {
         if (OnRemove.HasDelegate)
         {
             // remove the item from the list
-            OnRemove.InvokeAsync(new FluentSortableListEventArgs(oldIndex, newIndex));
+            OnRemove.InvokeAsync(new FluentSortableListEventArgs(oldIndex, newIndex, fromListId, toListId));
         }
     }
 

diff --git a/src/Core/Components/SortableList/FluentSortableList.razor.js b/src/Core/Components/SortableList/FluentSortableList.razor.js
@@ -16,7 +16,7 @@ export function init(list, group, pull, put, sort, handle, filter, fallback, com
             event.to.insertBefore(event.item, event.to.childNodes[event.oldIndex]);
 
             // Notify .NET to update its model and re-render
-            component.invokeMethodAsync('OnUpdateJS', event.oldDraggableIndex, event.newDraggableIndex);
+            component.invokeMethodAsync('OnUpdateJS', event.oldDraggableIndex, event.newDraggableIndex, event.from.id, event.to.id);
         },
         onRemove: (event) => {
             if (event.pullMode === 'clone') {
@@ -28,7 +28,7 @@ export function init(list, group, pull, put, sort, handle, filter, fallback, com
             event.from.insertBefore(event.item, event.from.childNodes[event.oldIndex]);
 
             // Notify .NET to update its model and re-render
-            component.invokeMethodAsync('OnRemoveJS', event.oldDraggableIndex, event.newDraggableIndex);
+            component.invokeMethodAsync('OnRemoveJS', event.oldDraggableIndex, event.newDraggableIndex, event.from.id, event.to.id);
         }
     });
 }
diff --git a/src/Core/Components/SortableList/FluentSortableListEventArgs.cs b/src/Core/Components/SortableList/FluentSortableListEventArgs.cs
@@ -7,10 +7,12 @@ public FluentSortableListEventArgs()
 
     }
 
-    public FluentSortableListEventArgs(int oldIndex, int newIndex)
+    public FluentSortableListEventArgs(int oldIndex, int newIndex, string? fromListId, string? toListId)
     {
         OldIndex = oldIndex;
         NewIndex = newIndex;
+        FromListId = fromListId;
+        ToListId = toListId;
     }
 
     /// <summary>
@@ -22,4 +24,16 @@ public FluentSortableListEventArgs(int oldIndex, int newIndex)
     /// Gets the index of the item in the list after the update.
     /// </summary>
     public int NewIndex { get; }
+
+    /// <summary>
+    /// Gets the id of the list the item was in before the update.
+    /// May be null if no Id was set for <see cref="FluentSortableList{TItem}"/>
+    /// </summary>
+    public string? FromListId { get; }
+
+    /// <summary>
+    /// Gets the id of the list the item is in after the update.
+    /// May be null if no Id was set for <see cref="FluentSortableList{TItem}"/>
+    /// </summary>
+    public string? ToListId { get; }
 }
diff --git a/...ore/SortableList/FluentSortableListTests.FluentSortableList_IdIsAdded.verified.razor.html b/...ore/SortableList/FluentSortableListTests.FluentSortableList_IdIsAdded.verified.razor.html
@@ -0,0 +1,33 @@
+
+<div id="list" class="fluent-sortable-list" b-0uum8h8hrq="">
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 1</div>
+  </div>
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 2</div>
+  </div>
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 3</div>
+  </div>
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 4</div>
+  </div>
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 5</div>
+  </div>
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 6</div>
+  </div>
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 7</div>
+  </div>
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 8</div>
+  </div>
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 9</div>
+  </div>
+  <div class="sortable-item " b-0uum8h8hrq="">
+    <div class="sortable-item">Item 10</div>
+  </div>
+</div>
diff --git a/tests/Core/SortableList/FluentSortableListTests.razor b/tests/Core/SortableList/FluentSortableListTests.razor
@@ -1,5 +1,6 @@
 @using Xunit;
 @inherits TestContext
+
 @code
 {
     public class Item
@@ -23,17 +24,81 @@
     public void FluentSortableList_Default()
     {
         // Arrange && Act
-       
+
         var cut = Render(@<FluentSortableList Items="items">
-                             <ItemTemplate>
-                                <div class="sortable-item">@context.Name</div>
-                             </ItemTemplate>
-                          </FluentSortableList>);
+            <ItemTemplate>
+                <div class="sortable-item">@context.Name</div>
+            </ItemTemplate>
+        </FluentSortableList>);
 
         // Assert
         cut.Verify();
     }
 
+    [Fact]
+    public void FluentSortableList_IdIsAdded()
+    {
+        // Arrange && Act
+
+        var cut = Render(@<FluentSortableList Id="list" Items="items">
+            <ItemTemplate>
+                <div class="sortable-item">@context.Name</div>
+            </ItemTemplate>
+        </FluentSortableList>);
 
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentSortableList_OnUpdate()
+    {
+        // Arrange
+        FluentSortableListEventArgs? args = null;
+        var callback = new EventCallbackFactory().Create<AspNetCore.Components.FluentSortableListEventArgs>
+            (this, (e => args = e));
+        var sortableList = new FluentSortableList<Item>()
+        {
+            Items = items,
+            OnUpdate = callback
+        };
+
+        // Act
+        sortableList.OnUpdateJS(0, 1, "fromList", "toList");
+
+        // Verify
+        Assert.Equal(new FluentSortableListEventArgs(0, 1, "fromList", "toList"), args,
+            FluentSortableListEventArgsComparer);
+    }
+
+    private static bool FluentSortableListEventArgsComparer(FluentSortableListEventArgs? first, FluentSortableListEventArgs? second)
+    {
+        if (first is null || second is null)
+        {
+            return false;
+        }
+
+        if (first.FromListId is null || !first.FromListId.Equals(second.FromListId))
+        {
+            return false;
+        }
+
+        if (first.ToListId is null || !first.ToListId.Equals(second.ToListId))
+        {
+            return false;
+        }
+
+        if (first.OldIndex != second.OldIndex)
+        {
+            return false;
+        }
+
+        if (first.NewIndex != second.NewIndex)
+        {
+            return false;
+        }
+
+        return true;
+    }
 
 }