decidim-homepage_proposals 1.0.0

data/README.md

@@ -0,0 +1,32 @@
+# Decidim::HomepageProposals
+
+Homepage slider for proposals.
+
+## Usage
+
+HomepageProposals will be available as a Component for a Participatory
+Space.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "decidim-homepage_proposals"
+```
+
+And then execute:
+
+```bash
+bundle
+bundle exec rake decidim_module_homepage_proposals:webpacker:install
+bundle exec rake assets:precompile
+```
+
+## Contributing
+
+See [Decidim](https://github.com/decidim/decidim).
+
+## License
+
+This engine is distributed under the GNU AFFERO GENERAL PUBLIC LICENSE.

data/Rakefile

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+require "decidim/dev/common_rake"
+
+desc "Generates a dummy app for testing"
+task test_app: "decidim:generate_external_test_app"
+
+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",
+      "--seed_db",
+      "--demo",
+      "--profiling"
+    )
+  end
+  seed_slider("development_app")
+end
+
+def seed_slider(path)
+  Dir.chdir(path) do
+    system("bundle exec rake decidim:homepage_proposals:seed")
+  end
+end

data/app/cells/decidim/homepage_proposals/content_blocks/proposals_slider/show.erb

@@ -0,0 +1,37 @@
+<section class="wrapper-home home-section" xmlns="http://www.w3.org/1999/xhtml">
+  <div class="row collapse">
+    <h3 class="section-heading"><%= t("decidim.homepage_proposals.proposal_at_a_glance.title") %></h3>
+
+
+      <div class="filters_container" <%= 'style="display: none"' unless content_block_settings.activate_filters %>>
+        <%= render partial: "decidim/shared/homepage_proposals/filters_small_view" %>
+        <div class="show-for-mediumlarge">
+          <%= render partial: "decidim/shared/homepage_proposals/filters" %>
+        </div>
+      </div>
+
+
+    <div id="proposals_slider">
+      <div class="glide margin-top-3">
+        <div class="column small-12">
+          <p class="loading text-center"><%= t(".loading") %></p>
+        </div>
+        <div class="glide__track row small-12 column" data-glide-el="track">
+          <ul class="glide__slides" id="proposals_glide_items">
+            <%# Content loaded by 'app/packs/src/decidim/homepage_proposals/main.js' %>
+          </ul>
+        </div>
+        <div class="glide__bullets" data-glide-el="controls[nav]">
+          <div class="glide__bullet" data-glide-dir="<">
+            <%= icon "chevron-left", class: "icon--large" %>
+          </div>
+          <div class="glide__bullet" data-glide-dir=">">
+            <%= icon "chevron-right", class: "icon--large" %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<%= javascript_pack_tag 'decidim_homepage_proposals' %>

data/app/cells/decidim/homepage_proposals/content_blocks/proposals_slider_cell.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+module Decidim
+  module HomepageProposals
+    module ContentBlocks
+      class ProposalsSliderCell < Decidim::ViewModel
+        attr_accessor :glanced_proposals
+
+        include Cell::ViewModel::Partial
+        include Core::Engine.routes.url_helpers
+        include Decidim::IconHelper
+        include ActionView::Helpers::FormOptionsHelper
+        include Decidim::FiltersHelper
+        include Decidim::FilterResource
+
+        private
+
+        def content_block_settings
+          @content_block_settings ||= Decidim::ContentBlock.find_by(
+            manifest_name: "proposals_slider",
+            organization: current_organization
+          ).settings
+        end
+
+        def options_for_default_component
+          components = Decidim::Component.where(id: content_block_settings.linked_components_id.compact)
+          options = components.map do |component|
+            ["#{translated_attribute(component.name)} (#{translated_attribute(component.participatory_space.title)})", component.id]
+          end
+
+          options_for_select(options, selected: selected_component_id)
+        end
+
+        def linked_components
+          @linked_components ||= Decidim::Component.where(id: content_block_settings.linked_components_id.compact)
+        end
+
+        def default_filter_params
+          {
+            scope_id: nil,
+            category_id: nil,
+            component_id: nil
+          }
+        end
+
+        def categories_filter
+          @categories_filter ||= Decidim::Category.where(id: linked_components.map(&:categories).flatten)
+        end
+
+        def selected_component_id
+          @selected_component_id ||= params.dig(:filter, :component_id) || content_block_settings.default_linked_component
+        end
+      end
+    end
+  end
+end

data/app/cells/decidim/homepage_proposals/content_blocks/proposals_slider_settings_form/show.erb

@@ -0,0 +1,13 @@
+<% form.fields_for :settings, form.object.settings do |settings_fields| %>
+  <%= settings_fields.check_box :activate_filters, label: t(".activate_filters") %>
+  <%= settings_fields.select :linked_components_id,
+                             options_for_proposals_components,
+                             { include_blank: true, label: t(".linked_components_id") },
+                             { multiple: true, class: "chosen-select" } %>
+  <%= settings_fields.select :default_linked_component,
+                 options_for_default_component,
+                 { include_blank: false, label: t(".default_linked_component") },
+                 class: "chosen-select" %>
+<% end %>
+
+<%= javascript_pack_tag "decidim_homepage_proposals_admin" %>

data/app/cells/decidim/homepage_proposals/content_blocks/proposals_slider_settings_form_cell.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Decidim
+  module HomepageProposals
+    module ContentBlocks
+      class ProposalsSliderSettingsFormCell < Decidim::ViewModel
+        include ActionView::Helpers::FormOptionsHelper
+
+        alias form model
+
+        def content_block
+          options[:content_block]
+        end
+
+        def options_for_proposals_components
+          options = proposals_components.map do |proposal_component|
+            ["#{translated_attribute(proposal_component.name)} (#{translated_attribute(proposal_component.participatory_space.title)})", proposal_component.id]
+          end
+          options_for_select(options, selected: content_block.settings.linked_components_id)
+        end
+
+        def options_for_default_component
+          components = Decidim::Component.where(id: content_block.settings.linked_components_id.compact)
+          options = components.map do |component|
+            ["#{translated_attribute(component.name)} (#{translated_attribute(component.participatory_space.title)})", component.id]
+          end
+          options_for_select(options, selected: content_block.settings.default_linked_component)
+        end
+
+        def proposals_components
+          @proposals_components ||= Decidim::Component.where(manifest_name: "proposals").published
+        end
+      end
+    end
+  end
+end

data/app/controllers/decidim/proposals_slider_controller.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module Decidim
+  class ProposalsSliderController < Decidim::ApplicationController
+    include Decidim::FilterResource
+    include Decidim::TranslatableAttributes
+    include Decidim::Core::Engine.routes.url_helpers
+    include Decidim::ComponentPathHelper
+
+    def refresh_proposals
+      render json: build_proposals_api
+    end
+
+    private
+
+    def build_proposals_api
+      return component_url unless glanced_proposals.any?
+
+      glanced_proposals.flat_map do |proposal|
+        {
+          id: proposal.id,
+          title: translated_attribute(proposal.title).truncate(40),
+          body: translated_attribute(proposal.body).truncate(150),
+          url: proposal_path(proposal),
+          image: image_for(proposal),
+          state: proposal.state
+        }
+      end
+    end
+
+    def glanced_proposals
+      if params[:filter].present?
+        category = Decidim::Category.find(params.dig(:filter, :category_id)) if params.dig(:filter, :category_id).present?
+        scopes = Decidim::Scope.find(params.dig(:filter, :scope_id)) if params.dig(:filter, :scope_id).present?
+      end
+
+      @glanced_proposals ||= Decidim::Proposals::Proposal.published
+                                                         .where(component: params.dig(:filter, :component_id))
+                                                         .where(filter_by_scopes(scopes))
+                                                         .select do |proposal|
+                                                           if category.present?
+                                                             proposal.category == category
+                                                           else
+                                                             true
+                                                           end
+                                                         end
+                                                         .sample(12)
+    end
+
+    def filter_by_scopes(scopes)
+      { scope: scopes } if scopes.present?
+    end
+
+    def proposal_path(proposal)
+      Decidim::ResourceLocatorPresenter.new(proposal).path
+    end
+
+    def image_for(proposal)
+      return view_context.image_pack_url("media/images/slider_proposal_image.jpeg") unless proposal.attachments.select(&:image?).any?
+
+      proposal.attachments.select(&:image?).first&.url
+    end
+
+    def component_url
+      return { url: "/" } if params.dig(:filter, :component_id).blank?
+
+      begin
+        { url: main_component_path(Decidim::Component.find(params.dig(:filter, :component_id))) }
+      rescue ActiveRecord::RecordNotFound
+        { url: "/" }
+      end
+    end
+  end
+end

data/app/packs/entrypoints/decidim_homepage_proposals.js

@@ -0,0 +1,5 @@
+// Images
+require.context("../images", true)
+
+import "src/decidim/homepage_proposals/main"
+import "src/decidim/form_filter.js"

data/app/packs/entrypoints/decidim_homepage_proposals_admin.js

@@ -0,0 +1 @@
+import "src/decidim/homepage_proposals/admin"

data/app/packs/images/decidim/homepage_proposals/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/packs/src/decidim/homepage_proposals/admin.js

@@ -0,0 +1,16 @@
+$(document).ready(function() {
+    $('#content_block_settings_linked_components_id').on('change', function() {
+        var selectedOptions = $(this).val(); // Get the selected options from the multiselect field
+        var $selectedOptionsField = $('#content_block_settings_default_linked_component'); // Get the select field for the selected options
+
+        $selectedOptionsField.empty(); // Clear the select field
+
+        // Add the selected options to the select field
+        if (selectedOptions && selectedOptions.length > 0) {
+            selectedOptions.forEach(function(option) {
+                var optionText = $('#content_block_settings_linked_components_id option[value="' + option + '"]').text();
+                $selectedOptionsField.append($('<option>', { value: option, text: optionText }));
+            });
+        }
+    });
+});

data/app/packs/src/decidim/homepage_proposals/glideBuilder.js

@@ -0,0 +1,49 @@
+import Glide from "@glidejs/glide";
+
+export default class GlideBuilder {
+    constructor(selector = '.glide', type = 'carousel') {
+        this.type = type
+        this.setOpts()
+        this.glide = new Glide(selector, this.options)
+
+        this.bindings()
+    }
+
+    static pervView() {
+        return 4;
+    }
+
+    destroy() {
+        this.glide.destroy();
+    }
+
+    disable() {
+        this.glide.disable();
+    }
+
+    mount() {
+        this.glide.mount()
+    }
+
+    bindings() {
+    this.glide.on("run", () => {
+            let bulletNumber = this.glide.index;
+            $($(".glide__bullets").children()).css("color", "lightgrey");
+            $($(".glide__bullets").children().get(bulletNumber + 1)).css("color", "grey");
+        });
+    }
+
+    setOpts() {
+        this.options = {
+            type: this.type,
+            startAt: 0,
+            autoplay: 0,
+            perView: GlideBuilder.pervView(),
+            hoverpause: true,
+            breakpoints: {
+                1024: { perView: 3 }, 768: { perView: 2 }, 480: { perView: 1 }
+            },
+            perTouch: 1
+        }
+    }
+}

data/app/packs/src/decidim/homepage_proposals/glidejs/Manager.js

@@ -0,0 +1,130 @@
+import FormFilterComponents from "src/decidim/form_filter.js";
+import GlideBuilder from "../glideBuilder";
+import GlideItem from "./glideItems/GlideItem";
+import Proposal from "./glideItems/Proposal";
+import NotFound from "./glideItems/NotFound";
+
+
+// Manager communicates with API and build the HTML for the Glide.js carousel
+// Example :
+// let manager = new Manager($proposalsSlider, $proposalsGlideItems, $glideBullets, $formFilter)
+// manager.start().then(() => manager.glide.mount())
+//
+// @return - Instance of Manager
+export default class Manager {
+    constructor($proposalsSlider, $proposalsGlideItems, $glideBullets, $formFilter) {
+        this.$proposalSlider = $proposalsSlider;
+        this.$proposalsGlideItems = $proposalsGlideItems;
+        this.formFilterComponent = new FormFilterComponents($formFilter);
+        this.$loading = this.$proposalSlider.find(".loading");
+    }
+
+    // @return String - API URL with filter params
+    APIUrl() {
+        return '/proposals_slider/refresh_proposals' + this.filterURIParams();
+    }
+
+    // @return String - Filter params query string
+    filterURIParams() {
+        return this.formFilterComponent._currentStateAndPath()[0];
+    }
+
+    // Clears Glide carousel and display loader
+    // @return void
+    startLoading() {
+        let height = $(".glide__slides").css("height");
+        this.clearGlideItems();
+        this.$loading.css("height", height);
+        this.$loading.show();
+    }
+
+    // Hide loader
+    // @return void
+    endLoading() {
+        this.$loading.hide();
+    }
+
+    // Clears glide items and glide bullets
+    // @return void
+    clearGlideItems() {
+        this.$proposalsGlideItems.empty();
+        $(".glide__bullet.glide__bullet_idx").remove()
+    }
+
+    // We must disable existing glide carousel before refresh
+    // @return void
+    disableGlide() {
+        if (this.glide !== undefined) {
+            this.glide.disable()
+        }
+    }
+
+    // Send request to API and create items received in Glide.js carousel
+    // @return this.glide
+    start() {
+        this.startLoading();
+        this.disableGlide()
+
+        $.get(this.APIUrl())
+            .done((res) => {
+                this.generateGlides(res)
+            })
+            .fail(() => {
+                this.generateGlides([])
+            })
+            .always((res) => {
+                this.glide = new GlideBuilder('.glide', 'carousel');
+
+                if (res.length <= 1 || res.status === 500) {
+                    this.glide.disable()
+                }
+                this.endLoading();
+
+                this.glide.mount()
+            })
+    }
+
+    // Creates Glide Items
+    // @return void
+    generateGlides(res) {
+        if (res.url) {
+            this.createProposalsNotFound(res.url);
+            return;
+        }
+
+        this.createProposals(res)
+    }
+
+    // Create Glide Items with:
+    // - A Not Found GlideItem
+    // - 3 placeholders
+    // @return void
+    createProposalsNotFound(url) {
+        const notFoundGlide = new NotFound(url)
+        this.$proposalsGlideItems.append(notFoundGlide.render())
+        $(".glide__bullets > .glide__bullet:last").before(notFoundGlide.bullet(0));
+
+        for (let i = 0; i < GlideBuilder.pervView() - 1; i++) {
+            this.$proposalsGlideItems.append(notFoundGlide.placeholder());
+        }
+    }
+
+    // Create Glide Items proposals, if proposals length is smaller than GlideBuilder.pervView() (default: 4)
+    // Then it creates placeholders until reaching 4 Glide Items
+    // @return void
+    createProposals(proposals) {
+        for (let i = 0; i < proposals.length; i++) {
+            let proposalGlide = new Proposal(proposals[i])
+            this.$proposalsGlideItems.append(proposalGlide.render());
+            $(".glide__bullets > .glide__bullet:last").before(proposalGlide.bullet(i));
+        }
+
+        if (proposals.length < GlideBuilder.pervView()) {
+            let missingCount = GlideBuilder.pervView() - proposals.length
+
+            for (let i = 0; i < missingCount; i++) {
+                this.$proposalsGlideItems.append(new GlideItem(null).placeholder());
+            }
+        }
+    }
+}

data/app/packs/src/decidim/homepage_proposals/glidejs/glideItems/GlideItem.js

@@ -0,0 +1,17 @@
+export default class GlideItem {
+    constructor(url) {
+        this.url = url;
+    }
+
+    placeholder() {
+        return `<div class="column glide__slide"></div>`
+    }
+
+    bullet(idx) {
+        return `<div class="glide__bullet glide__bullet_idx" data-glide-dir="=${idx}">
+  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-circle-fill" viewBox="0 0 16 16">
+    <circle cx="7" cy="7" r="7"/>
+  </svg>
+</div>`
+    }
+}

data/app/packs/src/decidim/homepage_proposals/glidejs/glideItems/NotFound.js

@@ -0,0 +1,23 @@
+import GlideItem from "./GlideItem";
+
+export default class NotFound extends GlideItem {
+    render() {
+        return `<div class="column glide__slide">
+<div class="card card--proposal card--stack">    
+  <div class="card--header"></div>
+    <div class="card--content text-center margin-top-1">
+        <h3 class="card__title">No match</h3>
+        <div class="card__text--paragraph padding-top-1">
+            <p>No proposals found for this request</p>
+        </div>
+        <a href="${this.url}" class="button--clear-filters">
+            <div class="card__button align-bottom">
+                <span class="button button--secondary">Visit proposals</span>
+            </div>
+        </a>
+    </div>
+  </div>
+</div>`
+    }
+
+}

data/app/packs/src/decidim/homepage_proposals/glidejs/glideItems/Proposal.js

@@ -0,0 +1,51 @@
+import GlideItem from "./GlideItem";
+
+export default class Proposal extends GlideItem {
+    constructor(obj) {
+        super();
+        this.title = obj.title;
+        this.body = obj.body;
+        this.image = obj.image;
+        this.url = obj.url;
+        this.state = obj.state || 'not answered' ;
+        this.color = this.colorFromState(this.state);
+    }
+
+    colorFromState(state) {
+        switch(state){
+            case 'accepted':
+                return 'success';
+            case 'rejected':
+                return 'alert';
+            case 'evaluating':
+                return 'warning';
+            default:
+                return 'muted';
+        }
+    }
+
+    render() {
+        return `<div class="column glide__slide">
+<div class="card card--proposal card--stack">
+    <a href="${this.url}">
+      <div class="proposal-glance card--header">
+      <img src="${this.image}" class="proposal-glance__img" alt="slider_img">
+</div>
+    </a>
+    <div class="card--process__small text-center padding-1">
+            <span class="${this.color} card__text--status status_slider"> ${this.state.charAt(0).toUpperCase() + this.state.slice(1)} </span>
+        <a href="${this.url}"><h3 class="proposal-glance card__title">${this.title}</h3></a>
+        <div class="card__text--paragraph padding-top-1">
+            <p>${this.body}</p>
+        </div>
+        <a href="${this.url}">
+            <div class="card__button align-bottom padding-top-1">
+                <span class="button small button--secondary">Visit</span>
+            </div>
+        </a>
+    </div>
+  </div>
+</div>`
+    }
+
+}

data/app/packs/src/decidim/homepage_proposals/main.js

@@ -0,0 +1,19 @@
+import Manager from "./glidejs/Manager"
+
+$(() => {
+    const $proposalsSlider = $("#proposals_slider");
+    const $proposalsGlideItems = $("#proposals_glide_items");
+    const $filterForm = $("#filters-form");
+    const $smallFilterForm = $("#filter-box form");
+    const slider = new Manager($proposalsSlider, $proposalsGlideItems, $(".glide__bullet.glide__bullet_idx"), $filterForm);
+    const smallSlider = new Manager($proposalsSlider, $proposalsGlideItems, $(".glide__bullet.glide__bullet_idx"), $smallFilterForm);
+    slider.start()
+
+    $filterForm.on("change", () => {
+        slider.start()
+    });
+
+    $smallFilterForm.on("change", () => {
+        smallSlider.start()
+    });
+});

data/app/packs/stylesheets/decidim/homepage_proposals/homepage_proposals.scss

@@ -0,0 +1,45 @@
+@import "@glidejs/glide/src/assets/sass/glide.core";
+
+.card__text--paragraph {
+  height: 150px;
+}
+
+// glide's relative position prevents filters from being clicked
+.glide {
+  position: inherit !important;
+  margin-top: 0 !important;
+}
+
+.glide__bullets {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.glide__bullet {
+  margin-right: 0.5vw;
+  margin-left: 0.5vw;
+  color: lightgrey;
+}
+
+.glide__bullet:nth-of-type(2) {
+  color: grey;
+}
+
+.glide__bullet:hover {
+  color: grey;
+}
+
+.proposal-glance.card--header {
+  height: 120px;
+}
+
+.proposal-glance__img {
+  width:100%;
+  height:100%;
+  object-fit:cover;
+}
+
+.proposal-glance.card__title {
+  max-height: 30px;
+}