add htmx crud inline classes

scipost_django/common/forms.py

@@ -3,6 +3,14 @@ __license__ = "AGPL v3"
 
 
 from django import forms
+from crispy_forms.helper import FormHelper
+
+
+class HTMXInlineCRUDModelForm(forms.ModelForm):
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper = FormHelper() if not hasattr(self, "helper") else self.helper
+        self.helper.form_tag = False
 
 
 class ModelChoiceFieldwithid(forms.ModelChoiceField):

scipost_django/common/templates/htmx/htmx_inline_crud_form.html

+{% load crispy_forms_tags %}
+
+<div id="{{ target_element_id }}" class="htmx-crud-element">
+
+  {% if form %}
+    <form id="{{ target_element_id }}-form">
+
+      {% if form.errors %}
+        <h1 class="text-danger">Warning: there was an error filling the voting form</h1>
+
+        {% for field in form %}
+
+          {% for error in field.errors %}
+            <div class="alert alert-danger">
+              <strong>{{ error|escape }}</strong>
+            </div>
+          {% endfor %}
+        {% endfor %}
+
+        {% for error in form.non_field_errors %}
+          <div class="alert alert-danger">
+            <strong>{{ error|escape }}</strong>
+          </div>
+        {% endfor %}
+
+      {% endif %}
+
+      <div class="d-flex justify-content-between align-items-center">
+        <div class="block w-100">{% crispy form %}</div>
+        <div id="{{ target_element_id }}-actions" class="htmx-crud-button-actions">
+          <button class="btn text-success"
+                  title="Save"
+                  hx-post="{{ view.request.path|add:"?&edit=1" }}"
+                  hx-target="#{{ target_element_id }}">{% include "bi/check-circle.html" %}</button>
+          <button class="btn text-secondary"
+                  title="Cancel"
+                  hx-get="{{ view.request.path }}"
+                  hx-target="#{{ target_element_id }}">{% include "bi/x-circle.html" %}</button>
+        </div>
+      </div>
+ 
+    </form>
+
+  {% else %}
+
+    <div class="d-flex justify-content-between align-items-center">
+      {% include ""|add:instance_li_template_name %}
+      <div id="{{ target_element_id }}-actions" class="htmx-crud-button-actions">
+        <button class="btn text-primary"
+                title="Edit"
+                hx-get="{{ view.request.path|add:"?&edit=1" }}"
+                hx-target="#{{ target_element_id }}">{% include "bi/pencil-square.html" %}</button>
+        <button class="btn text-danger"
+                title="Delete"
+                hx-confirm="Are you sure you want to delete this {{ instance_type|title }}?"
+                hx-delete="{{ view.request.path }}"
+                hx-target="#{{ target_element_id }}">{% include "bi/trash-fill.html" %}</button>
+      </div>
+    </div>
+
+  {% endif %}
+
+</div>

scipost_django/common/templates/htmx/htmx_inline_crud_list.html

+{% load crispy_forms_tags %}
+
+{% for object in object_list %}
+  <div hx-get="{{ object.model_form_view_url }}"
+       hx-swap="outerHTML"
+       hx-trigger="load"></div>
+{% endfor %}
+
+{% include "htmx/htmx_inline_crud_new_form.html" %}

scipost_django/common/templates/htmx/htmx_inline_crud_new_form.html

+{% load crispy_forms_tags %}
+
+<div id="{{ instance_type }}-new-container">
+ 
+
+  {% if add_form %}
+    <form id="{{ instance_type }}-new-form"
+          class="d-flex"
+          hx-post="{{ post_url }}"
+          hx-target="#{{ instance_type }}-new-container">
+      {% crispy add_form %}
+      <input type="submit" class="btn btn-sm btn-primary" />
+    </form>
+ 
+  {% else %}
+ 
+    <div class="d-flex justify-content-end m-2">
+      <button class="btn btn-sm btn-primary"
+              hx-post="{{ post_url }}"
+              hx-target="#{{ instance_type }}-new-container">Create</button>
+    </div>
+  {% endif %}
+
+</div>

scipost_django/common/views.py

 __copyright__ = "Copyright © Stichting SciPost (SciPost Foundation)"
 __license__ = "AGPL v3"
 
+from typing import Any, Dict
+from django.contrib import messages
+from django.db.models.query import QuerySet
+from django.forms.forms import BaseForm
 from django.http import HttpResponse
+from django.shortcuts import get_object_or_404, render
+from django.template.response import TemplateResponse
+from django.urls import reverse
+from django.views.generic import CreateView, FormView, ListView
+from .forms import HTMXInlineCRUDModelForm
+
+
+class HTMXInlineCRUDModelFormView(FormView):
+    template_name = "htmx/htmx_inline_crud_form.html"
+    form_class = HTMXInlineCRUDModelForm
+    instance_li_template_name = None
+    target_element_id = "htmx-crud-{instance_type}-{instance_id}"
+    edit = False
+
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.instance_type = self.form_class.Meta.model.__name__.lower()
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["target_element_id"] = self.get_target_element_id()
+        context["instance_li_template_name"] = self.instance_li_template_name
+        context[self.instance_type] = context["instance"] = self.instance
+        return context
+
+    def post(self, request, *args, **kwargs):
+        self.instance = get_object_or_404(self.form_class.Meta.model, pk=kwargs["pk"])
+        self.edit = True
+        return super().post(request, *args, **kwargs)
+
+    def get(self, request, *args, **kwargs):
+        self.instance = get_object_or_404(self.form_class.Meta.model, pk=kwargs["pk"])
+        self.edit = bool(request.GET.get("edit", None))
+        super().get(request, *args, **kwargs)
+        return render(request, self.template_name, self.get_context_data(**kwargs))
+
+    def delete(self, request, *args, **kwargs):
+        self.instance = get_object_or_404(self.form_class.Meta.model, pk=kwargs["pk"])
+        self.instance.delete()
+        messages.success(
+            self.request, f"{self.instance_type.title()} deleted successfully"
+        )
+        return empty(request)
+
+    def get_form(self) -> BaseForm:
+        if self.request.method == "GET" and not self.edit:
+            return None
+        return super().get_form()
+
+    def get_form_kwargs(self):
+        kwargs = super().get_form_kwargs()
+        kwargs.update({"instance": self.instance})
+        return kwargs
+
+    def get_target_element_id(self) -> str:
+        return self.target_element_id.format(
+            instance_type=self.instance_type,
+            instance_id=self.instance.id,
+        )
+
+    def get_success_url(self) -> str:
+        return self.get_context_data()["view"].request.path
+
+    def form_valid(self, form: BaseForm) -> HttpResponse:
+        form.save()
+        messages.success(
+            self.request, f"{self.instance_type.title()} saved successfully"
+        )
+        return super().form_valid(form)
+
+
+class HTMXInlineCRUDModelListView(ListView):
+    template_name = "htmx/htmx_inline_crud_list.html"
+    add_form_class = None
+    model = None
+    model_form_view_url = None
+
+    def __init__(self, **kwargs: Any) -> None:
+        super().__init__(**kwargs)
+        self.instance_type = self.model.__name__.lower()
+
+    def _append_model_form_view_url(self, queryset: QuerySet) -> QuerySet:
+        for object in queryset:
+            object.model_form_view_url = reverse(
+                self.model_form_view_url, kwargs={"pk": object.pk}
+            )
+        return queryset
+
+    def post(self, request, *args, **kwargs):
+        if self.add_form_class is None:
+            return empty(request)
+        add_form = self.add_form_class(request.POST or None)
+        if add_form.is_valid():
+            add_form.save()
+            messages.success(self.request, f"{self.instance_type.title()} successfully")
+        return TemplateResponse(
+            request,
+            "htmx/htmx_inline_crud_new_form.html",
+            {
+                "post_url": request.path,
+                "add_form": add_form,
+                "instance_type": self.instance_type,
+            },
+        )
+
+    def get_context_data(self, **kwargs: Any):
+        context = super().get_context_data(**kwargs)
+        context["post_url"] = self.request.path
+        context["instance_type"] = self.instance_type
+        return context
 
 
 def empty(request):

scipost_django/scipost/static/scipost/assets/css/_common.scss

+.htmx-crud-button-actions {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    visibility: hidden;
+}
+
+// set visibility of actions if any parent is hovered   
+.htmx-crud-element:hover {
+    & .htmx-crud-button-actions {
+        visibility: visible;
+    }
+}
\ No newline at end of file

scipost_django/scipost/static/scipost/assets/css/style.scss

@@ -46,6 +46,7 @@
  *
  */
 @import "general";
+@import 'common';
 @import "colleges";
 @import "comments";
 @import "dynsel";

scipost_django/scipost/templates/scipost/bare_base.html

@@ -24,7 +24,7 @@
     {% endblock headsup %}
   </head>
 
-  <body class="{% block body_class %}{% endblock %}">
+  <body hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="{% block body_class %}{% endblock %}">
     {% block header %}
       {% include 'scipost/header.html' %}
     {% endblock header %}