From 6fc6075a02f9e41cb9e4bce597f08fcd01374c69 Mon Sep 17 00:00:00 2001
From: Luc Rocher <luc@rocher.lc>
Date: Fri, 28 Apr 2017 11:39:24 +0200
Subject: [PATCH] Autocomplete tags using select2

---
 apps/rp/forms.py                       | 11 +++++++++++
 apps/rp/templates/rp/article_form.html |  9 +++++++++
 apps/rp/views/articles.py              |  8 +++++++-
 package.json                           |  3 ++-
 static/src/admin.js                    |  3 +++
 5 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 apps/rp/forms.py

diff --git a/apps/rp/forms.py b/apps/rp/forms.py
new file mode 100644
index 0000000..2843b2d
--- /dev/null
+++ b/apps/rp/forms.py
@@ -0,0 +1,11 @@
+from django import forms
+
+
+class TagMultipleChoiceField(forms.ModelMultipleChoiceField):
+    def prepare_value(self, value):
+        if hasattr(value, 'tag_id'):
+            return value.tag_id
+        elif hasattr(value, '__iter__') and not isinstance(value, str) and not hasattr(value, '_meta'):
+            return [self.prepare_value(v) for v in value]
+        else:
+            return super(TagMultipleChoiceField, self).prepare_value(value)
diff --git a/apps/rp/templates/rp/article_form.html b/apps/rp/templates/rp/article_form.html
index d94b5de..48f5572 100644
--- a/apps/rp/templates/rp/article_form.html
+++ b/apps/rp/templates/rp/article_form.html
@@ -41,4 +41,13 @@
 
 </div>
 </div>
+
+<script type="text/javascript">
+  $('[name=tags]').select2({
+    tags: true,
+    tokenSeparators: [',', ' '],
+    theme: "bootstrap"
+  });
+  $('.select2-container').width("auto");
+</script>
 {% endblock %}
diff --git a/apps/rp/views/articles.py b/apps/rp/views/articles.py
index f85e1a8..1358c0c 100644
--- a/apps/rp/views/articles.py
+++ b/apps/rp/views/articles.py
@@ -6,9 +6,11 @@ from django.urls import reverse, reverse_lazy
 from django import forms
 
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Submit, Layout, Field, Div, HTML
+from crispy_forms.layout import Layout, Field, Div, HTML
 from crispy_forms.bootstrap import AppendedText
 
+from taggit.models import Tag
+from rp.forms import TagMultipleChoiceField
 
 from rp.models import Article
 from .votes import UDList
@@ -79,6 +81,10 @@ class ArticleEdit(UpdateView):
         form.helper = FormHelper()
         form.helper.form_tag = False
 
+        # Change the layout of the tags field
+        form.fields["tags"] = TagMultipleChoiceField(
+            queryset=Tag.objects.all())
+
         left_layout = Div(
             Div(
                 Field('title', wrapper_class='col-sm-10'),
diff --git a/package.json b/package.json
index 11585f1..b1188ef 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
   "dependencies": {
     "bootstrap": "4.0.0-alpha.6",
     "font-awesome": "^4.7.0",
-    "postcss-font-magician": "^1.6.1"
+    "select2": "^4.0.3",
+    "select2-bootstrap-theme": "^0.1.0-beta.10"
   },
   "devDependencies": {
     "css-loader": "^0.28.0",
diff --git a/static/src/admin.js b/static/src/admin.js
index d3f34d4..b7c6005 100644
--- a/static/src/admin.js
+++ b/static/src/admin.js
@@ -6,6 +6,9 @@ require('bootstrap/dist/js/bootstrap.js');
 require('font-awesome/css/font-awesome.css');
 require('bootstrap/dist/css/bootstrap.css');
 
+require('select2');
+require('select2/dist/css/select2.css');
+require('select2-bootstrap-theme/dist/select2-bootstrap.css');
 
 // Local styles
 import styles from './admin.css';
-- 
GitLab