Merge pull request #95 from NIAEFEUP/feature/sort-tables

Sort tables

content-scripts/src/index.js

@@ -1,7 +1,8 @@
 import {
   injectOverrideFunctions,
   reverseDateDirection,
-  currentAccountPage
+  currentAccountPage,
+  addSortTableActions
 } from "./modules/initialize";
 import { injectAllChanges, userPreferences } from "./modules/options/all";
 import constructNewData from "./modules/utilities/constructNewData";
@@ -48,6 +49,7 @@ const init = async () => {
 
   reverseDateDirection(); //TO FIX: the sort funcionality stop working because of this
   currentAccountPage();
+  addSortTableActions();
   replaceIcons();
   improveSchedule();
 };

content-scripts/src/modules/initialize.js

@@ -1,5 +1,6 @@
 import throttle from "./utilities/throttle";
 import { getPath } from "./utilities/sigarra";
+import { isDate, reverseDate } from "./utilities/date";
 
 // Resize Listener
 export const addResizeListener = () => {
@@ -28,10 +29,9 @@ export const injectOverrideFunctions = () => {
  */
 export const reverseDateDirection = () => {
   document.querySelectorAll(".data").forEach(date => {
-      const dateObj = new Date(date.innerHTML);
-      if(dateObj instanceof Date && !isNaN(dateObj)){
-        date.innerHTML = date.innerHTML.split('-').reverse().join('-');
-      }
+    if(isDate(date.innerHTML)){
+      date.innerHTML = reverseDate(date.innerHTML)
+    }
   });
 }
 
@@ -251,4 +251,76 @@ export const currentAccountPage = () => {
 
     return;
   }
+}
+
+export const addSortTableActions = () => {
+  document.querySelectorAll("th").forEach(th => {
+    th.addEventListener("click", () => {
+      const table = th.closest("table");
+      let index = [...th.parentElement.children].indexOf(th);
+      const aditionalColspan = parseInt(th.parentElement.children[0].getAttribute("colspan")) || 1;
+      const rows = [...table.querySelectorAll("tr")];
+
+      // Removing header rows
+      while(rows.length > 0 && rows[0].classList.length === 0)
+        rows.shift();
+
+      // Only sort rows with classList[0] starting with "i" "p" or "d"
+      const rowsToSort = rows.filter(row => {
+        if(row.classList.length == 0) return false;
+        const firstClass = row.classList[0];
+        return firstClass.startsWith("i") || firstClass.startsWith("p") || firstClass.startsWith("d");
+      })  
+
+      console.log("rows", rowsToSort)
+
+      index += aditionalColspan-1;
+
+      if(rowsToSort.length <= 1) return;
+      if(rowsToSort[0].querySelectorAll("td").length <= index) return;
+
+      const classes = ["asc", "desc"];
+      const currentClasses = th.classList;
+
+      // Remove asc and desc classes from neighbors th
+      th.parentElement.querySelectorAll("th").forEach(neighbor => {
+        if(neighbor == th) return
+        neighbor.classList.remove(...classes);
+      })
+
+      // Check if the current th has some class from classes
+      if(currentClasses.length == 0 || !classes.some(c => currentClasses.contains(c))){
+        th.classList.add(classes[0]);
+      }else{
+        classes.forEach(c => th.classList.toggle(c));
+      }
+
+      rowsToSort.sort((a, b) => {
+        let aValue = a.querySelectorAll("td")[index].innerHTML;
+        let bValue = b.querySelectorAll("td")[index].innerHTML;
+        if(th.classList.contains("desc")) [aValue, bValue] = [bValue, aValue];
+
+        // Date order
+        if(isDate(reverseDate(aValue)) && isDate(reverseDate(bValue))){
+          const aDate = new Date(reverseDate(aValue));
+          const bDate = new Date(reverseDate(bValue));
+          if(aDate < bDate) return -1;
+          if(aDate > bDate) return 1;
+          return 0;
+        }
+
+        // Alphabetical order
+        return aValue.localeCompare(bValue, undefined, {
+          numeric: true,
+          sensitivity: 'base'
+        });
+      })
+
+      rowsToSort.forEach(row => {
+        table.appendChild(row);
+      })
+    })
+
+    th.style.cursor = "pointer";
+  })
 }

content-scripts/src/modules/utilities/date.js

@@ -0,0 +1,11 @@
+//Check if date is valid (YYYY-MM-DD)
+export const isDate = (date) => {
+    const dateObj = new Date(date);
+    return dateObj instanceof Date && !isNaN(dateObj);
+}
+
+//Reverse date format from DD-MM-YYYY to YYYY-MM-DD and vice-versa
+export const reverseDate = (date) => {
+    return date.split("-").reverse().join("-");
+}
+

css/icons.css

@@ -41,3 +41,20 @@
 #infopessoalh.expandido .expandir {
     display: none
 }
+
+th:after {
+    content: "";
+    font-family: "remixicon";
+    vertical-align: middle;
+    padding-left: 0.3rem;
+}
+
+th.asc:after{
+    content: "\f160";
+    font-weight: bold;
+}
+
+th.desc:after{
+    content: "\f15f";
+    font-weight: bold;
+}

css/simpler.css

@@ -543,6 +543,11 @@ section.entidade ~ .formulario{
   background: none;
 }
 
+table.dados tbody tr:nth-child(even), tr.p, td.p,
+table.dados tbody tr:nth-child(odd), tr.i, td.i{
+  background: none !important;
+}
+
 .tabela th,
 .tabela td {
   padding: 0.6rem 1rem !important;