Create unified notification system

core/static/bundled/utils/notifications.ts

@@ -0,0 +1,24 @@
+export enum NotificationLevel {
+  Error = "error",
+  Warning = "warning",
+}
+
+export function createNotification(message: string, level: NotificationLevel) {
+  const element = document.getElementById("notifications");
+  if (element === null) {
+    return false;
+  }
+  return element.dispatchEvent(
+    new CustomEvent("notification-add", {
+      detail: { text: message, tag: level },
+    }),
+  );
+}
+
+export function deleteNotifications() {
+  const element = document.getElementById("notifications");
+  if (element === null) {
+    return false;
+  }
+  return element.dispatchEvent(new CustomEvent("notification-delete"));
+}

core/static/core/header.scss

@@ -321,7 +321,6 @@ $hovered-red-text-color: #ff4d4d;
 
         >#header_notif {
           box-sizing: border-box;
-          display: none;
           position: absolute;
           margin: 0;
           background-color: whitesmoke;

core/static/core/js/script.js

@@ -1,38 +0,0 @@
-$(() => {
-  $("#quick_notif li").click(function () {
-    $(this).hide();
-  });
-});
-
-// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
-function createQuickNotif(msg) {
-  const el = document.createElement("li");
-  el.textContent = msg;
-  el.addEventListener("click", () => el.parentNode.removeChild(el));
-  document.getElementById("quick_notif").appendChild(el);
-}
-
-// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
-function deleteQuickNotifs() {
-  const el = document.getElementById("quick_notif");
-  while (el.firstChild) {
-    el.removeChild(el.firstChild);
-  }
-}
-
-// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
-function displayNotif() {
-  $("#header_notif").toggle().parent().toggleClass("white");
-}
-
-// You can't get the csrf token from the template in a widget
-// We get it from a cookie as a workaround, see this link
-// https://docs.djangoproject.com/en/2.0/ref/csrf/#ajax
-// Sadly, getting the cookie is not possible with CSRF_COOKIE_HTTPONLY or CSRF_USE_SESSIONS is True
-// So, the true workaround is to get the token from the dom
-// https://docs.djangoproject.com/en/2.0/ref/csrf/#acquiring-the-token-if-csrf-use-sessions-is-true
-// biome-ignore lint/style/useNamingConvention: can't find it used anywhere but I will not play with the devil
-// biome-ignore lint/correctness/noUnusedVariables: used in other scripts
-function getCSRFToken() {
-  return $("[name=csrfmiddlewaretoken]").val();
-}

core/templates/core/base.jinja

@@ -34,7 +34,6 @@
 
       <!-- Jquery declared here to be accessible in every django widgets -->
       <script src="{{ static('bundled/vendored/jquery.min.js') }}"></script>
-      <script src="{{ static('core/js/script.js') }}"></script>
 
       {% block additional_css %}{% endblock %}
       {% block additional_js %}{% endblock %}
@@ -74,11 +73,9 @@
 
     <div id="page">
 
-      <ul id="quick_notif">
+      {% block notifications %}
-        {% for n in quick_notifs %}
+        {% include "core/base/notifications.jinja" %}
-          <li>{{ n }}</li>
+      {% endblock %}
-        {% endfor %}
-      </ul>
 
       <div id="content">
         {%- block tabs -%}

core/templates/core/base/header.jinja

@@ -74,9 +74,9 @@
             {% endif %}
           ></a>
         </div>
-        <div class="notification">
+        <div class="notification" x-data="{display: false}" :class="{white: display}">
-          <a href="#" onclick="displayNotif()">
+          <a href="#" @click.prevent="display = !display">
-            <i class="fa-regular fa-bell"></i>
+            <i :class="`fa-${display ? 'solid': 'regular'} fa-bell`" x-transition></i>
             {% set notification_count = user.notifications.filter(viewed=False).count() %}
 
             {% if notification_count > 0 %}
@@ -89,7 +89,7 @@
               </span>
             {% endif %}
           </a>
-          <div id="header_notif">
+          <div id="header_notif" x-show="display" x-cloak x-transition>
             <ul>
               {% if user.notifications.filter(viewed=False).count() > 0 %}
                 {% for n in user.notifications.filter(viewed=False).order_by('-date') %}

core/templates/core/base/notifications.jinja

@@ -0,0 +1,24 @@
+<div id="notifications"
+     x-data="{
+             messages: [
+             {% if messages %}
+               {% for message in messages %}
+                 {
+                 tag: '{{ message.tags }}',
+                 text: '{{ message }}',
+                 },
+               {% endfor %}
+             {% endif %}
+             ]
+             }"
+     @notification-add="(e) => messages.push(e?.detail)"
+     @notification-delete="messages = []">
+  <template x-for="message in messages">
+    <div x-data="{show: true}" class="alert" :class="`alert-${message.tag}`" x-show="show" x-transition>
+      <span class="alert-main" x-text="message.text"></span>
+      <span class="clickable" @click="show = false">
+        <i class="fa fa-close"></i>
+      </span>
+    </div>
+  </template>
+</div>

eboutic/templates/eboutic/eboutic_billing_info.jinja

@@ -31,12 +31,4 @@
   </div>
 
   <br>
-
-  {% if messages %}
-    {% for message in messages %}
-      <div class="alert alert-{{ message.tags }}">
-        {{ message }}
-      </div>
-    {% endfor %}
-  {% endif %}
 </div>

eboutic/templates/eboutic/eboutic_main.jinja

@@ -22,14 +22,6 @@
 {% block content %}
   <h1 id="eboutic-title">{% trans %}Eboutic{% endtrans %}</h1>
 
-  {% if messages %}
-    {% for message in messages %}
-      <div class="alert alert-{{ message.tags }}">
-        {{ message }}
-      </div>
-    {% endfor %}
-  {% endif %}
-
   <div id="eboutic" x-data="basket({{ last_purchase_time }})">
     <div id="basket">
       <h3>Panier</h3>

eboutic/templates/eboutic/eboutic_payment_result.jinja

@@ -4,14 +4,6 @@
   <h3>{% trans %}Eboutic{% endtrans %}</h3>
 
   <div>
-    {% if messages %}
-      {% for message in messages %}
-        <div class="alert alert-{{ message.tags }}">
-          {{ message }}
-        </div>
-      {% endfor %}
-    {% endif %}
-
     {% if success %}
       {% trans %}Payment successful{% endtrans %}
     {% else %}

pedagogy/templates/pedagogy/uv_edit.jinja

@@ -21,11 +21,6 @@
           {{ field.errors }}
           <label for="{{ field.name }}">{{ field.label }}</label>
           {{ field }}
-
-
-          {% if field.name == 'code' %}
-            <button type="button" id="autofill">{% trans %}Import from UTBM{% endtrans %}</button>
-          {% endif %}
         </p>
       {% endif %}
 
@@ -36,48 +31,3 @@
     <p><input type="submit" value="{% trans %}Update{% endtrans %}" /></p>
   </form>
 {% endblock %}
-
-{% block script %}
-  {{ super() }}
-
-  <script type="text/javascript">
-    document.addEventListener('DOMContentLoaded', function() {
-      const autofillBtn = document.getElementById('autofill')
-      const codeInput = document.querySelector('input[name="code"]')
-
-      autofillBtn.addEventListener('click', () => {
-        const url = `/api/uv/${codeInput.value}`;
-        deleteQuickNotifs()
-
-        $.ajax({
-          dataType: "json",
-          url: url,
-          success: function(data, _, xhr) {
-            if (xhr.status !== 200) {
-              createQuickNotif("{% trans %}Unknown UE code{% endtrans %}")
-              return
-            }
-            Object.entries(data)
-              .filter(([_, val]) => !!val)  // skip entries with null or undefined value
-              .map(([key, val]) => {  // convert keys to DOM elements
-                return [document.querySelector('[name="' + key + '"]'), val];
-              })
-              .filter(([elem, _]) => !!elem)  // skip non-existing DOM elements
-              .forEach(([elem, val]) => {  // write the value in the form field
-                if (elem.tagName === 'TEXTAREA') {
-                  // MD editor text input
-                  elem.parentNode.querySelector('.CodeMirror').CodeMirror.setValue(val);
-                } else {
-                  elem.value = val;
-                }
-              });
-            createQuickNotif('{% trans %}Successful autocomplete{% endtrans %}')
-          },
-          error: function(_, _, statusMessage) {
-            createQuickNotif('{% trans %}An error occurred: {% endtrans %}' + statusMessage)
-          },
-        })
-      })
-    })
-  </script>
-{% endblock %}