Add initial placeholder UI to confirm deletion.

2 files changed, 159 insertions, 3 deletions

diff --git a/uploader/phenotypes/views.py b/uploader/phenotypes/views.py
index aaccf18..f7d8e55 100644
--- a/uploader/phenotypes/views.py
+++ b/uploader/phenotypes/views.py
@@ -1173,7 +1173,15 @@ def delete_phenotypes(# pylint: disable=[unused-argument]
         **kwargs
 ):
     """Delete the specified phenotype data."""
-    if request.method == "GET":
-        return "Would confirm deletion."
+    if request.form.get("confirm", "").lower() == "confirm":
+        return f"Would delete! {request.form}"
 
-    return "Would delete!"
+    with database_connection(app.config["SQL_URI"]) as conn:
+        xref_ids = tuple(
+            int(item) for item in set(request.form.getlist("xref_ids")))
+        return render_template(
+            "phenotypes/confirm-delete-phenotypes.html",
+            species=species,
+            population=population,
+            dataset=dataset,
+            phenotypes=xref_ids)
diff --git a/uploader/templates/phenotypes/confirm-delete-phenotypes.html b/uploader/templates/phenotypes/confirm-delete-phenotypes.html
new file mode 100644
index 0000000..36cab2c
--- /dev/null
+++ b/uploader/templates/phenotypes/confirm-delete-phenotypes.html
@@ -0,0 +1,148 @@
+{%extends "phenotypes/base.html"%}
+{%from "flash_messages.html" import flash_all_messages%}
+
+{%block title%}Phenotypes{%endblock%}
+
+{%block pagetitle%}Delete Phenotypes{%endblock%}
+
+{%block lvl4_breadcrumbs%}
+<li {%if activelink=="view-dataset"%}
+    class="breadcrumb-item active"
+    {%else%}
+    class="breadcrumb-item"
+    {%endif%}>
+  <a href="{{url_for('species.populations.phenotypes.view_dataset',
+           species_id=species.SpeciesId,
+           population_id=population.Id,
+           dataset_id=dataset.Id)}}">View</a>
+</li>
+{%endblock%}
+
+{%block contents%}
+{{flash_all_messages()}}
+
+<div class="row"><h2>Delete Phenotypes</h2></div>
+
+{%if phenotypes | length > 0%}
+<div class="row">
+  <p>You have requested to delete the following phenotypes:</p>
+</div>
+
+<div class="row">
+  <div class="col">
+    <a id="btn-select-all-phenotypes"
+       href="#"
+       class="btn btn-info"
+       title="Select all phenotypes">select all</a>
+  </div>
+  <div class="col">
+    <a id="btn-deselect-all-phenotypes"
+       href="#"
+       class="btn btn-warning"
+       title="Deselect all phenotypes">deselect all</a>
+  </div>
+</div>
+
+<div class="row">
+  <table id="tbl-delete-phenotypes" class="table">
+    <thead>
+      <tr>
+        <th>#</th>
+        <th>Record ID</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+    <tbody>
+      {%for phenotype in phenotypes%}
+      <tr>
+        <td>
+          <input id="chk-xref-id-{{phenotype}}"
+                 name="xref_ids"
+                 type="checkbox"
+                 class="chk-row-select" />
+        </td>
+        <td>{{phenotype}}</td>
+        <td>{{phenotype}} — Description</td>
+      </tr>
+      {%endfor%}
+    </tbody>
+  </table>
+</div>
+{%endif%}
+
+{%endblock%}
+
+{%block javascript%}
+<script type="text/javascript">
+  $(function() {
+      var dt = buildDataTable(
+          "#tbl-delete-phenotypes",
+          data=[],
+          columns=[],
+          userSettings={
+              responsive: true,
+              select: {
+                  style: "os",
+                  info: false
+              },
+              initComplete: function(setting, json) {
+                  var api = this.api();
+                  api.rows().select();
+                  api.rows({selected: true}).nodes().each((node, index) => {
+                      $(node).find('input[type="checkbox"]:not(:checked)')
+                          .prop("checked", true);
+                  });
+              }
+          });
+      // var dt = new DataTable("#tbl-delete-phenotypes", {
+      //     responsive: true,
+      //     select: {
+      //         style: "os",
+      //         info: false
+      //     },
+      //     initComplete: function(setting, json) {
+      //         console.debug("Running page init...");
+      //         this.api().rows().select();
+      //         this.api().rows().nodes().each((node, index) => {
+      //             $(node).find('input[type="checkbox"]:not(:checked)')
+      //                 .prop("checked", true);
+      //         })
+      //     }
+      // });
+
+      $("#btn-select-all-phenotypes").on("click", function(event) {
+          dt.selectAll();
+      });
+
+      $("#btn-deselect-all-phenotypes").on("click", function(event) {
+          dt.deselectAll();
+      });
+
+      // dt.on("select", (event, datatable, type, indexes) => {
+      //     console.debug("this got called...");
+      //     datatable.rows(indexes)
+      //         .nodes()
+      //         .each(function(node, index) {
+      //             $(node).find('input[type="checkbox"]:not(:checked)')
+      //                 .prop("checked", true);
+      //         });
+      // });
+
+      // dt.on("deselect", (event, datatable, type, indexes) => {
+      //     datatable.rows(indexes)
+      //         .nodes()
+      //         .each(function(node, index) {
+      //             $(node).find('input[type="checkbox"]:checked')
+      //                 .prop("checked", false);
+      //         });
+      // });
+
+      // dt.on("deselect", (event, datatable, type, cell, originalEvent) => {
+      //     datatable.rows({selected: false}).nodes().each((node, index) => {
+      //         $(node).find(".chk-row-select").prop("checked", false)
+      //     });
+      // });
+  });
+</script>
+{%endblock%}
+