TransferList: Fix Transfer After Transfer All and Other Enhancements (#549)

* TransferList Fix Transfer After Transfer All and Other Enhancements

* Some Fix

Author: mckaragoz

CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml

@@ -6,7 +6,7 @@
         <MudTransferList @ref="_transferList" T="string" @bind-StartCollection="_startCollection" @bind-EndCollection="_endCollection" Vertical="_vertical" Color="_color"
             StyleListCommon="background-color: var(--mud-palette-background-gray); width: 200px" MultiSelection="_multiSelection" MaxItems="_maxItems" SelectAllType="_selectAllType"
             PreventTransfer="@(new Func<bool, bool>(CheckTransfer))" OrderFunc="@(_orderOnTransfer == false ? null : new Func<ICollection<string>, ICollection<string>>(OrderMethod))" ButtonVariant="_buttonVariant"
-            AllowDoubleClick="_allowDoubleClick" SearchBoxStart="_searchboxStart" SearchBoxEnd="_searchboxEnd"
+                         AllowDoubleClick="_allowDoubleClick" SearchBoxStart="_searchboxStart" SearchBoxEnd="_searchboxEnd" Dense="_dense"
             StartTitle="@_startTitle" EndTitle="@_endTitle" />
     </MudItem>
 
@@ -21,6 +21,7 @@
             <MudSwitchM3 @bind-Value="_allowDoubleClick" Label="Allow Double Click" Color="Color.Secondary" />
             <MudSwitchM3 @bind-Value="_searchboxStart" Label="SearchBox Start" Color="Color.Secondary" />
             <MudSwitchM3 @bind-Value="_searchboxEnd" Label="SearchBox End" Color="Color.Secondary" />
+            <MudSwitchM3 @bind-Value="_dense" Label="Dense" Color="Color.Secondary" />
             <MudNumericField @bind-Value="_maxItems" Clearable="true" Label="MaxItems" Variant="Variant.Outlined" Margin="Margin.Dense" />
             <MudSelectExtended @bind-Value="_selectAllType" ItemCollection="@(Enum.GetValues<SelectAllType>())" Label="SelectAll Type" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
             <MudSelectExtended @bind-Value="_color" ItemCollection="@(Enum.GetValues<Color>())" Label="Color" Variant="Variant.Outlined" Margin="Margin.Dense" Dense="true" />
@@ -36,19 +37,20 @@
     ICollection<string> _startCollection = new List<string>() { "Sweden", "Hungary", "Turkey", "England", "Egypt" };
     ICollection<string> _endCollection = new List<string>() { "Brazil", "China", "Germany", "USA", "South Africa" };
 
-    bool _vertical;
-    bool _multiSelection;
-    bool _preventTurkeyTransfer;
-    bool _orderOnTransfer;
-    bool _allowDoubleClick;
-    bool _searchboxStart;
-    bool _searchboxEnd;
-    int? _maxItems;
-    SelectAllType _selectAllType = SelectAllType.Buttons;
-    Color _color = Color.Primary;
-    Variant _buttonVariant = Variant.Text;
-    string _startTitle = "Country Group 1";
-    string _endTitle = "Country Group 2";
+    private bool _vertical;
+    private bool _multiSelection;
+    private bool _preventTurkeyTransfer;
+    private bool _orderOnTransfer;
+    private bool _allowDoubleClick;
+    private bool _searchboxStart;
+    private bool _searchboxEnd;
+    private bool _dense;
+    private int? _maxItems;
+    private SelectAllType _selectAllType = SelectAllType.Buttons;
+    private Color _color = Color.Primary;
+    private Variant _buttonVariant = Variant.Text;
+    private string _startTitle = "Country Group 1";
+    private string _endTitle = "Country Group 2";
 
     private bool CheckTransfer(bool startToEnd)
     {

CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/TransferList/Examples/TransferListExample1.razor

@@ -14,12 +14,16 @@ public async Task TransferListTransferAllTest()
             var transferList = comp.FindComponent<MudTransferList<string>>();
             transferList.Instance.StartCollection.Should().Contain("Turkey");
             transferList.Instance.StartCollection.Should().NotContain("China");
+            transferList?.Instance?.StartCollection?.Count.Should().Be(5);
+            transferList?.Instance?.EndCollection?.Count.Should().Be(5);
             await comp.InvokeAsync(() => transferList.Instance.TransferAll(true));
             transferList.Instance.StartCollection.Should().NotContain("Turkey");
             transferList.Instance.EndCollection.Should().Contain("Turkey");
             await comp.InvokeAsync(() => transferList.Instance.TransferAll(false));
             transferList.Instance.StartCollection.Should().Contain("Turkey");
             transferList.Instance.EndCollection.Should().NotContain("Turkey");
+            transferList?.Instance?.StartCollection?.Count.Should().Be(10);
+            transferList?.Instance?.EndCollection?.Count.Should().Be(0);
         }
 
     }

CodeBeam.MudBlazor.Extensions.UnitTests/Components/TransferListTests.cs

@@ -3,7 +3,7 @@
 @typeparam T
 
 <MudStack Class="@Class" Style="@Style" Row="!Vertical" Spacing="Spacing">
-    <div>
+    <div class="mud-transfer-list-container">
         @if (StartTitleContent != null)
         {
             @StartTitleContent
@@ -12,7 +12,7 @@
         {
             <MudListItemExtended T="string"><MudText>@StartTitle</MudText></MudListItemExtended>
         }
-        <MudListExtended @ref="_startList" Class="@StartClassname" Style="@StartStylename" SearchBox="SearchBoxStart" OnDoubleClick="DoubleClick" T="T" ItemCollection="@StartCollection" Disabled="Disabled" Clickable="true" MultiSelection="@MultiSelection" SelectAll="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MaxItems="@MaxItems" Color="@Color" ToStringFunc="ToStringFunc">
+        <MudListExtended @ref="_startList" Padding="@Padding" Class="@StartClassname" Style="@StartStylename" SearchBox="SearchBoxStart" OnDoubleClick="DoubleClick" T="T" ItemCollection="@StartCollection" Disabled="Disabled" Clickable="true" MultiSelection="@MultiSelection" SelectAll="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MaxItems="@MaxItems" Color="@Color" ToStringFunc="ToStringFunc" Dense="@Dense">
             <SelectAllTemplate>
                 @if (SelectAllType == SelectAllType.SelectAllItem)
                 {
@@ -34,7 +34,7 @@
             <MudIconButton Icon="@(Vertical ? Icons.Material.Filled.KeyboardDoubleArrowUp : Icons.Material.Filled.KeyboardDoubleArrowLeft)" Disabled="Disabled" Color="@Color" Variant="@ButtonVariant" OnClick="@(() => TransferAll(false))" />
         }
     </div>
-    <div>
+    <div class="mud-transfer-list-container">
         @if (EndTitleContent != null)
         {
             @EndTitleContent
@@ -43,7 +43,7 @@
         {
             <MudListItemExtended T="string"><MudText>@EndTitle</MudText></MudListItemExtended>
         }
-        <MudListExtended @ref="_endList" Class="@EndClassname" Style="@EndStylename" SearchBox="SearchBoxEnd" OnDoubleClick="DoubleClick" T="T" ItemCollection="@EndCollection" Disabled="Disabled" Clickable="true" MultiSelection="@MultiSelection" SelectAll="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MaxItems="@MaxItems" Color="@Color" ToStringFunc="ToStringFunc">
+        <MudListExtended @ref="_endList" Padding="@Padding" Class="@EndClassname" Style="@EndStylename" SearchBox="SearchBoxEnd" OnDoubleClick="DoubleClick" T="T" ItemCollection="@EndCollection" Disabled="Disabled" Clickable="true" MultiSelection="@MultiSelection" SelectAll="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MaxItems="@MaxItems" Color="@Color" ToStringFunc="ToStringFunc" Dense="@Dense">
             <SelectAllTemplate>
                 @if (SelectAllType == SelectAllType.SelectAllItem)
                 {

CodeBeam.MudBlazor.Extensions/Components/TransferList/MudTransferList.razor

@@ -16,15 +16,15 @@ public partial class MudTransferList<T> : MudComponentBase
         /// <summary>
         /// 
         /// </summary>
-        protected string? StartClassname => new CssBuilder()
+        protected string? StartClassname => new CssBuilder("mud-transfer-list-common")
             .AddClass(ClassListCommon)
             .AddClass(ClassStartList)
             .Build();
 
         /// <summary>
         /// 
         /// </summary>
-        protected string? EndClassname => new CssBuilder()
+        protected string? EndClassname => new CssBuilder("mud-transfer-list-common")
             .AddClass(ClassListCommon)
             .AddClass(ClassEndList)
             .Build();
@@ -119,11 +119,23 @@ public partial class MudTransferList<T> : MudComponentBase
         public string? EndTitle { get; set; }
 
         /// <summary>
-        /// 
+        /// If true, the transfer list will be displayed vertically. Useful for narrow spaces or mobile devices.
         /// </summary>
         [Parameter]
         public bool Vertical { get; set; }
 
+        /// <summary>
+        /// If true, adds top and bottom padding to the lists. Default is false.
+        /// </summary>
+        [Parameter]
+        public bool Padding { get; set; }
+
+        /// <summary>
+        ///
+        /// </summary>
+        [Parameter]
+        public bool Dense { get; set; }
+
         /// <summary>
         /// 
         /// </summary>
@@ -357,6 +369,7 @@ protected internal async Task TransferAll(bool startToEnd = true)
                 OrderItems();
                 await EndCollectionChanged.InvokeAsync(EndCollection);
                 await StartCollectionChanged.InvokeAsync(StartCollection);
+                _startList.Clear();
             }
             else if (startToEnd == false)
             {
@@ -377,6 +390,7 @@ protected internal async Task TransferAll(bool startToEnd = true)
                 OrderItems();
                 await StartCollectionChanged.InvokeAsync(StartCollection);
                 await EndCollectionChanged.InvokeAsync(EndCollection);
+                _endList.Clear();
             }
         }
 

CodeBeam.MudBlazor.Extensions/Components/TransferList/MudTransferList.razor.cs

@@ -0,0 +1,11 @@
+
+.mud-transfer-list-common {
+    height: fill-available;
+    height: -webkit-fill-available;
+}
+
+.mud-transfer-list-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 0%;
+}

CodeBeam.MudBlazor.Extensions/Styles/Components/_transferlist.scss

@@ -791,6 +791,15 @@
 .mud-typography-display-inline {
   display: inline; }
 
+.mud-transfer-list-common {
+  height: fill-available;
+  height: -webkit-fill-available; }
+
+.mud-transfer-list-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%; }
+
 /*@import '../abstracts/variables';*/
 .mud-list-extended {
   margin: 0;

CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.css

@@ -9,6 +9,7 @@
 @import 'components/_switchm3';
 @import 'components/_wheel';
 @import 'components/_typographym3';
+@import 'components/_transferlist.scss';
 
 @import 'components/_listextended';
 @import 'components/_selectextended';