Add query results to dashboard

web/app/templates/main/dashboard.html.j2

@@ -1,9 +1,17 @@
 {% extends "nopaque.html.j2" %}
 
 {% block page_content %}
-<div class="col s12" id="corpora">
+<div class="col s12">
-  <h3>My Corpora</h3>
+  <h3>My Corpora and Query results</h3>
-  <p>This service enables you to group your files into corpora. You can create as many as you want and edit them at all times.</p>
+  <p>Create a corpus to interactively perform linguistic analysis or import query results to save interesting passages.</p>
+  <div class="row">
+    <div class="col s12">
+      <ul class="tabs">
+        <li class="tab col s6"><a class="active" href="#corpora">Corpora</a></li>
+        <li class="tab col s6"><a href="#query-results">Query results</a></li>
+      </ul>
+    </div>
+    <div class="col s12" id="corpora">
       <div class="card">
         <div class="card-content">
           <div class="input-field">
@@ -31,6 +39,47 @@
           <a class="waves-effect waves-light btn" href="{{ url_for('corpora.add_corpus') }}">New corpus<i class="material-icons right">add</i></a>
         </div>
       </div>
+    </div>
+    <div class="col s12" id="query-results">
+      <div class="card">
+        <div class="card-content">
+          <div class="input-field">
+            <i class="material-icons prefix">search</i>
+            <input id="search-query-results" class="search" type="search"></input>
+            <label for="search-query-results">Search query result</label>
+          </div>
+          <ul class="pagination paginationTop"></ul>
+          <table class="highlight responsive-table">
+            <thead>
+              <tr>
+                <th>
+                  <span class="sort" data-sort="title">Title</span> and<br>
+                  <span class="sort" data-sort="description">Description</span>
+                </th>
+                <th>
+                  <span class="sort" data-sort="corpus">Corpus</span> and<br>
+                  <span class="sort" data-sort="query">Query</span>
+                </th>
+                <th>{# Actions #}</th>
+              </tr>
+            </thead>
+            <tbody class="list">
+              <tr class="show-if-only-child">
+                <td colspan="5">
+                  <span class="card-title"><i class="material-icons left">folder</i>Nothing here...</span>
+                  <p>No query results yet imported.</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <ul class="pagination paginationBottom"></ul>
+        </div>
+        <div class="card-action right-align">
+          <a class="waves-effect waves-light btn" href="{{ url_for('query_results.add_query_result') }}">Add query result<i class="material-icons right">file_upload</i></a>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="col s12" id="jobs">
@@ -88,6 +137,17 @@
   </div>
 </div>
 
+<div id="delete-query-result-modal" class="modal no-autoinit">
+  <div class="modal-content">
+    <h4>Confirm query result deletion</h4>
+    <p>Do you really want to delete the query result <b id="selected-query-result-title"></b>? It will be permanently deleted.</p>
+  </div>
+  <div class="modal-footer">
+    <a href="#!" class="btn modal-close waves-effect waves-light">Cancel</a>
+    <a class="btn modal-close red waves-effect waves-light" id="selected-query-result-delete-link"><i class="material-icons left">delete</i>Delete</a>
+  </div>
+</div>
+
 <div id="new-job-modal" class="modal">
   <div class="modal-content">
     <h4>Select a service</h4>
@@ -130,14 +190,21 @@
   var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
                                      "Corpus");
   var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, "Job");
+  var queryResultList = new RessourceList("query-results",
+                                          nopaque.queryResultsSubscribers,
+                                          "QueryResult", {page: 10});
   var deleteCorpusModalElement = document.getElementById("delete-corpus-modal");
   var deleteCorpusModal;
   var deleteJobModalElement = document.getElementById("delete-job-modal");
   var deleteJobModal;
+  var deleteQueryResultModalElement = document.getElementById("delete-query-result-modal");
+  var deleteQueryResultModal;
   var selectedCorpusDeleteLinkElement = document.getElementById("selected-corpus-delete-link");
   var selectedCorpusTitleElement = document.getElementById("selected-corpus-title");
   var selectedJobDeleteLinkElement = document.getElementById("selected-job-delete-link");
   var selectedJobTitleElement = document.getElementById("selected-job-title");
+  var selectedQueryResultDeleteLinkElement = document.getElementById("selected-query-result-delete-link");
+  var selectedQueryResultTitleElement = document.getElementById("selected-query-result-title");
   function prepareDeleteCorpusModal(selectedCorpusId) {
     var selectedCorpus;
     if (selectedCorpusId in nopaque.user.corpora) {
@@ -164,9 +231,23 @@
     }
     deleteJobModal.open();
   }
+  function prepareDeleteQueryResultModal(selectedQueryResultId) {
+    var selectedQueryResult;
+    if (selectedQueryResultId in nopaque.user.query_results) {
+      selectedQueryResult = nopaque.user.query_results[selectedQueryResultId];
+      selectedQueryResultDeleteLinkElement.href = `/query_results/${selectedQueryResult.id}/delete`;
+      selectedQueryResultTitleElement.innerText = selectedQueryResult.title;
+    } else {
+      selectedQueryResult = undefined;
+      selectedQueryResultDeleteLinkElement.href = "";
+      selectedQueryResultTitleElement.innerText = "";
+    }
+    deleteQueryResultModal.open();
+  }
   document.addEventListener("DOMContentLoaded", () => {
     deleteCorpusModal = M.Modal.init(deleteCorpusModalElement);
     deleteJobModal = M.Modal.init(deleteJobModalElement);
+    deleteQueryResultModal = M.Modal.init(deleteQueryResultModalElement);
   });
 </script>