From aa92e45dd94ab2d1899ca760256d47b291b8f3ec Mon Sep 17 00:00:00 2001 From: Lee Wannacott Date: Fri, 19 May 2023 20:53:59 +1200 Subject: [PATCH] BugFix: Fix remember-sort class not working (#92) * WIP : / * Fixed Remember-sort class and wrote some tests for it. --- public/table-sort.js | 39 +++++++++++++++-------- test/order-by-desc.test.js | 42 +++++++++++++++++++++++++ test/table.js | 2 +- test/table.test.js | 63 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 132 insertions(+), 14 deletions(-) diff --git a/public/table-sort.js b/public/table-sort.js index 2685146..4c4ec03 100644 --- a/public/table-sort.js +++ b/public/table-sort.js @@ -109,6 +109,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { const tableHead = sortableTable.querySelector("thead"); const tableHeadHeaders = tableHead.querySelectorAll("th"); const tableRows = tableBody.querySelectorAll("tr"); + let columnIndexesClicked = []; const isNoSortClassInference = sortableTable.classList.contains("no-class-infer"); @@ -119,12 +120,24 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { if (!isNoSortClassInference) { inferSortClasses(tableRows, columnIndex, th); } - makeEachColumnSortable(th, columnIndex, tableBody, sortableTable); + makeEachColumnSortable( + th, + columnIndex, + tableBody, + sortableTable, + columnIndexesClicked + ); } } } - function makeEachColumnSortable(th, columnIndex, tableBody, sortableTable) { + function makeEachColumnSortable( + th, + columnIndex, + tableBody, + sortableTable, + columnIndexesClicked + ) { const desc = th.classList.contains("order-by-desc"); let tableArrows = sortableTable.classList.contains("table-arrows"); const [arrowUp, arrowDown] = [" ▲", " ▼"]; @@ -249,9 +262,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { } } - let [timesClickedColumn, columnIndexesClicked] = [0, []]; - - function rememberSort(timesClickedColumn, columnIndexesClicked) { + function rememberSort() { // if user clicked different column from first column reset times clicked. columnIndexesClicked.push(columnIndex); if (timesClickedColumn === 1 && columnIndexesClicked.length > 1) { @@ -260,10 +271,11 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { const secondLastColumnClicked = columnIndexesClicked[columnIndexesClicked.length - 2]; if (lastColumnClicked !== secondLastColumnClicked) { - timesClickedColumn = 0; columnIndexesClicked.shift(); + timesClickedColumn = 0; } } + return timesClickedColumn; } function getColSpanData(sortableTable, column) { @@ -430,7 +442,13 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { } } + let timesClickedColumn = 0; th.addEventListener("click", function () { + const isRememberSort = sortableTable.classList.contains("remember-sort"); + if (!isRememberSort) { + timesClickedColumn = rememberSort(); + } + timesClickedColumn += 1; const column = { // column used for sorting; better name? @@ -439,6 +457,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { spanSum: {}, }; + getColSpanData(sortableTable, column); + const visibleTableRows = Array.prototype.filter.call( tableBody.querySelectorAll("tr"), (tr) => { @@ -446,8 +466,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { } ); - getColSpanData(sortableTable, column); - const isDataAttribute = th.classList.contains("data-sort"); if (isDataAttribute) { sortDataAttributes(visibleTableRows, column); @@ -477,11 +495,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { sortDates("dmy", visibleTableRows, column); } - const isRememberSort = sortableTable.classList.contains("remember-sort"); - if (!isRememberSort) { - rememberSort(timesClickedColumn, columnIndexesClicked); - } - const tableProperties = { tableRows: visibleTableRows, column, diff --git a/test/order-by-desc.test.js b/test/order-by-desc.test.js index 2b42bfe..3ca78ee 100644 --- a/test/order-by-desc.test.js +++ b/test/order-by-desc.test.js @@ -184,3 +184,45 @@ test("onload-sort: testing that it sorts without a click from user", () => { ) ).toStrictEqual({ col0: ["5", "4", "3", "2", "1"] }); }); + +test("order-by-desc Remember-sort: Sorting cols without rememeber-sort class.", () => { + expect( + createTestTable( + { + col0: ["charlie", "alpha", "beta"], + col1: ["carrie", "doris", "fisher"], + }, + { + classTags: "order-by-desc", + }, + { + colsToClick: [0, 1, 0], + tableTags: "", + } + ) + ).toStrictEqual({ + col0: ["charlie", "beta", "alpha"], + col1: ["carrie", "fisher", "doris"], + }); +}); + +test("order-by-desc Remember-sort: Sorting cols with rememeber-sort class.", () => { + expect( + createTestTable( + { + col0: ["charlie", "alpha", "beta"], + col1: ["carrie", "doris", "fisher"], + }, + { + classTags: "order-by-desc", + }, + { + colsToClick: [0, 1, 0], + tableTags: "remember-sort", + } + ) + ).toStrictEqual({ + col0: ["alpha", "beta", "charlie"], + col1: ["doris", "fisher", "carrie"], + }); +}); diff --git a/test/table.js b/test/table.js index 60b5be9..b308d30 100644 --- a/test/table.js +++ b/test/table.js @@ -53,7 +53,7 @@ function createTestTable( - +
${testTableHeaders} diff --git a/test/table.test.js b/test/table.test.js index f2139c0..a374010 100644 --- a/test/table.test.js +++ b/test/table.test.js @@ -285,6 +285,69 @@ test("Clicking multiple times (>2) doesn't break sorting", () => { }); }); +test("Sorting columns without rememeber-sort ", () => { + expect( + createTestTable( + { + col0: ["charlie", "alpha", "beta"], + col1: ["doris", "carrie", "fisher"], + }, + { + classTags: "", + }, + { + colsToClick: [0, 1, 0], + tableTags: "", + } + ) + ).toStrictEqual({ + col0: ["alpha", "beta", "charlie"], + col1: ["carrie", "fisher", "doris"], + }); +}); + +test("Remember-sort: Sorting cols that have the rememeber-sort class.", () => { + expect( + createTestTable( + { + col0: ["charlie", "alpha", "beta"], + col1: ["doris", "carrie", "fisher"], + }, + { + classTags: "", + }, + { + colsToClick: [0, 1, 0], + tableTags: "remember-sort", + } + ) + ).toStrictEqual({ + col0: ["charlie", "beta", "alpha"], + col1: ["doris", "fisher", "carrie"], + }); +}); + +test("Checking ", () => { + expect( + createTestTable( + { + col0: ["charlie", "alpha", "beta"], + col1: ["doris", "carrie", "fisher"], + }, + { + classTags: "", + }, + { + colsToClick: [0, 1, 0], + tableTags: "", + } + ) + ).toStrictEqual({ + col0: ["alpha", "beta", "charlie"], + col1: ["carrie", "fisher", "doris"], + }); +}); + test("runtime-sort", () => { expect( createTestTable(