Documentación App Frontend

Bienvenido a la documentación completa del proyecto Miglop.es V2 Frontend.

📚 Índice de Documentación

Para Empezar

  1. 00-PROJECT-OVERVIEW.md

    • Resumen general del proyecto
    • Stack tecnológico
    • Arquitectura básica
    • Variables de entorno
    • Scripts disponibles
    • 👉 EMPIEZA AQUÍ
  2. 08-ONBOARDING-GUIDE.md

    • Guía completa para nuevos desarrolladores
    • Setup del entorno
    • Primera tarea
    • Workflow de Git
    • 👉 LEE ESTO SI ERES NUEVO EN EL PROYECTO

Arquitectura y Estructura

  1. 01-PROJECT-STRUCTURE.md

    • Estructura de carpetas detallada
    • Organización de componentes
    • Layouts y vistas
    • Stores y servicios
    • Convenciones de nomenclatura
  2. 04-COMPONENT-PATTERNS.md

    • Patrones de componentes Vue 3
    • Composition API
    • Props y Events
    • Composables
    • DevExtreme y Element Plus
    • Mejores prácticas

Tecnologías y Herramientas

  1. 02-LIBRARIES-AND-DEPENDENCIES.md

    • Todas las librerías usadas
    • Configuración de cada librería
    • Versiones y actualizaciones
    • Gestión de dependencias
  2. 03-API-COMMUNICATION.md

    • ApiService
    • JwtService
    • Cómo hacer llamadas a la API
    • Manejo de errores
    • Ejemplos de uso
    • Abort Controllers

Operaciones y Mantenimiento

  1. 07-DEPLOYMENT.md

    • Estrategia de despliegue
    • Entornos (develop, staging, production)
    • Scripts de build
    • CI/CD
    • Configuración de servidores
    • Troubleshooting
  2. 09-UNUSED-COMPONENTS-ANALYSIS.md

    • Análisis de componentes no utilizados
    • Recomendaciones de limpieza
    • Proceso de eliminación segura
    • ⚠️ REVISAR ANTES DE ELIMINAR COMPONENTES

🎯 Guías por Rol

Para Nuevos Desarrolladores

Lectura recomendada en orden:

  1. 00-PROJECT-OVERVIEW.md – 30 min
  2. 08-ONBOARDING-GUIDE.md – 1 hora
  3. 01-PROJECT-STRUCTURE.md – 1 hora
  4. 04-COMPONENT-PATTERNS.md – 1 hora
  5. 03-API-COMMUNICATION.md – 30 min

Total: ~4 horas de lectura

Para Desarrolladores Existentes

Para añadir nuevas features:

Para debugging:

Para deploys:

Para Tech Leads

Para revisión de arquitectura:

Para limpieza de código:

Para onboarding de equipo:

Para DevOps

Para configuración de CI/CD:

🔍 Búsqueda Rápida

¿Cómo hacer…?

Pregunta Documento Sección
¿Cómo crear un componente? 04-COMPONENT-PATTERNS.md Estructura de Componentes
¿Cómo llamar a la API? 03-API-COMMUNICATION.md ApiService
¿Cómo usar un store? 04-COMPONENT-PATTERNS.md Composables
¿Cómo hacer deploy? 07-DEPLOYMENT.md Proceso de Despliegue
¿Qué librerías usar para X? 02-LIBRARIES-AND-DEPENDENCIES.md Por categoría
¿Dónde está el componente Y? 01-PROJECT-STRUCTURE.md Carpeta src/components
¿Cómo configurar el entorno? 08-ONBOARDING-GUIDE.md Configuración Inicial

¿Qué es…?

Concepto Documento Sección
ApiService 03-API-COMMUNICATION.md ApiService
Pinia Stores 04-COMPONENT-PATTERNS.md Composables
DevExtreme 02-LIBRARIES-AND-DEPENDENCIES.md UI Component Libraries
Router Guards 01-PROJECT-STRUCTURE.md src/router
Build Scripts 00-PROJECT-OVERVIEW.md Scripts Disponibles

📊 Estado de la Documentación

Documento Estado Última Actualización
00-PROJECT-OVERVIEW.md ✅ Completo 20/10/2025
01-PROJECT-STRUCTURE.md ✅ Completo 20/10/2025
02-LIBRARIES-AND-DEPENDENCIES.md ✅ Completo 20/10/2025
03-API-COMMUNICATION.md ✅ Completo 20/10/2025
04-COMPONENT-PATTERNS.md ✅ Completo 20/10/2025
07-DEPLOYMENT.md ✅ Completo 20/10/2025
08-ONBOARDING-GUIDE.md ✅ Completo 20/10/2025
09-UNUSED-COMPONENTS-ANALYSIS.md ✅ Completo 20/10/2025

🤝 Contribuir a la Documentación

Esta documentación es un documento vivo. Si encuentras:

  • Información desactualizada
  • Errores o inexactitudes
  • Secciones que faltan
  • Oportunidades de mejora

Por favor, actualiza la documentación:

  1. Edita el archivo markdown correspondiente
  2. Haz commit con mensaje descriptivo: docs: actualizar [sección]
  3. Crea Pull Request

📧 Contacto

Para preguntas sobre la documentación o el proyecto:

  • Tech Lead: [Nombre/Email]
  • Maintainer de Docs: [Nombre/Email]
  • Canal de Slack/Teams: #frontend-dev

Generado: 20/10/2025 Versión: 1.0.0 Proyecto: Miglop.es V2 Frontend Stack: Vue 3 + TypeScript + Vite

Documentación Odoo App Backend

Resumen Ejecutivo

Se ha implementado una integración completa entre el sistema Miglop.es y Odoo para la gestión automatizada de facturas. Esta integración permite:

  • Creación automática de facturas en Odoo cuando se procesan pagos en Stripe
  • Sincronización de datos entre ambos sistemas
  • Descarga de facturas PDF directamente desde Odoo
  • Priorización de facturas de Odoo sobre las de Stripe en la interfaz de usuario

Arquitectura de la Integración

1. Librería Principal: app/Api/Odoo/

OdooClient (app/Api/Odoo/OdooClient.php)

Cliente principal que maneja la conexión con Odoo mediante XML-RPC y HTTP.

Características principales:

  • Autenticación dual (XML-RPC y HTTP con cookies)
  • Gestión de sesiones y cookies
  • Métodos para ejecutar operaciones en Odoo
  • Manejo de errores y excepciones

Métodos clave:

  • authenticate(): Autenticación XML-RPC
  • authenticateWithHttp(): Autenticación HTTP con cookies
  • execute(): Ejecutar operaciones en Odoo
  • getInvoicesByEmail(): Obtener facturas por email del cliente
  • downloadInvoicePdf(): Descargar PDF de facturas

Servicios Especializados

InvoiceService (app/Api/Odoo/Services/InvoiceService.php)

  • Gestión completa de facturas en Odoo
  • Creación, actualización, consulta y eliminación
  • Generación de PDFs
  • Integración con datos de Stripe

PartnerService (app/Api/Odoo/Services/PartnerService.php)

  • Gestión de clientes/proveedores
  • Búsqueda por email, CIF, nombre
  • Creación automática de clientes

ProductService (app/Api/Odoo/Services/ProductService.php)

  • Gestión de productos
  • Búsqueda y creación automática
  • Mapeo con productos de Stripe

Modelo de Datos

Invoice (app/Api/Odoo/Models/Invoice.php)

  • Modelo auxiliar para construir facturas
  • Métodos fluidos para configuración
  • Soporte para diferentes tipos de factura

2. Configuración

Archivo de Configuración (config/odoo.php)

return [
    'odoo_url'         => env('ODOO_URL'),
    'odoo_database'    => env('ODOO_DATABASE'),
    'odoo_username'    => env('ODOO_USERNAME'),
    'odoo_apikey'      => env('ODOO_APIKEY'),
    'odoo_apipassword' => env('ODOO_APIPASSWORD'),
    'odoo_id_tax'      => 51
];

Variables de entorno requeridas:

  • ODOO_URL: URL de la instancia Odoo
  • ODOO_DATABASE: Nombre de la base de datos
  • ODOO_USERNAME: Email del usuario
  • ODOO_APIKEY: Clave API del usuario
  • ODOO_APIPASSWORD: Contraseña del usuario

Funcionalidades Implementadas

1. Creación Automática de Facturas

Webhook de Stripe (StripeWebhookController::handlePushInvoiceToOdoo)

Flujo de trabajo:

  1. Trigger: Se ejecuta cuando Stripe procesa un pago exitoso
  2. Validación: Verifica que el sitio tenga un pagador con datos fiscales
  3. Gestión de Cliente: Busca o crea el cliente en Odoo usando el CIF
  4. Creación de Factura: Convierte los datos de Stripe a formato Odoo
  5. Publicación: La factura se crea y publica automáticamente

Datos procesados:

  • Información del cliente (CIF, nombre, dirección)
  • Detalles de la factura (fecha, importe, moneda)
  • Líneas de factura (productos, cantidades, precios)
  • Impuestos aplicables

Logging completo para auditoría y debugging.

2. Consulta de Facturas

Endpoint: getInvoicesByPagador

Funcionalidad:

  • Obtiene facturas tanto de Stripe como de Odoo
  • Prioriza las facturas de Odoo sobre las de Stripe
  • Filtra facturas duplicadas (las de Odoo tienen prioridad)
  • Genera enlaces de descarga para PDFs de Odoo

Lógica de priorización:

// Filtrar facturas de Stripe que ya existen en Odoo
$invoices = $invoices->whereNotIn('id', $odoo_invoices->pluck('stripe_id')->filter());
// Combinar ambas fuentes, priorizando Odoo
$invoices = $invoices->merge($odoo_invoices);

3. Descarga de Facturas PDF

Endpoint: /api/v1/glop/sitios/invoices/odoo/{id}

Funcionalidad:

  • Descarga directa de PDFs desde Odoo
  • Autenticación HTTP con cookies
  • Headers apropiados para descarga de archivos
  • Manejo de errores robusto

Implementación:

public function getInvoicesOdooPdf($invoiceid, OdooClient $odoo_client) {
    $contentPdf = $odoo_client->downloadInvoicePdf($invoiceid, false);
    header('Content-Type: application/pdf');
    header('Content-Disposition: attachment; filename="invoice_' . $invoiceid . '.pdf"');
    header('Content-Length: ' . strlen($contentPdf));
    echo $contentPdf;
    exit();
}

Flujo de Datos

1. Proceso de Creación de Factura

2. Proceso de Consulta de Facturas

Características Técnicas

1. Autenticación Dual

  • XML-RPC: Para operaciones de datos
  • HTTP con cookies: Para descarga de PDFs

2. Manejo de Errores

  • Logging detallado en canal ‘dev’
  • Excepciones específicas para cada tipo de error
  • Rollback automático en caso de fallos

3. Codificación de Caracteres

  • Conversión UTF-8 a ISO-8859-1 para compatibilidad
  • Manejo correcto de caracteres especiales

4. Mapeo de Datos

  • Conversión automática de formatos Stripe a Odoo
  • Preservación de referencias entre sistemas
  • Gestión de impuestos y monedas

Endpoints de la API

1. Consulta de Facturas

  • URL: GET /api/v1/glop/sitios/invoices
  • Parámetros: start_date, end_date, descargar, tipo
  • Funcionalidad: Obtiene facturas combinadas de Stripe y Odoo

2. Descarga de PDF

  • URL: GET /api/v1/glop/sitios/invoices/odoo/{id}
  • Funcionalidad: Descarga PDF de factura específica de Odoo

Configuración Requerida

1. Variables de Entorno

ODOO_URL=https://tu-instancia.odoo.com
ODOO_DATABASE=tu_base_datos
ODOO_USERNAME=tu_email@empresa.com
ODOO_APIKEY=tu_api_key
ODOO_APIPASSWORD=tu_password

2. Permisos en Odoo

  • Acceso a módulo de facturación
  • Permisos de lectura/escritura en account.move
  • Permisos de lectura/escritura en res.partner
  • Permisos de lectura/escritura en product.product

3. Configuración de Impuestos

  • ID del impuesto configurado en config/odoo.php
  • Impuestos activos en Odoo para el tipo de factura

Beneficios de la Integración

1. Automatización

  • Eliminación de procesos manuales de facturación
  • Sincronización automática entre sistemas
  • Reducción de errores humanos

2. Consistencia de Datos

  • Una sola fuente de verdad para facturas
  • Sincronización en tiempo real
  • Historial completo de transacciones

3. Mejora de la Experiencia de Usuario

  • Acceso unificado a todas las facturas
  • Descarga directa de PDFs
  • Interfaz simplificada

4. Cumplimiento Fiscal

  • Facturas oficiales generadas en Odoo
  • Cumplimiento de normativas españolas
  • Trazabilidad completa

No mostrar facturas en portal cliente Stripe

Desactivar Odoo

  1. Para desactivar odoo: comentar la función StripeWebhookController::handlePushInvoiceToOdoo
  2. Desactivar la búsqueda de Odoo

VPN: Manual de conexión

Introducción

Nuestra VPN proporciona una capa crucial de seguridad al crear un túnel cifrado entre los dispositivos de los empleados y la red interna de la empresa. Esto significa que todo el tráfico de datos está protegido de posibles interceptaciones, incluso cuando los empleados trabajan desde redes públicas o poco seguras. Además, la VPN tiene autenticación de dos factores (2FA), lo que añade una capa adicional de protección contra accesos no autorizados. Será necesario tener Google Authenticator para obtener la contraseña del usuario que se te proporcione.

Prerequisitos

  • Fichero de configuración (usuario.ovpn) del cliente OpenVPN (pedir al equipo de desarrollo)
    https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=es&pli=1

Instalación del cliente

  1. WINDOWS: Descargar el cliente OpenVPN de https://openvpn.net/client/client-connect-vpn-for-windows/
  2. MAC: Descargar el cliente OpenVPN de: https://openvpn.net/client-connect-vpn-for-mac-os/
  3. Instalar el cliente OpenVPN

Importación y configuración

El fichero de configuración es universal para todos los sistemas (windows, linux, macos, android, etc), por lo que, lo único que vamos a hacer, es importar el fichero de configuración:
Si acabamos de instalar el cliente de OpenVPN, la ventana de “Import Profile”
debería haber aparecido, por lo que, elegimos la opción “Upload File” y seleccionamos el
fichero de configuración facilitado por el equipo de desarrollo (hay que pedirlo a programación):

Una vez abierto el fichero de configuración de conexión (incluye clave privada), aparecerá una ventana tal que

En este punto, el profile ya se habrá importado, pero podemos probar la conexión y
verificar que todo está correcto:
El usuario es el propio nombre de fichero (sin la extensión .ovpn)

No hay que indicar que “guarde” la contraseña porque esta será dinámica y nos la
facilitará el Google Authenticator cada vez que queramos conectar (lo que viene siendo un
2FA o Two-Factor).

Al darle a conectar, nos pedirá la contraseña, y aquí sencillamente abrimos el Google
Authenticator en el dispositivo donde tenga el QR importado, y escribimos los 8 digitos

Cada vez que desconectemos de la OpenVPN y reconectemos, deberemos facilitar el
código de 2FA indicado por el Google Authenticator. La conexión de openvpn puede estar
siempre activa, no hay problema 🙂
Nota importante: el servicio de OpenVPN solo admite 1 usuario/conexión activa por
cada profile/clave privada, por lo que si se dispone de varios dispositivos, se debe pedir
tantos usuarios como dispostivos, teniendo cada dispositivo, su clave privada única
(aunque en realidad sean usadas por el “mismo usuario”).

Qué hacer cuando tengamos la VPN activa

Conectarnos a los servidores de Base de datos.

Conectarnos como siempre, con el cliente de MySQL de siempre pero con el HOST
192.168.8.90

Manual para cambiar de pagador un sitio

Para realizar un cambio de pagador de un sitio de App primero deberemos dirigirnos a la ficha del sitio y seguidamente pulsar en el botón de cambiar de pagador.

Esta acción mostrará un modal en el cual se deberá indicar el correo electrónico del nuevo pagador, este usuario ya debe existir en App.glop.es y no podrá ser ya administrador pagador de otro sitio.

Añadir IP al balanceador galera para acceso directo

  1. Dar a soltia la clave personal pública y que la registren para el usuario root
  2. Conectarse por SSH con estos datos
    • gws.db.sys.glop.es
    • 60606
    • root
    • Clave privada
  3. Ejecutar el comando
    • ipset add whitelist 31.222.114.186
    • Donde 31.222.114.186 es la nueva IP que queremos dar permiso de acceso
  4. Estaría bien borrar la IP antigua
    • ipset del whitelist 188.215.225.228

Cómo saber por programación si una licencia es hostelería, comercios, TyC, Alimentación

Para ello hacer un GET a https://www.glop.es/wp-json/glop-api/v1/licencias-tipo?serie=XXXXXX

Donde XXXXXX es el número de licencia (sin GB, GL del principio) y devolverá uno de esos códigos de la imagen.

Update 24/10/2023: Lo que hará esa función será llamar a la apli de glop de manera que conseguirá todas las licencias de users_cloud y consultará en admin_licencias de server.glop.es que tipo tienen:

$licencias = $mydb_admin_licencias->get_var( 'SELECT TIPOGLOP FROM LicenciasGlop WHERE NUMERO IN (' . implode(',', $body ) . ')' );

Según el valor del campo TIPOGLOP se podrá saber que tipo de licencia es:

  • TIPO = 100 – Equivale a una licencia de Hosteleria.
  • TIPO = 101 – Equivale a una licencia de Comercios.
  • TIPO = 102 – Equivale a una licencia de Talla y Color.
  • TIPO = 103 – Equivale a una licencia de Alimentación.

En app.glop.es se comprueba mediante la función verifyAuth que devuelve el tipo de licencia de la primera licencia encontrada del Sitio.

Si un sitio tiene licencias con más de un tipo, puede provocar errores a la hora de mostrar u ocultar contenido en la plataforma.

Mejorar la velocidad en el escritorio del multisitio de WordPress de + de 100 sitios

Con > de 100 sitios el admin de WordPress se ralentiza muchísimo. Para mejorar la velocidad, lo que hacemos es NO cargar los sitios en la barra de herramientas y con ello ahorramos tiempo.

Esto solo se aplica para los superadmin.

Para ello:

  • Crear un file en /wp-content/mu-plugins/fix-multisite.php
<?php
/*
Plugin Name: Fix multisite

Description: A simple plugin for overriding the default multisite install configuration
Author: Glop
Version: 1.0.0
*/

function wp31746_skip_get_blogs_of_user_for_super_admin( $null, $object_id, $meta_key, $single ) {
	global $wpdb;

	if ( $meta_key || ! is_super_admin() ) {
		return $null;
	}

	remove_filter( 'get_user_metadata', __FUNCTION__, 10, 4 );

	$keys = get_user_meta( $object_id );

	add_filter( 'get_user_metadata', __FUNCTION__, 10, 4 );

	foreach ( $keys as $key => $value ) {
		if ( 'capabilities' !== substr( $key, -12 ) ) {
			continue;
		}

		if ( $wpdb->base_prefix && 0 !== strpos( $key, $wpdb->base_prefix ) ) {
			continue;
		}

		$blog_id = str_replace( array( $wpdb->base_prefix, '_capabilities' ), '', $key );
		if ( ! is_numeric( $blog_id ) ) {
			continue;
		}

		unset( $keys[ $key ] );
	}

	return $keys;
}
add_filter( 'get_user_metadata', 'wp31746_skip_get_blogs_of_user_for_super_admin', 10, 4 );

Para mejorar la carga de la tabla de sitios https://miglop.es/panel/network/sites.php

Hay que modificar el sites.php que está en wp-admin/network/sites.php

  • Comentar la línea <?php $wp_list_table->views(); ?> y dejarla así
<?php // $wp_list_table->views(); ?>

Volver arriba

Acceder a WikiGlop