Se guarda el progreso de napping con modalidad sort en descripcion

tecnicas/controllers/api_controller/rating_napping_controller.py

@@ -18,7 +18,6 @@ class RatingNappingController:
 
         # Branch based on modality
         if name_mod == 'sorting':
-            print(data)
             return RatingNappingController.processSortingMode(
                 data, participation
             )
@@ -50,6 +49,8 @@ class RatingNappingController:
                     RatingNappingController.processGroupsForSorting(
                         products, groups, participation, existing_ratings_map, products_map
                     )
+                else:
+                    RatingNappingController.deleteAllGroups(participation)
 
             return JsonResponse({"message": "Datos guardados exitosamente"})
 
@@ -163,6 +164,13 @@ class RatingNappingController:
             RatingNappingController.processWordsForGroups(
                 groups, all_groups_for_words
             )
+    
+    @staticmethod
+    def deleteAllGroups(participation):
+        GrupoProducto.objects.filter(
+            tecnica=participation.tecnica,
+            catador=participation.catador
+        ).delete()
 
     @staticmethod
     def processWordsForGroups(groups_data, groups_list):

tecnicas/controllers/views_controller/sessions_tester/tests_forms/test_napping_controller.py

@@ -2,7 +2,7 @@ from django.http import HttpRequest
 from django.shortcuts import redirect, render
 from django.urls import reverse
 from django.db.models import F
-from tecnicas.models import Participacion, Producto, TecnicaModalidad, DatoPunto, Calificacion, Modalidad, Palabra
+from tecnicas.models import Participacion, Producto, TecnicaModalidad, DatoPunto, Calificacion, Modalidad, Palabra, GrupoProducto
 from tecnicas.forms import ListWordsForm
 from tecnicas.utils import noValidTechnique
 from tecnicas.controllers import ParticipacionController
@@ -90,7 +90,9 @@ class TestNappingController(GenetalTestController):
         products_in_technique = Producto.objects.filter(id_tecnica=technique)
         self.context["products"] = products_in_technique
 
+        self.context["form"] = ListWordsForm()
         self.setCoordinates()
+        self.setGroups()
 
         return render(request, self.sort_direction, self.context)
 
@@ -114,6 +116,37 @@ class TestNappingController(GenetalTestController):
 
         self.context["data_points"] = list(data_points)
 
+    def setGroups(self):
+        technique = self.session.tecnica
+
+        # Get all product groups for this tester
+        grupos_producto = GrupoProducto.objects.filter(
+            tecnica=technique,
+            catador=self.participation.catador
+        ).prefetch_related('productos', 'palabras')
+
+        groups = []
+        for group in grupos_producto:
+            # Get products in this group
+            products_list = []
+            for product in group.productos.all():
+                products_list.append({
+                    'id': product.id,
+                    'codigoProducto': product.codigoProducto
+                })
+
+            # Get words for this group
+            words_list = list(group.palabras.values_list(
+                'nombre_palabra', flat=True))
+
+            groups.append({
+                'id': group.id,
+                'products': products_list,
+                'words': words_list
+            })
+
+        self.context["groups"] = groups
+
     def setWords(self):
         technique = self.session.tecnica
 

tecnicas/static/js/test-napping-sort.js

@@ -32,6 +32,40 @@ if (isSortMode) {
     initSortMode();
 }
 
+function loadExistingGroups() {
+    const dataGroupContainer = document.querySelector('.data-group-products');
+    if (!dataGroupContainer) return { hasGroups: false, hasWords: false };
+
+    const groupElements = dataGroupContainer.querySelectorAll('.item-group');
+    let hasGroups = false;
+    let hasWords = false;
+
+    groupElements.forEach((groupEl, index) => {
+        const groupId = `group-${groupCounter++}`;
+        const products = [];
+        const words = groupEl.dataset.words ? groupEl.dataset.words.split(',').map(w => w.trim()).filter(w => w) : [];
+
+        // Get products in this group
+        groupEl.querySelectorAll('.item-group-product').forEach(productEl => {
+            const code = productEl.dataset.code;
+            products.push(code);
+            productToGroup[code] = groupId;
+        });
+
+        if (products.length > 0) {
+            hasGroups = true;
+            productGroups[groupId] = products;
+            groupWords[groupId] = words;
+
+            if (words.length > 0) {
+                hasWords = true;
+            }
+        }
+    });
+
+    return { hasGroups, hasWords };
+}
+
 function initSortMode() {
     const continueGroupingBtn = document.getElementById('continue-grouping');
     const continueDescriptionBtn = document.getElementById('continue-description');
@@ -39,17 +73,50 @@ function initSortMode() {
     const dissolveGroupBtn = document.getElementById('dissolve-group-btn');
     const groupControls = document.getElementById('group-controls');
     const questionSaveBtn = document.getElementById('question-save');
+
     const groupWordDialog = document.getElementById('group-word-dialog');
     const groupWordForm = document.getElementById('group-word-form');
-    const groupWordInput = document.querySelector('.cts-input-list-word');
+    const groupWordInput = document.getElementsByName('nombre_palabra')[0];
+    groupWordInput.value = "";
     const groupWordList = document.getElementById('group-word-list');
     const dialogGroupId = document.getElementById('dialog-group-id');
 
     // Hide question save button initially
     questionSaveBtn.classList.add('hidden');
 
-    // Check if there are existing groups from backend (TODO: implement backend data loading)
-    // For now, start in Phase 1
+    // Load existing groups from backend and determine initial phase
+    const { hasGroups, hasWords } = loadExistingGroups();
+
+    setTimeout(() => {
+        // Determine initial phase based on existing data
+        if (hasGroups && hasWords) {
+            // Skip to Phase 3 (Description) if groups have words
+            currentPhase = 3;
+            window.isPlacementActive = false;
+            groupControls.classList.remove('hidden');
+            continueDescriptionBtn.classList.remove('hidden');
+
+            renderExistingGroups();
+            startDescriptionPhase();
+        } else if (hasGroups) {
+            // Skip to Phase 2 (Grouping) if groups exist but no words
+            currentPhase = 2;
+            renderExistingGroups();
+            window.isPlacementActive = false;
+            groupControls.classList.remove('hidden');
+            continueDescriptionBtn.classList.remove('hidden');
+
+            const plane = document.getElementById('napping-plane');
+            plane.classList.remove('cursor-crosshair');
+            plane.classList.add('cursor-default');
+
+            enablePointSelection();
+            spanNotifaction("Continúa agrupando productos o pasa a la descripción.", false);
+        } else {
+            // Start in Phase 1 (Placement)
+            currentPhase = 1;
+        }
+    }, 200);
 
     // Phase 1: Product Placement
     // Show continue to grouping button when all products are placed
@@ -289,7 +356,7 @@ function initSortMode() {
         spanNotifaction("Fase de descripción: Haz clic en un grupo para agregar palabras.", false);
 
         // Auto-save groups when transitioning to Phase 3
-        window.saveData(false);
+        sortModeSaveData(false);
     }
 
     // Group Word Dialog Functions
@@ -317,6 +384,7 @@ function initSortMode() {
             });
 
             groupWordList.appendChild(badge);
+
         });
 
         // Update group display with word count
@@ -381,6 +449,39 @@ function initSortMode() {
             tooltip.style.maxWidth = '320px';
             tooltip.style.whiteSpace = 'normal';
             tooltip.classList.remove('hidden');
+        } else {
+            let tooltip = displayElement.querySelector('.group-tooltip');
+            if (tooltip) {
+                tooltip.remove();
+            }
+        }
+    }
+
+    function renderExistingGroups() {
+        const colors = ['bg-green-600', 'bg-purple-600', 'bg-yellow-600', 'bg-pink-600', 'bg-indigo-600'];
+        let colorIndex = 0;
+
+        for (const [groupId, products] of Object.entries(productGroups)) {
+            const color = colors[colorIndex % colors.length];
+            colorIndex++;
+
+            // Update point colors
+            products.forEach(code => {
+                const point = document.getElementById(`point-${code}`);
+
+                if (point) {
+                    point.classList.remove('bg-red-600');
+                    point.classList.add(color);
+                }
+            });
+
+            // Add group to display
+            addGroupToDisplay(groupId, products, color);
+
+            // Update display with words if they exist
+            if (groupWords[groupId] && groupWords[groupId].length > 0) {
+                updateGroupDisplayWithWords(groupId);
+            }
         }
     }
 

tecnicas/templates/tecnicas/components/dialog-nap-sort.html

@@ -1,29 +1,20 @@
 <dialog id="group-word-dialog" class="modal">
-    <div class="modal-box max-w-2xl">
+    <div class="modal-box max-w-2xl bg-surface-ligt">
         <h3 class="font-bold text-lg">Describir Grupo: <span id="dialog-group-id"></span></h3>
         <p class="py-2 text-sm text-gray-600">Agrega palabras para describir este grupo de productos</p>
 
-        <form id="group-word-form" class="space-y-4">
-            <div class="form-control">
-                <label class="label">
-                    <span class="label-text">Palabra</span>
-                </label>
-                <input type="text" class="cts-input-list-word input input-bordered w-full"
-                    placeholder="Escribe una palabra..." maxlength="50" required>
-            </div>
-
-            <div class="flex justify-end">
-                <button type="submit" class="cts-btn-general cts-btn-primary btn-push">
-                    Agregar Palabra
-                </button>
-            </div>
+        <form id="group-word-form" class="space-y-4 flex justify-center items-center gap-4">
+            <label for="{{ form.nombre_palabra.id_for_label }}" class="text-left flex-1">
+                {{ form.nombre_palabra }}
+            </label>
+            <button type="submit" class="cts-btn-general-compress cts-btn-primary btn-push py-1 px-4">
+                Agregar
+            </button>
         </form>
 
         <div class="mt-4">
             <h4 class="font-semibold mb-2">Palabras agregadas:</h4>
-            <div id="group-word-list" class="flex flex-wrap gap-2">
-                <!-- Words will be added here dynamically -->
-            </div>
+            <div id="group-word-list" class="flex flex-wrap gap-2"></div>
         </div>
 
         <div class="modal-action">
@@ -32,4 +23,7 @@
             </form>
         </div>
     </div>
+    <form method="dialog" class="modal-backdrop">
+        <button>close</button>
+    </form>
 </dialog>

tecnicas/templates/tecnicas/forms_tester/test_napping_sort.html

@@ -87,6 +87,19 @@
                     </button>
                 </div>
 
+                {% if groups %}
+                <div class="data-group-products hidden">
+                    {% for group in groups %}
+                    <ul class="item-group" {% if group.words %} data-words="{{ group.words|join:',' }}" {% endif %}>
+                        {% for product in group.products %}
+                        <li class="item-group-product" data-id-product="{{ product.id }}"
+                            data-code="{{ product.codigoProducto }}"></li>
+                        {% endfor %}
+                    </ul>
+                    {% endfor %}
+                </div>
+                {% endif %}
+
                 <!-- Display existing groups -->
                 <div id="groups-display" class="flex gap-3 flex-wrap justify-center"></div>
             </section>
@@ -171,7 +184,7 @@
             </section>
         </article>
 
-        {% include "../components/dialog-nap-sort.html" %}
+        {% include "../components/dialog-nap-sort.html" with form=form %}
 
         {% include "../components/toast-container.html" %}
     </article>