Htmx callback plugin and htmx based report view

Author: klmp200

core/static/bundled/base-bundle-index.ts

@@ -10,6 +10,10 @@ import sort from "@alpinejs/sort";
 import Alpine from "alpinejs";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import htmx from "htmx.org";
+import { getErrorCallbacksExt } from "#core:htmx/error-callback";
+
+("#core:htmx/error-callback");
+
 import { limitedChoices } from "#core:alpine/limited-choices";
 import { expireOldStorage } from "#core:core/localstorage";
 import { default as navbar } from "#core:core/navbar";
@@ -57,6 +61,9 @@ document.body.addEventListener(
   },
 );
 
+const errorCallbackExt = getErrorCallbacksExt();
+htmx.defineExtension(errorCallbackExt.name, errorCallbackExt.extension);
+
 Object.assign(window, { htmx });
 
 /**

core/static/bundled/htmx/error-callback.ts

@@ -0,0 +1,80 @@
+import type { HtmxExtension } from "htmx.org";
+
+interface CustomHtmxExtension {
+  name: string;
+  extension: Partial<HtmxExtension>;
+}
+
+export const getErrorCallbacksExt = () => {
+  const attrPrefix = "hx-callback-";
+  let htmxApi: {
+    [x: string]: any;
+    getClosestAttributeValue: any;
+  };
+
+  const getCallback = (elt: HTMLElement, responseCode: number) => {
+    if (!elt || !responseCode) {
+      return () => {};
+    }
+
+    const code = responseCode.toString();
+
+    // '*' is the original syntax, as the obvious character for a wildcard.
+    // The 'x' alternative was added for maximum compatibility with HTML
+    // templating engines, due to ambiguity around which characters are
+    // supported in HTML attributes.
+    //
+    // Start with the most specific possible attribute and generalize from
+    // there.
+    const suffixes = [
+      code,
+
+      code.substring(0, 2) + "*",
+      code.substring(0, 2) + "x",
+
+      code.substring(0, 1) + "*",
+      code.substring(0, 1) + "x",
+      code.substring(0, 1) + "**",
+      code.substring(0, 1) + "xx",
+
+      "*",
+      "x",
+      "***",
+      "xxx",
+    ];
+    if (code.startsWith("4") || code.startsWith("5")) {
+      suffixes.push("error");
+    }
+
+    for (const suffix of suffixes) {
+      const attr = attrPrefix + suffix;
+      const callback = htmxApi?.getClosestAttributeValue(elt, attr);
+      if (callback) {
+        return Function("src", "target", callback);
+      }
+    }
+
+    return () => {};
+  };
+
+  return {
+    name: "error-callbacks",
+    extension: {
+      init: (api: any) => {
+        htmxApi = api;
+      },
+      onEvent: (name: string, event: CustomEvent) => {
+        if (name !== "htmx:responseError") {
+          return true;
+        }
+
+        getCallback(event.detail.requestConfig.elt, event.detail.xhr.status)(
+          event.detail.requestConfig.elt,
+          htmxApi.getTarget(event.detail.requestConfig.elt),
+        );
+
+        return true;
+      },
+    },
+  } as CustomHtmxExtension;
+};

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

@@ -1,5 +1,5 @@
 {% from "pedagogy/macros.jinja" import display_star %}
-{% from "core/macros.jinja" import user_profile_link %}
+{% from "core/macros.jinja" import user_profile_link, commentUpdate %}
 
 <div id="comment-{{ comment.id }}" class="comment-container">
 
@@ -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="{{ 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,8 @@
     <span class="grade-text"> {% trans %} not rated {% endtrans %} </span>
   {% endif %}
 
-{%- endmacro %}
+{%- endmacro %}
+
+{% macro commentUpdate %}
+  document.getElementsByTagName('body')[0].dispatchEvent(new CustomEvent('CommentUpdate'))
+{% endmacro %}

pedagogy/views.py

@@ -140,15 +140,19 @@ 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)
         res.headers["HX-Trigger"] = "CommentUpdate"
         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 @@ def get_form_kwargs(self):
         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 @@ def form_valid(self, form):
                 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):