115 lines
4.0 KiB
Markdown
115 lines
4.0 KiB
Markdown
# Don Confiao - Frontend
|
|
|
|
## Tech Stack
|
|
- **Framework:** Vue 3 (Composition API)
|
|
- **UI Library:** Vuetify 3
|
|
- **Routing:** Vue Router 4 (auto-routes con `unplugin-vue-router`)
|
|
- **State:** Pinia
|
|
- **HTTP:** Axios
|
|
- **Build:** Vite
|
|
- **Linting:** ESLint
|
|
|
|
## Project Structure
|
|
```
|
|
src/
|
|
├── assets/ # Imágenes, iconos estáticos
|
|
├── components/ # Componentes Vue reutilizables
|
|
├── layouts/ # Layouts de página
|
|
├── pages/ # Vistas (auto-routed desde文件名)
|
|
├── plugins/ # Configuración de Vuetify, etc.
|
|
├── router/ # Configuración de rutas
|
|
├── services/ # API services (auth.js, etc.)
|
|
│ ├── api.js # Clase wrapper que делегат methods
|
|
│ ├── api-implementation.js # Factory que selecciona implementación
|
|
│ ├── auth.js # Manejo de auth (login, tokens JWT)
|
|
│ ├── django-api.js # Implementación de API para Django
|
|
│ └── http.js # Axios instance con interceptors
|
|
├── stores/ # Pinia stores
|
|
└── styles/ # SCSS settings
|
|
```
|
|
|
|
## Important Conventions
|
|
|
|
### Auto-imports
|
|
- Componentes en `src/components/` se auto-importan por nombre
|
|
- Los archivos en `src/pages/*.vue` se routing automáticamente via `unplugin-vue-router`
|
|
- Alias `@` = `src/`
|
|
|
|
### Pages (CRITICAL)
|
|
**Siempre importar componentes en los archivos de página:**
|
|
```vue
|
|
<template>
|
|
<MiComponente />
|
|
</template>
|
|
|
|
<script setup>
|
|
import MiComponente from '@/components/MiComponente.vue';
|
|
</script>
|
|
```
|
|
|
|
### Componentes
|
|
- Usar Composition API (`<script setup>` o `export default { }`)
|
|
- Naming: PascalCase (ej: `LoginDialog.vue`, `CartGrid.vue`)
|
|
- Componentes de página van en `pages/`, componentes reutilizables en `components/`
|
|
|
|
### Servicios API
|
|
- Ubicación: `src/services/`
|
|
- Usar Axios para HTTP requests
|
|
- JWT tokens en localStorage (`access_token`, `refresh_token`)
|
|
- La API se inyecta globalmente via `app.provide('api', api)` y se usa con `inject('api')`
|
|
|
|
### Routing
|
|
- Rutas automáticas basadas en archivos en `src/pages/`
|
|
- No requiere configuración manual en `router/index.js`
|
|
|
|
## Environment Variables
|
|
- `VITE_DJANGO_BASE_URL` - URL del backend Django
|
|
|
|
## Commands
|
|
```bash
|
|
npm run dev # Desarrollo (puerto 3000)
|
|
npm run build # Producción
|
|
npm run preview # Preview build
|
|
npm run lint # ESLint fix
|
|
```
|
|
|
|
## Common Issues
|
|
1. **Página en blanco:** Verificar que los componentes en `src/pages/*.vue` tengan import explícito
|
|
2. **Errores de lint:** Ejecutar `npm run lint`
|
|
|
|
## Git Commits
|
|
**Antes de hacer commit:**
|
|
1. Pedir permiso al usuario
|
|
2. Mostrar resumen de los cambios que se incluirán
|
|
|
|
**Formato de mensajes:**
|
|
- Usar prefijo `#<numero>` para referenciar el issue (ej: `#28 feat: add login` donde #28 es el número del issue en GitHub/GitLab)
|
|
- Prefijos válidos: `feat`, `fix`, `chore`, `docs`, `refactor`, `style`
|
|
|
|
## Análisis del Proyecto
|
|
|
|
### Flujo de Autenticación
|
|
1. **Login:** `AuthService.login(credentials)` → obtiene JWT tokens → guarda en localStorage
|
|
2. **Token:** Se envía en headers via interceptor en `http.js` (`Authorization: Bearer <token>`)
|
|
3. **Refresh:** El interceptor renueva automáticamente el token si expira (401)
|
|
4. **Logout:** `AuthService.logout()` → limpia localStorage
|
|
|
|
### Estructura de API
|
|
- `api.js`: Interfaz genérica con métodos como `getCustomers()`, `getProducts()`, etc.
|
|
- `api-implementation.js`: Factory que selecciona implementación (actualmente solo Django)
|
|
- `django-api.js`: Implementación concreta con endpoints de Django
|
|
|
|
### Componentes Principales
|
|
- **NavBar.vue**: Barra de navegación con menú de usuario
|
|
- **LoginDialog.vue**: Diálogo de inicio de sesión
|
|
- **Purchase.vue / AdminPurchase.vue**: Componentes de compra
|
|
- **Cart.vue**: Carrito de compras
|
|
- **SummaryPurchase.vue**: Resumen de compra
|
|
|
|
### Endpoints Django Comunes
|
|
- `/api/token/` - Autenticación (login/refresh)
|
|
- `/users/me/` - Usuario actual
|
|
- `/don_confiao/api/customers/` - Clientes
|
|
- `/don_confiao/api/products/` - Productos
|
|
- `/don_confiao/api/sales/` - Ventas
|