Nuxt CRUD Library

Une bibliothèque Nuxt 3 pour faciliter la création d'écran de gestion pour vos entités (Create, Read, Update, Delete).

## Installation

```bash
npm install nuxt-crud-library
# ou
yarn add nuxt-crud-library
# ou
pnpm add nuxt-crud-library
```

## Configuration

Ajoutez le module à votre application Nuxt dans `nuxt.config.ts`:

```ts
export default defineNuxtConfig({
  modules: [
    'nuxt-crud-library'
  ],
  
  crud: {
    // URL de base pour l'API de votre backend (optionnel)
    apiBaseUrl: '/api',
  }
})
```

## Authentification

La bibliothèque utilise le système de fetch de Nuxt, ce qui vous permet de configurer l'authentification globalement dans votre application. Exemple avec un plugin d'authentification:

```ts
// plugins/auth.ts
export default defineNuxtPlugin((nuxtApp) => {
  // Configurer le fetch par défaut de Nuxt pour ajouter l'en-tête Authorization
  const originalFetch = globalThis.$fetch
  globalThis.$fetch = async (request, options = {}) => {
    // Récupérer le token JWT depuis votre système d'authentification
    const token = useAuthStore().user?.accessToken
    
    // Configurer les options avec l'en-tête d'autorisation
    const headers = {
      ...options.headers,
      ...(token ? { Authorization: `Bearer ${token}` } : {})
    }
    
    // Appeler le fetch d'origine avec les en-têtes ajoutés
    return originalFetch(request, {
      ...options,
      headers
    })
  }
})
```

Cette approche respecte le principe de responsabilité unique:
- Votre application gère l'authentification
- La bibliothèque CRUD se concentre sur les opérations CRUD
- L'intégration se fait via l'API Nuxt standard ($fetch)

## Création d'un nouveau domaine

Pour faciliter la création de nouveaux domaines, la bibliothèque inclut un script CLI interactif. Pour l'utiliser:

```bash
# Option 1: Utiliser npx
npx makecrud

# Option 2: Ajouter un script dans votre package.json
# "scripts": {
#   "make:crud": "makecrud"
# }
# Puis exécuter:
npm run make:crud
```

Le script vous guidera à travers la création d'un nouveau domaine en vous demandant:
- Le nom de l'entité
- L'endpoint API 
- Le nom de la propriété ID
- Les titres à utiliser dans l'interface

Le script génère automatiquement la structure de dossiers et tous les fichiers nécessaires.

## Structure du projet

Pour que la bibliothèque fonctionne correctement, vous devez respecter une structure spécifique avec un répertoire par entité:

```
📁 votre-projet/
 ┣ 📁 domains/
 ┃ ┣ 📁 product/
 ┃ ┃ ┣ 📄 index.ts                    # Exporte les éléments du domaine
 ┃ ┃ ┣ 📄 FormProduct.vue             # Composant de formulaire pour l'entité
 ┃ ┃ ┣ 📄 dataTableTemplates.const.ts # Templates pour les cellules du tableau
 ┃ ┃ ┣ 📄 defaultValue.const.ts       # Valeurs par défaut pour l'entité
 ┃ ┃ ┣ 📄 tableHeaders.const.ts       # En-têtes du tableau
 ┃ ┃ ┗ 📄 titles.const.ts             # Titres pour l'interface
 ┃ ┣ 📁 user/
 ┃ ┃ ┣ 📄 index.ts
 ┃ ┃ ┣ 📄 FormUser.vue
 ┃ ┃ ┣ 📄 dataTableTemplates.const.ts
 ┃ ┃ ┣ 📄 defaultValue.const.ts
 ┃ ┃ ┣ 📄 tableHeaders.const.ts
 ┃ ┃ ┗ 📄 titles.const.ts
 ┣ 📄 domains.ts                      # Fichier qui exporte tous les domaines
 ┣ 📁 ...
```

## Utilisation

### 1. Définissez vos domaines d'entités

Pour chaque entité, vous devez créer un dossier dans `domains/` avec la structure décrite ci-dessus.

la commande makecrud le fait pour vous sinon vous pouvez vous inspirez du playbook qui démontre la configuration d'un domaine utilisateur.

### 2. Navigation automatique

La bibliothèque génère automatiquement les routes CRUD pour vos entités, aucune page n'a besoin d'être créé.


## Typage et auto-complétion

Le type `KeyFromEntities` fournit l'auto-complétion pour les entités de votre application:

```ts
// Créez un fichier types/keyFromEntities.d.ts dans votre projet
import { domains } from '~/domains'
export type KeyFromEntities = keyof typeof domains

// Utilisation
import type { KeyFromEntities } from '~/types/keyFromEntities'

function myFunction(entityName: KeyFromEntities) {
  // 'entityName' est limité aux clés de vos domaines (ex: 'products', 'users')
}
```

## Interface utilisateur avec Vuetify

La bibliothèque utilise Vuetify pour l'interface utilisateur. Les composants CRUD s'intègrent automatiquement avec votre configuration Vuetify existante.

### Actions personnalisées

Pour ajouter des actions personnalisées, vous pouvez étendre les templates de colonnes dans votre configuration de domaine.

## Composants disponibles

- `AppCrudReadAllView`: Vue pour afficher la liste des entités
- `AppCrudActionView`: Vue pour les actions (créer/éditer/voir les détails)
- `AppCrudTable`: Tableau pour afficher les entités
- `AppCrudTableActions`: Boutons d'action pour chaque ligne
- `AppCrudTableDeleteDialog`: Dialogue de confirmation de suppression
- `AppCrudTableNoData`: Affichage lorsqu'il n'y a pas de données
- `AppCrudTableTitle`: Titre du tableau avec boutons d'action
- `AppChip`: Composant pour afficher des badges/étiquettes

## Composables disponibles

- `useListEntityService`: Gère la récupération et la pagination des entités
- `useFetchService`: Service de base pour les requêtes API

## Licence

MIT