añadir nuevas funcionalidades
This commit is contained in:
63
resources/views/livewire/country-select.blade.php
Normal file
63
resources/views/livewire/country-select.blade.php
Normal file
@@ -0,0 +1,63 @@
|
||||
<!-- resources/views/livewire/country-select.blade.php -->
|
||||
<div
|
||||
x-data="{ open: @entangle('isOpen') }"
|
||||
x-on:click.away="open = false"
|
||||
class="relative"
|
||||
>
|
||||
<!-- Botón que activa el desplegable -->
|
||||
<button
|
||||
x-on:click="open = !open; $nextTick(() => { $refs.searchInput.focus() })"
|
||||
type="button"
|
||||
class="flex items-center justify-between w-[300px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
>
|
||||
<span>
|
||||
@if($selectedCountry && array_key_exists($selectedCountry, config('countries')))
|
||||
{{ $this->formattedCountry($selectedCountry, config("countries.$selectedCountry")) }}
|
||||
@else
|
||||
Seleccione un país
|
||||
@endif
|
||||
</span>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Desplegable -->
|
||||
<div
|
||||
x-show="open"
|
||||
x-transition
|
||||
class="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg"
|
||||
>
|
||||
<!-- Input de búsqueda dentro del desplegable -->
|
||||
<div class="p-2 border-b">
|
||||
<input
|
||||
type="text"
|
||||
wire:model.debounce.300ms="search"
|
||||
placeholder="Buscar país..."
|
||||
class="w-full p-2 border rounded-md"
|
||||
x-ref="searchInput"
|
||||
x-on:click.stop
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Lista de países -->
|
||||
<div class="overflow-y-auto max-h-60">
|
||||
@forelse($countries as $code => $name)
|
||||
<button
|
||||
type="button"
|
||||
wire:click="selectCountry('{{ $code }}')"
|
||||
class="flex items-center w-full px-4 py-2 text-left hover:bg-gray-100"
|
||||
>
|
||||
{{ $this->formattedCountry($code, $name) }}
|
||||
</button>
|
||||
@empty
|
||||
<div class="px-4 py-2 text-gray-500">
|
||||
No se encontraron resultados
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Input hidden para el formulario -->
|
||||
<input type="hidden" name="country" value="{{ $selectedCountry }}">
|
||||
</div>
|
||||
44
resources/views/livewire/image-uploader.blade.php
Normal file
44
resources/views/livewire/image-uploader.blade.php
Normal file
@@ -0,0 +1,44 @@
|
||||
<div>
|
||||
<!-- Preview de imagen -->
|
||||
<div class="relative mb-4">
|
||||
<img src="{{ $photo ? $photo->temporaryUrl() : ($currentImage ?? $placeholder) }}"
|
||||
alt="Preview"
|
||||
class="w-32 h-32 rounded-full object-cover border-2 border-gray-300">
|
||||
|
||||
@if($photo || $currentImage)
|
||||
<button type="button"
|
||||
wire:click="removePhoto"
|
||||
class="absolute top-0 right-0 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 transition"
|
||||
title="Eliminar foto">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Input de archivo -->
|
||||
<label class="cursor-pointer bg-white px-4 py-2 rounded-md shadow-sm border border-gray-300 hover:bg-gray-50 inline-block">
|
||||
<span class="text-sm font-medium text-gray-700">
|
||||
{{ $photo || $currentImage ? 'Cambiar imagen' : 'Seleccionar imagen' }}
|
||||
</span>
|
||||
<input type="file"
|
||||
wire:model="photo"
|
||||
class="hidden"
|
||||
accept="image/*"
|
||||
name="{{ $fieldName }}_input"> <!-- Input oculto para Livewire -->
|
||||
|
||||
<!-- Input real para el formulario -->
|
||||
@if($photo)
|
||||
<input type="hidden" name="{{ $fieldName }}" value="{{ $photo->getFilename() }}">
|
||||
@elseif($currentImage)
|
||||
<input type="hidden" name="{{ $fieldName }}" value="current">
|
||||
@endif
|
||||
</label>
|
||||
|
||||
@error('photo')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
<p class="mt-1 text-xs text-gray-500">PNG, JPG o JPEG (Max. 2MB)</p>
|
||||
</div>
|
||||
@@ -31,8 +31,7 @@
|
||||
<div class="p-4 border-b">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-medium">Carpetas</h3>
|
||||
<button wire:click="createFolder"
|
||||
class="p-1 text-gray-600 hover:bg-gray-100 rounded">
|
||||
<button wire:click="createFolder" class="p-1 text-gray-600 hover:bg-gray-100 rounded">
|
||||
<x-icons icon="plus" class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -67,8 +66,7 @@
|
||||
multiple
|
||||
class="hidden"
|
||||
id="file-upload">
|
||||
<label for="file-upload"
|
||||
class="px-4 py-2 text-sm text-white bg-green-600 rounded-lg cursor-pointer hover:bg-green-700">
|
||||
<label for="file-upload" class="px-4 py-2 text-sm text-white bg-green-600 rounded-lg cursor-pointer hover:bg-green-700">
|
||||
Subir Archivos
|
||||
</label>
|
||||
</div>
|
||||
@@ -115,4 +113,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -15,7 +15,7 @@ new class extends Component {
|
||||
*/
|
||||
public function mount(): void
|
||||
{
|
||||
$this->name = Auth::user()->name;
|
||||
$this->name = Auth::user()->first_name;
|
||||
$this->email = Auth::user()->email;
|
||||
}
|
||||
|
||||
|
||||
96
resources/views/livewire/user-photo-upload.blade.php
Normal file
96
resources/views/livewire/user-photo-upload.blade.php
Normal file
@@ -0,0 +1,96 @@
|
||||
<!-- resources/views/livewire/user-photo-upload.blade.php -->
|
||||
|
||||
<div class="mb-6" x-data="{ isUploading: false, previewUrl: '{{ $existingPhoto ? asset('storage/photos/'.$existingPhoto) : '' }}'}" }">
|
||||
<!-- Foto existente -->
|
||||
@if($existingPhoto)
|
||||
<div class="mb-4 relative group">
|
||||
<img src="{{ asset('storage/photos/' . $existingPhoto) }}"
|
||||
alt="Foto actual"
|
||||
class="w-32 h-32 rounded-full object-cover shadow-md">
|
||||
|
||||
<button type="button"
|
||||
wire:click="deletePhoto"
|
||||
class="absolute top-0 right-0 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
title="Eliminar foto">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Zona de carga -->
|
||||
<div x-on:livewire-upload-start="isUploading = true"
|
||||
x-on:livewire-upload-finish="isUploading = false"
|
||||
x-on:livewire-upload-error="isUploading = false"
|
||||
class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-blue-500 transition-colors">
|
||||
|
||||
<input type="file"
|
||||
wire:model="photo"
|
||||
id="photoInput"
|
||||
class="hidden"
|
||||
accept="image/*"
|
||||
@if($existingPhoto) disabled @endif>
|
||||
|
||||
<label for="photoInput" class="cursor-pointer">
|
||||
<div class="space-y-2">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
viewBox="0 0 48 48">
|
||||
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
<div class="text-sm text-gray-600">
|
||||
<span class="font-medium text-blue-600">Sube una foto</span>
|
||||
o arrastra y suelta
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
PNG, JPG, GIF hasta 2MB
|
||||
</div>
|
||||
|
||||
<!-- Vista previa temporal -->
|
||||
@if($tempPhoto)
|
||||
<div class="mt-4">
|
||||
<img src="{{ $tempPhoto }}"
|
||||
alt="Vista previa"
|
||||
class="w-32 h-32 rounded-full object-cover mx-auto shadow-md">
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Loading state -->
|
||||
<div x-show="isUploading" class="mt-2">
|
||||
<div class="inline-flex items-center text-sm text-gray-500">
|
||||
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-500"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
Subiendo...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Botones de acción -->
|
||||
@if($photo || $tempPhoto)
|
||||
<div class="mt-4 flex justify-center gap-2">
|
||||
<button type="button"
|
||||
wire:click="removePhoto"
|
||||
class="px-4 py-2 bg-red-100 text-red-700 rounded-md hover:bg-red-200 transition-colors">
|
||||
Borrar
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Mensajes de error -->
|
||||
@error('photo')
|
||||
<div class="mt-2 text-sm text-red-600">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
193
resources/views/livewire/user-table.blade.php
Normal file
193
resources/views/livewire/user-table.blade.php
Normal file
@@ -0,0 +1,193 @@
|
||||
<div>
|
||||
<!-- Controles de columnas -->
|
||||
<div class="mb-4 flex items-center gap-4">
|
||||
<div class="relative" x-data="{ open: false }">
|
||||
<button @click="open = !open" class="bg-gray-100 px-4 py-2 rounded-lg hover:bg-gray-200">
|
||||
Columnas ▼
|
||||
</button>
|
||||
|
||||
<div x-show="open" @click.outside="open = false"
|
||||
class="absolute bg-white shadow-lg rounded-lg p-4 mt-2 min-w-[200px] z-10">
|
||||
@foreach($available_columns as $key => $label)
|
||||
<label class="flex items-center gap-2 mb-2">
|
||||
<input type="checkbox" wire:model.live="columns.{{ $key }}"
|
||||
class="rounded border-gray-300">
|
||||
{{ $label }}
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabla -->
|
||||
<div class="bg-white rounded-lg shadow overflow-x-auto">
|
||||
<table class="min-w-full">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
@foreach($available_columns as $key => $label)
|
||||
@if($columns[$key])
|
||||
@if($key !== 'is_active')
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase cursor-pointer" >
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-col">
|
||||
<span wire:click="sortBy('{{ $key }}')">{{ $label }}</span>
|
||||
<input type="text"
|
||||
wire:model.live.debounce.300ms="filters.{{ $key }}"
|
||||
class="mt-1 text-xs w-full border rounded px-2 py-1"
|
||||
placeholder="Filtrar...">
|
||||
</div>
|
||||
@if($sortField === $key)
|
||||
<span class="ml-2">
|
||||
@if($sortDirection === 'asc')
|
||||
↑
|
||||
@else
|
||||
↓
|
||||
@endif
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</th>
|
||||
@else
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
<div class="flex flex-col">
|
||||
<span>Estado</span>
|
||||
<select wire:model.live="filters.status" class="mt-1 text-xs w-full border rounded px-2 py-1">
|
||||
<option value="">Todos</option>
|
||||
<option value="active">Activo</option>
|
||||
<option value="inactive">Inactivo</option>
|
||||
</select>
|
||||
</div>
|
||||
</th>
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
@foreach($users as $user)
|
||||
<tr>
|
||||
@if($columns['full_name'])
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<a href="{{ route('users.show', $user) }}" class="flex items-center hover:text-blue-600 hover:underline group">
|
||||
<!-- Foto del usuario -->
|
||||
@if($user->profile_photo_path)
|
||||
<div class="mr-3 flex-shrink-0">
|
||||
<img src="{{ asset($user->profile_photo_path) }}"
|
||||
alt="{{ $user->full_name }}"
|
||||
class="w-8 h-8 rounded-full object-cover transition-transform group-hover:scale-110">
|
||||
</div>
|
||||
@else
|
||||
<div class="w-8 h-8 rounded-full bg-gray-200 mr-3 flex items-center justify-center transition-colors group-hover:bg-blue-100">
|
||||
<svg class="w-4 h-4 text-gray-500 group-hover:text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Nombre completo con efecto hover -->
|
||||
<span class="group-hover:text-blue-600 transition-colors">
|
||||
{{ $user->full_name }}
|
||||
@if(!$user->is_active)
|
||||
<span class="text-xs text-red-500 ml-2">(Inactivo)</span>
|
||||
@endif
|
||||
</span>
|
||||
</a>
|
||||
</td>
|
||||
@endif
|
||||
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@if($columns['username'])
|
||||
{{ $user->username }}
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@if($columns['email'])
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
{{ $user->email }}
|
||||
</div>
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@if($columns['phone'])
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
{{ $user->phone ?? 'N/A' }}
|
||||
</div>
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@if($columns['access_start'])
|
||||
{{ $user->access_start?->format('d/m/Y') }}
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@if($columns['created_at'])
|
||||
{{ $user->created_at->format('d/m/Y H:i') }}
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@if($columns['is_active'])
|
||||
{{ $user->is_active ? 'Activo' : 'Inactivo' }}
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<!-- Acciones -->
|
||||
<div class="flex items-center gap-2">
|
||||
<!-- Botón Editar -->
|
||||
<a href="{{ route('users.edit', $user) }}"
|
||||
class="text-blue-600 hover:text-blue-900"
|
||||
title="Editar usuario">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Botón Eliminar -->
|
||||
<button wire:click="confirmDelete({{ $user->id }})"
|
||||
class="text-red-600 hover:text-red-900"
|
||||
title="Eliminar usuario">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Paginación -->
|
||||
<div class="mt-4">
|
||||
{{ $users->links() }}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user