Over engineer ElementOnce web components

club/api.py

@@ -6,10 +6,9 @@ from ninja_extra.pagination import PageNumberPaginationExtra
 from ninja_extra.schemas import PaginatedResponseSchema
 
 from api.auth import ApiKeyAuth
-from api.permissions import CanView, HasPerm
+from api.permissions import CanAccessLookup, CanView, HasPerm
 from club.models import Club, Membership
 from club.schemas import (
-    ClubProfileSchema,
     ClubSchema,
     ClubSearchFilterSchema,
     SimpleClubSchema,
@@ -23,21 +22,13 @@ class ClubController(ControllerBase):
     @route.get(
         "/search",
         response=PaginatedResponseSchema[SimpleClubSchema],
+        auth=[ApiKeyAuth(), SessionAuth()],
+        permissions=[CanAccessLookup],
         url_name="search_club",
     )
     @paginate(PageNumberPaginationExtra, page_size=50)
     def search_club(self, filters: Query[ClubSearchFilterSchema]):
-        return filters.filter(Club.objects.order_by("name")).values()
-
-    @route.get(
-        "/search-profile",
-        response=PaginatedResponseSchema[ClubProfileSchema],
-        url_name="search_club_profile",
-    )
-    @paginate(PageNumberPaginationExtra, page_size=50)
-    def search_club_profile(self, filters: Query[ClubSearchFilterSchema]):
-        """Same as /api/club/search, but with more returned data"""
-        return filters.filter(Club.objects.order_by("name"))
+        return filters.filter(Club.objects.all())
 
     @route.get(
         "/{int:club_id}",

club/forms.py

@@ -315,22 +315,3 @@ class JoinClubForm(ClubMemberForm):
                 _("You are already a member of this club"), code="invalid"
             )
         return super().clean()
-
-
-class ClubSearchForm(forms.ModelForm):
-    class Meta:
-        model = Club
-        fields = ["name"]
-        widgets = {"name": forms.SearchInput(attrs={"autocomplete": "off"})}
-
-    club_status = forms.NullBooleanField(
-        label=_("Club status"),
-        widget=forms.RadioSelect(
-            choices=[(True, _("Active")), (False, _("Inactive")), ("", _("All clubs"))],
-        ),
-        initial=True,
-    )
-
-    def __init__(self, *args, **kwargs):
-        super().__init__(*args, **kwargs)
-        self.fields["name"].required = False

club/schemas.py

@@ -30,7 +30,7 @@ class ClubProfileSchema(ModelSchema):
 
     class Meta:
         model = Club
-        fields = ["id", "name", "logo", "is_active", "short_description"]
+        fields = ["id", "name", "logo"]
 
     url: str
 

club/static/club/list.scss

@@ -1,47 +0,0 @@
-#club-list {
-  display: flex;
-  flex-direction: column;
-  gap: 2em;
-  padding: 2em;
-
-  .card {
-    display: block;
-    background-color: unset;
-
-    .club-image {
-      float: left;
-      margin-right: 2rem;
-      margin-bottom: .5rem;
-      width: 150px;
-      height: 150px;
-      border-radius: 10%;
-      background-color: rgba(173, 173, 173, 0.2);
-
-      @media screen and (max-width: 500px) {
-        width: 100px;
-        height: 100px;
-      }
-    }
-
-    i.club-image {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      color: black;
-    }
-
-    .content {
-      display: block;
-      text-align: justify;
-
-      h4 {
-        margin-top: 0;
-        margin-right: .5rem;
-      }
-
-      p {
-        font-size: 100%;
-      }
-    }
-  }
-}

club/templates/club/club_list.jinja

@@ -1,5 +1,4 @@
 {% extends "core/base.jinja" %}
-{% from "core/macros.jinja" import paginate_jinja with context %}
 
 {% block title -%}
   {% trans %}Club list{% endtrans %}
@@ -9,50 +8,45 @@
   {% trans %}The list of all clubs existing at UTBM.{% endtrans %}
 {%- endblock %}
 
-{% block additional_css %}
-  <link rel="stylesheet" href="{{ static("club/list.scss") }}">
-{% endblock %}
+{% macro display_club(club) -%}
+
+  {% if club.is_active or user.is_root %}
+
+    <li><a href="{{ url('club:club_view', club_id=club.id) }}">{{ club.name }}</a>
+
+      {% if not club.is_active %}
+        ({% trans %}inactive{% endtrans %})
+      {% endif %}
+
+      {% if club.president %} - <a href="{{ url('core:user_profile', user_id=club.president.user.id) }}">{{ club.president.user }}</a>{% endif %}
+      {% if club.short_description %}<p>{{ club.short_description|markdown }}</p>{% endif %}
+
+  {% endif %}
+
+  {%- if club.children.all()|length != 0 %}
+    <ul>
+      {%- for c in club.children.order_by('name').prefetch_related("children") %}
+        {{ display_club(c) }}
+      {%- endfor %}
+    </ul>
+  {%- endif -%}
+  </li>
+{%- endmacro %}
 
 {% block content %}
-  <main>
-    <h3>{% trans %}Filters{% endtrans %}</h3>
-    <form id="club-list-filters" method="GET">
-      <div class="row gap-4x">
-        {{ form }}
-      </div>
-      <input type="submit" class="btn btn-blue margin-bottom" value="{% trans %}Search{% endtrans %}">
-    </form>
+  {% if user.is_root %}
+    <p><a href="{{ url('club:club_new') }}">{% trans %}New club{% endtrans %}</a></p>
+  {% endif %}
+  {% if club_list %}
     <h3>{% trans %}Club list{% endtrans %}</h3>
-    {% if user.has_perm("club.add_club") %}
-      <br>
-      <a href="{{ url('club:club_new') }}" class="btn btn-blue">
-        <i class="fa fa-plus"></i> {% trans %}New club{% endtrans %}
-      </a>
-    {% endif %}
-    <section class="aria-busy-grow" id="club-list">
-      {% for club in object_list %}
-        <div class="card">
-          {% set club_url = club.get_absolute_url() %}
-          <a href="{{ club_url }}">
-            {% if club.logo %}
-              <img class="club-image" src="{{ club.logo.url }}" alt="logo {{ club.name }}">
+    <ul>
+      {%- for club in club_list %}
+        {{ display_club(club) }}
+      {%- endfor %}
+    </ul>
   {% else %}
-              <i class="fa-regular fa-image fa-4x club-image"></i>
+    {% trans %}There is no club in this website.{% endtrans %}
   {% endif %}
-          </a>
-          <div class="content">
-            <a href="{{ club_url }}">
-              <h4>
-                {{ club.name }} {% if not club.is_active %}({% trans %}inactive{% endtrans %}){% endif %}
-              </h4>
-            </a>
-            {{ club.short_description|markdown }}
-          </div>
-        </div>
-      {% endfor %}
-    </section>
-    {{ paginate_jinja(page_obj, paginator) }}
-  </main>
 {% endblock %}
 
 

club/templates/club/club_members.jinja

@@ -1,11 +1,7 @@
 {% extends "core/base.jinja" %}
 {% from 'core/macros.jinja' import user_profile_link, select_all_checkbox %}
 
-{% block additional_js %}
-  <script type="module" src="{{ static("bundled/core/components/ajax-select-index.ts") }}"></script>
-{% endblock %}
 {% block additional_css %}
-  <link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
   <link rel="stylesheet" href="{{ static("club/members.scss") }}">
 {% endblock %}
 

club/tests/test_club.py

@@ -1,15 +1,12 @@
 from datetime import timedelta
 
 import pytest
-from django.test import Client
-from django.urls import reverse
 from django.utils.timezone import localdate
 from model_bakery import baker
 from model_bakery.recipe import Recipe
 
 from club.models import Club, Membership
 from core.baker_recipes import subscriber_user
-from core.models import User
 
 
 @pytest.mark.django_db
@@ -28,10 +25,3 @@ def test_club_queryset_having_board_member():
 
     club_ids = Club.objects.having_board_member(user).values_list("id", flat=True)
     assert set(club_ids) == {clubs[1].id, clubs[2].id}
-
-
-@pytest.mark.django_db
-def test_club_list(client: Client):
-    client.force_login(baker.make(User))
-    res = client.get(reverse("club:club_list"))
-    assert res.status_code == 200

club/tests/test_club_controller.py

@@ -59,14 +59,6 @@ class TestClubSearch(TestCase):
         ids = {d["id"] for d in response.json()["results"]}
         assert ids == {c.id for c in [self.clubs[0], self.clubs[1], self.clubs[3]]}
 
-    def test_club_search_profile(self):
-        self.client.force_login(self.user)
-        url = reverse("api:search_club_profile")
-        response = self.client.get(url, {"search": "AE"})
-        assert response.status_code == 200
-        ids = {d["id"] for d in response.json()["results"]}
-        assert ids == {c.id for c in [self.clubs[0], self.clubs[1], self.clubs[3]]}
-
 
 @pytest.mark.django_db
 class TestFetchClub:

club/views.py

@@ -44,19 +44,13 @@ from django.utils.translation import gettext
 from django.utils.translation import gettext_lazy as _
 from django.views.generic import DetailView, ListView, View
 from django.views.generic.detail import SingleObjectMixin
-from django.views.generic.edit import (
-    CreateView,
-    DeleteView,
-    FormMixin,
-    UpdateView,
-)
+from django.views.generic.edit import CreateView, DeleteView, UpdateView
 
 from club.forms import (
     ClubAddMemberForm,
     ClubAdminEditForm,
     ClubEditForm,
     ClubOldMemberForm,
-    ClubSearchForm,
     JoinClubForm,
     MailingForm,
     SellingsForm,
@@ -186,41 +180,15 @@ class ClubTabsMixin(TabedViewMixin):
         return tab_list
 
 
-class ClubListView(FormMixin, ListView):
-    """List the clubs of the AE, with a form to perform basic search.
-
-    Notes:
-        This view is fully public, because we want to advertise as much as possible
-        the cultural life of the AE.
-        In accordance with that matter, searching and listing the clubs is done
-        entirely server-side (no AlpineJS involved) ;
-        this is done this way in order to be sure the page is the most accessible
-        and SEO-friendly possible, even if it makes the UX slightly less smooth.
-    """
+class ClubListView(ListView):
+    """List the Clubs."""
 
+    model = Club
     template_name = "club/club_list.jinja"
-    form_class = ClubSearchForm
-    queryset = Club.objects.order_by("name")
-    paginate_by = 20
-
-    def get_form_kwargs(self):
-        res = super().get_form_kwargs()
-        if self.request.GET:
-            res |= {"data": self.request.GET, "initial": self.request.GET}
-        return res
-
-    def get_queryset(self):
-        form: ClubSearchForm = self.get_form()
-        qs = self.queryset
-        if not form.is_bound:
-            return qs
-        if not form.is_valid():
-            return qs.none()
-        if name := form.cleaned_data.get("name"):
-            qs = qs.filter(name__icontains=name)
-        if (is_active := form.cleaned_data.get("club_status")) is not None:
-            qs = qs.filter(is_active=is_active)
-        return qs
+    queryset = (
+        Club.objects.filter(parent=None).order_by("name").prefetch_related("children")
+    )
+    context_object_name = "club_list"
 
 
 class ClubView(ClubTabsMixin, DetailView):

core/static/bundled/core/components/include-index.ts

@@ -1,18 +1,106 @@
 import { inheritHtmlElement, registerComponent } from "#core:utils/web-components.ts";
 
+/**
+ * Create an abstract class for ElementOnce types Web Components
+ *
+ * Those class aren't really abstract because that would be complicated with the
+ * multiple inheritance involved
+ * Instead, we just raise an unimplemented error
+ **/
+function elementOnce<K extends keyof HTMLElementTagNameMap>(tagName: K) {
+  return class ElementOnce extends inheritHtmlElement(tagName) {
+    getElementQuerySelector(): string {
+      throw new Error("Unimplemented");
+    }
+
+    clearNode() {
+      while (this.firstChild) {
+        this.removeChild(this.lastChild);
+      }
+    }
+
+    refresh() {
+      this.clearNode();
+      if (document.querySelectorAll(this.getElementQuerySelector()).length === 0) {
+        this.appendChild(this.node);
+      }
+    }
+
+    connectedCallback() {
+      super.connectedCallback(false);
+      this.refresh();
+    }
+
+    disconnectedCallback() {
+      // The MutationObserver can't see web components being removed
+      // It also can't see if something is removed inside after the component gets deleted
+      // We need to manually clear the containing node to trigger the observer
+      this.clearNode();
+    }
+  };
+}
+
+// Set of ElementOnce type components to refresh with the observer
+const registeredComponents: Set<string> = new Set();
+
+/**
+ * Helper to register ElementOnce types Web Components
+ * It's a wrapper around registerComponent that registers that component on
+ * a MutationObserver that activates a refresh on them when elements are removed
+ **/
+function registerElementOnce(name: string, options?: ElementDefinitionOptions) {
+  registeredComponents.add(name);
+  return registerComponent(name, options);
+}
+
+const startObserver = (observer: MutationObserver) => {
+  observer.observe(document, {
+    // We want to also listen for elements contained in the header (eg: link)
+    subtree: true,
+    childList: true,
+  });
+};
+
+// Refresh *-once components when changes happens
+const observer = new MutationObserver((mutations: MutationRecord[]) => {
+  observer.disconnect();
+  for (const mutation of mutations) {
+    for (const node of mutation.removedNodes) {
+      if (node.nodeType !== node.ELEMENT_NODE) {
+        continue;
+      }
+      const refreshElement = (componentName: string, tagName: string) => {
+        for (const element of document.getElementsByTagName(componentName)) {
+          // We can't guess if an element is compatible before we get one
+          // We exit the function completely if it's not compatible
+          if (
+            (element as any).inheritedTagName.toUpperCase() !== tagName.toUpperCase()
+          ) {
+            return;
+          }
+
+          (element as any).refresh();
+        }
+      };
+      for (const registered of registeredComponents) {
+        refreshElement(registered, (node as HTMLElement).tagName);
+      }
+    }
+  }
+  startObserver(observer);
+});
+
+startObserver(observer);
+
 /**
  * Web component used to import css files only once
  * If called multiple times or the file was already imported, it does nothing
  **/
-@registerComponent("link-once")
-export class LinkOnce extends inheritHtmlElement("link") {
-  connectedCallback() {
-    super.connectedCallback(false);
+@registerElementOnce("link-once")
+export class LinkOnce extends elementOnce("link") {
+  getElementQuerySelector(): string {
     // We get href from node.attributes instead of node.href to avoid getting the domain part
-    const href = this.node.attributes.getNamedItem("href").nodeValue;
-    if (document.querySelectorAll(`link[href='${href}']`).length === 0) {
-      this.appendChild(this.node);
-    }
+    return `link[href='${this.node.attributes.getNamedItem("href").nodeValue}']`;
   }
 }
 
@@ -20,14 +108,10 @@ export class LinkOnce extends inheritHtmlElement("link") {
  * Web component used to import javascript files only once
  * If called multiple times or the file was already imported, it does nothing
  **/
-@registerComponent("script-once")
+@registerElementOnce("script-once")
 export class ScriptOnce extends inheritHtmlElement("script") {
-  connectedCallback() {
-    super.connectedCallback(false);
-    // We get src from node.attributes instead of node.src to avoid getting the domain part
-    const src = this.node.attributes.getNamedItem("src").nodeValue;
-    if (document.querySelectorAll(`script[src='${src}']`).length === 0) {
-      this.appendChild(this.node);
-    }
+  getElementQuerySelector(): string {
+    // We get href from node.attributes instead of node.src to avoid getting the domain part
+    return `script[src='${this.node.attributes.getNamedItem("src").nodeValue}']`;
   }
 }

core/static/bundled/utils/web-components.ts

@@ -36,6 +36,7 @@ export function registerComponent(name: string, options?: ElementDefinitionOptio
  **/
 export function inheritHtmlElement<K extends keyof HTMLElementTagNameMap>(tagName: K) {
   return class Inherited extends HTMLElement {
+    readonly inheritedTagName = tagName;
     protected node: HTMLElementTagNameMap[K];
 
     connectedCallback(autoAddNode?: boolean) {

core/templates/core/base/navbar.jinja

@@ -5,8 +5,9 @@
     <details name="navbar" class="menu">
       <summary class="head">{% trans %}Associations & Clubs{% endtrans %}</summary>
       <ul class="content">
-        <li><a href="{{ url("core:page", page_name="ae") }}">{% trans %}AE{% endtrans %}</a></li>
-        <li><a href="{{ url("club:club_list") }}">{% trans %}AE's clubs{% endtrans %}</a></li>
+        <li><a href="{{ url('core:page', page_name='ae') }}">{% trans %}AE{% endtrans %}</a></li>
+        <li><a href="{{ url('core:page', page_name='clubs') }}">{% trans %}AE's clubs{% endtrans %}</a></li>
+        <li><a href="{{ url('core:page', page_name='utbm-associations') }}">{% trans %}Others UTBM's Associations{% endtrans %}</a></li>
       </ul>
     </details>
     <details name="navbar" class="menu">

core/templates/core/file_moderation.jinja

@@ -10,7 +10,7 @@
   {% extends "core/base.jinja" %}
 {% endif %}
 
-{% from "core/macros.jinja" import paginate_htmx with context %}
+{% from "core/macros.jinja" import paginate_htmx %}
 
 {% block title %}
   {% trans %}File moderation{% endtrans %}

core/templates/core/macros.jinja

@@ -127,12 +127,6 @@
     Parameters:
         current_page (django.core.paginator.Page): the current page object
         paginator (django.core.paginator.Paginator): the paginator object
-
-    Warnings:
-        This macro must be imported with context :
-        ```jinja
-        {% from "core/macros.jinja" import paginate_jinja with context %}
-        ```
     #}
   {{ paginate_server_side(current_page, paginator, False) }}
 {% endmacro %}
@@ -148,12 +142,6 @@
     Parameters:
         current_page (django.core.paginator.Page): the current page object
         paginator (django.core.paginator.Paginator): the paginator object
-
-    Warnings:
-        This macro must be imported with context :
-        ```jinja
-        {% from "core/macros.jinja" import paginate_htmx with context %}
-        ```
     #}
   {{ paginate_server_side(current_page, paginator, True) }}
 {% endmacro %}

core/templates/core/user_preferences.jinja

@@ -1,14 +1,7 @@
 {% extends "core/base.jinja" %}
 
-{%- block additional_js -%}
-  <script type="module" src="{{ static("bundled/core/components/ajax-select-index.ts") }}"></script>
-{%- endblock -%}
-
 {%- block additional_css -%}
   <link rel="stylesheet" href="{{ static('user/user_preferences.scss') }}">
-  {# importing ajax-select-index is necessary for it to be applied after HTMX reload #}
-  <link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
-  <link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
 {%- endblock -%}
 
 {% block title %}

counter/templates/counter/cash_summary_list.jinja

@@ -1,5 +1,5 @@
 {% extends "core/base.jinja" %}
-{% from 'core/macros.jinja' import user_profile_link, paginate_jinja with context %}
+{% from 'core/macros.jinja' import user_profile_link, paginate_jinja %}
 
 {% block title %}
   {% trans %}Cash register summary list{% endtrans %}

counter/templates/counter/refilling_list.jinja

@@ -1,5 +1,5 @@
 {% extends "core/base.jinja" %}
-{% from "core/macros.jinja" import paginate_jinja with context %}
+{% from "core/macros.jinja" import paginate_jinja %}
 
 {% block title %}
   {%- trans %}Reloads list{% endtrans %} -- {{ counter.name }}

election/templates/election/election_list.jinja

@@ -1,5 +1,5 @@
 {% extends "core/base.jinja" %}
-{% from "core/macros.jinja" import paginate_jinja with context %}
+{% from "core/macros.jinja" import paginate_jinja %}
 
 {% block title %}
   {%- trans %}Election list{% endtrans %}

forum/templates/forum/topic.jinja

@@ -1,7 +1,7 @@
 {% extends "core/base.jinja" %}
 {% from 'core/macros.jinja' import user_profile_link %}
 {% from 'forum/macros.jinja' import display_message, display_breadcrumb, display_search_bar %}
-{% from 'core/macros.jinja' import paginate_jinja with context %}
+{% from 'core/macros.jinja' import paginate_jinja %}
 
 {% block title %}
   {{ topic }}

locale/fr/LC_MESSAGES/django.po

@@ -310,36 +310,16 @@ msgid "The list of all clubs existing at UTBM."
 msgstr "La liste de tous les clubs existants à l'UTBM"
 
 #: club/templates/club/club_list.jinja
-msgid "Filters"
-msgstr "Filtres"
-
-#: club/templates/club/club_list.jinja
-msgid "Name"
-msgstr "Nom"
-
-#: club/templates/club/club_list.jinja
-msgid "Club state"
-msgstr "Etat du club"
-
-#: club/templates/club/club_list.jinja
-msgid "Active"
-msgstr "Actif"
-
-#: club/templates/club/club_list.jinja
-msgid "Inactive"
-msgstr "Inactif"
-
-#: club/templates/club/club_list.jinja
-msgid "All clubs"
-msgstr "Tous les clubs"
+msgid "inactive"
+msgstr "inactif"
 
 #: club/templates/club/club_list.jinja core/templates/core/user_tools.jinja
 msgid "New club"
 msgstr "Nouveau club"
 
 #: club/templates/club/club_list.jinja
-msgid "inactive"
-msgstr "inactif"
+msgid "There is no club in this website."
+msgstr "Il n'y a pas de club dans ce site web."
 
 #: club/templates/club/club_members.jinja
 msgid "Club members"
@@ -1901,6 +1881,10 @@ msgstr "L'AE"
 msgid "AE's clubs"
 msgstr "Les clubs de L'AE"
 
+#: core/templates/core/base/navbar.jinja
+msgid "Others UTBM's Associations"
+msgstr "Les autres associations de l'UTBM"
+
 #: core/templates/core/base/navbar.jinja
 msgid "Big event"
 msgstr "Grandes Activités"

rootplace/templates/rootplace/logs.jinja

@@ -1,5 +1,5 @@
 {% extends "core/base.jinja" %}
-{% from "core/macros.jinja" import paginate_jinja with context %}
+{% from "core/macros.jinja" import paginate_jinja %}
 
 {% block title %}
   {% trans %}Operation logs{% endtrans %}

subscription/templates/subscription/subscription.jinja

@@ -6,14 +6,8 @@
   {% trans %}New subscription{% endtrans %}
 {% endblock %}
 
-{# The following statics are bundled with our autocomplete select.
-   However, if one tries to swap a form by another, then the urls in script-once
-   and link-once disappear.
-   So we give them here.
-   If the aforementioned bug is resolved, you can remove this. #}
 {% block additional_js %}
   <script type="module" src="{{ static('bundled/core/components/tabs-index.ts') }}"></script>
-  <script type="module" src="{{ static("bundled/core/components/ajax-select-index.ts") }}"></script>
   <script
     type="module"
     src="{{ static("bundled/subscription/creation-form-existing-user-index.ts") }}"
@@ -21,8 +15,6 @@
 {% endblock %}
 {% block additional_css %}
   <link rel="stylesheet" href="{{ static("core/components/tabs.scss") }}">
-  <link rel="stylesheet" href="{{ static("bundled/core/components/ajax-select-index.css") }}">
-  <link rel="stylesheet" href="{{ static("core/components/ajax-select.scss") }}">
   <link rel="stylesheet" href="{{ static("subscription/css/subscription.scss") }}">
 {% endblock %}