DEV {JS}

Mode sombre

Étape 17 – Permettre la suppression d’un Pokémon (si connecté) ​

🎯 Objectifs de l’étape ​

Dans cette étape, vous allez permettre à un utilisateur connecté de supprimer un Pokémon directement depuis sa carte, avec une confirmation par boîte de dialogue.

Vous apprendrez à :

  • afficher un bouton de suppression seulement si l’utilisateur est connecté,
  • gérer une boîte de dialogue de confirmation avec v-dialog,
  • appeler la fonction deletePokemon() du store à la confirmation.

📝 Étapes à suivre ​

1. Modifier le composant PokemonCard.vue ​

a) Ajouter les imports nécessaires ​

js
import { usePokemonStore } from '@/stores/pokemonStore'
import { useAuthStore } from '@/stores/authStore'
import { ref } from 'vue'

b) Initialiser les stores et variables ​

js
const pokemonStore = usePokemonStore()
const authStore = useAuthStore()

const dialogDelete = ref(false)       // Contrôle l'affichage de la boîte de dialogue
const idPokemonToDelete = ref(null)   // Identifiant du Pokémon à supprimer

c) Créer la fonction confirmDelete ​

js
function confirmDelete (id) {
  idPokemonToDelete.value = id
  dialogDelete.value = true
}

2. Ajouter le bouton dans le template ​

Dans la section <v-card-actions> :

vue
<v-btn icon @click.prevent="pokemonStore.toggleFavorite(pokemon)">
  <v-icon :color="pokemonStore.isFavorite(pokemon) ? 'red' : ''">
    {{ pokemonStore.isFavorite(pokemon) ? 'mdi-heart' : 'mdi-heart-outline' }}
  </v-icon>
</v-btn>

<!--
Bouton pour demander confirmation avant de supprimer le Pokémon.
  * v-if : Affiche le bouton uniquement si l'utilisateur est authentifié.
  * v-btn : Bouton Vuetify avec une icône intégrée.
  * @click.prevent : Empêche l'action par défaut et appelle `confirmDelete`.
-->
<v-btn
  v-if="authStore.isAuthenticated"
  icon
  @click.prevent="confirmDelete(pokemon.id)"
>
  <!-- Icône pour indiquer la suppression -->
  <v-icon>mdi-delete</v-icon>
</v-btn>

3. Ajouter la boîte de dialogue de confirmation ​

En bas du template :

vue
<!--
Dialog de confirmation pour supprimer un Pokémon.
-->
<v-dialog v-model="dialogDelete" max-width="400">
  <v-card>
    <v-card-title class="text-h6">Confirmer la suppression</v-card-title>
    <v-card-text>
      Êtes-vous sûr de vouloir supprimer ce Pokémon ?
    </v-card-text>
    <v-card-actions>
      <!-- Bouton pour annuler la suppression -->
      <v-btn color="primary" text @click="dialogDelete = false">Annuler</v-btn>

      <!-- Bouton pour confirmer la suppression -->
      <v-btn color="red" text @click="pokemonStore.deletePokemon(idPokemonToDelete)">
        Supprimer
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

✅ Résultat attendu ​

  • Le bouton “🗑️” s’affiche uniquement si l’utilisateur est connecté (authStore.isAuthenticated)
  • Un clic sur la poubelle ouvre un dialogue de confirmation
  • En cas de confirmation, le Pokémon est supprimé immédiatement
  • L’interface est mise à jour automatiquement (via le store Pinia)

🧪 Tests à effectuer ​

  1. Connectez-vous
  2. Ouvrez la page d’accueil ou /favoris
  3. Cliquez sur l’icône 🗑️ d’un Pokémon personnalisé
  4. Confirmez la suppression → le Pokémon disparaît
  5. Cliquez sur “Annuler” → le Pokémon reste

📘 Documentation utile ​