From 1851ae84e4463d2af546823edb3c9a9a176d5494 Mon Sep 17 00:00:00 2001
From: jleroy2023 <leroyjohan3@gmail.com>
Date: Tue, 15 Jul 2025 12:00:39 +0200
Subject: [PATCH] API V1

---
 components/Footer.vue           |  2 +-
 components/GenerationFilter.vue | 17 ++++++++++++++---
 components/Header.vue           |  2 +-
 components/PokemonCard.vue      |  2 +-
 pages/index.vue                 | 25 ++++++++++++++++---------
 pages/pokemon/_id.vue           |  2 +-
 6 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/components/Footer.vue b/components/Footer.vue
index 1f3233d..43cf4b6 100644
--- a/components/Footer.vue
+++ b/components/Footer.vue
@@ -1,7 +1,7 @@
 <template>
   <v-footer color="grey darken-3" padless>
     <v-col class="text-center white--text py-4">
-      © {{ new Date().getFullYear() }} — Made by Le J
+      © {{ new Date().getFullYear() }} — Par Johan Leroy
     </v-col>
   </v-footer>
 </template>
diff --git a/components/GenerationFilter.vue b/components/GenerationFilter.vue
index 4fd671f..f769956 100644
--- a/components/GenerationFilter.vue
+++ b/components/GenerationFilter.vue
@@ -3,21 +3,32 @@
     :items="generations"
     v-model="internalSelected"
     label="Filtrer par génération"
+    multiple
   />
 </template>
 
 <script>
 export default {
-  props: ['selected'],
+  props: {
+    selected: {
+      type: Array,
+      default: () => []
+    }
+  },
   data() {
     return {
       generations: [1, 2, 3, 4, 5, 6, 7, 8, 9],
-      internalSelected: this.selected
+      internalSelected: []
     }
   },
+  created() {
+    this.internalSelected = this.selected.length ? [...this.selected] : [...this.generations]
+  },
   watch: {
     selected(newVal) {
-      this.internalSelected = newVal
+      if (JSON.stringify(newVal) !== JSON.stringify(this.internalSelected)) {
+        this.internalSelected = [...newVal]
+      }
     },
     internalSelected(newVal) {
       this.$emit('change', newVal)
diff --git a/components/Header.vue b/components/Header.vue
index 99aedd8..86a6b18 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -1,5 +1,5 @@
 <template>
   <v-app-bar color="deep-purple accent-4" dark>
-    <v-toolbar-title class="text-white">Tyradex Pokédex</v-toolbar-title>
+    <v-toolbar-title class="text-white">Mon pokédex</v-toolbar-title>
   </v-app-bar>
 </template>
diff --git a/components/PokemonCard.vue b/components/PokemonCard.vue
index 35fb161..9bed89f 100644
--- a/components/PokemonCard.vue
+++ b/components/PokemonCard.vue
@@ -1,6 +1,6 @@
 <template>
   <v-col cols="12" sm="4" md="3">
-    <v-card class="hover:scale-105 transition" @click="$router.push('/pokemon/' + pokemon.id)">
+    <v-card class="hover:scale-105 transition" @click="$router.push('/pokemon/' + pokemon.pokedex_id)">
       <v-img :src="pokemon.sprites.regular" height="200px" />
       <v-card-title>{{ pokemon.name.fr }}</v-card-title>
     </v-card>
diff --git a/pages/index.vue b/pages/index.vue
index d79b93d..b6cdf35 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,7 +5,7 @@
       <v-row>
         <PokemonCard
           v-for="poke in pokemons"
-          :key="poke.id"
+          :key="poke.pokedex_id"
           :pokemon="poke"
         />
       </v-row>
@@ -20,21 +20,28 @@ import GenerationFilter from '@/components/GenerationFilter.vue'
 
 export default {
   components: { PokemonCard, GenerationFilter },
-  data: () => ({
-    selectedGen: 1,
-    pokemons: [],
-  }),
+  data() {
+    return {
+      // Toutes les générations par défaut, donc on montre tout au départ
+      selectedGen: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      pokemons: [],
+    }
+  },
   async mounted() {
     await this.loadPokemons()
   },
   methods: {
     async loadPokemons() {
-      const res = await axios.get('https://tyradex.vercel.app/api/v1')
-      const all = res.data
-      this.pokemons = all.filter(p => p.generation.id === this.selectedGen)
+      try {
+        const res = await axios.get('https://tyradex.vercel.app/api/v1/pokemon')
+        const all = res.data
+        this.pokemons = all.filter(p => this.selectedGen.includes(p.generation))
+      } catch (error) {
+        console.error('Erreur lors du chargement des pokémons :', error)
+      }
     },
     async onGenChange(gen) {
-      this.selectedGen = gen
+      this.selectedGen = Array.isArray(gen) ? gen : [gen]
       await this.loadPokemons()
     },
   }
diff --git a/pages/pokemon/_id.vue b/pages/pokemon/_id.vue
index 2cca243..a918de9 100644
--- a/pages/pokemon/_id.vue
+++ b/pages/pokemon/_id.vue
@@ -14,7 +14,7 @@ import axios from 'axios'
 
 export default {
   async asyncData({ params }) {
-    const { data } = await axios.get(`https://tyradex.vercel.app/api/v1/${params.id}`)
+    const { data } = await axios.get(`https://tyradex.vercel.app/api/v1/pokemon/${params.id}`)
     return { pokemon: data }
   }
 }