decidim-admin 0.24.0 → 0.25.0.rc1

data/app/{frontend/components/autocomplete.component.test.tsx → packs/src/decidim/admin/autocomplete.component.test.js}

@@ -1,12 +1,11 @@
 import { shallow } from "enzyme";
 import * as React from "react";
-
 import Autocomplete from "./autocomplete.component";
 
 describe("<Autocomplete />", () => {
   const name = "custom[name]";
   const selected = "";
-  const options = Array();
+  const options = [];
   const placeholder = "Pick a value";
   const noResultsText = "No results found";
   const searchPromptText = "Type to search";

data/app/packs/src/decidim/admin/budget_rule_toggler.component.js

@@ -0,0 +1,50 @@
+export default class BudgetRuleTogglerComponent {
+  constructor(options = {}) {
+    this.ruleCheckboxes = options.ruleCheckboxes;
+    this._runAll();
+  }
+
+  _runAll() {
+    this.ruleCheckboxes.each((_i, checkbox) => {
+      this._bindEvent(checkbox);
+      this.run(checkbox);
+    });
+  }
+
+  _bindEvent(target) {
+    $(target).on("change", (event) => {
+      this.run(event.target);
+    });
+  }
+
+  run(target) {
+    this.toggleTextInput(target);
+
+    if ($(target).prop("checked")) {
+      this.ruleCheckboxes.filter(
+        (_i, checkbox) => {
+          return checkbox !== target;
+        }).prop("checked", false).each(
+        (_i, checkbox) => {
+          this.toggleTextInput(checkbox);
+        });
+    }
+  }
+
+  toggleTextInput(target) {
+    const container = $(target).closest("div");
+    if (container.length < 1) {
+      return;
+    }
+    const containerClassPrefix = container.attr("class").
+      replace(/^vote_rule_/, "vote_").
+      replace(/_enabled_container$/, "");
+    const input = $(`[class^="${containerClassPrefix}"][class$="_container"]`);
+
+    if ($(target).prop("checked")) {
+      input.slideDown();
+    } else {
+      input.slideUp();
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+/* eslint-disable require-jsdoc */
+import createSortList from "src/decidim/admin/sort_list.component"
+
+export default function createSortableList(lists) {
+  createSortList(lists, {
+    handle: "li",
+    forcePlaceholderSize: true,
+    connectWith: ".js-connect"
+  })
+}
+
+// Once in DOM
+$(() => {
+  const $draggables = $(".draggable-list")
+  let draggablesClassNames = []
+
+  $draggables.each((index, elem) => {
+    draggablesClassNames = [...draggablesClassNames, `.${elem.className.split(" ").filter((name) => (/js-list.*/).test(name))[0]}`]
+  })
+
+  document.addEventListener("drag", function (event) {
+    $draggables.not(event.target.parentElement).addClass("dragging")
+  })
+
+  document.addEventListener("dragend", function() {
+    $draggables.removeClass("dragging")
+  })
+
+  createSortableList(draggablesClassNames.join(", "))
+})

data/app/packs/src/decidim/admin/dynamic_fields.component.js

@@ -0,0 +1,230 @@
+/* eslint-disable require-jsdoc */
+class DynamicFieldsComponent {
+  constructor(options = {}) {
+    this.wrapperSelector = options.wrapperSelector;
+    this.containerSelector = options.containerSelector;
+    this.fieldSelector = options.fieldSelector;
+    this.addFieldButtonSelector = options.addFieldButtonSelector;
+    this.addSeparatorButtonSelector = options.addSeparatorButtonSelector;
+    this.fieldTemplateSelector = options.fieldTemplateSelector;
+    this.separatorTemplateSelector = options.separatorTemplateSelector;
+    this.removeFieldButtonSelector = options.removeFieldButtonSelector;
+    this.moveUpFieldButtonSelector = options.moveUpFieldButtonSelector;
+    this.moveDownFieldButtonSelector = options.moveDownFieldButtonSelector;
+    this.onAddField = options.onAddField;
+    this.onRemoveField = options.onRemoveField;
+    this.onMoveUpField = options.onMoveUpField;
+    this.onMoveDownField = options.onMoveDownField;
+    this.placeholderId = options.placeholderId;
+    this.elementCounter = 0;
+    this._enableInterpolation();
+    this._activateFields();
+    this._bindEvents();
+  }
+
+  _enableInterpolation() {
+    $.fn.replaceAttribute = function(attribute, placeholder, value) {
+      $(this).find(`[${attribute}*=${placeholder}]`).addBack(`[${attribute}*=${placeholder}]`).each((index, element) => {
+        $(element).attr(attribute, $(element).attr(attribute).replace(placeholder, value));
+      });
+
+      return this;
+    }
+
+    $.fn.template = function(placeholder, value) {
+      // See the comment below in the `_addField()` method regarding the
+      // `<template>` tag support in IE11.
+      const $subtemplate = $(this).find("template, .decidim-template");
+
+      if ($subtemplate.length > 0) {
+        $subtemplate.html((index, oldHtml) => $(oldHtml).template(placeholder, value)[0].outerHTML);
+      }
+
+      // Handle those subtemplates that are mapped with the `data-template`
+      // attribute. This is also because of the IE11 support.
+      const $subtemplateParents = $(this).find("[data-template]");
+
+      if ($subtemplateParents.length > 0) {
+        $subtemplateParents.each((_i, elem) => {
+          const $self = $(elem);
+          const $tpl = $($self.data("template"));
+
+          // Duplicate the sub-template with a unique ID as there may be
+          // multiple parent templates referring to the same sub-template.
+          const $subtpl = $($tpl[0].outerHTML);
+          const subtemplateId = `${$tpl.attr("id")}-${value}`;
+          const subtemplateSelector = `#${subtemplateId}`;
+          $subtpl.attr("id", subtemplateId);
+          $self.attr("data-template", subtemplateSelector).data("template", subtemplateSelector);
+          $tpl.after($subtpl);
+
+          $subtpl.html((index, oldHtml) => $(oldHtml).template(placeholder, value)[0].outerHTML);
+        });
+      }
+
+      $(this).replaceAttribute("id", placeholder, value);
+      $(this).replaceAttribute("name", placeholder, value);
+      $(this).replaceAttribute("data-tabs-content", placeholder, value);
+      $(this).replaceAttribute("for", placeholder, value);
+      $(this).replaceAttribute("tabs_id", placeholder, value);
+      $(this).replaceAttribute("href", placeholder, value);
+
+      return this;
+    }
+  }
+
+  _bindEvents() {
+    $(this.wrapperSelector).on("click", this.addFieldButtonSelector, (event) =>
+      this._bindSafeEvent(event, () => this._addField(this.fieldTemplateSelector))
+    );
+
+    if (this.addSeparatorButtonSelector) {
+      $(this.wrapperSelector).on("click", this.addSeparatorButtonSelector, (event) =>
+        this._bindSafeEvent(event, () => this._addField(this.separatorTemplateSelector))
+      );
+    }
+
+    $(this.wrapperSelector).on("click", this.removeFieldButtonSelector, (event) =>
+      this._bindSafeEvent(event, (target) => this._removeField(target))
+    );
+
+    if (this.moveUpFieldButtonSelector) {
+      $(this.wrapperSelector).on("click", this.moveUpFieldButtonSelector, (event) =>
+        this._bindSafeEvent(event, (target) => this._moveUpField(target))
+      );
+    }
+
+    if (this.moveDownFieldButtonSelector) {
+      $(this.wrapperSelector).on("click", this.moveDownFieldButtonSelector, (event) =>
+        this._bindSafeEvent(event, (target) => this._moveDownField(target))
+      );
+    }
+  }
+
+  _bindSafeEvent(event, cb) {
+    event.preventDefault();
+    event.stopPropagation();
+
+    try {
+      return cb(event.target);
+    } catch (error) {
+      console.error(error); // eslint-disable-line no-console
+      return error;
+    }
+  }
+
+  // Adds a field.
+  //
+  // template - A String matching the type of the template. Expected to be
+  //  either ".decidim-question-template" or ".decidim-separator-template".
+  _addField(templateClass = ".decidim-template") {
+    const $wrapper = $(this.wrapperSelector);
+    const $container = $wrapper.find(this.containerSelector);
+
+    // Allow defining the template using a `data-template` attribute on the
+    // wrapper element. This is to allow child templates which would otherwise
+    // be impossible using `<script type="text/template">`. See the comment
+    // below regarding the `<template>` tag and IE11.
+    const templateSelector = $wrapper.data("template");
+    let $template = null;
+    if (templateSelector) {
+      $template = $(templateSelector);
+    }
+    if ($template === null || $template.length < 1) {
+      // To preserve IE11 backwards compatibility, the views are using
+      // `<script type="text/template">` with a given `class` instead of
+      // `<template>`. The `<template> tags are parsed in IE11 along with the
+      // DOM which may cause the form elements inside them to break the forms
+      // as they are submitted with them.
+      $template = $wrapper.children(`template, ${templateClass}`);
+    }
+
+    const $newField = $($template.html()).template(this.placeholderId, this._getUID());
+
+    $newField.find("ul.tabs").attr("data-tabs", true);
+
+    const $lastQuestion = $container.find(this.fieldSelector).last()
+    if ($lastQuestion.length > 0) {
+      $lastQuestion.after($newField);
+    } else {
+      $newField.appendTo($container);
+    }
+
+    $newField.foundation();
+
+    if (this.onAddField) {
+      this.onAddField($newField);
+    }
+  }
+
+  _removeField(target) {
+    const $target = $(target);
+    const $removedField = $target.parents(this.fieldSelector);
+    const idInput = $removedField.find("input").filter((idx, input) => input.name.match(/id/));
+
+    if (idInput.length > 0) {
+      const deletedInput = $removedField.find("input").filter((idx, input) => input.name.match(/delete/));
+
+      if (deletedInput.length > 0) {
+        $(deletedInput[0]).val(true);
+      }
+
+      $removedField.addClass("hidden");
+      $removedField.hide();
+    } else {
+      $removedField.remove();
+    }
+
+    if (this.onRemoveField) {
+      this.onRemoveField($removedField);
+    }
+  }
+
+  _moveUpField(target) {
+    const $target = $(target);
+    const $movedUpField = $target.parents(this.fieldSelector);
+
+    $movedUpField.prev().before($movedUpField);
+
+    if (this.onMoveUpField) {
+      this.onMoveUpField($movedUpField);
+    }
+  }
+
+  _moveDownField(target) {
+    const $target = $(target);
+    const $movedDownField = $target.parents(this.fieldSelector);
+
+    $movedDownField.next().after($movedDownField);
+
+    if (this.onMoveDownField) {
+      this.onMoveDownField($movedDownField);
+    }
+  }
+
+  _activateFields() {
+    // Move the `<script type="text/template">` elements to the bottom of the
+    // list container so that they will not cause the question moving
+    // functionality to break since it assumes that all children elements are
+    // the dynamic field list child items.
+    const $wrapper = $(this.wrapperSelector);
+    const $container = $wrapper.find(this.containerSelector);
+    $container.append($container.find("script"));
+
+    $(this.fieldSelector).each((idx, el) => {
+      $(el).template(this.placeholderId, this._getUID());
+
+      $(el).find("ul.tabs").attr("data-tabs", true);
+    })
+  }
+
+  _getUID() {
+    this.elementCounter += 1;
+
+    return (new Date().getTime()) + this.elementCounter;
+  }
+}
+
+export default function createDynamicFields(options) {
+  return new DynamicFieldsComponent(options);
+}

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

@@ -0,0 +1,100 @@
+import AutoButtonsByPositionComponent from "src/decidim/admin/auto_buttons_by_position.component"
+import AutoLabelByPositionComponent from "src/decidim/admin/auto_label_by_position.component"
+import createDynamicFields from "src/decidim/admin/dynamic_fields.component"
+import createSortList from "src/decidim/admin/sort_list.component"
+
+$(() => {
+  const dynamicFieldDefinitions = [
+    {
+      placeHolderId: "external-domain-id",
+      wrapperSelector: ".external-domains",
+      fieldSelector: ".external-domain",
+      addFieldSelector: ".add-external-domain"
+    }
+  ];
+
+  dynamicFieldDefinitions.forEach((section) => {
+    const fieldSelectorSuffix = section.fieldSelector.replace(".", "");
+
+    const autoButtonsByPosition = new AutoButtonsByPositionComponent({
+      listSelector: `${section.fieldSelector}:not(.hidden)`,
+      hideOnFirstSelector: ".move-up-question",
+      hideOnLastSelector: ".move-down-question"
+    });
+
+    const autoLabelByPosition = new AutoLabelByPositionComponent({
+      listSelector: `${section.fieldSelector}:not(.hidden)`,
+      labelSelector: ".card-title span:first",
+      onPositionComputed: (el, idx) => {
+        $(el).find("input[name$=\\[position\\]]").val(idx);
+      }
+    });
+
+    const createSortableList = () => {
+      createSortList(".external-domains-list:not(.published)", {
+        handle: ".external-domain-divider",
+        placeholder: '<div style="border-style: dashed; border-color: #000"></div>',
+        forcePlaceholderSize: true,
+        onSortUpdate: () => {
+          autoLabelByPosition.run();
+          autoButtonsByPosition.run();
+        }
+      });
+    };
+
+    const hideDeletedItem = ($target) => {
+      const inputDeleted = $target.find("input[name$=\\[deleted\\]]").val();
+
+      if (inputDeleted === "true") {
+        $target.addClass("hidden");
+        $target.hide();
+
+        // Allows re-submitting of the form
+        $("input", $target).removeAttr("required");
+      }
+    };
+
+    createDynamicFields({
+      placeholderId: section.placeHolderId,
+      wrapperSelector: section.wrapperSelector,
+      containerSelector: `${section.wrapperSelector}-list`,
+      fieldSelector: section.fieldSelector,
+      addFieldButtonSelector: section.addFieldSelector,
+      removeFieldButtonSelector: `.remove-${fieldSelectorSuffix}`,
+      moveUpFieldButtonSelector: ".move-up-question",
+      moveDownFieldButtonSelector: ".move-down-question",
+      onAddField: () => {
+        createSortableList();
+
+        autoLabelByPosition.run();
+        autoButtonsByPosition.run();
+      },
+      onRemoveField: ($field) => {
+        autoLabelByPosition.run();
+        autoButtonsByPosition.run();
+
+        // Allows re-submitting of the form
+        $("input", $field).removeAttr("required");
+      },
+      onMoveUpField: () => {
+        autoLabelByPosition.run();
+        autoButtonsByPosition.run();
+      },
+      onMoveDownField: () => {
+        autoLabelByPosition.run();
+        autoButtonsByPosition.run();
+      }
+    });
+
+    createSortableList();
+
+    $(section.fieldSelector).each((_idx, el) => {
+      const $target = $(el);
+
+      hideDeletedItem($target);
+    });
+
+    autoLabelByPosition.run();
+    autoButtonsByPosition.run();
+  });
+});

data/app/packs/src/decidim/admin/field_dependent_inputs.component.js

@@ -0,0 +1,37 @@
+/* eslint-disable require-jsdoc */
+class FieldDependentInputsComponent {
+  constructor(options = {}) {
+    this.controllerField = options.controllerField;
+    this.wrapperSelector = options.wrapperSelector;
+    this.dependentFieldsSelector = options.dependentFieldsSelector;
+    this.dependentInputSelector = options.dependentInputSelector;
+    this.enablingCondition = options.enablingCondition;
+    this._bindEvent();
+    this._run();
+  }
+
+  _run() {
+    const $controllerField = this.controllerField;
+    const $dependentFields = $controllerField.parents(this.wrapperSelector).find(this.dependentFieldsSelector);
+    const $dependentInputs = $dependentFields.find(this.dependentInputSelector);
+
+    if (this.enablingCondition($controllerField)) {
+      $dependentInputs.prop("disabled", false);
+      $dependentFields.show();
+    } else {
+      $dependentInputs.prop("disabled", true);
+      $dependentFields.hide();
+    }
+  }
+
+  _bindEvent() {
+    this.controllerField.on("change", () => {
+      this._run();
+    });
+  }
+}
+
+export default function createFieldDependentInputs(options) {
+  return new FieldDependentInputsComponent(options);
+}
+