decidim-decidim_awesome 0.10.2 → 0.11.2

data/app/packs/src/decidim/decidim_awesome/admin/constraint_form_events.js

@@ -0,0 +1,115 @@
+/* eslint no-use-before-define: "off" */
+
+// This script manually handles the "edit" button from the constraints editor by loading the content into the modal after the modal (operated by Dialog) is opened.
+// We don't use the RemoteModal class because it chaches the modal content and the "fetch" operation does not specify the "no-cache" headers.
+
+const fetchConstraints = (url, callback = () => {}) => {
+  fetch(url, { cache: "no-cache" }).
+    then((res) => {
+      if (!res.ok) {
+        throw res;
+      }
+      return res.text();
+    }).
+    then((text) => {
+      callback(text);
+    }).
+    catch((err) => {
+      console.error("dialog open failed", err);
+    });
+};
+
+const renderModal = (element, html) => {
+  element.innerHTML = html;
+  bindModalEvents(element)
+};
+
+const constraintChange = (modalId, data) => {
+  const modal = window.Decidim.currentDialogs[modalId];
+  const constraintsUrl = modal.openingTrigger.dataset.constraintsUrl;
+
+  // Prepare parameters to request the modal content again, but updated based on the user selections
+  const vars = data.map((setting) => `${setting.key}=${setting.value}`);
+  const url = `${constraintsUrl}&${vars.join("&")}`;
+
+  fetchConstraints(url, (res) => renderModal(modal.dialog, res));
+};
+
+const bindModalEvents = (detail) => {
+  const div = detail.querySelector("[id^=constraint-form]");
+  const spaceManifest = div.getElementsByTagName("select")[0];
+  const spaceSlug = div.getElementsByTagName("select")[1];
+  const componentManifest = div.getElementsByTagName("select")[2];
+  const componentId = div.getElementsByTagName("select")[3];
+
+  spaceManifest.addEventListener("change", (event) => {
+    constraintChange(detail.id, [{
+      key: "participatory_space_manifest",
+      value: event.target.value
+    }])
+  });
+
+  spaceSlug.addEventListener("change", (event) => {
+    constraintChange(detail.id, [{
+      key: "participatory_space_manifest",
+      value: spaceManifest.value
+    }, {
+      key: "participatory_space_slug",
+      value: event.target.value
+    }])
+  });
+
+  // Component manfiest and component id are mutually exclusive
+  componentManifest.addEventListener("change", (event) => {
+    if (event.target.value) {
+      componentId.value = "";
+    }
+  });
+
+  componentId.addEventListener("change", (event) => {
+    if (event.target.value) {
+      componentManifest.value = "";
+    }
+  });
+};
+
+
+const initializeDialog = (dialog) => {
+  dialog.addEventListener("open.dialog", async (el) => {
+    const currentDialog = window.Decidim.currentDialogs[el.target.id];
+    const button = currentDialog && currentDialog.openingTrigger;
+    const url = button.dataset.constraintsUrl;
+    // console.log("open.dialog", el, url, "currentDialog",currentDialog);
+    fetchConstraints(url, (res) => renderModal(el.target, res));
+  });
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("[data-constraint][data-dialog]").forEach((dialog) => {
+    initializeDialog(dialog);
+  });
+});
+
+document.addEventListener("ajax:loaded:modals", (event) => {
+  event.detail.forEach((modal) => initializeDialog(modal));
+});
+
+// Rails AJAX events, this will update the parent page constrains
+document.body.addEventListener("ajax:error", (responseText) => {
+  // console.log("ajax:error", responseText)
+  const container = document.querySelector(`.constraints-editor[data-key="${responseText.detail[0].key}"]`);
+  const callout = container.querySelector(".flash");
+  callout.hidden = false;
+  callout.classList.add("alert");
+  callout.getElementsByTagName("p")[0].innerHTML = `${responseText.detail[0].message}: <strong>${responseText.detail[0].error}</strong>`;
+});
+
+document.body.addEventListener("ajax:success", (responseText) => {
+  // console.log("ajax:success", responseText)
+  let container = document.querySelector(`.constraints-editor[data-key="${responseText.detail[0].key}"]`);
+  const callout = container.querySelector(".flash");
+  callout.hidden = false;
+  callout.classList.add("success");
+  callout.getElementsByTagName("p")[0].innerHTML = responseText.detail[0].message;
+  container.outerHTML = responseText.detail[0].html;
+});

data/app/packs/src/decidim/decidim_awesome/admin/custom_fields_builder.js

@@ -1,21 +1,26 @@
-require("formBuilder/dist/form-builder.min.js")
+import "formBuilder/dist/form-builder.min.js";
 import "src/decidim/decidim_awesome/forms/rich_text_plugin"
+// formBuilder uses jquery-ui-sortable which is a very dirty npm package with no neat source code available, and causes problems with the webpacker configuration of Decidim.
+// For the moment, we'll remove the sortable functionality with a dummy jQuery plugin until we find another sortable plugin (or keep it disabled for good)
+jQuery.fn.sortable = () => {}
 
 window.CustomFieldsBuilders = window.CustomFieldsBuilders || [];
 
 $(() => {
   $(".awesome-edit-config .proposal_custom_fields_editor").each((_idx, el) => {
     const key = $(el).closest(".proposal_custom_fields_container").data("key");
+    const configVar = $(el).closest(".proposal_custom_fields_container").data("var");
     // DOCS: https://formbuilder.online/docs
     window.CustomFieldsBuilders.push({
       el: el,
       key: key,
+      var: configVar,
       config: {
         i18n: {
           locale: "en-US",
           location: "https://cdn.jsdelivr.net/npm/formbuilder-languages@1.1.0/"
         },
-        formData: $(`input[name="config[proposal_custom_fields][${key}]"]`).val(),
+        formData: $(`input[name="config[${configVar}][${key}]"]`).val(),
         disableFields: ["button", "file"],
         disabledActionButtons: ["save", "data", "clear"],
         disabledAttrs: [
@@ -37,7 +42,7 @@ $(() => {
         ],
         disabledSubtypes: {
           // default color as it generate hashtags in decidim (TODO: fix hashtag generator with this)
-          text: ["color"], 
+          text: ["color"],
           // disable default wysiwyg editors as they present problems
           textarea: ["tinymce", "quill"]
         }
@@ -71,8 +76,7 @@ $(() => {
 
   $("form.awesome-edit-config").on("submit", () => {
     window.CustomFieldsBuilders.forEach((builder) => {
-      $(`input[name="config[proposal_custom_fields][${builder.key}]"]`).val(builder.instance.actions.getData("json"));
+      $(`input[name="config[${builder.var}][${builder.key}]"]`).val(builder.instance.actions.getData("json"));
     });
   });
 });
-

data/app/packs/src/decidim/decidim_awesome/admin/form_exit_warn.js

@@ -1,21 +1,32 @@
-$(() => {
-  const $form = $("form.awesome-edit-config");
-  if ($form.length > 0) {
-    $form.find("input, textarea, select").on("change", () => {
-      $form.data("changed", true);
+document.addEventListener("DOMContentLoaded", () => {
+  const form = document.querySelector("form.awesome-edit-config");
+  if (form) {
+    form.querySelectorAll("input, textarea, select").forEach((el) => {
+      el.addEventListener("change", () => {
+        form.dataset.changed = true;
+      });
     });
 
-    const safePath = $form.data("safe-path").split("?")[0];
-    $(document).on("click", "a", (event) => {
-      window.exitUrl = event.currentTarget.href;
+    const safePath = form.dataset.safePath.split("?")[0];
+    document.querySelectorAll("a").forEach((el) => {
+      el.addEventListener("click", () => {
+        window.exitUrl = el.href;
+      });
     });
-    $(document).on("submit", "form", (event) => {
-      window.exitUrl = event.currentTarget.action;
+    document.querySelectorAll("form").forEach((el) => {
+      el.addEventListener("submit", () => {
+        window.exitUrl = el.action;
+      });
+    });
+    document.querySelectorAll('[type="submit"]').forEach((el) => {
+      el.addEventListener("click", () => {
+        window.exitUrl = el.form.action;
+      });
     });
 
     window.addEventListener("beforeunload", (event) => {
       const exitUrl = window.exitUrl;
-      const hasChanged = $form.data("changed");
+      const hasChanged = form.dataset.changed;
       window.exitUrl = null;
 
       if (!hasChanged || (exitUrl && exitUrl.includes(safePath))) {

data/app/packs/src/decidim/decidim_awesome/admin/proposal_sortings.js

@@ -1,13 +1,31 @@
-import "select2"
+/* eslint-disable no-new */
 
-$(() => {
-  const $select = $("#config_additional_proposal_sortings");
-  $select.select2({
-    theme: "foundation"
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const selectContainer = document.getElementById("config_additional_proposal_sortings");
+
+  if (!selectContainer) {
+    return;
+  }
+
+  new TomSelect(selectContainer, {
+    plugins: ["remove_button", "dropdown_input"],
+    create: false,
+    render: {
+      option: function (data, escape) {
+        return `<div>${escape(data.text)}</div>`;
+      },
+      item: function (data, escape) {
+        return Boolean(data.is_admin) || data.isAdmin === "true"
+          ? `<div class="is-admin">${escape(data.text)}</div>`
+          : `<div>${escape(data.text)}</div>`;
+      }
+    }
   });
-  $("#additional_proposal_sortings-enable-all").on("click", (evt) => {
+  
+  document.getElementById("additional_proposal_sortings-enable-all").addEventListener("click", (evt) => {
     evt.preventDefault();
-    $select.find("option").prop("selected", true);
-    $select.trigger("change");
+    selectContainer.tomselect.setValue(Array.from(document.getElementById("config_additional_proposal_sortings").children).map((el) => el.value))
   });
 });

data/app/packs/src/decidim/decidim_awesome/admin/tabs_change.js

@@ -0,0 +1,31 @@
+/**
+ * When switching tabs in i18n fields, autofocus on the markdown if exists
+ */
+$(() => {
+  const reloadCustomFields = ($input) => {
+    // saves current data to the hidden field for the lang
+    window.DecidimAwesome.CustomFieldsRenderer.storeData();
+    // init the current language
+    window.DecidimAwesome.CustomFieldsRenderer.init($input);
+  };
+
+  // Event launched by foundation using jQuery (still used in the admin in v0.28, probably removed in the future)
+  $("[data-tabs]").on("change.zf.tabs", (event) => {
+    const $container = $(event.target).closest(".label--tabs").next(".tabs-content").find(".tabs-panel.is-active");
+    // fix custom fields if present
+    const $input = $container.find(".proposal_custom_field:first");
+    if ($input.length > 0) {
+      reloadCustomFields($input);
+    }
+  });
+
+  // if more than 3 languages, a select is used
+  $("#proposal-body-tabs").on("change", (event) => {
+    const $container = $($(event.target).val());
+    // fix custom fields if present
+    const $input = $container.find(".proposal_custom_field:first");
+    if ($input.length > 0) {
+      reloadCustomFields($input);
+    }
+  });
+});

data/app/packs/src/decidim/decidim_awesome/admin/user_picker.js

@@ -1,25 +1,38 @@
-/* eslint-disable no-invalid-this */
-import "select2"
-import "stylesheets/decidim/decidim_awesome/admin/user_picker.scss"
+import TomSelect from "tom-select/dist/cjs/tom-select.popular";
 
-$(() => {
-  $("select.multiusers-select").each(function() {
-    const url = $(this).attr("data-url");
-    $(this).select2({
-      ajax: {
-        url: url,
-        delay: 100,
-        dataType: "json",
-        processResults: (data) => {
-          return {
-            results: data
-          }
-        }
+document.addEventListener("DOMContentLoaded", () => {
+  const tagContainers = document.querySelectorAll(".multiusers-select");
+  const config = (element) => ({
+    plugins: ["remove_button", "dropdown_input"],
+    create: false,
+    render: {
+      option: function (data, escape) {
+        return `<div>${escape(data.text)}</div>`;
       },
-      escapeMarkup: (markup) => markup,
-      templateSelection: (item) => `${item.text}`,
-      minimumInputLength: 1,
-      theme: "foundation"
-    });
+      item: function (data, escape) {
+        return Boolean(data.is_admin) || data.isAdmin === "true"
+          ? `<div class="is-admin">${escape(data.text)}</div>`
+          : `<div>${escape(data.text)}</div>`;
+      }
+    },
+    shouldLoad: function (query) {
+      return query.length > 1;
+    },
+    load: function (query, callback) {
+      const { url } = element.dataset;
+      const join = url.includes("?")
+        ? "&"
+        : "?";
+      const params = new URLSearchParams({
+        term: query
+      });
+
+      fetch(`${url}${join}${params}`).
+        then((response) => response.json()).
+        then((json) => callback(json)).
+        catch(() => callback());
+    }
   });
+
+  tagContainers.forEach((container) => new TomSelect(container, config(container)));
 });

data/app/packs/src/decidim/decidim_awesome/amendments/show_modal_on_limits.js

@@ -0,0 +1,28 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const modalId = "LimitAmendmentsModal";
+  const modalEl = document.getElementById(modalId);
+  const amendButton = document.getElementById("amend-button");
+  const limitAmendments = modalEl && JSON.parse(modalEl.dataset.limitAmendments);
+
+  if (!amendButton || !limitAmendments || document.querySelector('a[href^="/users/sign_in"]')) {
+    return;
+  }
+
+  modalEl.querySelectorAll("a").forEach((aEl) => {
+    aEl.addEventListener("click", () => {
+      window.Decidim.currentDialogs[modalId].close();
+    });
+  });
+
+  /**
+   * Determines if the modal should be displayed based on its current state and data attributes.
+   */
+  amendButton.addEventListener("click", (event) => {
+    const modal = window.Decidim.currentDialogs[modalId];
+    if (modal) {
+      event.preventDefault();
+      event.stopPropagation();
+      modal.open();
+    }
+  });
+});

data/app/packs/src/decidim/decidim_awesome/awesome_admin.js

@@ -1,24 +1,13 @@
-// Webpack seems to "forgget" about certain libraries already being loaded 
-// if javascript_pack_tag is called two times, let's include the whole Decidim admin here instead
-import "entrypoints/decidim_admin"
 // Custom scripts for awesome
-import "src/decidim/decidim_awesome/admin/constraints"
+import "src/decidim/decidim_awesome/admin/constraint_form_events"
 import "src/decidim/decidim_awesome/admin/auto_edit"
 import "src/decidim/decidim_awesome/admin/user_picker"
 import "src/decidim/decidim_awesome/admin/proposal_sortings"
-import "src/decidim/decidim_awesome/editors/tabs_focus"
 import "src/decidim/decidim_awesome/admin/codemirror"
 import "src/decidim/decidim_awesome/admin/check_redirections"
+import "src/decidim/decidim_awesome/admin/form_exit_warn"
 
-import {destroyQuillEditor, createQuillEditor, createMarkdownEditor} from "src/decidim/decidim_awesome/editors/editor"
+import "src/decidim/decidim_awesome/proposals/custom_fields"
+import "src/decidim/decidim_awesome/admin/custom_fields_builder"
 
-$(() => {
-  $(".editor-container").each((_idx, container) => {
-    destroyQuillEditor(container);
-    if (window.DecidimAwesome.use_markdown_editor) {
-      createMarkdownEditor(container);
-    } else {
-      createQuillEditor(container);
-    }
-  });
-});
+window.DecidimAwesome = window.DecidimAwesome || {};

data/app/packs/src/decidim/decidim_awesome/awesome_admin_global.js

@@ -0,0 +1 @@
+import "src/decidim/decidim_awesome/admin/tabs_change"

data/app/packs/src/decidim/decidim_awesome/awesome_application.js

@@ -1,18 +1,4 @@
 import "src/decidim/decidim_awesome/proposals/images"
 import "src/decidim/decidim_awesome/forms/autosave"
 import "src/decidim/decidim_awesome/voting/voting_cards"
-import {destroyQuillEditor, createQuillEditor, createMarkdownEditor} from "src/decidim/decidim_awesome/editors/editor"
-
-$(() => {
-  // rebuild editors
-  if (window.DecidimAwesome.allow_images_in_full_editor || window.DecidimAwesome.allow_images_in_small_editor || window.DecidimAwesome.use_markdown_editor) {
-    $(".editor-container").each((_idx, container) => {
-      destroyQuillEditor(container);
-      if (window.DecidimAwesome.use_markdown_editor) {
-        createMarkdownEditor(container);
-      } else {
-        createQuillEditor(container);
-      }
-    });
-  }
-});
+import "src/decidim/decidim_awesome/amendments/show_modal_on_limits"

data/app/packs/src/decidim/decidim_awesome/awesome_map/api/fetcher.js

@@ -30,7 +30,7 @@ export default class Fetcher {
     api.fetchAll((result) => {
       if (result) {
         const collection = result.component[this.collection];
-        // console.log("collection",collection)
+        // console.log("collection", collection)
         
         collection.edges.forEach((element) => {
           let node = element.node;
@@ -56,14 +56,15 @@ export default class Fetcher {
   }
 
   decorateNode(node) {
-    const body = this.findTranslation(node.body.translations);
+    const body = this.findTranslation(node.body.translations)
     const title = this.findTranslation(node.title.translations);
     node.hashtags = this.collectHashtags(title);
     node.hashtags = node.hashtags.concat(this.collectHashtags(body));
     // hashtags in the title look ugly, lets replace the gid:... structure with the tag #name
     node.title.translation = this.replaceHashtags(title, node.hashtags);
-    node.body.translation = this.appendHtmlHashtags(this.truncate(this.removeHashtags(body)).replace(/\n/g, "<br>"), node.hashtags);
-    node.link = `${this.controller.component.url}/${this.collection}/${node.id}`;
+    node.body.translation = this.appendHtmlHashtags(this.truncate(this.removeHashtags(body)), node.hashtags);
+    // console.log("decorateNode", node.title.translation, "BODY", body, "translation", node.body.translation, node.hashtags)
+    node.link = `${this.controller.component.url}/${node.id}`;
   }
 
   findTranslation(translations) {
@@ -83,7 +84,7 @@ export default class Fetcher {
   collectHashtags(text) {
     let tags = [];
     if (text) {
-      const gids = text.match(/gid:\/\/[^\s<&]+/g)
+      const gids = text.match(/gid:\/\/[^\s<&,;]+/g)
       if (gids) {
         tags = gids.filter((gid) => gid.indexOf("/Decidim::Hashtag/") !== -1).map((gid) => {
           const parts = gid.split("/");
@@ -117,18 +118,39 @@ export default class Fetcher {
   }
 
   removeHashtags(text) {
-    return text.replace(/gid:\/\/[^\s<&]+/g, "");
+    return text.replace(/gid:\/\/[^\s<&,;]+/g, "");
   }
 
   appendHtmlHashtags(txt, tags) {
-    let text = txt;
-    tags.forEach((tag) => {
-      text += ` ${tag.html}`;
-    });
-    return text;
+    let string = tags.reduce((accumulator, tag) => (accumulator
+      ? `${accumulator} ${tag.html}`
+      : tag.html), "");
+    if (string) {
+      return `${txt}<p>${string}</p>`;
+    } 
+    return txt;
+    
   }
 
   truncate(html) {
     return $.truncate(html, this.config);
   }
+
+  formatDateRange(startDate, endDate) {
+    // Check if either startDate or endDate is blank
+    if (!startDate || !endDate) {
+      return "";
+    }
+
+    // Convert startDate and endDate to JavaScript Date objects
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+
+    const date = Intl.DateTimeFormat(window.DecidimAwesome.currentLocale, { // eslint-disable-line new-cap
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+    return date.formatRange(start, end);
+  }
 }

data/app/packs/src/decidim/decidim_awesome/awesome_map/api/meetings_fetcher.js

@@ -29,23 +29,13 @@ export default class MeetingsFetcher extends Fetcher {
                   }
                 }
                 startTime
-                location {
-                  translations {
-                    text
-                    locale
-                  }
-                }
+                endTime
                 address
-                locationHints {
-                  translations {
-                    text
-                    locale
-                  }
-                }
                 coordinates {
                   latitude
                   longitude
                 }
+                typeOfMeeting
                 category {
                   id
                 }
@@ -56,4 +46,11 @@ export default class MeetingsFetcher extends Fetcher {
       }
     }`;
   }
+
+  decorateNode(node) {
+    super.decorateNode(node);
+    node.icon = window.AwesomeMapMeetingTypes[node.typeOfMeeting];
+    node.meetingType = window.AwesomeMapMeetingTexts[node.typeOfMeeting];
+    node.dateRange = this.formatDateRange(node.startTime, node.endTime);
+  }
 }

data/app/packs/src/decidim/decidim_awesome/awesome_map/api/proposals_fetcher.js

@@ -23,12 +23,18 @@ export default class ProposalsFetcher extends Fetcher {
                       locale
                     }
                   }
+                  author {
+                    id
+                    name
+                  }
                   body {
                     translations {
                       text
                       locale
                     }
                   }
+                  totalCommentsCount
+                  endorsementsCount
                   address
                   coordinates {
                     latitude
@@ -49,4 +55,26 @@ export default class ProposalsFetcher extends Fetcher {
         }
       }`;
   }
+
+  decorateNode(node) {
+    super.decorateNode(node);
+    node.authorName = node.author && node.author.name || window.DecidimAwesome.texts.officialAuthor;
+    node.humanState = window.AwesomeMapProposalTexts[node.state];
+    switch (node.state) {
+    case "accepted":
+      node.stateClass = "success";
+      break;
+    case "rejected":
+    case "withdrawn":
+      node.stateClass = "alert";
+      break;
+    case "evaluating":
+      node.stateClass = "warning";
+      break;
+    default:
+      node.stateClass = "muted";
+    }
+
+    node.isAmendment = () => (Boolean(this.controller.amendments[node.id]));
+  }
 }

data/app/packs/src/decidim/decidim_awesome/awesome_map/awesome_map.js

@@ -1,11 +1,10 @@
 import * as L from "leaflet";
 // comes with Decidim
-import "src/decidim/map/icon.js" 
 import "src/decidim/vendor/leaflet-tilelayer-here"
 // Comes with Decidim
-import "leaflet.markercluster"; 
+import "leaflet.markercluster";
 // included in this package.json
-import "leaflet.featuregroup.subgroup" 
+import "leaflet.featuregroup.subgroup"
 import "src/vendor/jquery.truncate"
 import "jsrender"
 
@@ -64,7 +63,7 @@ export default class AwesomeMap {
           this.autoResize();
 
           if (this.loading.length === 0) {
-            this.controls.$loading.hide();
+            this.controls.loading.style.display = "none";
             // call trigger as all loads are finished
             this.onFinished();
           }