Galappxy i18n v2.0 — Demo Completo

Vista previa del sistema

Así se vería la interfaz real con la combinación actual de idioma + marca + overrides de empresa.

Menú lateral
Dashboard
Cobros
Clientes
Reportes
Configuración
Ayuda
Dashboard
Hola, María
Aquí tienes un resumen de hoy.
Ingresos totales
$142,500
este mes
Cobros pendientes
8
Total de clientes
247
Cobro creado exitosamente
Se enviará un recordatorio
¿Eliminar cobro?
Esta acción no se puede deshacer.

Pluralización + Concordancia de género

tc() resuelve _zero / _one / _other automáticamente. El género del concepto adapta adjetivos.

Pluralización con tc()
5
Concordancia de género en templates

Template: "{{$charge.gender:Nuevo|Nueva}} {{$charge.singular}}"
Cambia entre marcas para ver cómo el género adapta los adjetivos automáticamente.

Formateo: Números, Moneda, Fechas

Integración con Intl.NumberFormat / DateTimeFormat. Cambia de idioma para ver la diferencia.

number(142500.75)
currency(142500, 'MXN')
currency(2999.99, 'USD')
date(now, 'medium')
date(now, 'full')
relativeTime(-3, 'days')
percent(0.8725)
date(now, 'time')
relativeTime(2, 'hours')

Personalización por empresa (Capa 3: Tenant Override)

Simula lo que el admin de cada empresa vería en Configuración → Personalizar conceptos. Escribe para sobrescribir en tiempo real.

Concepto Base (idioma) Marca (brand) Tu empresa (override) Género → Resultado

MutationObserver — Reactividad DOM

Inyecta HTML dinámicamente y el observer lo traduce automáticamente.

Observer: activo

Dev Mode — Claves faltantes

Activa dev mode, intenta traducir claves que no existen, y ve el reporte.

(haz clic en "Probar claves inexistentes")

Integración con Backend — Flujo completo

Simula las respuestas reales de tus endpoints. Así es como el frontend se conecta con la BD.

Flujo de carga
1
Login + Profile Select
JWT ya contiene id_company + id_brand
2
GET /v1/i18n/bundle?locale=es
Backend mergea las 3 capas y devuelve el diccionario completo
3
GX.i18n.init({ ... })
Frontend recibe strings + concepts ya mergeados
4
GX.i18n.applyToDOM()
Todos los data-i18n se traducen + observer activo
Endpoints disponibles
GET /v1/i18n/bundle — diccionario mergeado
GET /v1/i18n/locales — idiomas disponibles
GET /v1/i18n/editable-concepts — conceptos por capa
GET PUT /v1/i18n/company-overrides — overrides del tenant
GET PUT /v1/i18n/brand-overrides — overrides de marca
Simular respuesta del API
(haz clic en un botón para simular la respuesta)
Código de integración
// Después del profile/select, cargar i18n: async function loadI18n(locale) { const res = await fetch( `/v1/i18n/bundle?locale=${locale}`, { credentials: 'include' } ); const { data } = await res.json(); // Registrar locale desde BD GX.i18n.registerLocale(data.locale, { strings: data.strings, concepts: data.concepts, }); // Inicializar (ya viene mergeado) GX.i18n.init({ locale: data.locale, observeDOM: true, }); GX.i18n.applyToDOM(); }
Locale: es Brand: schoolibox RTL: no Tenant overrides: no Locales: Brands: Modules: 0 Missing keys: 0