Tagging using JS using Partials

lostplaces/lostplaces_app/templates/partials/tagging.html

@@ -0,0 +1,53 @@
+<div class="LP-TagList">
+    <ul class="LP-TagList__List">
+        {% for tag in tag_list %}
+        <li class="LP-TagList__Item">
+            <div class="LP-Tag">
+                <p class="LP-Paragraph">{{tag}}</p>
+            </div>
+        </li>
+        {% endfor %}
+    </ul>
+</div>
+
+<form id="id_tag_submit_form" class="LP-Form LP-Form--inline" method="POST" action="{{url}}">
+    <fieldset class="LP-Form__Fieldset">
+        <legend class="LP-Form__Legend">Tags hinzufügen</legend>
+        {% csrf_token %}
+        <div class="LP-Form__Composition LP-Form__Composition--breakable">
+            <div class="LP-Form__Field">
+                {% include 'partials/form/inputField.html' with field=input_field %}
+            </div>
+            <div class="LP-Form__Field LP-Form__Button LP-Input">
+                <button id="id_tag_submit_button" class="LP-Button">hinzufügen</button>
+            </div>
+        </div>
+    </fieldset>
+</form>
+
+<script>
+    const input = document.getElementById('{{input_field.auto_id}}')
+    const submit_form = document.getElementById('id_tag_submit_form')
+    const submit_button = document.getElementById('id_tag_submit_button')
+
+    submit_form.onsubmit = () => false
+
+    const tagify = new Tagify(input, {
+		'whitelist': [
+		{% for tag in all_tags %}
+			'{{tag}}',
+		{% endfor %}
+		]
+    })
+
+    const on_form_submit = function() {
+        concat_value = ''
+        console.log(tagify)
+        concat_value = tagify.value.map(value => value.value).join(',')
+        console.log(concat_value)
+        input.value = concat_value
+        submit_form.submit()
+    }
+
+    submit_button.onclick = on_form_submit
+</script>

lostplaces/lostplaces_app/templates/place/place_detail.html

@@ -38,45 +38,10 @@
     </div>
 
     <section class="LP-Section">
-        <!--
-			        <input name='basic' value='tag1, tag2'>
-			<script>
-            // The DOM element you wish to replace with Tagify
-            var input = document.querySelector('input[name=basic]');
 
-            // initialize Tagify on the above input node reference
+        {% url 'place_tag_submit' place_id=place.id as tag_submit_url%}
-            new Tagify(input, {
+        {% include 'partials/tagging.html' with tag_list=place.tags.all url=tag_submit_url input_field=tagging_form.tag_list%}
-                'whitelist': ['wurstwasser']
-            })
-        </script>-->
 
-        <div class="LP-TagList">
-            <ul class="LP-TagList__List">
-                {% for tag in place.tags.all %}
-                <li class="LP-TagList__Item">
-                    <div class="LP-Tag">
-                        <p class="LP-Paragraph">{{tag}}</p>
-                    </div>
-                </li>
-                {% endfor %}
-            </ul>
-        </div>
-
-        <form class="LP-Form LP-Form--inline" method="POST" action="{% url 'place_tag_submit' place_id=place.id %}">
-            <fieldset class="LP-Form__Fieldset">
-                <legend class="LP-Form__Legend">Tags hinzufügen</legend>
-                {% csrf_token %}
-                <div class="LP-Form__Composition LP-Form__Composition--breakable">
-                    <div class="LP-Form__Field">
-                        {% include 'partials/form/inputField.html' with field=tagging_form.tag_list %}
-                    </div>
-                    <div class="LP-Form__Field LP-Form__Button LP-Input">
-                        <button class="LP-Button">hinzufügen</button>
-                    </div>
-                </div>
-            </fieldset>
-
-        </form>
     </section>
 
     <section class="LP-Section">

lostplaces/lostplaces_app/views/place_views.py

@@ -13,6 +13,8 @@ from lostplaces_app.models import Place, PlaceImage
 from lostplaces_app.views import IsAuthenticated, IsPlaceSubmitter
 from lostplaces_app.forms import PlaceForm, PlaceImageCreateForm, TagSubmitForm
 
+from taggit.models import Tag
+
 class PlaceListView(IsAuthenticated, ListView):
     paginate_by = 5
     model = Place
@@ -31,7 +33,8 @@ class PlaceDetailView(IsAuthenticated, View):
             'place': place,
             'place_list': [ place ],
             'place_map_center': [ place.latitude, place.longitude ],
-			'tagging_form': TagSubmitForm()
+            'tagging_form': TagSubmitForm(),
+            'all_tags': Tag.objects.all()
         }
         return render(request, 'place/place_detail.html', context)