lizandrogd/soft_usite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

documentacion

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-05-06 14:58:55 -05:00
parent 7f3fdfb4be
commit 6bf4b32a18
16 changed files with 2025 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/docs/categorias.html
+185
View File
@@ -0,0 +1,185 @@
<!-- Vista: Categorías Globales de Documentación -->
<div x-data="catApp()" x-init="init()" @keydown.escape="closeModal()" class="bg-white rounded-lg shadow">
<div class="container mx-auto p-6 w-full">
<h1 class="text-2xl font-bold mb-1">Categorías de Documentación</h1>
<p class="text-sm text-gray-500 mb-4">Categorías globales que aplican a todos los productos SaaS. Ejemplos: "Primeros Pasos", "API Reference", "Facturación".</p>
<div class="flex flex-col md:flex-row md:justify-between md:items-center gap-3 mb-4">
<div class="relative">
<input type="text" x-model="search" @input="load(1)" placeholder="Buscar..."
class="border border-gray-300 rounded w-full md:w-60 p-2 text-sm">
<div x-show="loading" class="absolute right-2 top-2">
<svg class="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>
</div>
</div>
<button @click="openAdd()" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">+ Nueva Categoría</button>
</div>
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead class="border-b border-gray-200 text-left font-semibold text-gray-600">
<tr>
<th class="py-2 px-4 border-b">Nombre</th>
<th class="py-2 px-4 border-b">Slug</th>
<th class="py-2 px-4 border-b">Descripción</th>
<th class="py-2 px-4 border-b w-16">Orden</th>
<th class="py-2 px-4 border-b w-20"></th>
</tr>
</thead>
<tbody class="text-gray-500">
<template x-if="items.length === 0">
<tr><td colspan="5" class="py-4 text-center text-gray-400">Sin categorías registradas</td></tr>
</template>
<template x-for="item in items" :key="item.ID">
<tr class="hover:bg-gray-50 border-b border-gray-100">
<td class="py-2 px-4 font-medium text-gray-800" x-text="item.nombre"></td>
<td class="py-2 px-4 font-mono text-xs text-gray-500" x-text="item.slug"></td>
<td class="py-2 px-4 text-xs text-gray-500" x-text="item.descripcion || '—'"></td>
<td class="py-2 px-4 text-xs text-center" x-text="item.orden"></td>
<td class="py-2 px-4 flex gap-2 justify-end">
<button @click="openEdit(item)" title="Editar" class="text-blue-500 hover:text-blue-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
</button>
<button @click="confirmDelete(item.ID)" title="Eliminar" class="text-red-400 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
</button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<!-- Paginación -->
<div class="flex items-center justify-between mt-4 text-sm">
<span class="text-gray-500">Total: <strong x-text="total"></strong></span>
<div class="flex gap-1">
<template x-for="p in totalPages" :key="p">
<button @click="load(p)"
:class="p === page ? 'bg-[#8eb02f] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
class="px-3 py-1 rounded text-xs" x-text="p"></button>
</template>
</div>
</div>
</div>
<!-- Modal Añadir / Editar -->
<div x-cloak x-show="showModal" x-transition
class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-40 justify-center items-center text-sm">
<div class="bg-white p-6 rounded shadow-lg w-full max-w-md overflow-y-auto max-h-[90vh]">
<h2 class="text-lg font-bold mb-4" x-text="editId ? 'Editar Categoría' : 'Nueva Categoría'"></h2>
<form @submit.prevent="submitForm()">
<div class="space-y-3">
<div>
<label class="block text-xs font-medium mb-1">Nombre *</label>
<input type="text" x-model="form.nombre" @input="autoSlug()" required
class="border border-gray-300 rounded w-full p-2 text-sm">
</div>
<div>
<label class="block text-xs font-medium mb-1">Slug * <span class="text-gray-400 font-normal">(URL)</span></label>
<input type="text" x-model="form.slug" required
class="border border-gray-300 rounded w-full p-2 text-sm font-mono">
</div>
<div>
<label class="block text-xs font-medium mb-1">Descripción</label>
<textarea x-model="form.descripcion" rows="2"
class="border border-gray-300 rounded w-full p-2 text-sm"></textarea>
</div>
<div>
<label class="block text-xs font-medium mb-1">Orden</label>
<input type="number" x-model.number="form.orden" min="0"
class="border border-gray-300 rounded w-full p-2 text-sm">
</div>
</div>
<div class="flex justify-between mt-5">
<button type="submit" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">Guardar</button>
<button type="button" @click="closeModal()" class="bg-gray-500 text-white px-4 py-2 rounded text-sm">Cancelar</button>
</div>
</form>
</div>
</div>
<!-- Modal Confirmar Eliminación -->
<div x-cloak x-show="showDeleteModal" x-transition
class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center text-sm">
<div class="bg-white p-6 rounded shadow-lg max-w-sm w-full">
<h2 class="text-lg font-bold mb-3">Confirmar eliminación</h2>
<p class="text-gray-600 mb-4">¿Eliminar esta categoría? Las páginas que la usen quedarán sin categoría.</p>
<div class="flex justify-end gap-2">
<button @click="doDelete()" class="bg-red-500 text-white px-4 py-2 rounded text-sm">Eliminar</button>
<button @click="showDeleteModal = false" class="bg-gray-500 text-white px-4 py-2 rounded text-sm">Cancelar</button>
</div>
</div>
</div>
</div>
<script>
function catApp() {
return {
items: [], total: 0, totalPages: 1, page: 1, search: '', loading: false,
showModal: false, showDeleteModal: false,
editId: null, deleteId: null,
form: { nombre: '', slug: '', descripcion: '', orden: 0 },
init() { this.load(1); },
load(p = 1) {
this.page = p; this.loading = true;
fetch(`/app/doc/loadcategorias?page=${p}&search=${encodeURIComponent(this.search)}`)
.then(r => r.json())
.then(d => {
this.items = d.items || [];
this.total = d.total;
this.totalPages = Array.from({ length: d.totalPages }, (_, i) => i + 1);
this.loading = false;
});
},
autoSlug() {
if (!this.editId) {
this.form.slug = this.form.nombre
.toLowerCase().trim()
.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
.replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
}
},
openAdd() {
this.editId = null;
this.form = { nombre: '', slug: '', descripcion: '', orden: 0 };
this.showModal = true;
},
openEdit(item) {
this.editId = item.ID;
this.form = { nombre: item.nombre, slug: item.slug, descripcion: item.descripcion, orden: item.orden };
this.showModal = true;
},
submitForm() {
const url = this.editId ? `/app/doc/categorias/${this.editId}` : '/app/doc/categorias';
const method = this.editId ? 'PUT' : 'POST';
fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.form) })
.then(r => r.json())
.then(d => { if (d.error) { alert(d.error); return; } this.closeModal(); this.load(this.page); });
},
confirmDelete(id) { this.deleteId = id; this.showDeleteModal = true; },
doDelete() {
fetch(`/app/doc/categorias/${this.deleteId}`, { method: 'DELETE' })
.then(r => r.json())
.then(() => { this.showDeleteModal = false; this.load(this.page); });
},
closeModal() { this.showModal = false; this.showDeleteModal = false; }
};
}
</script>
resources/views/docs/paginas.html
+364
View File
@@ -0,0 +1,364 @@
<!-- Vista: Gestión de Páginas de Documentación -->
<!-- EasyMDE para editor Markdown -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
<!-- Marked.js para preview de Markdown en la vista de lectura -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div x-data="paginasApp()" x-init="init()" @keydown.escape="closeModal()" class="bg-white rounded-lg shadow">
<div class="container mx-auto p-6 w-full">
<h1 class="text-2xl font-bold mb-1">Páginas de Documentación</h1>
<p class="text-sm text-gray-500 mb-4">Crea y gestiona el contenido de documentación para cada producto SaaS.</p>
<!-- Filtros -->
<div class="flex flex-col md:flex-row flex-wrap gap-3 mb-4">
<input type="text" x-model="search" @input="load(1)" placeholder="Buscar título..."
class="border border-gray-300 rounded p-2 text-sm w-full md:w-48">
<select x-model.number="filterSaas" @change="load(1)"
class="border border-gray-300 rounded p-2 text-sm w-full md:w-48">
<option :value="0">— Todos los SaaS —</option>
<template x-for="s in saasList" :key="s.ID">
<option :value="s.ID" x-text="s.nombre"></option>
</template>
</select>
<select x-model.number="filterCat" @change="load(1)"
class="border border-gray-300 rounded p-2 text-sm w-full md:w-48">
<option :value="0">— Todas las categorías —</option>
<template x-for="c in catList" :key="c.ID">
<option :value="c.ID" x-text="c.nombre"></option>
</template>
</select>
<div class="flex-1"></div>
<button @click="openAdd()" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm whitespace-nowrap">+ Nueva Página</button>
</div>
<!-- Tabla -->
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead class="border-b border-gray-200 text-left font-semibold text-gray-600">
<tr>
<th class="py-2 px-4 border-b">Título</th>
<th class="py-2 px-4 border-b">SaaS</th>
<th class="py-2 px-4 border-b">Categoría</th>
<th class="py-2 px-4 border-b">Tipo</th>
<th class="py-2 px-4 border-b">Visibilidad</th>
<th class="py-2 px-4 border-b w-20">Estado</th>
<th class="py-2 px-4 border-b w-20"></th>
</tr>
</thead>
<tbody class="text-gray-500">
<template x-if="items.length === 0">
<tr><td colspan="7" class="py-4 text-center text-gray-400">Sin páginas registradas</td></tr>
</template>
<template x-for="item in items" :key="item.ID">
<tr class="hover:bg-gray-50 border-b border-gray-100">
<td class="py-2 px-4">
<span class="font-medium text-gray-800" x-text="item.titulo"></span>
<span class="block font-mono text-xs text-gray-400" x-text="item.slug"></span>
</td>
<td class="py-2 px-4 text-xs" x-text="item.saas ? item.saas.nombre : '—'"></td>
<td class="py-2 px-4 text-xs" x-text="item.categoria ? item.categoria.nombre : '—'"></td>
<td class="py-2 px-4">
<span :class="item.tipo_contenido === 'markdown' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700'"
class="text-xs px-2 py-0.5 rounded-full" x-text="item.tipo_contenido"></span>
</td>
<td class="py-2 px-4">
<span :class="item.visibilidad === 'public' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'"
class="text-xs px-2 py-0.5 rounded-full" x-text="item.visibilidad"></span>
</td>
<td class="py-2 px-4">
<span :class="item.publicado ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'"
class="text-xs px-2 py-0.5 rounded-full" x-text="item.publicado ? 'Publicado' : 'Borrador'"></span>
</td>
<td class="py-2 px-4 flex gap-2 justify-end">
<button @click="openEdit(item.ID)" title="Editar" class="text-blue-500 hover:text-blue-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
</button>
<button @click="confirmDelete(item.ID)" title="Eliminar" class="text-red-400 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
</button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<!-- Paginación -->
<div class="flex items-center justify-between mt-4 text-sm">
<span class="text-gray-500">Total: <strong x-text="total"></strong></span>
<div class="flex gap-1">
<template x-for="p in totalPages" :key="p">
<button @click="load(p)"
:class="p === page ? 'bg-[#8eb02f] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
class="px-3 py-1 rounded text-xs" x-text="p"></button>
</template>
</div>
</div>
</div>
<!-- ─── Modal Editor (ocupa pantalla completa) ─────────────────────────── -->
<div x-cloak x-show="showModal" x-transition
class="fixed inset-0 bg-gray-900 bg-opacity-80 flex z-40 justify-center items-start pt-6 px-4 text-sm overflow-y-auto">
<div class="bg-white rounded shadow-lg w-full max-w-4xl mb-6">
<div class="flex items-center justify-between p-4 border-b">
<h2 class="text-lg font-bold" x-text="editId ? 'Editar Página' : 'Nueva Página'"></h2>
<button @click="closeModal()" class="text-gray-400 hover:text-gray-600 text-xl font-bold">✕</button>
</div>
<form @submit.prevent="submitForm()" class="p-4 space-y-4">
<!-- Fila 1: Título + Slug -->
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs font-medium mb-1">Título *</label>
<input type="text" x-model="form.titulo" @input="autoSlug()" required
class="border border-gray-300 rounded w-full p-2 text-sm">
</div>
<div>
<label class="block text-xs font-medium mb-1">Slug *</label>
<input type="text" x-model="form.slug" required
class="border border-gray-300 rounded w-full p-2 text-sm font-mono">
</div>
</div>
<!-- Fila 2: SaaS + Categoría -->
<div class="grid grid-cols-2 gap-3">
<div>
<label class="block text-xs font-medium mb-1">Producto SaaS *</label>
<select x-model.number="form.saas_id" required class="border border-gray-300 rounded w-full p-2 text-sm">
<option :value="0" disabled>Seleccionar SaaS...</option>
<template x-for="s in saasList" :key="s.ID">
<option :value="s.ID" x-text="s.nombre"></option>
</template>
</select>
</div>
<div>
<label class="block text-xs font-medium mb-1">Categoría *</label>
<select x-model.number="form.categoria_id" required class="border border-gray-300 rounded w-full p-2 text-sm">
<option :value="0" disabled>Seleccionar categoría...</option>
<template x-for="c in catList" :key="c.ID">
<option :value="c.ID" x-text="c.nombre"></option>
</template>
</select>
</div>
</div>
<!-- Fila 3: Tipo contenido + Visibilidad + Orden + Publicado -->
<div class="grid grid-cols-4 gap-3">
<div>
<label class="block text-xs font-medium mb-1">Tipo de Contenido</label>
<select x-model="form.tipo_contenido" @change="toggleEditor()"
class="border border-gray-300 rounded w-full p-2 text-sm">
<option value="markdown">Markdown</option>
<option value="html">HTML (builder)</option>
</select>
</div>
<div>
<label class="block text-xs font-medium mb-1">Visibilidad</label>
<select x-model="form.visibilidad" class="border border-gray-300 rounded w-full p-2 text-sm">
<option value="public">Pública</option>
<option value="private">Privada</option>
</select>
</div>
<div>
<label class="block text-xs font-medium mb-1">Orden</label>
<input type="number" x-model.number="form.orden" min="0"
class="border border-gray-300 rounded w-full p-2 text-sm">
</div>
<div class="flex items-center gap-2 mt-4">
<input type="checkbox" id="publicado" x-model="form.publicado" class="w-4 h-4">
<label for="publicado" class="text-xs font-medium">Publicado</label>
</div>
</div>
<!-- Roles (sólo cuando visibilidad = private) -->
<div x-show="form.visibilidad === 'private'" class="space-y-1">
<label class="block text-xs font-medium mb-1">Roles con acceso <span class="text-gray-400 font-normal">(dejar vacío = todos los usuarios logueados)</span></label>
<div class="flex flex-wrap gap-2">
<template x-for="r in rolesList" :key="r.ID">
<label class="flex items-center gap-1 bg-gray-100 px-2 py-1 rounded cursor-pointer text-xs">
<input type="checkbox" :value="r.ID"
:checked="form.rol_ids.includes(r.ID)"
@change="toggleRol(r.ID)">
<span x-text="r.name"></span>
</label>
</template>
</div>
</div>
<!-- Editor Markdown -->
<div x-show="form.tipo_contenido === 'markdown'">
<label class="block text-xs font-medium mb-1">Contenido (Markdown)</label>
<textarea id="mdEditor"></textarea>
</div>
<!-- Editor HTML -->
<div x-show="form.tipo_contenido === 'html'">
<label class="block text-xs font-medium mb-1">Contenido (HTML)</label>
<textarea x-model="form.contenido" rows="16"
class="border border-gray-300 rounded w-full p-2 text-sm font-mono"
placeholder="Escribe HTML aquí..."></textarea>
</div>
<div class="flex justify-between pt-2 border-t">
<button type="submit" class="bg-[#8eb02f] text-white px-5 py-2 rounded text-sm">Guardar</button>
<button type="button" @click="closeModal()" class="bg-gray-500 text-white px-4 py-2 rounded text-sm">Cancelar</button>
</div>
</form>
</div>
</div>
<!-- Modal Confirmar Eliminación -->
<div x-cloak x-show="showDeleteModal" x-transition
class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center text-sm">
<div class="bg-white p-6 rounded shadow-lg max-w-sm w-full">
<h2 class="text-lg font-bold mb-3">Confirmar eliminación</h2>
<p class="text-gray-600 mb-4">¿Eliminar esta página de documentación? Esta acción no se puede deshacer.</p>
<div class="flex justify-end gap-2">
<button @click="doDelete()" class="bg-red-500 text-white px-4 py-2 rounded text-sm">Eliminar</button>
<button @click="showDeleteModal = false" class="bg-gray-500 text-white px-4 py-2 rounded text-sm">Cancelar</button>
</div>
</div>
</div>
</div>
<script>
let mdEditorInstance = null;
function paginasApp() {
return {
items: [], saasList: [], catList: [], rolesList: [],
total: 0, totalPages: 1, page: 1,
search: '', filterSaas: 0, filterCat: 0,
loading: false,
showModal: false, showDeleteModal: false,
editId: null, deleteId: null,
form: {
titulo: '', slug: '', saas_id: 0, categoria_id: 0,
contenido: '', tipo_contenido: 'markdown', visibilidad: 'public',
orden: 0, publicado: false, rol_ids: []
},
init() { this.load(1); },
load(p = 1) {
this.page = p; this.loading = true;
const qs = new URLSearchParams({
page: p, search: this.search,
saas_id: this.filterSaas, categoria_id: this.filterCat
});
fetch(`/app/doc/loadpaginas?${qs}`)
.then(r => r.json())
.then(d => {
this.items = d.items || [];
this.saasList = d.saas || [];
this.catList = d.categorias || [];
this.rolesList = d.roles || [];
this.total = d.total;
this.totalPages = Array.from({ length: d.totalPages }, (_, i) => i + 1);
this.loading = false;
});
},
autoSlug() {
if (!this.editId) {
this.form.slug = this.form.titulo
.toLowerCase().trim()
.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
.replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
}
},
toggleRol(id) {
const idx = this.form.rol_ids.indexOf(id);
if (idx === -1) this.form.rol_ids.push(id);
else this.form.rol_ids.splice(idx, 1);
},
openAdd() {
this.editId = null;
this.form = {
titulo: '', slug: '', saas_id: 0, categoria_id: 0,
contenido: '', tipo_contenido: 'markdown', visibilidad: 'public',
orden: 0, publicado: false, rol_ids: []
};
this.showModal = true;
this.$nextTick(() => this.initMde());
},
openEdit(id) {
fetch(`/app/doc/paginas/${id}`)
.then(r => r.json())
.then(item => {
this.editId = item.ID;
this.form = {
titulo: item.titulo, slug: item.slug,
saas_id: item.saas_id, categoria_id: item.categoria_id,
contenido: item.contenido, tipo_contenido: item.tipo_contenido,
visibilidad: item.visibilidad, orden: item.orden,
publicado: item.publicado,
rol_ids: (item.roles || []).map(r => r.ID)
};
this.showModal = true;
this.$nextTick(() => this.initMde(item.contenido));
});
},
initMde(val = '') {
if (mdEditorInstance) { mdEditorInstance.toTextArea(); mdEditorInstance = null; }
if (this.form.tipo_contenido !== 'markdown') return;
const ta = document.getElementById('mdEditor');
if (!ta) return;
mdEditorInstance = new EasyMDE({
element: ta,
initialValue: val || this.form.contenido,
spellChecker: false,
autosave: { enabled: false },
toolbar: ['bold','italic','heading','|','quote','code','|','unordered-list','ordered-list','|','link','image','|','preview','side-by-side','fullscreen','|','guide']
});
mdEditorInstance.codemirror.on('change', () => {
this.form.contenido = mdEditorInstance.value();
});
},
toggleEditor() {
this.$nextTick(() => {
if (this.form.tipo_contenido === 'markdown') {
this.initMde(this.form.contenido);
} else {
if (mdEditorInstance) { mdEditorInstance.toTextArea(); mdEditorInstance = null; }
}
});
},
submitForm() {
// Sincronizar contenido del editor Markdown antes de enviar
if (mdEditorInstance) this.form.contenido = mdEditorInstance.value();
const url = this.editId ? `/app/doc/paginas/${this.editId}` : '/app/doc/paginas';
const method = this.editId ? 'PUT' : 'POST';
fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.form) })
.then(r => r.json())
.then(d => { if (d.error) { alert(d.error); return; } this.closeModal(); this.load(this.page); });
},
confirmDelete(id) { this.deleteId = id; this.showDeleteModal = true; },
doDelete() {
fetch(`/app/doc/paginas/${this.deleteId}`, { method: 'DELETE' })
.then(r => r.json())
.then(() => { this.showDeleteModal = false; this.load(this.page); });
},
closeModal() {
if (mdEditorInstance) { mdEditorInstance.toTextArea(); mdEditorInstance = null; }
this.showModal = false;
this.showDeleteModal = false;
}
};
}
</script>
resources/views/docs/private-index.html
+47
View File
@@ -0,0 +1,47 @@
<!-- Vista Privada: Índice de Documentación de un SaaS (requiere login) -->
<div class="bg-white rounded-lg shadow">
<!-- Header -->
<div class="border-b px-6 py-5 flex items-center gap-4">
{{if .saas.LogoURL}}
<img src="{{.saas.LogoURL}}" alt="{{.saas.Nombre}}" class="w-10 h-10 rounded-lg object-contain border border-gray-200">
{{end}}
<div>
<h1 class="text-xl font-bold text-gray-800">{{.saas.Nombre}}</h1>
<p class="text-sm text-gray-500">{{.saas.Descripcion}}</p>
</div>
</div>
<div class="p-6">
{{if not .grupos}}
<div class="text-center py-12 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 mx-auto mb-3 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<p>Sin páginas disponibles para tu perfil en este producto.</p>
</div>
{{else}}
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-5">
{{range .grupos}}
<div class="border border-gray-200 rounded-lg overflow-hidden shadow-sm">
<div class="bg-[#8eb02f] px-4 py-3">
<h2 class="text-white font-semibold text-sm">{{.Categoria.Nombre}}</h2>
</div>
<ul class="divide-y divide-gray-100">
{{range .Paginas}}
<li>
<a href="/app/docs/{{$.saas.Slug}}/{{.Slug}}"
class="flex items-center justify-between px-4 py-2.5 hover:bg-gray-50 transition-colors text-sm">
<span class="text-gray-700 hover:text-[#8eb02f]">{{.Titulo}}</span>
{{if eq .Visibilidad "private"}}
<span class="text-xs text-yellow-600 bg-yellow-50 px-1.5 py-0.5 rounded">🔒 Privado</span>
{{end}}
</a>
</li>
{{end}}
</ul>
</div>
{{end}}
</div>
{{end}}
</div>
</div>
resources/views/docs/private-page.html
+94
View File
@@ -0,0 +1,94 @@
<!-- Vista Privada: Lectura de página de documentación (requiere login + rol) -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js"></script>
<div class="bg-white rounded-lg shadow">
<!-- Topbar de navegación -->
<div class="border-b px-6 py-3 flex items-center gap-2 text-sm">
<a href="/app/docs/{{.saas.Slug}}" class="flex items-center gap-1 text-gray-500 hover:text-[#8eb02f] transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
</svg>
{{.saas.Nombre}}
</a>
<span class="text-gray-300">/</span>
<span class="text-gray-400">{{.pagina.Categoria.Nombre}}</span>
<span class="text-gray-300">/</span>
<span class="text-gray-800 font-medium truncate">{{.pagina.Titulo}}</span>
{{if eq .pagina.Visibilidad "private"}}
<span class="ml-auto text-xs text-yellow-600 bg-yellow-50 border border-yellow-200 px-2 py-0.5 rounded-full">🔒 Acceso privado</span>
{{end}}
</div>
<div class="flex gap-0">
<!-- Sidebar de navegación -->
<aside class="hidden lg:block w-52 border-r flex-shrink-0 py-4 px-3">
<div class="sticky top-4 space-y-4">
{{range .grupos}}
<div>
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2 px-2">{{.Categoria.Nombre}}</p>
<ul class="space-y-0.5">
{{range .Paginas}}
<li>
<a href="/app/docs/{{$.saas.Slug}}/{{.Slug}}"
class="flex items-center justify-between text-xs px-2 py-1.5 rounded transition-colors
{{if eq .Slug $.pagina.Slug}}bg-[#8eb02f] text-white font-medium{{else}}text-gray-600 hover:bg-gray-100{{end}}">
<span>{{.Titulo}}</span>
{{if eq .Visibilidad "private"}}<span class="opacity-60 text-xs">🔒</span>{{end}}
</a>
</li>
{{end}}
</ul>
</div>
{{end}}
</div>
</aside>
<!-- Contenido -->
<main class="flex-1 min-w-0 p-6 lg:p-8">
<div class="mb-6 pb-4 border-b border-gray-100">
<span class="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">{{.pagina.Categoria.Nombre}}</span>
<h1 class="text-2xl font-bold text-gray-900 mt-2">{{.pagina.Titulo}}</h1>
</div>
{{if eq .pagina.TipoContenido "markdown"}}
<div id="docContent" class="prose prose-gray max-w-none"
data-raw="{{.pagina.Contenido}}" data-type="markdown"></div>
{{else}}
<div class="prose prose-gray max-w-none">{{.pagina.Contenido}}</div>
{{end}}
</main>
</div>
</div>
<style>
.prose h1,.prose h2,.prose h3,.prose h4 { font-weight:700; margin-top:1.5em; margin-bottom:0.5em; color:#1f2937; }
.prose h1 { font-size:1.75rem; }
.prose h2 { font-size:1.35rem; border-bottom:1px solid #e5e7eb; padding-bottom:.25rem; }
.prose h3 { font-size:1.1rem; }
.prose p { margin-bottom:1em; line-height:1.7; color:#374151; }
.prose ul,.prose ol { margin:0.75em 0 0.75em 1.5em; color:#374151; }
.prose li { margin-bottom:.25em; }
.prose code { background:#f3f4f6; padding:2px 5px; border-radius:4px; font-size:.85em; font-family:monospace; }
.prose pre { background:#1e293b; color:#e2e8f0; padding:1rem; border-radius:.5rem; overflow-x:auto; margin:1em 0; }
.prose pre code { background:transparent; padding:0; font-size:.85em; }
.prose blockquote { border-left:4px solid #8eb02f; padding-left:1rem; color:#6b7280; font-style:italic; margin:1em 0; }
.prose a { color:#8eb02f; text-decoration:underline; }
.prose table { width:100%; border-collapse:collapse; margin:1em 0; }
.prose th,.prose td { border:1px solid #e5e7eb; padding:.5rem .75rem; text-align:left; }
.prose th { background:#f9fafb; font-weight:600; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const el = document.getElementById('docContent');
if (!el) return;
const raw = el.getAttribute('data-raw') || '';
el.removeAttribute('data-raw');
el.innerHTML = marked.parse(raw);
if (window.hljs) {
el.querySelectorAll('pre code').forEach(block => hljs.highlightElement(block));
}
});
</script>
resources/views/docs/public-index.html
+56
View File
@@ -0,0 +1,56 @@
<!-- Vista Pública: Índice de Documentación de un SaaS -->
<!-- Marked.js para renderizar Markdown -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<div class="min-h-screen bg-gray-50">
<!-- Header del SaaS -->
<div class="bg-white border-b shadow-sm">
<div class="max-w-5xl mx-auto px-6 py-6 flex items-center gap-4">
{{if .saas.LogoURL}}
<img src="{{.saas.LogoURL}}" alt="{{.saas.Nombre}}" class="w-12 h-12 rounded-lg object-contain border border-gray-200">
{{end}}
<div>
<h1 class="text-2xl font-bold text-gray-800">{{.saas.Nombre}}</h1>
<p class="text-sm text-gray-500">{{.saas.Descripcion}}</p>
</div>
</div>
</div>
<div class="max-w-5xl mx-auto px-6 py-8">
{{if not .grupos}}
<div class="text-center py-16 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 mx-auto mb-3 opacity-40" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
<p class="text-lg font-medium">Sin documentación publicada</p>
<p class="text-sm mt-1">Aún no hay páginas disponibles para este producto.</p>
</div>
{{else}}
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{{range .grupos}}
<div class="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
<div class="bg-[#8eb02f] px-4 py-3">
<h2 class="text-white font-semibold text-sm">{{.Categoria.Nombre}}</h2>
{{if .Categoria.Descripcion}}
<p class="text-green-50 text-xs mt-0.5">{{.Categoria.Descripcion}}</p>
{{end}}
</div>
<ul class="divide-y divide-gray-100">
{{range .Paginas}}
<li>
<a href="/docs/{{$.saas.Slug}}/{{.Slug}}"
class="flex items-center gap-2 px-4 py-3 hover:bg-gray-50 transition-colors text-sm text-gray-700 hover:text-[#8eb02f]">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
{{.Titulo}}
</a>
</li>
{{end}}
</ul>
</div>
{{end}}
</div>
{{end}}
</div>
</div>
resources/views/docs/public-page.html
+108
View File
@@ -0,0 +1,108 @@
<!-- Vista Pública: Lectura de una página de documentación -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<!-- Highlight.js para bloques de código en Markdown -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/styles/github.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.9.0/lib/highlight.min.js"></script>
<div class="min-h-screen bg-gray-50 flex flex-col">
<!-- Topbar del SaaS -->
<div class="bg-white border-b shadow-sm sticky top-0 z-10">
<div class="max-w-6xl mx-auto px-6 py-3 flex items-center gap-3">
<a href="/docs/{{.saas.Slug}}" class="flex items-center gap-2 text-gray-600 hover:text-[#8eb02f] transition-colors text-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/>
</svg>
{{.saas.Nombre}}
</a>
<span class="text-gray-300">/</span>
<span class="text-sm text-gray-500 truncate">{{.pagina.Titulo}}</span>
</div>
</div>
<div class="max-w-6xl mx-auto px-4 py-6 w-full flex gap-6 flex-1">
<!-- Sidebar de navegación -->
<aside class="hidden lg:block w-56 flex-shrink-0">
<div class="sticky top-20 space-y-4">
{{range .grupos}}
<div>
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-2">{{.Categoria.Nombre}}</p>
<ul class="space-y-0.5">
{{range .Paginas}}
<li>
<a href="/docs/{{$.saas.Slug}}/{{.Slug}}"
class="block text-sm px-2 py-1.5 rounded transition-colors
{{if eq .Slug $.pagina.Slug}}bg-[#8eb02f] text-white font-medium{{else}}text-gray-600 hover:bg-gray-100 hover:text-gray-800{{end}}">
{{.Titulo}}
</a>
</li>
{{end}}
</ul>
</div>
{{end}}
</div>
</aside>
<!-- Contenido principal -->
<main class="flex-1 min-w-0">
<div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6 lg:p-8">
<div class="mb-6 pb-4 border-b border-gray-100">
<div class="flex items-center gap-2 mb-2">
<span class="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">{{.pagina.Categoria.Nombre}}</span>
</div>
<h1 class="text-2xl font-bold text-gray-900">{{.pagina.Titulo}}</h1>
</div>
<!-- Renderizado del contenido -->
{{if eq .pagina.TipoContenido "markdown"}}
<div id="docContent" class="prose prose-gray max-w-none"
data-raw="{{.pagina.Contenido}}" data-type="markdown"></div>
{{else}}
<div class="prose prose-gray max-w-none">
{{.pagina.Contenido}}
</div>
{{end}}
</div>
<!-- Navegación anterior / siguiente -->
<div class="flex justify-between mt-4 text-sm">
<span></span>
<a href="/docs/{{.saas.Slug}}" class="text-[#8eb02f] hover:underline">← Volver al índice</a>
</div>
</main>
</div>
</div>
<style>
/* Estilos de prosa para contenido Markdown */
.prose h1,.prose h2,.prose h3,.prose h4 { font-weight:700; margin-top:1.5em; margin-bottom:0.5em; color:#1f2937; }
.prose h1 { font-size:1.75rem; }
.prose h2 { font-size:1.35rem; border-bottom:1px solid #e5e7eb; padding-bottom:.25rem; }
.prose h3 { font-size:1.1rem; }
.prose p { margin-bottom:1em; line-height:1.7; color:#374151; }
.prose ul,.prose ol { margin:0.75em 0 0.75em 1.5em; color:#374151; }
.prose li { margin-bottom:.25em; }
.prose code { background:#f3f4f6; padding:2px 5px; border-radius:4px; font-size:.85em; font-family:monospace; }
.prose pre { background:#1e293b; color:#e2e8f0; padding:1rem; border-radius:.5rem; overflow-x:auto; margin:1em 0; }
.prose pre code { background:transparent; padding:0; font-size:.85em; }
.prose blockquote { border-left:4px solid #8eb02f; padding-left:1rem; color:#6b7280; font-style:italic; margin:1em 0; }
.prose a { color:#8eb02f; text-decoration:underline; }
.prose table { width:100%; border-collapse:collapse; margin:1em 0; }
.prose th,.prose td { border:1px solid #e5e7eb; padding:.5rem .75rem; text-align:left; }
.prose th { background:#f9fafb; font-weight:600; }
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const el = document.getElementById('docContent');
if (!el) return;
// El contenido viene como texto en el atributo data-raw para evitar doble escape
const raw = el.getAttribute('data-raw') || '';
el.removeAttribute('data-raw');
el.innerHTML = marked.parse(raw);
// Resaltado de código
if (window.hljs) {
el.querySelectorAll('pre code').forEach(block => hljs.highlightElement(block));
}
});
</script>
resources/views/saas.html
+224
View File
@@ -0,0 +1,224 @@
<!-- Vista: Gestión de Productos SaaS -->
<div x-data="saasApp()" x-init="init()" @keydown.escape="closeModal()" class="bg-white rounded-lg shadow">
<div class="container mx-auto p-6 w-full">
<h1 class="text-2xl font-bold mb-1">Productos SaaS</h1>
<p class="text-sm text-gray-500 mb-4">Gestiona los productos SaaS a los que se asociará documentación.</p>
<div class="flex flex-col md:flex-row md:justify-between md:items-center gap-3 mb-4">
<!-- Búsqueda -->
<div class="relative">
<input type="text" x-model="search" @input="load(1)" placeholder="Buscar..."
class="border border-gray-300 rounded w-full md:w-60 p-2 text-sm">
<div x-show="loading" class="absolute right-2 top-2">
<svg class="animate-spin h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
</svg>
</div>
</div>
<button @click="openAdd()" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">+ Nuevo SaaS</button>
</div>
<!-- Tabla -->
<div class="overflow-x-auto">
<table class="table-auto w-full text-sm">
<thead class="border-b border-gray-200 text-left font-semibold text-gray-600">
<tr>
<th class="py-2 px-4 border-b">Nombre</th>
<th class="py-2 px-4 border-b">Slug</th>
<th class="py-2 px-4 border-b">Servicio vinculado</th>
<th class="py-2 px-4 border-b">Orden</th>
<th class="py-2 px-4 border-b w-10">Estado</th>
<th class="py-2 px-4 border-b w-24"></th>
</tr>
</thead>
<tbody class="text-gray-500">
<template x-if="items.length === 0">
<tr><td colspan="6" class="py-4 text-center text-gray-400">Sin registros</td></tr>
</template>
<template x-for="item in items" :key="item.ID">
<tr class="hover:bg-gray-50 border-b border-gray-100">
<td class="py-2 px-4 font-medium text-gray-800" x-text="item.nombre"></td>
<td class="py-2 px-4 font-mono text-xs text-gray-500" x-text="item.slug"></td>
<td class="py-2 px-4 text-xs" x-text="item.servicio ? item.servicio.nombre : '-'"></td>
<td class="py-2 px-4 text-xs" x-text="item.orden"></td>
<td class="py-2 px-4">
<span x-text="item.activo ? 'Activo' : 'Inactivo'"
:class="item.activo ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'"
class="text-xs px-2 py-0.5 rounded-full"></span>
</td>
<td class="py-2 px-4 flex gap-2 justify-end">
<button @click="openEdit(item)" title="Editar" class="text-blue-500 hover:text-blue-700">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
</button>
<button @click="confirmDelete(item.ID)" title="Eliminar" class="text-red-400 hover:text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
</button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<!-- Paginación -->
<div class="flex items-center justify-between mt-4 text-sm">
<span class="text-gray-500">Total: <strong x-text="total"></strong></span>
<div class="flex gap-1">
<template x-for="p in totalPages" :key="p">
<button @click="load(p)"
:class="p === page ? 'bg-[#8eb02f] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
class="px-3 py-1 rounded text-xs" x-text="p"></button>
</template>
</div>
</div>
</div>
<!-- Modal Añadir / Editar -->
<div x-cloak x-show="showModal" x-transition
class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-40 justify-center items-center text-sm">
<div class="bg-white p-6 rounded shadow-lg w-full max-w-md overflow-y-auto max-h-[90vh]">
<h2 class="text-lg font-bold mb-4" x-text="editId ? 'Editar SaaS' : 'Nuevo SaaS'"></h2>
<form @submit.prevent="submitForm()">
<div class="grid grid-cols-2 gap-3">
<div class="col-span-2">
<label class="block text-xs font-medium mb-1">Nombre *</label>
<input type="text" x-model="form.nombre" @input="autoSlug()" required
class="border border-gray-300 rounded w-full p-2 text-sm">
</div>
<div class="col-span-2">
<label class="block text-xs font-medium mb-1">Slug * <span class="text-gray-400 font-normal">(URL amigable)</span></label>
<input type="text" x-model="form.slug" required
class="border border-gray-300 rounded w-full p-2 text-sm font-mono">
</div>
<div class="col-span-2">
<label class="block text-xs font-medium mb-1">Descripción</label>
<textarea x-model="form.descripcion" rows="2"
class="border border-gray-300 rounded w-full p-2 text-sm"></textarea>
</div>
<div class="col-span-2">
<label class="block text-xs font-medium mb-1">URL del Logo</label>
<input type="text" x-model="form.logo_url"
class="border border-gray-300 rounded w-full p-2 text-sm">
</div>
<div class="col-span-2">
<label class="block text-xs font-medium mb-1">Servicio vinculado <span class="text-gray-400 font-normal">(opcional)</span></label>
<select x-model.number="form.servicio_id" class="border border-gray-300 rounded w-full p-2 text-sm">
<option :value="null">— Sin vincular —</option>
<template x-for="s in servicios" :key="s.ID">
<option :value="s.ID" x-text="s.nombre"></option>
</template>
</select>
</div>
<div>
<label class="block text-xs font-medium mb-1">Orden</label>
<input type="number" x-model.number="form.orden" min="0"
class="border border-gray-300 rounded w-full p-2 text-sm">
</div>
<div class="flex items-center gap-2 mt-4">
<input type="checkbox" id="activo" x-model="form.activo" class="w-4 h-4">
<label for="activo" class="text-xs font-medium">Activo</label>
</div>
</div>
<div class="flex justify-between mt-5">
<button type="submit" class="bg-[#8eb02f] text-white px-4 py-2 rounded text-sm">Guardar</button>
<button type="button" @click="closeModal()" class="bg-gray-500 text-white px-4 py-2 rounded text-sm">Cancelar</button>
</div>
</form>
</div>
</div>
<!-- Modal Confirmar Eliminación -->
<div x-cloak x-show="showDeleteModal" x-transition
class="fixed inset-0 bg-gray-800 bg-opacity-75 flex z-50 justify-center items-center text-sm">
<div class="bg-white p-6 rounded shadow-lg max-w-sm w-full">
<h2 class="text-lg font-bold mb-3">Confirmar eliminación</h2>
<p class="text-gray-600 mb-4">¿Eliminar este producto SaaS? También se eliminará su documentación asociada.</p>
<div class="flex justify-end gap-2">
<button @click="doDelete()" class="bg-red-500 text-white px-4 py-2 rounded text-sm">Eliminar</button>
<button @click="showDeleteModal = false" class="bg-gray-500 text-white px-4 py-2 rounded text-sm">Cancelar</button>
</div>
</div>
</div>
</div>
<script>
function saasApp() {
return {
items: [], servicios: [],
total: 0, totalPages: 1, page: 1, search: '',
loading: false,
showModal: false, showDeleteModal: false,
editId: null, deleteId: null,
form: { nombre: '', slug: '', descripcion: '', logo_url: '', servicio_id: null, activo: true, orden: 0 },
init() { this.load(1); },
load(p = 1) {
this.page = p;
this.loading = true;
const qs = new URLSearchParams({ page: p, search: this.search });
fetch(`/app/loadsaas?${qs}`)
.then(r => r.json())
.then(d => {
this.items = d.items || [];
this.servicios = d.servicios || [];
this.total = d.total;
this.totalPages = Array.from({ length: d.totalPages }, (_, i) => i + 1);
this.loading = false;
});
},
autoSlug() {
if (!this.editId) {
this.form.slug = this.form.nombre
.toLowerCase().trim()
.normalize('NFD').replace(/[\u0300-\u036f]/g, '')
.replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
}
},
openAdd() {
this.editId = null;
this.form = { nombre: '', slug: '', descripcion: '', logo_url: '', servicio_id: null, activo: true, orden: 0 };
this.showModal = true;
},
openEdit(item) {
this.editId = item.ID;
this.form = {
nombre: item.nombre, slug: item.slug, descripcion: item.descripcion,
logo_url: item.logo_url, servicio_id: item.servicio_id,
activo: item.activo, orden: item.orden
};
this.showModal = true;
},
submitForm() {
const url = this.editId ? `/app/saas/${this.editId}` : '/app/saas';
const method = this.editId ? 'PUT' : 'POST';
fetch(url, { method, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.form) })
.then(r => r.json())
.then(d => {
if (d.error) { alert(d.error); return; }
this.closeModal();
this.load(this.page);
});
},
confirmDelete(id) { this.deleteId = id; this.showDeleteModal = true; },
doDelete() {
fetch(`/app/saas/${this.deleteId}`, { method: 'DELETE' })
.then(r => r.json())
.then(() => { this.showDeleteModal = false; this.load(this.page); });
},
closeModal() { this.showModal = false; this.showDeleteModal = false; }
};
}
</script>