decidim-admin 0.30.1 → 0.31.0.rc1

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

@@ -9,7 +9,7 @@ import createSortList from "src/decidim/admin/sort_list.component"
  * - data-draggable-table: The table that will be draggable.
  * - data-sort-url: The URL where the order will be sent.
  */
-$(() => {
+document.addEventListener("turbo:load", () => {
   createSortList("[data-draggable-table]", {
     onSortUpdate: ($children) => {
       const children = $children.toArray();

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");

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

@@ -1,6 +1,6 @@
 import SubformMultiTogglerComponent from "src/decidim/admin/subform_multi_toggler.component"
 
-$(() => {
+document.addEventListener("turbo:load", () => {
   const subformMultiToggler = new SubformMultiTogglerComponent({
     controllerSelect: $("input[name$=\\[authorization_handlers\\]\\[\\]]"),
     subformWrapperClass: "authorization-handler",

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

@@ -10,7 +10,7 @@ import sortable from "html5sortable/dist/html5sortable.es";
     console.log('The new order is:', event.target.children);
   });
 */
-window.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const draggables = document.querySelectorAll(".js-sortable");
 
   if (draggables) {

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

@@ -14,7 +14,7 @@
 //                       } %>
 // ```
 //
-window.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   document.querySelectorAll("input[data-sync-radio-buttons=true]").forEach((element) => {
     element.addEventListener("change", (event) => {
       const value = event.target.dataset.syncRadioButtonsValue;

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

@@ -1,7 +1,7 @@
 /**
  * When switching tabs in i18n fields, autofocus on the input to save clicks #212
  */
-$(() => {
+document.addEventListener("turbo:load", () => {
   // Event launched by foundation
   $("[data-tabs]").on("change.zf.tabs", (event) => {
     const $container = $(event.target).parent().next(".tabs-content").find(".tabs-panel.is-active");

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

@@ -9,7 +9,7 @@
 // </div>
 // ```
 //
-window.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   document.querySelectorAll("input[data-text-copy=true], textarea[data-text-copy=true]").forEach((element) => {
     element.addEventListener("change", (event) => {
       const target = document.querySelector(event.target.dataset.target);

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

@@ -93,7 +93,7 @@ const setTheme = (primary, saturation) => {
   (document.getElementById("preview-tertiary") || {}).value = tertiary;
 }
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("turbo:load", () => {
   const selector = document.querySelector("#primary-selector")
 
   if (selector) {

data/app/packs/stylesheets/decidim/admin/_datepicker.scss

@@ -15,11 +15,11 @@
 
 .datepicker {
   &__clock-button {
-    @apply top-0;
+    @apply top-2;
   }
 
   &__calendar-button {
-    @apply top-0;
+    @apply top-2;
   }
 
   &__pick-calendar {

data/app/packs/stylesheets/decidim/admin/_dropdown.scss

@@ -8,11 +8,11 @@
   }
 
   .dropdown__trigger {
-    @apply flex underline p-0;
+    @apply flex p-0;
   }
 
   .dropdown {
-    @apply divide-y divide-gray-3 z-20;
+    @apply divide-y divide-gray-3;
 
     &.button {
       @apply z-10;
@@ -33,3 +33,13 @@
     }
   }
 }
+
+.dropdown {
+  &[aria-hidden="true"] {
+    @apply hidden;
+  }
+
+  &[aria-hidden="false"] {
+    @apply block;
+  }
+}

data/app/packs/stylesheets/decidim/admin/_filters.scss

@@ -7,18 +7,6 @@
     }
   }
 
-  .dropdown .is-dropdown-submenu a {
-    @apply w-full inline-block;
-  }
-
-  .dropdown .is-dropdown-submenu li {
-    @apply w-full relative;
-  }
-
-  .dropdown {
-    @apply relative p-0 border-0;
-  }
-
   .button,
   .input-group {
     @apply mb-0;
@@ -33,36 +21,7 @@
   }
 
   .input-group-button {
-    @apply absolute right-4 top-0 h-full top-1;
-  }
-
-  .dropdown.menu {
-    z-index: 5;
-
-    li {
-      @apply p-0;
-    }
-
-    .button {
-      @apply drop-shadow-none;
-    }
-
-    & > li.is-dropdown-submenu-parent > a {
-      @apply px-4 py-1 text-white bg-secondary flex items-center gap-x-2;
-
-      &:hover {
-        @apply text-white bg-secondary;
-      }
-    }
-
-    li.is-active > a,
-    li.is-active li.is-submenu-item > a:hover {
-      @apply text-white bg-secondary;
-    }
-
-    .dropdown-filter-icon {
-      @apply fill-white w-5 h-5 p-0;
-    }
+    @apply absolute right-4 h-full top-[0.35rem];
   }
 }
 
@@ -75,20 +34,5 @@
     .type-icon {
       @apply align-top;
     }
-
-    .action-icon {
-      span {
-        @apply ml-1;
-      }
-
-      &.action-icon--remove {
-        color: #e66a5d;
-        margin-left: 0.3rem;
-
-        &:hover {
-          color: #e66a5d;
-        }
-      }
-    }
   }
 }

data/app/packs/stylesheets/decidim/admin/_forms.scss

@@ -16,7 +16,7 @@
     input[type="week"],
     select,
     textarea {
-      @apply mt-0;
+      @apply mt-2;
     }
 
     & label:not(&-checkbox-label),
@@ -24,10 +24,6 @@
       @apply text-sm;
     }
 
-    .help-text {
-      @apply mt-1;
-    }
-
     .row .columns,
     .row.column {
       @apply mb-4;
@@ -43,11 +39,6 @@
       @apply block my-2;
     }
 
-    textarea#component_step_settings_1_automatic_hashtags,
-    textarea#component_step_settings_1_suggested_hashtags {
-      @apply block w-full;
-    }
-
     #choose-template label {
       @apply block my-2;
     }