156 lines
5.7 KiB
Markdown
156 lines
5.7 KiB
Markdown
# Inventory Frontend
|
|
|
|
Interface web de gestion d'inventaire industriel pour **Malio**. Application SPA complète permettant la gestion du parc machines, des pièces, composants, produits, fournisseurs et documents associés.
|
|
|
|
## Stack technique
|
|
|
|
| Technologie | Version | Rôle |
|
|
|-------------|---------|------|
|
|
| [Nuxt](https://nuxt.com) | 4 | Framework (SPA, SSR désactivé) |
|
|
| [Vue 3](https://vuejs.org) | 3.5 | Composition API + `<script setup>` |
|
|
| [TypeScript](https://www.typescriptlang.org) | 5.7 | Typage strict sur l'ensemble du projet |
|
|
| [TailwindCSS](https://tailwindcss.com) | 4 | Utility-first CSS |
|
|
| [DaisyUI](https://daisyui.com) | 5 | Composants UI (alertes, modales, badges, etc.) |
|
|
| [Lucide](https://lucide.dev) | via unplugin-icons | Icônes SVG |
|
|
| [Vitest](https://vitest.dev) | 4 | Tests unitaires |
|
|
| [Playwright](https://playwright.dev) | 1.58 | Tests E2E |
|
|
|
|
## Prérequis
|
|
|
|
- **Node.js** >= 20
|
|
- **npm**
|
|
- **Backend Symfony** démarré avec l'API sur `http://localhost:8081/api`
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Développement
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
L'application est accessible sur **http://localhost:3001**.
|
|
|
|
## Commandes disponibles
|
|
|
|
| Commande | Description |
|
|
|----------|-------------|
|
|
| `npm run dev` | Serveur de développement avec HMR |
|
|
| `npm run build` | Build de production |
|
|
| `npm run lint:fix` | Correction automatique ESLint |
|
|
| `npx nuxi typecheck` | Vérification TypeScript (0 erreurs attendu) |
|
|
| `npm run test` | Tests unitaires Vitest |
|
|
| `npm run test:watch` | Tests unitaires en mode watch |
|
|
| `npm run test:e2e` | Tests E2E Playwright (Chrome) |
|
|
|
|
## Fonctionnalités
|
|
|
|
### Gestion du parc
|
|
|
|
- **Machines** : création, édition, vue détaillée avec structure hiérarchique (composants, pièces, produits)
|
|
- **Squelettes machines** : templates réutilisables pour créer des machines à partir d'un modèle type
|
|
- **Sites** : gestion multi-sites avec coordonnées de contact
|
|
|
|
### Catalogues
|
|
|
|
- **Composants**, **Pièces**, **Produits** : catalogues avec recherche serveur, tri, pagination et filtres
|
|
- **Catégories** : système de types avec champs personnalisés configurables et exigences (contraintes de structure)
|
|
- **Fournisseurs** : gestion des constructeurs/fabricants avec liaison multi-entités
|
|
|
|
### Documents et traçabilité
|
|
|
|
- **Documents** : upload, prévisualisation PDF/images, stockage sur système de fichiers avec compression PDF automatique
|
|
- **Journal d'activité** : audit trail complet sur toutes les entités (création, modification, suppression)
|
|
- **Commentaires** : système de tickets/commentaires sur les fiches avec statut ouvert/résolu
|
|
|
|
### Administration
|
|
|
|
- **Rôles** : ADMIN, GESTIONNAIRE, VIEWER avec permissions granulaires
|
|
- **Profils** : gestion des utilisateurs et attribution des rôles
|
|
- **Notifications** : badge compteur de commentaires ouverts avec polling
|
|
|
|
## Architecture
|
|
|
|
```
|
|
app/
|
|
├── pages/ # 36 pages (file-based routing)
|
|
├── components/ # 57 composants Vue (auto-imported par Nuxt)
|
|
│ ├── common/ # Composants UI réutilisables (modales, pagination, recherche)
|
|
│ ├── form/ # Champs de formulaire (email, téléphone)
|
|
│ ├── layout/ # Navbar principale
|
|
│ ├── machine/ # Vue détail et création de machines
|
|
│ │ └── create/ # Wizard de création machine
|
|
│ ├── model-types/ # Gestion des types/catégories
|
|
│ └── sites/ # Modales site (création, édition)
|
|
├── composables/ # 45 composables (logique métier)
|
|
├── shared/ # Types, utilitaires, validation
|
|
│ ├── utils/ # Helpers API, champs personnalisés, affichage, erreurs
|
|
│ ├── validation/ # Validation email, téléphone
|
|
│ └── model/ # Définitions de structures
|
|
├── services/ # Service layer (wrappers API spécialisés)
|
|
├── middleware/ # Middleware d'auth global (session cookie)
|
|
└── utils/ # Formatage dates, montants, événements
|
|
```
|
|
|
|
## Conventions de code
|
|
|
|
### Composables
|
|
|
|
Pattern avec injection de dépendances explicite :
|
|
|
|
```typescript
|
|
interface Deps {
|
|
machineId: Ref<string>
|
|
onSave: () => void
|
|
}
|
|
|
|
export function useMachineDetail(deps: Deps) {
|
|
// ...
|
|
}
|
|
```
|
|
|
|
### Communication entre composants
|
|
|
|
**Props + Events uniquement** — pas de `provide/inject` dans le projet.
|
|
|
|
### Appels API
|
|
|
|
Le composable `useApi.ts` centralise tous les appels HTTP :
|
|
- Cookies de session inclus automatiquement (`credentials: 'include'`)
|
|
- `application/ld+json` pour POST/PUT
|
|
- `application/merge-patch+json` pour PATCH
|
|
- Gestion d'erreurs centralisée avec traduction des messages backend en français
|
|
|
|
### Styles
|
|
|
|
Classes DaisyUI standard :
|
|
- Input : `input input-bordered input-sm md:input-md`
|
|
- Select : `select select-bordered select-sm md:select-md`
|
|
- Button : `btn btn-sm md:btn-md btn-primary`
|
|
|
|
## Authentification
|
|
|
|
L'application utilise une **authentification par session (cookies)**, pas de JWT.
|
|
|
|
Le middleware global `profile.global.ts` vérifie la session à chaque navigation :
|
|
- Utilisateur non connecté → redirection vers `/profiles`
|
|
- Route `/admin/*` → accès restreint à `ROLE_ADMIN`
|
|
|
|
## Tests
|
|
|
|
- **13 tests unitaires** (Vitest + happy-dom) couvrant composables, utils et composants
|
|
- **3 specs E2E** (Playwright + Chrome) avec setup d'authentification
|
|
|
|
## Submodule Git
|
|
|
|
Ce repo est un **submodule** du repo principal [Inventory](https://gitea.malio.fr/MALIO-DEV/Inventory).
|
|
|
|
Workflow de commit :
|
|
1. Commiter dans ce repo (frontend) en premier
|
|
2. Commiter dans le repo principal pour mettre à jour le pointeur submodule
|
|
3. Pousser les deux repos
|