Save France
Composables

useParameter

Composable pour récupérer les paramètres de configuration de l'application

Description

Composable pour récupérer les paramètres de configuration de l'application depuis l'API. Actuellement utilisé pour obtenir la limite maximale d'équipements.

Vue d'ensemble

Le composable useParameter fournit un accès simple aux paramètres système de l'application. Il gère l'authentification automatique et la mise en cache des résultats.

flowchart LR
    A[useParameter] --> B[useAuth]
    B --> C[Token JWT]
    A --> D[API /api/parameters]
    D --> E[Cache Nuxt]
    E --> F[Valeur retournée]

API

Fonctions

getMaxEquipments(): Promise<number>

Récupère le nombre maximum d'équipements autorisés par requête.

const { getMaxEquipments } = useParameter();
const maxEquipments = await getMaxEquipments();
console.log(maxEquipments); // 5 par défaut

Retour : Nombre maximum d'équipements (par défaut : 5 en cas d'erreur)

Comportement :

  • Utilise le token JWT via useAuth()
  • Met en cache le résultat avec la clé "max_equipments"
  • Retourne 5 par défaut en cas d'erreur
  • Log les erreurs dans la console

Utilisation

Exemple de base

<script setup lang="ts">
const { getMaxEquipments } = useParameter();

const maxEquipments = ref(5);

onMounted(async () => {
  maxEquipments.value = await getMaxEquipments();
});
</script>

<template>
  <div>
    <p>Maximum d'équipements : {{ maxEquipments }}</p>
  </div>
</template>

Limitation du nombre d'équipements

<template>
  <div>
    <div v-for="(equipment, index) in equipments" :key="index">
      <EquipmentForm :equipment="equipment" />
    </div>
    
    <UButton 
      @click="addEquipment"
      :disabled="equipments.length >= maxEquipments"
    >
      Ajouter un équipement
    </UButton>
    
    <p v-if="equipments.length >= maxEquipments" class="text-sm text-gray-500">
      Limite de {{ maxEquipments }} équipements atteinte
    </p>
  </div>
</template>

<script setup lang="ts">
const { getMaxEquipments } = useParameter();
const maxEquipments = ref(5);
const equipments = ref([{}]);

onMounted(async () => {
  maxEquipments.value = await getMaxEquipments();
});

function addEquipment() {
  if (equipments.value.length < maxEquipments.value) {
    equipments.value.push({});
  }
}
</script>

Utilisation avec useForm

<script setup lang="ts">
const { formData, addEquipment } = useForm();
const { getMaxEquipments } = useParameter();
const maxEquipments = ref(5);

onMounted(async () => {
  maxEquipments.value = await getMaxEquipments();
});

const canAddEquipment = computed(() => {
  return formData.value.equipments.length < maxEquipments.value;
});
</script>

<template>
  <UButton 
    @click="addEquipment"
    :disabled="!canAddEquipment"
  >
    Ajouter un équipement
    ({{ formData.equipments.length }}/{{ maxEquipments }})
  </UButton>
</template>

Cache

Le composable utilise le système de cache de Nuxt avec la clé "max_equipments". Cela permet :

  • Éviter les appels API redondants
  • Améliorer les performances
  • Partager la valeur entre composants

Le cache est géré automatiquement par Nuxt et peut être invalidé si nécessaire :

await refreshNuxtData('max_equipments');

Authentification

Le composable utilise automatiquement useAuth() pour obtenir le token JWT et l'inclure dans les en-têtes de la requête :

const { getToken } = useAuth();
const token = getToken();

const response = await $fetch("/api/parameters/max_equipments", {
  key: "max_equipments",
  headers: {
    Authorization: `Bearer ${token}`,
  },
});

Note : L'utilisateur doit être authentifié pour utiliser ce composable.

Gestion des erreurs

En cas d'erreur (réseau, authentification, etc.), le composable :

  1. Log l'erreur dans la console avec console.error
  2. Retourne la valeur par défaut : 5
try {
  const response = await $fetch(/* ... */);
  return response.value;
} catch (error) {
  console.error(error);
  return 5; // Valeur par défaut
}

Extension future

Le composable peut être étendu pour récupérer d'autres paramètres :

export const useParameter = () => {
  const { getToken } = useAuth();
  const token = getToken();

  const getMaxEquipments = async (): Promise<number> => {
    // ... implémentation actuelle
  };

  const getParameter = async (code: string): Promise<any> => {
    try {
      const response = await $fetch(`/api/parameters/${code}`, {
        key: `parameter_${code}`,
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      return response.value;
    } catch (error) {
      console.error(error);
      return null;
    }
  };

  return {
    getMaxEquipments,
    getParameter, // Nouvelle fonction générique
  };
};

Bonnes pratiques

  1. Chargement
    • Chargez les paramètres au montage du composant
    • Utilisez await pour attendre la valeur
  2. Valeurs par défaut
    • Toujours prévoir une valeur par défaut
    • Affichez un indicateur de chargement si nécessaire
  3. Cache
    • Le cache est automatique, ne le désactivez pas sauf nécessité
    • Invalidez le cache si les paramètres changent côté serveur
  4. Authentification
    • Vérifiez que l'utilisateur est authentifié avant d'appeler les fonctions
    • Gérez les cas où le token est invalide

Dépannage

La valeur ne se charge pas

  1. Vérifiez que l'utilisateur est authentifié
  2. Vérifiez que le token JWT est valide
  3. Vérifiez que l'endpoint /api/parameters/max_equipments est accessible
  4. Vérifiez les erreurs dans la console

La valeur par défaut est toujours retournée

  1. Vérifiez la réponse de l'API dans l'onglet Réseau
  2. Vérifiez que la structure de la réponse est correcte (response.value)
  3. Vérifiez les erreurs dans la console

Le cache ne fonctionne pas

  1. Vérifiez que la clé de cache est correcte
  2. Vérifiez que useNuxtData fonctionne correctement
  3. Forcez le rafraîchissement avec refreshNuxtData

Exemple complet

<template>
  <div class="equipment-selection">
    <h2>Sélectionnez vos équipements</h2>
    
    <div v-if="loading" class="text-center">
      <USpinner />
    </div>
    
    <div v-else>
      <div 
        v-for="(equipment, index) in formData.equipments" 
        :key="index"
        class="mb-4"
      >
        <EquipmentForm
          :equipment="equipment"
          @update="updateEquipmentItem(index, $event)"
        />
        <UButton
          v-if="formData.equipments.length > 1"
          @click="removeEquipment(index)"
          variant="ghost"
          color="red"
        >
          Supprimer
        </UButton>
      </div>
      
      <UButton
        @click="addEquipment"
        :disabled="!canAddMore"
        variant="outline"
      >
        <UIcon name="i-heroicons-plus" class="w-4 h-4 mr-2" />
        Ajouter un équipement
      </UButton>
      
      <p 
        v-if="formData.equipments.length >= maxEquipments"
        class="mt-2 text-sm text-amber-600"
      >
        ⚠️ Limite de {{ maxEquipments }} équipements atteinte
      </p>
      
      <p class="mt-2 text-sm text-gray-500">
        {{ formData.equipments.length }} / {{ maxEquipments }} équipements
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
const {
  formData,
  addEquipment,
  removeEquipment,
  updateEquipmentItem,
} = useForm();

const { getMaxEquipments } = useParameter();
const maxEquipments = ref(5);
const loading = ref(true);

onMounted(async () => {
  try {
    maxEquipments.value = await getMaxEquipments();
  } catch (error) {
    console.error('Erreur de chargement des paramètres:', error);
  } finally {
    loading.value = false;
  }
});

const canAddMore = computed(() => {
  return formData.value.equipments.length < maxEquipments.value;
});
</script>

Résumé

  • Composable simple pour récupérer les paramètres système
  • Authentification automatique via useAuth()
  • Mise en cache automatique avec Nuxt
  • Gestion d'erreur avec valeur par défaut
  • API simple et intuitive
  • Extensible pour d'autres paramètres

useForm

Composable pour la gestion du formulaire multi-étapes de contrat

useTroubleshootingForm

Composable pour la gestion du formulaire multi-étapes de dépannage