Add delete button in job and corpus lists.

web/app/static/js/nopaque.lists.js

@@ -89,6 +89,7 @@ RessourceList.dataMapper = {
 
   // Mapping for Corpus entities shown in the dashboard table.
   Corpus: corpus => ({creation_date: corpus.creation_date,
+                      "delete-onclick": `prepareDeleteCorpusModal(${corpus.id})`,
                       description: corpus.description,
                       id: corpus.id,
                       "analyse-link": ["analysing", "prepared", "start analysis"].includes(corpus.status) ? `/corpora/${corpus.id}/analyse` : "",
@@ -105,6 +106,7 @@ RessourceList.dataMapper = {
                                "delete-modal": `delete-corpus-file-${corpus_file.id}-modal`}),
   // Mapping for job entities shown in the dashboard table.
   Job: job => ({creation_date: job.creation_date,
+                "delete-onclick": `prepareDeleteJobModal(${job.id})`,
                 description: job.description,
                 id: job.id,
                 link: `/jobs/${job.id}`,
@@ -118,7 +120,7 @@ RessourceList.dataMapper = {
   // Mapping for imported result entities from corpus analysis.
   // Shown in imported results table
   QueryResult: query_result => ({corpus_name: query_result.query_metadata.corpus_name,
-                                 "delete-link": `prepareQueryResultModal(${query_result.id})`,
+                                 "delete-onclick": `prepareDeleteQueryResultModal(${query_result.id})`,
                                  description: query_result.description,
                                  id: query_result.id,
                                  "inspect-link": `/query_results/${query_result.id}/inspect`,
@@ -167,6 +169,9 @@ RessourceList.options = {
                       </span>
                     </td>
                     <td class="actions right-align">
+                      <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-onclick" data-position="top" data-tooltip="Delete">
+                        <i class="material-icons">delete</i>
+                      </a>
                       <a class="btn-floating tooltipped waves-effect waves-light edit-link" data-position="top" data-tooltip="Edit">
                         <i class="material-icons">edit</i>
                       </a>
@@ -180,6 +185,7 @@ RessourceList.options = {
                         "title",
                         {data: ["id"]},
                         {name: "analyse-link", attr: "href"},
+                        {name: "delete-onclick", attr: "onclick"},
                         {name: "edit-link", attr: "href"},
                         {name: "status", attr: "data-status"}]},
   CorpusFile: {item: `<tr>
@@ -220,6 +226,9 @@ RessourceList.options = {
                    <span class="badge new status" data-badge-caption=""></span>
                  </td>
                  <td class="actions right-align">
+                   <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-onclick" data-position="top" data-tooltip="Delete">
+                     <i class="material-icons">delete</i>
+                   </a>
                    <a class="btn-floating tooltipped waves-effect waves-light link" data-position="top" data-tooltip="Go to Job">
                      <i class="material-icons">send</i>
                   </a>
@@ -229,17 +238,18 @@ RessourceList.options = {
                      "description",
                      "title",
                      {data: ["id"]},
+                     {name: "delete-onclick", attr: "onclick"},
                      {name: "link", attr: "href"},
                      {name: "service", attr: "data-service"},
                      {name: "status", attr: "data-status"}]},
   JobInput: {item : `<tr>
                        <td class="filename"></td>
-                         <td class="actions right-align">
+                       <td class="actions right-align">
-                           <a class="btn-floating tooltipped waves-effect waves-light download-link" data-position="top" data-tooltip="Download">
+                         <a class="btn-floating tooltipped waves-effect waves-light download-link" data-position="top" data-tooltip="Download">
-                             <i class="material-icons">file_download</i>
+                           <i class="material-icons">file_download</i>
-                           </a>
+                         </a>
-                         </td>
+                       </td>
-                       </tr>`,
+                     </tr>`,
              valueNames: ["filename",
                           "id",
                           {name: "download-link", attr: "href"}]},
@@ -253,14 +263,14 @@ RessourceList.options = {
                            <span class="query"></span>
                          </td>
                          <td class="actions right-align">
-                           <a class="btn-floating tooltipped waves-effect waves-light inspect-link" data-position="top" data-tooltip="View Results">
+                           <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-onclick" data-position="top" data-tooltip="Delete">
-                             <i class="material-icons">search</i>
-                           </a>
-                           <a class="btn-floating modal-trigger red tooltipped waves-effect waves-light delete-link" data-position="top" data-tooltip="Delete">
                              <i class="material-icons">delete</i>
                            </a>
-                           <a class="btn-floating tooltipped link waves-effect waves-light" data-position="top" data-tooltip="Go to query result">
+                           <a class="btn-floating tooltipped link waves-effect waves-light" data-position="top" data-tooltip="Info">
-                             <i class="material-icons">send</i>
+                             <i class="material-icons">info</i>
+                           </a>
+                           <a class="btn-floating tooltipped waves-effect waves-light inspect-link" data-position="top" data-tooltip="Analyse">
+                             <i class="material-icons">search</i>
                            </a>
                          </td>
                        </tr>`,
@@ -269,7 +279,7 @@ RessourceList.options = {
                              "query",
                              "title",
                              {data: ["id"]},
-                             {name: "delete-link", attr: "onclick"},
+                             {name: "delete-onclick", attr: "onclick"},
                              {name: "inspect-link", attr: "href"},
                              {name: "link", attr: "href"}]},
   // User entity blueprint setting html strucuture per entity per row

web/app/templates/admin/user.html.j2

@@ -88,6 +88,28 @@
 
 
 <!-- Modals -->
+<div id="delete-corpus-modal" class="modal">
+  <div class="modal-content">
+    <h4>Confirm corpus deletion</h4>
+    <p>Do you really want to delete the corpus <b id="selected-corpus-title"></b>? All files 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-corpus-delete-link"><i class="material-icons left">delete</i>Delete</a>
+  </div>
+</div>
+
+<div id="delete-job-modal" class="modal">
+  <div class="modal-content">
+    <h4>Confirm job deletion</h4>
+    <p>Do you really want to delete the job <b id="selected-job-title"></b>? All files 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-job-delete-link"><i class="material-icons left">delete</i>Delete</a>
+  </div>
+</div>
+
 <div id="delete-user-modal" class="modal">
   <div class="modal-content">
     <h4>Confirm user deletion</h4>
@@ -103,8 +125,44 @@
 <script>
   var corpusList = new RessourceList("corpora", nopaque.foreignCorporaSubscribers, "Corpus");
   var jobList = new RessourceList("jobs", nopaque.foreignJobsSubscribers, "Job");
+  var deleteCorpusModalElement = document.getElementById("delete-corpus-modal");
+  var deleteCorpusModal;
+  var deleteJobModalElement = document.getElementById("delete-job-modal");
+  var deleteJobModal;
+  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");
+  function prepareDeleteCorpusModal(selectedCorpusId) {
+    var selectedCorpus;
+    if (selectedCorpusId in nopaque.foreignUser.corpora) {
+      selectedCorpus = nopaque.foreignUser.corpora[selectedCorpusId];
+      selectedCorpusDeleteLinkElement.href = `/corpora/${selectedCorpus.id}/delete`;
+      selectedCorpusTitleElement.innerText = selectedCorpus.title;
+    } else {
+      selectedQueryResult = undefined;
+      selectedCorpusDeleteLinkElement.href = "";
+      selectedCorpusTitleElement.innerText = "";
+    }
+    deleteCorpusModal.open();
+  }
+  function prepareDeleteJobModal(selectedJobId) {
+    var selectedJob;
+    if (selectedJobId in nopaque.foreignUser.jobs) {
+      selectedJob = nopaque.foreignUser.jobs[selectedJobId];
+      selectedJobDeleteLinkElement.href = `/jobs/${selectedJob.id}/delete`;
+      selectedJobTitleElement.innerText = selectedJob.title;
+    } else {
+      selectedJob = undefined;
+      selectedJobDeleteLinkElement.href = "";
+      selectedJobTitleElement.innerText = "";
+    }
+    deleteJobModal.open();
+  }
   document.addEventListener("DOMContentLoaded", () => {
     nopaque.socket.emit("foreign_user_data_stream_init", {{ user.id }});
+    deleteCorpusModal = M.Modal.init(deleteCorpusModalElement);
+    deleteJobModal = M.Modal.init(deleteJobModalElement);
   });
 </script>
 {% endblock %}

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

@@ -65,6 +65,29 @@
   </div>
 </div>
 
+<!-- Modals -->
+<div id="delete-corpus-modal" class="modal">
+  <div class="modal-content">
+    <h4>Confirm corpus deletion</h4>
+    <p>Do you really want to delete the corpus <b id="selected-corpus-title"></b>? All files 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-corpus-delete-link"><i class="material-icons left">delete</i>Delete</a>
+  </div>
+</div>
+
+<div id="delete-job-modal" class="modal">
+  <div class="modal-content">
+    <h4>Confirm job deletion</h4>
+    <p>Do you really want to delete the job <b id="selected-job-title"></b>? All files 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-job-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>
@@ -107,5 +130,44 @@
   var corpusList = new RessourceList("corpora", nopaque.corporaSubscribers,
                                      "Corpus");
   var jobList = new RessourceList("jobs", nopaque.jobsSubscribers, "Job");
+  var deleteCorpusModalElement = document.getElementById("delete-corpus-modal");
+  var deleteCorpusModal;
+  var deleteJobModalElement = document.getElementById("delete-job-modal");
+  var deleteJobModal;
+  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");
+  function prepareDeleteCorpusModal(selectedCorpusId) {
+    var selectedCorpus;
+    if (selectedCorpusId in nopaque.user.corpora) {
+      selectedCorpus = nopaque.user.corpora[selectedCorpusId];
+      selectedCorpusDeleteLinkElement.href = `/corpora/${selectedCorpus.id}/delete`;
+      selectedCorpusTitleElement.innerText = selectedCorpus.title;
+    } else {
+      selectedQueryResult = undefined;
+      selectedCorpusDeleteLinkElement.href = "";
+      selectedCorpusTitleElement.innerText = "";
+    }
+    deleteCorpusModal.open();
+  }
+  function prepareDeleteJobModal(selectedJobId) {
+    var selectedJob;
+    if (selectedJobId in nopaque.user.jobs) {
+      selectedJob = nopaque.user.jobs[selectedJobId];
+      selectedJobDeleteLinkElement.href = `/jobs/${selectedJob.id}/delete`;
+      selectedJobTitleElement.innerText = selectedJob.title;
+    } else {
+      selectedJob = undefined;
+      selectedJobDeleteLinkElement.href = "";
+      selectedJobTitleElement.innerText = "";
+    }
+    deleteJobModal.open();
+  }
+  document.addEventListener("DOMContentLoaded", () => {
+    deleteCorpusModal = M.Modal.init(deleteCorpusModalElement);
+    deleteJobModal = M.Modal.init(deleteJobModalElement);
+  });
 </script>
+
 {% endblock %}

web/app/templates/services/corpus_analysis.html.j2

@@ -84,9 +84,20 @@
 </div>
 
 <!-- Modals -->
+<div id="delete-corpus-modal" class="modal">
+  <div class="modal-content">
+    <h4>Confirm corpus deletion</h4>
+    <p>Do you really want to delete the corpus <b id="selected-corpus-title"></b>? All files 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-corpus-delete-link"><i class="material-icons left">delete</i>Delete</a>
+  </div>
+</div>
+
 <div id="delete-query-result-modal" class="modal no-autoinit">
   <div class="modal-content">
-    <h4>Confirm deletion</h4>
+    <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">
@@ -101,24 +112,43 @@
   var queryResultList = new RessourceList("query-results",
                                           nopaque.queryResultsSubscribers,
                                           "QueryResult", {page: 10});
+  var deleteCorpusModalElement = document.getElementById("delete-corpus-modal");
+  var deleteCorpusModal;
   var deleteQueryResultModalElement = document.getElementById("delete-query-result-modal");
   var deleteQueryResultModal;
-  var selectedQueryResultTitleElement = document.getElementById("selected-query-result-title");
+  var selectedCorpusDeleteLinkElement = document.getElementById("selected-corpus-delete-link");
+  var selectedCorpusTitleElement = document.getElementById("selected-corpus-title");
   var selectedQueryResultDeleteLinkElement = document.getElementById("selected-query-result-delete-link");
-  document.addEventListener("DOMContentLoaded", () => {
+  var selectedQueryResultTitleElement = document.getElementById("selected-query-result-title");
-    deleteQueryResultModal = M.Modal.init(deleteQueryResultModalElement);
+  function prepareDeleteCorpusModal(selectedCorpusId) {
-  });
+    var selectedCorpus;
-  function prepareQueryResultModal(selectedQueryResultId) {
+    if (selectedCorpusId in nopaque.user.corpora) {
+      selectedCorpus = nopaque.user.corpora[selectedCorpusId];
+      selectedCorpusDeleteLinkElement.href = `/corpora/${selectedCorpus.id}/delete`;
+      selectedCorpusTitleElement.innerText = selectedCorpus.title;
+    } else {
+      selectedQueryResult = undefined;
+      selectedCorpusDeleteLinkElement.href = "";
+      selectedCorpusTitleElement.innerText = "";
+    }
+    deleteCorpusModal.open();
+  }
+  function prepareDeleteQueryResultModal(selectedQueryResultId) {
+    var selectedQueryResult;
     if (selectedQueryResultId in nopaque.user.query_results) {
       selectedQueryResult = nopaque.user.query_results[selectedQueryResultId];
-      selectedQueryResultTitleElement.innerText = selectedQueryResult.title;
       selectedQueryResultDeleteLinkElement.href = `/query_results/${selectedQueryResult.id}/delete`;
+      selectedQueryResultTitleElement.innerText = selectedQueryResult.title;
     } else {
-      selectedQueryResult = None;
+      selectedQueryResult = undefined;
-      selectedQueryResultTitleElement.innerText = "";
       selectedQueryResultDeleteLinkElement.href = "";
+      selectedQueryResultTitleElement.innerText = "";
     }
     deleteQueryResultModal.open();
   }
+  document.addEventListener("DOMContentLoaded", () => {
+    deleteCorpusModal = M.Modal.init(deleteCorpusModalElement);
+    deleteQueryResultModal = M.Modal.init(deleteQueryResultModalElement);
+  });
 </script>
 {% endblock %}