decidim-decidim_awesome 0.10.3 → 0.11.1

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/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

@@ -1,30 +1,28 @@
-$(() => {
-  const $modal = $("#LimitAmendmentsModal");
-  if ($modal.length === 0 || $(".sign-out-link").length === 0) {
+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;
   }
 
-  const showModal = () => {
-    if ($modal.is(":visible")) {
-      return false;
-    }
-
-    if ($modal.data("limitAmendments")) {
-      return true;
-    }
-
-    return false;
-  };
-
-  $modal.find("a").on("click", () => {
-    $modal.foundation("close");
+  modalEl.querySelectorAll("a").forEach((aEl) => {
+    aEl.addEventListener("click", () => {
+      window.Decidim.currentDialogs[modalId].close();
+    });
   });
 
-  $(".card__amend-button").on("click", ".amend_button_card_cell", (evt) => {
-    if (showModal())  {
-      evt.preventDefault();
-      evt.stopPropagation();
-      $modal.foundation("open");
+  /**
+   * 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

@@ -2,18 +2,3 @@ import "src/decidim/decidim_awesome/proposals/images"
 import "src/decidim/decidim_awesome/forms/autosave"
 import "src/decidim/decidim_awesome/voting/voting_cards"
 import "src/decidim/decidim_awesome/amendments/show_modal_on_limits"
-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);
-      }
-    });
-  }
-});

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

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

@@ -14,8 +14,8 @@ export default class Controller {
   }
 
   getLabel() {
-    let text = this.awesomeMap.config.menu.mergeComponents || this.component.name;
-    if (!text) {
+    let text = this.component.name;
+    if (!text || this.awesomeMap.config.menu.mergeComponents) {
       text = window.DecidimAwesome.texts[this.component.type];
     }
     return `<span class="awesome_map-component" id="awesome_map-component_${this.component.id}" title="0" data-layer="${this.component.type}">${text}</span>`
@@ -96,6 +96,7 @@ export default class Controller {
 
       }).setLatLng(marker.getLatLng()).setContent(dom);
       this.awesomeMap.map.addLayer(pop);
+      // console.log("marker click", node, "pop", pop, "marker", marker, "dom", dom, "templateId", this.templateId)
     });
     node.marker = marker;
     node.component = this.component;
@@ -110,7 +111,7 @@ export default class Controller {
         this.awesomeMap.layers[cat.id].group.addLayer(marker);
         this.awesomeMap.controls.showCategory(cat);
       } catch (evt) {
-        console.error("Failed category marker assignation", marker, evt.message);
+        console.error("Failed category marker assignation. category:", category, "marker:", marker, evt.message);
       }
     }
   }
@@ -121,7 +122,7 @@ export default class Controller {
       try {
         this.awesomeMap.controls.addHashtagsControls(hashtags, marker);
       } catch (evt) {
-        console.error("Failed hashtags marker assignation", marker, evt.message);
+        console.error("Failed hashtags marker assignation. hashtags:", hashtags, "marker:", marker, evt.message);
       }
     }
   }
@@ -132,14 +133,13 @@ export default class Controller {
     this.onFinished();
   }
 
-  createIcon(Builder, color) {
-    return new Builder({
-      color: "#000000",
-      fillColor: color,
-      circleFillColor: color,
-      weight: 1,
-      stroke: color,
-      fillOpacity: 0.9
+  createIcon(color) {
+    const size = 36;
+    return L.divIcon({
+      html: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${size}px" height="${size}px" class="text-secondary" style="color: ${color}"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1 1 12.728 0zM12 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>`,
+      iconAnchor: [0.5 * size, size],
+      popupAnchor: [0, -0.5 * size]
     });
   }
 }

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

@@ -2,12 +2,6 @@ import * as L from "leaflet";
 import Controller from "src/decidim/decidim_awesome/awesome_map/controllers/controller";
 import MeetingsFetcher from "src/decidim/decidim_awesome/awesome_map/api/meetings_fetcher";
 
-const MeetingIcon = L.DivIcon.SVGIcon.DecidimIcon.extend({
-  _createPathDescription: function() {
-    return "M 15.991543,4 C 7.3956015,4 2.9250351,10.5 3.000951,16.999999 3.1063486,26.460968 12.747693,30.000004 15.991543,43 19.242091,30.000004 29,26.255134 29,16.999999 29,10.5 23.951131,4 15.996007,4 m -0.153508,2.6000001 a 2.1720294,2.1076698 0 0 1 2.330514,2.1124998 2.177008,2.1125006 0 0 1 -4.354016,0 2.1720294,2.1076698 0 0 1 2.023502,-2.1124998 m -2.651707,4.8056679 h 5.610202 l 3.935584,7.569899 -1.926038,0.934266 -2.009546,-3.859265 v 14.557403 h -2.484243 v -9.126003 h -0.642162 v 9.126003 H 13.190347 V 16.050568 l -2.009545,3.859265 -1.926036,-0.934266 3.935581,-7.569899";
-  }
-});
-
 export default class MeetingsController extends Controller {
   constructor(awesomeMap, component) {
     super(awesomeMap, component)
@@ -19,7 +13,7 @@ export default class MeetingsController extends Controller {
     // for each meeting, create a marker with an associated popup
     this.fetcher.onNode = (meeting) => {
       let marker = new L.Marker([meeting.coordinates.latitude, meeting.coordinates.longitude], {
-        icon: this.createIcon(MeetingIcon, this.awesomeMap.getCategory(meeting.category).color),
+        icon: this.createIcon(this.awesomeMap.getCategory(meeting.category).color),
         title: meeting.title.translation
       });
       // console.log("new meeting", meeting, marker)
@@ -28,4 +22,14 @@ export default class MeetingsController extends Controller {
 
     this.fetcher.fetch();
   }
+
+  createIcon(color) {
+    const size = 36;
+    return L.divIcon({
+      html: `
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" width="${size}px" height="${size}px" class="text-primary" style="color: ${color}"><path fill="none" d="M0 0h24v24H0z"/><path fill="currentColor" d="M 15.991543,4 C 7.3956015,4 2.9250351,10.5 3.000951,16.999999 3.1063486,26.460968 12.747693,30.000004 15.991543,43 19.242091,30.000004 29,26.255134 29,16.999999 29,10.5 23.951131,4 15.996007,4 m -0.153508,2.6000001 a 2.1720294,2.1076698 0 0 1 2.330514,2.1124998 2.177008,2.1125006 0 0 1 -4.354016,0 2.1720294,2.1076698 0 0 1 2.023502,-2.1124998 m -2.651707,4.8056679 h 5.610202 l 3.935584,7.569899 -1.926038,0.934266 -2.009546,-3.859265 v 14.557403 h -2.484243 v -9.126003 h -0.642162 v 9.126003 H 13.190347 V 16.050568 l -2.009545,3.859265 -1.926036,-0.934266 3.935581,-7.569899"/></svg>`,
+      iconAnchor: [0.5 * size, size],
+      popupAnchor: [0, -0.5 * size]
+    });
+  }
 }

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

@@ -2,14 +2,6 @@ import * as L from "leaflet";
 import Controller from "src/decidim/decidim_awesome/awesome_map/controllers/controller";
 import ProposalsFetcher from "src/decidim/decidim_awesome/awesome_map/api/proposals_fetcher";
 
-const ProposalIcon = L.DivIcon.SVGIcon.DecidimIcon.extend({
-  options: {
-    fillColor: "#ef604d",
-    fillOpacity: 0.8,
-    strokeWidth: 1,
-    strokeOpcacity: 1
-  }
-});
 export default class ProposalsController extends Controller {
   constructor(awesomeMap, component) {
     super(awesomeMap, component)
@@ -36,12 +28,13 @@ export default class ProposalsController extends Controller {
     // for each proposal, create a marker with an associated popup
     this.fetcher.onNode = (proposal) => {
       let marker = new L.Marker([proposal.coordinates.latitude, proposal.coordinates.longitude], {
-        icon: this.createIcon(ProposalIcon, this.awesomeMap.getCategory(proposal.category).color),
+        icon: this.createIcon(this.awesomeMap.getCategory(proposal.category).color),
         title: proposal.title.translation
       });
 
       // Check if it has amendments, add it to a list
       // also assign parent's proposal categories to it
+      // console.log("onNode proposal", proposal, "amendment:", proposal.amendments)
       if (proposal.amendments && proposal.amendments.length) {
         proposal.amendments.forEach((amendment) => {
           this.amendments[amendment.emendation.id] = proposal;
@@ -67,16 +60,16 @@ export default class ProposalsController extends Controller {
       // console.log("marker", marker, "parent proposal", parent)
       // add marker to amendments layers and remove it from proposals
       if (marker) {
-        try { 
-          marker.marker.removeFrom(this.controls.group) 
-        } catch (evt) { 
+        try {
+          marker.marker.removeFrom(this.controls.group)
+        } catch (evt) {
           console.error("error removeFrom marker", marker, "layer", this.controls.group,  evt);
         }
         if (this.awesomeMap.config.menu.amendments) {
           marker.marker.addTo(this.awesomeMap.layers.amendments.group);
           // mimic parent category (amendments doesn't have categories)
           if (parent.category) {
-            marker.marker.setIcon(this.createIcon(ProposalIcon, this.awesomeMap.getCategory(parent.category).color));
+            marker.marker.setIcon(this.createIcon("text-secondary"));
             this.addMarkerCategory(marker.marker, parent.category)
           }
         }