Update show-roles.blade.php

This commit is contained in:
lizandrogd
2025-07-07 15:34:01 -05:00
parent e3d947e661
commit c502a57a51
+50 -25
View File
@@ -30,33 +30,58 @@
</a>
@endif
</div>
@if (auth()->user()->rol_id == 5)
<!-- 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">
<label class="block text-sm font-medium text-gray-700 mb-1">Buscar subvendedor</label>
<input
type="text"
placeholder="Escribe nombre o correo..."
x-model="search"
@input="open = true"
@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">
<!-- Buscador -->
<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>
<div class="relative">
<input
type="text"
placeholder="Escribe nombre o correo..."
x-model="search"
@input="open = true; if (search === '') selectedId = null"
@focus="open = true"
@click.away="open = false"
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">
<!-- Botón X -->
<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
@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="{ 'bg-blue-50 text-blue-700 font-medium': selectedId === user.id }"
x-text="user.name + ' - ' + user.email"></li>
</template>
<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.
</li>
</ul>
</div>
@endif
<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">
<template x-for="user in usuarios.filter(u => (u.name + ' ' + u.email).toLowerCase().includes(search.toLowerCase()))" :key="user.id">
<li
@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="{ 'bg-blue-50 text-blue-700 font-medium': selectedId === user.id }"
x-text="user.name + ' - ' + user.email"></li>
</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">
No se encontraron resultados.
</li>
</ul>
</div>
@endif
</div>
<!-- Tabla usuarios -->