Three state sorting (#234)

gustavnavar · Dec 7, 2020 · 8562c9e · 8562c9e
1 parent 75173d4
commit 8562c9e
Show file tree

Hide file tree

Showing 14 changed files with 757 additions and 668 deletions.
diff --git a/GridBlazor/Columns/GridColumn.cs b/GridBlazor/Columns/GridColumn.cs
@@ -175,11 +175,12 @@ public override IGridColumn<T> SetListFilter(IEnumerable<SelectItem> selectItems
 
         public override IGridColumn<T> SortInitialDirection(GridSortDirection direction)
         {
+            InitialDirection = direction;
+
             if (string.IsNullOrEmpty(_grid.Settings.SortSettings.ColumnName))
             {
                 IsSorted = true;
                 Direction = direction;
-                InitialDirection = direction;
 
                 // added to enable initial sorting
                 _grid.Settings.SortSettings.ColumnName = Name;

diff --git a/GridBlazor/Columns/GridColumnBase.cs b/GridBlazor/Columns/GridColumnBase.cs
@@ -58,6 +58,7 @@ public abstract class GridColumnBase<T> : GridStyledColumn, IGridColumn<T>, IExp
         public string FieldName { get; protected set; }
 
         public bool IsSorted { get; set; }
+
         public GridSortDirection? Direction { get; set; }
 
         public GridSortDirection? InitialDirection { get; set; }

diff --git a/GridBlazor/Columns/GridColumnCollection.cs b/GridBlazor/Columns/GridColumnCollection.cs
@@ -213,16 +213,13 @@ private IGridColumn<T> CreateColumn<TKey>(Expression<Func<T, TKey>> constraint,
 
         internal void UpdateColumnsSorting()
         {
-            if (!string.IsNullOrEmpty(SortSettings.ColumnName))
+            foreach (IGridColumn gridColumn in this)
             {
-                foreach (IGridColumn gridColumn in this)
-                {
-                    gridColumn.IsSorted = gridColumn.Name == SortSettings.ColumnName;
-                    if (gridColumn.Name == SortSettings.ColumnName)
-                        gridColumn.Direction = SortSettings.Direction;
-                    else
-                        gridColumn.Direction = null;
-                }
+                gridColumn.IsSorted = gridColumn.Name == SortSettings.ColumnName;
+                if (gridColumn.Name == SortSettings.ColumnName)
+                    gridColumn.Direction = SortSettings.Direction;
+                else
+                    gridColumn.Direction = null;
             }
         }
     }

diff --git a/GridBlazor/Pages/GridComponent.razor.cs b/GridBlazor/Pages/GridComponent.razor.cs
@@ -452,6 +452,14 @@ public async Task GetSortUrl(string columnQueryParameterName, string columnName,
             await OnSortChanged();
         }
 
+        public async Task GetSortUrl(string columnQueryParameterName, string directionQueryParameterName)
+        {
+            Grid.RemoveQueryParameter(columnQueryParameterName);
+            Grid.RemoveQueryParameter(directionQueryParameterName);
+            await UpdateGrid();
+            await OnSortChanged();
+        }
+
         protected virtual async Task OnSortChanged()
         {
             SortEventArgs args = new SortEventArgs();

diff --git a/GridBlazor/Pages/GridHeaderComponent.razor b/GridBlazor/Pages/GridHeaderComponent.razor
@@ -26,11 +26,11 @@
                 {
                     if (Column.IsSorted)
                     {
-                        <a href="javascript:void(0);" @onclick="TitleButtonClicked" data-column="@Column.Name" data-sorted="@(Column.Direction == GridSortDirection.Ascending ? "asc" : "desc")">@Column.Title</a>
+                        <button type="button" @onclick="TitleButtonClicked" data-column="@Column.Name" data-sorted="@(Column.Direction == GridSortDirection.Ascending ? "asc" : "desc")">@Column.Title</button>
                     }
                     else
                     {
-                        <a href="javascript:void(0);" @onclick="TitleButtonClicked" data-column="@Column.Name">@Column.Title</a>
+                        <button type="button" @onclick="TitleButtonClicked" data-column="@Column.Name">@Column.Title</button>
                     }
                 }
                 else
@@ -48,11 +48,18 @@
             <div class="@_cssSortingClass" @onmouseover="DisplayTooltip" @onmouseout="HideTooltip">
                 @if (Column.SortEnabled)
                 {
-                    <button @onclick="TitleButtonClicked" type="button">@Column.Title</button>
+                    if (Column.IsSorted)
+                    {
+                        <button type="button" @onclick="TitleButtonClicked" data-column="@Column.Name" data-sorted="@(Column.Direction == GridSortDirection.Ascending ? "asc" : "desc")">@Column.Title</button>
+                    }
+                    else
+                    {
+                        <button type="button" @onclick="TitleButtonClicked" data-column="@Column.Name">@Column.Title</button>
+                    }
                 }
                 else
                 {
-                    <span>@Column.Title</span>
+                    <span data-column="@Column.Name">@Column.Title</span>
                 }
                 @if (Column.IsSorted)
                 {

diff --git a/GridBlazor/Pages/GridHeaderComponent.razor.cs b/GridBlazor/Pages/GridHeaderComponent.razor.cs
@@ -172,13 +172,31 @@ private string GetPagerQueryParameterName(IGridPager pager)
 
         protected async Task TitleButtonClicked()
         {
-            //switch direction for link:
-            GridSortDirection newDir = Column.Direction == GridSortDirection.Ascending
-                                           ? GridSortDirection.Descending
-                                           : GridSortDirection.Ascending;
-
-            await GridComponent.GetSortUrl(SortingSettings.ColumnQueryParameterName, Column.Name, 
-                SortingSettings.DirectionQueryParameterName, ((int)newDir).ToString(CultureInfo.InvariantCulture));
+            if (Column.IsSorted)
+            {
+                if (Column.Direction == GridSortDirection.Ascending)
+                {
+                    await GridComponent.GetSortUrl(SortingSettings.ColumnQueryParameterName, Column.Name, SortingSettings.DirectionQueryParameterName,
+                        ((int)GridSortDirection.Descending).ToString(CultureInfo.InvariantCulture));
+                }
+                else
+                {
+                    if (Column.InitialDirection.HasValue)
+                    {
+                        await GridComponent.GetSortUrl(SortingSettings.ColumnQueryParameterName, Column.Name, SortingSettings.DirectionQueryParameterName,
+                        ((int)GridSortDirection.Ascending).ToString(CultureInfo.InvariantCulture));
+                    }
+                    else
+                    {
+                        await GridComponent.GetSortUrl(SortingSettings.ColumnQueryParameterName, SortingSettings.DirectionQueryParameterName);
+                    }
+                }
+            }
+            else
+            {
+                await GridComponent.GetSortUrl(SortingSettings.ColumnQueryParameterName, Column.Name, SortingSettings.DirectionQueryParameterName, 
+                    ((int)GridSortDirection.Ascending).ToString(CultureInfo.InvariantCulture));
+            }
         }
 
         public async Task FilterIconClicked()

diff --git a/GridMvc.Demo/BlazorComponents/OrdersComponent.razor b/GridMvc.Demo/BlazorComponents/OrdersComponent.razor
@@ -2,6 +2,7 @@
 @using GridMvc.Demo.Models
 @using GridMvc.Demo.Resources
 @using GridMvc.Demo.Services
+@using GridShared.Sorting
 @using Microsoft.Extensions.Primitives
 @using System.Globalization
 @using System.Threading.Tasks
@@ -60,7 +61,7 @@ else
 
             /* Adding "OrderDate" column: */
             c.Add(o => o.OrderDate, "OrderCustomDate").Titled(SharedResource.OrderCustomDate)
-                //.SortInitialDirection(GridSortDirection.Descending)
+                .SortInitialDirection(GridSortDirection.Descending)
                 .SetCellCssClassesContraint(o => o.OrderDate.HasValue && o.OrderDate.Value >= DateTime.Parse("1997-01-01") ? "red" : "")
                 .Format("{0:yyyy-MM-dd}").SetWidth(120)
                 .Max(true).Min(true);

diff --git a/GridMvc/Columns/GridColumn.cs b/GridMvc/Columns/GridColumn.cs
@@ -175,6 +175,8 @@ public override IGridColumn<T> SetListFilter(IEnumerable<SelectItem> selectItems
 
         public override IGridColumn<T> SortInitialDirection(GridSortDirection direction)
         {
+            InitialDirection = direction;
+
             if (string.IsNullOrEmpty(_grid.Settings.SortSettings.ColumnName))
             {
                 IsSorted = true;

diff --git a/GridMvc/Columns/GridColumnBase.cs b/GridMvc/Columns/GridColumnBase.cs
@@ -54,8 +54,14 @@ public abstract class GridColumnBase<T> : GridStyledColumn, IGridColumn<T>, ISGr
         public string FieldName { get; protected set; }
 
         public bool IsSorted { get; set; }
+
         public GridSortDirection? Direction { get; set; }
 
+        public GridSortDirection? InitialDirection { 
+            get; 
+            set; 
+        }
+
         public bool Hidden { get; set; }
 
         public bool? ExcelHidden { get; set; }

diff --git a/GridMvc/Columns/GridColumnCollection.cs b/GridMvc/Columns/GridColumnCollection.cs
@@ -210,16 +210,13 @@ private IGridColumn<T> CreateColumn<TKey>(Expression<Func<T, TKey>> constraint,
 
         internal void UpdateColumnsSorting()
         {
-            if (!string.IsNullOrEmpty(_sortSettings.ColumnName))
+            foreach (IGridColumn gridColumn in this)
             {
-                foreach (IGridColumn gridColumn in this)
-                {
-                    gridColumn.IsSorted = gridColumn.Name == _sortSettings.ColumnName;
-                    if (gridColumn.Name == _sortSettings.ColumnName)
-                        gridColumn.Direction = _sortSettings.Direction;
-                    else
-                        gridColumn.Direction = null;
-                }
+                gridColumn.IsSorted = gridColumn.Name == _sortSettings.ColumnName;
+                if (gridColumn.Name == _sortSettings.ColumnName)
+                    gridColumn.Direction = _sortSettings.Direction;
+                else
+                    gridColumn.Direction = null;
             }
         }
     }

diff --git a/GridMvc/Resources/js/gridmvc-ajax.js b/GridMvc/Resources/js/gridmvc-ajax.js
@@ -406,7 +406,9 @@
                         e.preventDefault();
 
                         var search = $(this).attr('href');
-                        self.gridSort = search.substr(search.match(/grid-column=\w+/).index);
+                        var searchMatch = search.match(/grid-column=\w+/);
+                        if (searchMatch)
+                            self.gridSort = search.substr(searchMatch.index);
 
                         // load new data
                         self.loadPage();