decidim-admin 0.29.2 → 0.30.0.rc2

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

@@ -1,91 +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(event) {
-      let formData = new FormData(event.target.closest("form"));
-      let url = $form.data("recipients-count-newsletter-path");
-      const $modal = $("#recipients_count_spinner");
-      $modal.removeClass("hide");
-
-      const xhr = new XMLHttpRequest();
-      xhr.open("POST", url, true);
-      xhr.onload = function() {
-        if (xhr.status === 200) {
-          $("#recipients_count").text(xhr.responseText);
+
+      tomSelect.on("change", () => {
+        const selectedOptions = tomSelect.getValue();
+
+        if (selectedOptions.includes("all") && selectedOptions.length > 1) {
+          tomSelect.setValue(["all"]);
         }
-        $modal.addClass("hide");
-      };
-      xhr.onerror = function() {
-        $modal.addClass("hide");
-      };
-      // Send the form data
-      xhr.send(formData);
-    })
+      });
+    });
+  };
+
+  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;
       }
     }
   }

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

@@ -388,6 +388,19 @@ li.opens-left > .is-dropdown-submenu {
   color: var(--secondary);
 }
 
+.dropdown-pane.dropdown-pane--buttons {
+  li {
+    padding: 0;
+  }
+
+  li button {
+    width: 100%;
+    height: 100%;
+    text-align: left;
+    padding: 1rem;
+  }
+}
+
 .dropdown-pane li:hover {
   color: #fff;
   background-color: var(--secondary);

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

@@ -0,0 +1,20 @@
+@import "tom-select/dist/scss/tom-select";
+
+/* overwrite tom-select defaults */
+.ts {
+  &-control {
+    @apply border-gray text-md min-h-[40px];
+
+    input {
+      @apply font-normal text-black text-md;
+    }
+  }
+
+  &-dropdown {
+    @apply text-md text-gray-2 font-normal;
+
+    .active {
+      @apply text-white bg-secondary;
+    }
+  }
+}

data/app/packs/stylesheets/decidim/admin/_table-list.scss

@@ -1,6 +1,10 @@
 .table-scroll {
   @apply overflow-x-auto;
 
+  &.half-vh {
+    @apply max-h-[50vh];
+  }
+
   table {
     border-collapse: unset;
 
@@ -108,6 +112,20 @@
   .icon-active {
     @apply bg-[#5dc560] inline-block w-3 h-3 align-middle mr-2 rounded-[50%];
   }
+
+  .draggable-table {
+    &.dragging {
+      @apply border-dashed border-y-2 border-gray;
+    }
+
+    .dragging-handle {
+      @apply cursor-ns-resize align-top p-3;
+
+      .dragger {
+        @apply text-2xl;
+      }
+    }
+  }
 }
 
 .table-list__actions {
@@ -153,3 +171,7 @@
     @apply inline-block;
   }
 }
+
+.table-list__title-ellipsis {
+  @apply whitespace-nowrap overflow-hidden text-ellipsis max-w-[200px] sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-2xl inline-block align-middle;
+}

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

@@ -0,0 +1,74 @@
+.spinner-container {
+  &::before {
+    @apply absolute -mt-2 -ml-4 top-1/2 left-1/2;
+  }
+}
+
+.draggable-taxonomy {
+  &.change-page {
+    @apply bg-gray-3 italic;
+  }
+
+  .dragger {
+    @apply text-2xl;
+  }
+
+  td {
+    @apply align-top cursor-ns-resize;
+
+    &.js-drag-handle .dragger {
+      @apply mt-1;
+    }
+  }
+}
+
+ul.taxonomy {
+  @apply flex;
+
+  li {
+    @apply flex-none text-center w-20 mt-2 mb-2;
+
+    &:first-child {
+      @apply flex-initial text-left flex-grow;
+    }
+
+    &:nth-child(2),
+    &:last-child {
+      @apply w-36;
+    }
+  }
+
+  .taxonomy-list__actions {
+    span {
+      @apply ml-1;
+    }
+
+    svg {
+      @apply inline-block fill-secondary w-5 h-5;
+    }
+
+    .action-space {
+      @apply w-5 h-5;
+    }
+  }
+}
+
+[data-dialog]#item-form {
+  @apply bottom-0 sm:top-[5.5rem] top-[8.55rem];
+
+  [data-dialog-container] > :last-child {
+    grid-column: span 1 / span 1;
+  }
+}
+
+#item-form-content {
+  @apply p-6 rounded-r-none py-0;
+
+  h1 {
+    @apply mt-6 mx-0;
+  }
+
+  .row {
+    @apply px-0;
+  }
+}

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

@@ -24,12 +24,14 @@
 @import "stylesheets/decidim/admin/_logs.scss";
 @import "stylesheets/decidim/admin/_filters.scss";
 @import "stylesheets/decidim/admin/_table-list.scss";
+@import "stylesheets/decidim/admin/_taxonomies.scss";
 @import "stylesheets/decidim/admin/_dropdown.scss";
 @import "stylesheets/decidim/admin/_item_show.scss";
 @import "stylesheets/decidim/admin/_item_edit.scss";
 @import "stylesheets/decidim/admin/_tabs.scss";
 @import "stylesheets/decidim/admin/_component-show.scss";
 @import "stylesheets/decidim/admin/_moderations.scss";
+@import "stylesheets/decidim/admin/_select_picker.scss";
 @import "stylesheets/decidim/admin/_show_email.scss";
 @import "stylesheets/decidim/admin/_bulk_actions.scss";
 @import "stylesheets/decidim/admin/_data_picker.scss";
@@ -38,3 +40,4 @@
 @import "stylesheets/decidim/admin/_datepicker.scss";
 @import "stylesheets/decidim/admin/_minimap.scss";
 @import "stylesheets/decidim/admin/_proposal_status.scss";
+@import "stylesheets/decidim/_tribute.scss";