Skip to content

Commit

Permalink
date-dmy-sort and date-dmy-sort completed tests written and readme up…
Browse files Browse the repository at this point in the history 
…dated
  • Loading branch information
@LeeWannacott
LeeWannacott committed May 11, 2023
1 parent 08f27fc commit 0a24fe5
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 59 deletions.
30 changes: 19 additions & 11 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,23 +41,31 @@ Refer to the documenation for examples on how to use table-sort-js with [HTML](h

#### Classes:

| <table> classes | Description |
| --------------------- | -------------------------------------------------------------------------------------------- |
| "table-sort" | Make the table sortable! (Words, numbers)... |
| "table-arrows" | Display ascending or descending triangles. |
| "no-class-infer" | Turns off inference for adding sort classes automatically (file-size-sort and runtime-sort). |
| "remember-sort" | If clicking on different columns remembers sort of the original column. |
| <table> classes | Description |
| --------------------- | ------------------------------------------------------------------------------------------------------------- |
| "table-sort" | Make the table sortable! (Words, numbers, dates, file sizes)... |
| "table-arrows" | Display ascending or descending triangles. |
| "no-class-infer" | Turns off inference for adding sort classes automatically i.e (file-size-sort, runtime-sort, dates-dmy-sort). |
| "remember-sort" | If clicking on different columns remembers sort of the original column. |

| <th> classes | Description |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
| "order-by-desc" | Order by descending on first click. (default is aescending) |
| "data-sort" | Sort by [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), e.g <td data-sort="42"> |
| "onload-sort" | Sort column on loading of the page. Simulates a click from the user. (can only sort onload for one column) |
| "file-size-sort" | Sort file sizes(B->TiB) uses the binary prefix. (e.g KiB) |
| "runtime-sort" | Sorts runtime in minutes and seconds e.g (1m 20s). Useful for sorting the GitHub actions Run time column... |
| "disable-sort" | Disallow sorting the table by this specific column. |
| "alpha-sort" | Sort alphabetically (z11,z2); default is [natural sort](https://en.wikipedia.org/wiki/Natural_sort_order) (z2,z11). |
| "punct-sort" | Sort punctuation; default ignores punctuation. |
| "dates-mdy-sort" | Sorts dates in mm/dd/yyyy format. e.g (12/28/2023). Can use "/" or "-" or "." as separator. Overides inferred "dates-dmy-sort" class. |

| <th> Inferred Classes. | Description |
| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| "dates-dmy-sort" | Sorts dates in dd/mm/yyyy format. e.g (18/10/1995). Can use "/" or "-" or "." as separator. |
| "runtime-sort" | Sorts runtime in hours minutes and seconds e.g (10h 1m 20s). Useful for sorting the GitHub actions Run time column... |
| "file-size-sort" | Sorts file sizes(B->TiB) uses the binary prefix. (e.g KiB). Input data ideally in Bytes e.g (10b or 10B) |

| <th> Classes that change defaults. | Description |
| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| "order-by-desc" | Order by descending on first click. (default is aescending) |
| "alpha-sort" | Sort alphabetically (z11,z2); default is [natural sort](https://en.wikipedia.org/wiki/Natural_sort_order) (z2,z11). |
| "punct-sort" | Sort punctuation; default ignores punctuation. |

#### Development:

Expand Down
3 changes: 2 additions & 1 deletion deploy.sh
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ cp Contributors.md npm/Contributors.md
npx prettier --write .
npm run deploy
npm run test
echo "Reminder: Update npm package to new version in npm/package.json and npm publish"
echo "Reminder: Update npm package to new version in npm/package.json and npm publish."
echo "Reminder: Update firefox browser extension manifest."
12 changes: 6 additions & 6 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div id="display"></div>
<script src="../public//table-sort.js"></script>

<h1>Testing table sort js</h1>
<h1>Manual testing of table sort js</h1>
<table class="table-sort table-arrows">
<thead>
<tr>
Expand All @@ -22,9 +22,9 @@ <h1>Testing table sort js</h1>
</thead>
<tr>
<td>Franklin</td>
<td>benjamin</td>
<td>Benjamin</td>
<td>1706,1,17</td>
<td></td>
<td>1</td>
<td>k-level</td>
<td>1h 1m 17s</td>
<td>10b</td>
Expand All @@ -34,15 +34,15 @@ <h1>Testing table sort js</h1>
<td>da Vinci</td>
<td>Zarlo</td>
<td>1452.4.15</td>
<td></td>
<td>13000</td>
<td></td>
<td>1m 45s</td>
<td>192038998987021b</td>
<td>18/10/2027</td>
</tr>
<tr>
<td>Statham</td>
<td></td>
<td>Jason</td>
<td>1967-7-26</td>
<td></td>
<td>HR</td>
Expand All @@ -52,7 +52,7 @@ <h1>Testing table sort js</h1>
</tr>
<tr>
<td>Micheal</td>
<td></td>
<td>Angelo</td>
<td>1958/8/21</td>
<td>54</td>
<td>Marketing</td>
Expand Down
70 changes: 38 additions & 32 deletions public/table-sort.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,10 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
const regexDates = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
let runtimeSortCounter = 0,
fileSizeSortCounter = 0,
datesSortCounter =0
;

datesSortCounter = 0;
let tableColumnLength = th.parentElement.childElementCount;
for (let tr of tableRows) {
let runtimeSortMatch, fileSizeSortMatch,datesSortMatch;
let runtimeSortMatch, fileSizeSortMatch, datesSortMatch;
const tableColumn = tr.querySelectorAll("td").item(columnIndex);
if (tableColumn.innerText) {
runtimeSortMatch = tableColumn.innerText.match(
Expand All @@ -93,7 +91,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
if (fileSizeSortMatch) {
fileSizeSortCounter++;
}
if(datesSortMatch){
if (datesSortMatch) {
datesSortCounter++;
}
}
Expand All @@ -114,7 +112,7 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
th,
tableColumnLength,
datesSortCounter,
"dates-sort"
"dates-dmy-sort"
);
}
}
Expand Down Expand Up @@ -203,7 +201,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
columnOfTd = tr.querySelectorAll("td").item(columnIndex).innerText;
}
let match = columnOfTd.match(regexMinutesAndSeconds);
let [minutesInSeconds, hours, seconds, timeinSeconds] = [0, 0, 0, 0];
let [minutesInSeconds, hours, seconds] = [0, 0, 0];
let timeinSeconds = columnOfTd;
if (match) {
const regexHours = match[1];
if (regexHours) {
Expand All @@ -227,41 +226,36 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
}
}

function sortDates(tableRows, columnData) {
function sortDates(dateFormat, tableRows, columnData) {
try {
for (let [i, tr] of tableRows.entries()) {
let columnOfTd;
const regexDate = /^(\d\d?)[\/\.-](\d\d?)[\/\.-]((\d\d)?\d\d)$/;
const regexDate = /^(\d\d?)[./-](\d\d?)[./-]((\d\d)?\d\d)$/;
columnOfTd = tr.querySelectorAll("td").item(columnIndex).textContent;
let match = columnOfTd.match(regexDate);
let [years, days, months] = [0, 0, 0];
let numberToSort = 0;
let numberToSort = columnOfTd;
if (match) {
const regexFirstNumber = match[1];
const regexSecondNumber = match[2];
if (regexFirstNumber) {
if (Number(regexFirstNumber) > 12) {
days = regexFirstNumber;
if (regexSecondNumber) {
months = regexSecondNumber;
}
} else if(Number(regexSecondNumber)>12){
months = regexFirstNumber;
const regexYears = match[3];
if (regexFirstNumber && regexSecondNumber) {
if (dateFormat === "mdy") {
days = regexSecondNumber;
}else{
months = regexFirstNumber;
} else {
days = regexFirstNumber;
months = regexSecondNumber;
months = regexSecondNumber;
}
}
const regexYears = match[3];
if (regexYears) {
years = regexYears;
}
numberToSort = Number(
years +
String(months).padStart(2, "0") +
String(days).padStart(2, "0")
);
numberToSort = Number(
years +
String(months).padStart(2, "0") +
String(days).padStart(2, "0")
);
}
columnData.push(`${numberToSort}#${i}`);
columnIndexAndTableRow[columnData[i]] = tr.innerHTML;
Expand Down Expand Up @@ -302,7 +296,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
columnData,
isFileSize,
isTimeSort,
isSortDates,
isSortDateDayMonthYear,
isSortDateMonthDayYear,
isDataAttribute,
colSpanData,
colSpanSum,
Expand All @@ -323,7 +318,13 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
fileSizeColumnTextAndRow[columnData[i]] = tr.innerHTML;
}
// These classes already handle pushing to column and setting the tr html.
if (!isFileSize && !isDataAttribute && !isTimeSort && !isSortDates) {
if (
!isFileSize &&
!isDataAttribute &&
!isTimeSort &&
!isSortDateDayMonthYear &&
!isSortDateMonthDayYear
) {
columnData.push(`${tdTextContent}#${i}`);
columnIndexAndTableRow[`${tdTextContent}#${i}`] = tr.innerHTML;
}
Expand Down Expand Up @@ -464,9 +465,13 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
sortByRuntime(visibleTableRows, columnData);
}

const isSortDates = th.classList.contains("dates-sort");
if (isSortDates) {
sortDates(visibleTableRows, columnData);
const isSortDateDayMonthYear = th.classList.contains("dates-dmy-sort");
const isSortDateMonthDayYear = th.classList.contains("dates-mdy-sort");
// pick mdy first to override the inferred default class which is dmy.
if (isSortDateMonthDayYear) {
sortDates("mdy", visibleTableRows, columnData);
} else if (isSortDateDayMonthYear) {
sortDates("dmy", visibleTableRows, columnData);
}

const isRememberSort = sortableTable.classList.contains("remember-sort");
Expand All @@ -481,7 +486,8 @@ function tableSortJs(testingTableSortJS = false, domDocumentWindow = document) {
tableRows: visibleTableRows,
columnData,
isFileSize,
isSortDates,
isSortDateDayMonthYear,
isSortDateMonthDayYear,
isDataAttribute,
isTimeSort,
colSpanData,
Expand Down
56 changes: 47 additions & 9 deletions test/table.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,7 @@ test("Clicking multiple times (>2) doesn't break sorting", () => {
});
});

test("time-sort class", () => {
test("runtime-sort", () => {
expect(
createTestTable(
{
Expand Down Expand Up @@ -293,24 +293,62 @@ test("time-sort class", () => {
});
});

test("Dates metric", () => {
test("dates-dmy-sort: UK style dd/mm/yyyy; delim . or / or -", () => {
expect(
createTestTable(
{ col0: ["17/6/1978","18/10/2027" ,"4/9/2008", "2/3/1879", "8/6/1978", "4/6/1978"] },
{ classTags: "dates-sort" }
{
col0: [
"17/6/1978",
"18.10.2027",
"10-12-2017",
"13/12/2017",
"4.9.2008",
"2.3.1879",
"22.3.1879",
"8/6/1978",
"4/6/1978",
],
},
{ classTags: "dates-dmy-sort" }
)
).toStrictEqual({
col0: ["2/3/1879", "4/6/1978","8/6/1978", "17/6/1978" , "4/9/2008","18/10/2027"],
col0: [
"2.3.1879",
"22.3.1879",
"4/6/1978",
"8/6/1978",
"17/6/1978",
"4.9.2008",
"10-12-2017",
"13/12/2017",
"18.10.2027",
],
});
});

test("Dates - US", () => {
test("dates-mdy-sort: US style mm/dd/yyyy; delim . or / or -", () => {
expect(
createTestTable(
{ col0: ["17/6/1978","18/10/2027" ,"4/9/2008", "2/3/1879", "8/6/1978", "4/6/1978"] },
{ classTags: "dates-sort" }
{
col0: [
"1-14-1992",
"1.13.1992",
"4.30.2008",
"1/20/1992",
"10-12-2017",
"2/14/1992",
],
},
{ classTags: "dates-mdy-sort" }
)
).toStrictEqual({
col0: ["2/3/1879", "4/6/1978","8/6/1978", "17/6/1978" , "4/9/2008","18/10/2027"],
col0: [
"1.13.1992",
"1-14-1992",
"1/20/1992",
"2/14/1992",
"4.30.2008",
"10-12-2017",
],
});
});

0 comments on commit 0a24fe5

Please sign in to comment.