decidim-surveys 0.10.1 → 0.11.0.pre1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0314b7b90ffc530ec12d80cbe5e58ceaae47b7f3929a0f3e04486c3b787f065f
-  data.tar.gz: 3894dac28ab7bd9f36a83ad0945974fef154298ef75d07045187703343cfeb33
+  metadata.gz: ed1d1fb5c5133239e40959fe85f535d60e92f99198f15a8b0afdf886a0f2e6b5
+  data.tar.gz: e18494afa4f831cce1a1ff12e99f1d6bc69deb5bb3731f8819fa5e007d1877a3
 SHA512:
-  metadata.gz: 191a19a9898c5d0b4c3c2ff3ba7c09a6a9fd19f3ca99b563050af5097e56d3fcefcfbb2f5b3052f621a8d59e4ad0d433efeeb9f7b07a8236295e944e5a1a1b5e
-  data.tar.gz: 5d16bdbf19cddde73546e89cb93a7979be25329a35d1c8395509c977878c4c0104106729f8f1671a2d31709a6804202e63d644152a0b36344e231199dcaa92e7
+  metadata.gz: 93f0f880ae735a0ef20f6ec663f31c31864683ecd84e4402ea5ebfe42b443a7f6a9aabca5cb5709607254d1d39eae8ab7d63fd0922f0a3c2d2c861cd3b6af86e
+  data.tar.gz: 640b3973b1d4d0c05a85e7da67d9d297c257dc71a7d2c02324ca852adb35d192e5687cd6b8296d47471fed8db81cc8edc2bf883f5ca38c9917ace67a0e23697c

data/README.md

@@ -1,10 +1,10 @@
 # Decidim::Surveys
 
-The Surveys module adds one of the main features of Decidim: allows admins to contribute to a participatory process by creating surveys. Users can participate in the surveys answering their questions from the public page.
+The Surveys module adds one of the main components of Decidim: allows admins to contribute to a participatory process by creating surveys. Users can participate in the surveys answering their questions from the public page.
 
 ## Usage
 
-Surveys will be available as a Feature for a Participatory Process.
+Surveys will be available as a Component for a Participatory Process.
 
 ## Installation
 

data/app/assets/config/decidim_surveys_manifest.js

@@ -0,0 +1 @@
+// = link decidim/surveys/surveys.js

data/app/assets/javascripts/decidim/surveys/admin/auto_buttons_by_min_items.component.js.es6

@@ -0,0 +1,25 @@
+((exports) => {
+  class AutoButtonsByMinItemsComponent {
+    constructor(options = {}) {
+      this.listSelector = options.listSelector;
+      this.minItems = options.minItems;
+      this.hideOnMinItemsOrLessSelector = options.hideOnMinItemsOrLessSelector;
+
+      this.run();
+    }
+
+    run() {
+      const $list = $(this.listSelector);
+      const $items = $list.find(this.hideOnMinItemsOrLessSelector);
+
+      if ($list.length <= this.minItems) {
+        $items.hide();
+      } else {
+        $items.show();
+      }
+    }
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.AutoButtonsByMinItemsComponent = AutoButtonsByMinItemsComponent;
+})(window);

data/app/assets/javascripts/decidim/surveys/admin/auto_select_options_by_total_items.component.js.es6

@@ -0,0 +1,23 @@
+((exports) => {
+  class AutoSelectOptionsByTotalItemsComponent {
+    constructor(options = {}) {
+      this.wrapperSelector = options.wrapperSelector;
+      this.selectSelector = options.selectSelector;
+      this.listSelector = options.listSelector;
+    }
+
+    run() {
+      const $list = $(this.listSelector);
+      const $selectField = $list.parents(this.wrapperSelector).find(this.selectSelector);
+
+      $selectField.find("option").slice(1).remove();
+
+      for (let idx = 2; idx <= $list.length; idx += 1) {
+        $(`<option value="${idx}">${idx}</option>`).appendTo($selectField);
+      }
+    }
+  }
+
+  exports.DecidimAdmin = exports.DecidimAdmin || {};
+  exports.DecidimAdmin.AutoSelectOptionsByTotalItemsComponent = AutoSelectOptionsByTotalItemsComponent;
+})(window);

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

@@ -1,26 +1,52 @@
-// = require jquery-tmpl
-// = require ./auto_label_by_position.component
-// = require ./dynamic_fields.component
+// = require ./auto_buttons_by_min_items.component
+// = require ./auto_select_options_by_total_items.component
 
 ((exports) => {
-  const { AutoLabelByPositionComponent, createDynamicFields, createSortList } = exports.DecidimAdmin;
+  const { AutoLabelByPositionComponent, AutoButtonsByPositionComponent, AutoButtonsByMinItemsComponent, AutoSelectOptionsByTotalItemsComponent, createFieldDependentInputs, createDynamicFields, createSortList } = exports.DecidimAdmin;
+  const { createQuillEditor } = exports.Decidim;
 
-  const wrapperSelector = '.survey-questions';
-  const fieldSelector = '.survey-question';
-  const questionTypeSelector = '[name="survey[questions][][question_type]"]';
-  const answerOptionsWrapperSelector = '.survey-question-answer-options';
+  const wrapperSelector = ".survey-questions";
+  const fieldSelector = ".survey-question";
+  const questionTypeSelector = "select[name$=\\[question_type\\]]";
+  const answerOptionFieldSelector = ".survey-question-answer-option";
+  const answerOptionsWrapperSelector = ".survey-question-answer-options";
+  const answerOptionRemoveFieldButtonSelector = ".remove-answer-option";
+  const maxChoicesWrapperSelector = ".survey-question-max-choices";
 
   const autoLabelByPosition = new AutoLabelByPositionComponent({
-    listSelector: '.survey-question:not(.hidden)',
-    labelSelector: '.card-title span:first',
+    listSelector: ".survey-question:not(.hidden)",
+    labelSelector: ".card-title span:first",
     onPositionComputed: (el, idx) => {
-      $(el).find('input[name="survey[questions][][position]"]').val(idx);
+      $(el).find("input[name$=\\[position\\]]").val(idx);
     }
   });
 
+  const autoButtonsByPosition = new AutoButtonsByPositionComponent({
+    listSelector: ".survey-question:not(.hidden)",
+    hideOnFirstSelector: ".move-up-question",
+    hideOnLastSelector: ".move-down-question"
+  });
+
+  const createAutoMaxChoicesByNumberOfAnswerOptions = (fieldId) => {
+    return new AutoSelectOptionsByTotalItemsComponent({
+      wrapperSelector: fieldSelector,
+      selectSelector: `${maxChoicesWrapperSelector} select`,
+      listSelector: `#${fieldId} ${answerOptionsWrapperSelector} .survey-question-answer-option:not(.hidden)`
+    })
+  };
+
+  const createAutoButtonsByMinItemsForAnswerOptions = (fieldId) => {
+    return new AutoButtonsByMinItemsComponent({
+      wrapperSelector: fieldSelector,
+      listSelector: `#${fieldId} ${answerOptionsWrapperSelector} .survey-question-answer-option:not(.hidden)`,
+      minItems: 2,
+      hideOnMinItemsOrLessSelector: answerOptionRemoveFieldButtonSelector
+    })
+  };
+
   const createSortableList = () => {
-    createSortList('.survey-questions-list:not(.published)', {
-      handle: '.question-divider',
+    createSortList(".survey-questions-list:not(.published)", {
+      handle: ".question-divider",
       placeholder: '<div style="border-style: dashed; border-color: #000"></div>',
       forcePlaceholderSize: true,
       onSortUpdate: () => { autoLabelByPosition.run() }
@@ -28,58 +54,135 @@
   };
 
   const createDynamicFieldsForAnswerOptions = (fieldId) => {
-    createDynamicFields({
-      templateId: `survey-question-answer-option-tmpl`,
-      tabsPrefix: `survey-question-answer-option`,
+    const autoButtons = createAutoButtonsByMinItemsForAnswerOptions(fieldId);
+    const autoSelectOptions = createAutoMaxChoicesByNumberOfAnswerOptions(fieldId);
+
+    return createDynamicFields({
+      placeholderId: "survey-question-answer-option-id",
       wrapperSelector: `#${fieldId} ${answerOptionsWrapperSelector}`,
-      containerSelector: `.survey-question-answer-options-list`,
-      fieldSelector: `.survey-question-answer-option`,
-      addFieldButtonSelector: `.add-answer-option`,
-      removeFieldButtonSelector: `.remove-answer-option`
+      containerSelector: ".survey-question-answer-options-list",
+      fieldSelector: answerOptionFieldSelector,
+      addFieldButtonSelector: ".add-answer-option",
+      removeFieldButtonSelector: answerOptionRemoveFieldButtonSelector,
+      onAddField: () => {
+        autoButtons.run();
+        autoSelectOptions.run();
+      },
+      onRemoveField: () => {
+        autoButtons.run();
+        autoSelectOptions.run();
+      }
     });
   };
 
-  const setAnswerOptionsWrapperVisibility = ($target) => {
-    const $answerOptionsWrapper = $target.parents(fieldSelector).find(answerOptionsWrapperSelector);
-    const value = $target.val();
+  const dynamicFieldsForAnswerOptions = {};
+
+  const isMultipleChoiceOption = ($selectField) => {
+    const value = $selectField.val();
+
+    return value === "single_option" || value === "multiple_option" || value === "sorting"
+  }
+
+  const setupInitialQuestionAttributes = ($target) => {
+    const fieldId = $target.attr("id");
+    const $fieldQuestionTypeSelect = $target.find(questionTypeSelector);
+
+    createFieldDependentInputs({
+      controllerField: $fieldQuestionTypeSelect,
+      wrapperSelector: fieldSelector,
+      dependentFieldsSelector: answerOptionsWrapperSelector,
+      dependentInputSelector: `${answerOptionFieldSelector} input`,
+      enablingCondition: ($field) => {
+        return isMultipleChoiceOption($field);
+      }
+    });
+
+    createFieldDependentInputs({
+      controllerField: $fieldQuestionTypeSelect,
+      wrapperSelector: fieldSelector,
+      dependentFieldsSelector: maxChoicesWrapperSelector,
+      dependentInputSelector: "select",
+      enablingCondition: ($field) => {
+        return $field.val() === "multiple_option"
+      }
+    });
+
+    dynamicFieldsForAnswerOptions[fieldId] = createDynamicFieldsForAnswerOptions(fieldId);
+
+    const dynamicFields = dynamicFieldsForAnswerOptions[fieldId];
 
-    $answerOptionsWrapper.hide();
+    const onQuestionTypeChange = () => {
+      if (isMultipleChoiceOption($fieldQuestionTypeSelect)) {
+        const nOptions = $fieldQuestionTypeSelect.parents(fieldSelector).find(answerOptionFieldSelector).length;
 
-    if (value === 'single_option' || value === 'multiple_option') {
-      $answerOptionsWrapper.show();
+        if (nOptions === 0) {
+          dynamicFields._addField();
+          dynamicFields._addField();
+        }
+      }
+    };
+
+    $fieldQuestionTypeSelect.on("change", onQuestionTypeChange);
+
+    onQuestionTypeChange();
+  }
+
+  const hideDeletedQuestion = ($target) => {
+    const inputDeleted = $target.find("input[name$=\\[deleted\\]]").val();
+
+    if (inputDeleted === "true") {
+      $target.addClass("hidden");
+      $target.hide();
     }
-  };
+  }
 
   createDynamicFields({
-    templateId: 'survey-question-tmpl',
-    tabsPrefix: 'survey-question',
+    placeholderId: "survey-question-id",
     wrapperSelector: wrapperSelector,
-    containerSelector: '.survey-questions-list',
+    containerSelector: ".survey-questions-list",
     fieldSelector: fieldSelector,
-    addFieldButtonSelector: '.add-question',
-    removeFieldButtonSelector: '.remove-question',
+    addFieldButtonSelector: ".add-question",
+    removeFieldButtonSelector: ".remove-question",
+    moveUpFieldButtonSelector: ".move-up-question",
+    moveDownFieldButtonSelector: ".move-down-question",
     onAddField: ($field) => {
-      const fieldId = $field.attr('id');
-
+      setupInitialQuestionAttributes($field);
       createSortableList();
+
+      $field.find(".editor-container").each((idx, el) => {
+        createQuillEditor(el);
+      });
+
       autoLabelByPosition.run();
-      createDynamicFieldsForAnswerOptions(fieldId);
-      setAnswerOptionsWrapperVisibility($field.find(questionTypeSelector));
+      autoButtonsByPosition.run();
     },
-    onRemoveField: () => {
+    onRemoveField: ($field) => {
       autoLabelByPosition.run();
+      autoButtonsByPosition.run();
+
+      $field.find(answerOptionRemoveFieldButtonSelector).each((idx, el) => {
+        dynamicFieldsForAnswerOptions[$field.attr("id")]._removeField(el);
+      });
+    },
+    onMoveUpField: () => {
+      autoLabelByPosition.run();
+      autoButtonsByPosition.run();
+    },
+    onMoveDownField: () => {
+      autoLabelByPosition.run();
+      autoButtonsByPosition.run();
     }
   });
 
   createSortableList();
 
   $(fieldSelector).each((idx, el) => {
-    createDynamicFieldsForAnswerOptions($(el).attr('id'));
-    setAnswerOptionsWrapperVisibility($(el).find(questionTypeSelector));
-  });
+    const $target = $(el);
 
-  $(wrapperSelector).on('change', questionTypeSelector, (ev) => {
-    const $target = $(ev.target);
-    setAnswerOptionsWrapperVisibility($target);
+    hideDeletedQuestion($target);
+    setupInitialQuestionAttributes($target);
   });
+
+  autoLabelByPosition.run();
+  autoButtonsByPosition.run();
 })(window);

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

@@ -0,0 +1,65 @@
+((exports) => {
+  class AutosortableCheckboxesComponent {
+    constructor(options = {}) {
+      this.wrapperField = options.wrapperField;
+      this._bindEvent();
+      this._run();
+    }
+
+    _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"));
+          }
+
+          $parentLabel.addClass("sorted");
+          $parentLabel.addClass("last-sorted");
+        } else {
+          const $lastUnsorted = this.wrapperField.find("label:not(.sorted)").last();
+
+          if ($lastUnsorted.length > 0) {
+            $parentLabel.insertBefore($lastUnsorted);
+          } else {
+            $parentLabel.insertAfter(this.wrapperField.find("label:last-child"));
+          }
+
+          $parentLabel.removeClass("sorted");
+        }
+      });
+
+      $(this.wrapperField).find("label").each((idx, el) => {
+        const $positionSelector = $(el).find(".position");
+        const $positionField = $(el).find("input[name$=\\[position\\]]");
+
+        if ($(el).hasClass("sorted")) {
+          $positionField.val(idx);
+          $positionField.prop("disabled", false);
+          $positionSelector.html(`${idx + 1}. `);
+        } else {
+          $positionField.val("");
+          $positionField.prop("disabled", true);
+          $positionSelector.html("");
+        }
+      });
+    }
+
+    _bindEvent() {
+      $(this.wrapperField).find("input[type=checkbox]").on("change", () => {
+        this._run();
+      });
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.createAutosortableCheckboxes = (options) => {
+    return new AutosortableCheckboxesComponent(options);
+  };
+})(window);

data/app/assets/javascripts/decidim/surveys/option_attached_inputs.component.js.es6

@@ -0,0 +1,32 @@
+((exports) => {
+  class OptionAttachedInputsComponent {
+    constructor(options = {}) {
+      this.wrapperField = options.wrapperField;
+      this.controllerFieldSelector = options.controllerFieldSelector;
+      this.dependentInputSelector = options.dependentInputSelector;
+      this.controllerSelector = this.wrapperField.find(this.controllerFieldSelector);
+      this._bindEvent();
+      this._run();
+    }
+
+    _run() {
+      this.controllerSelector.each((idx, el) => {
+        const $field = $(el);
+        const enabled = $field.is(":checked");
+
+        $field.parents("label").find(this.dependentInputSelector).prop("disabled", !enabled);
+      });
+    }
+
+    _bindEvent() {
+      this.controllerSelector.on("change", () => {
+        this._run();
+      });
+    }
+  }
+
+  exports.Decidim = exports.Decidim || {};
+  exports.Decidim.createOptionAttachedInputs = (options) => {
+    return new OptionAttachedInputsComponent(options);
+  };
+})(window);

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

@@ -0,0 +1,20 @@
+// = require ./option_attached_inputs.component
+// = require ./autosortable_checkboxes.component
+
+((exports) => {
+  const { createOptionAttachedInputs, createAutosortableCheckboxes } = exports.Decidim;
+
+  $(".radio-button-collection, .check-box-collection").each((idx, el) => {
+    createOptionAttachedInputs({
+      wrapperField: $(el),
+      controllerFieldSelector: "input[type=radio], input[type=checkbox]",
+      dependentInputSelector: "input[type=text], input[type=hidden]"
+    });
+  });
+
+  $(".sortable-check-box-collection").each((idx, el) => {
+    createAutosortableCheckboxes({
+      wrapperField: $(el)
+    })
+  });
+})(window);

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

@@ -1,14 +1,31 @@
 form.answer-survey{
   .radio-button-collection,
-  .check-box-collection{
+  .check-box-collection,
+  .sortable-check-box-collection{
     margin: 0 0 1rem;
   }
 
-  .tos-agreement-help-text{
-    margin: .2rem 0 0;
+  .tos-agreement{
+    margin: 1rem 0 0;
+
+    .help-text{
+      margin: .2rem 0 0;
+    }
   }
 
   label.survey-question{
     font-weight: bold;
   }
+
+  .help-text{
+    margin-top: .5em;
+
+    .ql-video{
+      margin: .5em auto;
+    }
+  }
+
+  .last-sorted{
+    margin-bottom: 1rem;
+  }
 }