Prototype: use partials

Author: klmp200

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

@@ -7,7 +7,7 @@
  */
 
 // Must be loaded before Apline
-import htmx from "htmx.org";
+import htmx, { HtmxResponse } from "htmx.org";
 import "htmx.org/dist/ext/hx-alpine-compat.js";
 import "htmx.org/dist/ext/hx-prompt.js";
 import "htmx.org/dist/ext/hx-download.js";
@@ -18,7 +18,6 @@ import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import { limitedChoices } from "#core:alpine/limited-choices";
 import { expireOldStorage } from "#core:core/localstorage";
 import { default as navbar } from "#core:core/navbar";
-import { getErrorCallbacksExt } from "#core:htmx/error-callback";
 import {
   type NotificationPlugin,
   notificationsPlugin as notifications,
@@ -49,22 +48,13 @@ polyfillCountryFlagEmojis();
 /**
  * HTMX
  */
-document.body.addEventListener(
-  "htmx:before:request" as keyof HTMLElementEventMap,
-  (event) => {
-    (event as CustomEvent).detail.ctx.target.ariaBusy = true;
-  },
-);
-
-document.body.addEventListener(
-  "htmx:before:swap" as keyof HTMLElementEventMap,
-  (event) => {
-    (event as CustomEvent).detail.ctx.target.ariaBusy = null;
-  },
-);
+document.body.addEventListener("htmx:before:request", (event) => {
+  event.target.ariaBusy = true;
+});
 
-const errorCallbackExt = getErrorCallbacksExt();
-htmx.registerExtension(errorCallbackExt.name, errorCallbackExt.extension);
+document.body.addEventListener("htmx:before:swap", (event) => {
+  event.target.ariaBusy = null;
+});
 
 Object.assign(window, { htmx });
 

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

@@ -0,0 +1,10 @@
+{% if comments %}
+  <h2>{% trans %}Comments{% endtrans %}</h2>
+  <br>
+{% endif %}
+
+<section>
+  {% for comment in comments %}
+    {% include "pedagogy/fragments/ue_comment.jinja" %}
+  {% endfor %}
+</section>

pedagogy/templates/pedagogy/fragments/ue_comments.jinja

@@ -0,0 +1,10 @@
+{% if object.has_user_already_commented(user) %}
+  <div class="leave-comment-not-allowed">
+    <p>{% trans %}You already posted a comment on this UE. If you want to comment again, please modify or delete your previous comment.{% endtrans %}</p>
+  </div>
+  <br>
+{% endif %}
+
+{% if not object.has_user_already_commented(user) and user.has_perm("pedagogy.add_uecomment") %}
+  {{ add_comment_form }}
+{% endif %}

pedagogy/templates/pedagogy/fragments/ue_detail.jinja

@@ -0,0 +1,27 @@
+<div class="ue-details-container">
+  <div class="grade">
+    <p>{% trans %}Global grade{% endtrans %}</p>
+    <p>{% trans %}Utility{% endtrans %}</p>
+    <p>{% trans %}Interest{% endtrans %}</p>
+    <p>{% trans %}Teaching{% endtrans %}</p>
+    <p>{% trans %}Work load{% endtrans %}</p>
+  </div>
+  <div class="grade-stars">
+    <p>{{ display_star(object.grade_global_average) }}</p>
+    <p>{{ display_star(object.grade_utility_average) }}</p>
+    <p>{{ display_star(object.grade_interest_average) }}</p>
+    <p>{{ display_star(object.grade_teaching_average) }}</p>
+    <p>{{ display_star(object.grade_work_load_average) }}</p>
+  </div>
+  <div class="ue-infos">
+    <p><b>{% trans %}Objectives{% endtrans %}</b></p>
+    <p>{{ object.objectives|markdown }}</p>
+    <p><b>{% trans %}Program{% endtrans %}</b></p>
+    <p>{{ object.program|markdown }}</p>
+    <p><b>{% trans %}Earned skills{% endtrans %}</b></p>
+    <p>{{ object.skills|markdown }}</p>
+    <p><b>{% trans %}Key concepts{% endtrans %}</b></p>
+    <p>{{ object.key_concepts|markdown }}</p>
+    <p><b>{% trans %}UE manager: {% endtrans %}</b>{{ object.manager }}</p>
+  </div>
+</div>

pedagogy/templates/pedagogy/fragments/ue_details/comments.jinja

@@ -1,7 +1,19 @@
 {% from "pedagogy/macros.jinja" import display_star %}
 
 {% if is_fragment %}
-  {% include "pedagogy/fragments/ue_detail.jinja" %}
+
+  <hx-partial id="ue-grade">
+    {% include "pedagogy/fragments/ue_details/grade.jinja" %}
+  </hx-partial>
+
+  <hx-partial id="comment-form">
+    {% include "pedagogy/fragments/ue_details/form.jinja" %}
+  </hx-partial>
+
+  <hx-partial id="comments" hx-swap="innerMorph">
+    {% include "pedagogy/fragments/ue_details/comments.jinja" %}
+  </hx-partial>
+
 {% else %}
   {% extends "core/base.jinja" %}
 
@@ -59,12 +71,23 @@
 
         <br>
 
-        {% include "pedagogy/fragments/ue_detail.jinja" %}
+        <div id="ue-grade">
+          {% include "pedagogy/fragments/ue_details/grade.jinja" %}
+        </div>
 
-        {{ comments }}
+        <br>
+
+        <div id="comment-form">
+          {% include "pedagogy/fragments/ue_details/form.jinja" %}
+        </div>
+
+        <div id="comments">
+          {% for comment in comments %}
+            {% include "pedagogy/fragments/ue_comment.jinja" %}
+          {% endfor %}
+        </div>
 
       </div>
     </div>
-
   {% endblock %}
 {% endif %}

pedagogy/templates/pedagogy/fragments/ue_details/form.jinja

@@ -31,7 +31,6 @@
     UECommentUpdateView,
     UECreateView,
     UEDeleteView,
-    UEDetailCommentsView,
     UEDetailView,
     UEGuideView,
     UEModerationFormView,
@@ -42,11 +41,6 @@
     # Urls displaying the actual application for visitors
     path("", UEGuideView.as_view(), name="guide"),
     path("ue/<int:ue_id>/", UEDetailView.as_view(), name="ue_detail"),
-    path(
-        "ue/<int:ue_id>/comments",
-        UEDetailCommentsView.as_view(),
-        name="ue_comments",
-    ),
     path(
         "ue/<int:ue_id>/comment",
         UECommentCreateView.as_view(),