From 9ee7f2eee907d0d073097ae3c0112b8b24419730 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Mon, 17 Feb 2025 17:26:39 -0600
Subject: Select from searchable list and allow new species creation.

Select the species to use from a searchable list. In case the species
does not exist in the list, allow creation of the list.
---
 uploader/phenotypes/views.py                       |  2 +-
 uploader/static/css/styles.css                     |  4 ++
 uploader/templates/phenotypes/index.html           | 28 +++++++----
 .../templates/species/macro-select-species.html    | 54 ++++++++++------------
 4 files changed, 47 insertions(+), 41 deletions(-)

(limited to 'uploader')

diff --git a/uploader/phenotypes/views.py b/uploader/phenotypes/views.py
index ddec54c..e0ce521 100644
--- a/uploader/phenotypes/views.py
+++ b/uploader/phenotypes/views.py
@@ -62,7 +62,7 @@ def index():
     with database_connection(app.config["SQL_URI"]) as conn:
         if not bool(request.args.get("species_id")):
             return render_template("phenotypes/index.html",
-                                   species=order_by_family(all_species(conn)),
+                                   species=all_species(conn),
                                    activelink="phenotypes")
 
         species = species_by_id(conn, request.args.get("species_id"))
diff --git a/uploader/static/css/styles.css b/uploader/static/css/styles.css
index 6f26621..bf7305e 100644
--- a/uploader/static/css/styles.css
+++ b/uploader/static/css/styles.css
@@ -144,3 +144,7 @@ body {
     border-bottom: solid #88BBEE;
     text-transform: capitalize;
 }
+
+input[type="search"] {
+    border-radius: 5px;
+}
diff --git a/uploader/templates/phenotypes/index.html b/uploader/templates/phenotypes/index.html
index 0c691e6..93159be 100644
--- a/uploader/templates/phenotypes/index.html
+++ b/uploader/templates/phenotypes/index.html
@@ -6,21 +6,29 @@
 
 {%block pagetitle%}Phenotypes{%endblock%}
 
+{%block css%}
+<link rel="stylesheet"
+      href="{{url_for('base.datatables', filename='css/jquery.dataTables.css')}}" />
+{%endblock%}
+
 
 {%block contents%}
 {{flash_all_messages()}}
 
 <div class="row">
-  <p>This section deals with phenotypes that
-    <span class="text-warning">
-      <span class="glyphicon glyphicon-exclamation-sign"></span>
-      … what are the characteristics of these phenotypes? …</span></p>
-  <p>Select the species to begin the process of viewing/uploading data about
-    your phenotypes</p>
+  {{select_species_form(url_for("species.populations.phenotypes.index"), species)}}
 </div>
+{%endblock%}
 
-<div class="row">
-  {{select_species_form(url_for("species.populations.phenotypes.index"),
-  species)}}
-</div>
+
+{%block javascript%}
+<script type="text/javascript"
+        src="{{url_for('base.datatables',
+             filename='js/jquery.dataTables.js')}}"></script>
+<script type="text/javascript" src="/static/js/species.js"></script>
+<script type="text/javascript">
+  $(function() {
+      speciesDataTable(JSON.parse($("#tbl-select-species").attr("data-species-list")));
+  });
+  </script>
 {%endblock%}
diff --git a/uploader/templates/species/macro-select-species.html b/uploader/templates/species/macro-select-species.html
index 36ed102..21a5631 100644
--- a/uploader/templates/species/macro-select-species.html
+++ b/uploader/templates/species/macro-select-species.html
@@ -1,38 +1,32 @@
 {%macro select_species_form(form_action, species)%}
-{%if species | length > 0%}
 <form method="GET" action="{{form_action}}" class="form-horizontal">
+  <label class="control-label">What species do you want to work with?</label>
+  {%if species | length != 0%}
+  <table id="tbl-select-species" class="table compact stripe"
+         data-species-list='{{species | tojson}}'>
+    <div class="">
+      <thead>
+        <tr>
+          <th></th>
+          <th>Species Name</th>
+        </tr>
+      </thead>
+
+      <tbody></tbody>
+  </table>
+  {%endif%}
+
   <div class="form-group">
-    <label for="select-species" class="control-label col-sm-2">Species</label>
-    <div class="col-sm-10">
-      <select id="select-species"
-              name="species_id"
-              class="form-control"
-              required="required">
-        <option value="">Select Species</option>
-        {%for group in species%}
-        {{group}}
-        <optgroup {%if group[0][1] is not none%}
-                  label="{{group[0][1].capitalize()}}"
-                  {%else%}
-                  label="Undefined"
-                  {%endif%}>
-          {%for aspecies in group[1]%}
-          <option value="{{aspecies.SpeciesId}}">{{aspecies.MenuName}}</option>
-          {%endfor%}
-        </optgroup>
-        {%endfor%}
-      </select>
-    </div>
+    <label class="control-label" for="rdo-cant-find-species">
+      <input id="rdo-cant-find-species" type="radio" name="species_id" value="CREATE-SPECIES" />
+      I cannot find the species I want &mdash; create it!</label>
   </div>
 
-  <div class="col-sm-offset-2 col-sm-10">
-    <input type="submit" value="Select" class="btn btn-primary" />
+  <div class="form-group">
+    <input type="submit"
+           class="btn btn-primary col-sm-offset-1"
+           value="continue" />
   </div>
+
 </form>
-{%else%}
-<p class="text-danger">
-  <span class="glyphicon glyphicon-exclamation-mark"></span>
-  We could not find species to select from!
-</p>
-{%endif%}
 {%endmacro%}
-- 
cgit v1.2.3