Ajout composant MovieCommentList.

Ajout createdAt dans interface MovieCommentInterface.
Implémentation du composant MovieCommentList dans la page des détails.

@@ -7,4 +7,6 @@
 - Ajout composant Poster.
 - Ajout composant Poster.
 - Ajout composant BackdropImage.
 - Ajout composant BackdropImage.
 - Ajout composant MovieCommentForm.
 - Ajout composant MovieCommentForm.
-- Ajout model + interface MovieComment.
+- Ajout model + interface MovieComment.
+- Ajout composant MovieCommentForm.
+- Ajout composant MovieCommentList.

+<script setup lang="ts">
+//#region --Import--.
+import type { MovieCommentInterface } from "~/interfaces/movieComment";
+//#endregion
+
+//#region --Props--.
+defineProps({
+  comments: {
+    type: Array<MovieCommentInterface>,
+    required: true,
+    nullable: false
+  },
+});
+//#endregion
+</script>
+
+<template>
+  <!-- Liste des commentaires -->
+  <section v-if="comments.length > 0" class="mt-10">
+    <h2>Commentaires publiés</h2>
+    <div
+      v-for="(comment, index) in comments"
+      :key="index"
+      class="bg-gray-800 rounded-lg p-6 mb-4"
+    >
+      <div class="flex justify-between items-start mb-2">
+        <div>
+          <h4 class="font-bold text-lg">Par {{ comment.username }}</h4>
+          <p class="text-sm text-gray-400">Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}</p>
+        </div>
+        <div class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
+          {{ comment.rating }}
+        </div>
+      </div>
+      <p class="text-gray-300">{{ comment.message }}</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+
+</style>

 import type { MovieInterface } from "~/interfaces/movie";
 import type { MovieInterface } from "~/interfaces/movie";
 
 
 export interface MovieCommentInterface {
 export interface MovieCommentInterface {
+  createdAt: string;
   username: string;
   username: string;
   message: string;
   message: string;
   rating: number;
   rating: number;

@@ -9,10 +9,14 @@ import { Credit } from "~/models/credit";
 import type { CreditsResponse } from "~/interfaces/credit";
 import type { CreditsResponse } from "~/interfaces/credit";
 import type { MovieCommentInterface } from "~/interfaces/movieComment";
 import type { MovieCommentInterface } from "~/interfaces/movieComment";
 import { MovieComment } from "~/models/movieComment";
 import { MovieComment } from "~/models/movieComment";
+// Infos sur le composable date de Vuetify : https://vuetifyjs.com/en/features/dates/
+// Et l'api date : https://vuetifyjs.com/en/api/use-date/#exposed
+import { useDate } from "vuetify";
 //#endregion
 //#endregion
 
 
 //#region --Declaration--.
 //#region --Declaration--.
 const { fetchMovieDetails, fetchMovieCredits } = useTMDB();
 const { fetchMovieDetails, fetchMovieCredits } = useTMDB();
+const { date, parseISO, toISO, toJsDate, format, locale } = useDate();
 //#endregion
 //#endregion
 
 
 //#region --Declaration--.
 //#region --Declaration--.
@@ -60,6 +64,16 @@ const director = computed(() => {
     return null;
     return null;
   }
   }
 });
 });
+
+/**
+ * Retourne les commentaires liés au film, du plus récent au plus ancien.
+ */
+const comments = computed(() => {
+  return useRepo(MovieComment).query().where(comment => {
+    const searched = comment as unknown as MovieCommentInterface;
+    return searched.movie_id === unref(movieId)
+  }).orderBy('createdAt', 'desc').get();
+});
 //#endregion
 //#endregion
 
 
 //#region --Function--.
 //#region --Function--.
@@ -109,6 +123,7 @@ async function fetchCredits(id: number | string) {
 function handleSubmitEvent(event: MovieCommentInterface) {
 function handleSubmitEvent(event: MovieCommentInterface) {
   isSubmitting.value = true;
   isSubmitting.value = true;
   event.movie_id = unref(movieId);
   event.movie_id = unref(movieId);
+  event.createdAt = `${new Date(Date.now())}`
   useRepo(MovieComment).save(event);
   useRepo(MovieComment).save(event);
   isSubmitting.value = false;
   isSubmitting.value = false;
 }
 }
@@ -190,6 +205,9 @@ onMounted(() => {
             <!--  Comments form.  -->
             <!--  Comments form.  -->
             <h3 class="text-xl font-bold mt-8 mb-4">Ajouter un commentaire</h3>
             <h3 class="text-xl font-bold mt-8 mb-4">Ajouter un commentaire</h3>
             <form-movie-comment-form @event:submit="handleSubmitEvent" />
             <form-movie-comment-form @event:submit="handleSubmitEvent" />
+
+            <!-- Liste des commentaires -->
+            <movie-comment-list :comments="comments as unknown as MovieCommentInterface[]" />
           </section>
           </section>
         </div>
         </div>
       </div>
       </div>