From 049967649e82ba6d5699c1e1a3f00d246490dc60 Mon Sep 17 00:00:00 2001
From: iagirre <itziar.agirre@m2c.es>
Date: Tue, 19 Sep 2017 17:37:31 +0200
Subject: [PATCH] Selection of multiple tags separated by ',' works for
 hardcoded array of tags.

---
 app/assets/javascripts/application.js         |  3 ++
 .../javascripts/tag_autocomplete.js.coffee    | 29 +++++++++++++
 app/assets/stylesheets/application.scss       |  2 +
 .../stylesheets/autocomplete_overrides.scss   | 41 +++++++++++++++++++
 app/views/debates/_form.html.erb              |  3 +-
 config/routes.rb                              |  4 ++
 6 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/tag_autocomplete.js.coffee
 create mode 100644 app/assets/stylesheets/autocomplete_overrides.scss

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 2ff87100a..01c5dbaff 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -14,6 +14,7 @@
 //= require jquery_ujs
 //= require jquery-ui/widgets/datepicker
 //= require jquery-ui/i18n/datepicker-es
+//= require jquery-ui/widgets/autocomplete
 //= require jquery-fileupload/basic
 //= require foundation
 //= require turbolinks
@@ -63,6 +64,7 @@
 //= require documentable
 //= require tree_navigator
 //= require custom
+//= require tag_autocomplete
 
 var initialize_modules = function() {
   App.Comments.initialize();
@@ -97,6 +99,7 @@ var initialize_modules = function() {
   App.WatchFormChanges.initialize();
   App.TreeNavigator.initialize();
   App.Documentable.initialize();
+  App.TagAutocomplete.initialize();
 };
 
 $(function(){
diff --git a/app/assets/javascripts/tag_autocomplete.js.coffee b/app/assets/javascripts/tag_autocomplete.js.coffee
new file mode 100644
index 000000000..9e10c100e
--- /dev/null
+++ b/app/assets/javascripts/tag_autocomplete.js.coffee
@@ -0,0 +1,29 @@
+App.TagAutocomplete =
+
+  split: ( val ) ->
+    return (val.split( /,\s*/ ))
+
+  extractLast: ( term ) ->
+    return (App.TagAutocomplete.split( term ).pop())
+
+  init_autocomplete: ->
+    $('.js-tag-list').autocomplete
+      source: (request, response) ->
+        response( $.ui.autocomplete.filter(["Arbol", "Becerro", "Caracol"], App.TagAutocomplete.extractLast( request.term ) ) );
+      minLength: 0,
+      search: ->
+        console.log(this.value);
+        console.log(App.TagAutocomplete.extractLast( this.value ));
+        App.TagAutocomplete.extractLast( this.value );
+      focus: ->
+        return false;
+      select: ( event, ui ) -> (
+        terms = App.TagAutocomplete.split( this.value );
+        terms.pop();
+        terms.push( ui.item.value );
+        terms.push( "" );
+        this.value = terms.join( ", " );
+        return false;);
+
+  initialize: ->
+    App.TagAutocomplete.init_autocomplete();
\ No newline at end of file
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 19c73de32..e4dd4ea1c 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -16,4 +16,6 @@
 @import 'annotator_overrides';
 @import 'jquery-ui/datepicker';
 @import 'datepicker_overrides';
+@import 'jquery-ui/autocomplete';
+@import 'autocomplete_overrides';
 @import 'documentable';
diff --git a/app/assets/stylesheets/autocomplete_overrides.scss b/app/assets/stylesheets/autocomplete_overrides.scss
new file mode 100644
index 000000000..68537fd8a
--- /dev/null
+++ b/app/assets/stylesheets/autocomplete_overrides.scss
@@ -0,0 +1,41 @@
+// Overrides styles of jquery-ui/autocomplete
+//
+
+/* Autocomplete
+----------------------------------*/
+.ui-autocomplete { position: absolute; cursor: default; }
+.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
+
+/* workarounds */
+* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */
+
+/* Menu
+----------------------------------*/
+.ui-menu {
+  list-style:none;
+  padding: 0px 5px;
+  margin: 0;
+  display:block;
+  /*width:227px;*/
+  background: white;
+  border: 1px solid $border;
+}
+.ui-menu .ui-menu {
+  margin-top: -3px;
+}
+.ui-menu .ui-menu-item {
+  margin:0;
+  padding: 0;
+  width: 200px;
+}
+.ui-menu .ui-menu-item a {
+  /*  text-decoration:none;
+    display:block;*/
+  padding:.2em .4em;
+  /*  line-height:1.5;
+    zoom:1;*/
+}
+.ui-menu .ui-menu-item a.ui-state-hover,
+.ui-menu .ui-menu-item a.ui-state-active {
+  margin: -1px;
+}
\ No newline at end of file
diff --git a/app/views/debates/_form.html.erb b/app/views/debates/_form.html.erb
index 96a5337ca..28ef69804 100644
--- a/app/views/debates/_form.html.erb
+++ b/app/views/debates/_form.html.erb
@@ -22,7 +22,8 @@
       <%= f.text_field :tag_list, value: @debate.tag_list.to_s,
                         label: false,
                         placeholder: t("debates.form.tags_placeholder"),
-                        aria: {describedby: "tag-list-help-text"} %>
+                        aria: {describedby: "tag-list-help-text"},
+                        data: {js_url: tags_search_path}%>
     </div>
     <div class="small-12 column">
       <% if @debate.new_record? %>
diff --git a/config/routes.rb b/config/routes.rb
index a02384ced..666285496 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -167,6 +167,10 @@ Rails.application.routes.draw do
     resource :email, controller: "email", only: [:new, :show, :create]
     resource :letter, controller: "letter", only: [:new, :create, :show, :edit, :update]
   end
+  
+  namespace :tags do
+    get :search
+  end
 
 
   namespace :admin do