From 0a5f980c92bb18fcc346a03cfb6fd60d331245e1 Mon Sep 17 00:00:00 2001
From: Adam Rauch <adam@labkey.com>
Date: Thu, 7 Mar 2024 09:34:01 -0800
Subject: [PATCH] Migrate inline handlers

---
 .../views/updateStudyProperties.html          | 10 +++--
 viscstudies/webapp/viscstudies/study.js       | 40 ++++++++++++-------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/viscstudies/resources/views/updateStudyProperties.html b/viscstudies/resources/views/updateStudyProperties.html
index a1c1ae40..9227146d 100644
--- a/viscstudies/resources/views/updateStudyProperties.html
+++ b/viscstudies/resources/views/updateStudyProperties.html
@@ -3,7 +3,6 @@
     var _studiesByContainer = {};
     var _updates = [];
 
-    LABKEY.NavTrail.setTrail("Update Study Information");
     function getStudyDesigns(config)
     {
         var params = {includeSubfolders:config.includeSubfolders};
@@ -85,9 +84,12 @@
         }
 
         doNextUpdate();
-
-
     }
+
+    LABKEY.Utils.onReady(function(){
+        LABKEY.NavTrail.setTrail("Update Study Information");
+        document.getElementById('updateButton')['onclick'] = doUpdates;
+    });
 </script>
 <div id="updateList"></div>
-<button id="updateButton" onclick="doUpdates();">Update</button>
\ No newline at end of file
+<button id="updateButton">Update</button>
\ No newline at end of file
diff --git a/viscstudies/webapp/viscstudies/study.js b/viscstudies/webapp/viscstudies/study.js
index 501f07ea..1aa6d114 100644
--- a/viscstudies/webapp/viscstudies/study.js
+++ b/viscstudies/webapp/viscstudies/study.js
@@ -246,8 +246,6 @@ function graphicalVaccinationSummary(design)
         }
 
         return html + "</table><br><br>";
-        
-
     }
 
 function findVaccination(design, cohort, timepoint)
@@ -281,7 +279,7 @@ function Facet(id, caption, getOptionsFn) {
     this.caption = caption;
     this.getOptionsForStudy = getOptionsFn;
     this.selected = {};
-};
+}
 
 Facet.prototype = {
     allOptions:[],
@@ -378,30 +376,42 @@ var immunogenFacet = new Facet("immunogens", "Immunogens", function (info) {
 var facets = [immunogenFacet, investigatorFacet, speciesFacet, adjuvantFacet];
 function initFacets()
 {
-    for (var f = 0; f < facets.length; f++)
+    for (let f = 0; f < facets.length; f++)
     {
         var facet = facets[f];
         var header = "<span style='display:inline-block;padding:8px;border-right:1px solid lightgray'><h3 style='margin-bottom:0px;padding-top:0;margin-top:0' id='facet_header_" + facet.id +"' >" + h(facet.caption) + "</h3><span id='facet_summary_" + facet.id +"'>Showing all " + h(facet.caption) + " </span></span>";
-        var html = "<span  id='facet_body_" + facet.id + "'>";
-        html += "<a href='#' onclick='selectAll(\"" + facet.id + "\");return false;'>Show All</a><br><br>" ;
+        var html = "<span id='facet_body_" + facet.id + "'>";
+        html += "<a id='showAll_" + facet.id + "'>Show All</a><br><br>" ;
         facet.init(_allStudies);
         html += "<table><tr><td valign=top>";
-        var colLength = Math.round(facet.allOptions.length / 3);
-        for (var i = 0; i < facet.allOptions.length; i++)
+        const colLength = Math.round(facet.allOptions.length / 3);
+        for (let i = 0; i < facet.allOptions.length; i++)
         {
-            var option = facet.allOptions[i];
-            html += "<input type='checkbox' id='" + checkboxId(facet, i) + "' checked onclick='optionClicked(this, \"" + facet.id + "\", " + i + ")'>";
-            html += "<a href='#' onclick='selectOnly(\"" + facet.id + "\"," +i + ");return false;'>"+ h(option.name) + "</a><br>";
-            if (i == colLength || i == colLength * 2)
+            let option = facet.allOptions[i];
+            html += "<input type='checkbox' id='" + checkboxId(facet, i) + "' checked>";
+            html += "<a href='#' id='selectOnly_" + i + "'>"+ h(option.name) + "</a><br>";
+            if (i === colLength || i === colLength * 2)
                 html += "</td><td valign=top>";
-
         }
         html += "</td></tr></table></span>";
         Ext.get("facets").insertHtml("beforeEnd", header);
 
-        var tip = new LABKEY.ext.CalloutTip({target:"facet_header_" + facet.id, html:html, closable:true});
+        const id = facet.id;
+        const facet2 = facet;
+        const tip = new LABKEY.ext.CalloutTip({target:"facet_header_" + facet.id, html:html, closable:true});
         tip.on("render", function(t) {
-            t.getEl().alignTo("facet_header_" + facet.id, "tl-bl");
+            t.getEl().alignTo("facet_header_" + id, "tl-bl");
+        });
+        tip.on("afterrender", function(t) {
+            // Attach event handlers after HTML is rendered
+            document.getElementById('showAll_' + id)['click'] = function() { selectAll(id); return false;}
+            for (let i = 0; i < facet2.allOptions.length; i++)
+            {
+                const id = facet2.id;
+                const idx = i;
+                document.getElementById(checkboxId(facet2, i))['click'] = function() { optionClicked(this, id, idx); };
+                document.getElementById('selectOnly_' + i)['click'] = function() { selectOnly(id, i); return false; }
+            }
         });
     }
 }