diff --git a/cloudkittydashboard/static/cloudkitty/js/grouping.js b/cloudkittydashboard/static/cloudkitty/js/grouping.js
index 7fc3e6e..38b90db 100644
--- a/cloudkittydashboard/static/cloudkitty/js/grouping.js
+++ b/cloudkittydashboard/static/cloudkitty/js/grouping.js
@@ -1,111 +1,117 @@
-const groupbyList = JSON.parse(document.getElementById(
- 'groupby_list_config').textContent);
-const translations = JSON.parse(document.getElementById(
- 'groupby_translations').textContent);
-
-class GroupByManager {
-constructor() {
- this.groupby = groupbyList || ['type'];
- this.checkboxContainer = document.getElementById('checkboxes');
- this.urlParams = new URLSearchParams(window.location.search);
- this.form = document.getElementById('groupby_checkbox');
- this.toggleButton = document.getElementById('toggleAll');
-
- this.init();
-}
-
-// Convert field names to readable format
-formatLabel(word) {
- return word.replace(/_/g, ' ')
- .replace(/\b\w/g, l => l.toUpperCase())
- .replace(/\bId\b/g, 'ID');
-}
-
-// Create checkbox with label
-createCheckbox(name) {
- const label = document.createElement('label');
- label.className = 'group-label';
- label.innerHTML = `
-
- ${this.formatLabel(name)}
- `;
- return label;
-}
+// This file is auto-discovered into Horizon's global compressed
+// bundle and therefore executes on every Horizon page. Only run on
+// pages that actually embed the CloudKitty grouping json_script
+// elements; an unguarded lookup aborts the whole bundle elsewhere.
+if (document.getElementById('groupby_list_config') !== null) {
+ const groupbyList = JSON.parse(document.getElementById(
+ 'groupby_list_config').textContent);
+ const translations = JSON.parse(document.getElementById(
+ 'groupby_translations').textContent);
+
+ class GroupByManager {
+ constructor() {
+ this.groupby = groupbyList || ['type'];
+ this.checkboxContainer = document.getElementById('checkboxes');
+ this.urlParams = new URLSearchParams(window.location.search);
+ this.form = document.getElementById('groupby_checkbox');
+ this.toggleButton = document.getElementById('toggleAll');
+
+ this.init();
+ }
-// Determine checkbox state from URL params or session storage
-getCheckboxState(name) {
- if (this.urlParams.has(name)) {
- return this.urlParams.get(name) === 'true';
+ // Convert field names to readable format
+ formatLabel(word) {
+ return word.replace(/_/g, ' ')
+ .replace(/\b\w/g, l => l.toUpperCase())
+ .replace(/\bId\b/g, 'ID');
}
- if (this.urlParams.toString()) {
- return false; // URL has params but not this one
+ // Create checkbox with label
+ createCheckbox(name) {
+ const label = document.createElement('label');
+ label.className = 'group-label';
+ label.innerHTML = `
+
+ ${this.formatLabel(name)}
+ `;
+ return label;
}
- //if we have a saved state use it, otherwise default to type checked
- const saved = sessionStorage.getItem(`checkbox-${name}`);
- return saved !== null ? saved === 'true' : name === 'type';
-}
+ // Determine checkbox state from URL params or session storage
+ getCheckboxState(name) {
+ if (this.urlParams.has(name)) {
+ return this.urlParams.get(name) === 'true';
+ }
-// Set up all checkboxes
-setupCheckboxes() {
- let shouldAutoSubmit = false;
+ if (this.urlParams.toString()) {
+ return false; // URL has params but not this one
+ }
- this.groupby.forEach(name => {
- const label = this.createCheckbox(name);
- const checkbox = label.querySelector('input');
+ //if we have a saved state use it, otherwise default to type checked
+ const saved = sessionStorage.getItem(`checkbox-${name}`);
+ return saved !== null ? saved === 'true' : name === 'type';
+ }
- checkbox.checked = this.getCheckboxState(name);
+ // Set up all checkboxes
+ setupCheckboxes() {
+ let shouldAutoSubmit = false;
- if (checkbox.checked && !this.urlParams.toString()) {
- shouldAutoSubmit = true;
- }
+ this.groupby.forEach(name => {
+ const label = this.createCheckbox(name);
+ const checkbox = label.querySelector('input');
- // Save state and add listener
- sessionStorage.setItem(`checkbox-${name}`, checkbox.checked);
- checkbox.addEventListener('change', () => {
+ checkbox.checked = this.getCheckboxState(name);
+
+ if (checkbox.checked && !this.urlParams.toString()) {
+ shouldAutoSubmit = true;
+ }
+
+ // Save state and add listener
sessionStorage.setItem(`checkbox-${name}`, checkbox.checked);
- this.updateToggleButton();
- });
+ checkbox.addEventListener('change', () => {
+ sessionStorage.setItem(`checkbox-${name}`, checkbox.checked);
+ this.updateToggleButton();
+ });
- this.checkboxContainer.appendChild(label);
- });
+ this.checkboxContainer.appendChild(label);
+ });
- if (shouldAutoSubmit) {
- this.form.submit();
+ if (shouldAutoSubmit) {
+ this.form.submit();
+ }
}
-}
-// Update toggle button text based on current state
-updateToggleButton() {
- const checkboxes = this.checkboxContainer.querySelectorAll('.group-checkbox');
- const allChecked = Array.from(checkboxes).every(cb => cb.checked);
- this.toggleButton.textContent = allChecked ?
- translations.unselect_all : translations.select_all;
-}
+ // Update toggle button text based on current state
+ updateToggleButton() {
+ const checkboxes = this.checkboxContainer.querySelectorAll('.group-checkbox');
+ const allChecked = Array.from(checkboxes).every(cb => cb.checked);
+ this.toggleButton.textContent = allChecked ?
+ translations.unselect_all : translations.select_all;
+ }
-// Toggle all checkboxes
-toggleAll() {
- const checkboxes = this.checkboxContainer.querySelectorAll('.group-checkbox');
- const allChecked = Array.from(checkboxes).every(cb => cb.checked);
+ // Toggle all checkboxes
+ toggleAll() {
+ const checkboxes = this.checkboxContainer.querySelectorAll('.group-checkbox');
+ const allChecked = Array.from(checkboxes).every(cb => cb.checked);
- checkboxes.forEach(cb => {
- cb.checked = !allChecked;
- sessionStorage.setItem(`checkbox-${cb.name}`, cb.checked);
- });
+ checkboxes.forEach(cb => {
+ cb.checked = !allChecked;
+ sessionStorage.setItem(`checkbox-${cb.name}`, cb.checked);
+ });
- this.updateToggleButton();
- this.form.submit();
-}
+ this.updateToggleButton();
+ this.form.submit();
+ }
-// Initialize the component
-init() {
- this.setupCheckboxes();
- this.updateToggleButton();
- this.toggleButton.addEventListener('click', () => this.toggleAll());
-}
-}
+ // Initialize the component
+ init() {
+ this.setupCheckboxes();
+ this.updateToggleButton();
+ this.toggleButton.addEventListener('click', () => this.toggleAll());
+ }
+ }
-// Initialize when DOM is ready
-document.addEventListener('DOMContentLoaded', () => new GroupByManager());
+ // Initialize when DOM is ready
+ document.addEventListener('DOMContentLoaded', () => new GroupByManager());
+}