Add ability to sort columns (#253)

* Add ability to sort columns

Run prettier

* Disable undef List

* Ignore lint of vendored minified lib

* Adding cursor:pointer to sort column headers

---------

Co-authored-by: Alex Cottner <acottner@mozilla.com>

.eslintignore

@@ -0,0 +1 @@
+extension/content/list-2.3.1.min.js

.github/workflows/ci.yml

@@ -32,7 +32,7 @@ jobs:
         run: npm run lint
 
       - name: Ext Lint
-        run: npx web-ext lint --warnings-as-errors --privileged --self-hosted --source-dir=extension/
+        run: npx web-ext lint --ignore-files="**/*.min.js" --warnings-as-errors --privileged --self-hosted --source-dir=extension/
 
   test:
     runs-on: ubuntu-latest

.prettierignore

@@ -0,0 +1 @@
+extension/content/list-2.3.1.min.js

extension/content/index.html

@@ -47,17 +47,17 @@ <h2>Sync History</h2>
     </section>
   </section>
   <section id="status">
-    <table>
+    <table id="status-table">
       <thead>
         <tr>
-          <th>Collection</th>
-          <th>Last Check</th>
-          <th>Server Timestamp</th>
-          <th>Local Timestamp</th>
+          <th><span class="sort" data-sort="collection">Collection</span></th>
+          <th><span class="sort" data-sort="last-check">Last Check</span></th>
+          <th><span class="sort desc" data-sort="server-timestamp">Server Timestamp</span></th>
+          <th><span class="sort" data-sort="local-timestamp">Local Timestamp</span></th>
           <th>Actions</th>
         </tr>
       </thead>
-      <tbody>
+      <tbody class="list">
       </tbody>
     </table>
   </section>
@@ -66,7 +66,7 @@ <h2>Sync History</h2>
 <template id="collection-status-tpl">
   <tr class="collection-status">
     <td>
-      <a class="url"></a>
+      <a class="collection url"></a>
       <div class="error"></div>
     </td>
     <td class="last-check"></td>
@@ -92,6 +92,7 @@ <h2>Sync History</h2>
   </li>
 </template>
 
+<script type="text/javascript" src="list-2.3.1.min.js"></script>
 <script type="text/javascript" src="script.js"></script>
 
 </html>

extension/content/script.js

@@ -149,6 +149,16 @@ async function refreshUI(state) {
     };
     statusTable.appendChild(tableRow);
   });
+  const options = {
+    valueNames: [
+      "collection",
+      "last-check",
+      "server-timestamp",
+      "local-timestamp",
+    ],
+  };
+  // eslint-disable-next-line no-undef
+  new List("status-table", options);
 }
 
 async function main() {

extension/content/style.css

@@ -199,3 +199,21 @@ button.clear-data {
 #sync-history .status:not(.success) {
   background-color: var(--error-text-color);
 }
+
+.sort {
+  cursor: pointer;
+}
+
+.sort:after {
+  content: "▼▲";
+  padding-left: 10px;
+  opacity: 0.5;
+}
+.sort.desc:after {
+  content: "▼";
+  opacity: 1;
+}
+.sort.asc:after {
+  content: "▲";
+  opacity: 1;
+}