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>
|
||||
57
resources/views/livewire/image-uploader.blade.php
Normal file
57
resources/views/livewire/image-uploader.blade.php
Normal file
@@ -0,0 +1,57 @@
|
||||
<div x-data="{ isUploading: false }"
|
||||
x-on:livewire-upload-start="isUploading = true"
|
||||
x-on:livewire-upload-finish="isUploading = false"
|
||||
x-on:livewire-upload-error="isUploading = false">
|
||||
|
||||
<div class="form-group">
|
||||
<label>{{ $label }}</label>
|
||||
|
||||
<!-- Zona de dropzone modificada -->
|
||||
<div wire:ignore
|
||||
x-on:drop.prevent="
|
||||
const files = event.dataTransfer.files;
|
||||
if (files.length) {
|
||||
@this.upload('image', files[0]);
|
||||
}
|
||||
$wire.toggleHover(false);
|
||||
event.stopPropagation(); // Evita propagación del evento
|
||||
"
|
||||
x-on:dragover.prevent="$wire.toggleHover(true)"
|
||||
x-on:dragleave.prevent="$wire.toggleHover(false)"
|
||||
class="dropzone {{ $hover ? 'dropzone-hover' : '' }} mb-3 p-4 border-2 border-dashed rounded text-center cursor-pointer">
|
||||
|
||||
<!-- Contenido modificado -->
|
||||
<div wire:loading wire:target="image" class="text-center py-4">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">Cargando...</span>
|
||||
</div>
|
||||
<p>Subiendo imagen...</p>
|
||||
</div>
|
||||
|
||||
<div wire:loading.remove wire:target="image">
|
||||
@if(!$imagePath && !$image)
|
||||
<i class="fas fa-cloud-upload-alt fa-3x mb-2 text-muted"></i>
|
||||
<p class="mb-1">Arrastra y suelta tu imagen aquí</p>
|
||||
<p class="text-muted small">o haz clic para seleccionar</p>
|
||||
<!-- Input file modificado -->
|
||||
<input type="file"
|
||||
wire:model="image"
|
||||
class="d-none"
|
||||
id="fileInput"
|
||||
x-on:change="$wire.uploadImage(); event.stopPropagation();">
|
||||
<button type="button"
|
||||
class="btn btn-sm btn-outline-primary mt-2"
|
||||
onclick="document.getElementById('fileInput').click()">
|
||||
Seleccionar archivo
|
||||
</button>
|
||||
@endif
|
||||
|
||||
<!-- Resto del contenido se mantiene igual -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@error('image')
|
||||
<div class="alert alert-danger mt-2">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,118 +0,0 @@
|
||||
<div>
|
||||
<!-- Header y Breadcrumbs -->
|
||||
<div class="p-4 bg-white border-b">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<nav class="flex space-x-2 text-sm">
|
||||
<a wire:click="currentFolder = null" class="cursor-pointer text-gray-600 hover:text-blue-600">
|
||||
Inicio
|
||||
</a>
|
||||
@foreach($this->breadcrumbs as $folder)
|
||||
<span class="text-gray-400">/</span>
|
||||
<a wire:click="selectFolder({{ $folder->id }})"
|
||||
class="cursor-pointer text-gray-600 hover:text-blue-600">
|
||||
{{ $folder->name }}
|
||||
</a>
|
||||
@endforeach
|
||||
</nav>
|
||||
<h1 class="mt-2 text-2xl font-bold">{{ $project->name }}</h1>
|
||||
</div>
|
||||
<a href="{{ route('projects.edit', $project) }}"
|
||||
class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700">
|
||||
Editar Proyecto
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barra de Herramientas y Contenido -->
|
||||
<div class="grid grid-cols-1 gap-6 p-4 lg:grid-cols-4">
|
||||
<!-- Treeview de Carpetas -->
|
||||
<div class="col-span-1 bg-white rounded-lg shadow">
|
||||
<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">
|
||||
<x-icons icon="plus" class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<input type="text"
|
||||
wire:model.live="folderName"
|
||||
placeholder="Nueva carpeta"
|
||||
class="w-full p-2 mt-2 border rounded"
|
||||
@keyup.enter="createFolder">
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<ul class="space-y-2">
|
||||
@foreach($project->rootFolders as $folder)
|
||||
<x-folder-item
|
||||
:folder="$folder"
|
||||
:currentFolder="$currentFolder"
|
||||
:expandedFolders="$expandedFolders"
|
||||
wire:key="folder-{{ $folder->id }}"
|
||||
/>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Documentos y Subida de Archivos -->
|
||||
<div class="col-span-3">
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div class="p-4 border-b">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-medium">Documentos</h3>
|
||||
<input type="file"
|
||||
wire:model="files"
|
||||
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">
|
||||
Subir Archivos
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Nombre</th>
|
||||
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Versiones</th>
|
||||
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Última Actualización</th>
|
||||
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Estado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@forelse($this->documents as $document)
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<x-icons icon="document" class="w-5 h-5 mr-2 text-gray-400" />
|
||||
{{ $document->name }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{{ $document->versions_count }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{{ $document->updated_at->diffForHumans() }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<x-status-badge :status="$document->status" />
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="px-6 py-4 text-center text-gray-500">
|
||||
No se encontraron documentos
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
283
resources/views/livewire/project/show.blade.php
Normal file
283
resources/views/livewire/project/show.blade.php
Normal file
@@ -0,0 +1,283 @@
|
||||
<div>
|
||||
<!-- Header y Breadcrumbs -->
|
||||
<div class="p-4 bg-white border-b">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<nav class="flex space-x-2 text-sm">
|
||||
<a wire:click="currentFolder = null" class="cursor-pointer text-gray-600 hover:text-blue-600">
|
||||
Inicio
|
||||
</a>
|
||||
@foreach($this->breadcrumbs as $folder)
|
||||
<span class="text-gray-400">/</span>
|
||||
<a wire:click="selectFolder({{ $folder->id }})"
|
||||
class="cursor-pointer text-gray-600 hover:text-blue-600">
|
||||
{{ $folder->name }}
|
||||
</a>
|
||||
@endforeach
|
||||
</nav>
|
||||
<h1 class="mt-2 text-2xl font-bold">{{ $project->name }}</h1>
|
||||
</div>
|
||||
<a href="{{ route('projects.edit', $project) }}"
|
||||
class="px-4 py-2 text-white bg-blue-600 rounded-lg hover:bg-blue-700">
|
||||
Editar Proyecto
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div wire:loading wire:target="files" class="fixed top-0 right-0 p-4 bg-blue-100 text-blue-800">
|
||||
Subiendo archivos...
|
||||
</div>
|
||||
|
||||
<!-- Contenedor principal con layout de explorador -->
|
||||
<div class="flex flex-col h-full">
|
||||
<!-- Barra de herramientas -->
|
||||
<div class="flex items-center justify-between p-4 bg-white border-b">
|
||||
<div class="flex items-center space-x-4">
|
||||
<!-- Botón Nueva Carpeta -->
|
||||
<button wire:click="showCreateFolderModal" class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<span class="text-sm">Nueva carpeta</span>
|
||||
</button>
|
||||
|
||||
<!-- Botón Subir Archivos (versión con button) -->
|
||||
<div class="relative">
|
||||
<button
|
||||
wire:click="openUploadModal"
|
||||
class="flex items-center p-2 text-gray-600 hover:bg-gray-100 rounded">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<span class="text-sm">Subir archivos</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contenido principal (treeview + documentos) -->
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- Treeview de Carpetas -->
|
||||
<div class="w-64 h-full overflow-y-auto border-r bg-white">
|
||||
<div class="p-4">
|
||||
<ul class="space-y-1">
|
||||
@foreach($project->rootFolders as $folder)
|
||||
<x-folder-item
|
||||
:folder="$folder"
|
||||
:currentFolder="$currentFolder"
|
||||
:expandedFolders="$expandedFolders"
|
||||
wire:key="folder-{{ $folder->id }}"
|
||||
/>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Documentos -->
|
||||
<div class="flex-1 overflow-auto bg-white">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50 sticky top-0">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Nombre</th>
|
||||
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Versiones</th>
|
||||
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Última Actualización</th>
|
||||
<th class="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase">Estado</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@forelse($this->documents as $document)
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<a href="{{ route('documents.show', $document) }}"
|
||||
target="_blank"
|
||||
class="flex items-center hover:text-blue-600 transition-colors">
|
||||
@php
|
||||
$type = App\Helpers\FileHelper::getFileType($document->name);
|
||||
$iconComponent = $iconComponent = "icons." . $type;
|
||||
$iconClass = [
|
||||
'pdf' => 'pdf text-red-500',
|
||||
'word' => 'word text-blue-500',
|
||||
'excel' => 'excel text-green-500',
|
||||
// ... agregar todos los tipos
|
||||
][$type] ?? 'document text-gray-400';
|
||||
@endphp
|
||||
|
||||
<x-dynamic-component
|
||||
component="{{ $iconComponent }}"
|
||||
class="w-5 h-5 mr-2 {{ explode(' ', $iconClass)[1] }}"
|
||||
/>
|
||||
|
||||
{{ $document->name }}
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{{ $document->versions_count }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{{ $document->updated_at->diffForHumans() }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<x-status-badge :status="$document->status" />
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="px-6 py-4 text-center text-gray-500">
|
||||
No se encontraron documentos en esta carpeta
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal para crear carpeta -->
|
||||
@if($showFolderModal)
|
||||
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div class="w-full max-w-md p-6 bg-white rounded-lg shadow-xl">
|
||||
<div class="mb-4">
|
||||
<h3 class="text-lg font-medium text-gray-900">Crear nueva carpeta</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">Ingresa el nombre de la nueva carpeta</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<input
|
||||
type="text"
|
||||
wire:model="folderName"
|
||||
placeholder="Nombre de la carpeta"
|
||||
class="w-full p-2 border rounded focus:ring-blue-500 focus:border-blue-500"
|
||||
autofocus
|
||||
@keyup.enter="createFolder"
|
||||
>
|
||||
@error('folderName')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-3">
|
||||
<button
|
||||
wire:click="hideCreateFolderModal"
|
||||
class="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
wire:click="createFolder"
|
||||
class="px-4 py-2 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700">
|
||||
Crear carpeta
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Modal de subida -->
|
||||
@if($showUploadModal)
|
||||
<div
|
||||
x-data="{ isDragging: false }"
|
||||
x-on:drop.prevent="isDragging = false; $wire.selectFiles(Array.from($event.dataTransfer.files))"
|
||||
x-on:dragover.prevent="isDragging = true"
|
||||
x-on:dragleave.prevent="isDragging = false"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
|
||||
<div class="w-full max-w-2xl p-6 bg-white rounded-lg shadow-xl">
|
||||
<div class="mb-4">
|
||||
<h3 class="text-lg font-medium text-gray-900">Subir archivos</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">
|
||||
{{ $currentFolder ? "Carpeta destino: {$currentFolder->name}" : "Carpeta raíz del proyecto" }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Área de drag & drop -->
|
||||
<div
|
||||
x-on:click="$refs.fileInput.click()"
|
||||
:class="isDragging ? 'border-blue-500 bg-blue-50' : 'border-gray-300'"
|
||||
class="flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-lg cursor-pointer hover:bg-gray-50 transition-colors">
|
||||
<input
|
||||
type="file"
|
||||
x-ref="fileInput"
|
||||
wire:model="selectedFiles"
|
||||
multiple
|
||||
class="hidden"
|
||||
wire:change="selectFiles($event.target.files)">
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
|
||||
<div class="mt-4 text-center">
|
||||
<p class="font-medium text-gray-900">
|
||||
Arrastra archivos aquí o haz clic para seleccionar
|
||||
</p>
|
||||
<p class="text-sm text-gray-500">
|
||||
Formatos soportados: PDF, DOCX, XLSX, JPG, PNG (Máx. 10MB)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lista de archivos -->
|
||||
<div class="mt-4 max-h-64 overflow-y-auto">
|
||||
@if(count($selectedFiles) > 0)
|
||||
<ul class="space-y-2">
|
||||
@foreach($selectedFiles as $index => $file)
|
||||
<li class="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||||
<div class="flex items-center truncate">
|
||||
<x-icons icon="document" class="w-4 h-4 mr-2 text-gray-400" />
|
||||
<span class="text-sm truncate">
|
||||
{{ $file->getClientOriginalName() }} <!-- Ahora funciona -->
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs text-gray-500">
|
||||
{{ number_format($file->getSize() / 1024, 2) }} KB
|
||||
</span>
|
||||
<button
|
||||
wire:click="removeFile({{ $index }})"
|
||||
type="button"
|
||||
class="p-1 text-gray-400 hover:text-red-600">
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Footer del modal -->
|
||||
<div class="flex justify-end mt-6 space-x-3">
|
||||
<button
|
||||
wire:click="resetUpload"
|
||||
type="button"
|
||||
class="px-4 py-2 text-sm text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50">
|
||||
Cancelar
|
||||
</button>
|
||||
<button
|
||||
wire:click="uploadFiles"
|
||||
:disabled="!selectedFiles.length"
|
||||
class="px-4 py-2 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
Subir archivos ({{ count($selectedFiles) }})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('livewire:init', () => {
|
||||
Livewire.on('upload-progress', (name, progress) => {
|
||||
// Actualizar progreso en el frontend
|
||||
const progressBar = document.querySelector(`[data-file="${name}"] .progress-bar`);
|
||||
if (progressBar) {
|
||||
progressBar.style.width = `${progress}%`;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -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('storage/' . $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