decidim-admin 0.29.2 → 0.30.0.rc2

data/app/helpers/decidim/admin/settings_helper.rb

@@ -5,8 +5,6 @@ module Decidim
     # This class contains helpers needed in order for component settings to
     # properly render.
     module SettingsHelper
-      include Decidim::ScopesHelper
-
       TYPES = {
         boolean: :check_box,
         integer: :number_field,
@@ -14,9 +12,10 @@ module Decidim
         float: :number_field,
         text: :text_area,
         select: :select_field,
-        scope: :scope_field,
         enum: :collection_radio_buttons,
-        time: :datetime_field
+        time: :datetime_field,
+        integer_with_units: :integer_with_units,
+        taxonomy_filters: :taxonomy_filters
       }.freeze
 
       # Renders a form field that matches a settings attribute's type.
@@ -52,20 +51,39 @@ module Decidim
           if attribute.translated?
             options[:tabs_id] = "#{options.delete(:tabs_prefix)}-#{name}-tabs"
             form.send(:translated, form_method, name, options)
-          elsif form_method == :collection_radio_buttons
-            render_enum_form_field(form, attribute, name, i18n_scope, options)
-          elsif form_method == :select_field
-            render_select_form_field(form, attribute, name, i18n_scope, options)
-          elsif form_method == :scope_field
-            scopes_select_field(form, name)
           else
-            form.send(form_method, name, options)
+            render_field_form_method(form_method, form, attribute, name, i18n_scope, options)
           end
         end.html_safe
       end
 
       private
 
+      # rubocop:disable Metrics/ParameterLists
+      def render_field_form_method(form_method, form, attribute, name, i18n_scope, options)
+        case form_method
+        when :collection_radio_buttons
+          render_enum_form_field(form, attribute, name, i18n_scope, options)
+        when :select_field
+          render_select_form_field(form, attribute, name, i18n_scope, options)
+        when :integer_with_units
+          integer_with_units(form, attribute, name, i18n_scope, options)
+        when :taxonomy_filters
+          if TaxonomyFilter.for(current_organization).blank?
+            label_tag(name, t(name, scope: i18n_scope)) +
+              content_tag(:p) do
+                content_tag(:span, t("no_taxonomy_filters_found", scope: i18n_scope), class: "text-gray mr-2") +
+                  link_to(t("define_taxonomy_filters", scope: i18n_scope), decidim_admin.taxonomies_path, class: "button button__text-secondary")
+              end.html_safe
+          else
+            taxonomy_filters(form, name, i18n_scope)
+          end
+        else
+          form.send(form_method, name, options)
+        end
+      end
+      # rubocop:enable Metrics/ParameterLists
+
       # Renders a select field collection input for the given attribute
       #
       # @param form (see #settings_attribute_input)
@@ -165,6 +183,62 @@ module Decidim
           [t("#{name}_choices.#{choice}", scope: i18n_scope), choice]
         end
       end
+
+      # Renders a form field that includes an integer input and a select dropdown for units.
+      #
+      # @param form (see #settings_attribute_input)
+      # @param attribute [Decidim::SettingsManifest::Attribute] The attribute to be rendered
+      # @param name (see #settings_attribute_input)
+      # @param i18n_scope (see #settings_attribute_input)
+      # @param options (see #settings_attribute_input)
+      # @option options [String] :label The label text for the field
+      # @return [ActiveSupport::SafeBuffer] Rendered form field
+      def integer_with_units(form, attribute, name, i18n_scope, options)
+        value = form.object.send(name)
+
+        number_value = value[0].to_i
+        unit_value = value[1].to_s
+
+        number_field_html = form.number_field(name, options.merge(label: false,
+                                                                  value: number_value,
+                                                                  name: "#{form.field_name(name)}[0]",
+                                                                  style: "flex: 0 0 25%;"))
+        select_field_html = form.select(name,
+                                        attribute.build_units.map { |unit| [t("#{name}_units.#{unit}", scope: i18n_scope), unit] },
+                                        { label: false, value: unit_value },
+                                        { name: "#{form.field_name(name)}[1]", style: "flex: 1 1 75%;" })
+
+        content_tag(:label, options[:label]) + content_tag(:div, number_field_html + select_field_html, class: "flex space-x-2 items-center")
+      end
+
+      # Renders a form field that includes a taxonomy filters input hidden for each taxonomy filter
+      # and a button to open a drawer with all the available taxonomy filters with actions to manage them.
+      #
+      # @param name (see #settings_attribute_input)
+      # @param i18n_scope (see #settings_attribute_input)
+      def taxonomy_filters(form, name, i18n_scope)
+        current_filters = content_tag(:div, class: "js-current-filters") do
+          render partial: "decidim/admin/taxonomy_filters_selector/component_table",
+                 locals: { field_name: "#{form.object_name}[#{name}][]", component: @component }
+        end
+        add_button = content_tag(:div, class: "mt-2") do
+          content_tag(:button,
+                      t("#{name}_add", scope: i18n_scope),
+                      class: "button button__xs button__transparent-secondary js-add-taxonomy-filter",
+                      data: {
+                        url: decidim_admin.taxonomy_filters_selector_index_path(component_id: @component.id)
+                      })
+        end
+        container = content_tag(:div, class: "js-taxonomy-filters-container", data: { drawer: "#{name}-dialog" }) do
+          current_filters + add_button
+        end
+
+        drawer = decidim_drawer id: "#{name}-dialog" do
+          render partial: "decidim/admin/components/taxonomy_filters_drawer"
+        end
+
+        label_tag(name, t(name, scope: i18n_scope)) + container + drawer
+      end
     end
   end
 end

data/app/jobs/decidim/admin/newsletter_job.rb

@@ -33,10 +33,12 @@ module Decidim
       def extended_data
         {
           send_to_all_users: @form["send_to_all_users"],
+          send_to_verified_users: @form["send_to_verified_users"],
           send_to_followers: @form["send_to_followers"],
           send_to_participants: @form["send_to_participants"],
+          send_to_private_members: @form["send_to_private_members"],
           participatory_space_types: @form["participatory_space_types"],
-          scope_ids: @form["scope_ids"]
+          verification_types: @form["verification_types"]
         }
       end
 

data/app/packs/entrypoints/decidim_admin.js

@@ -10,8 +10,11 @@ import "src/decidim/admin/newsletters"
 import "src/decidim/admin/form"
 import "src/decidim/admin/external_domain_allowlist"
 import "src/decidim/admin/draggable-list"
+import "src/decidim/admin/draggable-table"
 import "src/decidim/admin/sortable"
+import "src/decidim/admin/managed_moderated_users"
 import "src/decidim/admin/moderations"
+import "src/decidim/admin/global_moderations"
 import "src/decidim/admin/officializations"
 import "src/decidim/slug_form"
 import "src/decidim/admin/admin_autocomplete"
@@ -20,6 +23,7 @@ import "src/decidim/admin/participatory_space_search"
 import "src/decidim/admin/css_preview"
 import "src/decidim/admin/sync_radio_buttons"
 import "src/decidim/admin/text_copy"
+import "src/decidim/admin/taxonomy_filters"
 
 // CSS
 import "entrypoints/decidim_admin.scss";

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

@@ -7,6 +7,8 @@ import Configuration from "src/decidim/configuration";
 import InputCharacterCounter from "src/decidim/input_character_counter";
 import managedUsersForm from "src/decidim/admin/managed_users";
 
+import "chartkick/chart.js";
+
 window.Decidim = window.Decidim || {};
 window.Decidim.managedUsersForm = managedUsersForm;
 window.Decidim.config = new Configuration();

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

@@ -0,0 +1,33 @@
+import createSortList from "src/decidim/admin/sort_list.component"
+
+/**
+ * Draggable table
+ *
+ * This script is used to make a table draggable.
+ * 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.
+ */
+$(() => {
+  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);
+
+      $.ajax({
+        method: "PUT",
+        url: sortUrl,
+        contentType: "application/json",
+        data: JSON.stringify({ order_ids: order }) // eslint-disable-line camelcase
+      });
+    }
+  });
+})

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

@@ -1,4 +1,3 @@
-import "src/decidim/admin/scope_picker_enabler.component"
 import "src/decidim/admin/proposal_infinite_edit"
 
 import BudgetRuleTogglerComponent from "src/decidim/admin/budget_rule_toggler.component"

data/app/packs/src/decidim/admin/global_moderations.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 selectedModerationsCount = () => {
+    return document.querySelectorAll(".table-list .js-check-all-moderations:checked").length;
+  };
+
+  const selectedModerationsCountUpdate = () => {
+    const selectedModerations = selectedModerationsCount();
+
+    const countElement = document.getElementById("js-selected-moderations-count");
+    const hideActions = document.getElementById("js-hide-global-moderations-actions");
+    const unhideActions = document.getElementById("js-unhide-global-moderations-actions");
+    const unreportActions = document.getElementById("js-unreport-global-moderations-actions");
+
+    if (selectedModerations === 0) {
+      countElement.textContent = "";
+      hideActions.classList.add("hide");
+      unhideActions.classList.add("hide");
+      unreportActions.classList.add("hide");
+    } else {
+      countElement.textContent = selectedModerations;
+    }
+  };
+
+  const showBulkActionsButton = () => {
+    if (selectedModerationsCount() > 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 (selectedModerationsCount() === 0 || force === true) {
+      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.selectedModerationsCountUpdate = selectedModerationsCountUpdate;
+  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 = [
+          "hide-global-moderations",
+          "unreport-global-moderations",
+          "unhide-global-moderations"
+        ];
+
+        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-moderations");
+
+      checkboxes.forEach((checkbox) => {
+        checkbox.checked = isChecked;
+        const row = checkbox.closest("tr");
+        if (row) {
+          row.classList.toggle("selected", isChecked);
+        }
+      });
+
+      if (isChecked) {
+        showBulkActionsButton();
+      } else {
+        hideBulkActionsButton();
+      }
+
+      selectedModerationsCountUpdate();
+    });
+
+    // moderation checkbox change
+    document.querySelector(".table-list").addEventListener("change", (event) => {
+      if (!event.target.matches(".js-check-all-moderations")) {
+        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;
+      }
+
+      // check "select all" if all checkbox moderations are checked
+      const allCheckboxes = Array.from(document.querySelectorAll(".js-check-all-moderations")).filter((checkboxItem) => checkboxItem.offsetParent !== null);
+      const checkedCheckboxes = Array.from(document.querySelectorAll(".js-check-all-moderations: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-moderation-id-${moderationId}`).forEach((input) => {
+        input.checked = checked;
+      });
+      selectedModerationsCountUpdate();
+    });
+
+    document.querySelectorAll(".js-cancel-bulk-action").forEach((button) => {
+      button.addEventListener("click", () => {
+        hideBulkActionForms();
+        showBulkActionsButton();
+        showOtherActionsButtons();
+      });
+    });
+  }
+});

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();
+      });
+    });
+  }
+});