order detail on click in a modal

la_chariotte/order/templates/order/grouped_order_overview.html

@@ -116,7 +116,7 @@
         {% endfor %}
       </tbody>
       <tfoot>
-        <th>Total pour la commande groupée</th>
+        <th>Total</th>
         <th></th>
         <th></th>
         <th>{{ grouped_order.total_price }} €</th>
@@ -136,6 +136,7 @@
           <th>Participant·e</th>
           <th>Montant</th>
           <th>Contact</th>
+          <th>Voir</th>
         </tr>
       </thead>
       <tbody>
@@ -144,13 +145,41 @@
           <td>{{ order.author }}</td>
           <td>{{ order.price }} €</td>
           <td><a href="mailto:{{ order.author.email }}">{{ order.author.email }}</a></td>
+          <td><button class="button is-info is-small js-modal-trigger" data-target="order-detail-{{ order.id }}">
+            Voir
+          </button></td>
         </tr>
+
+        <!-- Order detail modal -->
+        <div id="order-detail-{{ order.id }}" class="modal">
+          <div class="modal-background"></div>
+          <div class="modal-card ">
+            <header class="modal-card-head has-background-info">
+              <div class="modal-card-title-container">
+                <p class="modal-card-title">Commande de {{ order.author }} : n°{{ order.id }}</p>
+              </div>
+              <button class="delete" aria-label="close"></button>
+            </header>
+            <section class="modal-card-body">
+              {% for item in order.ordered_items.all %}
+              {{ item.nb }} {{ item.item.name }}
+              <hr class="mb-0 mt-1">
+              {% endfor %}
+            </section>
+            <footer class="modal-card-foot">
+              <p class="mini-title">Total à payer</p>
+              <p>{{ order.price }} €</p>
+            </footer>
+          </div>
+        </div>
         {% endfor %}
+
       </tbody>
       <tfoot>
-        <th>Total pour la commande groupée</th>
+        <th>Total</th>
         <th>{{ grouped_order.total_price }} €</th>
         <th></th>
+        <th></th>
       </tfoot>
     </table>
     {% else %}
@@ -198,5 +227,52 @@
 
   // Open by default the "resume" tab at first
   openTab("resume");
+
+  // Modal
+  document.addEventListener('DOMContentLoaded', () => {
+    // Functions to open and close a modal
+    function openModal($el) {
+      $el.classList.add('is-active');
+    }
+  
+    function closeModal($el) {
+      $el.classList.remove('is-active');
+    }
+  
+    function closeAllModals() {
+      (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+        closeModal($modal);
+      });
+    }
+  
+    // Add a click event on buttons to open a specific modal
+    (document.querySelectorAll('.js-modal-trigger') || []).forEach(($trigger) => {
+      const modal = $trigger.dataset.target;
+      const $target = document.getElementById(modal);
+  
+      $trigger.addEventListener('click', () => {
+        openModal($target);
+      });
+    });
+  
+    // Add a click event on various child elements to close the parent modal
+    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+      const $target = $close.closest('.modal');
+  
+      $close.addEventListener('click', () => {
+        closeModal($target);
+      });
+    });
+  
+    // Add a keyboard event to close all modals
+    document.addEventListener('keydown', (event) => {
+      const e = event || window.event;
+  
+      if (e.keyCode === 27) { // Escape key
+        closeAllModals();
+      }
+    });
+  });
+
   {% endblock %}
 </script>

la_chariotte/static/css/app.css

@@ -10303,6 +10303,20 @@ a {
   padding: 0;
 }
 
+.modal-card-foot {
+  display: block;
+  padding: 1rem;
+}
+
+.modal-card {
+  max-width: 90vw;
+}
+
+.modal-card-head {
+  padding: 1rem;
+  justify-content: space-between;
+}
+
 @media screen and (min-width: 1024px) {
   .navbar.side-nav {
     right: inherit;

la_chariotte/static/sass/base/_global.sass

@@ -13,4 +13,14 @@ a
 	padding: 0
 	font-size: 0.7rem
 	.content
-		padding: 0
+		padding: 0
+.modal-card-foot
+	display: block
+	padding: 1rem
+
+.modal-card
+	max-width: 90vw
+
+.modal-card-head
+	padding: 1rem
+	justify-content: space-between

la_chariotte/static/sass/base/_variables.sass

@@ -7,6 +7,7 @@ $grey-text: #7a7a7a
 $primary: $betterave
 $info: $beige
 $text: $bright-black
+$grey-text: #7a7a7a
 
 // Navbar
 $side-nav-width: 220px