decidim-meetings 0.24.3 → 0.25.0.rc1

data/app/models/decidim/meetings/poll.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Meetings
+    class Poll < Meetings::ApplicationRecord
+      has_one :questionnaire,
+              class_name: "Decidim::Meetings::Questionnaire",
+              dependent: :destroy,
+              inverse_of: :questionnaire_for,
+              as: :questionnaire_for
+
+      belongs_to :meeting, foreign_key: "decidim_meeting_id", class_name: "Decidim::Meetings::Meeting"
+
+      delegate :organization, to: :meeting
+
+      QUESTION_TYPES = %w(single_option multiple_option).freeze
+    end
+  end
+end

data/app/models/decidim/meetings/question.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Meetings
+    # The data store for a Question in the Decidim::Meetings component.
+    class Question < Meetings::ApplicationRecord
+      include Decidim::TranslatableResource
+
+      QUESTION_TYPES = %w(single_option multiple_option).freeze
+
+      translatable_fields :body
+      enum status: { unpublished: 0, published: 1, closed: 2 }
+
+      belongs_to :questionnaire, class_name: "Decidim::Meetings::Questionnaire", foreign_key: "decidim_questionnaire_id"
+
+      has_many :answers,
+               class_name: "Decidim::Meetings::Answer",
+               foreign_key: "decidim_question_id",
+               dependent: :destroy,
+               inverse_of: :question
+
+      has_many :answer_options,
+               class_name: "Decidim::Meetings::AnswerOption",
+               foreign_key: "decidim_question_id",
+               dependent: :destroy,
+               inverse_of: :question
+
+      validates :question_type, inclusion: { in: QUESTION_TYPES }
+
+      scope :visible, -> { where(status: [:published, :closed]) }
+
+      def multiple_choice?
+        %w(single_option multiple_option).include?(question_type)
+      end
+
+      # Public: returns whether the questionnaire is answered by the user or not.
+      def answered_by?(user)
+        questionnaire.answers.where({ user: user, question: self }).any? if questionnaire.questions.present? && user.present?
+      end
+
+      def number_of_options
+        answer_options.size
+      end
+
+      def translated_body
+        Decidim::Forms::QuestionPresenter.new(self).translated_body
+      end
+
+      def answers_count
+        questionnaire.answers.where(question: self).count
+      end
+    end
+  end
+end

data/app/models/decidim/meetings/questionnaire.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Meetings
+    # The data store for a Questionnaire in the Decidim::Meetings component.
+    class Questionnaire < Meetings::ApplicationRecord
+      belongs_to :questionnaire_for, polymorphic: true
+
+      has_many :questions, -> { order(:position) }, class_name: "Question", foreign_key: "decidim_questionnaire_id", dependent: :destroy
+      has_many :answers, class_name: "Answer", foreign_key: "decidim_questionnaire_id", dependent: :destroy
+
+      # Public: returns whether the questionnaire questions can be modified or not.
+      def questions_editable?
+        has_component = questionnaire_for.meeting.respond_to? :component
+        (has_component && !questionnaire_for.meeting.component.published?) || answers.empty?
+      end
+
+      def all_questions_unpublished?
+        questions.all?(&:unpublished?)
+      end
+    end
+  end
+end

data/app/models/decidim/meetings/registration.rb

@@ -16,6 +16,8 @@ module Decidim
 
       before_validation :generate_code, on: :create
 
+      scope :public_participant, -> { where(decidim_user_group_id: nil, public_participation: true) }
+
       def self.user_collection(user)
         where(decidim_user_id: user.id)
       end

data/app/packs/entrypoints/decidim_meetings.js

@@ -0,0 +1,6 @@
+import "src/decidim/meetings/meetings_form"
+import "src/decidim/meetings/meetings_polls"
+import "src/decidim/forms/forms"
+
+// Images
+require.context("../images", true)

data/app/packs/entrypoints/decidim_meetings_admin.js

@@ -0,0 +1,5 @@
+import "src/decidim/meetings/admin/agendas"
+import "src/decidim/meetings/admin/destroy_meeting_alert"
+import "src/decidim/meetings/admin/meetings_form"
+import "src/decidim/meetings/admin/registrations_form"
+import "src/decidim/meetings/admin/registrations_invite_form"

data/app/packs/src/decidim/meetings/admin/agendas.js

@@ -0,0 +1,159 @@
+import AutoButtonsByPositionComponent from "src/decidim/admin/auto_buttons_by_position.component"
+import AutoLabelByPositionComponent from "src/decidim/admin/auto_label_by_position.component"
+import createSortList from "src/decidim/admin/sort_list.component"
+import createDynamicFields from "src/decidim/admin/dynamic_fields.component"
+import createQuillEditor from "src/decidim/editor"
+
+const wrapperSelector = ".meeting-agenda-items";
+const fieldSelector = ".meeting-agenda-item";
+const childsWrapperSelector = ".meeting-agenda-item-childs";
+const childFieldSelector = ".meeting-agenda-item-child";
+
+const autoLabelByPosition = new AutoLabelByPositionComponent({
+  listSelector: ".meeting-agenda-item:not(.hidden)",
+  labelSelector: ".card-title span:first",
+  onPositionComputed: (el, idx) => {
+    $(el).find("input[name$=\\[position\\]]").val(idx);
+  }
+});
+
+const autoButtonsByPosition = new AutoButtonsByPositionComponent({
+  listSelector: ".meeting-agenda-item:not(.hidden)",
+  hideOnFirstSelector: ".move-up-agenda-item",
+  hideOnLastSelector: ".move-down-agenda-item"
+});
+
+const createSortableList = () => {
+  createSortList(".meeting-agenda-items-list:not(.published)", {
+    handle: ".agenda-item-divider",
+    placeholder: '<div style="border-style: dashed; border-color: #000"></div>',
+    forcePlaceholderSize: true,
+    onSortUpdate: () => { autoLabelByPosition.run() }
+  });
+};
+
+const createSortableListChild = () => {
+  createSortList(".meeting-agenda-item-childs-list:not(.published)", {
+    handle: ".agenda-item-child-divider",
+    placeholder: '<div style="border-style: dashed; border-color: #000"></div>',
+    forcePlaceholderSize: true,
+    onSortUpdate: () => { autoLabelByPosition.run() }
+  });
+};
+
+const autoLabelByPositionChild = new AutoLabelByPositionComponent({
+  listSelector: ".meeting-agenda-item-child:not(.hidden)",
+  labelSelector: ".card-title span:first",
+  onPositionComputed: (el, idx) => {
+    $(el).find("input[name$=\\[position\\]]").val(idx);
+  }
+});
+
+const autoButtonsByPositionChild = new AutoButtonsByPositionComponent({
+  listSelector: ".meeting-agenda-item-child:not(.hidden)",
+  hideOnFirstSelector: ".move-up-agenda-item-child",
+  hideOnLastSelector: ".move-down-agenda-item-child"
+});
+
+const createDynamicFieldsForAgendaItemChilds = (fieldId) => {
+  return createDynamicFields({
+    placeholderId: "meeting-agenda-item-child-id",
+    wrapperSelector: `#${fieldId} ${childsWrapperSelector}`,
+    containerSelector: ".meeting-agenda-item-childs-list",
+    fieldSelector: childFieldSelector,
+    addFieldButtonSelector: ".add-agenda-item-child",
+    removeFieldButtonSelector: ".remove-agenda-item-child",
+    moveUpFieldButtonSelector: ".move-up-agenda-item-child",
+    moveDownFieldButtonSelector: ".move-down-agenda-item-child",
+
+    onAddField: ($field) => {
+      createSortableListChild();
+
+      $field.find(".editor-container").each((idx, el) => {
+        createQuillEditor(el);
+      });
+
+      autoLabelByPositionChild.run();
+      autoButtonsByPositionChild.run();
+    },
+    onRemoveField: () => {
+      autoLabelByPositionChild.run();
+      autoButtonsByPositionChild.run();
+    },
+    onMoveUpField: () => {
+      autoLabelByPositionChild.run();
+      autoButtonsByPositionChild.run();
+    },
+    onMoveDownField: () => {
+      autoLabelByPositionChild.run();
+      autoButtonsByPositionChild.run();
+    }
+  });
+};
+
+const dynamicFieldsForAgendaItemChilds = {};
+
+const setupInitialAgendaItemChildAttributes = ($target) => {
+  const fieldId = $target.attr("id");
+
+  dynamicFieldsForAgendaItemChilds[fieldId] = createDynamicFieldsForAgendaItemChilds(fieldId);
+
+}
+
+const hideDeletedAgendaItem = ($target) => {
+  const inputDeleted = $target.find("input[name$=\\[deleted\\]]").val();
+
+  if (inputDeleted === "true") {
+    $target.addClass("hidden");
+    $target.hide();
+  }
+};
+
+createDynamicFields({
+  placeholderId: "meeting-agenda-item-id",
+  wrapperSelector: wrapperSelector,
+  containerSelector: ".meeting-agenda-items-list",
+  fieldSelector: fieldSelector,
+  addFieldButtonSelector: ".add-agenda-item",
+  removeFieldButtonSelector: ".remove-agenda-item",
+  moveUpFieldButtonSelector: ".move-up-agenda-item",
+  moveDownFieldButtonSelector: ".move-down-agenda-item",
+  onAddField: ($field) => {
+    // createDynamicFieldsForAgendaItemChilds($field);
+    setupInitialAgendaItemChildAttributes($field);
+    createSortableList();
+
+    $field.find(".editor-container").each((idx, el) => {
+      createQuillEditor(el);
+    });
+
+    autoLabelByPosition.run();
+    autoButtonsByPosition.run();
+  },
+  onRemoveField: () => {
+    autoLabelByPosition.run();
+    autoButtonsByPosition.run();
+  },
+  onMoveUpField: () => {
+    autoLabelByPosition.run();
+    autoButtonsByPosition.run();
+  },
+  onMoveDownField: () => {
+    autoLabelByPosition.run();
+    autoButtonsByPosition.run();
+  }
+});
+
+createSortableList();
+
+$(fieldSelector).each((idx, el) => {
+  const $target = $(el);
+
+  hideDeletedAgendaItem($target);
+  setupInitialAgendaItemChildAttributes($target);
+});
+
+autoLabelByPosition.run();
+autoButtonsByPosition.run();
+autoLabelByPositionChild.run();
+autoButtonsByPositionChild.run();

data/app/{assets/javascripts/decidim/meetings/admin/meetings_form.js.es6 → packs/src/decidim/meetings/admin/meetings_form.js}

@@ -1,7 +1,10 @@
-((exports) => {
-  const { AutoLabelByPositionComponent, AutoButtonsByPositionComponent, createDynamicFields, createSortList } = exports.DecidimAdmin;
-  const { attachGeocoding } = window.Decidim;
+import AutoButtonsByPositionComponent from "src/decidim/admin/auto_buttons_by_position.component"
+import AutoLabelByPositionComponent from "src/decidim/admin/auto_label_by_position.component"
+import createSortList from "src/decidim/admin/sort_list.component"
+import createDynamicFields from "src/decidim/admin/dynamic_fields.component"
+import attachGeocoding from "src/decidim/geocoding/attach_input"
 
+$(() => {
   const wrapperSelector = ".meeting-services";
   const fieldSelector = ".meeting-service";
 
@@ -144,4 +147,4 @@
     toggleDependsOnSelect($meetingTypeOfMeeting, $meetingOnlineFields, "online");
     toggleDependsOnSelect($meetingTypeOfMeeting, $meetingInPersonFields, "in_person");
   }
-})(window);
+})

data/app/{assets/javascripts/decidim/meetings/admin/registrations_invite_form.es6 → packs/src/decidim/meetings/admin/registrations_invite_form.js}

@@ -1,6 +1,6 @@
-((exports) => {
-  const { createFieldDependentInputs } = exports.DecidimAdmin;
+import createFieldDependentInputs from "src/decidim/admin/field_dependent_inputs.component"
 
+$(() => {
   const $attendeeType = $('[name="meeting_registration_invite[existing_user]"');
 
   createFieldDependentInputs({
@@ -22,4 +22,4 @@
       return $("#meeting_registration_invite_existing_user_true").is(":checked")
     }
   });
-})(window);
+})

data/app/packs/src/decidim/meetings/meetings_form.js

@@ -0,0 +1,54 @@
+import attachGeocoding from "src/decidim/geocoding/attach_input"
+
+$(() => {
+  // Adds the latitude/longitude inputs after the geocoding is done
+  const $meetingAddress = $("#meeting_address");
+  if ($meetingAddress.length > 0) {
+    attachGeocoding($meetingAddress);
+  }
+
+  const $form = $(".meetings_form");
+  if ($form.length > 0) {
+    const $meetingTypeOfMeeting = $form.find("#meeting_type_of_meeting");
+    const $meetingOnlineFields = $form.find(".field[data-meeting-type='online']");
+    const $meetingInPersonFields = $form.find(".field[data-meeting-type='in_person']");
+
+    const toggleDependsOnSelect = ($target, $showDiv, type) => {
+      const value = $target.val();
+      if (value === "hybrid") {
+        $showDiv.show();
+      } else {
+        $showDiv.hide();
+        if (value === type) {
+          $showDiv.show();
+        }
+      }
+    };
+
+    $meetingTypeOfMeeting.on("change", (ev) => {
+      const $target = $(ev.target);
+      toggleDependsOnSelect($target, $meetingOnlineFields, "online");
+      toggleDependsOnSelect($target, $meetingInPersonFields, "in_person");
+    });
+
+    toggleDependsOnSelect($meetingTypeOfMeeting, $meetingOnlineFields, "online");
+    toggleDependsOnSelect($meetingTypeOfMeeting, $meetingInPersonFields, "in_person");
+
+
+    const $meetingRegistrationType = $form.find("#meeting_registration_type");
+    const $meetingRegistrationTerms = $form.find("#meeting_registration_terms");
+    const $meetingRegistrationUrl = $form.find("#meeting_registration_url");
+    const $meetingAvailableSlots = $form.find("#meeting_available_slots");
+
+    $meetingRegistrationType.on("change", (ev) => {
+      const $target = $(ev.target);
+      toggleDependsOnSelect($target, $meetingAvailableSlots, "on_this_platform");
+      toggleDependsOnSelect($target, $meetingRegistrationTerms, "on_this_platform");
+      toggleDependsOnSelect($target, $meetingRegistrationUrl, "on_different_platform");
+    });
+
+    toggleDependsOnSelect($meetingRegistrationType, $meetingAvailableSlots, "on_this_platform");
+    toggleDependsOnSelect($meetingRegistrationType, $meetingRegistrationTerms, "on_this_platform");
+    toggleDependsOnSelect($meetingRegistrationType, $meetingRegistrationUrl, "on_different_platform");
+  }
+});

data/app/packs/src/decidim/meetings/meetings_polls.js

@@ -0,0 +1,41 @@
+import MeetingsPollComponent from "src/decidim/meetings/poll.component"
+const OPEN_CLASS = "is-open";
+
+$(() => {
+  // Mount polls component for users
+  const $container = $("[data-decidim-meetings-poll]");
+  const $counter = $("#visible-questions-count");
+  const poll = new MeetingsPollComponent($container, $container.data("decidim-meetings-poll"), $counter);
+
+  $(".meeting-polls__action-list").on("click", (event) => {
+    event.preventDefault();
+
+    if (poll.isMounted()) {
+      $(event.target).removeClass(OPEN_CLASS);
+      $container.removeClass(OPEN_CLASS);
+      poll.unmountComponent();
+    } else {
+      $(event.target).addClass(OPEN_CLASS);
+      $container.addClass(OPEN_CLASS);
+      poll.mountComponent();
+    }
+  });
+
+  // Mount polls component for admins
+  const $adminContainer = $("[data-decidim-admin-meetings-poll]");
+  const adminPoll = new MeetingsPollComponent($adminContainer, $adminContainer.data("decidim-admin-meetings-poll"));
+
+  $(".meeting-polls__action-administrate").on("click", (event) => {
+    event.preventDefault();
+
+    if (adminPoll.isMounted()) {
+      $(event.target).removeClass(OPEN_CLASS);
+      $adminContainer.removeClass(OPEN_CLASS);
+      adminPoll.unmountComponent();
+    } else {
+      $(event.target).addClass(OPEN_CLASS);
+      $adminContainer.addClass(OPEN_CLASS);
+      adminPoll.mountComponent();
+    }
+  });
+});

data/app/packs/src/decidim/meetings/poll.component.js

@@ -0,0 +1,166 @@
+/* eslint id-length: ["error", { "exceptions": ["$"] }] */
+
+/**
+ * A plain Javascript component that handles questions from polls in meetings:
+ *   - fetches them via Ajax
+ *   - enables a polling to automatically update them
+ *
+ * @class
+ * @augments Component
+ */
+
+// This is necessary for testing purposes
+const $ = window.$;
+
+// Default question states
+const OPEN = "open";
+const CLOSED = "closed";
+
+export default class PollComponent {
+  constructor($element, config, $counter = null) {
+    this.$element = $element;
+    this.$counter = $counter;
+    this.questionsUrl = config.questionsUrl;
+    this.pollingInterval = config.pollingInterval || 5000;
+    this.mounted = false;
+    this.questions = {};
+  }
+
+  /**
+   * Returns if the component is mounted or not
+   * @public
+   * @returns {Void} - Returns nothing
+   */
+  isMounted() {
+    return this.mounted;
+  }
+
+  /**
+   * Handles the logic for mounting the component
+   * @public
+   * @returns {Void} - Returns nothing
+   */
+  mountComponent() {
+    if (this.$element.length > 0 && !this.mounted) {
+      this.mounted = true;
+      this._fetchQuestions();
+    }
+  }
+
+  unmountComponent() {
+    if (this.mounted) {
+      this.mounted = false;
+      this._stopPolling();
+      this.$element.html("");
+    }
+  }
+
+  /**
+   * Performs the ajax call that updates the list of questions
+   * Before, stores the current questions states to apply them after the ajax call has
+   * been completed
+   * @private
+   * @returns {Void} - Returns nothing
+   */
+  _fetchQuestions() {
+    // Store current questions state (open / closed) before overwritting them with the Ajax call
+    // response.
+    this._storeQuestionState(this.$element);
+
+    $.ajax({
+      url: this.questionsUrl,
+      method: "GET",
+      contentType: "application/javascript"
+    }).done(() => {
+      this._updateCounter();
+      this._setQuestionsState(this.$element);
+      this._pollQuestions();
+    });
+  }
+
+  /**
+   * Iterates over all existing questions and stores the state in an internal attribute.
+   * @private
+   * @param {jQuery} $parent - The HTML content for the questionnaire.
+   * @returns {Void} - Returns nothing
+   */
+  _storeQuestionState($parent) {
+    $("[data-question]", $parent).each((_i, el) => {
+      const $el = $(el);
+      const questionId = $el.data("question");
+      if ($el[0].open === true) {
+        this.questions[questionId] = OPEN;
+      } else {
+        this.questions[questionId] = CLOSED;
+      }
+    });
+  }
+
+  /**
+   * Initializes the states of all the questions.
+   * @private
+   * @param {jQuery} $parent - The HTML container for the questionnaire.
+   * @returns {Void} - Returns nothing
+   */
+  _setQuestionsState($parent) {
+    $("[data-question]", $parent).each((_i, el) => {
+      this._setQuestionState($(el));
+    });
+  }
+
+  /**
+   * Initializes the state of a single question with two types of modifications:
+   *   - sets the is-new class if the question is new (doesn't exist in the internal list)
+   *   - sets the state to open if it was open in the internal list
+   * @private
+   * @param {jQuery} $el - The HTML container for the questionnaire.
+   * @returns {Void} - Returns nothing
+   */
+  _setQuestionState($el) {
+    const questionId = $el.data("question");
+    // Current question state
+    const state = this.questions[questionId];
+    // New questions have a special class
+    if (!state) {
+      $el.addClass("is-new");
+    } else if (state === OPEN) {
+      $el.prop(OPEN, true);
+    }
+  }
+
+  /**
+   * Sets a timeout to poll new questions.
+   * @private
+   * @returns {Void} - Returns nothing
+   */
+  _pollQuestions() {
+    this._stopPolling();
+
+    this.pollTimeout = setTimeout(() => {
+      this._fetchQuestions();
+    }, this.pollingInterval);
+  }
+
+  /**
+   * Stops polling for new questions.
+   * @private
+   * @returns {Void} - Returns nothing
+   */
+  _stopPolling() {
+    if (this.pollTimeout) {
+      clearTimeout(this.pollTimeout);
+    }
+  }
+
+  /**
+   * Updates the counter with the number of questions returned in the Ajax call
+   * @private
+   * @returns {Void} - Returns nothing
+   */
+  _updateCounter() {
+    if (this.$counter) {
+      const questionsCount = this.$element.find("details").length;
+      this.$counter.html(`(${questionsCount})`);
+    }
+  }
+}