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">
-        {% for n in quick_notifs %}
-          <li>{{ n }}</li>
-        {% endfor %}
-      </ul>
+      {% block notifications %}
+        {% include "core/base/notifications.jinja" %}
+      {% endblock %}
 
       <div id="content">
         {%- block tabs -%}

core/templates/core/base/header.jinja

@@ -74,9 +74,9 @@
             {% endif %}
           ></a>
         </div>
-        <div class="notification">
-          <a href="#" onclick="displayNotif()">
-            <i class="fa-regular fa-bell"></i>
+        <div class="notification" x-data="{display: false}" :class="{white: display}">
+          <a href="#" @click.prevent="display = !display">
+            <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>