plans.js.es6 in decidim-plans-0.16.7

- old
+ new
@@ -1,3 +1,95 @@
 $(() => {
-  // Add the needed JS initialization code here
+  const $search = $("#data_picker-autocomplete");
+  const $results = $("#plan-tags-results");
+  const $template = $(".decidim-template", $results);
+  const $form = $search.parents("form");
+  const addRowItem = function(id, title) {
+    let template = $template.html();
+    template = template.replace(new RegExp("{{tag_id}}", "g"), id);
+    template = template.replace(new RegExp("{{tag_name}}", "g"), title);
+    const $newRow = $(template);
+    $("table tbody", $results).append($newRow);
+    $results.removeClass("hide");
+
+    // Add it to the autocomplete form
+    const $field = $(`<input type="hidden" name="tags[]" value="${id}">`);
+    $form.append($field);
+
+    // Listen to the click event on the remove button
+    $(".remove-tagging", $newRow).on("click", function(ev) {
+      ev.preventDefault();
+      $newRow.remove();
+      $field.remove();
+
+      if ($("table tbody tr", $results).length < 1) {
+        $results.addClass("hide");
+      }
+    });
+  };
+  let xhr = null;
+  let currentSearch = "";
+
+  $search.on("keyup", function() {
+    currentSearch = $search.val();
+  });
+
+  $search.autoComplete({
+    minChars: 2,
+    cache: 0,
+    source: function(term, response) {
+      try {
+        xhr.abort();
+      } catch (exception) { xhr = null; }
+
+      const url = $form.attr("action");
+      xhr = $.getJSON(
+        url,
+        $form.serializeArray(),
+        function(data) {
+          if (data.length > 0) {
+            response(data);
+          } else {
+            response([
+              [null, $search.data("no-results-text"), term]
+            ]);
+          }
+        }
+      );
+    },
+    renderItem: function (item, search) {
+      const sanitizedSearch = search.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+      const re = new RegExp(`(${sanitizedSearch.split(" ").join("|")})`, "gi");
+      const modelId = item[0];
+      const title = item[1];
+      const val = `${title}`;
+
+      if (modelId === null) {
+        // Empty result
+        const term = item[2];
+        const url = $search.data("no-results-url").replace("{{term}}", encodeURIComponent(term));
+        return `<div><a href="${url}">${val.replace("{{term}}", term)}</a></div>`;
+      }
+      return `<div class="autocomplete-suggestion" data-model-id="${modelId}" data-val="${title}">${val.replace(re, "<b>$1</b>")}</div>`;
+    },
+    onSelect: function(event, term, item) {
+      const $suggestions = $search.data("sc");
+      const modelId = item.data("modelId");
+      const title = item.data("val");
+
+      addRowItem(modelId, title);
+
+      $search.val(currentSearch);
+      setTimeout(function() {
+        $(`[data-model-id="${modelId}"]`, $suggestions).remove();
+        $suggestions.show();
+      }, 20);
+    }
+  });
+
+  const resultsArray = $results.data("results");
+  if (Array.isArray(resultsArray)) {
+    resultsArray.forEach((value) => {
+      addRowItem(value[0], value[1]);
+    });
+  }
 });