From 8c40b043284f5999399f1e01aaf04d4b6ae2e043 Mon Sep 17 00:00:00 2001
From: sunnavy <sunnavy@bestpractical.com>
Date: Fri, 10 Jan 2025 10:34:17 -0500
Subject: [PATCH] Migrate inline js in EditRights to util.js

Inline js doesn't fully work any more because of htmx changes. E.g. after
clicking "Save Changes", no right lists will show up. This commit refactors
it to make it work with htmx.
---
 share/html/Admin/Elements/EditRights | 143 +--------------------------
 share/static/js/util.js              | 135 +++++++++++++++++++++++++
 2 files changed, 137 insertions(+), 141 deletions(-)

diff --git a/share/html/Admin/Elements/EditRights b/share/html/Admin/Elements/EditRights
index 39f927f7c8..167e373faf 100644
--- a/share/html/Admin/Elements/EditRights
+++ b/share/html/Admin/Elements/EditRights
@@ -82,133 +82,8 @@ if ($anchor =~ /AddPrincipal/) {
 %# The last value is a boolean determining if the value of DisplayColumn
 %# should be loc()-ed before display.
 
-<script type="text/javascript">
-  jQuery(function() {
-      function sync_anchor(hash) {
-          if (!hash.length) return;
-          window.location.hash = hash;
-          jQuery(".rights-editor input[name=Anchor]").val(hash);
-      }
-      sync_anchor(<% $anchor |n,j %>);
-
-      jQuery('.rights-editor .principal-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
-          var anchor = jQuery(this).attr('href').replace('#acl-', '#');
-          sync_anchor(anchor);
-          jQuery('.rights-editor .category-tabs a[data-bs-toggle="tab"]:visible:first').tab('show');
-          if ( anchor == '#AddPrincipal' ) {
-              jQuery('.rights-editor li.add-principal input').focus();
-          }
-      });
-
-      jQuery('li.add-principal input').focus(function() {
-          jQuery('.rights-editor .principal-tabs a[data-bs-toggle="tab"][href="#acl-AddPrincipal"]').tab('show');
-      });
-
-      var anchor = jQuery(".rights-editor input[name=Anchor]").val();
-      if ( anchor && jQuery('.rights-editor .principal-tabs a[data-bs-toggle="tab"][href="' + anchor.replace('#', '#acl-') + '"]' ).length ) {
-          jQuery('.rights-editor .principal-tabs a[data-bs-toggle="tab"][href="' + anchor.replace('#', '#acl-') + '"]' ).tab('show');
-      }
-      else {
-          jQuery('.rights-editor .principal-tabs a[data-bs-toggle="tab"]:first').tab('show');
-      }
-
-      jQuery('.rights-editor .category-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function(e) {
-          createCookie('rights-category-tab', jQuery(this).attr('href'));
-      });
-
-      const category_tab = getCookie('rights-category-tab');
-      if ( category_tab && jQuery(category_tab).length ) {
-          jQuery('.rights-editor .category-tabs a[data-bs-toggle="tab"][href="' + category_tab + '"]' ).tab('show');
-      }
-      else {
-          jQuery('.rights-editor .category-tabs a[data-bs-toggle="tab"]:visible:first').tab('show');
-      };
-
-      // "rights" checkbox state cache...
-      var check_counts = {};
-
-      // Before page loads we need to initialize our "rights" checkbox state
-      // cache.
-      jQuery("div.category-tabs input[type=checkbox]").each(function(index, element) {
-          // Evaluating each checkbox and its current check state is the same
-          // as evaluating a check event once the page is loaded. However, we
-          // must indicate to the process_check_event that we are initializing
-          // the cache. That is, we musn't decrement values from count
-          // totals for checkboxes that aren't checked. That only happens when
-          // a user actually unchecks a box, not when we are initially counting
-          // checked or unchecked boxes.
-          process_check_event(element, true);
-      });
-
-      jQuery("div.category-tabs input[type=checkbox]").change(function() {
-          process_check_event(this, false);
-      });
-
-      // parameters:
-      //   checkbox           - DOM checkbox element that was checked
-      //   initializing_cache - a boolean that defines whether or not this
-      //                        function was called with the purpose of
-      //                        initializing the contents of the check_counts
-      //                        cache.
-      function process_check_event(checkbox, initializing_cache) {
-          var category_tab  = checkbox.getAttribute('data-category-tab');
-          var principal_tab = checkbox.getAttribute('data-principal-tab');
-
-          classify_tab(checkbox.checked, category_tab, initializing_cache);
-          classify_tab(checkbox.checked, principal_tab, initializing_cache);
-      }
-
-      function classify_tab(checked, tab_id, initializing_cache) {
-          if (typeof check_counts[tab_id] == 'undefined') {
-              check_counts[tab_id] = 0;
-          }
-
-          if (checked) {
-              check_counts[tab_id]++;
-              if (check_counts[tab_id] == 1) {
-                  // Then this is the first check and we need to add a class
-                  // to the tab.
-                  jQuery('#' + tab_id).addClass("tab-aggregates-checked-rights");
-              }
-          }
-          else if (! initializing_cache) {
-              check_counts[tab_id]--;
-              if (check_counts[tab_id] == 0) {
-                  // Then this is the last uncheck and we need to remove a
-                  // class from the tab.
-                  jQuery('#' + tab_id).removeClass("tab-aggregates-checked-rights");
-              }
-          }
-      }
-
-    var auto_set_own_dashboards;
-    jQuery('input[value="ModifySelf"]').change(function() {
-        var form = jQuery(this).closest('form');
-        if ( jQuery(this).is(':checked') ) {
-            if ( form.find('input[value$="OwnDashboard"]:visible:not(:checked)').length ) {
-                jQuery('#grant-own-dashboard-rights-modal').modal('show');
-            }
-        }
-        else {
-            if ( auto_set_own_dashboards ) {
-                form.find('input[value$="OwnDashboard"]:visible:checked').prop('checked', false);
-                auto_set_own_dashboards = false;
-            }
-        }
-    });
-
-    jQuery('#grant-own-dashboard-rights-confirm').click(function() {
-        var form = jQuery(this).closest('form');
-        form.find('input[value$="OwnSavedSearch"]:visible:not(:checked)').prop('checked', true);
-        form.find('input[value$="OwnDashboard"]:visible:not(:checked)').prop('checked', true);
-        jQuery('#grant-own-dashboard-rights-modal').modal('hide');
-        auto_set_own_dashboards = true;
-    });
-  });
-</script>
-
-<div class="rights-editor">
-  <input type="hidden" value="" name="Anchor" />
+<div class="rights-editor" data-principal-type="<% $AddPrincipal %>">
+  <input type="hidden" value="<% $anchor %>" name="Anchor" />
   <div class="row mt-2">
     <div class="col-3">
       <div class="principal-tabs">
@@ -238,20 +113,6 @@ for my $category (@$Principals) {
 }
 </%perl>
 % if ( $AddPrincipal ) {
-
-<script type="text/javascript">
-jQuery(function() {
-    jQuery("#AddPrincipalForRights-"+<% lc $AddPrincipal |n,j%>).keyup(function(){
-        toggle_addprincipal_validity(this, true);
-    }).keydown(function(event){
-        event.stopPropagation() // Disable tabs keyboard nav
-    });
-
-    jQuery("#AddPrincipalForRights-"+<% lc $AddPrincipal |n,j%>).on("autocompleteselect", addprincipal_onselect);
-    jQuery("#AddPrincipalForRights-"+<% lc $AddPrincipal |n,j%>).on("autocompletechange", addprincipal_onchange);
-});
-</script>
-
           <li class="add-principal nav-item">
             <a href="#acl-AddPrincipal" class="nav-link" id="principal-tab-acl-AddPrincipal" data-bs-toggle="tab" role="tab" aria-controls="acl-AddPrincipal">
               <input placeholder="<&|/l, loc($AddPrincipal) &>Add [_1]</&>" type="text" value="" class="form-control" data-autocomplete="<% lc $AddPrincipal eq 'user' ? 'Users' : 'Groups' %>"
diff --git a/share/static/js/util.js b/share/static/js/util.js
index e11aadb58c..b4d2ce719b 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -972,6 +972,141 @@ htmx.onLoad(function(elt) {
         });
     }
 
+    if ( elt.querySelector('.rights-editor') ) {
+        const editor = elt.querySelector('.rights-editor');
+        function sync_anchor(hash) {
+            if (!hash.length) return;
+            window.location.hash = hash;
+            editor.querySelector("input[name=Anchor]").value = hash;
+        }
+        sync_anchor(editor.querySelector("input[name=Anchor]").value);
+        jQuery(editor).find('.principal-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
+            const anchor = jQuery(this).attr('href').replace('#acl-', '#');
+            sync_anchor(anchor);
+            jQuery(editor).find('.category-tabs a[data-bs-toggle="tab"]:visible:first').tab('show');
+            if (anchor == '#AddPrincipal') {
+                jQuery(editor).find('li.add-principal input').focus();
+            }
+        });
+
+        jQuery(editor).find('li.add-principal input').focus(function () {
+            jQuery(editor).find('.principal-tabs a[data-bs-toggle="tab"][href="#acl-AddPrincipal"]').tab('show');
+        });
+
+        const anchor = editor.querySelector('input[name=Anchor]').value;
+        if (anchor && jQuery(editor).find('.principal-tabs a[data-bs-toggle="tab"][href="' + anchor.replace('#', '#acl-') + '"]').length) {
+            jQuery(editor).find('.principal-tabs a[data-bs-toggle="tab"][href="' + anchor.replace('#', '#acl-') + '"]').tab('show');
+        }
+        else {
+            jQuery(editor).find('.principal-tabs a[data-bs-toggle="tab"]:first').tab('show');
+        }
+
+        jQuery(editor).find('.category-tabs a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
+            createCookie('rights-category-tab', jQuery(this).attr('href'));
+        });
+
+        const category_tab = getCookie('rights-category-tab');
+        if (category_tab && jQuery(category_tab).length) {
+            jQuery(editor).find('.category-tabs a[data-bs-toggle="tab"][href="' + category_tab + '"]').tab('show');
+        }
+        else {
+            jQuery(editor).find('.category-tabs a[data-bs-toggle="tab"]:visible:first').tab('show');
+        };
+
+        // "rights" checkbox state cache...
+        const check_counts = {};
+
+        // Before page loads we need to initialize our "rights" checkbox state
+        // cache.
+        jQuery(editor).find("div.category-tabs input[type=checkbox]").each(function (index, element) {
+            // Evaluating each checkbox and its current check state is the same
+            // as evaluating a check event once the page is loaded. However, we
+            // must indicate to the process_check_event that we are initializing
+            // the cache. That is, we musn't decrement values from count
+            // totals for checkboxes that aren't checked. That only happens when
+            // a user actually unchecks a box, not when we are initially counting
+            // checked or unchecked boxes.
+            process_check_event(element, true);
+        });
+
+        jQuery("div.category-tabs input[type=checkbox]").change(function () {
+            process_check_event(this, false);
+        });
+
+        // parameters:
+        //   checkbox           - DOM checkbox element that was checked
+        //   initializing_cache - a boolean that defines whether or not this
+        //                        function was called with the purpose of
+        //                        initializing the contents of the check_counts
+        //                        cache.
+        function process_check_event(checkbox, initializing_cache) {
+            var category_tab = checkbox.getAttribute('data-category-tab');
+            var principal_tab = checkbox.getAttribute('data-principal-tab');
+
+            classify_tab(checkbox.checked, category_tab, initializing_cache);
+            classify_tab(checkbox.checked, principal_tab, initializing_cache);
+        }
+
+        function classify_tab(checked, tab_id, initializing_cache) {
+            if (typeof check_counts[tab_id] == 'undefined') {
+                check_counts[tab_id] = 0;
+            }
+
+            if (checked) {
+                check_counts[tab_id]++;
+                if (check_counts[tab_id] == 1) {
+                    // Then this is the first check and we need to add a class
+                    // to the tab.
+                    jQuery('#' + tab_id).addClass("tab-aggregates-checked-rights");
+                }
+            }
+            else if (!initializing_cache) {
+                check_counts[tab_id]--;
+                if (check_counts[tab_id] == 0) {
+                    // Then this is the last uncheck and we need to remove a
+                    // class from the tab.
+                    jQuery('#' + tab_id).removeClass("tab-aggregates-checked-rights");
+                }
+            }
+        }
+
+        let auto_set_own_dashboards;
+        jQuery(editor).find('input[value="ModifySelf"]').change(function () {
+            var form = jQuery(this).closest('form');
+            if (jQuery(this).is(':checked')) {
+                if (form.find('input[value$="OwnDashboard"]:visible:not(:checked)').length) {
+                    jQuery('#grant-own-dashboard-rights-modal').modal('show');
+                }
+            }
+            else {
+                if (auto_set_own_dashboards) {
+                    form.find('input[value$="OwnDashboard"]:visible:checked').prop('checked', false);
+                    auto_set_own_dashboards = false;
+                }
+            }
+        });
+
+        jQuery('#grant-own-dashboard-rights-confirm').click(function () {
+            var form = jQuery(this).closest('form');
+            form.find('input[value$="OwnSavedSearch"]:visible:not(:checked)').prop('checked', true);
+            form.find('input[value$="OwnDashboard"]:visible:not(:checked)').prop('checked', true);
+            jQuery('#grant-own-dashboard-rights-modal').modal('hide');
+            auto_set_own_dashboards = true;
+        });
+
+        const type = editor.getAttribute('data-add-principal');
+        if (type) {
+            jQuery(editor).find("#AddPrincipalForRights-" + type).keyup(function () {
+                toggle_addprincipal_validity(this, true);
+            }).keydown(function (event) {
+                event.stopPropagation() // Disable tabs keyboard nav
+            });
+
+            jQuery("#AddPrincipalForRights-" + type).on("autocompleteselect", addprincipal_onselect);
+            jQuery("#AddPrincipalForRights-" + type).on("autocompletechange", addprincipal_onchange);
+        }
+    }
+
     // Automatically sync to set input values to ones in config files.
     jQuery(elt).find('form[name=EditConfig] input[name$="-file"]').change(function (e) {
         var file_input = jQuery(this);