diff --git a/.eslintrc.yml b/.eslintrc.yml index 339bc88f2..ec7a54ac4 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -5,6 +5,7 @@ extends: "eslint:recommended" globals: $: readonly App: readonly + AmsifySuggestags: readonly annotator: readonly c3: readonly CKEDITOR: readonly diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 29ee399ef..ad7798135 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -62,6 +62,7 @@ //= require moderator_legislation_proposals //= require gettext //= require annotator +//= require jquery.amsify.suggestags //= require tags //= require users //= require votes @@ -111,6 +112,7 @@ //= require columns_selector //= require budget_edit_associations //= require datepicker +//= require sdg/related_list_selector var initialize_modules = function() { "use strict"; @@ -163,6 +165,7 @@ var initialize_modules = function() { } App.BudgetEditAssociations.initialize(); App.Datepicker.initialize(); + App.SDGRelatedListSelector.initialize(); }; var destroy_non_idempotent_modules = function() { diff --git a/app/assets/javascripts/sdg/related_list_selector.js b/app/assets/javascripts/sdg/related_list_selector.js new file mode 100644 index 000000000..cc229e03c --- /dev/null +++ b/app/assets/javascripts/sdg/related_list_selector.js @@ -0,0 +1,13 @@ +(function() { + "use strict"; + App.SDGRelatedListSelector = { + initialize: function() { + if ($(".sdg-related-list-selector").length) { + var amsify_suggestags = new AmsifySuggestags($(".sdg-related-list-selector .input")); + amsify_suggestags.classes.focus = ".sdg-related-list-focus"; + amsify_suggestags.classes.sTagsInput = ".sdg-related-list-selector-input"; + amsify_suggestags._init(); + } + } + }; +}).call(this); diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index 32577c576..0b899e516 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -20,6 +20,7 @@ @import "custom"; @import "c3"; @import "annotator.min"; +@import "amsify.suggestags"; @import "annotator_overrides"; @import "jquery-ui/datepicker"; @import "datepicker_overrides"; diff --git a/app/components/application_component.rb b/app/components/application_component.rb index 25c553243..78b7da075 100644 --- a/app/components/application_component.rb +++ b/app/components/application_component.rb @@ -1,4 +1,5 @@ class ApplicationComponent < ViewComponent::Base include SettingsHelper delegate :back_link_to, to: :helpers + delegate :default_form_builder, to: :controller end diff --git a/app/components/sdg/related_list_selector_component.html.erb b/app/components/sdg/related_list_selector_component.html.erb new file mode 100644 index 000000000..b1dd27f7b --- /dev/null +++ b/app/components/sdg/related_list_selector_component.html.erb @@ -0,0 +1,8 @@ +
diff --git a/app/components/sdg/related_list_selector_component.rb b/app/components/sdg/related_list_selector_component.rb new file mode 100644 index 000000000..01455436f --- /dev/null +++ b/app/components/sdg/related_list_selector_component.rb @@ -0,0 +1,7 @@ +class SDG::RelatedListSelectorComponent < ApplicationComponent + attr_reader :f + + def initialize(form) + @f = form + end +end diff --git a/app/components/sdg_management/relations/edit_component.html.erb b/app/components/sdg_management/relations/edit_component.html.erb index c13a15f86..3cb8350f4 100644 --- a/app/components/sdg_management/relations/edit_component.html.erb +++ b/app/components/sdg_management/relations/edit_component.html.erb @@ -1,7 +1,7 @@ <%= header %> <%= form_for record, url: update_path do |f| %> - <%= f.text_field :sdg_related_list %> + <%= render SDG::RelatedListSelectorComponent.new(f) %> <%= f.submit %> <% end %> diff --git a/config/locales/en/sdg.yml b/config/locales/en/sdg.yml index 8da3723da..2df83bb24 100644 --- a/config/locales/en/sdg.yml +++ b/config/locales/en/sdg.yml @@ -431,3 +431,6 @@ en: more: one: "One more goal" other: "%{count} more goals" + related_list_selector: + hint: "You can introduce the code of a specific goal/target or a text to find one" + placeholder: "Write a goal or target code or description" diff --git a/config/locales/es/sdg.yml b/config/locales/es/sdg.yml index e7566ab83..ab80cf3a1 100644 --- a/config/locales/es/sdg.yml +++ b/config/locales/es/sdg.yml @@ -431,3 +431,6 @@ es: more: one: "Un objetivo más" other: "%{count} objetivos más" + related_list_selector: + hint: "Puedes introducir el código de un objetivo/meta específico o un texto para encontrar uno" + placeholder: "Escribe las etiquetas que desees" diff --git a/spec/components/sdg/related_list_selector_component_spec.rb b/spec/components/sdg/related_list_selector_component_spec.rb new file mode 100644 index 000000000..469f683dd --- /dev/null +++ b/spec/components/sdg/related_list_selector_component_spec.rb @@ -0,0 +1,14 @@ +require "rails_helper" + +describe SDG::RelatedListSelectorComponent, type: :component do + let(:debate) { create(:debate) } + let(:form) { ConsulFormBuilder.new(:debate, debate, ActionView::Base.new, {}) } + let(:component) { SDG::RelatedListSelectorComponent.new(form) } + + it "renders sdg_related_list field" do + render_inline component + + expect(page).to have_css ".sdg-related-list-selector .input" + expect(page).to have_content "Sustainable Development Goals and Targets" + end +end diff --git a/spec/system/sdg_management/relations_spec.rb b/spec/system/sdg_management/relations_spec.rb index e51aa972c..fedec6bed 100644 --- a/spec/system/sdg_management/relations_spec.rb +++ b/spec/system/sdg_management/relations_spec.rb @@ -190,12 +190,15 @@ describe "SDG Relations", :js do end describe "Edit" do - scenario "allows changing the targets and marks the resource as reviewed" do + scenario "allows adding the goals and targets and marks the resource as reviewed" do process = create(:legislation_process, title: "SDG process") - process.sdg_targets = [SDG::Target["3.3"]] + process.sdg_goals = [SDG::Goal[3]] + process.sdg_targets = [SDG::Target[3.3]] visit sdg_management_edit_legislation_process_path(process) - fill_in "Targets", with: "1.2, 2.1", fill_options: { clear: :backspace } + + find(:css, ".sdg-related-list-selector-input").set("1.2, 2,") + click_button "Update Process" expect(page).to have_content "Process updated successfully and marked as reviewed" @@ -203,16 +206,44 @@ describe "SDG Relations", :js do click_link "Marked as reviewed" within("tr", text: "SDG process") do - expect(page).to have_css "td", exact_text: "1.2, 2.1" + expect(page).to have_css "td", exact_text: "1.2, 3.3" + expect(page).to have_css "td", exact_text: "1, 2, 3" + end + end + + scenario "allows removing the goals and targets" do + process = create(:legislation_process, title: "SDG process") + process.sdg_goals = [SDG::Goal[2], SDG::Goal[3]] + process.sdg_targets = [SDG::Target[2.1], SDG::Target[3.3]] + + visit sdg_management_edit_legislation_process_path(process) + + within "span[data-val='2']" do + find(".amsify-remove-tag").click + end + + within "span[data-val='3.3']" do + find(".amsify-remove-tag").click + end + + click_button "Update Process" + + expect(page).to have_content "Process updated successfully and marked as reviewed" + + click_link "Marked as reviewed" + + within("tr", text: "SDG process") do + expect(page).to have_css "td", exact_text: "2, 3" + expect(page).to have_css "td", exact_text: "2.1" end end scenario "does not show the review notice when resource was already reviewed" do debate = create(:sdg_review, relatable: create(:debate, title: "SDG debate")).relatable - debate.sdg_targets = [SDG::Target["3.3"]] + debate.sdg_targets = [SDG::Target[3.3]] visit sdg_management_edit_debate_path(debate, filter: "sdg_reviewed") - fill_in "Targets", with: "1.2, 2.1", fill_options: { clear: :backspace } + find(:css, ".sdg-related-list-selector-input").set("1.2, 2.1,") click_button "Update Debate" expect(page).not_to have_content "Debate updated successfully and marked as reviewed"