From 9cf5b9b0db64e773fa3cf49bd44e23d3dc7d697a Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Fri, 16 Aug 2019 20:25:07 -0300
Subject: [PATCH] usar input-tag en reemplazo de select2

---
 app/assets/javascripts/application.js   |  1 +
 app/assets/javascripts/input-tag.js     | 10 +++++++++
 app/assets/stylesheets/application.scss | 30 +++++++++++++++++++++++++
 app/helpers/application_helper.rb       |  4 ++++
 app/models/metadata_template.rb         |  4 ++++
 app/views/posts/attributes/_array.haml  | 17 +++++++++++---
 package.json                            |  1 +
 yarn.lock                               |  4 ++++
 8 files changed, 68 insertions(+), 3 deletions(-)
 create mode 100644 app/assets/javascripts/input-tag.js

diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 60346b95..19d1215d 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -1,4 +1,5 @@
 //= require rails-ujs
 //= require turbolinks
 //= require zepto/dist/zepto.min.js
+//= require input-tag/input-tag.js
 //= require_tree .
diff --git a/app/assets/javascripts/input-tag.js b/app/assets/javascripts/input-tag.js
new file mode 100644
index 00000000..ed952c49
--- /dev/null
+++ b/app/assets/javascripts/input-tag.js
@@ -0,0 +1,10 @@
+$(document).on('turbolinks:load', function() {
+  $('.taggable').each(function() {
+    this.innerHTML = '';
+
+    new InputTag({
+      target: this,
+      props: { ...this.dataset }
+    });
+  });
+});
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 26b9795e..cc3d8b4d 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -183,3 +183,33 @@ textarea.post-content {
     }
   }
 }
+
+.taggable {
+  .input-tag {
+    legend {
+      @extend .sr-only
+    }
+
+    label {
+      margin: 0.5rem;
+    }
+
+    input {
+      vertical-align: middle;
+
+      &[type=text] {
+        @extend .form-control;
+        display: inline-block;
+        width: calc(100% - 90px);
+      }
+
+      &[type=checkbox] {
+      }
+
+      &[type=button] {
+        @extend .btn;
+        @extend .btn-info;
+      }
+    }
+  }
+}
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 15ac00f8..667ef0f7 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -100,6 +100,10 @@ module ApplicationHelper
     "#{attribute.join('-')}-feedback"
   end
 
+  def id_for_datalist(*attribute)
+    "#{attribute.join('-')}-datalist"
+  end
+
   private
 
   def post_t(*attribute, post:, type:)
diff --git a/app/models/metadata_template.rb b/app/models/metadata_template.rb
index 04cd21d0..3f3a769d 100644
--- a/app/models/metadata_template.rb
+++ b/app/models/metadata_template.rb
@@ -51,6 +51,10 @@ MetadataTemplate = Struct.new(:site, :document, :name, :label, :type,
     true
   end
 
+  def array?
+    type == 'array'
+  end
+
   private
 
   # Si es obligatorio no puede estar vacío
diff --git a/app/views/posts/attributes/_array.haml b/app/views/posts/attributes/_array.haml
index aab5af18..93552f85 100644
--- a/app/views/posts/attributes/_array.haml
+++ b/app/views/posts/attributes/_array.haml
@@ -1,7 +1,18 @@
--# TODO: Convertir a select2 o nuestro reemplazo
 .form-group{ class: invalid(post, attribute) }
   = label_tag "post_#{attribute}", post_label_t(attribute, post: post)
-  = text_field 'post', attribute, value: metadata.value.join(', '),
-    **field_options(attribute, metadata)
+
+  .taggable{ data: { values: metadata.value.join(','),
+    name: "post[#{attribute}][]", list: id_for_datalist(attribute),
+    remove: 'false', legend: post_label_t(attribute, post: post),
+    described: id_for_help(attribute) } }
+
+    = text_field(*field_name_for('post', attribute, '[]'),
+      value: metadata.value.join(', '),
+      **field_options(attribute, metadata))
+
   = render 'posts/attribute_feedback',
     post: post, attribute: attribute, metadata: metadata
+
+  %datalist{ id: id_for_datalist(attribute) }
+    - site.everything_of(attribute).each do |value|
+      %option{ value: value }
diff --git a/package.json b/package.json
index 90d59f4f..12c34a3f 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "dependencies": {
     "codemirror": "^5.48.2",
     "commonmark": "^0.29.0",
+    "input-tag": "https://0xacab.org/sutty/input-tag.git",
     "table-dragger": "^1.0.2",
     "tui-editor": "^1.4.5",
     "zepto": "^1.2.0"
diff --git a/yarn.lock b/yarn.lock
index 8d0ada8a..de056319 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -147,6 +147,10 @@ highlight.js@^9.12.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.9.tgz#865257da1dbb4a58c4552d46c4b3854f77f0e6d5"
   integrity sha512-M0zZvfLr5p0keDMCAhNBp03XJbKBxUx5AfyfufMdFMEP4N/Xj6dh0IqC75ys7BAzceR34NgcvXjupRVaHBPPVQ==
 
+"input-tag@https://0xacab.org/sutty/input-tag.git":
+  version "0.0.6"
+  resolved "https://0xacab.org/sutty/input-tag.git#5bfcbcb83abd941caadab09f80cc684909f12a37"
+
 jquery@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"