Pre-fetch forms for student card

core/templates/core/user_preferences.jinja

@@ -35,20 +35,20 @@
     {% endif %}
 
 
-    {% if profile.customer %}
-      <h3>{% trans %}Student cards{% endtrans %}</h3>
+    {% if student_card %}
+      {% with
+      form=student_card.form,
+      action=student_card.context.action,
+      customer=student_card.context.customer,
+      student_cards=student_card.context.student_cards
+      %}
+      {% include student_card.template %}
+    {% endwith %}
 
-      <p class="justify">
-        {% trans %}You can add a card by asking at a counter or add it yourself here. If you want to manually
-          add a student card yourself, you'll need a NFC reader. We store the UID of the card which is 14 characters long.{% endtrans %}
-      </p>
-      <div
-        hx-get="{{ url('counter:add_student_card', customer_id=profile.customer.pk) }}"
-        hx-trigger="load"
-        hx-swap="outerHTML"
-      >
-        <div aria-busy="true" style="min-height: 100px;"></div>
-      </div>
-    {% endif %}
-  </div>
+    <p class="justify">
+      {% trans %}You can add a card by asking at a counter or add it yourself here. If you want to manually
+        add a student card yourself, you'll need a NFC reader. We store the UID of the card which is 14 characters long.{% endtrans %}
+    </p>
+{% endif %}
+</div>
 {% endblock %}

core/views/user.py

@@ -71,6 +71,7 @@ from core.views.forms import (
     UserProfileForm,
 )
 from counter.models import Refilling, Selling
+from counter.views.student_card import StudentCardFormView
 from eboutic.models import Invoice
 from subscription.models import Subscription
 from trombi.views import UserTrombiForm
@@ -575,6 +576,10 @@ class UserPreferencesView(UserTabsMixin, CanEditMixin, UpdateView):
             hasattr(self.object, "trombi_user") and self.request.user.trombi_user.trombi
         ):
             kwargs["trombi_form"] = UserTrombiForm()
+        if hasattr(self.object, "customer"):
+            kwargs["student_card"] = StudentCardFormView.get_template_data(
+                self.request, self.object.customer
+            ).as_dict()
         return kwargs
 
 

counter/templates/counter/counter_click.jinja

@@ -31,130 +31,131 @@
       <p>{% trans %}Amount: {% endtrans %}{{ customer.amount }} €</p>
 
       {% if counter.type == 'BAR' %}
-        <div
-          hx-get="{{ url('counter:add_student_card', customer_id=customer.pk) }}"
-          hx-trigger="load"
-          hx-swap="outerHTML"
-        >
-          <div aria-busy="true" style="min-height: 100px;"></div>
-        </div>
-      {% endif %}
-    </div>
+        {% with
+        form=student_card.form,
+        action=student_card.context.action,
+        customer=student_card.context.customer,
+        student_cards=student_card.context.student_cards
+        %}
+        {% include student_card.template %}
+      {% endwith %}
+{% endif %}
+</div>
 
-    <div id="click_form">
-      <h5>{% trans %}Selling{% endtrans %}</h5>
-      <div>
-        {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
+<div id="click_form">
+  <h5>{% trans %}Selling{% endtrans %}</h5>
+  <div>
+    {% set counter_click_url = url('counter:click', counter_id=counter.id, user_id=customer.user_id) %}
 
                 {# Formulaire pour rechercher un produit en tapant son code dans une barre de recherche #}
-        <form method="post" action=""
-              class="code_form" @submit.prevent="handleCode">
-          {% csrf_token %}
-          <input type="hidden" name="action" value="code">
-          <label for="code_field"></label>
-          <input type="text" name="code" value="" class="focus" id="code_field"/>
-          <input type="submit" value="{% trans %}Go{% endtrans %}"/>
-        </form>
+    <form method="post" action=""
+          class="code_form" @submit.prevent="handleCode">
+      {% csrf_token %}
+      <input type="hidden" name="action" value="code">
+      <label for="code_field"></label>
+      <input type="text" name="code" value="" class="focus" id="code_field"/>
+      <input type="submit" value="{% trans %}Go{% endtrans %}"/>
+    </form>
 
-        <template x-for="error in errors">
-          <div class="alert alert-red" x-text="error">
-          </div>
-        </template>
-        <p>{% trans %}Basket: {% endtrans %}</p>
-
-        <ul>
-          <template x-for="[id, item] in Object.entries(basket)" :key="id">
-            <div>
-              <form method="post" action="" class="inline del_product_form"
-                    @submit.prevent="handleAction">
-                {% csrf_token %}
-                <input type="hidden" name="action" value="del_product">
-                <input type="hidden" name="product_id" :value="id">
-                <input type="submit" value="-"/>
-              </form>
-
-              <span x-text="item['qty'] + item['bonus_qty']"></span>
-
-              <form method="post" action="" class="inline add_product_form"
-                    @submit.prevent="handleAction">
-                {% csrf_token %}
-                <input type="hidden" name="action" value="add_product">
-                <input type="hidden" name="product_id" :value="id">
-                <input type="submit" value="+">
-              </form>
-
-              <span x-text="products[id].name"></span> :
-              <span x-text="(item['qty'] * item['price'] / 100)
-                            .toLocaleString(undefined, { minimumFractionDigits: 2 })">
-              </span> €
-              <template x-if="item['bonus_qty'] > 0">P</template>
-            </div>
-          </template>
-        </ul>
-        <p>
-          <strong>Total: </strong>
-          <strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
-          <strong> €</strong>
-        </p>
-
-        <form method="post"
-              action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
-          {% csrf_token %}
-          <input type="hidden" name="action" value="finish">
-          <input type="submit" value="{% trans %}Finish{% endtrans %}"/>
-        </form>
-        <form method="post"
-              action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
-          {% csrf_token %}
-          <input type="hidden" name="action" value="cancel">
-          <input type="submit" value="{% trans %}Cancel{% endtrans %}"/>
-        </form>
+    <template x-for="error in errors">
+      <div class="alert alert-red" x-text="error">
       </div>
-      {% if (counter.type == 'BAR' and barmens_can_refill) %}
-        <h5>{% trans %}Refilling{% endtrans %}</h5>
-        <div>
-          <form method="post"
-                action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
-            {% csrf_token %}
-            {{ refill_form.as_p() }}
-            <input type="hidden" name="action" value="refill">
-            <input type="submit" value="{% trans %}Go{% endtrans %}"/>
-          </form>
-        </div>
-      {% endif %}
-    </div>
+    </template>
+    <p>{% trans %}Basket: {% endtrans %}</p>
 
-    <div id="products">
-      <ul>
-        {% for category in categories.keys() -%}
-          <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
-        {%- endfor %}
-      </ul>
-      {% for category in categories.keys() -%}
-        <div id="cat_{{ category|slugify }}">
-          <h5>{{ category }}</h5>
-          {% for p in categories[category] -%}
-            <form method="post"
-                  action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}"
-                  class="form_button add_product_form" @submit.prevent="handleAction">
-              {% csrf_token %}
-              <input type="hidden" name="action" value="add_product">
-              <input type="hidden" name="product_id" value="{{ p.id }}">
-              <button type="submit">
-                <strong>{{ p.name }}</strong>
-                {% if p.icon %}
-                  <img src="{{ p.icon.url }}" alt="image de {{ p.name }}"/>
-                {% else %}
-                  <img src="{{ static('core/img/na.gif') }}" alt="image de {{ p.name }}"/>
-                {% endif %}
-                <span>{{ p.price }} €<br>{{ p.code }}</span>
-              </button>
-            </form>
-          {%- endfor %}
+    <ul>
+      <template x-for="[id, item] in Object.entries(basket)" :key="id">
+        <div>
+          <form method="post" action="" class="inline del_product_form"
+                @submit.prevent="handleAction">
+            {% csrf_token %}
+            <input type="hidden" name="action" value="del_product">
+            <input type="hidden" name="product_id" :value="id">
+            <input type="submit" value="-"/>
+          </form>
+
+          <span x-text="item['qty'] + item['bonus_qty']"></span>
+
+          <form method="post" action="" class="inline add_product_form"
+                @submit.prevent="handleAction">
+            {% csrf_token %}
+            <input type="hidden" name="action" value="add_product">
+            <input type="hidden" name="product_id" :value="id">
+            <input type="submit" value="+">
+          </form>
+
+          <span x-text="products[id].name"></span> :
+          <span x-text="(item['qty'] * item['price'] / 100)
+                        .toLocaleString(undefined, { minimumFractionDigits: 2 })">
+          </span> €
+          <template x-if="item['bonus_qty'] > 0">P</template>
         </div>
+      </template>
+    </ul>
+    <p>
+      <strong>Total: </strong>
+      <strong x-text="sumBasket().toLocaleString(undefined, { minimumFractionDigits: 2 })"></strong>
+      <strong> €</strong>
+    </p>
+
+    <form method="post"
+          action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
+      {% csrf_token %}
+      <input type="hidden" name="action" value="finish">
+      <input type="submit" value="{% trans %}Finish{% endtrans %}"/>
+    </form>
+    <form method="post"
+          action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
+      {% csrf_token %}
+      <input type="hidden" name="action" value="cancel">
+      <input type="submit" value="{% trans %}Cancel{% endtrans %}"/>
+    </form>
+  </div>
+  {% if (counter.type == 'BAR' and barmens_can_refill) %}
+    <h5>{% trans %}Refilling{% endtrans %}</h5>
+    <div>
+      <form method="post"
+            action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}">
+        {% csrf_token %}
+        {{ refill_form.as_p() }}
+        <input type="hidden" name="action" value="refill">
+        <input type="submit" value="{% trans %}Go{% endtrans %}"/>
+      </form>
+    </div>
+  {% endif %}
+</div>
+
+<div id="products">
+  <ul>
+    {% for category in categories.keys() -%}
+      <li><a href="#cat_{{ category|slugify }}">{{ category }}</a></li>
+    {%- endfor %}
+  </ul>
+  {% for category in categories.keys() -%}
+    <div id="cat_{{ category|slugify }}">
+      <h5>{{ category }}</h5>
+      {% for p in categories[category] -%}
+        <form method="post"
+              action="{{ url('counter:click', counter_id=counter.id, user_id=customer.user.id) }}"
+              class="form_button add_product_form" @submit.prevent="handleAction">
+          {% csrf_token %}
+          <input type="hidden" name="action" value="add_product">
+          <input type="hidden" name="product_id" value="{{ p.id }}">
+          <button type="submit">
+            <strong>{{ p.name }}</strong>
+            {% if p.icon %}
+              <img src="{{ p.icon.url }}" alt="image de {{ p.name }}"/>
+            {% else %}
+              <img src="{{ static('core/img/na.gif') }}" alt="image de {{ p.name }}"/>
+            {% endif %}
+            <span>{{ p.price }} €<br>{{ p.code }}</span>
+          </button>
+        </form>
       {%- endfor %}
     </div>
-  </div>
+  {%- endfor %}
+</div>
+</div>
 {% endblock content %}
 
 {% block script %}

counter/views/click.py

@@ -30,6 +30,7 @@ from core.views import CanViewMixin
 from counter.forms import RefillForm
 from counter.models import Counter, Customer, Product, Selling
 from counter.views.mixins import CounterTabsMixin
+from counter.views.student_card import StudentCardFormView
 
 if TYPE_CHECKING:
     from core.models import User
@@ -414,4 +415,7 @@ class CounterClick(CounterTabsMixin, CanViewMixin, DetailView):
         kwargs["basket_total"] = self.sum_basket(self.request)
         kwargs["refill_form"] = self.refill_form or RefillForm()
         kwargs["barmens_can_refill"] = self.object.can_refill()
+        kwargs["student_card"] = StudentCardFormView.get_template_data(
+            self.request, self.customer
+        ).as_dict()
         return kwargs

counter/views/student_card.py

@@ -14,6 +14,9 @@
 #
 
 
+from dataclasses import asdict, dataclass
+from typing import Any
+
 from django.core.exceptions import PermissionDenied
 from django.http import HttpRequest
 from django.shortcuts import get_object_or_404
@@ -26,6 +29,16 @@ from counter.models import Customer, StudentCard
 from counter.utils import is_logged_in_counter
 
 
+@dataclass
+class StudentCardTemplateData:
+    form: StudentCardForm
+    template: str
+    context: dict[str, Any]
+
+    def as_dict(self) -> dict[str, Any]:
+        return asdict(self)
+
+
 class StudentCardDeleteView(DeleteView, CanEditMixin):
     """View used to delete a card from a user."""
 
@@ -49,6 +62,23 @@ class StudentCardFormView(FormView):
     form_class = StudentCardForm
     template_name = "counter/fragments/create_student_card.jinja"
 
+    @classmethod
+    def get_template_data(
+        cls, request: HttpRequest, customer: Customer
+    ) -> StudentCardTemplateData:
+        """Get necessary data to pre-render the fragment"""
+        return StudentCardTemplateData(
+            form=cls.form_class(),
+            template=cls.template_name,
+            context={
+                "action": reverse_lazy(
+                    "counter:add_student_card", kwargs={"customer_id": customer.pk}
+                ),
+                "customer": customer,
+                "student_cards": customer.student_cards.all(),
+            },
+        )
+
     def dispatch(self, request: HttpRequest, *args, **kwargs):
         self.customer = get_object_or_404(
             Customer.objects.prefetch_related("student_cards"), pk=kwargs["customer_id"]
@@ -69,9 +99,8 @@ class StudentCardFormView(FormView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-        context["customer"] = self.customer
-        context["action"] = self.request.path
-        context["student_cards"] = self.customer.student_cards.all()
+        data = self.get_template_data(self.request, self.customer)
+        context.update(data.context)
         return context
 
     def get_success_url(self, **kwargs):