feat: add new form to referenceonlist

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/link_to_reference_on_tag.html

@@ -0,0 +1,9 @@
+<script src="https://unpkg.com/[email protected]"></script>
+<a href="{% url "apis_bibsonomy:referenceonlist" content_type object_pk %}"
+   {% if modal %}
+   hx-get="{% url "apis_bibsonomy:referenceonlist" content_type object_pk %}"
+   hx-target="#modal-here"
+   data-toggle="modal"
+   data-target="#referenceModal"
+   {% endif %}
+   ><i data-feather="book-open"></i></a>

apis_bibsonomy/templates/apis_bibsonomy/partials/autofill_bibsonomy.html

@@ -0,0 +1,18 @@
+{% comment %}
+iterate through the `last_bibsonomy_reference` that is set in
+the session and use it to fill out the `bibs_url` form field
+{% endcomment %}
+<script>
+function autoFillBibsonomyForm() {
+  {% spaceless %}
+  {% for field, value in request.session.last_bibsonomy_reference.items %}
+  {% if field == "bibs_url" %}
+  var newOption = new Option("{{ request.session.last_bibsonomy_reference_title }}", "{{ value }}", true, true);
+  $("#id_{{ field }}").append(newOption).trigger("change");
+  {% endif %}
+  {% endfor %}
+  {% endspaceless %}
+}
+document.body.onload = autoFillBibsonomyForm();
+</script>
+

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,34 @@
-<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" %}
+{% include "apis_bibsonomy/partials/autofill_bibsonomy.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/templatetags/bibsonomy_templatetags.py

@@ -1,5 +1,6 @@
 from django import template
 from apis_bibsonomy.forms import ReferenceForm
+from django.contrib.contenttypes.models import ContentType
 
 register = template.Library()
 
@@ -16,3 +17,12 @@ def bibsonomy_list(content_type=None, object_pk=None, attribute_name=None):
     c_dict = {'content_type': content_type, 'object_pk': object_pk, 'attribute_name': attribute_name}
     form = ReferenceForm(**c_dict)
     return {"form": form}
+
+
+@register.inclusion_tag('apis_bibsonomy/link_to_reference_on_tag.html', takes_context=False)
+def link_to_reference_on(obj=None, modal=False):
+    return {
+            "modal": modal,
+            "object_pk": obj.pk,
+            "content_type": ContentType.objects.get_for_model(obj).id,
+    }

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,45 @@ 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
+        # we store the data about the last entered entry in the session
+        # so we can automatically fill the form with the last reference
+        self.request.session["last_bibsonomy_reference"] = form.cleaned_data.copy()
+        ref = Reference.objects.filter(bibs_url=form.cleaned_data['bibs_url']).order_by("last_update").first()
+        self.request.session["last_bibsonomy_reference_title"] = ref.bibtexjson.get("title")
+
+        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)