From 4b58d3c04bad2583c5b6a2e35996065ad66eb2ba Mon Sep 17 00:00:00 2001
From: Laetitia Getti <laetitia@hashbang.fr>
Date: Wed, 7 Jun 2023 19:07:16 +0200
Subject: [PATCH] order detail on click in a modal

---
 .../order/grouped_order_overview.html         | 80 ++++++++++++++++++-
 la_chariotte/static/css/app.css               | 31 +++++++
 la_chariotte/static/sass/base/_global.sass    | 13 ++-
 la_chariotte/static/sass/base/_variables.sass |  1 +
 4 files changed, 122 insertions(+), 3 deletions(-)

diff --git a/la_chariotte/order/templates/order/grouped_order_overview.html b/la_chariotte/order/templates/order/grouped_order_overview.html
index 66569cd..f608fe6 100644
--- a/la_chariotte/order/templates/order/grouped_order_overview.html
+++ b/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>
\ No newline at end of file
diff --git a/la_chariotte/static/css/app.css b/la_chariotte/static/css/app.css
index 3477f7c..99850e9 100644
--- a/la_chariotte/static/css/app.css
+++ b/la_chariotte/static/css/app.css
@@ -10295,6 +10295,20 @@ a {
   border-right: 1px solid #e9b049;
 }
 
+.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;
@@ -10415,3 +10429,20 @@ p.mobile-content-title {
   background-color: #A52951;
   border-color: #A52951;
 }
+
+p.title {
+  font-weight: 300;
+  color: #A52951;
+}
+
+p.mobile-content-title {
+  font-weight: 600;
+  text-align: center;
+  font-size: 1.5rem;
+}
+
+.mini-title {
+  color: #7a7a7a;
+  font-size: 0.8rem;
+  margin-bottom: 0px !important;
+}
diff --git a/la_chariotte/static/sass/base/_global.sass b/la_chariotte/static/sass/base/_global.sass
index cdd7668..f6bacc1 100644
--- a/la_chariotte/static/sass/base/_global.sass
+++ b/la_chariotte/static/sass/base/_global.sass
@@ -7,4 +7,15 @@ a
 
 .box.is-info, .card.is-info
 	border-bottom: 2px solid $beige
-	border-right: 1px solid $beige
\ No newline at end of file
+	border-right: 1px solid $beige
+
+.modal-card-foot
+	display: block
+	padding: 1rem
+
+.modal-card
+	max-width: 90vw
+
+.modal-card-head
+	padding: 1rem
+	justify-content: space-between
\ No newline at end of file
diff --git a/la_chariotte/static/sass/base/_variables.sass b/la_chariotte/static/sass/base/_variables.sass
index 755ff1e..903df73 100644
--- a/la_chariotte/static/sass/base/_variables.sass
+++ b/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