187 lines
5.0 KiB
Markdown
187 lines
5.0 KiB
Markdown
# 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`:
|
||
|
||
```dotenv
|
||
COMPOSE_PROJECT_NAME=planilla
|
||
POSTGRES_USER=usuario
|
||
POSTGRES_PASSWORD=clave
|
||
POSTGRES_DB=midb
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Levantando los servicios
|
||
|
||
1. **Clonar repo**
|
||
|
||
```bash
|
||
```
|
||
|
||
git clone [https://gitea.interno.com/nucleo000/planilla.git](https://gitea.interno.com/nucleo000/planilla.git)
|
||
cd planilla
|
||
|
||
````
|
||
2. **Construir y levantar**
|
||
```bash
|
||
docker compose up -d --build
|
||
````
|
||
|
||
3. **Ver logs**
|
||
|
||
```bash
|
||
```
|
||
|
||
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 Let’s 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`:
|
||
>
|
||
> ```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`.
|
||
|
||
### Notificaciones en tiempo real (SSE)
|
||
|
||
El backend expone un endpoint `/events` que utiliza **Server-Sent Events**. La
|
||
base de datos PostgreSQL emite mensajes mediante triggers en las tablas
|
||
`Planilla`, `Cliente`, `TareaRealizada` y `Asistencia`. Cada cambio se
|
||
reenvía automáticamente a los navegadores conectados.
|
||
|
||
```javascript
|
||
const source = new EventSource('http://localhost:4000/events');
|
||
source.onmessage = (e) => {
|
||
const data = JSON.parse(e.data);
|
||
console.log('Evento recibido', data);
|
||
};
|
||
```
|
||
|
||
La interfaz incluye una vista **Feed** accesible desde la barra lateral. Allí se muestran en tiempo real las tarjetas de cada módulo conforme llegan estos eventos. Las actualizaciones exhiben la tarjeta anterior y la nueva con una flecha que indica el cambio.
|
||
|
||
#### Card Animation
|
||
The data cards implemented in `ui/src/components/ui/NucleoDataCard.vue` now feature a subtle growing animation when hovered over. This animation is implemented purely with CSS using keyframes and transitions defined within the component's `<style scoped>` section, ensuring the styles are encapsulated and don't affect other elements.
|
||
|
||
---
|
||
|
||
## 📦 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
|