Update show-roles.blade.php

This commit is contained in:
lizandrogd
2025-07-07 15:34:01 -05:00
parent e3d947e661
commit c502a57a51
+35 -10
View File
@@ -30,33 +30,58 @@
</a> </a>
@endif @endif
</div> </div>
@if (auth()->user()->rol_id == 5) @if (auth()->user()->rol_id == 5)
<!-- Buscador --> <!-- Buscador -->
<div x-data="{ open: false, search: '', selectedId: @entangle('filtro_id'), usuarios: @js($usuarios) }" class="relative w-full max-w-md sm:max-w-xs"> <div x-data="{
open: false,
search: '',
selectedId: @entangle('filtro_id'),
usuarios: @js($usuarios),
reset() {
this.search = '';
this.selectedId = null;
}
}"
class="relative w-full max-w-md sm:max-w-xs">
<label class="block text-sm font-medium text-gray-700 mb-1">Buscar subvendedor</label> <label class="block text-sm font-medium text-gray-700 mb-1">Buscar subvendedor</label>
<div class="relative">
<input <input
type="text" type="text"
placeholder="Escribe nombre o correo..." placeholder="Escribe nombre o correo..."
x-model="search" x-model="search"
@input="open = true" @input="open = true; if (search === '') selectedId = null"
@focus="open = true"
@click.away="open = false" @click.away="open = false"
class="w-full border border-gray-300 rounded-xl shadow-sm px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"> class="w-full border border-gray-300 rounded-xl shadow-sm px-4 py-2 text-sm pr-10 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">
<ul x-show="open && search.length > 0" x-transition class="absolute z-50 mt-2 w-full bg-white border border-gray-300 rounded-xl shadow-lg max-h-60 overflow-y-auto text-sm"> <!-- Botón X -->
<template x-for="user in usuarios.filter(u => (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase()))" :key="user.id"> <button
type="button"
x-show="search !== ''"
@click="reset"
class="absolute inset-y-0 right-2 text-gray-500 hover:text-gray-700 text-xl"
>
&times;
</button>
</div>
<ul x-show="open" x-transition class="absolute z-50 mt-2 w-full bg-white border border-gray-300 rounded-xl shadow-lg max-h-60 overflow-y-auto text-sm">
<template x-for="user in usuarios.filter(u => search === '' || (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase()))" :key="user.id">
<li <li
@click="selectedId = user.id; search = user.name + ' - ' + user.email; open = false" @click="selectedId = user.id; search = user.name + ' - ' + user.email; open = false"
class="px-4 py-2 hover:bg-blue-100 hover:text-blue-800 cursor-pointer" class="px-4 py-2 hover:bg-blue-100 hover:text-blue-800 cursor-pointer"
:class="{ 'bg-blue-50 text-blue-700 font-medium': selectedId === user.id }" :class="{ 'bg-blue-50 text-blue-700 font-medium': selectedId === user.id }"
x-text="user.name + ' - ' + user.email"></li> x-text="user.name + ' - ' + user.email"></li>
</template> </template>
<li x-show="usuarios.filter(u => (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase())).length === 0" class="px-4 py-2 text-gray-500 italic"> <li x-show="usuarios.filter(u => search === '' || (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase())).length === 0" class="px-4 py-2 text-gray-500 italic">
No se encontraron resultados. No se encontraron resultados.
</li> </li>
</ul> </ul>
</div> </div>
@endif @endif
</div> </div>
<!-- Tabla usuarios --> <!-- Tabla usuarios -->