decidim-admin 0.29.1 → 0.30.0.rc1

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

@@ -0,0 +1,186 @@
+/* eslint-disable no-invalid-this */
+/* eslint no-unused-vars: 0 */
+/* eslint id-length: ["error", { "exceptions": ["e"] }] */
+
+document.addEventListener("DOMContentLoaded", () => {
+  const selectedModeratedUsersCount = () => {
+    return document.querySelectorAll(".table-list .js-check-all-moderated_users:checked").length;
+  };
+
+  const selectedModeratedUsersCountUpdate = () => {
+    const selectedModeratedUsers = selectedModeratedUsersCount();
+
+    const countElement = document.getElementById("js-selected-moderated_users-count");
+    const blockActions = document.getElementById("js-block-moderated_users-actions");
+    const unblockActions = document.getElementById("js-unblock-moderated_users-actions");
+    const unreportActions = document.getElementById("js-unreport-moderated_users-actions");
+
+    if (selectedModeratedUsers === 0) {
+      countElement.textContent = "";
+      blockActions.classList.add("hide");
+      unblockActions.classList.add("hide");
+      unreportActions.classList.add("hide");
+    } else {
+      countElement.textContent = selectedModeratedUsers;
+    }
+  };
+
+  const showBulkActionsButton = () => {
+    if (selectedModeratedUsersCount() > 0) {
+      document.getElementById("js-bulk-actions-button").classList.remove("hide");
+    }
+  };
+
+  const hideBulkActionsButton = (force = false) => {
+    const bulkActionsButton = document.getElementById("js-bulk-actions-button");
+    const bulkActionsDropdown = document.getElementById("js-bulk-actions-dropdown");
+
+    if (selectedModeratedUsersCount() === 0 || force) {
+      bulkActionsButton.classList.add("hide");
+      bulkActionsDropdown.classList.remove("is-open");
+    }
+  };
+
+  const showOtherActionsButtons = () => {
+    document.getElementById("js-other-actions-wrapper").classList.remove("hide");
+  };
+
+  const hideOtherActionsButtons = () => {
+    document.getElementById("js-other-actions-wrapper").classList.add("hide");
+  };
+
+  const hideBulkActionForms = () => {
+    document.querySelectorAll(".js-bulk-action-form").forEach((form) => {
+      form.classList.add("hide");
+    });
+  };
+
+  // Expose functions to make them available in .js.erb templates
+  window.selectedModeratedUsersCountUpdate = selectedModeratedUsersCountUpdate;
+  window.showBulkActionsButton = showBulkActionsButton;
+  window.hideBulkActionsButton = hideBulkActionsButton;
+  window.showOtherActionsButtons = showOtherActionsButtons;
+  window.hideOtherActionsButtons = hideOtherActionsButtons;
+  window.hideBulkActionForms = hideBulkActionForms;
+
+  const bulkActionsButton = document.getElementById("js-bulk-actions-button");
+
+  if (document.querySelectorAll(".js-bulk-action-form").length) {
+    hideBulkActionForms();
+    bulkActionsButton.classList.add("hide");
+
+    document.querySelectorAll("#js-bulk-actions-dropdown ul li button").forEach((button) => {
+      button.addEventListener("click", (event) => {
+        const bulkActionsDropdown = document.getElementById("js-bulk-actions-dropdown");
+        bulkActionsDropdown.classList.remove("is-open");
+        hideBulkActionForms();
+
+        const action = event.target.dataset.action;
+        const panelActions = [
+          "block-moderated_users",
+          "unreport-moderated_users",
+          "unblock-moderated_users"
+        ];
+
+        if (!action) {
+          return;
+        }
+
+        const form = document.getElementById(`js-form-${action}`);
+        const actionElement = document.getElementById(`js-${action}-actions`);
+
+        if (panelActions.includes(action)) {
+          form.addEventListener("submit", () => {
+            document.querySelector(".layout-content > div[data-callout-wrapper]").innerHTML = "";
+          });
+
+          actionElement.classList.remove("hide");
+        } else {
+          form.addEventListener("submit", () => {
+            document.querySelector(".layout-content > div[data-callout-wrapper]").innerHTML = "";
+          });
+
+          actionElement.classList.remove("hide");
+          hideBulkActionsButton(true);
+          hideOtherActionsButtons();
+        }
+      });
+    });
+
+    // Select all checkboxes
+    document.querySelector(".js-check-all").addEventListener("change", function () {
+      const isChecked = this.checked;
+      const checkboxes = document.querySelectorAll(".js-check-all-moderated_users");
+
+      checkboxes.forEach((checkbox) => {
+        checkbox.checked = isChecked;
+        const row = checkbox.closest("tr");
+        if (row) {
+          row.classList.toggle("selected", isChecked);
+        }
+      });
+
+      if (isChecked) {
+        showBulkActionsButton();
+      } else {
+        hideBulkActionsButton();
+      }
+
+      selectedModeratedUsersCountUpdate();
+    });
+
+    // moderated users checkbox change
+    document.querySelector(".table-list").addEventListener("change", (event) => {
+      if (!event.target.matches(".js-check-all-moderated_users")) {
+        return;
+      }
+
+      const checkbox = event.target;
+      const moderationId = checkbox.value;
+      const checked = checkbox.checked;
+
+      // Uncheck "select all" if one of the checkboxes is unchecked
+      const selectAllCheckbox = document.querySelector(".js-check-all");
+      if (!checked) {
+        selectAllCheckbox.checked = false;
+      }
+
+      // If all individual checkboxes are checked, check the "select all" checkbox
+      const allCheckboxes = Array.from(document.querySelectorAll(".js-check-all-moderated_users")).filter((checkboxItem) => checkboxItem.offsetParent !== null);
+      const checkedCheckboxes = Array.from(document.querySelectorAll(".js-check-all-moderated_users:checked")).filter((checkboxItem) => checkboxItem.offsetParent !== null);
+
+      if (allCheckboxes.length === checkedCheckboxes.length) {
+        selectAllCheckbox.checked = true;
+        showBulkActionsButton();
+      }
+
+      const row = checkbox.closest("tr");
+      if (row) {
+        row.classList.toggle("selected", checked);
+      }
+
+      if (checked) {
+        showBulkActionsButton();
+      } else {
+        hideBulkActionsButton();
+      }
+
+      if (checkedCheckboxes.length === 0) {
+        hideBulkActionsButton();
+      }
+
+      document.querySelectorAll(`.js-moderated_user-id-${moderationId}`).forEach((input) => {
+        input.checked = checked;
+      });
+      selectedModeratedUsersCountUpdate();
+    });
+
+    document.querySelectorAll(".js-cancel-bulk-action").forEach((button) => {
+      button.addEventListener("click", () => {
+        hideBulkActionForms();
+        showBulkActionsButton();
+        showOtherActionsButtons();
+      });
+    });
+  }
+});

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

@@ -1,82 +1,173 @@
-$(() => {
-  const $form = $(".form.newsletter_deliver");
-
-  if ($form.length > 0) {
-    const $sendNewsletterToAllUsers = $form.find("#send_newsletter_to_all_users");
-    const $sendNewsletterToFollowers = $form.find("#send_newsletter_to_followers");
-    const $sendNewsletterToParticipants = $form.find("#send_newsletter_to_participants");
-    const $participatorySpacesForSelect = $form.find("#participatory_spaces_for_select");
-
-    const checkSelectiveNewsletterFollowers = $sendNewsletterToFollowers.find("input[type='checkbox']").prop("checked");
-    const checkSelectiveNewsletterParticipants = $sendNewsletterToParticipants.find("input[type='checkbox']").prop("checked");
-
-    $sendNewsletterToAllUsers.on("change", (event) => {
-      const checked = event.target.checked;
-      if (checked) {
-        $sendNewsletterToFollowers.find("input[type='checkbox']").prop("checked", !checked);
-        $sendNewsletterToParticipants.find("input[type='checkbox']").prop("checked", !checked);
-        $participatorySpacesForSelect.hide();
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const isOnSelectRecipientsPage = window.location.pathname.includes("/select_recipients_to_deliver");
+
+  const selectors = {
+    form: document.querySelector(".form.newsletter_deliver"),
+    sendToAllUsers: document.querySelector("#newsletter_send_to_all_users"),
+    sendToVerifiedUsers: document.querySelector("#newsletter_send_to_verified_users"),
+    sendToParticipants: document.querySelector("#newsletter_send_to_participants"),
+    sendToFollowers: document.querySelector("#newsletter_send_to_followers"),
+    sendToPrivateMembers: document.querySelector("#newsletter_send_to_private_members"),
+    verificationTypesSelect: document.querySelector("#verification_types_for_select"),
+    participatorySpacesForSelect: document.querySelector("#participatory_spaces_for_select"),
+    deliverButton: document.querySelector("#deliver-button"),
+    confirmRecipientsLink: document.querySelector("#confirm-recipients-link"),
+    recipientsCount: document.querySelector("#recipients_count"),
+    recipientsCountSpinner: document.querySelector("#recipients_count_spinner"),
+    csrfToken: document.querySelector('meta[name="csrf-token"]')
+  };
+
+  const inputs = {
+    radioButtons: [selectors.sendToAllUsers, selectors.sendToVerifiedUsers].filter(Boolean),
+    checkboxes: [
+      selectors.sendToParticipants,
+      selectors.sendToFollowers,
+      selectors.sendToPrivateMembers
+    ].filter(Boolean)
+  };
+
+  const toggleVisibility = (element, condition) => element?.classList.toggle("hidden", !condition);
+
+  const updateDeliverButtonVisibility = () => {
+    const sendToAllUsersChecked = selectors.form?.elements["newsletter[send_to_all_users]"]?.value === "1";
+
+    toggleVisibility(selectors.deliverButton, sendToAllUsersChecked);
+    toggleVisibility(selectors.confirmRecipientsLink, !sendToAllUsersChecked);
+  };
+
+  const updateHiddenField = (input) => {
+    const hiddenInput = selectors.form?.elements[input.name];
+    if (hiddenInput) {
+      hiddenInput.value = input.checked
+        ? "1"
+        : "0";}
+  };
+
+  const ensureAtLeastOneOptionSelected = () => {
+    if (![...inputs.radioButtons, ...inputs.checkboxes].some((input) => input?.checked)) {
+      selectors.sendToAllUsers.checked = true;
+      updateHiddenField(selectors.sendToAllUsers);
+    }
+  };
+
+  const updateConfirmRecipientsLink = () => {
+    if (!selectors.confirmRecipientsLink) {
+      return;
+    }
+    const params = new URLSearchParams(new FormData(selectors.form));
+    selectors.confirmRecipientsLink.setAttribute(
+      "href",
+      `${selectors.confirmRecipientsLink.dataset.baseUrl}?${params.toString()}`
+    );
+  };
+
+  const updateRecipientsCount = async () => {
+    const url = selectors.form?.dataset?.recipientsCountNewsletterPath;
+    if (!url) {
+      return;
+    }
+
+    selectors.recipientsCountSpinner?.classList.remove("hide");
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        headers: { "X-CSRF-Token": selectors.csrfToken?.content },
+        body: new FormData(selectors.form)
+      });
+      selectors.recipientsCount.textContent = await response.text();
+    } catch (error) {
+      console.error("Error fetching recipients count:", error);
+    } finally {
+      selectors.recipientsCountSpinner?.classList.add("hide");
+    }
+  };
+
+  const resetIdsForParticipatorySpaces = () => {
+    document.querySelectorAll('.form.newsletter_deliver select[name$="[ids][]"]').forEach((select) => {
+      if (select.tomselect) {
+        select.tomselect.clear();
       } else {
-        $sendNewsletterToFollowers.find("input[type='checkbox']").prop("checked", !checked);
-        $sendNewsletterToParticipants.find("input[type='checkbox']").prop("checked", !checked);
-        $participatorySpacesForSelect.show();
-      }
-    })
-
-    $sendNewsletterToFollowers.on("change", (event) => {
-      const checked = event.target.checked;
-      const selectiveNewsletterParticipants = $sendNewsletterToParticipants.find("input[type='checkbox']").prop("checked");
-
-      if (checked) {
-        $sendNewsletterToAllUsers.find("input[type='checkbox']").prop("checked", !checked);
-        $participatorySpacesForSelect.show();
-      } else if (!selectiveNewsletterParticipants) {
-        $sendNewsletterToAllUsers.find("input[type='checkbox']").prop("checked", true);
-        $participatorySpacesForSelect.hide();
+        select.value = [];
       }
-    })
-
-    $sendNewsletterToParticipants.on("change", (event) => {
-      const checked = event.target.checked;
-      const selectiveNewsletterFollowers = $sendNewsletterToFollowers.find("input[type='checkbox']").prop("checked");
-      if (checked) {
-        $sendNewsletterToAllUsers.find("input[type='checkbox']").prop("checked", !checked);
-        $participatorySpacesForSelect.show();
-      } else if (!selectiveNewsletterFollowers) {
-        $sendNewsletterToAllUsers.find("input[type='checkbox']").prop("checked", true);
-        $participatorySpacesForSelect.hide();
-      }
-    })
+    });
+  };
 
-    if (checkSelectiveNewsletterFollowers || checkSelectiveNewsletterParticipants) {
-      $participatorySpacesForSelect.show();
-    } else {
-      $participatorySpacesForSelect.hide();
+  const resetVerificationTypes = () => {
+    const select = document.querySelector("#verification-types-select");
+    select?.tomselect?.clear();
+    const hiddenInput = selectors.form?.elements["newsletter[verification_types]"];
+    if (hiddenInput) {
+      hiddenInput.value = "";
     }
+  };
 
-    $(".form .spaces-block-tag").each(function(_i, blockTag) {
-      const selectTag = $(blockTag).find(".chosen-select")
-      selectTag.change(function() {
-        let optionSelected = selectTag.find("option:selected").val()
-        if (optionSelected === "all") {
-          selectTag.find("option").not(":first").prop("selected", true);
-          selectTag.find("option[value='all']").prop("selected", false);
-        } else if (optionSelected === "") {
-          selectTag.find("option").not(":first").prop("selected", false);
-        }
+  const updateFormState = () => {
+    [...inputs.radioButtons, ...inputs.checkboxes].forEach(updateHiddenField);
+    const isAllUsersChecked = selectors.sendToAllUsers?.checked;
+    const isAnyChecked = [...inputs.radioButtons, ...inputs.checkboxes].some((input) => input?.checked);
+
+    toggleVisibility(selectors.deliverButton, isAllUsersChecked);
+    toggleVisibility(selectors.confirmRecipientsLink, !isAllUsersChecked && isAnyChecked);
+    toggleVisibility(
+      selectors.participatorySpacesForSelect,
+      inputs.checkboxes.some((input) => input.checked) && !selectors.sendToVerifiedUsers?.checked
+    );
+    toggleVisibility(selectors.verificationTypesSelect, selectors.sendToVerifiedUsers?.checked);
+    ensureAtLeastOneOptionSelected();
+    updateConfirmRecipientsLink();
+    updateRecipientsCount();
+  };
+
+  const handleRadioChange = (radio) => {
+    inputs.radioButtons.forEach((rb) => (rb.checked = rb === radio));
+    inputs.checkboxes.forEach((checkbox) => (checkbox.checked = false));
+    resetVerificationTypes();
+    resetIdsForParticipatorySpaces();
+    updateFormState();
+  };
+
+  const handleCheckboxChange = () => {
+    inputs.radioButtons.forEach((radio) => (radio.checked = false));
+    resetVerificationTypes();
+    resetIdsForParticipatorySpaces();
+    updateFormState();
+  };
+
+  const attachEventListeners = () => {
+    inputs.radioButtons.forEach((radio) =>
+      radio.addEventListener("change", () => handleRadioChange(radio))
+    );
+
+    inputs.checkboxes.forEach((checkbox) =>
+      checkbox.addEventListener("change", handleCheckboxChange)
+    );
+
+    selectors.form?.addEventListener("change", updateFormState);
+  };
+
+  const initializeTomSelect = () => {
+    document.querySelectorAll("[data-multiselect='true']").forEach((select) => {
+      const tomSelect = new TomSelect(select, {
+        plugins: ["remove_button", "dropdown_input"],
+        allowEmptyOption: true
       });
-    })
-
-    $form.on("change", function() {
-      let $data = $form.serializeJSON().newsletter;
-      let $url = $form.data("recipients-count-newsletter-path");
-      const $modal = $("#recipients_count_spinner");
-      $modal.removeClass("hide");
-      $.get($url, {data: $data}, function(recipientsCount) {
-        $("#recipients_count").text(recipientsCount);
-      }).always(function() {
-        $modal.addClass("hide");
+
+      tomSelect.on("change", () => {
+        const selectedOptions = tomSelect.getValue();
+
+        if (selectedOptions.includes("all") && selectedOptions.length > 1) {
+          tomSelect.setValue(["all"]);
+        }
       });
-    })
+    });
+  };
+
+  if (isOnSelectRecipientsPage) {
+    attachEventListeners();
+    initializeTomSelect();
+    updateFormState();
+    updateDeliverButtonVisibility();
   }
 });

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

@@ -1,10 +1,7 @@
 $(() => {
-  const $limitedTimeLabel = $("label[for='component_settings_proposal_edit_time_limited']")
-  const $limitedTimeRadioButton = $("#component_settings_proposal_edit_time_limited")
-  const $infiniteTimeRadioButton = $("#component_settings_proposal_edit_time_infinite")
-  const $editTimeContainer = $(".proposal_edit_before_minutes_container")
-
-  $editTimeContainer.detach().appendTo($limitedTimeLabel)
+  const $limitedTimeRadioButton = $("#component_settings_proposal_edit_time_limited");
+  const $infiniteTimeRadioButton = $("#component_settings_proposal_edit_time_infinite");
+  const $editTimeContainer = $(".edit_time_container");
 
   if ($infiniteTimeRadioButton.is(":checked")) {
     $editTimeContainer.hide();

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

@@ -1,19 +1,31 @@
-import createSortList from "src/decidim/admin/sort_list.component"
+import sortable from "html5sortable/dist/html5sortable.es";
 
-// Once in DOM
-$(() => {
-  const selector = ".js-sortable"
-  const $sortable = $(selector)
+/*
+  Initializes any element with the class js-sortable as a sortable list
+  User html5Sortable, with options available as data-draggable-options (see https://github.com/lukasoppermann/html5sortable)
 
-  $sortable.each((index, elem) => {
-    const item = (elem.id)
-      ? `#${elem.id}`
-      : selector
+  Event are dispatched on the element with the class js-sortable, so you can simply do:
 
-    createSortList(item, {
-      handle: "li",
-      forcePlaceholderSize: true,
-      placeholderClass: "sort-placeholder"
-    })
-  })
-})
+  document.querySelector('.js-sortable').addEventListener('sortupdate', (event) => {
+    console.log('The new order is:', event.target.children);
+  });
+*/
+window.addEventListener("DOMContentLoaded", () => {
+  const draggables = document.querySelectorAll(".js-sortable");
+
+  if (draggables) {
+    draggables.forEach((draggable) => {
+      let options = {
+        "forcePlaceholderSize": true
+      };
+      ["items", "acceptFrom", "handle", "placeholderClass", "placeholder", "hoverClass"].forEach((option) => {
+        let dataOption = `draggable${option.charAt(0).toUpperCase() + option.slice(1)}`;
+        if (draggable.dataset[dataOption]) {
+          options[option] = draggable.dataset[dataOption];
+        }
+      });
+      // console.log("initialize sortable with options", options);
+      sortable(draggable, options);
+    });
+  }
+});

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

@@ -0,0 +1,93 @@
+/* eslint-disable no-use-before-define */
+document.addEventListener("decidim:loaded", () => {
+  document.querySelectorAll(".js-taxonomy-filters-container").forEach((settingsContainer) => {
+    const drawer = window.Decidim.currentDialogs[settingsContainer.dataset.drawer];
+    const container = drawer.dialog.querySelector(".js-taxonomy-filters-drawer-container");
+    const addButton = settingsContainer.querySelector(".js-add-taxonomy-filter");
+
+    // Handles the click on edit button for each taxonomy filter in the component settings table
+    const activateSettingsActions = () => {
+      const edits = settingsContainer.querySelectorAll(".js-edit-taxonomy-filter");
+      edits.forEach((edit) => {
+        edit.addEventListener("click", (event) => {
+          event.preventDefault();
+          drawer.open();
+          fetchUrl(edit.href);
+        });
+      });
+    };
+
+    // Handles the change on the taxonomy and filter selects in the drawer
+    const activateDrawerActions = () => {
+      const taxonomySelector = container.querySelector(".js-drawer-taxonomy-select select");
+      const filterSelector = container.querySelector(".js-drawer-filter-select select");
+      const selectForm = drawer.dialog.querySelector("#select-taxonomy-filter-form");
+      const saveForm = drawer.dialog.querySelector("#save-taxonomy-filter-form");
+      const save = drawer.dialog.querySelector("#save-taxonomy-filter");
+      const remove = drawer.dialog.querySelector("#remove-taxonomy-filter");
+      const currentFilters = settingsContainer.querySelector(".js-current-filters");
+
+      if (selectForm) {
+        selectForm.addEventListener("ajax:success", (event) => {
+          container.innerHTML = event.detail[2].responseText;
+          activateDrawerActions();
+        });
+      }
+
+      if (remove) {
+        remove.addEventListener("ajax:success", (event) => {
+          currentFilters.innerHTML = event.detail[2].responseText;
+          activateSettingsActions();
+          drawer.close();
+        });
+      }
+
+      if (taxonomySelector) {
+        taxonomySelector.addEventListener("change", () => {
+          Rails.fire(selectForm, "submit");
+        });
+      }
+
+      if (filterSelector) {
+        filterSelector.addEventListener("change", () => {
+          Rails.fire(selectForm, "submit");
+        });
+      }
+
+      if (saveForm) {
+        saveForm.addEventListener("ajax:success", (event) => {
+          currentFilters.innerHTML = event.detail[2].responseText;
+          activateSettingsActions();
+          drawer.close();
+        });
+
+        if (save) {
+          save.addEventListener("click", (event) => {
+            event.preventDefault();
+            Rails.fire(saveForm, "submit");
+          });
+        }
+      }
+    };
+
+    const fetchUrl = (url) => {
+      container.classList.add("spinner-container");
+      fetch(url).then((response) => response.text()).then((html) => {
+        container.innerHTML = html;
+        container.classList.remove("spinner-container");
+        activateDrawerActions();
+      });
+    };
+
+    // Activate the rendered edit buttons
+    activateSettingsActions();
+
+    // Opens the drawer with the form to add a new taxonomy filter
+    addButton.addEventListener("click", (event) => {
+      event.preventDefault();
+      const url = addButton.dataset.url;
+      fetchUrl(url);
+      drawer.open();
+    });
+  });
+});

data/app/packs/stylesheets/decidim/admin/_component-show.scss

@@ -62,13 +62,74 @@
   }
 
   &_notes {
-    &-grid {
-      @apply grid grid-cols-2 gap-4 my-4;
+    .comment,
+    .comment-reply {
+      @apply mt-4 p-4 rounded w-full border border-gray-3 space-y-2;
 
-      .comment {
-        @apply p-4 rounded;
+      background-color: rgba(255, 252, 238, 1);
+    }
+
+    .comment-reply {
+      @apply bg-white;
+    }
+
+    .comment__content {
+      @apply space-y-4;
+
+      a {
+        @apply text-secondary;
+      }
+    }
+
+    .comment-actions {
+      @apply flex items-center gap-4;
+
+      .button[aria-expanded="false"] {
+        svg:first-of-type {
+          @apply block;
+        }
+
+        svg:last-of-type {
+          @apply hidden;
+        }
+
+        span:first-of-type {
+          @apply block;
+        }
+
+        span:last-of-type {
+          @apply hidden;
+        }
+      }
+
+      .button[aria-expanded="true"] {
+        svg:first-of-type {
+          @apply hidden;
+        }
+
+        svg:last-of-type {
+          @apply block;
+        }
+
+        span:first-of-type {
+          @apply hidden;
+        }
+
+        span:last-of-type {
+          @apply block;
+        }
+      }
+    }
+
+    .form__wrapper {
+      @apply pb-4;
+
+      label {
+        @apply text-gray-2 text-sm;
+      }
 
-        background-color: rgba(255, 252, 238, 1);
+      textarea {
+        @apply mt-2;
       }
     }
   }