decidim-forms 0.19.0 → 0.22.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0916ac709d1816a9f838bdf0375b522b90cc42807e0d74f8bbf02e4437c341f3'
-  data.tar.gz: 27c4a52effed7e6d7aaa8edb5d9d4627aedf4837192201883e91cbf85bd12482
+  metadata.gz: 73b7dd5e0d7e94151c79b989666d5a3d1e3790db9c97cee7a35c587a0a00977e
+  data.tar.gz: 4e7f6a2d27f58079d5eed9d08404373a66636f6960a220dc1572809a482dfbb3
 SHA512:
-  metadata.gz: 292bb79f355a53d0c2bc873c89eca392868b6b64e4db423007dc84d270f46a83e892b51094155e771727419ed0ce2049d40853611b507fedfe8860a91ee3b776
-  data.tar.gz: a0d0f60932f6686f72dbd5064cdadb0025f36a8e6934d2817cc5ed14828403fe71b767223f7c77e2b7e1b421c9af4d0dbcf33c65e33be272449f07f6f84b57fb
+  metadata.gz: b2eed83cff858299ee6fef944b1951150ad4634a193fec095ca20a393bfec8de0f1a2fe1e09447728d40dbb2898ce4b884d4ab82cdecaf93c6025efd1d677bd5
+  data.tar.gz: e1e84f6aa8d5a1cb2ea2fe95593bd0ba0977d536c4abb3a3cc66726cf66a425dd7c1622f462cc9324c5fbf0d375e0dcc43c2844eb0b0fafc5457f97d34a6de70

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.js

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

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/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,9 @@
 // = require ./auto_buttons_by_min_items.component
 // = require ./auto_select_options_by_total_items.component
+// = require ./live_text_update.component
 
 ((exports) => {
-  const { AutoLabelByPositionComponent, AutoButtonsByPositionComponent, AutoButtonsByMinItemsComponent, AutoSelectOptionsByTotalItemsComponent, createFieldDependentInputs, createDynamicFields, createSortList } = exports.DecidimAdmin;
+  const { AutoLabelByPositionComponent, AutoButtonsByPositionComponent, AutoButtonsByMinItemsComponent, AutoSelectOptionsByTotalItemsComponent, createLiveTextUpdateComponent, createFieldDependentInputs, createDynamicFields, createSortList } = exports.DecidimAdmin;
   const { createQuillEditor } = exports.Decidim;
 
   const wrapperSelector = ".questionnaire-questions";
@@ -11,8 +12,15 @@
   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 MULTIPLE_CHOICE_VALUES = ["single_option", "multiple_option", "sorting", "matrix_single", "matrix_multiple"];
+  const MATRIX_VALUES = ["matrix_single", "matrix_multiple"];
+
   const autoLabelByPosition = new AutoLabelByPositionComponent({
     listSelector: ".questionnaire-question:not(.hidden)",
     labelSelector: ".card-title span:first",
@@ -49,10 +57,29 @@
       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 createDynamicFieldsForAnswerOptions = (fieldId) => {
     const autoButtons = createAutoButtonsByMinItemsForAnswerOptions(fieldId);
     const autoSelectOptions = createAutoMaxChoicesByNumberOfAnswerOptions(fieldId);
@@ -63,6 +90,7 @@
       containerSelector: ".questionnaire-question-answer-options-list",
       fieldSelector: answerOptionFieldSelector,
       addFieldButtonSelector: ".add-answer-option",
+      fieldTemplateSelector: ".decidim-answer-option-template",
       removeFieldButtonSelector: answerOptionRemoveFieldButtonSelector,
       onAddField: () => {
         autoButtons.run();
@@ -77,16 +105,42 @@
 
   const dynamicFieldsForAnswerOptions = {};
 
+  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 = ($selectField) => {
     const value = $selectField.val();
 
-    return value === "single_option" || value === "multiple_option" || value === "sorting"
+    return MULTIPLE_CHOICE_VALUES.indexOf(value) >= 0;
+  }
+
+  const isMatrix = ($selectField) => {
+    const value = $selectField.val();
+
+    return MATRIX_VALUES.indexOf(value) >= 0;
   }
 
   const setupInitialQuestionAttributes = ($target) => {
     const fieldId = $target.attr("id");
     const $fieldQuestionTypeSelect = $target.find(questionTypeSelector);
 
+    createDynamicQuestionTitle(fieldId);
+
     createFieldDependentInputs({
       controllerField: $fieldQuestionTypeSelect,
       wrapperSelector: fieldSelector,
@@ -103,21 +157,42 @@
       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);
       }
     });
 
     dynamicFieldsForAnswerOptions[fieldId] = createDynamicFieldsForAnswerOptions(fieldId);
+    dynamicFieldsForMatrixRows[fieldId] = createDynamicFieldsForMatrixRows(fieldId);
 
-    const dynamicFields = dynamicFieldsForAnswerOptions[fieldId];
+    const dynamicFieldsAnswerOptions = dynamicFieldsForAnswerOptions[fieldId];
+    const dynamicFieldsMatrixRows = dynamicFieldsForMatrixRows[fieldId];
 
     const onQuestionTypeChange = () => {
       if (isMultipleChoiceOption($fieldQuestionTypeSelect)) {
         const nOptions = $fieldQuestionTypeSelect.parents(fieldSelector).find(answerOptionFieldSelector).length;
 
         if (nOptions === 0) {
-          dynamicFields._addField();
-          dynamicFields._addField();
+          dynamicFieldsAnswerOptions._addField();
+          dynamicFieldsAnswerOptions._addField();
+        }
+      }
+
+      if (isMatrix($fieldQuestionTypeSelect)) {
+        const nRows = $fieldQuestionTypeSelect.parents(fieldSelector).find(matrixRowFieldSelector).length;
+
+        if (nRows === 0) {
+          dynamicFieldsMatrixRows._addField();
+          dynamicFieldsMatrixRows._addField();
         }
       }
     };
@@ -142,10 +217,20 @@
     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",
     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();
 
@@ -163,6 +248,9 @@
       $field.find(answerOptionRemoveFieldButtonSelector).each((idx, el) => {
         dynamicFieldsForAnswerOptions[$field.attr("id")]._removeField(el);
       });
+      $field.find(matrixRowRemoveFieldButtonSelector).each((idx, el) => {
+        dynamicFieldsForMatrixRows[$field.attr("id")]._removeField(el);
+      });
     },
     onMoveUpField: () => {
       autoLabelByPosition.run();

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

@@ -0,0 +1,52 @@
+/**
+ * This component allows for an element's text value to be updated with the value
+ * of an input whenever this input's value is changed.
+ *
+ * @param {object} options
+ *
+ * Available options:
+ * {string} `inputSelector`:  The query selector to locate the input element
+ * {string} `targetSelector`: The query selector to locate the target element
+ * {number} `maxLength`: The maximum characters from the input value to be displayed in the target
+ * {string} `omission`: The string used to shorten the value to the given maxLength (e.g. "...")
+ * {string} `placeholder`: The string to be displayed in the target element when the input has no value
+ */
+((exports) => {
+  class LiveTextUpdateComponent {
+    constructor(options = {}) {
+      this.inputSelector = options.inputSelector;
+      this.targetSelector = options.targetSelector;
+      this.maxLength = options.maxLength;
+      this.omission = options.omission;
+      this.placeholder = options.placeholder;
+      this._bindEvent();
+      this._run();
+    }
+
+    _run() {
+      const $input = $(this.inputSelector);
+      const $target = $(this.targetSelector);
+
+      let text = $input.val() || this.placeholder;
+
+      // truncate string
+      if (text.length > this.maxLength) {
+        text = text.substring(0, this.maxLength - this.omission.length) + this.omission;
+      }
+
+      $target.text(text);
+    }
+
+    _bindEvent() {
+      const $input = $(this.inputSelector);
+      $input.on("change", this._run.bind(this));
+    }
+
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.LiveTextUpdateComponent = LiveTextUpdateComponent;
+  exports.DecidimAdmin.createLiveTextUpdateComponent = (options) => {
+    return new LiveTextUpdateComponent(options);
+  }
+})(window);

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

@@ -1,8 +1,9 @@
 // = require ./option_attached_inputs.component
 // = require ./autosortable_checkboxes.component
+// = require ./max_choices_alert.component
 
 ((exports) => {
-  const { createOptionAttachedInputs, createAutosortableCheckboxes } = exports.Decidim;
+  const { createOptionAttachedInputs, createAutosortableCheckboxes, createMaxChoicesAlertComponent } = exports.Decidim;
 
   $(".radio-button-collection, .check-box-collection").each((idx, el) => {
     createOptionAttachedInputs({
@@ -12,9 +13,49 @@
     });
   });
 
+  $.unique($(".check-box-collection").parents(".answer")).each((idx, el) => {
+    const maxChoices = $(el).data("max-choices");
+    if (maxChoices) {
+      createMaxChoicesAlertComponent({
+        wrapperField: $(el),
+        controllerFieldSelector: "input[type=checkbox]",
+        controllerCollectionSelector: ".check-box-collection",
+        alertElement: $(el).find(".max-choices-alert"),
+        maxChoices: maxChoices
+      });
+    }
+  });
+
   $(".sortable-check-box-collection").each((idx, el) => {
     createAutosortableCheckboxes({
       wrapperField: $(el)
     })
   });
+
+  const $form = $("form.answer-questionnaire");
+  if ($form.length > 0) {
+    $form.find("input, textarea, select").on("change", () => {
+      $form.data("changed", true);
+    });
+
+    const safePath = $form.data("safe-path").split("?")[0];
+    $(document).on("click", "a", (event) => {
+      window.exitUrl = event.currentTarget.href;
+    });
+    $(document).on("submit", "form", (event) => {
+      window.exitUrl = event.currentTarget.action;
+    });
+
+    window.onbeforeunload = () => {
+      const exitUrl = window.exitUrl;
+      const hasChanged = $form.data("changed");
+      window.exitUrl = null;
+
+      if (!hasChanged || (exitUrl && exitUrl.includes(safePath))) {
+        return null;
+      }
+
+      return "";
+    }
+  }
 })(window);

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

@@ -0,0 +1,44 @@
+((exports) => {
+  class MaxChoicesAlertComponent {
+    constructor(options = {}) {
+      this.wrapperField = options.wrapperField;
+      this.alertElement = options.alertElement;
+      this.controllerFieldSelector = options.controllerFieldSelector;
+      this.controllerCollectionSelector = options.controllerCollectionSelector;
+      this.maxChoices = options.maxChoices;
+      this.controllerSelector = this.wrapperField.find(this.controllerFieldSelector);
+      this._bindEvent();
+      this._run();
+    }
+
+    _run() {
+      const rows = this.wrapperField.find(this.controllerCollectionSelector);
+
+      let alert = false;
+
+      rows.each((rowIdx, row) => {
+        const checked = $(row).find(this.controllerFieldSelector).filter((checkboxIdx, checkbox) => $(checkbox).is(":checked"));
+
+        alert = alert || checked.length > this.maxChoices;
+      });
+
+      if (alert) {
+        this.alertElement.show();
+      }
+      else {
+        this.alertElement.hide();
+      }
+    }
+
+    _bindEvent() {
+      this.controllerSelector.on("change", () => {
+        this._run();
+      });
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.createMaxChoicesAlertComponent = (options) => {
+    return new MaxChoicesAlertComponent(options);
+  };
+})(window);

data/app/assets/stylesheets/decidim/forms/forms.scss

@@ -35,3 +35,42 @@
 .questionnaire-question_readonly-answer{
   font-weight: normal;
 }
+
+.questionnaire-question-matrix{
+  .collection-input{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    flex-basis: 0;
+
+    input[type="text"]{
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+
+    input[type="checkbox"],
+    input[type="radio"]{
+      margin-bottom: 0;
+
+      & ~ input[type="text"]{
+        margin-left: .5rem;
+      }
+    }
+  }
+
+  tr,
+  tr:nth-child(2n){
+    background: initial;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  thead td{
+    text-align: center;
+  }
+
+  td{
+    min-width: 100px;
+    border-right: 1px solid #f0f0f0;
+  }
+}