Actualizar solicitar.html

This commit is contained in:
2026-03-17 21:47:07 +00:00
parent 6028fed2cc
commit b5cc0bce38

View File

@@ -40,9 +40,20 @@
<main class="flex-1 overflow-y-auto no-scrollbar p-5 relative z-10" id="mainArea">
<div id="searchContainer" class="hidden mb-6 relative">
<i data-lucide="search" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
<input type="text" id="searchInput" oninput="filterServices()" placeholder="Buscar por cliente, ref, zona, avería..." class="w-full bg-white border border-slate-200 pl-12 pr-4 py-3.5 rounded-2xl text-sm font-bold shadow-sm outline-none focus:ring-2 ring-primary-dynamic transition-all">
<div id="searchContainer" class="hidden mb-6 flex gap-2">
<div class="relative flex-1">
<i data-lucide="search" class="w-5 h-5 absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"></i>
<input type="text" id="searchInput" oninput="filterServices()" placeholder="Buscar por cliente, zona..." class="w-full bg-white border border-slate-200 pl-12 pr-4 py-3.5 rounded-2xl text-sm font-bold shadow-sm outline-none focus:ring-2 ring-primary-dynamic transition-all">
</div>
<div class="relative shrink-0">
<select id="sortSelect" onchange="filterServices()" class="h-full bg-white border border-slate-200 rounded-2xl pl-4 pr-10 text-xs font-black text-slate-600 uppercase tracking-widest shadow-sm outline-none focus:ring-2 ring-primary-dynamic appearance-none cursor-pointer">
<option value="recent">Nuevos</option>
<option value="urgent">Urgentes</option>
<option value="cp">Por C.P.</option>
<option value="pop">Por Población</option>
</select>
<i data-lucide="arrow-up-down" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
</div>
</div>
<div id="loader" class="text-center py-10 opacity-50">
@@ -436,6 +447,62 @@
}
}
// 🔥 FUNCIÓN DE FILTRADO Y ORDENACIÓN 🔥
function filterServices() {
const query = document.getElementById('searchInput').value.toLowerCase().trim();
const sortBy = document.getElementById('sortSelect').value;
// 1. Primero filtramos por texto
let filtered = availableServices;
if (query !== "") {
filtered = availableServices.filter(s => {
const raw = s.raw_data || {};
const searchString = `
${s.service_ref || ""}
${raw["Nombre Cliente"] || raw["CLIENTE"] || ""}
${raw["Dirección"] || raw["DOMICILIO"] || ""}
${raw["Población"] || raw["POBLACION-PROVINCIA"] || ""}
${raw["Código Postal"] || raw["C.P."] || ""}
${raw["Descripción"] || raw["DESCRIPCION"] || raw["Averia"] || ""}
${raw["Compañía"] || raw["Procedencia"] || ""}
`.toLowerCase();
return searchString.includes(query);
});
}
// 2. Luego ordenamos el resultado
filtered.sort((a, b) => {
const rawA = a.raw_data || {};
const rawB = b.raw_data || {};
if (sortBy === 'urgent') {
// Urgentes primero (1 vs 0)
const urgA = a.is_urgent ? 1 : 0;
const urgB = b.is_urgent ? 1 : 0;
if (urgA !== urgB) return urgB - urgA;
// Si ambos son o no urgentes, desempatamos por fecha
return new Date(b.created_at || 0) - new Date(a.created_at || 0);
}
else if (sortBy === 'cp') {
const cpA = (rawA["Código Postal"] || rawA["C.P."] || "99999").toString();
const cpB = (rawB["Código Postal"] || rawB["C.P."] || "99999").toString();
return cpA.localeCompare(cpB);
}
else if (sortBy === 'pop') {
const popA = (rawA["Población"] || rawA["POBLACION-PROVINCIA"] || "ZZZ").toString();
const popB = (rawB["Población"] || rawB["POBLACION-PROVINCIA"] || "ZZZ").toString();
return popA.localeCompare(popB);
}
else {
// 'recent' (Por defecto): Los más nuevos arriba
return new Date(b.created_at || 0) - new Date(a.created_at || 0);
}
});
// 3. Pintamos la pantalla
renderServices(filtered);
}
function showToast(msg) {
const t = document.getElementById('toast');
document.getElementById('toastMsg').innerText = msg;