añadir nuevas funcionalidades
This commit is contained in:
@@ -83,3 +83,20 @@ select:focus[data-flux-control] {
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center px-4 py-2 bg-blue-600 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-blue-700 active:bg-blue-900 focus:outline-none focus:border-blue-900 focus:ring focus:ring-blue-300 disabled:opacity-25 transition;
|
||||
}
|
||||
|
||||
.modal-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.modal-enter-active {
|
||||
opacity: 1;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
.modal-exit {
|
||||
opacity: 1;
|
||||
}
|
||||
.modal-exit-active {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
<x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
|
||||
</div>
|
||||
<div class="ms-1 grid flex-1 text-start text-sm">
|
||||
<span class="mb-0.5 truncate leading-none font-semibold">Laravel Starter Kit</span>
|
||||
<span class="mb-0.5 truncate leading-none font-semibold">{{ config('app.name') }}</span>
|
||||
</div>
|
||||
|
||||
23
resources/views/components/comment-item.blade.php
Normal file
23
resources/views/components/comment-item.blade.php
Normal file
@@ -0,0 +1,23 @@
|
||||
@props(['comment', 'document'])
|
||||
|
||||
<div class="border-l-2 border-blue-200 pl-3 ml-2" style="margin-left: {{ $comment->depth * 20 }}px">
|
||||
<div class="flex items-start space-x-2">
|
||||
<div class="flex-1">
|
||||
<div class="text-sm font-medium">{{ $comment->user->name }}</div>
|
||||
<div class="text-gray-600 text-sm">{{ $comment->created_at->diffForHumans() }}</div>
|
||||
<p class="mt-1 text-gray-800">{{ $comment->content }}</p>
|
||||
<div class="mt-1 text-xs text-blue-600 cursor-pointer hover:underline"
|
||||
@click="window.PDFViewer.scrollToComment({{ $comment->page }}, {{ $comment->x }}, {{ $comment->y }})">
|
||||
Página {{ $comment->page }} - ({{ number_format($comment->x*100, 1) }}%, {{ number_format($comment->y*100, 1) }}%)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($comment->children->isNotEmpty())
|
||||
<div class="mt-2 space-y-2">
|
||||
@foreach($comment->children as $child)
|
||||
<x-comment-item :comment="$child" :document="$document" />
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@@ -7,12 +7,12 @@
|
||||
<button wire:click.prevent="toggleFolder({{ $folder->id }})"
|
||||
class="mr-2">
|
||||
@if(in_array($folder->id, $expandedFolders))
|
||||
<x-icons.chevron-down class="w-4 h-4" />
|
||||
<x-icons icon="chevron-down" class="w-4 h-4" />
|
||||
@else
|
||||
<x-icons.chevron-right class="w-4 h-4" />
|
||||
<x-icons icon="chevron-right" class="w-4 h-4" />
|
||||
@endif
|
||||
</button>
|
||||
<x-icons.folder class="w-5 h-5 mr-2 text-yellow-500" />
|
||||
<x-icons icon="folder" class="w-5 h-5 mr-2 text-yellow-500" />
|
||||
<span>{{ $folder->name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
<div class="flex items-center flex-1" wire:click="selectFolder({{ $folder->id }})">
|
||||
<button wire:click.prevent="toggleFolder({{ $folder->id }})" class="mr-2">
|
||||
@if(in_array($folder->id, $expandedFolders))
|
||||
<x-icons.chevron-down class="w-4 h-4 text-gray-400" />
|
||||
<x-icons icon="chevron-down" class="w-4 h-4 text-gray-400" />
|
||||
@else
|
||||
<x-icons.chevron-right class="w-4 h-4 text-gray-400" />
|
||||
<x-icons icon="chevron-right" class="w-4 h-4 text-gray-400" />
|
||||
@endif
|
||||
</button>
|
||||
<x-icons.folder class="w-5 h-5 mr-2 text-yellow-500" />
|
||||
<x-icons icon="folder" class="w-5 h-5 mr-2 text-yellow-500" />
|
||||
<span class="cursor-pointer">{{ $folder->name }}</span>
|
||||
</div>
|
||||
<span class="text-sm text-gray-500">
|
||||
|
||||
@@ -25,6 +25,12 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
|
||||
@elseif($icon === 'chevron-right')
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
|
||||
|
||||
@elseif($icon === 'user')
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" {{ $attributes }}>
|
||||
<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" />
|
||||
|
||||
4
resources/views/components/icons/excel.blade.php
Normal file
4
resources/views/components/icons/excel.blade.php
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="{{ $class }}" viewBox="0 0 32 32">
|
||||
<path fill="#217346" d="M28.901 8.319l-5.223-5.223c-.379-.379-.868-.558-1.364-.595h-14.314v3.5h13.5v6h-13.5v3.5h13.5v6h-13.5v3.5h14.5c.828 0 1.5-.672 1.5-1.5v-22c0-.496-.217-.985-.603-1.364zm-5.598-3.776l3.181 3.181h-3.181v-3.181zm-16.303 25.457v-25.5h8.5v6h6v19.5h-14.5z"/>
|
||||
<path fill="#fff" d="M20.1 15.3l-2.1-3.4-2.1 3.4h-1.5l2.6-4.2-2.5-4.1h1.5l1.9 3.2 1.9-3.2h1.5l-2.5 4.1 2.6 4.2z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 488 B |
1
resources/views/components/icons/pdf.blade.php
Normal file
1
resources/views/components/icons/pdf.blade.php
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: rgba(0, 0, 0, 1);transform: ;msFilter:;"><path d="M8.267 14.68c-.184 0-.308.018-.372.036v1.178c.076.018.171.023.302.023.479 0 .774-.242.774-.651 0-.366-.254-.586-.704-.586zm3.487.012c-.2 0-.33.018-.407.036v2.61c.077.018.201.018.313.018.817.006 1.349-.444 1.349-1.396.006-.83-.479-1.268-1.255-1.268z"></path><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zM9.498 16.19c-.309.29-.765.42-1.296.42a2.23 2.23 0 0 1-.308-.018v1.426H7v-3.936A7.558 7.558 0 0 1 8.219 14c.557 0 .953.106 1.22.319.254.202.426.533.426.923-.001.392-.131.723-.367.948zm3.807 1.355c-.42.349-1.059.515-1.84.515-.468 0-.799-.03-1.024-.06v-3.917A7.947 7.947 0 0 1 11.66 14c.757 0 1.249.136 1.633.426.415.308.675.799.675 1.504 0 .763-.279 1.29-.663 1.615zM17 14.77h-1.532v.911H16.9v.734h-1.432v1.604h-.906V14.03H17v.74zM14 9h-1V4l5 5h-4z"></path></svg>
|
||||
|
After Width: | Height: | Size: 937 B |
@@ -1,5 +1,5 @@
|
||||
<x-layouts.app.sidebar :title="$title ?? null">
|
||||
<x-layouts.app.header :title="$title ?? null">
|
||||
<flux:main>
|
||||
{{ $slot }}
|
||||
</flux:main>
|
||||
</x-layouts.app.sidebar>
|
||||
</x-layouts.app.header>
|
||||
|
||||
@@ -16,6 +16,12 @@
|
||||
{{ __('Dashboard') }}
|
||||
</flux:navbar.item>
|
||||
</flux:navbar>
|
||||
|
||||
<flux:navbar class="-mb-px max-lg:hidden">
|
||||
<flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('User') }}
|
||||
</flux:navbar.item>
|
||||
</flux:navbar>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
|
||||
6
resources/views/components/layouts/documents.blade.php
Normal file
6
resources/views/components/layouts/documents.blade.php
Normal file
@@ -0,0 +1,6 @@
|
||||
<x-layouts.app.header :title="$title ?? null">
|
||||
<flux:main>
|
||||
documents layout
|
||||
{{ $slot }}
|
||||
</flux:main>
|
||||
</x-layouts.app.header>
|
||||
6
resources/views/components/property-item.blade.php
Normal file
6
resources/views/components/property-item.blade.php
Normal file
@@ -0,0 +1,6 @@
|
||||
@props(['label', 'value'])
|
||||
|
||||
<div class="flex justify-between items-center border-b border-gray-100 pb-2">
|
||||
<span class="text-sm text-gray-500">{{ $label }}:</span>
|
||||
<span class="text-sm font-medium text-gray-900">{{ $value }}</span>
|
||||
</div>
|
||||
11
resources/views/components/tab-button.blade.php
Normal file
11
resources/views/components/tab-button.blade.php
Normal file
@@ -0,0 +1,11 @@
|
||||
@props(['active' => false])
|
||||
|
||||
<button
|
||||
{{ $attributes->merge([
|
||||
'class' => $active
|
||||
? 'border-b-2 border-blue-500 text-blue-600 px-4 py-2 text-sm font-medium'
|
||||
: 'text-gray-500 hover:text-gray-700 hover:border-gray-300 px-4 py-2 text-sm font-medium border-b-2 border-transparent'
|
||||
]) }}
|
||||
>
|
||||
{{ $slot }}
|
||||
</button>
|
||||
5
resources/views/components/tab-content.blade.php
Normal file
5
resources/views/components/tab-content.blade.php
Normal file
@@ -0,0 +1,5 @@
|
||||
@props(['show' => false])
|
||||
|
||||
<div x-show="activeTab === '{{ $show }}'" class="space-y-4">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
0
resources/views/components/version-item.blade.php
Normal file
0
resources/views/components/version-item.blade.php
Normal file
@@ -28,8 +28,10 @@
|
||||
<x-icons icon="document" class="w-5 h-5 mr-3" />
|
||||
Documentos
|
||||
</x-nav-link>
|
||||
|
||||
@can('view roles')
|
||||
<x-nav-link :href="route('roles.index')" :active="request()->routeIs('roles.*')">
|
||||
<x-icons icon="roles" class="w-5 h-5 mr-3" />
|
||||
{{ __('Roles') }}
|
||||
</x-nav-link>
|
||||
@endcan
|
||||
@@ -168,7 +170,7 @@
|
||||
<x-icons icon="storage" class="w-12 h-12 text-purple-500" />
|
||||
</div>
|
||||
<div class="w-full bg-gray-200 rounded-full h-2">
|
||||
div class="bg-purple-500 rounded-full h-2"
|
||||
<div class="bg-purple-500 rounded-full h-2"
|
||||
style="width: {{ $stats['storage_percentage'] }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
288
resources/views/documents/show.blade.php
Normal file
288
resources/views/documents/show.blade.php
Normal file
@@ -0,0 +1,288 @@
|
||||
<x-layouts.app :title="__('Show document')">
|
||||
<div class="flex h-screen bg-gray-100"
|
||||
@resize.window.debounce="renderPage(currentPage)">
|
||||
|
||||
<!-- Zona izquierda - Visualizador de documentos -->
|
||||
<div class="w-1/2 bg-gray-800 p-4 relative">
|
||||
<!-- Loading State -->
|
||||
<template x-if="loading">
|
||||
<div class="absolute inset-0 bg-white bg-opacity-90 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<svg class="animate-spin h-12 w-12 text-blue-500 mx-auto mb-4" 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>
|
||||
<p class="text-gray-600">Cargando documento...</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Error State -->
|
||||
<template x-if="error">
|
||||
<div class="absolute inset-0 bg-red-50 flex items-center justify-center p-4">
|
||||
<div class="text-center text-red-600">
|
||||
<svg class="h-12 w-12 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<p x-text="error"></p>
|
||||
<p class="mt-2 text-sm">URL del documento: <span class="break-all" x-text="pdfUrl"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Controles del PDF -->
|
||||
<div class="flex items-center justify-between mb-4 bg-gray-700 p-2 rounded">
|
||||
<div class="flex items-center space-x-4 text-white">
|
||||
<button @click="previousPage" :disabled="currentPage <= 1" class="disabled:opacity-50">
|
||||
<x-icons icon="chevron-left" class="w-6 h-6" />
|
||||
</button>
|
||||
<span>Página <span x-text="currentPage"></span> de <span x-text="totalPages"></span></span>
|
||||
<button @click="nextPage" :disabled="currentPage >= totalPages" class="disabled:opacity-50">
|
||||
<x-icons icon="chevron-right" class="w-6 h-6" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-white">
|
||||
Zoom:
|
||||
<select x-model="scale" @change="renderPage(currentPage)" class="bg-gray-600 rounded px-2 py-1">
|
||||
<option value="0.25">25%</option>
|
||||
<option value="0.5">50%</option>
|
||||
<option value="0.75">75%</option>
|
||||
<option value="1">100%</option>
|
||||
<option value="1.5">150%</option>
|
||||
<option value="2">200%</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Canvas del PDF con comentarios -->
|
||||
<div class="relative" id="pdf-container">
|
||||
<canvas
|
||||
id="pdf-canvas"
|
||||
class="mx-auto shadow-lg bg-white"
|
||||
@click="handleCanvasClick($event)"
|
||||
></canvas>
|
||||
|
||||
<!-- Marcadores de comentarios existentes -->
|
||||
<template x-for="comment in comments" :key="comment.id">
|
||||
<div
|
||||
class="absolute w-4 h-4 bg-yellow-400 rounded-full cursor-pointer border-2 border-yellow-600"
|
||||
:style="`left: ${comment.x * 100}%; top: ${comment.y * 100}%;`"
|
||||
@click="scrollToComment(comment)"
|
||||
x-tooltip="'Ver comentario'"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<!-- Formulario flotante para nuevos comentarios -->
|
||||
<div
|
||||
class="absolute bg-white p-4 rounded-lg shadow-xl w-64"
|
||||
x-show="showCommentForm"
|
||||
:style="`top: ${clickY}px; left: ${clickX}px`"
|
||||
@click.outside="closeCommentForm"
|
||||
>
|
||||
<form @submit.prevent="submitComment">
|
||||
<textarea
|
||||
x-model="commentText"
|
||||
class="w-full mb-2 p-2 border rounded"
|
||||
placeholder="Escribe tu comentario..."
|
||||
rows="3"
|
||||
required
|
||||
></textarea>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary w-full flex items-center justify-center"
|
||||
>
|
||||
<x-icons icon="save" class="w-4 h-4 mr-2" /> Guardar
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zona derecha - Tabs de información -->
|
||||
<div x-data="{ activeTab: 'properties' }" class="w-1/2 flex flex-col bg-white">
|
||||
<!-- Tabs de navegación -->
|
||||
<div class="border-b border-gray-200">
|
||||
<nav class="flex space-x-4 px-4 pt-2">
|
||||
<button @click="activeTab = 'properties'"
|
||||
:class="activeTab === 'properties' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Propiedades
|
||||
</button>
|
||||
<button @click="activeTab = 'security'"
|
||||
:class="activeTab === 'security' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Seguridad
|
||||
</button>
|
||||
<button @click="activeTab = 'comments'"
|
||||
:class="activeTab === 'comments' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Comentarios
|
||||
</button>
|
||||
<button @click="activeTab = 'history'"
|
||||
:class="activeTab === 'history' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Historial
|
||||
</button>
|
||||
<button @click="activeTab = 'relations'"
|
||||
:class="activeTab === 'relations' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Relaciones
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Contenido de los tabs -->
|
||||
<div class="flex-1 overflow-y-auto p-4 space-y-6">
|
||||
<!-- Propiedades -->
|
||||
<div x-show="activeTab === 'properties'">
|
||||
<div class="space-y-4">
|
||||
<x-property-item label="Nombre" :value="$document->name" />
|
||||
<x-property-item label="Tipo" :value="$document->type" />
|
||||
<x-property-item label="Tamaño" :value="$document->size_for_humans" />
|
||||
<x-property-item label="Creado por" :value="Storage::url($document->file_path)" />
|
||||
<x-property-item label="Fecha creación" :value="$document->created_at->format('d/m/Y H:i')" />
|
||||
<x-property-item label="Última modificación" :value="$document->updated_at->format('d/m/Y H:i')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Seguridad -->
|
||||
<div x-show="activeTab === 'security'" x-cloak>
|
||||
implementar
|
||||
</div>
|
||||
|
||||
<!-- Comentarios -->
|
||||
<div x-show="activeTab === 'comments'" x-cloak>
|
||||
<template x-for="comment in comments" :key="comment.id">
|
||||
<div class="p-4 mb-2 border rounded hover:bg-gray-50">
|
||||
<div class="text-sm text-gray-500"
|
||||
x-text="`Página ${comment.page} - ${new Date(comment.created_at).toLocaleString()}`"></div>
|
||||
<div x-text="comment.text" class="mt-1"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Historial -->
|
||||
<div x-show="activeTab === 'history'" x-cloak>
|
||||
<div class="space-y-4">
|
||||
@foreach($document->versions as $version)
|
||||
<x-version-item :version="$version" />
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Relaciones -->
|
||||
<div x-show="activeTab === 'relations'" x-cloak>
|
||||
implementar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
|
||||
<script>
|
||||
// Configuración del Visor PDF
|
||||
var currentPage = 1;
|
||||
var nextPage = 2;
|
||||
|
||||
const url = "{{ Storage::url($document->file_path) }}";
|
||||
let pdfDoc = null,
|
||||
pageNum = 1,
|
||||
pageRendering = false,
|
||||
pageNumPending = null,
|
||||
scale = 0.8,
|
||||
canvas = document.getElementById('pdf-canvas');
|
||||
ctx = canvas.getContext('2d');
|
||||
|
||||
function renderPage(num) {
|
||||
pageRendering = true;
|
||||
pdfDoc.getPage(num).then(function(page) {
|
||||
const viewport = page.getViewport({ scale: 1.5 });
|
||||
canvas.height = viewport.height;
|
||||
canvas.width = viewport.width;
|
||||
|
||||
const renderContext = {
|
||||
canvasContext: ctx,
|
||||
viewport: viewport
|
||||
};
|
||||
|
||||
page.render(renderContext).promise.then(() => {
|
||||
pageRendering = false;
|
||||
loadCommentsForPage(num);
|
||||
});
|
||||
|
||||
// Wait for rendering to finish
|
||||
renderTask.promise.then(function() {
|
||||
pageRendering = false;
|
||||
if (pageNumPending !== null) {
|
||||
// New page rendering is pending
|
||||
renderPage(pageNumPending);
|
||||
pageNumPending = null;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleCanvasClick(event) {
|
||||
const rect = event.target.getBoundingClientRect();
|
||||
this.clickX = event.clientX - rect.left;
|
||||
this.clickY = event.clientY - rect.top;
|
||||
this.showCommentForm = true;
|
||||
}
|
||||
|
||||
// Cargar PDF
|
||||
pdfjsLib.getDocument(url).promise.then(function(pdf) {
|
||||
pdfDoc = pdf;
|
||||
renderPage(pageNum);
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* If another page rendering in progress, waits until the rendering is
|
||||
* finised. Otherwise, executes rendering immediately.
|
||||
*/
|
||||
function queueRenderPage(num) {
|
||||
if (pageRendering) {
|
||||
pageNumPending = num;
|
||||
} else {
|
||||
renderPage(num);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Displays previous page.
|
||||
*/
|
||||
function onPrevPage() {
|
||||
if (pageNum <= 1) {
|
||||
return;
|
||||
}
|
||||
pageNum--;
|
||||
queueRenderPage(pageNum);
|
||||
}
|
||||
document.getElementById('prev').addEventListener('click', onPrevPage);
|
||||
|
||||
/**
|
||||
* Displays next page.
|
||||
*/
|
||||
function onNextPage() {
|
||||
if (pageNum >= pdfDoc.numPages) {
|
||||
return;
|
||||
}
|
||||
pageNum++;
|
||||
queueRenderPage(pageNum);
|
||||
}
|
||||
document.getElementById('next').addEventListener('click', onNextPage);
|
||||
|
||||
/**
|
||||
* Asynchronously downloads PDF.
|
||||
*/
|
||||
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
|
||||
pdfDoc = pdfDoc_;
|
||||
document.getElementById('page_count').textContent = pdfDoc.numPages;
|
||||
|
||||
// Initial/first page rendering
|
||||
renderPage(pageNum);
|
||||
});
|
||||
|
||||
</script>
|
||||
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>
|
||||
@@ -1,360 +1,378 @@
|
||||
<!-- resources/views/projects/create.blade.php -->
|
||||
|
||||
<x-layouts.app :title="__('Create Project')">
|
||||
<x-slot name="header">
|
||||
<h2 class="flex items-center gap-2 text-xl font-semibold leading-tight text-gray-800">
|
||||
<!-- Icono (ejemplo con Heroicons) -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||||
</svg>
|
||||
<div class="max-w-4xl mx-auto px-0 py-4">
|
||||
<header class="bg-white shadow">
|
||||
<div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<h2 class="flex items-center text-xl font-semibold leading-tight text-gray-800">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||||
</svg>
|
||||
|
||||
{{ __('Nuevo Proyecto') }}
|
||||
|
||||
@error('error')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
</h2>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<form method="POST" action="{{ route('projects.store') }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
{{ __('Nuevo Proyecto') }}
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<header class="bg-white shadow">
|
||||
<div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<h2 class="flex items-center text-xl font-semibold leading-tight text-gray-800">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
|
||||
</svg>
|
||||
{{ __('Nuevo Proyecto') }}
|
||||
</h2>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="py-6">
|
||||
<div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 bg-white border-b border-gray-200">
|
||||
<form method="POST" action="{{ route('projects.store') }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<table class="w-full mb-8">
|
||||
<tbody>
|
||||
<!-- Nombre -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="name" :value="__('Nombre del Proyecto')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<x-input id="name"
|
||||
class="block w-[150px] mt-1 border-0 border-b border-gray-300 focus:ring-0 focus:border-blue-500"
|
||||
type="text" name="name"
|
||||
:value="old('name')"
|
||||
required />
|
||||
@error('name')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Descripción -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="description" :value="__('Descripción')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<x-textarea id="description" class="block w-full mt-1" name="description" rows="4" required>
|
||||
{{ old('description') }}
|
||||
</x-textarea>
|
||||
@error('description')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Editor Enriquecido -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="description" :value="__('Descripción Detallada')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div id="editor-container">
|
||||
<!-- Barra de herramientas -->
|
||||
<div id="toolbar">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<button class="ql-underline"></button>
|
||||
<button class="ql-strike"></button>
|
||||
<button class="ql-blockquote"></button>
|
||||
<button class="ql-code-block"></button>
|
||||
<button class="ql-link"></button>
|
||||
<button class="ql-image"></button>
|
||||
</div>
|
||||
|
||||
<!-- Editor -->
|
||||
<input type="hidden" name="description">
|
||||
<div id="rich-editor" class="h-48">{!! old('description') !!}</div>
|
||||
</div>
|
||||
@error('description')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Estado -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="status" :value="__('Estado del Proyecto')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<x-select id="status" name="status" class="block w-full mt-1">
|
||||
<option :value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Activo</option>
|
||||
<option :value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactivo</option>
|
||||
</x-select>
|
||||
@error('status')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
<!-- Imagen de Referencia -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="reference_image" :value="__('Imagen de Referencia')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="relative mt-1">
|
||||
<input type="file" id="project_image" name="project_image"
|
||||
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-md file:border-0
|
||||
file:text-sm file:font-semibold
|
||||
file:bg-blue-50 file:text-blue-700
|
||||
hover:file:bg-blue-100"
|
||||
accept="image/*"
|
||||
onchange="previewImage(event)">
|
||||
<div class="mt-2" id="image-preview-container" style="display:none;">
|
||||
<img id="image-preview" class="object-cover h-48 w-full rounded-lg">
|
||||
</div>
|
||||
</div>
|
||||
@error('project_image')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Dirección -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Ubicación')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<x-input id="address" class="block w-full mt-1"
|
||||
type="text" name="address"
|
||||
:value="old('address')"
|
||||
placeholder="Dirección" />
|
||||
@error('address')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input id="postal_code" class="block w-full mt-1"
|
||||
type="text" name="postal_code"
|
||||
:value="old('postal_code')"
|
||||
placeholder="Código Postal" />
|
||||
@error('postal_code')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input id="province" class="block w-full mt-1"
|
||||
type="text" name="province"
|
||||
:value="old('province')"
|
||||
placeholder="Provincia" />
|
||||
@error('province')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-select id="country" name="country" class="block w-full mt-1">
|
||||
<option :value="">Seleccione País</option>
|
||||
@foreach(config('countries') as $code => $name)
|
||||
<option :value="{{ $code }}" {{ old('country') == $code ? 'selected' : '' }}>
|
||||
{{ $name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</x-select>
|
||||
@error('country')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Mapa para Coordenadas -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Seleccione Ubicación en el Mapa')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div id="map" class="h-64 rounded-lg border-2 border-gray-200"></div>
|
||||
<div class="grid grid-cols-2 gap-4 mt-2">
|
||||
<div>
|
||||
<x-label for="latitude" :value="__('Latitud')" />
|
||||
<x-input id="latitude" name="latitude"
|
||||
type="number" step="any"
|
||||
:value="old('latitude')" required />
|
||||
</div>
|
||||
<div>
|
||||
<x-label for="longitude" :value="__('Longitud')" />
|
||||
<x-input id="longitude" name="longitude"
|
||||
type="number" step="any"
|
||||
:value="old('longitude')" required />
|
||||
</div>
|
||||
</div>
|
||||
@error('latitude')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
@error('longitude')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Icono y Categorías -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Identificación Visual')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<x-label for="icon" :value="__('Icono del Proyecto')" />
|
||||
<div class="relative mt-1">
|
||||
<select id="icon" name="icon"
|
||||
class="w-full rounded-md shadow-sm border-gray-300 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
||||
<option :value="">Seleccionar Icono</option>
|
||||
@foreach(config('project.icons') as $icon)
|
||||
<option :value="{{ $icon }}"
|
||||
{{ old('icon') == $icon ? 'selected' : '' }}>
|
||||
<i class="fas fa-{{ $icon }} mr-2"></i>
|
||||
{{ Str::title($icon) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-label for="categories" :value="__('Categorías')" />
|
||||
<x-multiselect
|
||||
name="categories[]"
|
||||
:options="$categories"
|
||||
:selected="old('categories', [])"
|
||||
placeholder="Seleccione categorías"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Fechas Importantes -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="start_date" :value="__('Fechas')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="flex items-center gap-4 mt-2">
|
||||
<span class="text-gray-700">de</span>
|
||||
<x-input id="start_date" type="date" name="start_date" :value="old('start_date')" />
|
||||
<span class="text-gray-700">a</span>
|
||||
<x-input id="deadline" type="date" name="deadline" :value="old('deadline')" min="{{ now()->format('Y-m-d') }}" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Archivos Adjuntos -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Documentos Iniciales')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div x-data="{ files: [] }" class="mt-1">
|
||||
<div class="flex items-center justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||
<div class="text-center">
|
||||
<input type="file"
|
||||
name="documents[]"
|
||||
multiple
|
||||
class="absolute opacity-0"
|
||||
x-ref="fileInput"
|
||||
@change="files = Array.from($event.target.files)">
|
||||
|
||||
<template x-if="files.length === 0">
|
||||
<div>
|
||||
<x-icons.upload class="mx-auto h-12 w-12 text-gray-400" />
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Arrastra archivos o haz clic para subir
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="files.length > 0">
|
||||
<div class="space-y-2">
|
||||
<template x-for="(file, index) in files" :key="index">
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<x-icons icon="document" class="w-5 h-5 mr-2" />
|
||||
<span x-text="file.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Miembros del Equipo -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Miembros del Equipo')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="grid grid-cols-1 mt-2 gap-y-2 gap-x-4 sm:grid-cols-2">
|
||||
@foreach($users as $user)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox"
|
||||
name="team[]"
|
||||
value="{{ $user->id }}"
|
||||
{{ in_array($user->id, old('team', [])) ? 'checked' : '' }}
|
||||
class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
|
||||
<span class="text-sm text-gray-700">{{ $user->name }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
@error('team')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Botones de Acción -->
|
||||
<div class="flex justify-end mt-8 space-x-4">
|
||||
<a href="{{ route('projects.index') }}"
|
||||
class="px-4 py-2 text-gray-600 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50">
|
||||
{{ __('Cancelar') }}
|
||||
</a>
|
||||
<x-button type="submit" class="bg-blue-600 hover:bg-blue-700">
|
||||
<x-icons icon="save" class="w-5 h-5 mr-2" />
|
||||
{{ __('Crear Proyecto') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Datos Generales</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full mb-8">
|
||||
<tbody>
|
||||
<!-- Nombre -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="name" :value="__('Nombre del Proyecto')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<input type="text" name="name"
|
||||
value="{{ old('name', $project->name ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
autofocus
|
||||
required>
|
||||
|
||||
@error('name')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Descripción -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="description" :value="__('Descripción')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<x-textarea id="description" class="block w-full mt-1" name="description" rows="4" required>
|
||||
{{ old('description') }}
|
||||
</x-textarea>
|
||||
@error('description')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Estado -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="status" :value="__('Estado del Proyecto')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<x-select id="status" name="status" class="block w-full mt-1">
|
||||
<option :value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Activo</option>
|
||||
<option :value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactivo</option>
|
||||
</x-select>
|
||||
@error('status')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Fechas Importantes -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="start_date" :value="__('Fechas')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="flex gap-4">
|
||||
<span class="text-gray-700">de</span>
|
||||
<input type="date"
|
||||
id="start_date"
|
||||
name="start_date"
|
||||
value="{{ old('start_date') }}"
|
||||
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<span class="text-gray-700">a</span>
|
||||
<input type="date"
|
||||
id="deadline"
|
||||
name="deadline"
|
||||
value="{{ old('end_date') }}"
|
||||
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Ubicación </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full mb-8">
|
||||
<tbody>
|
||||
<!-- Dirección -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Dirección')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-1">
|
||||
<div>
|
||||
<textarea id="address"
|
||||
name="address"
|
||||
rows="3"
|
||||
class="w-full border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">{{ old('address') }}
|
||||
|
||||
</textarea>
|
||||
|
||||
@error('address')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="text"
|
||||
id="postal_code"
|
||||
name="postal_code"
|
||||
value="{{ old('postal_code') }}"
|
||||
placeholder="Código Postal"
|
||||
class="w-[120px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
@error('postal_code')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="text"
|
||||
id="province"
|
||||
name="province"
|
||||
value="{{ old('province') }}"
|
||||
placeholder="Provincia"
|
||||
class="w-[300px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
@error('province')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<livewire:country-select :initialCountry="old('country')" />
|
||||
@error('country')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Mapa para Coordenadas -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Seleccione Ubicación')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div id="map" class="h-64 border-2 border-gray-200"></div>
|
||||
<div class="grid grid-cols-2 gap-4 mt-2">
|
||||
<div>
|
||||
<x-label for="latitude" :value="__('Latitud')" />
|
||||
<input type="number"
|
||||
id="latitude"
|
||||
name="latitude"
|
||||
value="{{ old('latitude') }}"
|
||||
step="any"
|
||||
class="border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
<div>
|
||||
<x-label for="longitude" :value="__('Longitud')" />
|
||||
<input type="number"
|
||||
id="longitude"
|
||||
name="longitude"
|
||||
value="{{ old('longitude') }}"
|
||||
step="any"
|
||||
class="border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
@error('latitude')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
@error('longitude')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Otros datos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full mb-8">
|
||||
<tbody>
|
||||
<!-- Imagen de Referencia -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label for="reference_image" :value="__('Imagen de Referencia')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="relative mt-1">
|
||||
<input type="file" id="project_image" name="project_image"
|
||||
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-md file:border-0
|
||||
file:text-sm file:font-semibold
|
||||
file:bg-blue-50 file:text-blue-700
|
||||
hover:file:bg-blue-100"
|
||||
accept="image/*"
|
||||
onchange="previewImage(event)">
|
||||
<div class="mt-2" id="image-preview-container" style="display:none;">
|
||||
<img id="image-preview" class="object-cover h-48 w-full rounded-lg">
|
||||
</div>
|
||||
</div>
|
||||
@error('project_image')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Icono y Categorías -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Identificación Visual')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<x-label for="icon" :value="__('Icono del Proyecto')" />
|
||||
<div class="relative mt-1">
|
||||
<select id="icon" name="icon"
|
||||
class="w-full rounded-md shadow-sm border-gray-300 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
||||
<option :value="">Seleccionar Icono</option>
|
||||
@foreach(config('project.icons') as $icon)
|
||||
<option :value="{{ $icon }}"
|
||||
{{ old('icon') == $icon ? 'selected' : '' }}>
|
||||
<i class="fas fa-{{ $icon }} mr-2"></i>
|
||||
{{ Str::title($icon) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-label for="categories" :value="__('Categorías')" />
|
||||
<x-multiselect
|
||||
name="categories[]"
|
||||
:options="$categories"
|
||||
:selected="old('categories', [])"
|
||||
placeholder="Seleccione categorías"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Archivos Adjuntos -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Documentos Iniciales')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div x-data="{ files: [] }" class="mt-1">
|
||||
<div class="flex items-center justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||
<div class="text-center">
|
||||
<input type="file"
|
||||
name="documents[]"
|
||||
multiple
|
||||
class="absolute opacity-0"
|
||||
x-ref="fileInput"
|
||||
@change="files = Array.from($event.target.files)">
|
||||
|
||||
<template x-if="files.length === 0">
|
||||
<div>
|
||||
<x-icons icon="upload" class="mx-auto h-12 w-12 text-gray-400" />
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Arrastra archivos o haz clic para subir
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="files.length > 0">
|
||||
<div class="space-y-2">
|
||||
<template x-for="(file, index) in files" :key="index">
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<x-icons icon="document" class="w-5 h-5 mr-2" />
|
||||
<span x-text="file.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Miembros del Equipo -->
|
||||
<tr>
|
||||
<td class="w-1/4 py-3 pr-4 align-top">
|
||||
<x-label :value="__('Miembros del Equipo')" />
|
||||
</td>
|
||||
<td class="py-3">
|
||||
<div class="grid grid-cols-1 mt-2 gap-y-2 gap-x-4 sm:grid-cols-2">
|
||||
@foreach($users as $user)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox"
|
||||
name="team[]"
|
||||
value="{{ $user->id }}"
|
||||
{{ in_array($user->id, old('team', [])) ? 'checked' : '' }}
|
||||
class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
|
||||
<span class="text-sm text-gray-700">{{ $user->first_name}} {{ $user->last_name}}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
@error('team')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Botones de Acción -->
|
||||
<div class="flex justify-end mt-8 space-x-4">
|
||||
<a href="{{ route('projects.index') }}"
|
||||
class="px-4 py-2 text-gray-600 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50">
|
||||
{{ __('Cancelar') }}
|
||||
</a>
|
||||
<x-button type="submit" class="bg-blue-600 hover:bg-blue-700">
|
||||
<x-icons icon="save" class="w-5 h-5 mr-2" />
|
||||
{{ __('Crear Proyecto') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
|
||||
|
||||
@@ -363,11 +381,7 @@
|
||||
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||||
crossorigin=""/>
|
||||
|
||||
@endpush
|
||||
|
||||
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
|
||||
<!-- Leaflet JS -->
|
||||
@@ -469,5 +483,4 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
@endpush
|
||||
</x-layouts.app>
|
||||
@@ -1,386 +0,0 @@
|
||||
<!-- resources/views/projects/create.blade.php -->
|
||||
<x-layouts.app :title="__('Create Project')">
|
||||
<x-slot name="header">
|
||||
<h2 class="text-xl font-semibold leading-tight text-gray-800">
|
||||
Nuevo Proyecto
|
||||
</h2>
|
||||
</x-slot>
|
||||
|
||||
<div class="py-6">
|
||||
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 bg-white border-b border-gray-200">
|
||||
<form method="POST" action="{{ route('projects.store') }}" enctype="multipart/form-data">
|
||||
@csrf
|
||||
<!-- Sección de Información Básica -->
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
||||
<!-- Columna Izquierda -->
|
||||
<div>
|
||||
<!-- Nombre -->
|
||||
<div class="mb-6">
|
||||
<x-label for="name" value="__('Nombre del Proyecto')" />
|
||||
<x-input id="name" class="block w-full mt-1"
|
||||
type="text" name="name" value="old('name')" required />
|
||||
@error('name')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Descripción -->
|
||||
<div class="mb-6">
|
||||
<x-label for="description" value="__('Descripción')" />
|
||||
<x-textarea id="description" class="block w-full mt-1"
|
||||
name="description" rows="4" required>
|
||||
{{ old('description') }}
|
||||
</x-textarea>
|
||||
@error('description')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Editor Enriquecido -->
|
||||
<div class="mb-6">
|
||||
<x-label for="description" value="__('Descripción Detallada')" />
|
||||
<div id="editor-container">
|
||||
<!-- Barra de herramientas -->
|
||||
<div id="toolbar">
|
||||
<button class="ql-bold"></button>
|
||||
<button class="ql-italic"></button>
|
||||
<button class="ql-underline"></button>
|
||||
<button class="ql-strike"></button>
|
||||
<button class="ql-blockquote"></button>
|
||||
<button class="ql-code-block"></button>
|
||||
<button class="ql-link"></button>
|
||||
<button class="ql-image"></button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="rich-editor">{!! old('description') !!}</div>
|
||||
</div>
|
||||
@error('description')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Estado -->
|
||||
<div class="mb-6">
|
||||
<x-label for="status" value="__('Estado del Proyecto')" />
|
||||
<x-select id="status" name="status" class="block w-full mt-1">
|
||||
<option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Activo</option>
|
||||
<option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactivo</option>
|
||||
</x-select>
|
||||
@error('status')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Imagen de Referencia -->
|
||||
<div class="mb-6">
|
||||
<x-label for="project_image" value="__('Imagen de Referencia')" />
|
||||
<div class="relative mt-1">
|
||||
<input type="file" id="project_image" name="project_image"
|
||||
class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4
|
||||
file:rounded-md file:border-0
|
||||
file:text-sm file:font-semibold
|
||||
file:bg-blue-50 file:text-blue-700
|
||||
hover:file:bg-blue-100"
|
||||
accept="image/*"
|
||||
onchange="previewImage(event)">
|
||||
<div class="mt-2" id="image-preview-container" style="display:none;">
|
||||
<img id="image-preview" class="object-cover h-48 w-full rounded-lg">
|
||||
</div>
|
||||
</div>
|
||||
@error('project_image')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Columna Derecha -->
|
||||
<div>
|
||||
<!-- Dirección -->
|
||||
<div class="mb-6">
|
||||
<x-label value="__('Ubicación')" />
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<x-input id="address" class="block w-full mt-1"
|
||||
type="text" name="address"
|
||||
value="old('address')"
|
||||
placeholder="Dirección" />
|
||||
@error('address')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input id="postal_code" class="block w-full mt-1"
|
||||
type="text" name="postal_code"
|
||||
value="old('postal_code')"
|
||||
placeholder="Código Postal" />
|
||||
@error('postal_code')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-input id="province" class="block w-full mt-1"
|
||||
type="text" name="province"
|
||||
value="old('province')"
|
||||
placeholder="Provincia" />
|
||||
@error('province')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-select id="country" name="country" class="block w-full mt-1">
|
||||
<option value="">Seleccione País</option>
|
||||
@foreach(config('countries') as $code => $name)
|
||||
<option value="{{ $code }}" {{ old('country') == $code ? 'selected' : '' }}>
|
||||
{{ $name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</x-select>
|
||||
@error('country')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mapa para Coordenadas -->
|
||||
<div class="mb-6">
|
||||
<x-label value="__('Seleccione Ubicación en el Mapa')" />
|
||||
<div id="map" class="h-64 rounded-lg border-2 border-gray-200"></div>
|
||||
<div class="grid grid-cols-2 gap-4 mt-2">
|
||||
<div>
|
||||
<x-label for="latitude" value="__('Latitud')" />
|
||||
<x-input id="latitude" name="latitude"
|
||||
type="number" step="any"
|
||||
value="old('latitude')" required />
|
||||
</div>
|
||||
<div>
|
||||
<x-label for="longitude" value="__('Longitud')" />
|
||||
<x-input id="longitude" name="longitude"
|
||||
type="number" step="any"
|
||||
value="old('longitude')" required />
|
||||
</div>
|
||||
</div>
|
||||
@error('latitude')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
@error('longitude')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sección Principal en 2 Columnas -->
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
||||
<!-- Columna Izquierda -->
|
||||
<div>
|
||||
<!-- Icono y Categorías -->
|
||||
<div class="mb-6">
|
||||
<x-label value="__('Identificación Visual')" />
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<x-label for="icon" value="__('Icono del Proyecto')" />
|
||||
<div class="relative mt-1">
|
||||
<select id="icon" name="icon"
|
||||
class="w-full rounded-md shadow-sm border-gray-300 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
|
||||
<option value="">Seleccionar Icono</option>
|
||||
@foreach(config('project.icons') as $icon)
|
||||
<option value="{{ $icon }}"
|
||||
{{ old('icon') == $icon ? 'selected' : '' }}>
|
||||
<i class="fas fa-{{ $icon }} mr-2"></i>
|
||||
{{ Str::title($icon) }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-label for="categories" value="__('Categorías')" />
|
||||
<x-multiselect
|
||||
name="categories[]"
|
||||
:options="$categories"
|
||||
:selected="old('categories', [])"
|
||||
placeholder="Seleccione categorías"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fechas Importantes -->
|
||||
<div class="grid grid-cols-2 gap-4 mb-6">
|
||||
<div>
|
||||
<x-label for="start_date" value="__('Fecha de Inicio')" />
|
||||
<x-input id="start_date" type="date"
|
||||
name="start_date" value="old('start_date')" />
|
||||
</div>
|
||||
<div>
|
||||
<x-label for="deadline" value="__('Fecha Límite')" />
|
||||
<x-input id="deadline" type="date"
|
||||
name="deadline" value="old('deadline')"
|
||||
min="{{ now()->format('Y-m-d') }}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Columna Derecha -->
|
||||
<div>
|
||||
<!-- Archivos Adjuntos -->
|
||||
<div class="mb-6">
|
||||
<x-label value="__('Documentos Iniciales')" />
|
||||
<div x-data="{ files: [] }" class="mt-1">
|
||||
<div class="flex items-center justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
|
||||
<div class="text-center">
|
||||
<input type="file"
|
||||
name="documents[]"
|
||||
multiple
|
||||
class="absolute opacity-0"
|
||||
x-ref="fileInput"
|
||||
@change="files = Array.from($event.target.files)">
|
||||
|
||||
<template x-if="files.length === 0">
|
||||
<div>
|
||||
<x-icons.upload class="mx-auto h-12 w-12 text-gray-400" />
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
Arrastra archivos o haz clic para subir
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="files.length > 0">
|
||||
<div class="space-y-2">
|
||||
<template x-for="(file, index) in files" :key="index">
|
||||
<div class="flex items-center text-sm text-gray-600">
|
||||
<x-icons icon="document" class="w-5 h-5 mr-2" />
|
||||
<span x-text="file.name"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mapa y Ubicación (Implementación previa) -->
|
||||
<!-- ... (Mantener sección de mapa y ubicación anterior) ... -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Resto del formulario -->
|
||||
<!-- ... (Mantener secciones anteriores de equipo, estado, etc) ... -->
|
||||
|
||||
<!-- Miembros del Equipo -->
|
||||
<div class="mb-6">
|
||||
Miembros del Equipo
|
||||
<x-label value="__('Miembros del Equipo')" />
|
||||
<div class="grid grid-cols-1 mt-2 gap-y-2 gap-x-4 sm:grid-cols-2">
|
||||
@foreach($users as $user)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox"
|
||||
name="team[]"
|
||||
value="{{ $user->id }}"
|
||||
{{ in_array($user->id, old('team', [])) ? 'checked' : '' }}
|
||||
class="rounded border-gray-300 text-blue-600 shadow-sm focus:ring-blue-500">
|
||||
<span class="text-sm text-gray-700">{{ $user->name }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
@error('team')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Botones de Acción -->
|
||||
<div class="flex justify-end mt-8 space-x-4">
|
||||
<a href="{{ route('projects.index') }}"
|
||||
class="px-4 py-2 text-gray-600 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50">
|
||||
{{ __('Cancelar') }}
|
||||
</a>
|
||||
<x-button type="submit" class="bg-blue-600 hover:bg-blue-700">
|
||||
<x-icons icon="save" class="w-5 h-5 mr-2" />
|
||||
{{ __('Crear Proyecto') }}
|
||||
</x-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('styles')
|
||||
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
|
||||
<script>
|
||||
// Editor Quill
|
||||
onst toolbarOptions = [
|
||||
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
||||
['blockquote', 'code-block'],
|
||||
['link', 'image', 'video', 'formula'],
|
||||
|
||||
[{ 'header': 1 }, { 'header': 2 }], // custom button values
|
||||
[{ 'list': 'ordered'}, { 'list': 'bullet' }, { 'list': 'check' }],
|
||||
[{ 'script': 'sub'}, { 'script': 'super' }], // superscript/subscript
|
||||
[{ 'indent': '-1'}, { 'indent': '+1' }], // outdent/indent
|
||||
[{ 'direction': 'rtl' }], // text direction
|
||||
|
||||
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
|
||||
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
|
||||
|
||||
[{ 'color': [] }, { 'background': [] }], // dropdown with defaults from theme
|
||||
[{ 'font': [] }],
|
||||
[{ 'align': [] }],
|
||||
|
||||
['clean'] // remove formatting button
|
||||
];
|
||||
|
||||
const quill = new Quill('#rich-editor', {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: toolbarOptions,
|
||||
placeholder: 'Description...',
|
||||
}
|
||||
});
|
||||
|
||||
// Tagify para categorías
|
||||
new Tagify(document.querySelector('[name="categories[]"]'), {
|
||||
enforceWhitelist: true,
|
||||
whitelist: @json($categories->pluck('name')),
|
||||
dropdown: {
|
||||
enabled: 1,
|
||||
maxItems: 5
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script>
|
||||
function previewImage(event) {
|
||||
const reader = new FileReader();
|
||||
const preview = document.getElementById('image-preview');
|
||||
|
||||
reader.onload = function() {
|
||||
preview.innerHTML = `
|
||||
<img src="${reader.result}"
|
||||
class="object-cover w-full h-48 rounded-lg shadow-sm"
|
||||
alt="Vista previa de la imagen">
|
||||
`;
|
||||
}
|
||||
|
||||
if(event.target.files[0]) {
|
||||
reader.readAsDataURL(event.target.files[0]);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
</x-layouts.app>
|
||||
@@ -109,11 +109,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Paginación -->
|
||||
@if($projects->hasPages())
|
||||
<div class="mt-6">
|
||||
{{ $projects->withQueryString()->links() }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
30
resources/views/projects/show.blade.php
Normal file
30
resources/views/projects/show.blade.php
Normal file
@@ -0,0 +1,30 @@
|
||||
<x-layouts.app :title="__('Show Project')">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
|
||||
<!-- Barra de herramientas con breadcrumbs -->
|
||||
<div class="mb-6">
|
||||
<nav class="flex" aria-label="Breadcrumb">
|
||||
<ol class="flex items-center space-x-2">
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<a href="{{ route('projects.index') }}" class="text-gray-400 hover:text-gray-500">
|
||||
<x-icons icon="home" class="h-5 w-5" />
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Barra de herramientas principal -->
|
||||
javi
|
||||
|
||||
|
||||
<!-- Componente principal Livewire -->
|
||||
|
||||
|
||||
<!-- Modales -->
|
||||
|
||||
</div>
|
||||
|
||||
</x-layouts.app>
|
||||
@@ -1,48 +0,0 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('content')
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6">
|
||||
<!-- Barra de herramientas con breadcrumbs -->
|
||||
<div class="mb-6">
|
||||
<nav class="flex" aria-label="Breadcrumb">
|
||||
<ol class="flex items-center space-x-2">
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<a href="{{ route('projects.index') }}" class="text-gray-400 hover:text-gray-500">
|
||||
<x-icons.home class="h-5 w-5" />
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
@foreach($breadcrumbs as $crumb)
|
||||
<li>
|
||||
<div class="flex items-center">
|
||||
<x-icons.chevron-right class="h-5 w-5 text-gray-400" />
|
||||
@if(!$loop->last)
|
||||
<a href="{{ $crumb['url'] }}" class="ml-2 text-sm font-medium text-gray-500 hover:text-gray-700">
|
||||
{{ $crumb['name'] }}
|
||||
</a>
|
||||
@else
|
||||
<span class="ml-2 text-sm font-medium text-gray-700">{{ $crumb['name'] }}</span>
|
||||
@endif
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</ol>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Barra de herramientas principal -->
|
||||
<x-toolbar :project="$project" :current-folder="$currentFolder" />
|
||||
|
||||
<!-- Componente principal Livewire -->
|
||||
<livewire:project-show
|
||||
:project="$project"
|
||||
:current-folder="$currentFolder ?? null"
|
||||
wire:key="project-show-{{ $project->id }}-{{ $currentFolder->id ?? 'root' }}"
|
||||
/>
|
||||
|
||||
<!-- Modales -->
|
||||
@livewire('folder.create-modal', ['project' => $project, 'parentFolder' => $currentFolder ?? null])
|
||||
@livewire('document.upload-modal', ['project' => $project, 'currentFolder' => $currentFolder ?? null])
|
||||
</div>
|
||||
@endsection
|
||||
351
resources/views/users/create.blade.php
Normal file
351
resources/views/users/create.blade.php
Normal file
@@ -0,0 +1,351 @@
|
||||
<x-layouts.app title="{{ isset($user) ? __('Edit User') : __('Create User') }}">
|
||||
<div class="max-w-4xl mx-auto px-0 py-4">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<svg class="w-10 h-10 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>
|
||||
<h1 class="text-3xl font-bold text-gray-800">
|
||||
{{ isset($user) ? 'Editar Usuario' : 'Nuevo Usuario' }}
|
||||
</h1>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">
|
||||
@isset($user)
|
||||
Modifique los campos necesarios para actualizar la información del usuario.
|
||||
@else
|
||||
Complete todos los campos obligatorios para registrar un nuevo usuario en el sistema.
|
||||
@endisset
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@if(session('error'))
|
||||
<div id="error-message" class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($errors->any())
|
||||
<div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
<ul>
|
||||
@foreach($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ isset($user) ? route('users.update', $user) : route('users.store') }}">
|
||||
@csrf
|
||||
@isset($user)
|
||||
@method('PUT')
|
||||
@endisset
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Datos Personales</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datos Personales -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody class="space-y-4">
|
||||
<!-- Título de cortesía -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Título de cortesía
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<select name="title" class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<option value="">Seleccionar...</option>
|
||||
<option value="Sr.">Sr.</option>
|
||||
<option value="Sra.">Sra.</option>
|
||||
<option value="Dr.">Dr.</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Nombre -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Nombre
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<input type="text" name="first_name" required
|
||||
value="{{ old('first_name', $user->first_name ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
autofocus>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Apellidos -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Apellidos
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<input type="text" name="last_name" required
|
||||
value="{{ old('last_name', $user->last_name ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Nombre de Login -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Nombre de Login
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<input type="text" name="username" required
|
||||
value="{{ old('username', $user->username ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Configuración de acceso</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuración de Acceso -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<!-- Intervalo de fechas -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Validez de acceso
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex gap-4">
|
||||
de
|
||||
<input type="date" name="start_date"
|
||||
value="{{ old('start_date', isset($user->access_start) ? $user->access_start->format('Y-m-d') : '') }}"
|
||||
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
a
|
||||
<input type="date" name="end_date"
|
||||
value="{{ old('end_date', isset($user->access_end) ? $user->access_end->format('Y-m-d') : '') }}"
|
||||
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Contraseña -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Contraseña
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex gap-2">
|
||||
<input type="text" name="password" id="password"
|
||||
{{ !isset($user) ? 'required' : '' }}
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<button type="button" onclick="generatePassword()"
|
||||
class="px-2 py-1 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Datos de contacto</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datos de Contacto -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Email
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 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>
|
||||
<input type="email" name="email" required
|
||||
value="{{ old('email', $user->email ?? '') }}"
|
||||
class="w-[300px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Teléfono
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 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>
|
||||
<input type="tel" name="phone"
|
||||
value="{{ old('phone', $user->phone ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="py-2 pr-4 align-top">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Dirección
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-gray-400 mt-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<textarea name="address" rows="3"
|
||||
class="w-full border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">{{ old('address', $user->address ?? '') }}</textarea>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Otros datos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datos de Contacto -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<!-- Estado -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Estado
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<select name="is_active" class="w-[200px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<option value="Activo">Activo</option>
|
||||
<option value="Inactivo">Inactivo</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Foto -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Foto
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="mb-6">
|
||||
@livewire('image-uploader', [
|
||||
'fieldName' => 'image_path', // Nombre del campo en la BD
|
||||
'label' => 'Imagen principal' // Etiqueta personalizada
|
||||
])
|
||||
<!-- Campo oculto para la ruta de la imagen -->
|
||||
<input type="hidden" name="profile_photo_path" id="profilePhotoPathInput" value="{{ old('profile_photo_path', $user->profile_photo_path) }}">
|
||||
</div>
|
||||
</td>
|
||||
</tr>php
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Botón de envío -->
|
||||
<div class="text-right">
|
||||
<button type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
|
||||
{{ isset($user) ? 'Actualizar Usuario' : 'Crear Usuario' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
// Escuchar el evento de Livewire y actualizar el campo oculto
|
||||
document.addEventListener('imageUploaded', (event) => {
|
||||
document.getElementById('profilePhotoPathInput').value = event.detail.path;
|
||||
});
|
||||
|
||||
document.addEventListener('imageRemoved', (event) => {
|
||||
document.getElementById('profilePhotoPathInput').value = '';
|
||||
});
|
||||
|
||||
function generatePassword() {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
|
||||
let password = '';
|
||||
for (let i = 0; i < 12; i++) {
|
||||
password += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
document.getElementById('password').value = password;
|
||||
}
|
||||
|
||||
/*
|
||||
<div class="mt-2 flex items-center gap-2">
|
||||
<input type="checkbox" onclick="togglePasswordVisibility()">
|
||||
<span class="text-sm text-gray-500">Mostrar contraseña</span>
|
||||
</div>
|
||||
|
||||
function togglePasswordVisibility() {
|
||||
const passwordField = document.getElementById('password');
|
||||
passwordField.type = passwordField.type === 'password' ? 'text' : 'password';
|
||||
}
|
||||
*/
|
||||
</script>
|
||||
|
||||
</x-layouts.app>
|
||||
17
resources/views/users/index.blade.php
Normal file
17
resources/views/users/index.blade.php
Normal file
@@ -0,0 +1,17 @@
|
||||
<x-layouts.app :title="__('Users')">
|
||||
<div class="max-w-7xl mx-auto px-4 py-8">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<svg class="w-8 h-8 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>
|
||||
<h1 class="text-3xl font-bold text-gray-800">Usuarios</h1>
|
||||
</div>
|
||||
<a href="{{ route('users.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
|
||||
Nuevo
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@livewire('user-table')
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
321
resources/views/users/show.blade.php
Normal file
321
resources/views/users/show.blade.php
Normal file
@@ -0,0 +1,321 @@
|
||||
<x-layouts.app :title="__('Show User')">
|
||||
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-white rounded-lg shadow-md p-6 mb-6 flex items-center justify-between">
|
||||
<!-- User Info Left -->
|
||||
<div class="flex items-center space-x-6">
|
||||
<!-- User Photo -->
|
||||
<img src="{{ $user->profile_photo_path ? asset('storage/' . $user->profile_photo_path) : 'https://via.placeholder.com/150' }}"
|
||||
class="w-24 h-24 rounded-full object-cover border-2 border-blue-100">
|
||||
<!-- User Details -->
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-700">
|
||||
{{ $user->first_name }} {{ $user->last_name }}
|
||||
</h1>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="mt-2 space-y-1">
|
||||
<div class="flex items-center text-gray-600">
|
||||
<p class="text-sm text-gray-700">
|
||||
{{ $user->first_name }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center text-gray-600">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
|
||||
</svg>
|
||||
<a href="mailto:{{ $user->email }}" class="hover:text-blue-600">
|
||||
{{ $user->email }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if($user->phone)
|
||||
<div class="flex items-center text-gray-600">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
|
||||
</svg>
|
||||
<a href="tel:{{ $user->phone }}" class="hover:text-blue-600">
|
||||
{{ $user->phone }}
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Section -->
|
||||
<div class="flex flex-col items-end space-y-4">
|
||||
<!-- Navigation Toolbar -->
|
||||
<div class="flex space-x-2">
|
||||
<a href="{{ route('users.index') }}"
|
||||
class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
@if($previousUser)
|
||||
<a href="{{ route('users.show', $previousUser) }}" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
@if($nextUser)
|
||||
<a href="{{ route('users.show', $nextUser) }}"
|
||||
class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center">
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Status Badge -->
|
||||
<span class="px-4 py-2 w-30 rounded-lg text-sm text-center font-semibold
|
||||
{{ $user->is_active ? 'bg-green-200 text-green-800' : 'bg-red-100 text-red-800' }}">
|
||||
{{ $user->is_active ? 'Activo' : 'Inactivo' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div x-data="{ activeTab: 'info' }" class="bg-white rounded-lg shadow-md">
|
||||
<!-- Tab Headers -->
|
||||
<div class="border-b border-gray-200">
|
||||
<nav class="flex space-x-8 px-6">
|
||||
<button @click="activeTab = 'info'"
|
||||
:class="activeTab === 'info' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Información del Usuario
|
||||
</button>
|
||||
|
||||
<button @click="activeTab = 'permissions'"
|
||||
:class="activeTab === 'permissions' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Permisos
|
||||
</button>
|
||||
|
||||
<button @click="activeTab = 'projects'"
|
||||
:class="activeTab === 'projects' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Proyectos
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="p-6">
|
||||
<!-- Info Tab -->
|
||||
<div x-show="activeTab === 'info'">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@foreach(['name' => 'Nombre', 'last_name' => 'Apellido', 'email' => 'Email', 'phone' => 'Teléfono', 'created_at' => 'Fecha Registro'] as $field => $label)
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $label }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $user->$field ?? 'N/A' }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="mt-6 flex justify-end space-x-4">
|
||||
<a href="{{ route('users.edit', $user) }}"
|
||||
class="w-[150px] px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mr-2" 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>
|
||||
Editar
|
||||
</a>
|
||||
|
||||
{{-- Formulario de Edición --}}
|
||||
<form method="POST" action="{{ route('users.update', $user) }}">
|
||||
@csrf
|
||||
@method('PUT') <!-- Important! -->
|
||||
<button type="submit"
|
||||
class="w-[150px] px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
|
||||
</svg>
|
||||
{{ $user->is_active ? 'Desactivar' : 'Activar' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{{-- Formulario de Eliminación --}}
|
||||
<form method="POST" action="{{ route('users.destroy', $user) }}">
|
||||
@csrf
|
||||
@method('DELETE') <!-- Important! -->
|
||||
<button type="submit"
|
||||
onclick="return confirm('¿Estás seguro de querer eliminar este usuario?')"
|
||||
class="px-4 py-2 w-[150px] bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mr-2" 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>
|
||||
Eliminar
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permissions Tab -->
|
||||
<div class="space-y-4">
|
||||
@foreach($permissionGroups as $groupName => $group)
|
||||
<div class="border rounded-lg overflow-hidden">
|
||||
<!-- Group Header -->
|
||||
<div class="bg-gray-50 px-4 py-3 flex justify-between items-center border-b">
|
||||
<h3 class="font-semibold text-gray-700">
|
||||
{{ ucfirst($groupName) }} Permissions
|
||||
</h3>
|
||||
|
||||
<div class="flex space-x-2">
|
||||
<!-- Toggle All On -->
|
||||
<button wire:click="toggleAllGroupPermissions('{{ $groupName }}', true)"
|
||||
class="px-3 py-1 text-xs bg-green-100 text-green-800 rounded hover:bg-green-200 flex items-center">
|
||||
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Activar Todos
|
||||
</button>
|
||||
|
||||
<!-- Toggle All Off -->
|
||||
<button wire:click="toggleAllGroupPermissions('{{ $groupName }}', false)"
|
||||
class="px-3 py-1 text-xs bg-red-100 text-red-800 rounded hover:bg-red-200 flex items-center">
|
||||
<svg class="w-3 h-3 mr-1" 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>
|
||||
Desactivar Todos
|
||||
</button>
|
||||
|
||||
<!-- Collapse Toggle -->
|
||||
<button wire:click="toggleGroupCollapse('{{ $groupName }}')"
|
||||
class="px-3 py-1 text-xs bg-gray-100 text-gray-800 rounded hover:bg-gray-200 flex items-center">
|
||||
<svg x-show="!collapsedGroups.includes('{{ $groupName }}')" class="w-3 h-3" 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"/>
|
||||
</svg>
|
||||
<svg x-show="collapsedGroups.includes('{{ $groupName }}')" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" x-cloak>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permissions List -->
|
||||
<div x-show="!collapsedGroups.includes('{{ $groupName }}')" class="divide-y divide-gray-200">
|
||||
@foreach($group['permissions'] as $permission)
|
||||
<div class="px-4 py-3 flex justify-between items-center hover:bg-gray-50">
|
||||
<div class="flex items-center">
|
||||
<span class="text-sm text-gray-700">{{ $permission['description'] ?? $permission['name'] }}</span>
|
||||
|
||||
@if($permission['description'])
|
||||
<span class="ml-2 text-xs text-gray-500">({{ $permission['name'] }})</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox"
|
||||
@if(true || $user->hasPermissionTo($permission['name'])) checked @endif
|
||||
wire:change="togglePermission('{{ $permission['name'] }}')"
|
||||
class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pestaña de Proyectos -->
|
||||
<div x-show="activeTab === 'projects'" x-cloak>
|
||||
<div class="space-y-6">
|
||||
<!-- Proyectos Actuales -->
|
||||
<div class="border rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold mb-4">Proyectos Asociados</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
falta implementar
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Añadir Proyectos (Solo con permisos) -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: .4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: .4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider {
|
||||
background-color: #3B82F6;
|
||||
}
|
||||
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('permissions', () => ({
|
||||
init() {
|
||||
// Inicializar datos desde Livewire
|
||||
this.$watch('$wire.permissionGroups', value => {
|
||||
this.groups = value;
|
||||
});
|
||||
},
|
||||
|
||||
toggleAll(groupName, enable) {
|
||||
this.$wire.toggleAllGroupPermissions(groupName, enable);
|
||||
}
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
</x-layouts.app>
|
||||
Reference in New Issue
Block a user