Descarga de datos para sesion con PF

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

@@ -0,0 +1,74 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const btn = document.getElementById("download-csv-btn");
+  if (!btn) return;
+
+  btn.addEventListener("click", async function () {
+    if (typeof JSZip === "undefined" || typeof saveAs === "undefined") {
+      alert(
+        "Librerías JSZip o FileSaver no están cargadas. Asegúrate de incluir los CDN de JSZip y FileSaver."
+      );
+      return;
+    }
+
+    const sections = document.querySelectorAll("section[data-tester]");
+    if (!sections || sections.length === 0) {
+      alert("No hay tablas para descargar.");
+      return;
+    }
+
+    const zip = new JSZip();
+
+    let zipName = "";
+
+    sections.forEach((sec) => {
+      const tester = sec.getAttribute("data-tester") || "tester";
+      const sessionName = sec.getAttribute("data-session-name") || "";
+      const sessionCode = sec.getAttribute("data-session-code") || "";
+
+      const fileName = `${tester}_${
+        sessionName ? sessionName.trim() : sessionCode.trim()
+      }`;
+
+      zipName = `datos_sesion_${
+        sessionName ? sessionName.trim() : sessionCode.trim()
+      }`;
+
+      const table = sec.querySelector("table");
+      if (!table) return;
+
+      // Build CSV
+      const rows = [];
+      const headerCells = Array.from(table.querySelectorAll("thead tr th"));
+      const headers = headerCells.map((h) => h.textContent.trim());
+      rows.push(headers.map(escapeCsv).join(","));
+
+      const trs = table.querySelectorAll("tbody tr");
+      trs.forEach((tr) => {
+        const tds = Array.from(tr.querySelectorAll("td"));
+        const values = tds.map((td) => escapeCsv(td.textContent.trim()));
+        rows.push(values.join(","));
+      });
+
+      const csvContent = rows.join("\r\n");
+      zip.file(`${fileName}.csv`, csvContent);
+    });
+
+    try {
+      const blob = await zip.generateAsync({ type: "blob" });
+      const zipNameWithExtension = zipName + ".zip";
+      saveAs(blob, zipNameWithExtension);
+    } catch (err) {
+      console.error(err);
+      alert("Error al generar el ZIP: " + err.message);
+    }
+  });
+
+  const escapeCsv = (val) => {
+    if (val == null) return "";
+    let 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;
+  };
+});

tecnicas/templates/tecnicas/components/table_pf.html

@@ -1,9 +1,11 @@
 {% load static %}
-<section>
+
+<section data-tester="{{ data.tester }}" {% if session_name %} data-session-name="{{ session_name }}" {% endif %}
+    data-session-code="{{ session_code }}">
     <h3 class="text-xl font-bold">Datos de usuario {{ data.tester }}</h3>
 
     <div class="overflow-x-auto rounded-lg border border-surface-general">
-        <table id="convencional-table" class="min-w-max w-full text-sm text-center border-collapse">
+        <table class="convencional-table 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>
@@ -15,33 +17,23 @@
             </thead>
             <tbody class="bg-surface-ligt divide-y divide-gray-200">
                 {% for repeticion, data_product in data.ratings.items %}
-                    {% for codigo, valores in data_product.items %}
-                        <tr>
-                            <td class="py-2 px-3 border border-surface-general">{{ repeticion }}</td>
-                            <td class="py-2 px-3 border border-surface-general">{{ codigo }}</td>
-                            {% for word in data.words %}
-                            <td class="py-2 px-3 border border-surface-general">
-                                {% with match=False %}
-                                    {% for valor in valores %}
-                                        {% if valor.nombre_palabra == word.nombre_palabra %}
-                                            {{ valor.dato_valor }}
-                                            {% with match=True %}{% endwith %}
-                                        {% endif %}
-                                    {% endfor %}
-                                    {% if match %}0{% endif %}
-                                {% endwith %}
-                            </td>
-                            {% endfor %}
-                        </tr>
+                {% for codigo, valores in data_product.items %}
+                <tr>
+                    <td class="py-2 px-3 border border-surface-general">{{ repeticion }}</td>
+                    <td class="py-2 px-3 border border-surface-general">{{ codigo }}</td>
+                    {% for word in data.words %}
+                    <td class="py-2 px-3 border border-surface-general">
+                        {% for valor in valores %}
+                        {% if valor.nombre_palabra == word.nombre_palabra %}
+                        {{ valor.dato_valor }}
+                        {% endif %}
+                        {% endfor %}
+                    </td>
                     {% endfor %}
+                </tr>
+                {% endfor %}
                 {% endfor %}
             </tbody>
         </table>
     </div>
-
-    <div class="flex justify-end mt-3">
-        <button id="download-csv-btn" class="cts-btn-general cts-btn-primary btn-push">
-            Descargar CSV
-        </button>
-    </div>
 </section>

tecnicas/templates/tecnicas/manage_sesions/details-session-pf.html

@@ -218,11 +218,16 @@
                 </article>
 
                 {% if data_ratings %}
-                <article class="overflow-x-auto py-2">
+                <article class="overflow-x-auto py-2 space-y-4">
                     {% for data_tester in data_ratings %}
-                        {% include "../components/table_pf.html" with data=data_tester %}
+                    {% include "../components/table_pf.html" with data=data_tester session_name=sesion.nombre_sesion session_code=sesion.codigo_sesion %}
                     {% endfor %}
                 </article>
+                <div class="flex justify-end mt-3">
+                    <button id="download-csv-btn" class="cts-btn-general cts-btn-primary btn-push">
+                        Descargar datos como CSV en zip
+                    </button>
+                </div>
                 {% else %}
                 {% include "../components/error-message.html" with message='Sin datos por mostrar aún' %}
                 {% endif %}
@@ -238,6 +243,9 @@
 {% endblock %}
 
 {% block extra_js %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="{% static 'js/download-table-zip.js' %}"></script>
 <script src="{% static 'js/details-session.js' %}"></script>
 <script src="{% static 'js/showHiddenElement.js' %}"></script>
 {% endblock %}