17d95b2d21
This commit introduces a growing animation to the NucleoDataCard component. - The animation is implemented using CSS keyframes and is triggered on hover. - A smooth transition effect has also been added. The README.md file has been updated to include information about this new feature under the UI section.
170 lines
4.3 KiB
Markdown
170 lines
4.3 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`.
|
||
|
||
#### 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
|