decidim-plans 0.15.0

data/README.md

@@ -0,0 +1,157 @@
+# Decidim::Plans
+
+A [Decidim](https://github.com/decidim/decidim) module that provides a new
+component that can be added to any participatory space in Decidim. The component
+allows users to write plans together that link to specific proposals. Further on
+these plans can be converted to budgeting projects once the process moves to
+budgeting.
+
+The idea of plans is for the people to plan together the proposals further
+before a budgeting voting is started. During the planning process people should
+come up with a more specific plan for the project based on which the budget can
+be evaluated.
+
+The plans component is based on the Decidim's own proposals component with the
+following differences:
+
+- Plans are multilingual so that they can be copied over to budgeting projects.
+- Plans are collaborative by default, borrowing ideas from collaborative drafts
+  in the proposals component.
+- Plans can be linked to proposals in the same participatory space.
+- The format of the plan form can be customized, so the fields that users need
+  to fill can be customized instead of relying on a fixed set of fields. This
+  allows all plans to appear in the same format.
+- Plans can be later on converted into budgeting processes for the budgets
+  component once they are finished. When converting, the different sections are
+  converted to sub-headings in the budgeting project's description and the
+  budget needs to be specified by the user doing the conversion.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'decidim-plans', :git => 'git@github.com:mainio/decidim-module-plans.git'
+```
+
+And then execute:
+
+```bash
+$ bundle
+$ bundle exec rails decidim_plans:install:migrations
+$ bundle exec rails db:migrate
+```
+
+To keep the gem up to date, you can use the commands above to also update it.
+
+## Usage
+
+You can add the plans component to any participatory space. After adding, users
+can start writing the plans when plan creation is enabled.
+
+## Contributing
+
+For instructions how to setup your development environment for Decidim, see [Decidim](https://github.com/decidim/decidim). Also follow Decidim's general
+instructions for development for this project as well.
+
+### Developing
+
+To start contributing to this project, first:
+
+- Install the basic dependencies (such as Ruby and PostgreSQL)
+- Clone this repository
+
+Decidim's main repository also provides a Docker configuration file if you
+prefer to use Docker instead of installing the dependencies locally on your
+machine.
+
+You can create the development app by running the following commands after
+cloning this project:
+
+```bash
+$ bundle
+$ DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rake development_app
+$ npm i
+```
+
+Note that the database user has to have rights to create and drop a database in
+order to create the dummy test app database.
+
+Then to test how the module works in Decidim, start the development server:
+
+```bash
+$ cd development_app
+$ DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rails s
+```
+
+In case you are using [rbenv](https://github.com/rbenv/rbenv) and have the
+[rbenv-vars](https://github.com/rbenv/rbenv-vars) plugin installed for it, you
+can add the environment variables to the root directory of the project in a file
+named `.rbenv-vars`. If these are defined for the environment, you can omit
+defining these in the commands shown above.
+
+#### Code Styling
+
+Please follow the code styling defined by the different linters that ensure we
+are all talking with the same language collaborating on the same project. This
+project is set to follow the same rules that Decidim itself follows.
+
+The following linters are used:
+
+- Ruby, [Rubocop](https://rubocop.readthedocs.io/)
+- JS/ES, [eslint](https://eslint.org/)
+- CSS/SCSS, [stylelint](https://stylelint.io/)
+
+You can run the code styling checks by running the following commands from the
+console:
+
+```
+$ bundle exec rubocop
+$ npm run lint
+$ npm run stylelint
+```
+
+To ease up following the style guide, you should install the plugins to your
+favorite editor, such as:
+
+- Atom
+  * [linter-rubocop](https://atom.io/packages/linter-rubocop)
+  * [linter-eslint](https://atom.io/packages/linter-eslint)
+  * [linter-stylelint](https://atom.io/packages/linter-stylelint)
+- Sublime Text
+  * [Sublime RuboCop](https://github.com/pderichs/sublime_rubocop)
+  * [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint)
+  * [SublimeLinter-stylelint](https://github.com/SublimeLinter/SublimeLinter-stylelint)
+- Visual Studio Code
+  * [Rubocop for Visual Studio Code](https://github.com/misogi/vscode-ruby-rubocop)
+  * [VS Code ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+  * [vscode-stylelint](https://github.com/shinnn/vscode-stylelint)
+
+### Testing
+
+To run the tests run the following in the gem development path:
+
+```bash
+$ bundle
+$ DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rake test_app
+$ DATABASE_USERNAME=<username> DATABASE_PASSWORD=<password> bundle exec rspec
+```
+
+Please read the notes regarding these commands from the development environment
+setup above.
+
+#### Test code coverage
+
+If you want to generate the code coverage report for the tests, you can use
+the `SIMPLECOV=1` environment variable in the rspec command as follows:
+
+```bash
+SIMPLECOV=1 bundle exec rspec
+```
+
+This will generate a folder named `coverage` in the project root which contains
+the code coverage report.
+
+## License
+
+See [LICENSE-AGPLv3.txt](LICENSE-AGPLv3.txt).

data/Rakefile

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require "decidim/dev/common_rake"
+
+def install_module(path)
+  Dir.chdir(path) do
+    system("bundle exec rake decidim_plans:install:migrations")
+    system("bundle exec rake db:migrate")
+  end
+end
+
+def seed_db(path)
+  Dir.chdir(path) do
+    system("bundle exec rake db:seed")
+  end
+end
+
+desc "Generates a dummy app for testing"
+task test_app: "decidim:generate_external_test_app" do
+  ENV["RAILS_ENV"] = "test"
+  install_module("spec/decidim_dummy_app")
+end
+
+desc "Generates a development app"
+task :development_app do
+  Bundler.with_original_env do
+    generate_decidim_app(
+      "development_app",
+      "--app_name",
+      "#{base_app_name}_development_app",
+      "--path",
+      "..",
+      "--recreate_db",
+      "--demo"
+    )
+  end
+
+  install_module("development_app")
+  seed_db("development_app")
+end
+
+# Run all tests, include all
+RSpec::Core::RakeTask.new(:spec) do |t|
+  t.verbose = false
+end
+
+# Run both by default
+task default: [:spec]

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

@@ -0,0 +1,3 @@
+//= link decidim/plans/admin/sections.js
+//= link decidim/plans/admin/plans.js
+//= link decidim/plans/proposal_picker.js 

data/app/assets/config/decidim_plans_manifest.css

@@ -0,0 +1,4 @@
+/*
+ *= link decidim/plans/proposal_picker.scss
+ *= link decidim/plans/plans_form.scss
+ */

data/app/assets/config/decidim_plans_manifest.js

@@ -0,0 +1,2 @@
+//= link decidim/plans/plans_form.js
+//= link decidim/plans/proposal_picker.js 

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35">
+  <path d="M17.5 35A17.5 17.5 0 1 1 35 17.5 17.52 17.52 0 0 1 17.5 35zm0-33.06A15.56 15.56 0 1 0 33.06 17.5 15.57 15.57 0 0 0 17.5 1.94zm9.5 13.7H8a1 1 0 0 1 0-1.94h19a1 1 0 0 1 0 1.94zm0 3.68H8a1 1 0 0 1 0-1.94h19a1 1 0 0 1 0 1.94zM22.26 23H8a1 1 0 0 1 0-1.94h14.26a1 1 0 0 1 0 1.94z"/>
+</svg>

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

@@ -0,0 +1,3 @@
+$(() => {
+  // Add the needed JS initialization code here
+});

data/app/assets/javascripts/decidim/plans/admin/sections.js.es6

@@ -0,0 +1,78 @@
+((exports) => {
+  const { AutoLabelByPositionComponent, AutoButtonsByPositionComponent, createDynamicFields, createSortList } = exports.DecidimAdmin;
+
+  const wrapperSelector = ".plan-sections";
+  const fieldSelector = ".plan-section";
+
+  const autoLabelByPosition = new AutoLabelByPositionComponent({
+    listSelector: ".plan-section:not(.hidden)",
+    labelSelector: ".card-title span:first",
+    onPositionComputed: (el, idx) => {
+      $(el).find("input[name$=\\[position\\]]").val(idx);
+    }
+  });
+
+  const autoButtonsByPosition = new AutoButtonsByPositionComponent({
+    listSelector: ".plan-section:not(.hidden)",
+    hideOnFirstSelector: ".move-up-section",
+    hideOnLastSelector: ".move-down-section"
+  });
+
+  const createSortableList = () => {
+    createSortList(".sections-list:not(.published)", {
+      handle: ".section-divider",
+      placeholder: '<div style="border-style: dashed; border-color: #000"></div>',
+      forcePlaceholderSize: true,
+      onSortUpdate: () => { autoLabelByPosition.run() }
+    });
+  };
+
+  const hideDeletedSection = ($target) => {
+    const inputDeleted = $target.find("input[name$=\\[deleted\\]]").val();
+
+    if (inputDeleted === "true") {
+      $target.addClass("hidden");
+      $target.hide();
+    }
+  }
+
+  createDynamicFields({
+    placeholderId: "section-id",
+    wrapperSelector: wrapperSelector,
+    containerSelector: ".sections-list",
+    fieldSelector: fieldSelector,
+    addFieldButtonSelector: ".add-section",
+    removeFieldButtonSelector: ".remove-section",
+    moveUpFieldButtonSelector: ".move-up-section",
+    moveDownFieldButtonSelector: ".move-down-section",
+    onAddField: () => {
+      createSortableList();
+
+      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);
+
+    hideDeletedSection($target);
+  });
+
+  autoLabelByPosition.run();
+  autoButtonsByPosition.run();
+})(window);

data/app/assets/javascripts/decidim/plans/multifield/component.js.es6

@@ -0,0 +1,101 @@
+((exports) => {
+  const { AutoLabelByPositionComponent, AutoButtonsByPositionComponent, createDynamicFields, createSortList } = exports.DecidimAdmin;
+
+  const initMultifield = ($wrapper) => {
+    const wrapperSelector = `#${$wrapper.attr("id")}`;
+    const placeholderId = $wrapper.data("placeholder-id");
+
+    const fieldSelector = ".multifield-field";
+
+    const autoLabelByPosition = new AutoLabelByPositionComponent({
+      listSelector: `${wrapperSelector} .multifield-field:not(.hidden)`,
+      labelSelector: ".card-title span:first",
+      onPositionComputed: (el, idx) => {
+        $(el).find("input.position-input").val(idx);
+      }
+    });
+
+    const autoButtonsByPosition = new AutoButtonsByPositionComponent({
+      listSelector: `${wrapperSelector} .multifield-field:not(.hidden)`,
+      hideOnFirstSelector: ".move-up-field",
+      hideOnLastSelector: ".move-down-field"
+    });
+
+    const createSortableList = () => {
+      createSortList(`${wrapperSelector} .fields-list:not(.published)`, {
+        handle: ".multifield-field-divider",
+        placeholder: '<div style="border-style: dashed; border-color: #000"></div>',
+        forcePlaceholderSize: true,
+        onSortUpdate: () => { autoLabelByPosition.run() }
+      });
+    };
+
+    const hideDeletedSection = ($target) => {
+      const inputDeleted = $target.find("input[name$=\\[deleted\\]]").val();
+
+      if (inputDeleted === "true") {
+        $target.addClass("hidden");
+        $target.hide();
+      }
+    }
+
+    createDynamicFields({
+      placeholderId: placeholderId,
+      wrapperSelector: wrapperSelector,
+      containerSelector: ".multifield-fields-list",
+      fieldSelector: fieldSelector,
+      addFieldButtonSelector: ".add-field",
+      removeFieldButtonSelector: ".remove-field",
+      moveUpFieldButtonSelector: ".move-up-field",
+      moveDownFieldButtonSelector: ".move-down-field",
+      onAddField: () => {
+        createSortableList();
+
+        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);
+
+      hideDeletedSection($target);
+    });
+
+    autoLabelByPosition.run();
+    autoButtonsByPosition.run();
+  }
+
+  $.fn.multifield = function() {
+    $(this).each(
+
+      /**
+       * @this HTMLElement
+       * @return {void}
+       */
+      function() {
+        const $elem = $(this);
+        let id = $elem.attr("id");
+        if (!id || id.length < 1) {
+          id = `multifield-${Math.random().toString(16).slice(2)}`;
+          $elem.attr("id", id);
+        }
+        initMultifield($elem);
+      }
+    )
+  }
+})(window);

data/app/assets/javascripts/decidim/plans/multifield.js.es6

@@ -0,0 +1,5 @@
+// = require decidim/admin/auto_buttons_by_position.component
+// = require decidim/admin/auto_label_by_position.component
+// = require decidim/admin/dynamic_fields.component
+// = require decidim/admin/sort_list.component
+// = require decidim/plans/multifield/component

data/app/assets/javascripts/decidim/plans/plans_form.js.es6

@@ -0,0 +1,9 @@
+// = require ./remaining_characters
+// = require ./tab_focus
+// = require ./multifield
+// = require_self
+
+$(() => {
+  $("form.plans-form [data-remaining-characters]").remainingCharacters();
+  $("form.plans-form .multifield-fields").multifield();
+});

data/app/assets/javascripts/decidim/plans/proposal_picker.js.es6

@@ -0,0 +1,41 @@
+// = require decidim/data_picker
+// = require jquery.auto-complete
+
+// = require_self
+
+$(function() {
+  $(document).on("open.zf.reveal", "#data_picker-modal", function () {
+    let xhr = null;
+
+    $("#data_picker-autocomplete").autoComplete({
+      minChars: 2,
+      source: function(term, response) {
+        try {
+          xhr.abort();
+        } catch (exception) { xhr = null; }
+
+        let url = $("#proposal-picker-choose").attr("href");
+        xhr = $.getJSON(
+          url,
+          { term: term },
+          function(data) { response(data); }
+        );
+      },
+      renderItem: function (item, search) {
+        let sanitizedSearch = search.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+        let re = new RegExp(`(${sanitizedSearch.split(" ").join("|")})`, "gi");
+        let title = item[0];
+        let modelId = item[1];
+        return `<div class="autocomplete-suggestion" data-model-id="${modelId}" data-val ="${title}">${title.replace(re, "<b>$1</b>")}</div>`;
+      },
+      onSelect: function(event, term, item) {
+        let choose = $("#proposal-picker-choose");
+        let modelId = item.data("modelId");
+        let val = item.data("val");
+        choose.data("picker-value", modelId);
+        choose.data("picker-text", val);
+        choose.data("picker-choose", "");
+      }
+    });
+  });
+});

data/app/assets/javascripts/decidim/plans/remaining_characters.es6

@@ -0,0 +1,42 @@
+$(function() {
+  const COUNT_KEY = "%count%";
+
+  $.fn.remainingCharacters = function() {
+    return $(this).each(
+
+      /**
+       * @this HTMLElement
+       * @returns {void}
+       */
+      function() {
+        const $input = $(this);
+        const $target = $($input.data("remaining-characters"));
+        const maxCharacters = parseInt($(this).attr("maxlength"), 10);
+
+        if ($target.length > 0 && maxCharacters > 0) {
+          const messagesJson = $target.data("remaining-characters-messages");
+          const messages = $.extend({
+            one: `${COUNT_KEY} character left`,
+            many: `${COUNT_KEY} characters left`
+          }, messagesJson);
+
+          const updateStatus = function() {
+            const numCharacters = $input.val().length;
+            const remaining = maxCharacters - numCharacters;
+            let message = messages.many;
+            if (remaining === 1) {
+              message = messages.one;
+            }
+
+            $target.text(message.replace(COUNT_KEY, remaining));
+          };
+
+          $input.on("keyup focus", function() {
+            updateStatus();
+          });
+          updateStatus();
+        }
+      }
+    );
+  };
+});

data/app/assets/javascripts/decidim/plans/social_share.js

@@ -0,0 +1,2 @@
+// = require social-share-button
+// = require_self

data/app/assets/javascripts/decidim/plans/tab_focus.es6

@@ -0,0 +1,20 @@
+// = require_self
+
+/**
+ * When switching tabs in i18n fields, autofocus on the input to save clicks
+ *
+ * Similar to:
+ * decidim-admin/app/assets/javascripts/decidim/admin/tab_focus.js.es6
+ */
+$(() => {
+  // Event launched by foundation
+  $("[data-tabs]").on("change.zf.tabs", (event) => {
+    const $container = $(event.target).parent().next(".tabs-content");
+    const $panel = $(".tabs-panel.is-active", $container);
+
+    const $content = $("input, textarea", $panel).first();
+    if ($content.length > 0) {
+      $content.focus();
+    }
+  });
+});

data/app/assets/stylesheets/decidim/plans/plans_form.scss

@@ -0,0 +1,26 @@
+.multifield-fields{
+  .multifield-field-divider{
+    padding-top: .8rem;
+    padding-bottom: .8rem;
+  }
+
+  .card-title{
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .card-title-text{
+      display: inline-block;
+      padding-top: .2rem;
+      padding-bottom: .2em;
+    }
+  }
+
+  .button--title{
+    float: right;
+    margin-left: 1rem;
+
+    &:first-child{
+      margin-left: 0;
+    }
+  }
+}

data/app/assets/stylesheets/decidim/plans/proposal_picker.scss

@@ -0,0 +1,3 @@
+@import "plugins/jquery.auto-complete";
+
+div.picker-values a{ pointer-events: none; }

data/app/assets/stylesheets/decidim/plans/social_share.css.scss

@@ -0,0 +1,22 @@
+/*
+ *= require social-share-button
+ */
+
+$size: 45px;
+
+.share-link:hover{
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.social-share-button{
+  display: inline-block;
+  vertical-align: top;
+
+  .ssb-icon{
+    margin-right: 5px;
+    background-size: $size $size;
+    height: $size;
+    width: $size;
+  }
+}

data/app/cells/decidim/plans/author/flag.erb

@@ -0,0 +1,5 @@
+<% if flagable? %>
+  <button type="button" data-open="<%= current_user.present? ? "flagModal" : "loginModal" %>" title="<%= t("report", scope: "decidim.plans.plans.show") %>" aria-controls="<%= current_user.present? ? "flagModal" : "loginModal" %>" aria-haspopup="true" tabindex="0">
+    <%= icon "flag", aria_label: t("report", scope: "decidim.plans.plans.show"), class: "icon--small" %>
+  </button>
+<% end %>

data/app/cells/decidim/plans/author/withdraw.erb

@@ -0,0 +1,6 @@
+<% if withdrawable? %>
+  <%= action_authorized_link_to :withdraw, withdraw_path, method: :put, class: "title-action__action button small hollow", title: t("withdraw_btn_hint", scope: "decidim.plans.plans.show"), data: { confirm: t("withdraw_confirmation", scope: "decidim.plans.plans.show") }  do %>
+    <%= t("withdraw_btn", scope: "decidim.plans.plans.show") %>
+    <%= icon "x" %>
+  <% end %>
+<% end %>

data/app/cells/decidim/plans/author_cell.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Plans
+    class AuthorCell < Decidim::AuthorCell
+      include Plans::CellsHelper
+    end
+  end
+end

data/app/cells/decidim/plans/coauthorships_cell.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Plans
+    class CoauthorshipsCell < Decidim::CoauthorshipsCell
+      def show
+        if authorable?
+          cell "decidim/plans/author", presenter_for_author(model), extra_classes.merge(has_actions: has_actions?, from: model)
+        else
+          cell(
+            "decidim/plans/collapsible_authors",
+            presenters_for_identities(model),
+            cell_name: "decidim/plans/author",
+            cell_options: extra_classes,
+            size: size,
+            from: model,
+            has_actions: has_actions?
+          )
+        end
+      end
+    end
+  end
+end

data/app/cells/decidim/plans/collapsible_authors/show.erb

@@ -0,0 +1,17 @@
+<div class="author--inline">
+  <%= cell(
+    "decidim/collapsible_list",
+    list,
+    cell_name: cell_name,
+    cell_options: options.merge(has_actions: false),
+    size: size
+    ) %>
+</div>
+<% if actionable? %>
+  <div class="author-data__extra">
+    <% author_cell= cell("decidim/plans/author", model, from: from_context) %>
+    <%= author_cell.(:date) %>
+    <%= author_cell.(:flag) %>
+    <%= author_cell.(:withdraw) %>
+  </div>
+<% end %>

data/app/cells/decidim/plans/collapsible_authors_cell.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Decidim
+  module Plans
+    class CollapsibleAuthorsCell < Decidim::CollapsibleAuthorsCell
+      include Plans::CellsHelper
+    end
+  end
+end