@amsom-habitat/qui-fait-quoi

Composant Vue 3 pour afficher les partenaires d'un module avec leurs informations de contact (email, téléphone, mobile).

📦 Installation

npm install @amsom-habitat/qui-fait-quoi

🚀 Utilisation basique

<template>
  <QuiFaitQuoi :id-module="123" />
</template>

<script>
import { QuiFaitQuoi } from '@amsom-habitat/qui-fait-quoi'

export default {
  components: { QuiFaitQuoi }
}
</script>

⚙️ Configuration

Configuration globale (main.js)

Par défaut, le composant utilise l'API de production. Pour utiliser un autre environnement :

import { configureQuiFaitQuoi } from '@amsom-habitat/qui-fait-quoi'

configureQuiFaitQuoi({
  baseUrl: import.meta.env.VITE_API_URL
})

Avec un axiosOverlayConnector personnalisé

Si votre application utilise déjà un connector axios personnalisé :

import axiosOverlayConnector from './services/axiosOverlayConnector'

configureQuiFaitQuoi({
  baseUrl: import.meta.env.VITE_API_URL,
  axiosOverlayConnector: axiosOverlayConnector
})

💾 Système de cache

Le composant intègre un système de cache automatique :

• Les données sont mises en cache par idModule
• Quand vous fermez et rouvrez le composant avec le même idModule, les données s'affichent instantanément sans appel API
• Si vous changez d'idModule, le composant vérifie le cache ou charge depuis l'API

Forcer un rechargement

<QuiFaitQuoi :id-module="123" :force-reload="true" />

Vider le cache manuellement

<template>
  <QuiFaitQuoi ref="quiFaitQuoi" :id-module="123" />
  <button @click="forceRefresh">Actualiser</button>
</template>

<script>
export default {
  methods: {
    forceRefresh() {
      this.$refs.quiFaitQuoi.clearCache()
      this.$refs.quiFaitQuoi.refresh()
    }
  }
}
</script>

📋 Props

| Prop | Type | Défaut | Description | | ----------------------- | ---------------- | ------ | -------------------------------------- | | idModule | String | Number | - | Requis - ID du module | | forceReload | Boolean | false | Force le rechargement même si en cache | | apiUrl | String | null | URL API complète (surcharge la config) | | axiosOverlayConnector | Function | null | Connecteur axios personnalisé | | customFetch | Function | null | Fonction fetch personnalisée |

🔧 Méthodes publiques

| Méthode | Description | | ----------------- | ------------------------------------- | | refresh() | Recharge les données depuis l'API | | clearCache() | Vide le cache pour l'idModule actuel | | clearAllCache() | Vide tout le cache (tous les modules) |

📝 Exemple d'intégration complète

<template>
  <div>
    <button @click="openModal">Qui fait quoi?</button>

    <Modal v-if="showModal" @close="showModal = false">
      <QuiFaitQuoi ref="quiFaitQuoi" :id-module="currentModule" :force-reload="forceReload" />
    </Modal>
  </div>
</template>

<script>
import { QuiFaitQuoi } from '@amsom-habitat/qui-fait-quoi'
import Modal from './Modal.vue'

export default {
  components: { QuiFaitQuoi, Modal },

  data() {
    return {
      showModal: false,
      currentModule: 123,
      forceReload: false
    }
  },

  methods: {
    openModal() {
      this.showModal = true
    }
  }
}
</script>

🎨 Fonctionnalités

• ✅ Affichage des partenaires avec photo de profil
• ✅ Tri automatique par nature de partenaire
• ✅ Actions rapides : email, téléphone, mobile
• ✅ Cache automatique pour éviter les rechargements inutiles
• ✅ Gestion du loading
• ✅ Aucune dépendance Bootstrap (styles autonomes)