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

npm install @innobdx/nuxt-crud

Configuration

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

export default defineNuxtConfig({
  modules: [
    '@innobdx/nuxt-crud'
  ],
  
  // Vous pouvez configurer les options du module ici
  crud: {
    // Options de base du module
    isEnabled: true,
    prefix: 'Crud',
    customFetchKey: 'useApiFetch', // Optionnel: nom de votre fonction fetch personnalisée
    
    // Configuration personnalisée pour le CRUD
    config: {
      editMode: 'DIALOG', // Mode d'édition ('DIALOG' ou autre mode supporté)
      idRegex: /^\d+$/,
      route: {
        create: 'create',
        update: 'update',
        view: 'view'
      },
      subtitle: {
        list: 'Liste',
        create: 'Création',
        update: 'Modification',
        view: 'Détails'
      },
      method: {
        create: 'POST',
        update: 'PATCH'
      },
      textValidButton: {
        create: 'AJOUTER',
        update: 'MODIFIER'
      },
      authorizedEntities: [], // Tableau vide pour autoriser toutes les entités
      dataTableOptions: {
        serverSidePagination: true,
        serverSidePaginationOptions: {
          page: { name: 'page', value: 1 },
          limit: { name: 'size', value: 10 },
          sort: { name: 'sort', value: 'id' },
          query: { name: 'query', value: '' }
        },
        itemsPerPageOptions: [
          { value: 10, title: '10' },
          { value: 25, title: '25' },
          { value: 50, title: '50' }
        ],
        loadingText: 'Chargement en cours...'
      }
    }
  }
})

Configuration des requêtes API et Authentification

La bibliothèque utilise le système de fetch standard de Nuxt et ne gère pas les URLs de base ou l'authentification. C'est à vous de configurer ces aspects dans votre application.

Configuration avec une instance de fetch personnalisée

Le module supporte l'utilisation d'une instance de fetch personnalisée pour tous ses appels API. Cela vous permet de configurer votre propre instance avec une URL de base et des en-têtes d'authentification sans affecter les autres requêtes Nuxt.

Pour configurer cette fonctionnalité:

1. Définir une URL de base et configurer customFetchKey dans nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@innobdx/nuxt-crud'
  ],
  
  // Indiquer au module quelle instance de fetch personnalisée utiliser
  crud: {
    customFetchKey: '$apiFetch' // Nom de l'instance de fetch fournie par votre plugin
  },
  
  // Configuration de l'URL de base pour vos API
  runtimeConfig: {
    public: {
      apiBaseUrl: 'http://localhost:3000/api'  // URL de base de votre API
    }
  }
})

2. Créer un plugin pour fournir votre instance de fetch personnalisée:

// plugins/apiFetch.ts
export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  const { $auth } = useNuxtApp() // Si vous utilisez un plugin d'authentification
  
  // Création d'une instance de fetch dédiée aux appels API
  const apiFetch = $fetch.create({
    baseURL: config.public.apiBaseUrl,
    headers: {
      'Content-Type': 'application/json',
      // Ajoutez vos en-têtes d'authentification
      'Authorization': `Bearer ${$auth?.getAccessToken?.() || ''}`
    }
  })
  
  // Exposer l'instance de fetch pour qu'elle soit accessible
  return {
    provide: {
      apiFetch // Sera disponible comme $apiFetch
    }
  }
})

Cette approche présente plusieurs avantages:

• Ne modifie pas le fetch global de Nuxt, donc n'affecte pas les autres requêtes système
• Permet une séparation claire entre les requêtes API et les autres requêtes
• Facilite la gestion des en-têtes d'authentification de manière isolée
• Respecte le principe de séparation des responsabilités

Le module utilisera automatiquement votre instance personnalisée pour tous ses appels API internes, sans avoir à modifier son code source.

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:

# 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éé.

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