195 lines
5.2 KiB
Markdown
195 lines
5.2 KiB
Markdown
# ✅ EDITOR DE CHECKLIST REUTILIZABLE - IMPLEMENTADO
|
|
|
|
## 🎯 OBJETIVO
|
|
|
|
Editor completo para crear y editar checklists reutilizables (electrodos DESA, preparación IOT, etc.) desde el Admin Panel.
|
|
|
|
---
|
|
|
|
## ✅ IMPLEMENTADO
|
|
|
|
### 1. Editor de Checklist Completo
|
|
|
|
**Ubicación**: `admin-panel/src/pages/ChecklistEditorPage.tsx`
|
|
|
|
#### Funcionalidades
|
|
- ✅ **Crear nuevo checklist** o editar existente
|
|
- ✅ **Metadatos básicos**: ID, título, descripción, tiempo estimado
|
|
- ✅ **Gestión de items**:
|
|
- Añadir items
|
|
- Eliminar items
|
|
- Reordenar items (arriba/abajo)
|
|
- Marcar items como críticos
|
|
- Añadir categoría a items
|
|
- ✅ **Validación** antes de guardar
|
|
- ✅ **Vista previa** en tiempo real
|
|
- ✅ **Integración con API** backend
|
|
|
|
#### Características
|
|
- **Items con orden**: Cada item tiene un número de orden
|
|
- **Items críticos**: Marcados visualmente (rojo) y no saltables
|
|
- **Categorías**: Opcional, para organizar items (ej: "Preparación", "Verificación")
|
|
- **Validación**: Requiere ID, título y al menos un item
|
|
- **Permisos**: Verifica permisos antes de guardar
|
|
|
|
### 2. Biblioteca de Contenido
|
|
|
|
**Ubicación**: `admin-panel/src/pages/ContentLibraryPage.tsx`
|
|
|
|
#### Funcionalidades
|
|
- ✅ **Vista tipo tabla** con todos los contenidos
|
|
- ✅ **Filtros**:
|
|
- Por tipo (protocol, guide, drug, checklist)
|
|
- Por estado (draft, in_review, approved, published)
|
|
- Búsqueda por título
|
|
- ✅ **Paginación** (20 items por página)
|
|
- ✅ **Iconos por tipo** de contenido
|
|
- ✅ **Badges de estado** con colores
|
|
- ✅ **Enlaces** para editar cada item
|
|
- ✅ **Botón "Nuevo Checklist"** destacado
|
|
|
|
---
|
|
|
|
## 📝 ESTRUCTURA DEL CHECKLIST
|
|
|
|
```typescript
|
|
{
|
|
id: string; // ID único (ej: "checklist-electrodos-desa")
|
|
type: 'checklist';
|
|
level: 'operativo';
|
|
title: string; // Título completo
|
|
shortTitle?: string; // Título corto
|
|
description?: string; // Descripción
|
|
status: 'draft' | 'in_review' | 'approved' | 'published';
|
|
content: {
|
|
items: ChecklistItem[]; // Array de items
|
|
description?: string; // Descripción del checklist
|
|
estimatedTime?: string; // Tiempo estimado (ej: "30-60 segundos")
|
|
applicableProtocols?: string[]; // IDs de protocolos donde se puede usar
|
|
tags?: string[]; // Tags para búsqueda
|
|
}
|
|
}
|
|
```
|
|
|
|
### ChecklistItem
|
|
```typescript
|
|
{
|
|
id: string; // ID único del item
|
|
text: string; // Texto del item
|
|
order: number; // Orden (1, 2, 3...)
|
|
critical?: boolean; // Item crítico (no saltable)
|
|
category?: string; // Categoría (ej: "Preparación", "Verificación")
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🎨 INTERFAZ DE USUARIO
|
|
|
|
### Editor
|
|
- **Formulario dividido en secciones**:
|
|
- Información básica (ID, título, descripción, tiempo)
|
|
- Items del checklist (lista editable)
|
|
- **Vista previa** en panel lateral (toggle)
|
|
- **Botones de acción**:
|
|
- Guardar
|
|
- Vista previa
|
|
- Volver
|
|
|
|
### Biblioteca
|
|
- **Tabla responsive** con columnas:
|
|
- Tipo (con icono)
|
|
- Título
|
|
- Estado (badge con color)
|
|
- Versión
|
|
- Fecha de actualización
|
|
- Acciones (ver/editar)
|
|
- **Filtros en la parte superior**
|
|
- **Paginación** en la parte inferior
|
|
|
|
---
|
|
|
|
## 🔄 FLUJO DE TRABAJO
|
|
|
|
1. **Crear Checklist**:
|
|
- Ir a "Nuevo Checklist" o "Biblioteca" → "Nuevo Checklist"
|
|
- Completar información básica
|
|
- Añadir items (mínimo 1)
|
|
- Ver vista previa
|
|
- Guardar (estado: `draft`)
|
|
|
|
2. **Editar Checklist**:
|
|
- Ir a "Biblioteca"
|
|
- Filtrar por tipo "checklist"
|
|
- Hacer clic en "Ver/Editar"
|
|
- Modificar items o información
|
|
- Guardar (crea nueva versión)
|
|
|
|
3. **Validar y Publicar**:
|
|
- Revisor valida → Estado: `approved`
|
|
- Super Admin publica → Estado: `published`
|
|
- App consume automáticamente el content pack
|
|
|
|
---
|
|
|
|
## ✅ VALIDACIONES
|
|
|
|
- ✅ **ID requerido** y único
|
|
- ✅ **Título requerido**
|
|
- ✅ **Al menos un item** requerido
|
|
- ✅ **Permisos verificados** antes de guardar
|
|
- ✅ **Items con texto** (validación visual)
|
|
|
|
---
|
|
|
|
## 🧪 PRUEBAS
|
|
|
|
### Test Manual
|
|
|
|
1. ✅ Crear nuevo checklist
|
|
2. ✅ Añadir items
|
|
3. ✅ Reordenar items
|
|
4. ✅ Marcar items como críticos
|
|
5. ✅ Ver vista previa
|
|
6. ✅ Guardar checklist
|
|
7. ✅ Ver en biblioteca
|
|
8. ✅ Filtrar por tipo "checklist"
|
|
9. ✅ Editar checklist existente
|
|
10. ✅ Validar que se crea nueva versión
|
|
|
|
---
|
|
|
|
## 📊 ESTADO
|
|
|
|
✅ **Editor de Checklist**: Completo y funcional
|
|
✅ **Biblioteca de Contenido**: Completa con filtros
|
|
✅ **Integración con API**: Funcional
|
|
✅ **Validaciones**: Implementadas
|
|
✅ **Vista previa**: Funcional
|
|
|
|
---
|
|
|
|
## 🚀 PRÓXIMOS PASOS
|
|
|
|
1. **Probar en desarrollo** - Verificar que todo funciona
|
|
2. **Integrar en más páginas** si es necesario
|
|
3. **Continuar con otros editores** (Protocol, Guide, Drug)
|
|
|
|
---
|
|
|
|
## 📚 ARCHIVOS CREADOS/MODIFICADOS
|
|
|
|
- ✅ `admin-panel/src/pages/ChecklistEditorPage.tsx` - Editor completo
|
|
- ✅ `admin-panel/src/pages/ContentLibraryPage.tsx` - Biblioteca con filtros
|
|
- ✅ `admin-panel/src/components/layout/Layout.tsx` - Añadido "Nuevo Checklist" a navegación
|
|
|
|
---
|
|
|
|
## ⚠️ NOTAS
|
|
|
|
- El editor requiere permisos `content:write:checklist`
|
|
- Los checklists se guardan con estado `draft` por defecto
|
|
- Cada edición crea una nueva versión
|
|
- La vista previa se actualiza en tiempo real
|
|
|