diff --git a/ts/WoltLabSuite/Core/Component/GridView.ts b/ts/WoltLabSuite/Core/Component/GridView.ts index 4cae3bbdd1..78e4b71dc6 100644 --- a/ts/WoltLabSuite/Core/Component/GridView.ts +++ b/ts/WoltLabSuite/Core/Component/GridView.ts @@ -38,7 +38,6 @@ export class GridView { this.#gridViewParameters = gridViewParameters; this.#initPagination(); - this.#initSorting(); this.#initInteractions(); this.#filter = this.#setupFilter(gridId); this.#sorting = this.#setupSorting(sortField, sortOrder); @@ -55,8 +54,6 @@ export class GridView { }); } - #initSorting(): void {} - #switchPage(pageNo: number, updateQueryString: boolean = true): void { this.#pagination.page = pageNo; this.#pageNo = pageNo; @@ -107,9 +104,9 @@ export class GridView { if (this.#pageNo > 1) { parameters.push(["pageNo", this.#pageNo.toString()]); } - if (this.#sorting.getSortField()) { - parameters.push(["sortField", this.#sorting.getSortField()]); - parameters.push(["sortOrder", this.#sorting.getSortOrder()]); + + for (const parameter of this.#sorting.getQueryParameters()) { + parameters.push(parameter); } this.#filter.getActiveFilters().forEach((value, key) => { @@ -148,7 +145,6 @@ export class GridView { #handlePopState(): void { let pageNo = 1; - this.#sorting.resetSorting(); this.#filter.resetFilters(); const url = new URL(window.location.href); @@ -158,20 +154,14 @@ export class GridView { return; } - if (key === "sortField") { - this.#sorting.setSortField(value); - } - - if (key === "sortOrder") { - this.#sorting.setSortOrder(value); - } - const matches = key.match(/^filters\[([a-z0-9_]+)\]$/i); if (matches) { this.#filter.setFilter(matches[1], value); } }); + this.#sorting.updateFromSearchParams(url.searchParams); + this.#switchPage(pageNo, false); } diff --git a/ts/WoltLabSuite/Core/Component/GridView/Sorting.ts b/ts/WoltLabSuite/Core/Component/GridView/Sorting.ts index a8c34204b4..5d3ec39975 100644 --- a/ts/WoltLabSuite/Core/Component/GridView/Sorting.ts +++ b/ts/WoltLabSuite/Core/Component/GridView/Sorting.ts @@ -35,17 +35,28 @@ export class Sorting extends EventTarget { return this.#sortOrder; } - resetSorting(): void { - this.#sortField = this.#defaultSortField; - this.#sortOrder = this.#defaultSortOrder; - } + getQueryParameters(): [string, string][] { + if (this.#sortField === "") { + return []; + } - setSortField(sortField: string): void { - this.#sortField = sortField; + return [ + ["sortField", this.#sortField], + ["sortOrder", this.#sortOrder], + ]; } - setSortOrder(sortOrder: string): void { - this.#sortOrder = sortOrder; + updateFromSearchParams(params: URLSearchParams): void { + this.#sortField = this.#defaultSortField; + this.#sortOrder = this.#defaultSortOrder; + + params.forEach((value, key) => { + if (key === "sortField") { + this.#sortField = value; + } else if (key === "sortOrder") { + this.#sortOrder = value; + } + }); } #sort(sortField: string): void { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js index 26b04084e3..6a1efd1684 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView.js @@ -26,7 +26,6 @@ define(["require", "exports", "tslib", "../Api/Gridviews/GetRow", "../Api/Gridvi this.#baseUrl = baseUrl; this.#gridViewParameters = gridViewParameters; this.#initPagination(); - this.#initSorting(); this.#initInteractions(); this.#filter = this.#setupFilter(gridId); this.#sorting = this.#setupSorting(sortField, sortOrder); @@ -40,7 +39,6 @@ define(["require", "exports", "tslib", "../Api/Gridviews/GetRow", "../Api/Gridvi void this.#switchPage(event.detail); }); } - #initSorting() { } #switchPage(pageNo, updateQueryString = true) { this.#pagination.page = pageNo; this.#pageNo = pageNo; @@ -72,9 +70,8 @@ define(["require", "exports", "tslib", "../Api/Gridviews/GetRow", "../Api/Gridvi if (this.#pageNo > 1) { parameters.push(["pageNo", this.#pageNo.toString()]); } - if (this.#sorting.getSortField()) { - parameters.push(["sortField", this.#sorting.getSortField()]); - parameters.push(["sortOrder", this.#sorting.getSortOrder()]); + for (const parameter of this.#sorting.getQueryParameters()) { + parameters.push(parameter); } this.#filter.getActiveFilters().forEach((value, key) => { parameters.push([`filters[${key}]`, value]); @@ -105,7 +102,6 @@ define(["require", "exports", "tslib", "../Api/Gridviews/GetRow", "../Api/Gridvi } #handlePopState() { let pageNo = 1; - this.#sorting.resetSorting(); this.#filter.resetFilters(); const url = new URL(window.location.href); url.searchParams.forEach((value, key) => { @@ -113,17 +109,12 @@ define(["require", "exports", "tslib", "../Api/Gridviews/GetRow", "../Api/Gridvi pageNo = parseInt(value, 10); return; } - if (key === "sortField") { - this.#sorting.setSortField(value); - } - if (key === "sortOrder") { - this.#sorting.setSortOrder(value); - } const matches = key.match(/^filters\[([a-z0-9_]+)\]$/i); if (matches) { this.#filter.setFilter(matches[1], value); } }); + this.#sorting.updateFromSearchParams(url.searchParams); this.#switchPage(pageNo, false); } #initEventListeners() { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView/Sorting.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView/Sorting.js index 008fd19ed2..06695afcf6 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView/Sorting.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/GridView/Sorting.js @@ -32,15 +32,26 @@ define(["require", "exports"], function (require, exports) { getSortOrder() { return this.#sortOrder; } - resetSorting() { + getQueryParameters() { + if (this.#sortField === "") { + return []; + } + return [ + ["sortField", this.#sortField], + ["sortOrder", this.#sortOrder], + ]; + } + updateFromSearchParams(params) { this.#sortField = this.#defaultSortField; this.#sortOrder = this.#defaultSortOrder; - } - setSortField(sortField) { - this.#sortField = sortField; - } - setSortOrder(sortOrder) { - this.#sortOrder = sortOrder; + params.forEach((value, key) => { + if (key === "sortField") { + this.#sortField = value; + } + else if (key === "sortOrder") { + this.#sortOrder = value; + } + }); } #sort(sortField) { if (this.#sortField == sortField && this.#sortOrder == "ASC") {