From be2c1cd490bf11b3d5582065d8e88ab44f891bd8 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Wed, 29 Jan 2025 12:55:46 -0600
Subject: Display list of phenotypes using DataTables.

---
 uploader/templates/phenotypes/view-dataset.html | 67 ++++++++++++++++---------
 1 file changed, 43 insertions(+), 24 deletions(-)

(limited to 'uploader/templates')

diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html
index 011f8f6..4e1be6b 100644
--- a/uploader/templates/phenotypes/view-dataset.html
+++ b/uploader/templates/phenotypes/view-dataset.html
@@ -5,6 +5,11 @@
 
 {%block title%}Phenotypes{%endblock%}
 
+{%block css%}
+<link rel="stylesheet"
+      href="{{url_for('base.datatables', filename='css/jquery.dataTables.css')}}" />
+{%endblock%}
+
 {%block pagetitle%}Phenotypes{%endblock%}
 
 {%block lvl4_breadcrumbs%}
@@ -56,12 +61,7 @@
 
 <div class="row">
   <h2>Phenotype Data</h2>
-
-  <p>This dataset has a total of {{phenotype_count}} phenotypes.</p>
-
-  {{table_pagination(start_from, count, phenotype_count, url_for('species.populations.phenotypes.view_dataset', species_id=species.SpeciesId, population_id=population.Id, dataset_id=dataset.Id), "phenotypes")}}
-
-  <table class="table">
+  <table id="tbl-phenotypes-list" class="table">
     <thead>
       <tr>
         <th>#</th>
@@ -70,24 +70,7 @@
       </tr>
     </thead>
 
-    <tbody>
-      {%for pheno in phenotypes%}
-      <tr>
-        <td>{{pheno.sequence_number}}</td>
-        <td><a href="{{url_for('species.populations.phenotypes.view_phenotype',
-                     species_id=species.SpeciesId,
-                     population_id=population.Id,
-                     dataset_id=dataset.Id,
-                     xref_id=pheno['pxr.Id'])}}"
-               title="View phenotype details"
-               target="_blank">
-            {{pheno.InbredSetCode}}_{{pheno["pxr.Id"]}}</a></td>
-        <td>{{pheno.Post_publication_description or pheno.Pre_publication_abbreviation or pheno.Original_description}}</td>
-      </tr>
-      {%else%}
-      <tr><td colspan="5"></td></tr>
-      {%endfor%}
-    </tbody>
+    <tbody></tbody>
   </table>
 </div>
 {%endblock%}
@@ -95,3 +78,39 @@
 {%block sidebarcontents%}
 {{display_population_card(species, population)}}
 {%endblock%}
+
+
+{%block javascript%}
+<script src="{{url_for('base.datatables',
+                 filename='js/jquery.dataTables.js')}}"></script>
+<script type="text/javascript">
+  $(function() {
+      $("#tbl-phenotypes-list").DataTable({
+          responsive: true,
+          data: {{phenotypes | tojson}},
+          columns: [
+              {data: "sequence_number"},
+              {
+                  data: function(pheno) {
+                      var spcs_id = {{species.SpeciesId}};
+                      var pop_id = {{population.Id}};
+                      var dtst_id = {{dataset.Id}};
+                      return `<a href="/species/${spcs_id}` +
+                          `/populations/${pop_id}` +
+                          `/phenotypes/datasets/${dtst_id}` +
+                          `/phenotype/${pheno.xref_id}` +
+                          `" target="_blank">` +
+                          `${pheno.InbredSetCode}_${pheno.xref_id}` +
+                          `</a>`;
+                  }
+              },
+              {data: function(pheno) {
+                  return (pheno.Post_publication_description ||
+                          pheno.Original_description ||
+                          pheno.Pre_publication_description);
+              }}
+          ]
+      });
+  });
+</script>
+{%endblock%}
-- 
cgit v1.2.3