Update show-roles.blade.php
This commit is contained in:
@@ -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"
|
||||
>
|
||||
×
|
||||
</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 -->
|
||||
|
||||
Reference in New Issue
Block a user