añadir funicionalidades de permisos y grupos
This commit is contained in:
@@ -1,21 +1,32 @@
|
||||
@props(['folder', 'level' => 0])
|
||||
@props(['folder', 'currentFolder', 'expandedFolders', 'level' => 0])
|
||||
|
||||
<li class="pl-{{ $level * 4 }} group">
|
||||
<div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg cursor-pointer"
|
||||
wire:click="$emit('folderSelected', {{ $folder->id }})">
|
||||
<div class="flex items-center">
|
||||
<x-icons icon="folder" class="w-5 h-5 mr-2 text-yellow-500" />
|
||||
<span class="text-sm">{{ $folder->name }}</span>
|
||||
<li class="pl-{{ $level * 4 }}">
|
||||
<div class="flex items-center justify-between p-2 hover:bg-gray-50
|
||||
{{ $folder->id === optional($currentFolder)->id ? 'bg-blue-50' : '' }}">
|
||||
<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" />
|
||||
@else
|
||||
<x-icons.chevron-right class="w-4 h-4" />
|
||||
@endif
|
||||
</button>
|
||||
<x-icons.folder class="w-5 h-5 mr-2 text-yellow-500" />
|
||||
<span>{{ $folder->name }}</span>
|
||||
</div>
|
||||
@if($folder->children->isNotEmpty())
|
||||
<x-icons icon="chevron-right" class="w-4 h-4 text-gray-400 transform group-hover:rotate-90 transition-transform" />
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if($folder->children->isNotEmpty())
|
||||
<ul class="mt-1 space-y-1">
|
||||
@if(in_array($folder->id, $expandedFolders))
|
||||
<ul class="ml-4">
|
||||
@foreach($folder->children as $child)
|
||||
<x-folder-item :folder="$child" :level="$level + 1" />
|
||||
<x-folder-item
|
||||
:folder="$child"
|
||||
:currentFolder="$currentFolder"
|
||||
:expandedFolders="$expandedFolders"
|
||||
:level="$level + 1"
|
||||
wire:key="folder-{{ $child->id }}"
|
||||
/>
|
||||
@endforeach
|
||||
</ul>
|
||||
@endif
|
||||
|
||||
9
resources/views/components/label.blade.php
Normal file
9
resources/views/components/label.blade.php
Normal file
@@ -0,0 +1,9 @@
|
||||
{{-- resources/views/components/label.blade.php --}}
|
||||
@props(['for' => null, 'value' => null])
|
||||
|
||||
<label
|
||||
{{ $attributes->merge(['class' => 'block text-sm font-medium text-gray-700']) }}
|
||||
for="{{ $for }}"
|
||||
>
|
||||
{{ $value ?? $slot }}
|
||||
</label>
|
||||
15
resources/views/components/layouts/livewire-app.blade.php
Normal file
15
resources/views/components/layouts/livewire-app.blade.php
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ $title ?? 'Proyecto' }}</title>
|
||||
@livewireStyles
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
</head>
|
||||
<body>
|
||||
<!-- Integra tu sidebar aquí si es necesario -->
|
||||
<div class="container mx-auto p-4">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
@livewireScripts
|
||||
</body>
|
||||
</html>
|
||||
@@ -28,6 +28,11 @@
|
||||
<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.*')">
|
||||
{{ __('Roles') }}
|
||||
</x-nav-link>
|
||||
@endcan
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
|
||||
69
resources/views/livewire/file-upload.blade.php
Normal file
69
resources/views/livewire/file-upload.blade.php
Normal file
@@ -0,0 +1,69 @@
|
||||
<!-- resources/views/livewire/file-upload.blade.php -->
|
||||
<div class="relative p-8 mt-4 border-2 border-dashed rounded-lg"
|
||||
x-data="{ isDragging: false }"
|
||||
@dragover.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@drop.prevent="isDragging = false; $wire.uploadFiles(event.dataTransfer.files)"
|
||||
:class="{ 'border-blue-500 bg-blue-50': isDragging }">
|
||||
|
||||
<div class="text-center">
|
||||
<input type="file" id="fileInput" wire:model="files" multiple class="hidden">
|
||||
|
||||
<template x-if="!$wire.previews.length">
|
||||
<div>
|
||||
<x-icons icon="upload" class="w-12 h-12 mx-auto text-gray-400" />
|
||||
<p class="mt-2 text-sm text-gray-600">
|
||||
Arrastra archivos aquí o
|
||||
<button class="text-blue-600 hover:underline"
|
||||
@click="document.getElementById('fileInput').click()">
|
||||
selecciona desde tu equipo
|
||||
</button>
|
||||
</p>
|
||||
<p class="mt-1 text-xs text-gray-500">
|
||||
Máximo {{ $maxSize }}MB por archivo
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template x-if="$wire.previews.length">
|
||||
<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
|
||||
<template x-for="(preview, index) in $wire.previews" :key="index">
|
||||
<div class="relative p-2 border rounded-lg">
|
||||
<button class="absolute top-1 right-1 text-red-500 hover:text-red-700"
|
||||
@click="$wire.removePreview(index)">
|
||||
<x-icons icon="x" class="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
<template x-if="preview.preview">
|
||||
<img :src="preview.preview" class="object-cover h-32 mx-auto rounded">
|
||||
</template>
|
||||
|
||||
<template x-if="!preview.preview">
|
||||
<x-icons icon="document" class="w-32 h-32 mx-auto text-gray-400" />
|
||||
</template>
|
||||
|
||||
<div class="mt-2 text-xs truncate" x-text="preview.name"></div>
|
||||
<div class="text-xs text-gray-500"
|
||||
x-text="formatBytes(preview.size)"></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function formatBytes(bytes) {
|
||||
const units = ['B', 'KB', 'MB', 'GB'];
|
||||
let size = bytes;
|
||||
let unitIndex = 0;
|
||||
|
||||
while (size >= 1024 && unitIndex < units.length - 1) {
|
||||
size /= 1024;
|
||||
unitIndex++;
|
||||
}
|
||||
|
||||
return `${size.toFixed(1)} ${units[unitIndex]}`;
|
||||
}
|
||||
</script>
|
||||
|
||||
21
resources/views/livewire/group-search.blade.php
Normal file
21
resources/views/livewire/group-search.blade.php
Normal file
@@ -0,0 +1,21 @@
|
||||
{{-- resources/views/livewire/group-search.blade.php --}}
|
||||
<div>
|
||||
<x-input type="search"
|
||||
wire:model.live="search"
|
||||
placeholder="Buscar grupos..."
|
||||
class="w-full" />
|
||||
|
||||
<div class="mt-2 space-y-2">
|
||||
@foreach($groups as $group)
|
||||
<div wire:click="selectGroup({{ $group->id }})"
|
||||
@class([
|
||||
'p-3 cursor-pointer rounded-lg transition-colors',
|
||||
'bg-green-100 dark:bg-green-900' => $selectedGroup === $group->id,
|
||||
'hover:bg-gray-100 dark:hover:bg-gray-700' => $selectedGroup !== $group->id
|
||||
])>
|
||||
<p class="text-gray-800 dark:text-gray-200">{{ $group->name }}</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">{{ $group->users_count }} miembros</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
105
resources/views/livewire/permission-manager.blade.php
Normal file
105
resources/views/livewire/permission-manager.blade.php
Normal file
@@ -0,0 +1,105 @@
|
||||
{{-- resources/views/livewire/permission-manager.blade.php --}}
|
||||
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h2 class="text-2xl font-semibold mb-6 text-gray-800 dark:text-gray-200">Gestión de Permisos</h2>
|
||||
|
||||
{{-- Selector de Recurso --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Proyecto
|
||||
</label>
|
||||
<select wire:model.live="selectedProject"
|
||||
class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300">
|
||||
<option value="">Seleccionar Proyecto</option>
|
||||
@foreach($projects as $project)
|
||||
<option value="{{ $project->id }}">{{ $project->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Carpeta (Opcional)
|
||||
</label>
|
||||
<select wire:model="selectedFolder"
|
||||
class="w-full rounded-lg border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-300"
|
||||
{{ !$folders->count() ? 'disabled' : '' }}>
|
||||
<option value="">Seleccionar Carpeta</option>
|
||||
@foreach($folders as $folder)
|
||||
<option value="{{ $folder->id }}">{{ $folder->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Selector de Usuario/Grupo --}}
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center space-x-4 mb-4">
|
||||
<button @class([
|
||||
'px-4 py-2 rounded-lg font-medium',
|
||||
'bg-blue-600 text-white' => $assignTo === 'user',
|
||||
'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300' => $assignTo !== 'user'
|
||||
]) wire:click="setAssignTo('user')">
|
||||
Usuario
|
||||
</button>
|
||||
<button @class([
|
||||
'px-4 py-2 rounded-lg font-medium',
|
||||
'bg-blue-600 text-white' => $assignTo === 'group',
|
||||
'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300' => $assignTo !== 'group'
|
||||
]) wire:click="setAssignTo('group')">
|
||||
Grupo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@if($assignTo === 'user')
|
||||
<livewire:user-search :key="'user-search-'.$selectedProject"/>
|
||||
@else
|
||||
<livewire:group-search :key="'group-search-'.$selectedProject"/>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Permisos --}}
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Permisos Disponibles</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($permissions as $permission)
|
||||
<label @class([
|
||||
'flex items-center p-4 border rounded-lg cursor-pointer transition-colors',
|
||||
'border-blue-200 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-800' => in_array($permission, $selectedPermissions),
|
||||
'border-gray-200 hover:border-blue-200 dark:border-gray-700 dark:hover:border-blue-800' => !in_array($permission, $selectedPermissions)
|
||||
])>
|
||||
<input type="checkbox"
|
||||
value="{{ $permission }}"
|
||||
wire:model.live="selectedPermissions"
|
||||
class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700">
|
||||
<span class="ml-3 text-sm text-gray-700 dark:text-gray-300">
|
||||
{{ __("permissions.$permission") }}
|
||||
</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Botones de Acción --}}
|
||||
<div class="mt-8 flex justify-end space-x-4">
|
||||
<button wire:click="savePermissions"
|
||||
@class([
|
||||
'px-6 py-2 rounded-lg font-medium',
|
||||
'bg-blue-600 hover:bg-blue-700 text-white' => $canSave,
|
||||
'bg-gray-400 cursor-not-allowed text-gray-100' => !$canSave
|
||||
])
|
||||
{{ !$canSave ? 'disabled' : '' }}>
|
||||
Guardar Permisos
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Listado de Permisos Actuales --}}
|
||||
<div class="mt-12 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
|
||||
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200 mb-4">Permisos Asignados</h3>
|
||||
|
||||
<livewire:permissions-list :resourceId="$selectedResourceId"/>
|
||||
</div>
|
||||
</div>
|
||||
56
resources/views/livewire/permissions-list.blade.php
Normal file
56
resources/views/livewire/permissions-list.blade.php
Normal file
@@ -0,0 +1,56 @@
|
||||
{{-- resources/views/livewire/permissions-list.blade.php --}}
|
||||
<div>
|
||||
<div class="space-y-6">
|
||||
{{-- Listado de Usuarios --}}
|
||||
@foreach($users as $user)
|
||||
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 dark:text-gray-200">{{ $user->name }}</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">{{ $user->email }}</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
@foreach($permissions as $type => $perms)
|
||||
@if($user->hasAnyPermission($perms))
|
||||
<span class="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">
|
||||
{{ __("permissions.$type") }}
|
||||
</span>
|
||||
@endif
|
||||
@endforeach
|
||||
<button
|
||||
wire:click="revokePermission('{{ $perms->first()->id }}', 'user', '{{ $user->id }}')"
|
||||
class="text-red-500 hover:text-red-700">
|
||||
<x-heroicon-o-trash class="w-5 h-5"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
{{-- Listado de Grupos --}}
|
||||
@foreach($groups as $group)
|
||||
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 dark:text-gray-200">{{ $group->name }}</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">{{ $group->description }}</p>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
@foreach($permissions as $type => $perms)
|
||||
@if($group->hasAnyPermission($perms))
|
||||
<span class="px-2 py-1 text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">
|
||||
{{ __("permissions.$type") }}
|
||||
</span>
|
||||
@endif
|
||||
@endforeach
|
||||
<button
|
||||
wire:click="revokePermission('{{ $perms->first()->id }}', 'group', '{{ $group->id }}')"
|
||||
class="text-red-500 hover:text-red-700">
|
||||
<x-heroicon-o-trash class="w-5 h-5"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,49 +1,77 @@
|
||||
<div>
|
||||
<!-- Header del Proyecto -->
|
||||
<div class="flex items-center justify-between pb-6 border-b">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold">{{ $project->name }}</h1>
|
||||
<div class="flex items-center mt-2 space-x-4">
|
||||
<span class="px-2 py-1 text-sm rounded-full bg-blue-100 text-blue-800">
|
||||
{{ ucfirst($project->status) }}
|
||||
</span>
|
||||
<span class="text-sm text-gray-500">
|
||||
{{ $project->created_at->format('d/m/Y') }}
|
||||
</span>
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
<!-- Layout Principal -->
|
||||
<div class="grid grid-cols-1 gap-6 mt-6 lg:grid-cols-4">
|
||||
<!-- 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">
|
||||
<h3 class="font-medium">Estructura de Carpetas</h3>
|
||||
<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($rootFolders as $folder)
|
||||
<x-folder-item
|
||||
:folder="$folder"
|
||||
:selectedFolderId="$selectedFolderId"
|
||||
:expandedFolders="$expandedFolders"
|
||||
wire:key="folder-{{ $folder->id }}"
|
||||
/>
|
||||
@foreach($project->rootFolders as $folder)
|
||||
<x-folder-item
|
||||
:folder="$folder"
|
||||
:currentFolder="$currentFolder"
|
||||
:expandedFolders="$expandedFolders"
|
||||
wire:key="folder-{{ $folder->id }}"
|
||||
/>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Listado de Documentos -->
|
||||
<!-- Documentos y Subida de Archivos -->
|
||||
<div class="col-span-3">
|
||||
<div class="bg-white rounded-lg shadow">
|
||||
<div class="p-4 border-b">
|
||||
<h3 class="font-medium">Documentos</h3>
|
||||
<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">
|
||||
@@ -51,12 +79,12 @@
|
||||
<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">Tamaño</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">
|
||||
@foreach($this->documents as $document)
|
||||
@forelse($this->documents as $document)
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
@@ -65,16 +93,22 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{{ $document->versions->count() }}
|
||||
{{ $document->versions_count }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{{ $document->human_readable_size }}
|
||||
{{ $document->updated_at->diffForHumans() }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<x-status-badge :status="$document->status" />
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
@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>
|
||||
|
||||
38
resources/views/livewire/toolbar.blade.php
Normal file
38
resources/views/livewire/toolbar.blade.php
Normal file
@@ -0,0 +1,38 @@
|
||||
<!-- resources/views/livewire/toolbar.blade.php -->
|
||||
@props(['project', 'currentFolder'=> null]) <!-- Definir props -->
|
||||
|
||||
<div class="flex items-center justify-between space-x-4 border-t pt-4 mt-4">
|
||||
<!-- Grupo izquierdo: Acciones básicas -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<!-- Crear nueva carpeta -->
|
||||
@if($currentFolder)
|
||||
<button wire:click="$emit('showCreateFolderModal', {{ $currentFolder->id }})"
|
||||
class="px-3 py-2 text-sm bg-white border rounded-lg hover:bg-gray-50">
|
||||
<x-icons icon="folder-add" class="w-5 h-5 mr-1 text-blue-600" />
|
||||
Nueva Carpeta
|
||||
</button>
|
||||
@endif
|
||||
|
||||
<!-- Input de archivo con folder actual -->
|
||||
|
||||
|
||||
<!-- Subir archivos -->
|
||||
<input type="file" id="file-input" wire:model="files" data-folder-id="{{ $currentFolder?->id }}" multiple class="hidden">
|
||||
|
||||
<button wire:click="$emit('showUploadModal')"
|
||||
class="px-3 py-2 text-sm bg-white border rounded-lg hover:bg-gray-50">
|
||||
<x-icons icon="upload" class="w-5 h-5 mr-1 text-green-600" />
|
||||
Subir Archivos
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Grupo derecho: Acciones contextuales -->
|
||||
<div class="flex items-center space-x-2">
|
||||
@if($currentFolder)
|
||||
<span class="text-sm text-gray-500">
|
||||
<x-icons icon="folder" class="w-4 h-4 inline mr-1 text-yellow-500" />
|
||||
{{ $currentFolder->name }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
21
resources/views/livewire/user-search.blade.php
Normal file
21
resources/views/livewire/user-search.blade.php
Normal file
@@ -0,0 +1,21 @@
|
||||
{{-- resources/views/livewire/user-search.blade.php --}}
|
||||
<div>
|
||||
<x-input type="search"
|
||||
wire:model.live="search"
|
||||
placeholder="Buscar usuarios..."
|
||||
class="w-full" />
|
||||
|
||||
<div class="mt-2 space-y-2">
|
||||
@foreach($users as $user)
|
||||
<div wire:click="selectUser({{ $user->id }})"
|
||||
@class([
|
||||
'p-3 cursor-pointer rounded-lg transition-colors',
|
||||
'bg-blue-100 dark:bg-blue-900' => $selectedUser === $user->id,
|
||||
'hover:bg-gray-100 dark:hover:bg-gray-700' => $selectedUser !== $user->id
|
||||
])>
|
||||
<p class="text-gray-800 dark:text-gray-200">{{ $user->name }}</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">{{ $user->email }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,303 +1,342 @@
|
||||
<!-- 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 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>
|
||||
|
||||
{{ __('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="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
||||
<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
|
||||
<!-- Sección de Información Básica -->
|
||||
<div class="grid gap-6 mb-8 md:grid-cols-2">
|
||||
<!-- Columna Izquierda -->
|
||||
<div>
|
||||
@csrf
|
||||
|
||||
<table class="w-full mb-8">
|
||||
<tbody>
|
||||
<!-- 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>
|
||||
|
||||
<!-- NombDescripció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>
|
||||
|
||||
<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 -->
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- Editor -->
|
||||
<div id="rich-editor">{!! old('description') !!}</div>
|
||||
</div>
|
||||
@error('description')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
@error('description')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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 -->
|
||||
<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">
|
||||
<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>
|
||||
</div>
|
||||
@error('project_image')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Columna Derecha -->
|
||||
<div>
|
||||
@error('project_image')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- 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>
|
||||
<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
|
||||
</select>
|
||||
</x-select>
|
||||
@error('country')
|
||||
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<x-label for="categories" value="__('Categorías')" />
|
||||
<x-multiselect
|
||||
name="categories[]"
|
||||
:options="$categories"
|
||||
:selected="old('categories', [])"
|
||||
placeholder="Seleccione categorías"
|
||||
/>
|
||||
</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>
|
||||
</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 -->
|
||||
<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>
|
||||
<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 -->
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
</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') }}"
|
||||
@@ -318,19 +357,31 @@
|
||||
@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" />
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||||
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 -->
|
||||
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
|
||||
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
|
||||
crossorigin=""></script>
|
||||
<script>
|
||||
// Editor Quill
|
||||
onst toolbarOptions = [
|
||||
const toolbarOptions = [
|
||||
['bold', 'italic', 'underline', 'strike'], // toggled buttons
|
||||
['blockquote', 'code-block'],
|
||||
['link', 'image', 'video', 'formula'],
|
||||
|
||||
[{ 'header': 1 }, { 'header': 2 }], // custom button values
|
||||
[{ '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
|
||||
@@ -382,5 +433,41 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
let map;
|
||||
let marker;
|
||||
|
||||
function initMap() {
|
||||
// Coordenadas iniciales (usar valores por defecto o geolocalización)
|
||||
const defaultLat = {{ old('latitude', 40.4168) }};
|
||||
const defaultLng = {{ old('longitude', -3.7038) }};
|
||||
|
||||
map = L.map('map').setView([defaultLat, defaultLng], 13);
|
||||
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(map);
|
||||
|
||||
// Marcador inicial si hay valores
|
||||
if(defaultLat && defaultLng) {
|
||||
marker = L.marker([defaultLat, defaultLng]).addTo(map);
|
||||
}
|
||||
|
||||
// Manejar clic en el mapa
|
||||
map.on('click', function(e) {
|
||||
if(marker) map.removeLayer(marker);
|
||||
marker = L.marker(e.latlng).addTo(map);
|
||||
document.getElementById('latitude').:value = e.latlng.lat.toFixed(6);
|
||||
document.getElementById('longitude').:value = e.latlng.lng.toFixed(6);
|
||||
});
|
||||
}
|
||||
|
||||
// Inicializar después de cargar Leaflet
|
||||
window.onload = function() {
|
||||
initMap();
|
||||
};
|
||||
</script>
|
||||
|
||||
@endpush
|
||||
</x-layouts.app>
|
||||
386
resources/views/projects/create.blade.php.back
Normal file
386
resources/views/projects/create.blade.php.back
Normal file
@@ -0,0 +1,386 @@
|
||||
<!-- 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>
|
||||
43
resources/views/roles/create.blade.php
Normal file
43
resources/views/roles/create.blade.php
Normal file
@@ -0,0 +1,43 @@
|
||||
{{-- resources/views/roles/create.blade.php --}}
|
||||
<x-layouts.app :title="__('Create Roles')">
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<h1 class="text-2xl font-semibold mb-6">Crear Nuevo Rol</h1>
|
||||
|
||||
<form action="{{ route('roles.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Nombre</label>
|
||||
<input type="text" name="name"
|
||||
class="form-input w-full @error('name') border-red-500 @enderror"
|
||||
required>
|
||||
@error('name')
|
||||
<p class="text-red-500 text-xs mt-1">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-gray-700 text-sm font-bold mb-2">Permisos</label>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($permissions as $permission)
|
||||
<label class="flex items-center space-x-2">
|
||||
<input type="checkbox" name="permissions[]"
|
||||
value="{{ $permission->name }}"
|
||||
class="form-checkbox">
|
||||
<span class="text-sm text-gray-700">{{ $permission->name }}</span>
|
||||
</label>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button type="submit" class="btn-primary">
|
||||
Crear Rol
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
|
||||
82
resources/views/roles/index.blade.php
Normal file
82
resources/views/roles/index.blade.php
Normal file
@@ -0,0 +1,82 @@
|
||||
|
||||
<x-layouts.app :title="__('Roles')">
|
||||
<div class="container mx-auto px-4 py-8">
|
||||
<div class="bg-white rounded-lg shadow-md p-6">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<h1 class="text-2xl font-semibold text-gray-800">Gestión de Roles</h1>
|
||||
@can('create roles')
|
||||
<a href="{{ route('roles.create') }}" class="btn-primary">
|
||||
|
||||
Nuevo Rol
|
||||
</a>
|
||||
@endcan
|
||||
</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-left text-xs font-medium text-gray-500 uppercase">Nombre</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Permisos</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Usuarios</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@forelse($roles as $role)
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="text-sm font-medium text-gray-900">{{ $role->name }}</div>
|
||||
<div class="text-sm text-gray-500">{{ $role->description }}</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
@foreach($role->permissions->take(3) as $permission)
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||||
{{ $permission->name }}
|
||||
</span>
|
||||
@endforeach
|
||||
@if($role->permissions->count() > 3)
|
||||
<span class="text-xs text-gray-500">+{{ $role->permissions->count() - 3 }} más</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $role->users_count }} usuarios
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
||||
@can('edit roles')
|
||||
<a href="{{ route('roles.edit', $role) }}" class="text-indigo-600 hover:text-indigo-900 mr-4">
|
||||
Editar
|
||||
</a>
|
||||
@endcan
|
||||
|
||||
@can('delete roles')
|
||||
<form action="{{ route('roles.destroy', $role) }}" method="POST" class="inline">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="text-red-600 hover:text-red-900"
|
||||
onclick="return confirm('¿Estás seguro de eliminar este rol?')">
|
||||
Eliminar
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="4" class="px-6 py-4 text-center text-gray-500">
|
||||
No hay roles registrados
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if($roles->hasPages())
|
||||
<div class="mt-6">
|
||||
{{ $roles->links() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
21
resources/views/user-search.blade.php
Normal file
21
resources/views/user-search.blade.php
Normal file
@@ -0,0 +1,21 @@
|
||||
{{-- resources/views/livewire/user-search.blade.php --}}
|
||||
<div>
|
||||
<x-input type="search"
|
||||
wire:model.live="search"
|
||||
placeholder="Buscar usuarios..."
|
||||
class="w-full" />
|
||||
|
||||
<div class="mt-2 space-y-2">
|
||||
@foreach($users as $user)
|
||||
<div wire:click="selectUser({{ $user->id }})"
|
||||
@class([
|
||||
'p-3 cursor-pointer rounded-lg transition-colors',
|
||||
'bg-blue-100 dark:bg-blue-900' => $selectedUser === $user->id,
|
||||
'hover:bg-gray-100 dark:hover:bg-gray-700' => $selectedUser !== $user->id
|
||||
])>
|
||||
<p class="text-gray-800 dark:text-gray-200">{{ $user->name }}</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">{{ $user->email }}</p>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user