decidim-admin 0.30.9 → 0.31.0.rc1

data/app/packs/src/decidim/admin/budget_rule_toggler.component.js

@@ -1,50 +1,100 @@
+/**
+ * BudgetRuleTogglerComponent
+ *
+ * Handles showing and hiding rule-specific input containers
+ * based on the selected radio option.
+ */
 export default class BudgetRuleTogglerComponent {
+
+  /**
+   * @param {Object} options - Configuration options
+   * @param {HTMLInputElement[]} options.ruleRadios - Array of radio inputs controlling the rules
+   * @param {Record<string, string[]>} options.mapping - Mapping from radio values to selectors of containers to show
+   */
   constructor(options = {}) {
-    this.ruleCheckboxes = options.ruleCheckboxes;
-    this._runAll();
+    this.ruleRadios = options.ruleRadios;
+    this.mapping = options.mapping || {};
   }
 
-  _runAll() {
-    this.ruleCheckboxes.each((_i, checkbox) => {
-      this._bindEvent(checkbox);
-      this.run(checkbox);
-    });
+  /**
+   * Initialize the component (bind events + run initial state).
+   * @returns {void}
+   */
+  init() {
+    this._bindEvents();
+    this._runInitial();
   }
 
-  _bindEvent(target) {
-    $(target).on("change", (event) => {
-      this.run(event.target);
+  /**
+   * Bind change events on all radios
+   * @private
+   * @returns {void}
+   */
+  _bindEvents() {
+    this.ruleRadios.forEach((radio) => {
+      radio.addEventListener("change", (event) => {
+        this._run(event.target);
+      });
     });
   }
 
-  run(target) {
-    this.toggleTextInput(target);
-
-    if ($(target).prop("checked")) {
-      this.ruleCheckboxes.filter(
-        (_i, checkbox) => {
-          return checkbox !== target;
-        }).prop("checked", false).each(
-        (_i, checkbox) => {
-          this.toggleTextInput(checkbox);
-        });
+  /**
+   * Run toggler logic on page load
+   * @private
+   * @returns {void}
+   */
+  _runInitial() {
+    const checked = this.ruleRadios.find((radio) => radio.checked);
+    if (checked) {
+      this._run(checked);
+    } else {
+      this._hideAll();
     }
   }
 
-  toggleTextInput(target) {
-    const container = $(target).closest("div");
-    if (container.length < 1) {
-      return;
-    }
-    const containerClassPrefix = container.attr("class").
-      replace(/^vote_rule_/, "vote_").
-      replace(/_enabled_container$/, "");
-    const input = $(`[class^="${containerClassPrefix}"][class$="_container"]`);
+  /**
+   * Show the containers associated with the selected radio
+   * @param {HTMLInputElement} target - The radio input that triggered the change
+   * @private
+   * @returns {void}
+   */
+  _run(target) {
+    this._hideAll();
 
-    if ($(target).prop("checked")) {
-      input.slideDown();
-    } else {
-      input.slideUp();
+    // Normalize radio value (snake_case → camelCase)
+    const rawValue = target.value;
+    const camelValue = rawValue.replace(/_([a-z])/g, (_match, letter) => letter.toUpperCase());
+
+    const selectors = this.mapping[camelValue] || [];
+
+    selectors.forEach((selector) => this._show(selector));
+  }
+
+  /**
+   * Hide all containers referenced in the mapping
+   * @private
+   * @returns {void}
+   */
+  _hideAll() {
+    const allSelectors = Object.values(this.mapping).flat();
+    allSelectors.forEach((selector) => {
+      const el = document.querySelector(selector);
+      if (el) {
+        el.style.display = "none";
+      }
+    });
+  }
+
+  /**
+   * Show a container by selector
+   * @param {string} selector - CSS selector of the container to show
+   * @private
+   * @returns {void}
+   */
+  _show(selector) {
+    const el = document.querySelector(selector);
+    if (el) {
+      el.style.display = "";
     }
   }
 }

data/app/packs/src/decidim/admin/controllers/slug/controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.input =  this.element.querySelector("input");
+    this.target = this.element.querySelector("span.slug-url-value");
+    this.boundUpdate = null;
+
+    if (this.input) {
+      this.boundUpdate = this.slugUpdater.bind(this);
+      this.input.addEventListener("keyup", this.boundUpdate)
+    }
+  }
+
+  disconnect() {
+    if (this.boundUpdate !== null) {
+      this.input.removeEventListener("keyup", this.boundUpdate)
+      this.boundUpdate = null;
+    }
+  }
+
+  slugUpdater(event) {
+    this.target.innerHTML = event.target.value;
+  }
+}

data/app/packs/src/decidim/admin/controllers/slug/slug.test.js

@@ -0,0 +1,239 @@
+/* global jest */
+
+import { Application } from "@hotwired/stimulus"
+import SlugController from "./controller"
+
+describe("SlugController", () => {
+  let application = null;
+  let controller = null;
+  let element = null;
+  let input = null;
+  let target = null;
+
+  beforeEach(() => {
+    // Set up the DOM structure
+    document.body.innerHTML = `
+      <div data-controller="slug" class="slug-wrapper">
+        <input type="text" placeholder="Enter slug" />
+        <span class="slug-url-value"></span>
+      </div>
+    `
+
+    element = document.querySelector('[data-controller="slug"]')
+    input = element.querySelector("input")
+    target = element.querySelector("span.slug-url-value")
+
+    // Set up Stimulus application
+    application = Application.start()
+    application.register("slug", SlugController)
+
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        controller = application.getControllerForElementAndIdentifier(element, "slug")
+        resolve();
+      }, 0);
+    });
+  })
+
+  afterEach(() => {
+    controller.disconnect()
+    application.stop()
+    document.body.innerHTML = ""
+  })
+
+  describe("connect", () => {
+    it("finds and stores the input element", () => {
+      expect(controller.input).toBe(input)
+    })
+
+    it("finds and stores the target element", () => {
+      expect(controller.target).toBe(target)
+    })
+
+    it("adds keyup event listener to input when input exists", () => {
+      const addEventListenerSpy = jest.spyOn(input, "addEventListener")
+
+      controller.connect()
+
+      expect(addEventListenerSpy).toHaveBeenCalledWith("keyup", controller.boundUpdate)
+    })
+
+    it("binds the slugUpdater method correctly", () => {
+      controller.connect()
+
+      expect(controller.boundUpdate).toBeDefined()
+      expect(typeof controller.boundUpdate).toBe("function")
+    })
+
+    it("handles missing input gracefully", () => {
+      // Remove input from DOM
+      input.remove()
+
+      controller.disconnect()
+      controller.connect()
+
+      expect(() => controller.connect()).not.toThrow()
+      expect(controller.boundUpdate).toBeNull()
+    })
+  })
+
+  describe("disconnect", () => {
+    beforeEach(() => {
+      controller.connect()
+    })
+
+    it("removes keyup event listener when boundUpdate exists", () => {
+      const removeEventListenerSpy = jest.spyOn(controller.input, "removeEventListener")
+
+      let bound = controller.boundUpdate;
+
+      controller.disconnect()
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith("keyup", bound)
+    })
+
+    it("handles disconnect when boundUpdate is undefined", () => {
+      // eslint-disable-next-line no-undefined
+      controller.boundUpdate = undefined
+
+      expect(() => controller.disconnect()).not.toThrow()
+    })
+  })
+
+  describe("slugUpdater", () => {
+    beforeEach(() => {
+      controller.connect()
+    })
+
+    it("updates target innerHTML with input value", () => {
+      const mockEvent = {
+        target: {
+          value: "test-slug"
+        }
+      }
+
+      controller.slugUpdater(mockEvent)
+
+      expect(target.innerHTML).toBe("test-slug")
+    })
+
+    it("handles empty input value", () => {
+      const mockEvent = {
+        target: {
+          value: ""
+        }
+      }
+
+      controller.slugUpdater(mockEvent)
+
+      expect(target.innerHTML).toBe("")
+    })
+
+    it("handles special characters in input value", () => {
+      const mockEvent = {
+        target: {
+          value: "test-slug-with-special-chars-123"
+        }
+      }
+
+      controller.slugUpdater(mockEvent)
+
+      expect(target.innerHTML).toBe("test-slug-with-special-chars-123")
+    })
+  })
+
+  describe("integration tests", () => {
+    beforeEach(() => {
+      controller.connect()
+    })
+
+    it("updates target when typing in input", () => {
+      input.value = "my-new-slug"
+
+      // Simulate keyup event
+      const keyupEvent = new KeyboardEvent("keyup", { bubbles: true })
+      Reflect.defineProperty(keyupEvent, "target", {
+        value: input,
+        enumerable: true
+      })
+
+      input.dispatchEvent(keyupEvent)
+
+      expect(target.innerHTML).toBe("my-new-slug")
+    })
+
+    it("updates target multiple times as user types", () => {
+      const testValues = ["m", "my", "my-", "my-s", "my-sl", "my-slug"]
+
+      testValues.forEach((value) => {
+        input.value = value
+        const keyupEvent = new KeyboardEvent("keyup", { bubbles: true })
+        Reflect.defineProperty(keyupEvent, "target", {
+          value: input,
+          enumerable: true
+        })
+        input.dispatchEvent(keyupEvent)
+
+        expect(target.innerHTML).toBe(value)
+      })
+    })
+  })
+
+  describe("edge cases", () => {
+    it("handles DOM structure without input", async () => {
+      // Stop the current application to avoid conflicts
+      application.stop()
+
+      // Set up new DOM without input
+      document.body.innerHTML = `
+    <div data-controller="slug" class="slug-wrapper">
+      <span class="slug-url-value"></span>
+    </div>
+  `
+
+      // Start a fresh application
+      application = Application.start()
+      application.register("slug", SlugController)
+
+      const elementWithoutInput = document.querySelector('[data-controller="slug"]')
+      let controllerWithoutInput = null
+
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          controllerWithoutInput = application.getControllerForElementAndIdentifier(elementWithoutInput, "slug")
+          resolve();
+        }, 0);
+      });
+
+      expect(() => controllerWithoutInput.connect()).not.toThrow()
+      expect(controllerWithoutInput.input).toBeNull()
+    })
+
+    it("handles DOM structure without target", async () => {
+      document.body.innerHTML = `
+        <div data-controller="slug" class="slug-wrapper">
+          <input type="text" placeholder="Enter slug" />
+        </div>
+      `
+
+      const elementWithoutTarget = document.querySelector('[data-controller="slug"]')
+      let controllerWithoutInput = null
+
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          controllerWithoutInput = application.getControllerForElementAndIdentifier(elementWithoutTarget, "slug")
+          resolve();
+        }, 0);
+      });
+
+
+      controllerWithoutInput.connect()
+
+      expect(controllerWithoutInput.target).toBeNull()
+
+      // Should not throw when trying to update nonexistent target
+      const mockEvent = { target: { value: "test" } }
+      expect(() => controllerWithoutInput.slugUpdater(mockEvent)).toThrow()
+    })
+  })
+})

data/app/packs/src/decidim/admin/css_preview.js

@@ -23,7 +23,7 @@
 // for example:
 //   strong[data-css-example]:color:#0000ff; strong[data-css-example]:backgroundColor:#eeeeee;
 //
-window.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   document.querySelectorAll("input[data-css-preview=true]").forEach((element) => {
     element.addEventListener("change", (event) => {
       const updateRules = event.target.dataset.cssPreviewUpdates.split(";");

data/app/packs/src/decidim/admin/draggable-list.js

@@ -10,7 +10,7 @@ export default function createSortableList(lists) {
 }
 
 // Once in DOM
-$(() => {
+document.addEventListener("turbo:load", () => {
   const $draggables = $(".draggable-list")
   let draggablesClassNames = []
 

data/app/packs/src/decidim/admin/draggable-table.js

@@ -4,48 +4,30 @@ import createSortList from "src/decidim/admin/sort_list.component"
  * Draggable table
  *
  * This script is used to make a table draggable.
- * It works with the following data attributes:
+ * It works with two data attributes:
  *
  * - data-draggable-table: The table that will be draggable.
  * - data-sort-url: The URL where the order will be sent.
- * - data-draggable-handle: (optional) CSS selector for the drag handle element.
- *   When specified, dragging can only be initiated from this element.
- * - data-draggable-placeholder: (optional) HTML for the placeholder element.
  */
-document.addEventListener("DOMContentLoaded", () => {
-  document.querySelectorAll("[data-draggable-table]").forEach((container) => {
-    const options = {
-      forcePlaceholderSize: true,
-      onSortUpdate: ($children) => {
-        const children = $children.toArray();
+document.addEventListener("turbo:load", () => {
+  createSortList("[data-draggable-table]", {
+    onSortUpdate: ($children) => {
+      const children = $children.toArray();
 
-        if (children.length === 0) {
-          return;
-        }
-
-        const parent = children[0].parentNode;
-        const sortUrl = parent.dataset.sortUrl;
-        const order = children.map((child) => child.dataset.recordId);
-
-        if (sortUrl && sortUrl !== "#") {
-          $.ajax({
-            method: "PUT",
-            url: sortUrl,
-            contentType: "application/json",
-            data: JSON.stringify({ order_ids: order }) // eslint-disable-line camelcase
-          });
-        }
+      if (children.length === 0) {
+        return;
       }
-    };
 
-    // Read optional configuration from data attributes
-    if (container.dataset.draggableHandle) {
-      options.handle = container.dataset.draggableHandle;
-    }
-    if (container.dataset.draggablePlaceholder) {
-      options.placeholder = container.dataset.draggablePlaceholder;
-    }
+      const parent = children[0].parentNode;
+      const sortUrl = parent.dataset.sortUrl;
+      const order = children.map((child) => child.dataset.recordId);
 
-    createSortList(container, options);
+      $.ajax({
+        method: "PUT",
+        url: sortUrl,
+        contentType: "application/json",
+        data: JSON.stringify({ order_ids: order }) // eslint-disable-line camelcase
+      });
+    }
   });
-});
+})

data/app/packs/src/decidim/admin/dynamic_fields.component.js

@@ -34,9 +34,12 @@ class DynamicFieldsComponent {
     }
 
     $.fn.template = function(placeholder, value) {
+      // Clean up the template HTML to ensure it only contains elements.
+      const $template = $(this).filter((_idx, el) => el.nodeType === Node.ELEMENT_NODE);
+
       // See the comment below in the `_addField()` method regarding the
       // `<template>` tag support in IE11.
-      const $subtemplate = $(this).find("template, .decidim-template");
+      const $subtemplate = $template.find("template, .decidim-template");
 
       if ($subtemplate.length > 0) {
         $subtemplate.html((index, oldHtml) => $(oldHtml).template(placeholder, value)[0].outerHTML);
@@ -44,7 +47,7 @@ class DynamicFieldsComponent {
 
       // Handle those subtemplates that are mapped with the `data-template`
       // attribute. This is also because of the IE11 support.
-      const $subtemplateParents = $(this).find("[data-template]");
+      const $subtemplateParents = $template.find("[data-template]");
 
       if ($subtemplateParents.length > 0) {
         $subtemplateParents.each((_i, elem) => {
@@ -64,15 +67,15 @@ class DynamicFieldsComponent {
         });
       }
 
-      $(this).replaceAttribute("id", placeholder, value);
-      $(this).replaceAttribute("name", placeholder, value);
-      $(this).replaceAttribute("data-tabs-content", placeholder, value);
-      $(this).replaceAttribute("for", placeholder, value);
-      $(this).replaceAttribute("tabs_id", placeholder, value);
-      $(this).replaceAttribute("href", placeholder, value);
-      $(this).replaceAttribute("value", placeholder, value);
+      $template.replaceAttribute("id", placeholder, value);
+      $template.replaceAttribute("name", placeholder, value);
+      $template.replaceAttribute("data-tabs-content", placeholder, value);
+      $template.replaceAttribute("for", placeholder, value);
+      $template.replaceAttribute("tabs_id", placeholder, value);
+      $template.replaceAttribute("href", placeholder, value);
+      $template.replaceAttribute("value", placeholder, value);
 
-      return this;
+      return $template;
     }
   }
 
@@ -147,9 +150,7 @@ class DynamicFieldsComponent {
       // as they are submitted with them.
       $template = $wrapper.children(`template, ${templateClass}`);
     }
-
     const $newField = $($template.html()).template(this.placeholderId, this._getUID());
-
     $newField.find("ul.tabs").attr("data-tabs", true);
 
     const $lastQuestion = $container.find(this.fieldSelector).last()

data/app/packs/src/decidim/admin/external_domain_allowlist.js

@@ -3,7 +3,7 @@ import AutoLabelByPositionComponent from "src/decidim/admin/auto_label_by_positi
 import createDynamicFields from "src/decidim/admin/dynamic_fields.component"
 import createSortList from "src/decidim/admin/sort_list.component"
 
-$(() => {
+document.addEventListener("turbo:load", () => {
   const dynamicFieldDefinitions = [
     {
       placeHolderId: "external-domain-id",

data/app/packs/src/decidim/admin/form.js

@@ -4,12 +4,29 @@ import BudgetRuleTogglerComponent from "src/decidim/admin/budget_rule_toggler.co
 
 // Checks if the form contains fields with special CSS classes added in
 // Decidim::Admin::SettingsHelper and acts accordingly.
-$(() => {
-  const budgetRuleToggler = new BudgetRuleTogglerComponent({
-    ruleCheckboxes: $("input[id^='component_settings_vote_rule_']")
+document.addEventListener("turbo:load", () => {
+
+  const budgetTogglerRadios = Array.from(
+    document.querySelectorAll(
+      "input[type='radio'][name='component[settings][voting_rule]']"
+    )
+  );
+
+  const budgetTogglerMapping = {
+    thresholdPercent: [".vote_threshold_percent_container"],
+    minimumProjects: [".vote_minimum_budget_projects_number_container"],
+    selectedProjects: [
+      ".vote_selected_projects_minimum_container",
+      ".vote_selected_projects_maximum_container"
+    ]
+  };
+
+  const budgetToggler = new BudgetRuleTogglerComponent({
+    ruleRadios: budgetTogglerRadios,
+    mapping: budgetTogglerMapping
   });
 
-  budgetRuleToggler.run();
+  budgetToggler.init();
 
   // Prevents readonly containers from being modified.
   const $readonlyContainer = $(".readonly_container input");

data/app/packs/src/decidim/admin/global_moderations.js

@@ -2,7 +2,7 @@
 /* eslint no-unused-vars: 0 */
 /* eslint id-length: ["error", { "exceptions": ["e"] }] */
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const selectedModerationsCount = () => {
     return document.querySelectorAll(".table-list .js-check-all-moderations:checked").length;
   };
@@ -69,7 +69,7 @@ document.addEventListener("DOMContentLoaded", () => {
     hideBulkActionForms();
     bulkActionsButton.classList.add("hide");
 
-    document.querySelectorAll("#js-bulk-actions-dropdown ul li button").forEach((button) => {
+    document.querySelectorAll("#js-bulk-actions-dropdown li button").forEach((button) => {
       button.addEventListener("click", (event) => {
         const bulkActionsDropdown = document.getElementById("js-bulk-actions-dropdown");
         bulkActionsDropdown.classList.remove("is-open");

data/app/packs/src/decidim/admin/managed_moderated_users.js

@@ -2,7 +2,7 @@
 /* eslint no-unused-vars: 0 */
 /* eslint id-length: ["error", { "exceptions": ["e"] }] */
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const selectedModeratedUsersCount = () => {
     return document.querySelectorAll(".table-list .js-check-all-moderated_users:checked").length;
   };
@@ -69,7 +69,7 @@ document.addEventListener("DOMContentLoaded", () => {
     hideBulkActionForms();
     bulkActionsButton.classList.add("hide");
 
-    document.querySelectorAll("#js-bulk-actions-dropdown ul li button").forEach((button) => {
+    document.querySelectorAll("#js-bulk-actions-dropdown li button").forEach((button) => {
       button.addEventListener("click", (event) => {
         const bulkActionsDropdown = document.getElementById("js-bulk-actions-dropdown");
         bulkActionsDropdown.classList.remove("is-open");

data/app/packs/src/decidim/admin/moderations.js

@@ -1,4 +1,4 @@
-$(() => {
+document.addEventListener("turbo:load", () => {
   const $moderationDetails = $(".moderation-details");
   const $toggleContentButton = $moderationDetails.find(".toggle-content");
   const $reportedContent = $moderationDetails.find(".reported-content");

data/app/packs/src/decidim/admin/newsletters.js

@@ -1,6 +1,6 @@
 import TomSelect from "tom-select/dist/cjs/tom-select.popular";
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const isOnSelectRecipientsPage = window.location.pathname.includes("/select_recipients_to_deliver");
 
   const selectors = {

data/app/packs/src/decidim/admin/officializations.js

@@ -1,4 +1,4 @@
-$(() => {
+document.addEventListener("turbo:load", () => {
   const $modal = $("#show-email-modal");
 
   if ($modal.length === 0) {

data/app/packs/src/decidim/admin/participatory_space_search.js

@@ -1,4 +1,4 @@
-import AutoComplete from "src/decidim/autocomplete";
+import AutoComplete from "src/decidim/refactor/moved/autocomplete";
 
 /**
  * Sends a query to the API and resolves the resulting data in the returned
@@ -252,7 +252,7 @@ const createAutocomplete = (searchInput, spaces, inputIndex) => {
   return ac;
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const searchElements = document.querySelectorAll("input.participatory-space-search")
   if (searchElements.length < 1) {
     return;

data/app/packs/src/decidim/admin/proposal_infinite_edit.js

@@ -1,4 +1,4 @@
-$(() => {
+document.addEventListener("turbo:load", () => {
   const $limitedTimeRadioButton = $("#component_settings_proposal_edit_time_limited");
   const $infiniteTimeRadioButton = $("#component_settings_proposal_edit_time_infinite");
   const $editTimeContainer = $(".edit_time_container");