affichages films

frontend/src/components/FilmPoster.vue

+<script setup>
+const props = defineProps(['film']);
+</script>
+    
 <template>
   <div class="film-poster">
     <img :src="film.poster" :alt="film.title" />
-    <h3>{{ film.title }}</h3>
+    <h3>{{ film.titleFR || film.primaryTitle }}</h3>
+    <h4>{{ film.startYear }}</h4>
     <!-- Ajoutez d'autres détails du film ici -->
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    film: {
-      type: Object,
-      required: true
-    }
-  }
-};
-</script>
 
 <style scoped>
 /* Styles pour la disposition des affiches */
 .film-poster {
-  width: 20%; /* Pour afficher 4 affiches par rangée */
+  width: 20%;
+  /* Pour afficher 4 affiches par rangée */
   margin: 10px;
   display: inline-block;
   text-align: center;

frontend/src/components/FilmRow.vue

+<script setup>
+import FilmPoster from './FilmPoster.vue';
+
+const props = defineProps(['films']);
+</script>
+
 <template>
   <div class="film-row">
-    <div v-for="film in films" :key="film.id">
+    <div v-for="film in films" :key="film.tconst">
       <FilmPoster :film="film" />
     </div>
   </div>
 </template>
 
-<script>
-import FilmPoster from './FilmPoster.vue';
-
-export default {
-  components: {
-    FilmPoster
-  },
-  props: {
-    films: {
-      type: Array,
-      required: true
-    }
-  }
-};
-</script>
 
 <style scoped>
 /* Styles pour la disposition des rangées */

frontend/src/views/Accueil.vue

 <script setup>
-import Header from '../components/Header.vue'
+import { onMounted } from 'vue';
+import Header from '../components/Header.vue';
+import FilmRow from '../components/FilmRow.vue';
+
+const films = [
+  { tconst: 1, titleFR: 'Film 1', poster: 'lien_vers_affiche_1' },
+  { tconst: 2, titleFR: 'Film 2', poster: 'lien_vers_affiche_2' },
+];
+
+let filmsInRows = [];
+
+const chunkArray = (array, size) => {
+  const chunkedArr = [];
+  let index = 0;
+  while (index < array.length) {
+    chunkedArr.push(array.slice(index, size + index));
+    index += size;
+  }
+  return chunkedArr;
+};
+
+onMounted(() => {
+  // Découper les films en rangées de 4
+  filmsInRows = chunkArray(films, 4);
+});
 </script>
 
 <template>
@@ -7,40 +31,5 @@ import Header from '../components/Header.vue'
   </Header>
   <h1>Page d'accueil</h1>
   <h2>Le plus beau site du monde</h2>
+  <FilmRow :films="films"></FilmRow>
 </template>
-
-<script>
-import Header from '../components/Header.vue';
-import FilmRow from '../components/FilmRow.vue';
-
-export default {
-  components: {
-    Header,
-    FilmRow
-  },
-  data() {
-    return {
-      films: [
-        { id: 1, title: 'Film 1', poster: 'lien_vers_affiche_1' },
-        { id: 2, title: 'Film 2', poster: 'lien_vers_affiche_2' },
-      ],
-      filmsInRows: []
-    };
-  },
-  mounted() {
-    // Découper les films en rangées de 4
-    this.filmsInRows = this.chunkArray(this.films, 4);
-  },
-  methods: {
-    chunkArray(array, size) {
-      const chunkedArr = [];
-      let index = 0;
-      while (index < array.length) {
-        chunkedArr.push(array.slice(index, size + index));
-        index += size;
-      }
-      return chunkedArr;
-    }
-  }
-};
-</script>
\ No newline at end of file