From 1627d971b34881ba0ac6c393d63865df01d7005e Mon Sep 17 00:00:00 2001 From: LeeWannacott Date: Thu, 18 May 2023 23:55:53 +1200 Subject: [PATCH 1/2] WIP : / --- public/table-sort.js | 40 ++++++++++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/public/table-sort.js b/public/table-sort.js index 2685146..167c05f 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,19 +262,24 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { } } - let [timesClickedColumn, columnIndexesClicked] = [0, []]; - function rememberSort(timesClickedColumn, columnIndexesClicked) { + function rememberSort(timesClickedColumn,columnIndex, columnIndexesClicked) { // if user clicked different column from first column reset times clicked. + console.log(columnIndex); + console.log(timesClickedColumn); columnIndexesClicked.push(columnIndex); + console.log(columnIndexesClicked); if (timesClickedColumn === 1 && columnIndexesClicked.length > 1) { const lastColumnClicked = columnIndexesClicked[columnIndexesClicked.length - 1]; const secondLastColumnClicked = columnIndexesClicked[columnIndexesClicked.length - 2]; + console.log("1"); if (lastColumnClicked !== secondLastColumnClicked) { - timesClickedColumn = 0; + console.log("2", timesClickedColumn, "time"); columnIndexesClicked.shift(); + console.log("3", timesClickedColumn); + return timesClickedColumn = 0; } } } @@ -430,7 +448,14 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { } } + let timesClickedColumn = 0; th.addEventListener("click", function () { + const isRememberSort = sortableTable.classList.contains("remember-sort"); + // if (!isRememberSort) { + console.log("times",timesClickedColumn) + rememberSort(timesClickedColumn,columnIndex, columnIndexesClicked); + // } + console.log(timesClickedColumn,"after") timesClickedColumn += 1; const column = { // column used for sorting; better name? @@ -477,11 +502,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, From 8250a997d847fc59bcdd7008a01e4a2b1830e892 Mon Sep 17 00:00:00 2001 From: LeeWannacott Date: Fri, 19 May 2023 17:22:32 +1200 Subject: [PATCH 2/2] Fixed Remember-sort class and wrote some tests for it. --- public/table-sort.js | 25 ++++++--------- test/order-by-desc.test.js | 42 +++++++++++++++++++++++++ test/table.js | 2 +- test/table.test.js | 63 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 115 insertions(+), 17 deletions(-) diff --git a/public/table-sort.js b/public/table-sort.js index 167c05f..4c4ec03 100644 --- a/public/table-sort.js +++ b/public/table-sort.js @@ -262,26 +262,20 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { } } - - function rememberSort(timesClickedColumn,columnIndex, columnIndexesClicked) { + function rememberSort() { // if user clicked different column from first column reset times clicked. - console.log(columnIndex); - console.log(timesClickedColumn); columnIndexesClicked.push(columnIndex); - console.log(columnIndexesClicked); if (timesClickedColumn === 1 && columnIndexesClicked.length > 1) { const lastColumnClicked = columnIndexesClicked[columnIndexesClicked.length - 1]; const secondLastColumnClicked = columnIndexesClicked[columnIndexesClicked.length - 2]; - console.log("1"); if (lastColumnClicked !== secondLastColumnClicked) { - console.log("2", timesClickedColumn, "time"); columnIndexesClicked.shift(); - console.log("3", timesClickedColumn); - return timesClickedColumn = 0; + timesClickedColumn = 0; } } + return timesClickedColumn; } function getColSpanData(sortableTable, column) { @@ -451,11 +445,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { let timesClickedColumn = 0; th.addEventListener("click", function () { const isRememberSort = sortableTable.classList.contains("remember-sort"); - // if (!isRememberSort) { - console.log("times",timesClickedColumn) - rememberSort(timesClickedColumn,columnIndex, columnIndexesClicked); - // } - console.log(timesClickedColumn,"after") + if (!isRememberSort) { + timesClickedColumn = rememberSort(); + } + timesClickedColumn += 1; const column = { // column used for sorting; better name? @@ -464,6 +457,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { spanSum: {}, }; + getColSpanData(sortableTable, column); + const visibleTableRows = Array.prototype.filter.call( tableBody.querySelectorAll("tr"), (tr) => { @@ -471,8 +466,6 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) { } ); - getColSpanData(sortableTable, column); - const isDataAttribute = th.classList.contains("data-sort"); if (isDataAttribute) { sortDataAttributes(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(