From 688591ebe8aa58f16b2931dbbed73131fde98b4d Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Thu, 16 Jan 2020 15:04:12 +0100
Subject: [PATCH] Add sort function to corpus and job lists

---
 app/static/js/CorpusList.js          |  7 +++++--
 app/static/js/JobList.js             | 17 +++++++++++------
 app/templates/admin/user.html.j2     | 26 ++++++++++++++++++++++++--
 app/templates/main/dashboard.html.j2 | 26 ++++++++++++++++++++++++--
 4 files changed, 64 insertions(+), 12 deletions(-)

diff --git a/app/static/js/CorpusList.js b/app/static/js/CorpusList.js
index a0e5932a..eae12786 100644
--- a/app/static/js/CorpusList.js
+++ b/app/static/js/CorpusList.js
@@ -37,6 +37,7 @@ class CorpusList extends List {
               corpusStatusElement.classList.remove(...Object.values(CorpusList.STATUS_COLORS));
               corpusStatusElement.classList.add(CorpusList.STATUS_COLORS[operation.value] || CorpusList.STATUS_COLORS['default']);
               corpusStatusElement.innerHTML = operation.value;
+              item.values({status: operation.value});
               break;
             default:
               break;
@@ -106,13 +107,15 @@ class CorpusList extends List {
      * Add an entry to the List.js datastructure and immediatly replace the
      * generic DOM element with our own one created above.
     */
-    this.add([{description: corpus.description, id: corpus.id, title: corpus.title}],
+    this.add([{description: corpus.description, id: corpus.id,
+               status: corpus.status, title: corpus.title}],
              function(items) {items[0].elm = rowElement;});
   }
 }
 CorpusList.DEFAULT_OPTIONS = {item: `<div>
-                                       <span class="title"></span>
                                        <span class="description"></span>
+                                       <td class="status"></td>
+                                       <span class="title"></span>
                                      </div>`,
                               page: 4,
                               pagination: {innerWindow: 8, outerWindow: 1},
diff --git a/app/static/js/JobList.js b/app/static/js/JobList.js
index 7915a68c..4b8b7ddc 100644
--- a/app/static/js/JobList.js
+++ b/app/static/js/JobList.js
@@ -37,6 +37,7 @@ class JobList extends List {
               jobStatusElement.classList.remove(...Object.values(JobList.STATUS_COLORS));
               jobStatusElement.classList.add(JobList.STATUS_COLORS[operation.value] || JobList.STATUS_COLORS['default']);
               jobStatusElement.innerHTML = operation.value;
+              item.values({status: operation.value});
               break;
             default:
               break;
@@ -106,17 +107,21 @@ class JobList extends List {
      * Add an entry to the List.js datastructure and immediatly replace the
      * generic DOM element with our own one created above.
     */
-    this.add([{description: job.description, id: job.id, title: job.title}],
+    this.add([{description: job.description, id: job.id,
+               service: `/service=${job.service}`, status: job.status,
+               title: job.title}],
              function(items) {items[0].elm = rowElement;});
   }
 }
-JobList.DEFAULT_OPTIONS = {item: `<div>
-                                    <span class="title"></span>
-                                    <span class="description"></span>
-                                  </div>`,
+JobList.DEFAULT_OPTIONS = {item: `<tr>
+                                    <td class="description"></td>
+                                    <td class="service"></td>
+                                    <td class="status"></td>
+                                    <td class="title"></td>
+                                  </tr>`,
                            page: 4,
                            pagination: {innerWindow: 8, outerWindow: 1},
-                           valueNames: ["description", "title", {data: ["id"]}]};
+                           valueNames: ["description", "service", "status", "title", {data: ["id"]}]};
 JobList.SERVICE_ICONS = {"merge_images": "burst_mode",
                          "nlp": "format_textdirection_l_to_r",
                          "ocr": "find_in_page",
diff --git a/app/templates/admin/user.html.j2 b/app/templates/admin/user.html.j2
index 3c026392..6bc49613 100644
--- a/app/templates/admin/user.html.j2
+++ b/app/templates/admin/user.html.j2
@@ -35,10 +35,21 @@
     <div class="card-content" id="corpora">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
-        <input id="search-corpus" class="search" type="text"></input>
+        <input id="search-corpus" class="search" type="search"></input>
         <label for="search-corpus">Search corpus</label>
       </div>
       <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              <span class="sort" data-sort="title">Title</span>
+              <span class="sort" data-sort="description">Description</span>
+            </th>
+            <th><span class="sort" data-sort="status">Status</span></th>
+            <th></th>
+          </tr>
+        </thead>
         <tbody class="list"></tbody>
       </table>
       <ul class="pagination"></ul>
@@ -52,10 +63,21 @@
     <div class="card-content" id="jobs">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
-        <input id="search-job" class="search" type="text"></input>
+        <input id="search-job" class="search" type="search"></input>
         <label for="search-job">Search job</label>
       </div>
       <table>
+        <thead>
+          <tr>
+            <th><span class="sort" data-sort="service">Service</span></th>
+            <th>
+              <span class="sort" data-sort="title">Title</span>
+              <span class="sort" data-sort="description">Description</span>
+            </th>
+            <th><span class="sort" data-sort="status">Status</span></th>
+            <th></th>
+          </tr>
+        </thead>
         <tbody class="list"></tbody>
       </table>
       <ul class="pagination"></ul>
diff --git a/app/templates/main/dashboard.html.j2 b/app/templates/main/dashboard.html.j2
index ce5c7aad..7dc6d38f 100644
--- a/app/templates/main/dashboard.html.j2
+++ b/app/templates/main/dashboard.html.j2
@@ -8,10 +8,21 @@
     <div class="card-content" id="corpora">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
-        <input id="search-corpus" class="search" type="text"></input>
+        <input id="search-corpus" class="search" type="search"></input>
         <label for="search-corpus">Search corpus</label>
       </div>
       <table>
+        <thead>
+          <tr>
+            <th></th>
+            <th>
+              <span class="sort" data-sort="title">Title</span>
+              <span class="sort" data-sort="description">Description</span>
+            </th>
+            <th><span class="sort" data-sort="status">Status</span></th>
+            <th></th>
+          </tr>
+        </thead>
         <tbody class="list"></tbody>
       </table>
       <ul class="pagination"></ul>
@@ -29,10 +40,21 @@
     <div class="card-content" id="jobs">
       <div class="input-field">
         <i class="material-icons prefix">search</i>
-        <input id="search-job" class="search" type="text"></input>
+        <input id="search-job" class="search" type="search"></input>
         <label for="search-job">Search job</label>
       </div>
       <table>
+        <thead>
+          <tr>
+            <th><span class="sort" data-sort="service">Service</span></th>
+            <th>
+              <span class="sort" data-sort="title">Title</span>
+              <span class="sort" data-sort="description">Description</span>
+            </th>
+            <th><span class="sort" data-sort="status">Status</span></th>
+            <th></th>
+          </tr>
+        </thead>
         <tbody class="list"></tbody>
       </table>
       <ul class="pagination"></ul>