feat(ReferenceOnListView): add form to add new reference

This commit introduces a `ReferenceNewForm`, which is a basic form for
References. This form is added to the ReferenceOnListView.
The form is also included in the ReferenceOnListView template. It uses
htmx, so the page does not have to reload if a new entry is added.
To make this work, there is a `reinit_select2.html` partial which works
around bugs with the dal/select2 implementation in and htmx.
Another fix is in the `fix_select2_bootstrap_focus.html` partial: if we
want to load a view with a select2 form via a modal, we have to override
a function to prevent the bootstrap modal from stealing the focus.

apis_bibsonomy/forms.py

@@ -4,7 +4,7 @@
 from .autocompletes import BibsonomyAutocomplete
 from apis_core.apis_entities.fields import ListSelect2
 from crispy_forms.helper import FormHelper
-from crispy_forms.layout import Submit
+from crispy_forms.layout import Submit, Layout, Row, Column, Div
 
 
 class ReferenceForm(ModelForm):
@@ -35,3 +35,28 @@ def __init__(self, content_type=None, object_pk=None, attribute_name=None, hidde
             self.fields['object_id'].initial = object_pk
         if attribute_name is not None:
             self.fields['attribute'].initial = attribute_name
+
+class ReferenceNewForm(ModelForm):
+    class Meta:
+        model = Reference
+        exclude = ["content_type", "object_id", "bibtex", "attribute"]
+        attrs = {'data-placeholder': 'Type to get suggestions', 'data-html': True}
+        widgets = {'bibs_url': ListSelect2(url='bibsonomy:bibsonomyautocomplete', attrs=attrs)}
+        help_texts = {
+            'folio': None,
+            'notes': None
+        }
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper = FormHelper(self)
+        self.helper.layout = Layout(
+                Row(
+                    Div('bibs_url', css_class="col"),
+                ),
+                Row(
+                    Column('pages_start', css_class="col-auto col-md-2"),
+                    Column('pages_end', css_class="col-auto col-md-2"),
+                    Column('folio', css_class="col"),
+                    Column('notes', css_class="col")))
+        self.helper.add_input(Submit('submit', 'Submit', css_class='btn-primary'))

apis_bibsonomy/templates/apis_bibsonomy/partials/fix_select2_bootstrap_focus.html

@@ -0,0 +1,13 @@
+{% comment %}
+This is a workaround for select2 and bootstrap getting into each others way.
+Copied from:
+* https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal
+
+See also
+* https://github.com/yourlabs/django-autocomplete-light/issues/715
+{% endcomment %}
+<script>
+$(document).ready(function () {
+  $.fn.modal.Constructor.prototype._enforceFocus = function() {};
+});
+</script>

apis_bibsonomy/templates/apis_bibsonomy/partials/fix_select2_bootstrap_overflow.html

@@ -0,0 +1,7 @@
+<style>
+.select2-selection__rendered{
+  word-wrap: break-word !important;
+  text-overflow: inherit !important;
+  white-space: normal !important;
+}
+</style>

apis_bibsonomy/templates/apis_bibsonomy/partials/reference_list.html

@@ -1,10 +1,33 @@
-<ul>
+<script src="https://unpkg.com/[email protected]"></script>
+<div id="referencelist">
+{% include "apis_bibsonomy/partials/fix_select2_bootstrap_overflow.html" %}
+<ul class="list-group list-group-flush">
 {% for reference in object_list %}
-<li>
-	<a href="{{ reference.get_absolute_url }}">{{ reference }} ({{ reference.id }})</a>
+<li class="list-group-item justify-content-between align-items-center d-flex">
+  <a href="{{ reference.get_absolute_url }}">{{ reference }} ({{ reference.id }})</a>
+  <a href="{% url "apis_bibsonomy:referencedelete" reference.id %}?redirect={{ request.path }}"
+     hx-delete="{% url "apis_bibsonomy:referencedelete" reference.id %}"
+     hx-confirm="Are your sure you want to delete reference {{ reference }} for {{ reference.referenced_object }}"
+     hx-target="closest li"
+     hx-swap="outerHTML swap:1s">Delete</a>
 </li>
 {% empty %}
 <li>No references yet.</li>
 {% endfor %}
 </ul>
 
+{% if form %}
+{% load crispy_forms_tags %}
+<form method="post" hx-post="{{ request.path }}" hx-target="#referencelist" hx-swap="outerHTML" class="mt-4">
+{% crispy form %}
+</form>
+{% endif %}
+
+<script>
+document.body.addEventListener('htmx:configRequest', (event) => {
+    event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
+})
+</script>
+{% include "apis_bibsonomy/partials/reinit_select2.html" %}
+{% include "apis_bibsonomy/partials/fix_select2_bootstrap_focus.html" %}
+</div>

apis_bibsonomy/templates/apis_bibsonomy/partials/reinit_select2.html

@@ -0,0 +1,32 @@
+<script>
+{# this is a simplified copy of dal upstreams `template` method #}
+function tohtml(item) {
+  var $result = $('<span>');
+  $result.html(item.text);
+  return $result;
+}
+{% comment %}
+We add our own Select2 reinitialization function,
+becaus there is none from upstream yet:
+https://github.com/yourlabs/django-autocomplete-light/issues/1311
+and
+https://github.com/yourlabs/django-autocomplete-light/issues/1221
+
+The above mentioned solutions did not work in our case.
+{% endcomment %}
+function reinitSelect2(something) {
+  $('#id_bibs_url').select2({
+    ajax: {
+      url: $('#id_bibs_url').data('autocomplete-light-url'),
+    },
+    templateResult: tohtml,
+    templateSelection: tohtml,
+  });
+  $('.select2-selection').addClass("form-control");
+}
+
+{# If htmx is available, we reinitialize the #bibs_url field after htmx events #}
+htmx.on("htmx:afterSettle", function(evt) {
+  reinitSelect2(evt.detail.elt);
+});
+</script>

apis_bibsonomy/views.py

@@ -1,11 +1,12 @@
 from django.contrib.contenttypes.models import ContentType
 from django.views.generic.list import ListView
 from django.views.generic.detail import DetailView
-from django.views.generic.edit import DeleteView
-from django.urls import reverse_lazy
+from django.views.generic.edit import DeleteView, FormMixin, ProcessFormView
+from django.urls import reverse_lazy, reverse
 from django.http import Http404
 
 from .models import Reference
+from .forms import ReferenceNewForm
 
 
 class ReferenceDetailView(DetailView):
@@ -30,19 +31,39 @@ def get_success_url(self):
 class ReferenceListView(ListView):
     model = Reference
 
-class ReferenceOnListView(ReferenceListView):
-    def get_queryset(self):
-        pk = self.kwargs.get("pk")
-        contenttype = self.kwargs.get("contenttype")
+class ReferenceOnListView(ReferenceListView, FormMixin, ProcessFormView):
+    form_class = ReferenceNewForm
+
+    def dispatch(self, *args, **kwargs):
+        self.pk = self.kwargs.get("pk")
         try:
-            contenttype = ContentType.objects.get_for_id(contenttype)
+            contenttype = self.kwargs.get("contenttype")
+            self.contenttype = ContentType.objects.get_for_id(contenttype)
         except ContentType.DoesNotExist:
             raise Http404
-        return self.model.objects.filter(content_type=contenttype, object_id=pk)
+        return super().dispatch(*args, **kwargs)
+
+    def get_queryset(self):
+        return self.model.objects.filter(content_type=self.contenttype, object_id=self.pk)
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["object"] = self.contenttype.model_class()(self.pk)
+        return context
 
     def get_template_names(self):
         # return only a partial if the request is ajax or htmx
         partial = "HX-Request" in self.request.headers or self.request.headers.get('x-requested-with') == 'XMLHttpRequest'
         if partial:
             return "apis_bibsonomy/partials/reference_list.html"
         return super().get_template_names()
+
+    def get_success_url(self):
+        return reverse('apis_bibsonomy:referenceonlist', kwargs=self.request.resolver_match.kwargs)
+
+    def form_valid(self, form):
+        args = form.cleaned_data
+        args['content_type'] = ContentType.objects.get_for_id(self.request.resolver_match.kwargs['contenttype'])
+        args['object_id'] = self.request.resolver_match.kwargs['pk']
+        ref = Reference.objects.create(**args)
+        return super().form_valid(form)