añadir funicionalidades de permisos y grupos
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user