Merge pull request #27 from CascoArcilla/HU5

tecnicas/static/js/download-table-csv.js

@@ -0,0 +1,78 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const btn = document.getElementById("download-csv-btn");
+  if (!btn) return;
+
+  btn.addEventListener("click", function () {
+    // Try set the table in the page
+    let table = document.getElementById("convencional-table");
+    if (!table) {
+      const section = btn.closest("section");
+      if (section) table = section.querySelector("table");
+    }
+    if (!table) {
+      console.warn("No se encontró la tabla para descargar.");
+      return;
+    }
+
+    // helper to trim and normalize cell text
+    const cellText = (cell) => {
+      if (!cell) return "";
+      return String(cell.textContent || "").trim();
+    };
+
+    // Collect headers
+    const headers = [];
+    const ths = table.querySelectorAll("thead th");
+    ths.forEach((th) => headers.push(cellText(th)));
+
+    // Collect rows
+    const rows = [];
+    const trs = table.querySelectorAll("tbody tr");
+    trs.forEach((tr) => {
+      const cols = [];
+      const tds = tr.querySelectorAll("td");
+      tds.forEach((td) => cols.push(cellText(td)));
+      rows.push(cols);
+    });
+
+    // Convert to CSV string (escape quotes, wrap in quotes if needed)
+    const escapeValue = (val) => {
+      if (val == null) return "";
+      normalVal = val.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+      const needsQuotes = /[",\n,]/.test(normalVal);
+      let v = String(normalVal).replace(/"/g, '""');
+      if (needsQuotes) v = `"${v}"`;
+      return v;
+    };
+
+    const lines = [];
+    if (headers.length) lines.push(headers.map(escapeValue).join(","));
+    rows.forEach((r) => lines.push(r.map(escapeValue).join(",")));
+
+    const csvContent = lines.join("\n");
+
+    // File name: data_{nombre_sesion or codigo_sesion}
+    const rawName = (btn.dataset.sessionName || "").trim();
+    const code = (btn.dataset.sessionCode || "").trim() || "session";
+    const namePart = rawName
+      ? rawName.replace(/[^a-zA-Z0-9-_áéíóúÁÉÍÓÚ ]/g, "").replace(/\s+/g, "_")
+      : code;
+    const fileName = `data_${namePart}.csv`;
+
+    // Create blob and force download
+    const blob = new Blob([csvContent], { type: "text/csv;charset=UTF-8;" });
+    if (navigator.msSaveBlob) {
+      navigator.msSaveBlob(blob, fileName);
+    } else {
+      const link = document.createElement("a");
+      const url = URL.createObjectURL(blob);
+      link.setAttribute("href", url);
+      link.setAttribute("download", fileName);
+      link.style.visibility = "hidden";
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+    }
+  });
+});

tecnicas/templates/tecnicas/components/table-convencional.html

@@ -1,6 +1,7 @@
+{% load static %}
 <section>
     <div class="overflow-x-auto rounded-lg border border-surface-general">
-        <table class="min-w-max w-full text-sm text-center border-collapse">
+        <table id="convencional-table" class="min-w-max w-full text-sm text-center border-collapse">
             <thead class="bg-surface-sweet text-black font-semibold">
                 <tr>
                     <th class="py-2 px-3 border border-surface-general">Repetición</th>
@@ -41,8 +42,11 @@
     </div>
 
     <div class="flex justify-end mt-3">
-        <button class="cts-btn-general cts-btn-primary btn-push">
+        <button id="download-csv-btn" class="cts-btn-general cts-btn-primary btn-push"
+            data-session-name="{% if sesion and sesion.nombre_sesion %}{{ sesion.nombre_sesion }}{% else %}{% endif %}"
+            data-session-code="{% if sesion and sesion.codigo_sesion %}{{ sesion.codigo_sesion }}{% else %}{% endif %}">
             Descargar CSV
         </button>
     </div>
-</section>
+</section>
+<script src="{% static 'js/download-table-csv.js' %}"></script>

tecnicas/templates/tecnicas/manage_sesions/detalles-sesion.html

@@ -260,7 +260,7 @@
                     Máximo valor por dato: <span class="font-bold">{{ scale.size }}</span>
                 </p>
             </section>
-            {% include "../components/table-convencional.html" with calificaciones=calificaciones palabras=palabras %}
+            {% include "../components/table-convencional.html" with calificaciones=calificaciones palabras=palabras sesion=sesion %}
         </article>
         {% else %}
         {% include "../components/error-message.html" with message='Sin calificaciones que mostrar aún' %}