Actualizar usuarios.html

usuarios.html

@@ -176,6 +176,7 @@
         }
 
      // 1. Cargamos municipios AGRUPADOS por nombre
+// 1. Carga municipios agrupados para facilitar la selección masiva
 async function fetchMunicipios(provName) {
     const selMun = document.getElementById('selMunicipio');
     const loader = document.getElementById('loaderMun');
@@ -191,7 +192,7 @@ async function fetchMunicipios(provName) {
         const data = await res.json();
         
         if (data.ok && data.municipios.length > 0) {
-            // Agrupamos códigos por municipio
+            // Agrupamos por nombre de municipio para el selector
             const grouped = data.municipios.reduce((acc, m) => {
                 if(!acc[m.municipio]) acc[m.municipio] = [];
                 acc[m.municipio].push(m.codigo_postal);
@@ -202,7 +203,7 @@ async function fetchMunicipios(provName) {
             Object.keys(grouped).sort().forEach(mun => {
                 const opt = document.createElement('option');
                 opt.value = mun;
-                // Guardamos el array de códigos en un dataset
+                // Guardamos la lista real de CPs para que el sistema los procese
                 opt.dataset.cps = JSON.stringify(grouped[mun]); 
                 opt.innerText = `${mun.toUpperCase()} (${grouped[mun].length} CPs)`;
                 selMun.appendChild(opt);
@@ -210,38 +211,87 @@ async function fetchMunicipios(provName) {
             selMun.innerHTML += '<option value="OTRO">-- NO ESTÁ EN LA LISTA (MANUAL) --</option>';
             selMun.disabled = false;
         }
-    } catch (e) { console.error(e); } 
-    finally { if (loader) loader.classList.add('hidden'); }
+    } catch (e) { 
+        showToast("Error al conectar con la base de datos", true);
+    } finally { 
+        if (loader) loader.classList.add('hidden'); 
+    }
 }
 
-// 2. Añadimos todos los códigos del municipio de una vez
+// 2. Añadir zonas al usuario (CORREGIDO: Sin error de validación)
 function addZoneToUser() {
     const prov = document.getElementById('selProvince').value;
     const selMun = document.getElementById('selMunicipio');
     const munName = selMun.value;
     
-    if (!prov || !munName) { showToast("Selecciona Provincia y Municipio", true); return; }
+    // Validación corregida
+    if (!prov || !munName) { 
+        showToast("Selecciona Provincia y Municipio primero", true); 
+        return; 
+    }
 
     if (munName === "OTRO") {
         const manualCP = document.getElementById('cpInput').value.trim();
-        if(!manualCP) { showToast("Escribe el CP manual", true); return; }
+        if(!manualCP) { showToast("Escribe el CP manual en el cuadro de la derecha", true); return; }
         tempUserZones.push({ province: prov, city: "MANUAL", cps: manualCP });
     } else {
-        // Extraemos la lista de CPs del pueblo seleccionado
-        const cpList = JSON.parse(selMun.options[selMun.selectedIndex].dataset.cps);
+        // Extraemos la lista de CPs reales del municipio
+        const selectedOption = selMun.options[selMun.selectedIndex];
+        const cpList = JSON.parse(selectedOption.dataset.cps);
+        
+        let addedCount = 0;
         cpList.forEach(cp => {
-            // Evitamos duplicados antes de añadir
-            if (!tempUserZones.some(z => z.city === munName && z.cps === cp)) {
+            // Verificamos si el CP individual ya está para no duplicar
+            const alreadyHasIt = tempUserZones.some(z => z.city === munName && z.cps === cp);
+            if (!alreadyHasIt) {
                 tempUserZones.push({ province: prov, city: munName, cps: cp });
+                addedCount++;
             }
         });
-        showToast(`✅ Añadidos ${cpList.length} códigos de ${munName}`);
+        
+        if(addedCount > 0) {
+            showToast(`✅ Añadidos ${addedCount} códigos de ${munName}`);
+        } else {
+            showToast("Esta zona ya estaba completa", true);
+        }
     }
 
     renderTempZones();
-    document.getElementById('cpInput').value = "";
+    document.getElementById('cpInput').value = ""; // Limpiamos campo manual
 }
 
+// 3. Renderizado con agrupación visual (Mantiene la tabla limpia)
+function renderTempZones() {
+    const area = document.getElementById('userZonesArea');
+    if (!area) return;
+    
+    area.innerHTML = tempUserZones.length === 0 ? '<p class="text-[10px] text-gray-300 italic p-1">Sin zonas añadidas...</p>' : "";
+    
+    // Agrupamos solo para mostrarlo bonito en los chips
+    const visualGroup = tempUserZones.reduce((acc, curr) => {
+        if(!acc[curr.city]) acc[curr.city] = [];
+        acc[curr.city].push(curr.cps);
+        return acc;
+    }, {});
+
+    Object.keys(visualGroup).forEach(city => {
+        const cps = visualGroup[city].join(", ");
+        area.innerHTML += `
+            <span class="bg-blue-100 text-blue-700 px-3 py-1.5 rounded-lg text-[10px] font-black border border-blue-200 flex items-center gap-2">
+                ${city} (${visualGroup[city].length} CPs)
+                <button type="button" onclick="removeTempCity('${city}')" class="text-blue-400 hover:text-red-500">
+                    <i data-lucide="x" class="w-3 h-3"></i>
+                </button>
+            </span>`;
+    });
+    lucide.createIcons();
+}
+
+// Función auxiliar para borrar un pueblo entero de la lista temporal
+function removeTempCity(cityName) {
+    tempUserZones = tempUserZones.filter(z => z.city !== cityName);
+    renderTempZones();
+}
         function autoFillCP(munName) {
             const sel = document.getElementById('selMunicipio');
             const selectedOpt = sel.options[sel.selectedIndex];