Htmx callback plugin and htmx based report view

pedagogy/static/pedagogy/css/pedagogy.scss

@@ -245,12 +245,6 @@ $pedagogy-white-text: #f0f0f0;
       .input-stars {
         margin-top: 20px;
       }
-
-      .right {
-        display: flex;
-        justify-content: flex-end;
-      }
-
     }
 
     .ue-details-container {
@@ -523,4 +517,9 @@ details.accordion>.accordion-content {
   background-color: $white-color;
   border-color: $pedagogy-orange;
   border-right: none;
+}
+
+.right {
+  display: flex;
+  justify-content: flex-end;
 }

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 %}

pedagogy/views.py

@@ -140,7 +140,9 @@ class UECommentDetailView(PermissionRequiredMixin, DetailView):
     context_object_name = "comment"
 
     def get_queryset(self):
-        return super().get_queryset().annotate_is_reported()
+        return (
+            super().get_queryset().viewable_by(self.request.user).annotate_is_reported()
+        )
 
     def dispatch(self, *args, **kwargs):
         res: HttpResponse = super().dispatch(*args, **kwargs)
@@ -148,7 +150,9 @@ class UECommentDetailView(PermissionRequiredMixin, DetailView):
         return res
 
     def get_context_data(self, **kwargs):
-        return super().get_context_data(**kwargs) | {"ue": self.object.ue}
+        return super().get_context_data(**kwargs) | {
+            "ue": getattr(self.object, "ue", None)
+        }
 
 
 class UECommentUpdateView(PermissionOrAuthorRequiredMixin, AllowFragment, UpdateView):
@@ -189,11 +193,13 @@ class UECommentDeleteView(PermissionOrAuthorRequiredMixin, AllowFragment, Delete
     author_field = "author"
 
     def form_valid(self, form):
-        self.object.delete()
-        response = HttpResponse(status=200)
+        response = super().form_valid(form)
         response.headers["HX-Trigger"] = "CommentUpdate"
         return response
 
+    def get_success_url(self):
+        return reverse("pedagogy:comment_detail", kwargs={"comment_id": self.object.id})
+
 
 class UEGuideView(PermissionRequiredMixin, TemplateView):
     """UE guide main page."""
@@ -202,12 +208,12 @@ class UEGuideView(PermissionRequiredMixin, TemplateView):
     permission_required = "pedagogy.view_ue"
 
 
-class UECommentReportCreateView(PermissionRequiredMixin, CreateView):
+class UECommentReportCreateView(PermissionRequiredMixin, AllowFragment, CreateView):
     """Create a new report for an inappropriate comment."""
 
     model = UECommentReport
     form_class = UECommentReportForm
-    template_name = "core/edit.jinja"
+    template_name = "pedagogy/fragments/comment_report.jinja"
     permission_required = "pedagogy.add_uecommentreport"
 
     def dispatch(self, request, *args, **kwargs):
@@ -220,6 +226,11 @@ class UECommentReportCreateView(PermissionRequiredMixin, CreateView):
         kwargs["comment_id"] = self.ue_comment.id
         return kwargs
 
+    def get_context_data(self, **kwargs):
+        return super().get_context_data() | {
+            "comment_id": self.ue_comment.id,
+        }
+
     def form_valid(self, form):
         resp = super().form_valid(form)
         # Send a message to moderation admins
@@ -235,11 +246,12 @@ class UECommentReportCreateView(PermissionRequiredMixin, CreateView):
                 url=reverse("pedagogy:moderation"),
                 type="PEDAGOGY_MODERATION",
             )
-
         return resp
 
     def get_success_url(self):
-        return reverse("pedagogy:ue_detail", kwargs={"ue_id": self.ue_comment.ue_id})
+        return reverse(
+            "pedagogy:comment_detail", kwargs={"comment_id": self.ue_comment.id}
+        )
 
 
 class UEModerationFormView(PermissionRequiredMixin, FormView):