google-labs-jules[bot] 38339466c1 Refactor: Centralize UI card component and add documentation
This commit introduces a new `NucleoDataCard.vue` component to centralize the common structure and styling of various card elements used throughout the UI. It also includes documentation for this new component.

The following existing card components have been refactored to use `NucleoDataCard.vue`:
- `ui/src/components/asistencias/cardAsistencia.vue`
- `ui/src/components/empleados/cardEmpleado.vue`
- `ui/src/components/planillas/cardPlanilla.vue`
- `ui/src/components/tareas/cardTarea.vue`

Key changes:
- Created `NucleoDataCard.vue` in `ui/src/components/ui/` with flexible props (title, status, fields, accentColor, backgroundColor, avatarUrl, observation, showEditButton, showDeleteButton) and slots (header, body, footer, actions) to accommodate different card designs.
- Updated `NucleoDataCard.vue` to directly use hex color values for `accentColor` and `backgroundColor` props for easier integration with your UI store.
- Refactored the listed existing card components to utilize `NucleoDataCard.vue`, passing data through props and customizing specific sections (like avatars or field icons) via slots.
- Ensured that all functionalities, including edit/delete actions and dynamic styling based on your UI store, are preserved in the refactored components.
- Added `ui/src/components/ui/README.md` with detailed documentation for `NucleoDataCard.vue`, covering its purpose, props, slots, events, and a usage example.

This centralization reduces code duplication, improves maintainability, and provides a consistent foundation for future card-based UI elements. The added documentation will help developers understand and use the new component effectively.
2025-06-03 19:48:57 +00:00
2025-05-30 02:13:01 -06:00
2025-05-30 23:51:22 -06:00
2025-05-30 23:51:22 -06:00
2025-05-14 16:10:41 -06:00
2025-05-30 23:51:22 -06:00
2025-05-30 23:51:22 -06:00
2025-05-02 18:33:15 -06:00
2025-05-30 23:51:22 -06:00
2025-05-30 23:51:22 -06:00
2025-05-30 17:41:23 -06:00
2025-05-30 23:51:22 -06:00

Planilla

ESTE REPOSITORIO ES UNA COPIA DEL DE GITEA. EL PRINCIPAL ES EL DE GITEA Sistema de gestión de planillas compuesto por:

  • Base de datos: PostgreSQL
  • API: Express + Node.js (módulo api)
  • Interfaz de usuario: Vue 3 + Vite (módulo ui)
  • Orquestación: Docker Compose
  • Proxy y SSL: nginx-proxy-manager (red principal)

📂 Estructura del proyecto

planilla/
├─ .gitea/workflows/build.yml    # CI/CD: build + push + deploy
├─ api/                          # servicio API
│   ├─ Dockerfile
│   ├─ package.json
│   └─ server.js
├─ ui/                           # frontend Vue 3
│   ├─ Dockerfile
│   ├─ index.html
│   ├─ src/
│   └─ vite.config.js
├─ Dockerfile                    # imagen raíz (si aplica)
├─ docker-compose.yml            # orquestación de todos los servicios
└─ README.md                     # este documento

📝 Requisitos

  • Docker (v20+)
  • Docker Compose (v2+)
  • Node.js (v18+) y npm para desarrollo local
  • Acceso a red app-net y principal en Docker

⚙️ Variables de entorno

Si querés cambiar credenciales, editá directamente en docker-compose.yml o usá un .env:

COMPOSE_PROJECT_NAME=planilla
POSTGRES_USER=usuario
POSTGRES_PASSWORD=clave
POSTGRES_DB=midb

🚀 Levantando los servicios

  1. Clonar repo

git clone https://gitea.interno.com/nucleo000/planilla.git cd planilla

2. **Construir y levantar**
   ```bash
docker compose up -d --build
  1. Ver logs

docker compose logs -f api ui

4. **Detener todo**
   ```bash
docker compose down --remove-orphans

📡 Acceso a la aplicación

  • La UI no expone puertos en el host. En Nginx Proxy Manager (red principal):

    • Domino: planilla.midominio.com
    • Scheme: http
    • Forward Hostname: planilla-ui (o ui si así lo nombraste)
    • Forward Port: 80

    Después podés habilitar SSL Lets Encrypt desde la pestaña SSL.

  • La API corre internamente en planilla-api:4000 y no se expone externamente. Vu hace proxy la UI o clientes internos.


🗄️ Detalles de cada servicio

Base de datos (db)

  • Imagen: postgres:15
  • Volumen persistente: db_data
  • Credenciales en docker-compose.yml.

API (api)

  • Framework: Express

  • DB: pg (Pool)

  • Endpoints:

    • GET /api/items → devuelve items desde Postgres.
  • Arranca en puerto 4000 internamente.

  • Código principal en api/server.js.

Aviso: si ves SyntaxError al usar import, asegurate de tener en api/package.json:

{
  "type": "module"
}

UI (ui)

  • Framework: Vue 3 + Vite
  • Build: produce carpeta dist/ y se sirve con Nginx
  • Arranca en puerto 80 internamente.
  • Código fuente en ui/src/, configuración en vite.config.js.

📦 CI/CD (.gitea/workflows/build.yml)

  1. build: construye imágenes planilla, planilla-api, planilla-ui, taggea con SHA y latest.
  2. push: envía imágenes al registry gitea.interno.com.
  3. deploy: conecta al registry, baja imágenes y hace docker compose up -d --build.

Asegurate de usar las credenciales correctas en el workflow.


💡 Buenas prácticas

  • Aísla tu red interna (app-net) para que sólo los contenedores hablen entre sí.
  • Exponé servicios al exterior sólo vía nginx-proxy-manager en la red principal.
  • Versioná tu build.yml y mantén secretos fuera del repo (ideal: secrets.GITEA_PASSWORD).
  • Usa nombres de contenedor explícitos (container_name) para identificar fácilmente.

🤝 Contribuciones

  1. Hacé un fork y trabajá en una rama nueva.
  2. Abrí PR describiendo cambios.
  3. Chequeá que el CI pase y la app funcione.

📄 Licencia

MIT © 2025 Equipo Planilla

Description
No description provided
Readme 15 MiB
Languages
Vue 46.5%
JavaScript 45.2%
TypeScript 5.5%
CSS 0.8%
PLpgSQL 0.5%
Other 1.4%