up
This commit is contained in:
Lizandro Guarnizo
@@ -25,7 +25,7 @@
|
||||
<th class="py-2 px-3">Email</th>
|
||||
<th class="py-2 px-3">Teléfono</th>
|
||||
<th class="py-2 px-3">Estado</th>
|
||||
<th class="py-2 px-3 w-24"></th>
|
||||
<th class="py-2 px-3 w-32"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-gray-600">
|
||||
@@ -40,10 +40,13 @@
|
||||
</td>
|
||||
<td class="py-2 px-3">
|
||||
<div class="flex gap-2">
|
||||
<button @click="openEdit(d)" class="text-gray-400 hover:text-[#8eb02f]">
|
||||
<button @click="openDocs(d)" title="Documentos" class="text-gray-400 hover:text-blue-500">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13"/></svg>
|
||||
</button>
|
||||
<button @click="openEdit(d)" title="Editar" class="text-gray-400 hover:text-[#8eb02f]">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10"/></svg>
|
||||
</button>
|
||||
<button @click="openDelete(d)" class="text-gray-400 hover:text-red-500">
|
||||
<button @click="openDelete(d)" title="Eliminar" class="text-gray-400 hover:text-red-500">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -129,6 +132,120 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ─── Modal Documentos ──────────────────────────────────────────────── -->
|
||||
<div x-show="docsModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
|
||||
<div class="bg-white rounded-lg shadow-xl w-full max-w-2xl mx-4 flex flex-col max-h-[90vh]" @click.stop>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-6 py-4 border-b">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold">Documentos</h2>
|
||||
<p class="text-xs text-gray-400" x-text="'Cliente: ' + (docsCliente?.nombre || '')"></p>
|
||||
</div>
|
||||
<button @click="docsModal=false" class="text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Cuerpo scrollable -->
|
||||
<div class="overflow-y-auto flex-1 px-6 py-4 space-y-4">
|
||||
|
||||
<!-- Formulario de subida -->
|
||||
<div class="border rounded-lg p-4 bg-gray-50">
|
||||
<p class="text-sm font-medium text-gray-700 mb-3">Subir documentos</p>
|
||||
|
||||
<!-- Fecha de expedición compartida -->
|
||||
<div class="mb-3">
|
||||
<label class="text-xs font-medium text-gray-600">Fecha de expedición (opcional, aplica a todos los archivos)</label>
|
||||
<input type="date" x-model="docsUpload.fechaExpedicion"
|
||||
class="mt-1 w-full border rounded px-3 py-2 text-sm" />
|
||||
</div>
|
||||
|
||||
<!-- Zona de arrastre / selección de archivos -->
|
||||
<div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center cursor-pointer hover:border-[#8eb02f] transition-colors"
|
||||
@click="$refs.fileInput.click()"
|
||||
@dragover.prevent
|
||||
@drop.prevent="handleDrop($event)">
|
||||
<svg class="w-8 h-8 mx-auto text-gray-400 mb-2" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/></svg>
|
||||
<p class="text-sm text-gray-500">Haz clic o arrastra archivos aquí</p>
|
||||
<p class="text-xs text-gray-400 mt-1">PDF, Word, Excel, imágenes, ZIP — máx. 20 MB c/u</p>
|
||||
<input type="file" x-ref="fileInput" multiple class="hidden"
|
||||
@change="addFiles($event.target.files)" />
|
||||
</div>
|
||||
|
||||
<!-- Lista de archivos pendientes -->
|
||||
<template x-if="docsUpload.files.length > 0">
|
||||
<div class="mt-3 space-y-2">
|
||||
<template x-for="(f, i) in docsUpload.files" :key="i">
|
||||
<div class="flex items-center gap-3 bg-white border rounded px-3 py-2 text-sm">
|
||||
<svg class="w-4 h-4 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
|
||||
<span class="flex-1 truncate" x-text="f.name"></span>
|
||||
<span class="text-gray-400 text-xs" x-text="formatSize(f.size)"></span>
|
||||
<button @click="removeFile(i)" class="text-red-400 hover:text-red-600">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<button @click="uploadDocs()" :disabled="docsUploading"
|
||||
class="w-full mt-2 bg-[#8eb02f] text-white py-2 rounded text-sm font-medium disabled:opacity-50">
|
||||
<span x-text="docsUploading ? 'Subiendo…' : 'Subir ' + docsUpload.files.length + ' archivo(s)'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Lista de documentos guardados -->
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-700 mb-2">Documentos guardados
|
||||
<span class="text-gray-400 font-normal" x-text="'(' + documentos.length + ')'"></span>
|
||||
</p>
|
||||
|
||||
<div x-show="docsLoading" class="text-center text-gray-400 text-sm py-4">Cargando…</div>
|
||||
|
||||
<div x-show="!docsLoading && documentos.length === 0" class="text-center text-gray-400 text-sm py-4">
|
||||
Sin documentos
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<template x-for="doc in documentos" :key="doc.ID">
|
||||
<div class="flex items-center gap-3 border rounded px-3 py-2 text-sm hover:bg-gray-50">
|
||||
<svg class="w-4 h-4 text-blue-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"/></svg>
|
||||
<div class="flex-1 min-w-0">
|
||||
<p class="font-medium truncate" x-text="doc.nombre || doc.original_name"></p>
|
||||
<p class="text-xs text-gray-400">
|
||||
<span x-text="formatSize(doc.tamanio)"></span>
|
||||
<template x-if="doc.fecha_expedicion">
|
||||
<span> · Exp: <span x-text="fmtDate(doc.fecha_expedicion)"></span></span>
|
||||
</template>
|
||||
</p>
|
||||
</div>
|
||||
<a :href="`/app/api/clientes/${docsCliente.ID}/documentos/${doc.ID}/download`"
|
||||
target="_blank"
|
||||
class="text-gray-400 hover:text-blue-500" title="Descargar">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg>
|
||||
</a>
|
||||
<button @click="confirmDeleteDoc(doc)" class="text-gray-400 hover:text-red-500" title="Eliminar">
|
||||
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"/></svg>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm eliminar documento -->
|
||||
<div x-show="deleteDocModal" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center bg-black/50">
|
||||
<div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-sm mx-4 text-center" @click.stop>
|
||||
<p class="font-semibold mb-1">¿Eliminar documento?</p>
|
||||
<p class="text-sm text-gray-400 mb-5" x-text="selectedDoc?.nombre || selectedDoc?.original_name"></p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<button @click="deleteDocModal=false" class="px-4 py-2 border rounded text-sm">Cancelar</button>
|
||||
<button @click="deleteDoc()" class="px-4 py-2 bg-red-500 text-white rounded text-sm">Eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-show="toast.show" x-cloak x-transition
|
||||
class="fixed bottom-4 right-4 z-[100] px-4 py-3 rounded shadow-lg text-sm text-white"
|
||||
:class="toast.type==='error' ? 'bg-red-500' : 'bg-[#8eb02f]'"
|
||||
@@ -146,6 +263,16 @@ document.addEventListener('alpine:init', () => {
|
||||
form: { nombre:'', empresa:'', email:'', email_cc:'', telefono:'', documento:'', notas:'', activo:true },
|
||||
toast: { show: false, msg: '', type: 'ok' },
|
||||
|
||||
// ── Documentos ──────────────────────────────────────────────────────
|
||||
docsModal: false,
|
||||
docsCliente: null,
|
||||
documentos: [],
|
||||
docsLoading: false,
|
||||
docsUploading: false,
|
||||
docsUpload: { fechaExpedicion: '', files: [] },
|
||||
deleteDocModal: false,
|
||||
selectedDoc: null,
|
||||
|
||||
async init() { await this.loadData(); },
|
||||
|
||||
async loadData() {
|
||||
@@ -201,7 +328,96 @@ document.addEventListener('alpine:init', () => {
|
||||
showToast(msg, type='ok') {
|
||||
this.toast = { show: true, msg, type };
|
||||
setTimeout(() => this.toast.show = false, 3000);
|
||||
}
|
||||
},
|
||||
|
||||
// ── Documentos: métodos ─────────────────────────────────────────────
|
||||
async openDocs(d) {
|
||||
this.docsCliente = d;
|
||||
this.docsModal = true;
|
||||
this.docsUpload = { fechaExpedicion: '', files: [] };
|
||||
await this.loadDocs();
|
||||
},
|
||||
|
||||
async loadDocs() {
|
||||
this.docsLoading = true;
|
||||
try {
|
||||
const { data } = await axios.get(`/app/api/clientes/${this.docsCliente.ID}/documentos`);
|
||||
this.documentos = data || [];
|
||||
} catch(e) {
|
||||
this.showToast('Error cargando documentos', 'error');
|
||||
}
|
||||
this.docsLoading = false;
|
||||
},
|
||||
|
||||
addFiles(fileList) {
|
||||
for (const f of fileList) {
|
||||
if (!this.docsUpload.files.find(x => x.name === f.name && x.size === f.size)) {
|
||||
this.docsUpload.files.push(f);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
handleDrop(event) {
|
||||
this.addFiles(event.dataTransfer.files);
|
||||
},
|
||||
|
||||
removeFile(i) {
|
||||
this.docsUpload.files.splice(i, 1);
|
||||
},
|
||||
|
||||
async uploadDocs() {
|
||||
if (this.docsUpload.files.length === 0) return;
|
||||
this.docsUploading = true;
|
||||
try {
|
||||
const fd = new FormData();
|
||||
for (const f of this.docsUpload.files) {
|
||||
fd.append('archivos', f);
|
||||
}
|
||||
if (this.docsUpload.fechaExpedicion) {
|
||||
fd.append('fecha_expedicion', this.docsUpload.fechaExpedicion);
|
||||
}
|
||||
await axios.post(`/app/api/clientes/${this.docsCliente.ID}/documentos`, fd, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
});
|
||||
this.showToast('Archivos subidos correctamente');
|
||||
this.docsUpload.files = [];
|
||||
this.docsUpload.fechaExpedicion = '';
|
||||
this.$refs.fileInput && (this.$refs.fileInput.value = '');
|
||||
await this.loadDocs();
|
||||
} catch(e) {
|
||||
this.showToast(e.response?.data?.error || 'Error al subir', 'error');
|
||||
}
|
||||
this.docsUploading = false;
|
||||
},
|
||||
|
||||
confirmDeleteDoc(doc) {
|
||||
this.selectedDoc = doc;
|
||||
this.deleteDocModal = true;
|
||||
},
|
||||
|
||||
async deleteDoc() {
|
||||
try {
|
||||
await axios.delete(`/app/api/clientes/${this.docsCliente.ID}/documentos/${this.selectedDoc.ID}`);
|
||||
this.showToast('Documento eliminado');
|
||||
this.deleteDocModal = false;
|
||||
this.selectedDoc = null;
|
||||
await this.loadDocs();
|
||||
} catch(e) {
|
||||
this.showToast(e.response?.data?.error || 'Error al eliminar', 'error');
|
||||
}
|
||||
},
|
||||
|
||||
formatSize(bytes) {
|
||||
if (!bytes) return '0 B';
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024*1024) return (bytes/1024).toFixed(1) + ' KB';
|
||||
return (bytes/(1024*1024)).toFixed(1) + ' MB';
|
||||
},
|
||||
|
||||
fmtDate(iso) {
|
||||
if (!iso) return '';
|
||||
return iso.substring(0, 10);
|
||||
},
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user