decidim-forms 0.22.0 → 0.23.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 73b7dd5e0d7e94151c79b989666d5a3d1e3790db9c97cee7a35c587a0a00977e
-  data.tar.gz: 4e7f6a2d27f58079d5eed9d08404373a66636f6960a220dc1572809a482dfbb3
+  metadata.gz: 0f8714ccc1417cbe818e4eac8a9aba7c5ae7882047c6bbb89c74615421e603cd
+  data.tar.gz: 5632f71135c4614f6ebcaca269c2779f3ed131b90ba756e4154baa753878ddba
 SHA512:
-  metadata.gz: b2eed83cff858299ee6fef944b1951150ad4634a193fec095ca20a393bfec8de0f1a2fe1e09447728d40dbb2898ce4b884d4ab82cdecaf93c6025efd1d677bd5
-  data.tar.gz: e1e84f6aa8d5a1cb2ea2fe95593bd0ba0977d536c4abb3a3cc66726cf66a425dd7c1622f462cc9324c5fbf0d375e0dcc43c2844eb0b0fafc5457f97d34a6de70
+  metadata.gz: 58a20ef3965ef39541a29a672f2322b284047083750f9d3c9be87db8a8acfebea1aad8a51d8890c04346afd8665cdb9c6aa625422b52102baf3322dd686bd2d1
+  data.tar.gz: c0658ed8a17502cb807e2616f7ebb09e78b119ab8473e0e65955d5706cc5ba3cad58321f741c17ea3e09ae5c71ac7daed8d18480dcdd2a6cfda892e22efdb18f

data/app/assets/config/admin/decidim_forms_manifest.css

@@ -0,0 +1,3 @@
+/*
+ *= link decidim/forms/questionnaire-answers-pdf.scss
+ */

data/app/assets/config/decidim_forms_manifest.css

@@ -1,3 +1,4 @@
 /*
  *= link decidim/forms/forms.scss
+ *= link decidim/forms/questionnaire-answers-pdf.scss
  */

data/app/assets/javascripts/decidim/forms/admin/auto_select_options_from_url.component.js.es6

@@ -0,0 +1,40 @@
+((exports) => {
+  class AutoSelectOptionsFromUrl {
+    constructor(options = {}) {
+      this.$source = options.source;
+      this.$select = options.select;
+      this.sourceToParams = options.sourceToParams;
+      this.run();
+    }
+
+    run() {
+      this.$source.on("change", this._onSourceChange.bind(this));
+      this._onSourceChange();
+    }
+
+    _onSourceChange() {
+      const select = this.$select;
+      const params = this.sourceToParams(this.$source);
+      const url = this.$source.data("url");
+
+      $.getJSON(url, params, function (data) {
+        select.find("option:not([value=''])").remove();
+        const selectedValue = select.data("selected");
+
+        data.forEach((option) => {
+          let optionElement = $(`<option value="${option.id}">${option.body}</option>`).appendTo(select);
+          if (option.id === selectedValue) {
+            optionElement.attr("selected", true);
+          }
+        });
+
+        if (selectedValue) {
+          select.val(selectedValue);
+        }
+      });
+    }
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.AutoSelectOptionsFromUrl = AutoSelectOptionsFromUrl;
+})(window);

data/app/assets/javascripts/decidim/forms/admin/forms.js.es6

@@ -1,9 +1,12 @@
+/* eslint-disable max-lines */
+
 // = require ./auto_buttons_by_min_items.component
 // = require ./auto_select_options_by_total_items.component
+// = require ./auto_select_options_from_url.component
 // = require ./live_text_update.component
 
 ((exports) => {
-  const { AutoLabelByPositionComponent, AutoButtonsByPositionComponent, AutoButtonsByMinItemsComponent, AutoSelectOptionsByTotalItemsComponent, createLiveTextUpdateComponent, createFieldDependentInputs, createDynamicFields, createSortList } = exports.DecidimAdmin;
+  const { AutoLabelByPositionComponent, AutoButtonsByPositionComponent, AutoButtonsByMinItemsComponent, AutoSelectOptionsByTotalItemsComponent, AutoSelectOptionsFromUrl, createLiveTextUpdateComponent, createFieldDependentInputs, createDynamicFields, createSortList } = exports.DecidimAdmin;
   const { createQuillEditor } = exports.Decidim;
 
   const wrapperSelector = ".questionnaire-questions";
@@ -18,22 +21,54 @@
   const addMatrixRowButtonSelector = ".add-matrix-row";
   const maxChoicesWrapperSelector = ".questionnaire-question-max-choices";
 
-  const MULTIPLE_CHOICE_VALUES = ["single_option", "multiple_option", "sorting", "matrix_single", "matrix_multiple"];
-  const MATRIX_VALUES = ["matrix_single", "matrix_multiple"];
+  const displayConditionFieldSelector = ".questionnaire-question-display-condition";
+  const displayConditionsWrapperSelector = ".questionnaire-question-display-conditions";
+  const displayConditionRemoveFieldButtonSelector = ".remove-display-condition";
+
+  const displayConditionQuestionSelector = "select[name$=\\[decidim_condition_question_id\\]]";
+  const displayConditionAnswerOptionSelector = "select[name$=\\[decidim_answer_option_id\\]]";
+  const displayConditionTypeSelector = "select[name$=\\[condition_type\\]]";
+  const deletedInputSelector = "input[name$=\\[deleted\\]]";
+
+  const displayConditionValueWrapperSelector = ".questionnaire-question-display-condition-value";
+  const displayconditionAnswerOptionWrapperSelector = ".questionnaire-question-display-condition-answer-option";
+
+  const addDisplayConditionButtonSelector = ".add-display-condition";
+
+  const removeDisplayConditionsForFirstQuestion = () => {
+    $(fieldSelector).each((idx, el) => {
+      const $question = $(el);
+      if (idx) {
+        $question.find(displayConditionsWrapperSelector).find(deletedInputSelector).val("false");
+        $question.find(displayConditionsWrapperSelector).show();
+      }
+      else {
+        $question.find(displayConditionsWrapperSelector).find(deletedInputSelector).val("true");
+        $question.find(displayConditionsWrapperSelector).hide();
+      }
+    });
+  };
+
+  const autoButtonsByPosition = new AutoButtonsByPositionComponent({
+    listSelector: ".questionnaire-question:not(.hidden)",
+    hideOnFirstSelector: ".move-up-question",
+    hideOnLastSelector: ".move-down-question"
+  });
 
   const autoLabelByPosition = new AutoLabelByPositionComponent({
     listSelector: ".questionnaire-question:not(.hidden)",
     labelSelector: ".card-title span:first",
     onPositionComputed: (el, idx) => {
       $(el).find("input[name$=\\[position\\]]").val(idx);
+
+      autoButtonsByPosition.run();
+
+      removeDisplayConditionsForFirstQuestion();
     }
   });
 
-  const autoButtonsByPosition = new AutoButtonsByPositionComponent({
-    listSelector: ".questionnaire-question:not(.hidden)",
-    hideOnFirstSelector: ".move-up-question",
-    hideOnLastSelector: ".move-down-question"
-  });
+  const MULTIPLE_CHOICE_VALUES = ["single_option", "multiple_option", "sorting", "matrix_single", "matrix_multiple"];
+  const MATRIX_VALUES = ["matrix_single", "matrix_multiple"];
 
   const createAutoMaxChoicesByNumberOfAnswerOptions = (fieldId) => {
     return new AutoSelectOptionsByTotalItemsComponent({
@@ -52,6 +87,14 @@
     })
   };
 
+  const createAutoSelectOptionsFromUrl = ($field) => {
+    return new AutoSelectOptionsFromUrl({
+      source: $field.find(displayConditionQuestionSelector),
+      select: $field.find(displayConditionAnswerOptionSelector),
+      sourceToParams: ($element) => { return { id: $element.val() } }
+    })
+  };
+
   const createSortableList = () => {
     createSortList(".questionnaire-questions-list:not(.published)", {
       handle: ".question-divider",
@@ -80,6 +123,15 @@
     });
   }
 
+  const createCollapsibleQuestion = ($target) => {
+    const $collapsible = $target.find(".collapsible");
+    if ($collapsible.length > 0) {
+      const collapsibleId = $collapsible.attr("id").replace("-question-card", "");
+      const toggleAttr = `${collapsibleId}-question-card button--collapse-question-${collapsibleId} button--expand-question-${collapsibleId}`;
+      $target.find(".question--collapse").data("toggle", toggleAttr);
+    }
+  };
+
   const createDynamicFieldsForAnswerOptions = (fieldId) => {
     const autoButtons = createAutoButtonsByMinItemsForAnswerOptions(fieldId);
     const autoSelectOptions = createAutoMaxChoicesByNumberOfAnswerOptions(fieldId);
@@ -123,22 +175,122 @@
 
   const dynamicFieldsForMatrixRows = {};
 
-  const isMultipleChoiceOption = ($selectField) => {
-    const value = $selectField.val();
-
+  const isMultipleChoiceOption = (value) => {
     return MULTIPLE_CHOICE_VALUES.indexOf(value) >= 0;
   }
 
-  const isMatrix = ($selectField) => {
-    const value = $selectField.val();
-
+  const isMatrix = (value) => {
     return MATRIX_VALUES.indexOf(value) >= 0;
   }
 
+  const getSelectedQuestionType = (select) => {
+    const selectedOption = select.options[select.selectedIndex];
+    return $(selectedOption).data("type");
+  };
+
+  const onDisplayConditionQuestionChange = ($field) => {
+    const $questionSelector = $field.find(displayConditionQuestionSelector);
+    const selectedQuestionType = getSelectedQuestionType($questionSelector[0]);
+
+    const isMultiple = isMultipleChoiceOption(selectedQuestionType);
+
+    let conditionTypes = ["answered", "not_answered"];
+
+    if (isMultiple) {
+      conditionTypes.push("equal");
+      conditionTypes.push("not_equal");
+    }
+
+    conditionTypes.push("match");
+
+    const $conditionTypeSelect = $field.find(displayConditionTypeSelector);
+
+    $conditionTypeSelect.find("option").each((idx, option) => {
+      const $option = $(option);
+      const value = $option.val();
+
+      if (!value) {
+        return;
+      }
+
+      $option.show();
+
+      if (conditionTypes.indexOf(value) < 0) {
+        $option.hide();
+      }
+    });
+
+    if (conditionTypes.indexOf($conditionTypeSelect.val()) < 0) {
+      $conditionTypeSelect.val(conditionTypes[0]);
+    }
+
+    $conditionTypeSelect.trigger("change");
+  };
+
+  const onDisplayConditionTypeChange = ($field) => {
+    const value = $field.find(displayConditionTypeSelector).val();
+    const $valueWrapper = $field.find(displayConditionValueWrapperSelector);
+    const $answerOptionWrapper = $field.find(displayconditionAnswerOptionWrapperSelector);
+
+    const $questionSelector = $field.find(displayConditionQuestionSelector);
+    const selectedQuestionType = getSelectedQuestionType($questionSelector[0]);
+
+    const isMultiple = isMultipleChoiceOption(selectedQuestionType);
+
+    if (value === "match") {
+      $valueWrapper.show();
+    }
+    else {
+      $valueWrapper.hide();
+    }
+
+    if (isMultiple && (value === "not_equal" || value === "equal")) {
+      $answerOptionWrapper.show();
+    }
+    else {
+      $answerOptionWrapper.hide();
+    }
+  };
+
+  const initializeDisplayConditionField = ($field) => {
+    const autoSelectByUrl = createAutoSelectOptionsFromUrl($field);
+    autoSelectByUrl.run();
+
+    $field.find(displayConditionQuestionSelector).on("change", () => {
+      onDisplayConditionQuestionChange($field);
+    });
+
+    $field.find(displayConditionTypeSelector).on("change", () => {
+      onDisplayConditionTypeChange($field);
+    });
+
+    onDisplayConditionTypeChange($field);
+    onDisplayConditionQuestionChange($field);
+  }
+
+  const createDynamicFieldsForDisplayConditions = (fieldId) => {
+    return createDynamicFields({
+      placeholderId: "questionnaire-question-display-condition-id",
+      wrapperSelector: `#${fieldId} ${displayConditionsWrapperSelector}`,
+      containerSelector: ".questionnaire-question-display-conditions-list",
+      fieldSelector: displayConditionFieldSelector,
+      addFieldButtonSelector: addDisplayConditionButtonSelector,
+      removeFieldButtonSelector: displayConditionRemoveFieldButtonSelector,
+      onAddField: ($field) => {
+        initializeDisplayConditionField($field);
+      },
+      onRemoveField: () => {
+      }
+    });
+  };
+
+  const dynamicFieldsForDisplayConditions = {};
+
   const setupInitialQuestionAttributes = ($target) => {
     const fieldId = $target.attr("id");
     const $fieldQuestionTypeSelect = $target.find(questionTypeSelector);
 
+    createCollapsibleQuestion($target);
     createDynamicQuestionTitle(fieldId);
 
     createFieldDependentInputs({
@@ -147,7 +299,7 @@
       dependentFieldsSelector: answerOptionsWrapperSelector,
       dependentInputSelector: `${answerOptionFieldSelector} input`,
       enablingCondition: ($field) => {
-        return isMultipleChoiceOption($field);
+        return isMultipleChoiceOption($field.val());
       }
     });
 
@@ -167,18 +319,19 @@
       dependentFieldsSelector: matrixRowsWrapperSelector,
       dependentInputSelector: `${matrixRowFieldSelector} input`,
       enablingCondition: ($field) => {
-        return isMatrix($field);
+        return isMatrix($field.val());
       }
     });
 
     dynamicFieldsForAnswerOptions[fieldId] = createDynamicFieldsForAnswerOptions(fieldId);
     dynamicFieldsForMatrixRows[fieldId] = createDynamicFieldsForMatrixRows(fieldId);
+    dynamicFieldsForDisplayConditions[fieldId] = createDynamicFieldsForDisplayConditions(fieldId);
 
     const dynamicFieldsAnswerOptions = dynamicFieldsForAnswerOptions[fieldId];
     const dynamicFieldsMatrixRows = dynamicFieldsForMatrixRows[fieldId];
 
     const onQuestionTypeChange = () => {
-      if (isMultipleChoiceOption($fieldQuestionTypeSelect)) {
+      if (isMultipleChoiceOption($fieldQuestionTypeSelect.val())) {
         const nOptions = $fieldQuestionTypeSelect.parents(fieldSelector).find(answerOptionFieldSelector).length;
 
         if (nOptions === 0) {
@@ -187,7 +340,7 @@
         }
       }
 
-      if (isMatrix($fieldQuestionTypeSelect)) {
+      if (isMatrix($fieldQuestionTypeSelect.val())) {
         const nRows = $fieldQuestionTypeSelect.parents(fieldSelector).find(matrixRowFieldSelector).length;
 
         if (nRows === 0) {
@@ -224,13 +377,6 @@
     moveUpFieldButtonSelector: ".move-up-question",
     moveDownFieldButtonSelector: ".move-down-question",
     onAddField: ($field) => {
-      const $collapsible = $field.find(".collapsible");
-      if ($collapsible.length > 0) {
-        const collapsibleId = $collapsible.attr("id").replace("-question-card", "");
-        const toggleAttr = `${collapsibleId}-question-card button--collapse-question-${collapsibleId} button--expand-question-${collapsibleId}`;
-        $field.find(".question--collapse").data("toggle", toggleAttr);
-      }
-
       setupInitialQuestionAttributes($field);
       createSortableList();
 
@@ -248,9 +394,14 @@
       $field.find(answerOptionRemoveFieldButtonSelector).each((idx, el) => {
         dynamicFieldsForAnswerOptions[$field.attr("id")]._removeField(el);
       });
+
       $field.find(matrixRowRemoveFieldButtonSelector).each((idx, el) => {
         dynamicFieldsForMatrixRows[$field.attr("id")]._removeField(el);
       });
+
+      $field.find(displayConditionRemoveFieldButtonSelector).each((idx, el) => {
+        dynamicFieldsForDisplayConditions[$field.attr("id")]._removeField(el);
+      });
     },
     onMoveUpField: () => {
       autoLabelByPosition.run();
@@ -271,6 +422,11 @@
     setupInitialQuestionAttributes($target);
   });
 
+  $(displayConditionFieldSelector).each((idx, el) => {
+    const $field = $(el);
+    initializeDisplayConditionField($field)
+  });
+
   autoLabelByPosition.run();
   autoButtonsByPosition.run();
 })(window);

data/app/assets/javascripts/decidim/forms/autosortable_checkboxes.component.js.es6

@@ -1,59 +1,79 @@
+/* eslint-disable no-ternary */
+
 ((exports) => {
   class AutosortableCheckboxesComponent {
     constructor(options = {}) {
       this.wrapperField = options.wrapperField;
       this._bindEvent();
-      this._run();
+      this._order();
+      this._normalize();
     }
 
-    _run() {
-      $(this.wrapperField).find("input[type=checkbox]").each((idx, el) => {
-        const $parentLabel = $(el).parents("label");
-
-        if ($(el).is(":checked")) {
-          const $lastSorted = this.wrapperField.find("label.sorted").last();
-
-          if ($lastSorted.length > 0) {
-            $lastSorted.removeClass("last-sorted");
-            $parentLabel.insertAfter($lastSorted);
-          } else {
-            $parentLabel.insertBefore(this.wrapperField.find("label:first-child"));
-          }
+    // Order by position
+    _order() {
+      const max = $(this.wrapperField).find(".collection-input").length;
+      $(this.wrapperField).find(".collection-input").each((idx, el) => {
+        const $positionField = $(el).find("input[name$=\\[position\\]]");
+        const position = $positionField.val()
+          ? parseInt($positionField.val(), 10)
+          : max;
 
-          $parentLabel.addClass("sorted");
-          $parentLabel.addClass("last-sorted");
-        } else {
-          const $lastUnsorted = this.wrapperField.find("label:not(.sorted)").last();
+        let $next = $(el).next();
+        while ($next.length > 0) {
+          const $nextPositionField = $next.find("input[name$=\\[position\\]]");
+          const nextPosition = $nextPositionField.val()
+            ? parseInt($nextPositionField.val(), 10)
+            : max;
 
-          if ($lastUnsorted.length > 0) {
-            $parentLabel.insertBefore($lastUnsorted);
-          } else {
-            $parentLabel.insertAfter(this.wrapperField.find("label:last-child"));
+          if (position > nextPosition) {
+            $next.insertBefore($(el));
           }
-
-          $parentLabel.removeClass("sorted");
+          $next = $next.next();
         }
       });
+    }
 
-      $(this.wrapperField).find("label").each((idx, el) => {
-        const $positionSelector = $(el).find(".position");
+    _findLastPosition() {
+      let lastPosition = 0;
+      $(this.wrapperField).find(".collection-input").each((idx, el) => {
         const $positionField = $(el).find("input[name$=\\[position\\]]");
+        const position = parseInt($positionField.val(), 10);
+        if (position > lastPosition) {
+          lastPosition = position;
+        }
+      });
+      return lastPosition;
+    }
 
-        if ($(el).hasClass("sorted")) {
+    _normalize() {
+      $(this.wrapperField).find(".collection-input .position").each((idx, el) => {
+        const $positionField = $(el).parent().find("input[name$=\\[position\\]]");
+        if ($positionField.val()) {
           $positionField.val(idx);
           $positionField.prop("disabled", false);
-          $positionSelector.html(`${idx + 1}. `);
-        } else {
-          $positionField.val("");
-          $positionField.prop("disabled", true);
-          $positionSelector.html("");
+          $(el).html(`${idx + 1}. `);
         }
       });
     }
 
     _bindEvent() {
-      $(this.wrapperField).find("input[type=checkbox]").on("change", () => {
-        this._run();
+      $(this.wrapperField).find("input[type=checkbox]").on("change", (el) => {
+        const $parentLabel = $(el.target).parents("label");
+        const $positionSelector = $parentLabel.find(".position");
+        const $positionField = $parentLabel.find("input[name$=\\[position\\]]");
+        const lastPosition = this._findLastPosition();
+
+        if (el.target.checked) {
+          $positionField.val(lastPosition + 1);
+          $positionField.prop("disabled", false);
+          $positionSelector.html(lastPosition + 1);
+        } else {
+          $positionField.val("");
+          $positionField.prop("disabled", true);
+          $positionSelector.html("");
+        }
+        this._order();
+        this._normalize();
       });
     }
   }