decidim-notify 0.3

data/README.md

@@ -0,0 +1,160 @@
+# Decidim::Notify
+
+![[CI] Build Status](https://github.com/Platoniq/decidim-module-notify/workflows/%5BCI%5D%20Test%20Notify/badge.svg)
+[![Maintainability](https://api.codeclimate.com/v1/badges/a00b6c950199d3530dc9/maintainability)](https://codeclimate.com/github/Platoniq/decidim-module-notify/maintainability)
+[![Codecov](https://codecov.io/gh/Platoniq/decidim-module-notify/branch/master/graph/badge.svg)](https://codecov.io/gh/Platoniq/decidim-module-notify)
+
+
+A note-taker feature focused on conversations. This module provides a component for any participatory space in Decidim.
+
+## Usage
+
+Notify will be available as a Component for a Participatory
+Space.
+
+![Notify component](examples/notify.png)
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "decidim-notify", "~> 0.3.0"
+```
+
+And then execute:
+
+```bash
+bundle
+bundle exec rails decidim_notify:install:migrations
+bundle exec rails db:migrate
+```
+
+Depending on your Decidim version, choose the corresponding Plugin version to ensure compatibility:
+
+| Notify version | Compatible Decidim versions |
+|---|---|
+| 0.3.x | 0.21.x - 0.23.x |
+
+### Configuration
+
+Notify uses [ActionCable](https://guides.rubyonrails.org/action_cable_overview.html) to display real time notes.
+
+By default uses [PostgreSQL NOTIFY](https://www.postgresql.org/docs/9.0/sql-notify.html) as a backend for ActionCable. However, it is recommended to use Redis because PostgreSQL is limited to a 8000 characters to send messages.
+
+To configure Redis use a custom initializer in you application, for instance `config/initializers/notify_config.rb`:
+
+```ruby
+Decidim::Notify.configure do |config|
+  config.cable_adapter = "redis"
+  config.cable_url = "redis://localhost:6379/1"
+end
+```
+
+## Contributing
+
+See [Decidim](https://github.com/decidim/decidim).
+
+
+### 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
+```
+
+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.
+
+[Rubocop](https://rubocop.readthedocs.io/) linter is used for the Ruby language.
+
+You can run the code styling checks by running the following commands from the
+console:
+
+```
+bundle exec rubocop
+```
+
+To ease up following the style guide, you should install the plugin to your
+favorite editor, such as:
+
+- Atom - [linter-rubocop](https://atom.io/packages/linter-rubocop)
+- Sublime Text - [Sublime RuboCop](https://github.com/pderichs/sublime_rubocop)
+- Visual Studio Code - [Rubocop for Visual Studio Code](https://github.com/misogi/vscode-ruby-rubocop)
+
+### 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/translate/decidim-notify
+
+## License
+
+This engine is distributed under the GNU AFFERO GENERAL PUBLIC LICENSE.
+
+## Credits
+
+This plugin has been developed by ![Platoniq](examples/platoniq-logo.png)

data/Rakefile

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require "decidim/dev/common_rake"
+
+def install_module(path)
+  Dir.chdir(path) do
+    system("bundle exec rake decidim_notify: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

data/app/assets/config/decidim_notify_manifest.css

@@ -0,0 +1,2 @@
+/*= link decidim/notify/notify */
+/*= link decidim/notify/admin */

data/app/assets/config/decidim_notify_manifest.js

@@ -0,0 +1,3 @@
+//= link channels/decidim/notify/conversations.js
+//= link decidim/notify/select2.js
+//= link decidim/notify/conversations.js

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

@@ -0,0 +1 @@
+<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/cable.js

@@ -0,0 +1,13 @@
+// Action Cable provides the framework to deal with WebSockets in Rails.
+// You can generate new channels where WebSocket features live using the `rails generate channel` command.
+//
+//= require action_cable
+//= require_self
+//= require_tree ./channels
+
+(function() {
+  this.App || (this.App = {});
+
+  App.cable = ActionCable.createConsumer();
+
+}).call(this);

data/app/assets/javascripts/channels/decidim/notify/conversations.js

@@ -0,0 +1,90 @@
+// = require cable
+
+jQuery.fn.reverse = [].reverse;
+
+var updateEmptyStatus = function(selector) {
+  $(selector).each(function(){
+    if($(this).children().length == 0){
+      $(this).addClass("empty");
+    } else {
+      $(this).removeClass("empty");
+    }
+  });
+};
+
+App.notifyNotesChannel = App.cable.subscriptions.create({ channel: "Decidim::Notify::NotesChannel", id: window.Notify && window.Notify.id }, {
+  received: function(data) {
+    // console.log("note received",data);
+
+    if(data.create) $(`#notify-chapter-notes-${data.chapterId||"unclassified"}`).prepend(data.create);
+    if(data.update) {
+      var $note = $(`#notify-note-${data.id}`);
+      var $old = $note.closest(".notify-chapter-notes");
+      var $new = $(`#notify-chapter-notes-${data.chapterId||"unclassified"}`);
+      if($old[0] != $new[0]) {
+        // TODO: put it in the right place by time of creation
+        $note.detach().prependTo($new);
+      }
+      $note.replaceWith(data.update);
+    }
+    if(data.destroy) $(`#notify-note-${data.destroy}`).remove();
+
+    updateEmptyStatus(".notify-chapter-notes");
+  }
+});
+
+
+App.notifyParticipantsChannel = App.cable.subscriptions.create({ channel: "Decidim::Notify::ParticipantsChannel", id: window.Notify && window.Notify.id }, {
+  received: function(data) {
+    // console.log("participants received",data);
+
+    $("#notify-note_takers").html(data.noteTakers);
+    $("#notify-participants").html(data.participants);
+  }
+});
+
+App.notifyChaptersChannel = App.cable.subscriptions.create({ channel: "Decidim::Notify::ChaptersChannel", id: window.Notify && window.Notify.id }, {
+  received: function(data) {
+    // console.log("chapter received",data);
+    var newOption;
+    if(data.create) {
+      $("#notify-chapters").prepend(data.create);
+      $(document).foundation();
+      if (!$(`#note_chapter [value="${data.title}"]`).length) {
+        newOption = new Option(data.title, data.title, true, true);
+        $("#note_chapter").append(newOption).trigger("change");
+      }
+    }
+
+    if(data.update) {
+      var $chapter = $(`#notify-chapter-${data.id} .chapter-title`);
+      if($chapter.length) {
+        var old = $chapter.text();
+        $chapter.text(data.update);
+        if(data.active) {
+          $(".notify-chapter h3").removeClass("active");
+          $(`.toggle-chapter-active .switch-input:not(#chapter_active-${data.id})`).prop("checked", false);
+          $chapter.closest("h3").addClass("active");
+        }
+        var activate = $('#note_body').val()=="" && data.active;
+        newOption = new Option(data.update, data.update, activate, activate);
+        $(`#note_chapter [value="${old}"]`).remove();
+        $('#note_chapter').append(newOption).trigger('change');
+      } else {
+        console.error("Chapter not found", data);
+      }
+    }
+
+    if(data.destroy) {
+      // Move notes to the unclassified
+      var $unclassified = $("#notify-chapter-notes-unclassified");
+      $(`#notify-chapter-notes-${data.destroy} .notify-note`).reverse().each(function() {
+        $(this).detach().prependTo($unclassified);
+      });
+
+      $(`#notify-chapter-${data.destroy}`).remove();
+    }
+
+    updateEmptyStatus(".notify-chapter-notes");
+  }
+});

data/app/assets/javascripts/decidim/notify/conversations.js.es6

@@ -0,0 +1,70 @@
+//= require decidim/notify/select2
+
+$(() => {
+  const $info = $(".form-conversations-submit .info");
+  const $form = $('form#new_note');
+  const originalAction = $form.attr("action");
+
+  const resetForm = () => {
+    $("#note_code").html("");
+    $("#note_body").val("");
+    $form.find('[name="_method"]').val("post");
+    $form.attr("action", originalAction);
+  };
+
+  // reset button
+  $form.find('[type="reset"]').on('click', resetForm);
+
+  // edit button in notes
+  $('#notify-chapters').on('click', 'a.edit', (e) => {
+    e.preventDefault();
+    const $a = $(e.currentTarget);
+    const code = $a.closest('.notify-note').data('author-code');
+    const chapter = $a.closest('.notify-note').data('chapter');
+    const name = $a.closest('.notify-note').find('.note-name').text();
+    const body = $a.closest('.notify-note').find('.note-body').text();
+
+    $form.find('[name="_method"]').val("patch");
+    $form.attr("action", $(e.currentTarget).attr('href'));
+    $("#note_body").val(body);
+    $("#note_chapter").val(chapter);
+    $('#note_chapter').trigger('change');
+
+    if(code) {
+      $("#note_code").append(`<option value="${code}" selected>${name}</option>`);
+      $("#note_body").select();
+    } else {
+      $("#note_code").select2("open");
+    }
+
+    $("html, body").animate({ scrollTop: $('#new_note').offset().top }, 400);
+    // location = "#new_note";
+
+    // console.log("edit",$(e.currentTarget).attr('href'),code,body)
+  });
+
+  // Keypress CTRL-Enter sends form
+  $("#note_body").keypress(function(e){
+    if(e.ctrlKey && (e.which === 10 || e.which === 13 )) {
+      Rails.fire($form[0], 'submit');
+    }
+  });
+
+  const showInfo = (text, speed) => {
+    $info.stop(true,true).html(text).show();
+    setTimeout(() => {
+      $info.fadeOut("slow");
+    }, speed);
+    return $info;
+  };
+
+  // Rails AJAX events
+  document.body.addEventListener('ajax:error', (responseText) => {
+    showInfo(responseText.detail[0].message || responseText.detail[0], 5000).removeClass('text-success').addClass('text-alert');
+  });
+  document.body.addEventListener('ajax:success', () => {
+    showInfo("✔", 1000).removeClass('text-alert').addClass('text-success');
+    resetForm();
+    $('.dropdown-pane').foundation('close');
+  });
+});

data/app/assets/javascripts/decidim/notify/select2.js.es6

@@ -0,0 +1,100 @@
+// = require select2
+
+$(() => {
+  $('select.multiusers-select').each(function() {
+    const url = $(this).attr("data-url");
+    $(this).select2({
+      ajax: {
+        url: url,
+        delay: 100,
+        dataType: "json",
+        processResults: (data) => {
+          return {
+            results: data
+          }
+        }
+      },
+      escapeMarkup: (markup) => markup,
+      templateSelection: (item) => `${item.text}`,
+      minimumInputLength: 1,
+      theme: "foundation"
+    });
+  });
+
+  $('select.user-select').each(function() {
+    const url = $(this).attr("data-url");
+    const placeholder = $(this).attr("placeholder");
+
+    $(this).select2({
+      ajax: {
+        url: url,
+        delay: 100,
+        dataType: "json",
+        processResults: (data) => {
+          return {
+            results: data
+          }
+        }
+      },
+      minimumInputLength: 1,
+      placeholder: placeholder,
+      theme: "foundation",
+      allowClear: true,
+      selectOnClose: true,
+      escapeMarkup: (markup) => markup,
+      templateSelection: (item) => `<b>${item.id}</b> - ${item.text}`,
+      templateResult: function(item) {
+        return `<div class="select2-result-repository">
+        <div class="select2-result-repository__avatar" style="background-image:url(${item.avatar})">
+        <div class="hex1"></div><div class="hex2"></div>
+        </div>
+        <div class="select2-result-repository__meta">
+        <b>${item.id}</b> - ${item.text}
+        </div>
+        </div>`;
+      }
+    });
+
+    $(this).on('select2:close', () => $('#note_body').select());
+    $(this).on("select2:clear", function () {
+      $(this).on("select2:opening.cancelOpen", function (evt) {
+        evt.preventDefault();
+        
+        $(this).off("select2:opening.cancelOpen");
+      });
+    });
+  });
+
+  $('select.chapter-select').each(function() {
+    const placeholder = $(this).attr("placeholder");
+
+    $(this).select2({
+      selectOnClose: true,
+      tags: true,
+      allowClear: true,
+      theme: "foundation",
+      placeholder: placeholder,
+      createTag: function (params) {
+        var term = $.trim(params.term);
+
+        if (term === '') {
+          return null;
+        }
+        var n = {
+          id: term,
+          text: term
+        }
+        return n;
+      }
+    });
+
+    $(this).on('select2:close', () => $('#note_body').select());
+    $(this).on("select2:clear", function () {
+      $(this).on("select2:opening.cancelOpen", function (evt) {
+        evt.preventDefault();
+        
+        $(this).off("select2:opening.cancelOpen");
+      });
+    });
+  });
+});