less js + icon

la_chariotte/order/templates/order/grouped_order_overview.html

@@ -81,7 +81,7 @@
         {% else %}
         <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()">
+        <button class="button is-info" onclick="copyText('shareLink')">
           <i class="fa fa-files-o mr-3" aria-hidden="true"></i>Copier le lien
         </button>
         <p class="subtitle mt-4">Code de la commande : {{ grouped_order.code }}</p>
@@ -137,12 +137,13 @@
 
   <div id="commandes" class="box tabcontent">
     <div class="buttons is-pulled-right">
-      <button id="downloadButton" class="button is-info" title="Télécharger la liste des e-mails dans le presse-papiers">
+      <a class="button is-info" href="{% url 'order:email_list' grouped_order.code %}?format=csv" target="_blank">
-        <i class="fa fa-download mr-3" aria-hidden="true"></i>Télécharger la liste des e-mails
+        <i class="fa fa-file-excel-o mr-3" aria-hidden="true"></i>Emails en CSV
-      </button>
+      </a>
-      <button id="copyButton" class="button is-info" title="Copier la liste des e-mails dans le presse-papiers">
+      <input id="email_list" name="email_list" hidden="true" value="{% for order in grouped_order.order_set.all %}{{ order.author.email }}{% endfor %}" />
-        <i class="fa fa-copy mr-3" aria-hidden="true"></i>Copier la liste des e-mails
+      <a class="button is-info" onclick="copyText('email_list')" target="_blank">
-      </button>
+        <i class="fa fa-files-o mr-3" aria-hidden="true"></i>Copier les emails
+      </a>
     </div>
     <p class="title">Liste des commandes</p>
     {% if grouped_order.order_set.all %}
@@ -276,48 +277,34 @@
 
 <script>
   {% block extra_js %}
+  var previousCopied = null;
+  var previousHtmlCopied = null;
   // Copy grouped order link
-  function copyLink() {
+  function copyText(elementId) {
-    var copyText = document.getElementById("shareLink");
+    var element = document.getElementById(elementId); 
-    copyText.select();
+    var text = element.value;
-    copyText.setSelectionRange(0, 99999); // For mobile devices
+    navigator.clipboard.writeText(text).then(function() {
-    navigator.clipboard.writeText(copyText.value);
+        console.log('Copying to clipboard was successful!');
+        var button = document.querySelector('[onclick="copyText(\'' + elementId + '\')"]');
+        if (button !== null) {
+            if (previousCopied !== null) {
+                previousCopied.innerHTML = previousHtmlCopied;
+            }
+            previousHtmlCopied = button.innerHTML;
+            button.innerHTML = '✓ ';
+            previousCopied = button;
+        }
+    }, function(err) {
+        console.error('Could not copy text: ', err);
+    });
   }
+  // function copyLink() {
+  //   var copyText = document.getElementById("shareLink");
+  //   copyText.select();
+  //   copyText.setSelectionRange(0, 99999); // For mobile devices
+  //   navigator.clipboard.writeText(copyText.value);
+  // }
 
-  // Download emails list
-  function downloadEmailToCSV() {
-    fetch("{% url 'order:email_list' grouped_order.code %}?format=csv")
-      .then(response => {
-        const contentDisposition = response.headers.get('Content-Disposition');
-        const filenameMatch = contentDisposition.match(/filename="(.+)"/);
-        const filename = filenameMatch[1];
-        return response.text().then(data => ({data, filename}));
-      })
-      .then(({data, filename}) => {
-        var blob = new Blob([data], {type: "text/csv;charset=utf-8"});
-        saveAs(blob, filename);
-      });
-  }
-
-  // Copy emails list to clipboard
-  function copyEmailsToClipboard() {
-    fetch("{% url 'order:email_list' grouped_order.code %}")
-      .then(response => response.json())
-      .then(data => {
-        var emailList = data.email_list;
-        console.log(emailList);
-        navigator.clipboard.writeText(emailList).then(function() {
-            alert("La liste des e-mails a été copiée dans le presse-papiers !\nUtilisez Ctrl+V pour la coller.");
-        }, function(err) {
-            console.error('Erreur lors de la copie des emails : ', err);
-            console.error('Liste des emails : ', emailList);
-        });
-      });
-  }
-
-  document.getElementById("copyButton").addEventListener("click", copyEmailsToClipboard);
-
-  document.getElementById("downloadButton").addEventListener("click", downloadEmailToCSV);
   // Tabs
   function openTab(idToOpen) {
     var i, tabcontent, tablinks;

la_chariotte/order/views/grouped_order.py

@@ -347,8 +347,8 @@ class ExportGroupOrderEmailAdressesToDownloadView(UserPassesTestMixin, generic.V
             return response
         else:
             email_list = ";\n".join(email_list)
-            return http.JsonResponse(
+            return http.HttpResponse(
-                {"order_name": grouped_order.name, "email_list": email_list}
+                f"{email_list}"
             )