decidim-forms 0.16.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: ddc9adf1fa3236f89e1a63a9f08ec53daa5c9dca46be2de0ed5855334d9dc81a
+  data.tar.gz: 86eb4e54e761e29f03ba5d859bc7303bbaf9770c9f12bb6dda991bfd986e537a
+SHA512:
+  metadata.gz: 19cd51ee2b4d5db3bf9857551e840e9a1f5fbfcc839f89e9c6fbbab3af2342d314f7c11baa2da05b8429e58d1cc2e1fb4bcb9ec4ba8e4c7a773a7918064ee1d7
+  data.tar.gz: c8da685c765fff9c6d7757a25efc573b3bed4bdb2d441f2c63cd7648224f5560729e6e42a2943740b7cd374689e851a2c0a6b5a613b660c6c9d621ba13c51d7c

data/README.md

@@ -0,0 +1,65 @@
+# Decidim::Forms
+
+This gem encapsulates the logic to create and manage forms, so it can be reused in other modules, like surveys and meetings.
+
+## Installation
+
+Add this line to your module's gemspec:
+
+```ruby
+s.add_dependency "decidim-forms", Decidim::YourModule.version
+```
+
+And then execute:
+
+```bash
+bundle
+```
+
+## Contributing
+
+See [Decidim](https://github.com/decidim/decidim).
+
+## License
+
+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.
+
+Other engines are free to include questionnaires on their seeds like this:
+
+```ruby
+Decidim::Forms::Questionnaire.new(
+  title: Decidim::Faker::Localized.paragraph,
+  description: Decidim::Faker::Localized.wrapped("<p>", "</p>") do
+    Decidim::Faker::Localized.paragraph(3)
+  end,
+  tos: Decidim::Faker::Localized.wrapped("<p>", "</p>") do
+    Decidim::Faker::Localized.paragraph(2)
+  end,
+)
+
+Decidim::Surveys::Survey.create!(component: component, questionnaire: questionnaire)
+
+%w(short_answer long_answer).each do |text_question_type|
+  Decidim::Forms::Question.create!(
+    questionnaire: questionnaire,
+    body: Decidim::Faker::Localized.paragraph,
+    question_type: text_question_type
+  )
+end
+
+%w(single_option multiple_option).each do |multiple_choice_question_type|
+  question = Decidim::Forms::Question.create!(
+    questionnaire: questionnaire,
+    body: Decidim::Faker::Localized.paragraph,
+    question_type: multiple_choice_question_type
+  )
+
+  3.times do
+    question.answer_options.create!(body: Decidim::Faker::Localized.sentence)
+  end
+end
+```

data/Rakefile

@@ -0,0 +1,3 @@
+# frozen_string_literal: true
+
+require "decidim/dev/common_rake"

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

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

data/app/assets/config/decidim_forms_manifest.js

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

data/app/assets/images/decidim/surveys/icon.svg

@@ -0,0 +1,19 @@
+<?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>

data/app/assets/javascripts/decidim/forms/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/forms/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/forms/admin/forms.js.es6

@@ -0,0 +1,188 @@
+// = require ./auto_buttons_by_min_items.component
+// = require ./auto_select_options_by_total_items.component
+
+((exports) => {
+  const { AutoLabelByPositionComponent, AutoButtonsByPositionComponent, AutoButtonsByMinItemsComponent, AutoSelectOptionsByTotalItemsComponent, createFieldDependentInputs, createDynamicFields, createSortList } = exports.DecidimAdmin;
+  const { createQuillEditor } = exports.Decidim;
+
+  const wrapperSelector = ".questionnaire-questions";
+  const fieldSelector = ".questionnaire-question";
+  const questionTypeSelector = "select[name$=\\[question_type\\]]";
+  const answerOptionFieldSelector = ".questionnaire-question-answer-option";
+  const answerOptionsWrapperSelector = ".questionnaire-question-answer-options";
+  const answerOptionRemoveFieldButtonSelector = ".remove-answer-option";
+  const maxChoicesWrapperSelector = ".questionnaire-question-max-choices";
+
+  const autoLabelByPosition = new AutoLabelByPositionComponent({
+    listSelector: ".questionnaire-question:not(.hidden)",
+    labelSelector: ".card-title span:first",
+    onPositionComputed: (el, idx) => {
+      $(el).find("input[name$=\\[position\\]]").val(idx);
+    }
+  });
+
+  const autoButtonsByPosition = new AutoButtonsByPositionComponent({
+    listSelector: ".questionnaire-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} .questionnaire-question-answer-option:not(.hidden)`
+    })
+  };
+
+  const createAutoButtonsByMinItemsForAnswerOptions = (fieldId) => {
+    return new AutoButtonsByMinItemsComponent({
+      wrapperSelector: fieldSelector,
+      listSelector: `#${fieldId} ${answerOptionsWrapperSelector} .questionnaire-question-answer-option:not(.hidden)`,
+      minItems: 2,
+      hideOnMinItemsOrLessSelector: answerOptionRemoveFieldButtonSelector
+    })
+  };
+
+  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() }
+    });
+  };
+
+  const createDynamicFieldsForAnswerOptions = (fieldId) => {
+    const autoButtons = createAutoButtonsByMinItemsForAnswerOptions(fieldId);
+    const autoSelectOptions = createAutoMaxChoicesByNumberOfAnswerOptions(fieldId);
+
+    return createDynamicFields({
+      placeholderId: "questionnaire-question-answer-option-id",
+      wrapperSelector: `#${fieldId} ${answerOptionsWrapperSelector}`,
+      containerSelector: ".questionnaire-question-answer-options-list",
+      fieldSelector: answerOptionFieldSelector,
+      addFieldButtonSelector: ".add-answer-option",
+      removeFieldButtonSelector: answerOptionRemoveFieldButtonSelector,
+      onAddField: () => {
+        autoButtons.run();
+        autoSelectOptions.run();
+      },
+      onRemoveField: () => {
+        autoButtons.run();
+        autoSelectOptions.run();
+      }
+    });
+  };
+
+  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];
+
+    const onQuestionTypeChange = () => {
+      if (isMultipleChoiceOption($fieldQuestionTypeSelect)) {
+        const nOptions = $fieldQuestionTypeSelect.parents(fieldSelector).find(answerOptionFieldSelector).length;
+
+        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({
+    placeholderId: "questionnaire-question-id",
+    wrapperSelector: wrapperSelector,
+    containerSelector: ".questionnaire-questions-list",
+    fieldSelector: fieldSelector,
+    addFieldButtonSelector: ".add-question",
+    removeFieldButtonSelector: ".remove-question",
+    moveUpFieldButtonSelector: ".move-up-question",
+    moveDownFieldButtonSelector: ".move-down-question",
+    onAddField: ($field) => {
+      setupInitialQuestionAttributes($field);
+      createSortableList();
+
+      $field.find(".editor-container").each((idx, el) => {
+        createQuillEditor(el);
+      });
+
+      autoLabelByPosition.run();
+      autoButtonsByPosition.run();
+    },
+    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) => {
+    const $target = $(el);
+
+    hideDeletedQuestion($target);
+    setupInitialQuestionAttributes($target);
+  });
+
+  autoLabelByPosition.run();
+  autoButtonsByPosition.run();
+})(window);

data/app/assets/javascripts/decidim/forms/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/forms/forms.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/javascripts/decidim/forms/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);