Actualizar solicitar.html
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user