possibility to copy order link

la_chariotte/order/templates/order/grouped_order_detail.html

@@ -59,7 +59,7 @@
     </table>
     {% if error_message %}<p class="has-text-danger">{{ error_message }}</p>{% endif %}
     <br>
-    <p class="title">Vos informations</p>
+    <p class="subtitle">Vos informations</p>
     <div class="columns">
       <div class="column">
         <p><label for="first_name">Prénom : </label>

la_chariotte/order/templates/order/grouped_order_overview.html

@@ -7,6 +7,7 @@
 {% block content %}
   <div class="buttons">
     <a class="button is-light" href={% url 'order:grouped_order_detail' grouped_order.id %}>Retour à la page de commande</a>
+    <a class="button is-primary" href="{% url 'order:index' %}">Mes commandes</a>
   </div>
   <div class="box is-info">
     <div class="columns">
@@ -24,6 +25,22 @@
       </div>
     </div>
   </div>
+
+  <div class="box">
+    <p class="title">Partager et imprimer</p>
+    <div class="columns">
+      <div class="column">
+        <p>Pour partager cette commande, il vous suffit de copier ce lien et de l'envoyer à vos connaissances : </p>
+        <input class="input custom-width" type="text" value={{ share_link }} id="shareLink" disabled>
+        <button class="button is-info" onclick="copyLink()">Copier le lien</button>
+      </div>
+      <div class="column">
+        <p>Pour vous aider à distribuer les produits le jour J, vous pouvez imprimer la liste des commandes :
+        <a href="">ici</a></p>
+      </div>
+    </div>
+  </div>
+
   <div class="box">
     <p class="title">Produits commandés</p>
     <table class="table">
@@ -80,4 +97,20 @@
       </tfoot>
     </table>
   </div>
-  {% endblock %}
+  {% endblock %}
+
+<script>
+  {% block extra_js %}
+  function copyLink() {
+    // Get the text field
+    var copyText = document.getElementById("shareLink");
+  
+    // Select the text field
+    copyText.select();
+    copyText.setSelectionRange(0, 99999); // For mobile devices
+  
+    // Copy the text inside the text field
+    navigator.clipboard.writeText(copyText.value);
+  }
+  {% endblock %}
+</script>

la_chariotte/order/views.py

@@ -71,9 +71,18 @@ class GroupedOrderOverview(UserPassesTestMixin, generic.DetailView):
         return self.get_object().orga == self.request.user
 
     def get(self, request, *args, **kwargs):
+        # Compute grouped order total price before display
         self.get_object().compute_total_price()
         return super().get(self, request, *args, **kwargs)
 
+    def get_context_data(self, **kwargs):
+        context = super(GroupedOrderOverview, self).get_context_data(**kwargs)
+        # Add share link to context
+        context["share_link"] = self.request.build_absolute_uri(
+            reverse("order:grouped_order_detail", args=(self.get_object().pk,))
+        )
+        return context
+
 
 class GroupedOrderCreateView(LoginRequiredMixin, generic.CreateView):
     """View for creating a new grouped order"""

la_chariotte/static/css/app.css

@@ -10375,6 +10375,10 @@ a.navbar-item:hover {
   border: #e9b049 1px solid !important;
 }
 
+.input.custom-width {
+  width: unset;
+}
+
 @media screen and (max-width: 1023px) {
   table {
     display: block;

la_chariotte/static/sass/base/_form.sass

@@ -1,3 +1,4 @@
+// Buttons
 .button
   white-space: normal
   height: auto
@@ -9,4 +10,8 @@
 .button.is-info, .button.is-info:hover
   color: $bright-black !important
   &.is-light
-    border: $beige 1px solid !important
+    border: $beige 1px solid !important
+
+// Input
+.input.custom-width
+  width: unset

la_chariotte/static/sass/style.sass

@@ -12,5 +12,5 @@
 @import "./base/global"
 @import "./base/navbar"
 @import "./base/content"
-@import "./base/buttons"
+@import "./base/form"
 @import "./base/table"

la_chariotte/templates/base.html

@@ -140,4 +140,5 @@
     });
   
   });
+  {% block extra_js %}{% endblock %}
 </script>