Htmx callback plugin and htmx based report view

pedagogy/templates/pedagogy/fragments/comment_report.jinja

@@ -0,0 +1,30 @@
+<form
+  hx-post="{{ request.get_full_path() }}"
+  hx-ext="error-callbacks"
+  hx-target="this"
+  hx-swap="outerHTML"
+  hx-disabled-elt="input[type='submit']"
+  hx-trigger="submit"
+  hx-callback-404="target.remove()"
+>
+  {% csrf_token %}
+  {{ form.non_field_errors() }}
+  {{ form.reason.errors }}
+  {{ form.reason }}
+
+  {# Hidden fields #}
+  {{ form.reporter }}
+  {{ form.comment }}
+
+  <button
+    hx-get="{{ url('pedagogy:comment_detail', comment_id=comment_id) }}"
+    hx-target="closest form"
+    hx-swap="outerHTML"
+  >
+    {% trans %}Cancel{% endtrans %}
+  </button>
+
+  <p class="right" id="nique">
+    <input type="submit" value="{% trans %}Report{% endtrans %}" />
+  </p>
+</form>

pedagogy/templates/pedagogy/fragments/ue_comment.jinja

@@ -47,10 +47,12 @@
     {% endif %}
     {% if comment.author_id == user.id or user.has_perm("pedagogy.delete_comment") %}
       <form class="action"
+            hx-ext="error-callbacks"
             hx-post="{{ url('pedagogy:comment_delete', comment_id=comment.id) }}"
             hx-confirm='{% trans obj=object %}Are you sure you want to delete "{{ obj }}"?{% endtrans %}'
             hx-swap="outerHTML"
             hx-target="#comment-{{ comment.id }}"
+            hx-callback-404="document.getElementsByTagName('body')[0].dispatchEvent(new CustomEvent('CommentUpdate'));target.remove()"
       >
         {% csrf_token %}
         <button class="btn btn-red action">
@@ -63,7 +65,11 @@
   <div class="comment-end-bar">
     <div class="report">
       <p>
-        <a href="{{ url('pedagogy:comment_report', comment_id=comment.id) }}">
+        <a
+          hx-get="{{ url('pedagogy:comment_report', comment_id=comment.id) }}"
+          hx-swap="outerHTML"
+          hx-target="#comment-{{ comment.id }}"
+        >
           {% trans %}Report this comment{% endtrans %}
         </a>
       </p>

pedagogy/templates/pedagogy/macros.jinja

@@ -13,4 +13,4 @@
     <span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
   {% endif %}
 
-{%- endmacro %}
+{%- endmacro %}