decidim-term_customizer 0.16.0

data/README.md

@@ -0,0 +1,180 @@
+# Decidim::TermCustomizer
+
+[![Build Status](https://travis-ci.com/mainio/decidim-module-term_customizer.svg?branch=master)](https://travis-ci.com/mainio/decidim-module-term_customizer)
+[![codecov](https://codecov.io/gh/mainio/decidim-module-term_customizer/branch/master/graph/badge.svg)](https://codecov.io/gh/mainio/decidim-module-term_customizer)
+
+The gem has been developed by [Mainio Tech](https://www.mainiotech.fi/).
+
+A [Decidim](https://github.com/decidim/decidim) module to customize the
+localized terms in the system. The module allows administrators to add
+"translation sets" through the admin panel which contain customized terms for
+any module in the system. These sets can be applied against different scopes
+within the system, e.g. the whole system, participatory space scope (e.g. all
+participatory processes or a specific participatory process) or a specific
+component within a participatory space.
+
+The term customizations will be only applied to the scope which the admin user
+has defined for the set. Multiple scopes can be defined against a single
+translation set.
+
+Example use cases for this module:
+
+- Admin wants to change the term "Proposal" to "Idea" in all participatory
+  processes within the system.
+- Admin wants to change the terms "accepted" and "rejected" in the proposals
+  component to "possible" and "not possible" for a specific participatory
+  process.
+- Admin wants to change the term "debate" to "discussion" for all assemblies
+  within the system.
+
+Currently using this gem requires a bit of technical knowledge in defining the
+terms to be customized. The admin needs to know or find out the translation keys
+for the terms to be customized.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "decidim-term_customizer"
+```
+
+And then execute:
+
+```bash
+$ bundle
+$ bundle exec rails decidim_term_customizer: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
+
+- Install the gem.
+- Login to the system as an administrator.
+- Go to the admin panel > Term customizer.
+- Add a new translation set and give it a name (e.g. "All processes"). The
+  name of the set is only relevant for the admin to identify what that set is
+  used for. It is suggested to give the sets a name that identifies the scope
+  where it is used.
+- Apply the set to the scope or scopes where you want these customizations to be
+  active.
+- Save the set.
+- Add the translations to the set which you want to customize within the defined
+  scope.
+
+## 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/)
+
+You can run the code styling checks by running the following commands from the
+console:
+
+```
+$ bundle exec rubocop
+$ npm run lint
+```
+
+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)
+- Sublime Text
+  * [Sublime RuboCop](https://github.com/pderichs/sublime_rubocop)
+  * [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint)
+- 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)
+
+### 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
+```
+
+Note that the database user has to have rights to create and drop a database in
+order to create the dummy test app database.
+
+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 these environment variables to the root directory of the project in a
+file named `.rbenv-vars`. In this case, you can omit defining these in the
+commands shown 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.
+
+### Localization
+
+If you would like to see this module in your own language, you can help with its
+translation at Crowdin:
+
+https://crowdin.com/project/decidim-term-customizer
+
+## 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_term_customizer: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/translation_sets_admin_manifest.js

@@ -0,0 +1,2 @@
+//= link decidim/term_customizer/admin/translation_sets_admin.js
+//= link decidim/term_customizer/admin/translations_admin.js

data/app/assets/javascripts/decidim/term_customizer/admin/constraint_fields.js.es6

@@ -0,0 +1,45 @@
+// = require_self
+
+(() => {
+  const initConstraintFields = ($section) => {
+    const $select = $("select.constraint-subject-selector", $section);
+    const $modelSelect = $("select.constraint-subject-model-selector", $section);
+
+    $select.on(
+      "change init",
+
+      /* @this HTMLElement */
+      function() {
+        const val = $(this).val();
+        $("[data-manifest]", $section).hide();
+        $(`[data-manifest="${val}"]`, $section).show();
+      }
+    ).trigger("init");
+
+    $modelSelect.on(
+      "change init",
+
+      /* @this HTMLElement */
+      function() {
+        const $container = $(this).parents(".manifest-container");
+        const val = $(this).val();
+        $("[data-components]", $container).hide();
+        $(`[data-components="${val}"]`, $container).show();
+      }
+    ).trigger("init");
+  };
+
+  $.fn.constraintSection = function() {
+    $(this).each(
+
+      /**
+       * @this HTMLElement
+       * @return {void}
+       */
+      function() {
+        const $section = $(this);
+        initConstraintFields($section);
+      }
+    )
+  }
+})();

data/app/assets/javascripts/decidim/term_customizer/admin/multifield/component.js.es6

@@ -0,0 +1,103 @@
+((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: ($newField) => {
+        createSortableList();
+
+        autoLabelByPosition.run();
+        autoButtonsByPosition.run();
+
+        $wrapper.trigger("add-field-section", $newField);
+      },
+      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/term_customizer/admin/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/term_customizer/admin/multifield/component

data/app/assets/javascripts/decidim/term_customizer/admin/translation_sets_admin.js.es6

@@ -0,0 +1,19 @@
+// = require decidim/term_customizer/admin/multifield
+// = require decidim/term_customizer/admin/constraint_fields
+// = require_self
+
+$(() => {
+  const $fields = $("form.translation-sets-form .multifield-fields");
+
+  $fields.multifield();
+  $fields.on(
+    "add-field-section",
+
+    /* @this HTMLElement */
+    function(ev, newField) {
+      $(newField).constraintSection();
+    }
+  );
+
+  $(".constraints-list", $fields).constraintSection();
+});

data/app/assets/javascripts/decidim/term_customizer/admin/translations_admin.js.es6

@@ -0,0 +1,72 @@
+// = require_self
+
+$(() => {
+  const $search = $("#data_picker-autocomplete");
+  const $results = $("#add-translations-results");
+  const $template = $("template", $results);
+  const $form = $search.parents("form");
+  let xhr = null;
+  let currentSearch = "";
+
+  $search.on("keyup", function() {
+    currentSearch = $search.val();
+  });
+
+  $search.autoComplete({
+    minChars: 2,
+    cache: 0,
+    source: function(term, response) {
+      try {
+        xhr.abort();
+      } catch (exception) { xhr = null; }
+
+      const url = $form.attr("action");
+      xhr = $.getJSON(
+        url,
+        $form.serializeArray(),
+        function(data) { response(data); }
+      );
+    },
+    renderItem: function (item, search) {
+      const sanitizedSearch = search.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&");
+      const re = new RegExp(`(${sanitizedSearch.split(" ").join("|")})`, "gi");
+      const modelId = item[0];
+      const title = item[1];
+      const val = `${title} - ${modelId}`;
+      return `<div class="autocomplete-suggestion" data-model-id="${modelId}" data-val="${title}">${val.replace(re, "<b>$1</b>")}</div>`;
+    },
+    onSelect: function(event, term, item) {
+      const $suggestions = $search.data("sc");
+      const modelId = item.data("modelId");
+      const title = item.data("val");
+
+      let template = $template.html();
+      template = template.replace(new RegExp("{{translation_key}}", "g"), modelId);
+      template = template.replace(new RegExp("{{translation_term}}", "g"), title);
+      const $newRow = $(template);
+      $("table tbody", $results).append($newRow);
+      $results.removeClass("hide");
+
+      // Add it to the autocomplete form
+      const $field = $(`<input type="hidden" name="keys[]" value="${modelId}">`);
+      $form.append($field);
+
+      // Listen to the click event on the remove button
+      $(".remove-translation-key", $newRow).on("click", function(ev) {
+        ev.preventDefault();
+        $newRow.remove();
+        $field.remove();
+
+        if ($("table tbody tr", $results).length < 1) {
+          $results.addClass("hide");
+        }
+      });
+
+      $search.val(currentSearch);
+      setTimeout(function() {
+        $(`[data-model-id="${modelId}"]`, $suggestions).remove();
+        $suggestions.show();
+      }, 20);
+    }
+  });
+});