Merge pull request #6468 from WoltLab/6.2-grid-view-default-sort-order

Don't include default sort order in URLs generated by grid views

Author: BurntimeX

com.woltlab.wcf/templates/shared_gridView.tpl

@@ -92,6 +92,8 @@
 			'{unsafe:$view->getBaseUrl()|encodeJS}',
 			'{unsafe:$view->getSortField()|encodeJS}',
 			'{unsafe:$view->getSortOrder()|encodeJS}',
+			'{unsafe:$view->getDefaultSortField()|encodeJS}',
+			'{unsafe:$view->getDefaultSortOrder()|encodeJS}',
 			'{unsafe:$view->getBulkInteractionProviderClassName()|encodeJS}',
 			new Map([
 				{foreach from=$view->getParameters() key='name' item='value'}

ts/WoltLabSuite/Core/Component/GridView.ts

@@ -32,6 +32,8 @@ export class GridView {
     baseUrl: string = "",
     sortField = "",
     sortOrder = "ASC",
+    defaultSortField = "",
+    defaultSortOrder = "ASC",
     bulkInteractionProviderClassName: string,
     gridViewParameters?: Map<string, string>,
   ) {
@@ -42,7 +44,7 @@ export class GridView {
     this.#gridViewParameters = gridViewParameters;
 
     this.#initInteractions();
-    this.#state = this.#setupState(gridId, pageNo, baseUrl, sortField, sortOrder);
+    this.#state = this.#setupState(gridId, pageNo, baseUrl, sortField, sortOrder, defaultSortField, defaultSortOrder);
     this.#initEventListeners();
   }
 
@@ -117,8 +119,25 @@ export class GridView {
     });
   }
 
-  #setupState(gridId: string, pageNo: number, baseUrl: string, sortField: string, sortOrder: string): State {
-    const state = new State(gridId, this.#table, pageNo, baseUrl, sortField, sortOrder);
+  #setupState(
+    gridId: string,
+    pageNo: number,
+    baseUrl: string,
+    sortField: string,
+    sortOrder: string,
+    defaultSortField: string,
+    defaultSortOrder: string,
+  ): State {
+    const state = new State(
+      gridId,
+      this.#table,
+      pageNo,
+      baseUrl,
+      sortField,
+      sortOrder,
+      defaultSortField,
+      defaultSortOrder,
+    );
     state.addEventListener("grid-view:change", (event) => {
       void this.#loadRows(event.detail.source);
     });

ts/WoltLabSuite/Core/Component/GridView/Sorting.ts

@@ -15,13 +15,19 @@ export class Sorting extends EventTarget {
   #sortOrder: string;
   #table: HTMLTableElement;
 
-  constructor(table: HTMLTableElement, sortField: string, sortOrder: string) {
+  constructor(
+    table: HTMLTableElement,
+    sortField: string,
+    sortOrder: string,
+    defaultSortField: string,
+    defaultSortOrder: string,
+  ) {
     super();
 
     this.#sortField = sortField;
-    this.#defaultSortField = sortField;
+    this.#defaultSortField = defaultSortField;
     this.#sortOrder = sortOrder;
-    this.#defaultSortOrder = sortOrder;
+    this.#defaultSortOrder = defaultSortOrder;
     this.#table = table;
 
     this.#table
@@ -49,6 +55,14 @@ export class Sorting extends EventTarget {
       return [];
     }
 
+    if (this.#sortField === this.#defaultSortField) {
+      if (this.#sortOrder !== this.#defaultSortOrder) {
+        return [["sortOrder", this.#sortOrder]];
+      } else {
+        return [];
+      }
+    }
+
     return [
       ["sortField", this.#sortField],
       ["sortOrder", this.#sortOrder],

ts/WoltLabSuite/Core/Component/GridView/State.ts

@@ -34,6 +34,8 @@ export class State extends EventTarget {
     baseUrl: string,
     sortField: string,
     sortOrder: string,
+    defaultSortField: string,
+    defaultSortOrder: string,
   ) {
     super();
 
@@ -52,7 +54,7 @@ export class State extends EventTarget {
       this.#switchPage(1, StateChangeCause.Change);
     });
 
-    this.#sorting = new Sorting(table, sortField, sortOrder);
+    this.#sorting = new Sorting(table, sortField, sortOrder, defaultSortField, defaultSortOrder);
     this.#sorting.addEventListener("grid-view:change", () => {
       this.#switchPage(1, StateChangeCause.Change);
     });

wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js

@@ -54,6 +54,8 @@ abstract class AbstractGridView
     private GridViewRowLink $rowLink;
     private int $rowsPerPage = 20;
     private string $baseUrl = '';
+    private string $defaultSortField = '';
+    private string $defaultSortOrder = '';
     private string $sortField = '';
     private string $sortOrder = 'ASC';
     private int $pageNo = 1;
@@ -456,6 +458,44 @@ public function getBaseUrl(): string
         return $this->baseUrl;
     }
 
+    /**
+     * Sets the default sort field of the grid view.
+     */
+    public function setDefaultSortField(string $sortField): void
+    {
+        $this->defaultSortField = $sortField;
+        $this->setSortField($sortField);
+    }
+
+    /**
+     * Sets the default sort order of the grid view.
+     */
+    public function setDefaultSortOrder(string $sortOrder): void
+    {
+        if ($sortOrder !== 'ASC' && $sortOrder !== 'DESC') {
+            throw new \InvalidArgumentException("Invalid value '{$sortOrder}' as default sort order given.");
+        }
+
+        $this->defaultSortOrder = $sortOrder;
+        $this->setSortOrder($sortOrder);
+    }
+
+    /**
+     * Returns the default sort field of the grid view.
+     */
+    public function getDefaultSortField(): string
+    {
+        return $this->defaultSortField;
+    }
+
+    /**
+     * Returns the sort order of the grid view.
+     */
+    public function getDefaultSortOrder(): string
+    {
+        return $this->defaultSortOrder;
+    }
+
     /**
      * Sets the sort field of the grid view.
      */
@@ -648,6 +688,10 @@ protected function fireInitializedEvent(): void
      */
     protected function validate(): void
     {
+        if ($this->getDefaultSortField() === '') {
+            throw new \InvalidArgumentException("Undefined default sort field.");
+        }
+
         if ($this->getSortField()) {
             if (!\in_array($this->getSortField(), \array_map(fn($column) => $column->getID(), $this->getSortableColumns()))) {
                 if (\ENABLE_DEBUG_MODE) {

wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView/Sorting.js

@@ -68,8 +68,8 @@ public function __construct(private readonly int $sessionLogID)
                 ),
         ]);
 
-        $this->setSortField('time');
-        $this->setSortOrder('DESC');
+        $this->setDefaultSortField('time');
+        $this->setDefaultSortOrder('DESC');
     }
 
     #[\Override]

wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView/State.js

@@ -75,8 +75,8 @@ public function __construct()
         ]);
 
         $this->addRowLink(new GridViewRowLink(ACPSessionLogPage::class));
-        $this->setSortField('lastActivityTime');
-        $this->setSortOrder('DESC');
+        $this->setDefaultSortField('lastActivityTime');
+        $this->setDefaultSortOrder('DESC');
     }
 
     #[\Override]