decidim-forms 0.19.1 → 0.23.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e22e76b94713686b575b5a34fda58a2bc702daf22d6ab13cd00e4768b5ec4280
-  data.tar.gz: 6533f5486575eddbd71104e54564e856e5e98edfffcb57c4ef5305d051e1bac2
+  metadata.gz: 0f8714ccc1417cbe818e4eac8a9aba7c5ae7882047c6bbb89c74615421e603cd
+  data.tar.gz: 5632f71135c4614f6ebcaca269c2779f3ed131b90ba756e4154baa753878ddba
 SHA512:
-  metadata.gz: 9af0c32621f38375c4c19ec80161e79fc7f6fd2fab368266de7d355131b3eaef7ff46a6282b54f01fe0cf5f57ce2206234717974b7118a0acfed9de94a853074
-  data.tar.gz: cf11232630856059fc7f382e6b7dd03e9d4d7147ca1f3503f93f48e4c2515103c6a19ed8eb79c05ce009b500db2007a28e1b2f2a00139b2bfe97b1d7302b5d63
+  metadata.gz: 58a20ef3965ef39541a29a672f2322b284047083750f9d3c9be87db8a8acfebea1aad8a51d8890c04346afd8665cdb9c6aa625422b52102baf3322dd686bd2d1
+  data.tar.gz: c0658ed8a17502cb807e2616f7ebb09e78b119ab8473e0e65955d5706cc5ba3cad58321f741c17ea3e09ae5c71ac7daed8d18480dcdd2a6cfda892e22efdb18f

data/README.md

@@ -54,7 +54,7 @@ See [Decidim](https://github.com/decidim/decidim).
 
 ## Seeds
 
-Since questionnaires cannot exist without a real model we are not including specific seeds for this engine.
+Since questionnaires cannot exist without a component we are not including specific seeds for this engine.
 
 Other engines are free to include questionnaires on their seeds like this:
 

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

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

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

@@ -1 +1,2 @@
 //= link decidim/forms/admin/forms.js
+//= link decidim/forms/admin/collapsible_questions.js

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/images/decidim/surveys/icon.svg

@@ -1,19 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-   viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve">
-<path d="M27,28H9c-0.6,0-1-0.4-1-1V11c0-0.6,0.4-1,1-1h3.1c0.6,0,1,0.4,1,1v1.9h9.7V11c0-0.6,0.4-1,1-1H27c0.6,0,1,0.4,1,1v16
-  C28,27.6,27.6,28,27,28z M10,26h16V12h-1.2v1.9c0,0.6-0.4,1-1,1H12.1c-0.6,0-1-0.4-1-1V12H10V26z"/>
-<g>
-  <g>
-    <path d="M21,11h-6c-0.6,0-1-0.4-1-1s0.4-1,1-1h6c0.6,0,1,0.4,1,1S21.6,11,21,11z"/>
-  </g>
-  <g>
-    <path d="M18.7,11h-1.5c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1h1.5c0.6,0,1,0.4,1,1v2C19.7,10.5,19.3,11,18.7,11z"/>
-  </g>
-</g>
-<g>
-  <path d="M18,36.1c-9.9,0-18-8.1-18-18s8.1-18,18-18s18,8.1,18,18S27.9,36.1,18,36.1z M18,2.1c-8.8,0-16,7.2-16,16s7.2,16,16,16
-    s16-7.2,16-16S26.8,2.1,18,2.1z"/>
-</g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0" y="0" enable-background="new 0 0 36 36" version="1.1" viewBox="0 0 36 36" xml:space="preserve"><path d="M27,28H9c-0.6,0-1-0.4-1-1V11c0-0.6,0.4-1,1-1h3.1c0.6,0,1,0.4,1,1v1.9h9.7V11c0-0.6,0.4-1,1-1H27c0.6,0,1,0.4,1,1v16 C28,27.6,27.6,28,27,28z M10,26h16V12h-1.2v1.9c0,0.6-0.4,1-1,1H12.1c-0.6,0-1-0.4-1-1V12H10V26z"/><g><g><path d="M21,11h-6c-0.6,0-1-0.4-1-1s0.4-1,1-1h6c0.6,0,1,0.4,1,1S21.6,11,21,11z"/></g><g><path d="M18.7,11h-1.5c-0.6,0-1-0.4-1-1V8c0-0.6,0.4-1,1-1h1.5c0.6,0,1,0.4,1,1v2C19.7,10.5,19.3,11,18.7,11z"/></g></g><g><path d="M18,36.1c-9.9,0-18-8.1-18-18s8.1-18,18-18s18,8.1,18,18S27.9,36.1,18,36.1z M18,2.1c-8.8,0-16,7.2-16,16s7.2,16,16,16 s16-7.2,16-16S26.8,2.1,18,2.1z"/></g></svg>

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/collapsible_questions.js.es6

@@ -0,0 +1,13 @@
+(() => {
+  $("button.collapse-all").on("click", () => {
+    $(".collapsible").addClass("hide");
+    $(".question--collapse .icon-expand").removeClass("hide");
+    $(".question--collapse .icon-collapse").addClass("hide");
+  });
+
+  $("button.expand-all").on("click", () => {
+    $(".collapsible").removeClass("hide");
+    $(".question--collapse .icon-expand").addClass("hide");
+    $(".question--collapse .icon-collapse").removeClass("hide");
+  });
+})(window);

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

@@ -1,8 +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, 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";
@@ -11,21 +15,60 @@
   const answerOptionFieldSelector = ".questionnaire-question-answer-option";
   const answerOptionsWrapperSelector = ".questionnaire-question-answer-options";
   const answerOptionRemoveFieldButtonSelector = ".remove-answer-option";
+  const matrixRowFieldSelector = ".questionnaire-question-matrix-row";
+  const matrixRowsWrapperSelector = ".questionnaire-question-matrix-rows";
+  const matrixRowRemoveFieldButtonSelector = ".remove-matrix-row";
+  const addMatrixRowButtonSelector = ".add-matrix-row";
   const maxChoicesWrapperSelector = ".questionnaire-question-max-choices";
 
+  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({
@@ -44,15 +87,51 @@
     })
   };
 
+  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",
       placeholder: '<div style="border-style: dashed; border-color: #000"></div>',
       forcePlaceholderSize: true,
-      onSortUpdate: () => { autoLabelByPosition.run() }
+      onSortUpdate: () => {
+        autoLabelByPosition.run();
+        autoButtonsByPosition.run();
+      }
     });
   };
 
+  const createDynamicQuestionTitle = (fieldId) => {
+    const targetSelector = `#${fieldId} .question-title-statement`;
+    const locale = $(targetSelector).data("locale");
+    const maxLength = $(targetSelector).data("max-length");
+    const omission = $(targetSelector).data("omission");
+    const placeholder = $(targetSelector).data("placeholder");
+
+    return createLiveTextUpdateComponent({
+      inputSelector: `#${fieldId} input[name$=\\[body_${locale}\\]]`,
+      targetSelector: targetSelector,
+      maxLength: maxLength,
+      omission: omission,
+      placeholder: placeholder
+    });
+  }
+
+  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);
@@ -63,6 +142,7 @@
       containerSelector: ".questionnaire-question-answer-options-list",
       fieldSelector: answerOptionFieldSelector,
       addFieldButtonSelector: ".add-answer-option",
+      fieldTemplateSelector: ".decidim-answer-option-template",
       removeFieldButtonSelector: answerOptionRemoveFieldButtonSelector,
       onAddField: () => {
         autoButtons.run();
@@ -77,23 +157,149 @@
 
   const dynamicFieldsForAnswerOptions = {};
 
-  const isMultipleChoiceOption = ($selectField) => {
-    const value = $selectField.val();
+  const createDynamicFieldsForMatrixRows = (fieldId) => {
+    return createDynamicFields({
+      placeholderId: "questionnaire-question-matrix-row-id",
+      wrapperSelector: `#${fieldId} ${matrixRowsWrapperSelector}`,
+      containerSelector: ".questionnaire-question-matrix-rows-list",
+      fieldSelector: matrixRowFieldSelector,
+      addFieldButtonSelector: addMatrixRowButtonSelector,
+      fieldTemplateSelector: ".decidim-matrix-row-template",
+      removeFieldButtonSelector: matrixRowRemoveFieldButtonSelector,
+      onAddField: () => {
+      },
+      onRemoveField: () => {
+      }
+    });
+  };
+
+  const dynamicFieldsForMatrixRows = {};
+
+  const isMultipleChoiceOption = (value) => {
+    return MULTIPLE_CHOICE_VALUES.indexOf(value) >= 0;
+  }
+
+  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);
+    });
 
-    return value === "single_option" || value === "multiple_option" || value === "sorting"
+    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({
       controllerField: $fieldQuestionTypeSelect,
       wrapperSelector: fieldSelector,
       dependentFieldsSelector: answerOptionsWrapperSelector,
       dependentInputSelector: `${answerOptionFieldSelector} input`,
       enablingCondition: ($field) => {
-        return isMultipleChoiceOption($field);
+        return isMultipleChoiceOption($field.val());
       }
     });
 
@@ -103,21 +309,43 @@
       dependentFieldsSelector: maxChoicesWrapperSelector,
       dependentInputSelector: "select",
       enablingCondition: ($field) => {
-        return $field.val() === "multiple_option"
+        return $field.val() === "multiple_option" || $field.val() === "matrix_multiple";
+      }
+    });
+
+    createFieldDependentInputs({
+      controllerField: $fieldQuestionTypeSelect,
+      wrapperSelector: fieldSelector,
+      dependentFieldsSelector: matrixRowsWrapperSelector,
+      dependentInputSelector: `${matrixRowFieldSelector} input`,
+      enablingCondition: ($field) => {
+        return isMatrix($field.val());
       }
     });
 
     dynamicFieldsForAnswerOptions[fieldId] = createDynamicFieldsForAnswerOptions(fieldId);
+    dynamicFieldsForMatrixRows[fieldId] = createDynamicFieldsForMatrixRows(fieldId);
+    dynamicFieldsForDisplayConditions[fieldId] = createDynamicFieldsForDisplayConditions(fieldId);
 
-    const dynamicFields = dynamicFieldsForAnswerOptions[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) {
-          dynamicFields._addField();
-          dynamicFields._addField();
+          dynamicFieldsAnswerOptions._addField();
+          dynamicFieldsAnswerOptions._addField();
+        }
+      }
+
+      if (isMatrix($fieldQuestionTypeSelect.val())) {
+        const nRows = $fieldQuestionTypeSelect.parents(fieldSelector).find(matrixRowFieldSelector).length;
+
+        if (nRows === 0) {
+          dynamicFieldsMatrixRows._addField();
+          dynamicFieldsMatrixRows._addField();
         }
       }
     };
@@ -142,6 +370,9 @@
     containerSelector: ".questionnaire-questions-list",
     fieldSelector: fieldSelector,
     addFieldButtonSelector: ".add-question",
+    addSeparatorButtonSelector: ".add-separator",
+    fieldTemplateSelector: ".decidim-question-template",
+    separatorTemplateSelector: ".decidim-separator-template",
     removeFieldButtonSelector: ".remove-question",
     moveUpFieldButtonSelector: ".move-up-question",
     moveDownFieldButtonSelector: ".move-down-question",
@@ -163,6 +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();
@@ -183,6 +422,11 @@
     setupInitialQuestionAttributes($target);
   });
 
+  $(displayConditionFieldSelector).each((idx, el) => {
+    const $field = $(el);
+    initializeDisplayConditionField($field)
+  });
+
   autoLabelByPosition.run();
   autoButtonsByPosition.run();
 })(window);