javier/Nexora
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new functions
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Javier Braña
2025-12-14 23:59:32 +01:00
parent e42ce8b092
commit 047e155238
11 changed files with 1324 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

294
resources/views/project-settings/index.blade.php
View File

@@ -69,11 +69,6 @@
<div id="statuses">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-medium text-gray-900">Estados de Documentos</h3>
<button type="button"
onclick="openStatusModal()"
class="btn btn-primary">
<x-icons icon="plus" class="w-4 h-4 mr-1" /> Nuevo Estado
</button>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden">
@@ -82,296 +77,9 @@
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal para crear/editar estado -->
<div id="status-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50" style="display: none;">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md">
<div class="border-b px-6 py-4">
<h3 class="text-lg font-medium text-gray-900" id="modal-title">Nuevo Estado</h3>
</div>
<form id="status-form" method="POST" class="p-6">
@csrf
<div id="method-field"></div>
<div class="space-y-4">
<!-- Nombre -->
<div>
<label for="modal-name" class="block text-sm font-medium text-gray-700">
Nombre del Estado *
</label>
<input type="text"
id="modal-name"
name="name"
required
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div>
<!-- Color -->
<div class="grid grid-cols-2 gap-4">
<div>
<label for="modal-color" class="block text-sm font-medium text-gray-700">
Color de fondo
</label>
<div class="mt-1 flex items-center">
<input type="color"
id="modal-color"
name="color"
value="#6b7280"
class="h-10 w-16 rounded border">
<input type="text"
id="modal-color-text"
name="color_text"
value="#6b7280"
class="ml-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div>
</div>
<div>
<label for="modal-text-color" class="block text-sm font-medium text-gray-700">
Color del texto
</label>
<div class="mt-1 flex items-center">
<input type="color"
id="modal-text-color"
name="text_color"
value="#ffffff"
class="h-10 w-16 rounded border">
<input type="text"
id="modal-text-color-text"
name="text_color_text"
value="#ffffff"
class="ml-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
</div>
</div>
</div>
<!-- Descripción -->
<div>
<label for="modal-description" class="block text-sm font-medium text-gray-700">
Descripción
</label>
<textarea id="modal-description"
name="description"
rows="3"
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
</div>
<!-- Permisos -->
<div class="grid grid-cols-2 gap-4">
<label class="flex items-center">
<input type="checkbox"
name="allow_upload"
value="1"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
<span class="ml-2 text-sm text-gray-700">Permitir subida</span>
</label>
<label class="flex items-center">
<input type="checkbox"
name="allow_edit"
value="1"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
<span class="ml-2 text-sm text-gray-700">Permitir edición</span>
</label>
<label class="flex items-center">
<input type="checkbox"
name="allow_delete"
value="1"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-indigo-200 focus:ring-opacity-50">
<span class="ml-2 text-sm text-gray-700">Permitir eliminación</span>
</label>
<label class="flex items-center">
<input type="checkbox"
name="requires_approval"
value="1"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
<span class="ml-2 text-sm text-gray-700">Requiere aprobación</span>
</label>
</div>
<!-- Estado por defecto -->
<div>
<label class="flex items-center">
<input type="checkbox"
name="is_default"
value="1"
class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
<span class="ml-2 text-sm text-gray-700">Estado por defecto para nuevos documentos</span>
</label>
<p class="mt-1 text-xs text-gray-500">
Solo puede haber un estado por defecto
</p>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button type="button" onclick="closeStatusModal()" class="btn btn-secondary">
Cancelar
</button>
<button type="submit" class="btn btn-primary">
Guardar Estado
</button>
</div>
</form>
</div>
</div>
<!-- Modal de confirmación para eliminar -->
<div id="delete-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50" style="display: none;">
<div class="bg-white rounded-lg shadow-xl w-full max-w-md">
<div class="border-b px-6 py-4">
<h3 class="text-lg font-medium text-gray-900">Confirmar eliminación</h3>
</div>
<div class="p-6">
<p class="text-gray-700" id="delete-message">¿Estás seguro de que deseas eliminar este estado?</p>
<form id="delete-form" method="POST" class="mt-6">
@csrf
@method('DELETE')
<div class="flex justify-end space-x-3">
<button type="button" onclick="closeDeleteModal()" class="btn btn-secondary">
Cancelar
</button>
<button type="submit" class="btn btn-danger">
Eliminar Estado
</button>
</div>
</form>
</div>
</div>
</div>
@push('scripts')
<script>
// Variables globales
let currentStatusId = null;
const statusModal = document.getElementById('status-modal');
const deleteModal = document.getElementById('delete-modal');
// Funciones para el modal de estados
function openStatusModal(status = null) {
const form = document.getElementById('status-form');
const title = document.getElementById('modal-title');
const methodField = document.getElementById('method-field');
if (status) {
// Modo edición
title.textContent = 'Editar Estado';
form.action = `/projects/{{ $project->id }}/settings/statuses/${status.id}`;
methodField.innerHTML = '<input type="hidden" name="_method" value="PUT">';
// Llenar los campos con los datos del estado
document.getElementById('modal-name').value = status.name;
document.getElementById('modal-color').value = status.color;
document.getElementById('modal-color-text').value = status.color;
document.getElementById('modal-text-color').value = status.text_color;
document.getElementById('modal-text-color-text').value = status.text_color;
document.getElementById('modal-description').value = status.description || '';
// Checkboxes
document.querySelector('input[name="allow_upload"]').checked = status.allow_upload;
document.querySelector('input[name="allow_edit"]').checked = status.allow_edit;
document.querySelector('input[name="allow_delete"]').checked = status.allow_delete;
document.querySelector('input[name="requires_approval"]').checked = status.requires_approval;
document.querySelector('input[name="is_default"]').checked = status.is_default;
currentStatusId = status.id;
} else {
// Modo creación
title.textContent = 'Nuevo Estado';
form.action = `/projects/{{ $project->id }}/settings/statuses`;
methodField.innerHTML = '';
// Resetear campos
form.reset();
document.getElementById('modal-color').value = '#6b7280';
document.getElementById('modal-color-text').value = '#6b7280';
document.getElementById('modal-text-color').value = '#ffffff';
document.getElementById('modal-text-color-text').value = '#ffffff';
currentStatusId = null;
}
statusModal.style.display = 'flex';
}
function closeStatusModal() {
statusModal.style.display = 'none';
}
// Funciones para el modal de eliminación
function openDeleteModal(status) {
const message = document.getElementById('delete-message');
const form = document.getElementById('delete-form');
message.textContent = `¿Estás seguro de que deseas eliminar el estado "${status.name}"?`;
form.action = `/projects/{{ $project->id }}/settings/statuses/${status.id}`;
currentStatusId = status.id;
deleteModal.style.display = 'flex';
}
function closeDeleteModal() {
deleteModal.style.display = 'none';
}
// Sincronizar inputs de color
document.getElementById('modal-color').addEventListener('input', function(e) {
document.getElementById('modal-color-text').value = e.target.value;
});
document.getElementById('modal-color-text').addEventListener('input', function(e) {
document.getElementById('modal-color').value = e.target.value;
});
document.getElementById('modal-text-color').addEventListener('input', function(e) {
document.getElementById('modal-text-color-text').value = e.target.value;
});
document.getElementById('modal-text-color-text').addEventListener('input', function(e) {
document.getElementById('modal-text-color').value = e.target.value;
});
// Cerrar modales al hacer clic fuera
window.addEventListener('click', function(e) {
if (e.target === statusModal) {
closeStatusModal();
}
if (e.target === deleteModal) {
closeDeleteModal();
}
});
// Funcionalidad de drag & drop para reordenar estados
new Sortable(document.getElementById('statuses-list'), {
animation: 150,
handle: '.drag-handle',
onEnd: function() {
// Obtener el nuevo orden
const order = Array.from(document.querySelectorAll('.status-item')).map(item => {
return item.dataset.statusId;
});
// Enviar el nuevo orden al servidor
fetch(`/projects/{{ $project->id }}/settings/statuses/reorder`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
body: JSON.stringify({ order: order })
});
}
});
</script>
@endpush
</x-layouts.app>