1 files changed, 88 insertions, 28 deletions

diff --git a/uploader/templates/phenotypes/view-dataset.html b/uploader/templates/phenotypes/view-dataset.html
index e2ccb60..306dcce 100644
--- a/uploader/templates/phenotypes/view-dataset.html
+++ b/uploader/templates/phenotypes/view-dataset.html
@@ -1,5 +1,6 @@
 {%extends "phenotypes/base.html"%}
 {%from "flash_messages.html" import flash_all_messages%}
+{%from "macro-table-pagination.html" import table_pagination%}
 {%from "populations/macro-display-population-card.html" import display_population_card%}
 
 {%block title%}Phenotypes{%endblock%}
@@ -15,7 +16,7 @@
   <a href="{{url_for('species.populations.phenotypes.view_dataset',
            species_id=species.SpeciesId,
            population_id=population.Id,
-           dataset_id=dataset.Id)}}">View Datasets</a>
+           dataset_id=dataset.Id)}}">View</a>
 </li>
 {%endblock%}
 
@@ -36,10 +37,7 @@
 
     <tbody>
       <tr>
-        <td><a href="{{url_for('species.populations.phenotypes.view_dataset',
-                     species_id=species.SpeciesId,
-                     population_id=population.Id,
-                     dataset_id=dataset.Id)}}">{{dataset.Name}}</a></td>
+        <td>{{dataset.Name}}</td>
         <td>{{dataset.FullName}}</td>
         <td>{{dataset.ShortName}}</td>
       </tr>
@@ -48,39 +46,37 @@
 </div>
 
 <div class="row">
+  <p><a href="{{url_for('species.populations.phenotypes.add_phenotypes',
+              species_id=species.SpeciesId,
+              population_id=population.Id,
+              dataset_id=dataset.Id)}}"
+        title="Add a bunch of phenotypes"
+        class="btn btn-primary">Add phenotypes</a></p>
+</div>
+
+<div class="row">
   <h2>Phenotype Data</h2>
 
-  <p>This dataset has a total of {{phenotype_count}} phenotypes.</p>
-  <p class="text-warning">
-    <span class="glyphicon glyphicon-exclamation-sign"></span>
-    Display pagination controls here &hellip;</p>
+  <p>Click on any of the phenotypes in the table below to view and edit that
+    phenotype's data.</p>
+  <p>Use the search to filter through all the phenotypes and find specific
+    phenotypes of interest.</p>
+</div>
+
 
-  <table class="table">
+<div class="row">
+
+  <table id="tbl-phenotypes-list" class="table compact stripe cell-border">
     <thead>
       <tr>
-        <th>#</th>
+        <th></th>
+        <th>Index</th>
         <th>Record</th>
         <th>Description</th>
       </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">
-            {{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%}
@@ -88,3 +84,67 @@
 {%block sidebarcontents%}
 {{display_population_card(species, population)}}
 {%endblock%}
+
+
+{%block javascript%}
+<script type="text/javascript">
+  $(function() {
+      var species_id = {{species.SpeciesId}};
+      var population_id = {{population.Id}};
+      var dataset_id = {{dataset.Id}};
+      var dataset_name = "{{dataset.Name}}";
+      var data = {{phenotypes | tojson}};
+
+      var dtPhenotypesList = buildDataTable(
+          "#tbl-phenotypes-list",
+          data,
+          [
+              {
+                  data: function(pheno) {
+                      return `<input type="checkbox" name="selected-phenotypes" `
+                          + `id="chk-selected-phenotypes-${pheno.InbredSetCode}_${pheno.xref_id}" `
+                          + `value="${pheno.InbredSetCode}_${pheno.xref_id}" `
+                          + `class="chk-row-select" />`
+                  }
+              },
+              {data: "sequence_number"},
+              {
+                  data: function(pheno, type, set, meta) {
+                      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);
+                  }
+              }
+          ],
+          {
+              select: "multi+shift",
+              layout: {
+                  top1Start: {
+                      pageLength: {
+                          text: "Show _MENU_ of _TOTAL_"
+                      }
+                  },
+                  topStart: "info",
+                  top1End: null
+              },
+              rowId: function(pheno) {
+                  return `${pheno.InbredSetCode}_${pheno.xref_id}`;
+              }
+          });
+  });
+</script>
+{%endblock%}