Bruno Predot / tmdb_test

Go to a project
Toggle navigation Toggle navigation pinning
Bruno Predot
6e197beb 1 parent 3e867f70

Modification de la config es-lint + fix.

Expand all
Inline Side-by-side
Showing 23 changed files with 295 additions and 91 deletions
@@ -26,9 +26,15 @@ defineProps({ @@ -26,9 +26,15 @@ defineProps({
26 :alt="movie.title" 26 :alt="movie.title"
27 :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`" 27 :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
28 class="absolute inset-0 w-full h-full object-cover" 28 class="absolute inset-0 w-full h-full object-cover"
  29 + >
  30 + <div
  31 + v-else
  32 + class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center"
  33 + >
  34 + <FilmIcon
  35 + :size="48"
  36 + class="text-gray-500"
29 /> 37 />
30 - <div v-else class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center">  
31 - <FilmIcon :size="48" class="text-gray-500" />  
32 </div> 38 </div>
33 <div 39 <div
34 class="absolute top-2 right-2 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold" 40 class="absolute top-2 right-2 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold"
@@ -37,8 +43,12 @@ defineProps({ @@ -37,8 +43,12 @@ defineProps({
37 </div> 43 </div>
38 </div> 44 </div>
39 <div class="p-4"> 45 <div class="p-4">
40 - <h2 class="text-lg font-bold mb-1 line-clamp-1">{{ movie.title }}</h2> 46 + <h2 class="text-lg font-bold mb-1 line-clamp-1">
41 - <p class="text-sm text-gray-400">{{ useDateFormat(movie.release_date, "DD-MM-YYYY") }}</p> 47 + {{ movie.title }}
  48 + </h2>
  49 + <p class="text-sm text-gray-400">
  50 + {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }}
  51 + </p>
42 </div> 52 </div>
43 </section> 53 </section>
44 </template> 54 </template>
@@ -35,25 +35,49 @@ watch( @@ -35,25 +35,49 @@ watch(
35 <template> 35 <template>
36 <section> 36 <section>
37 <!-- Liste des commentaires --> 37 <!-- Liste des commentaires -->
38 - <section v-if="comments.length > 0" class="mt-10"> 38 + <section
  39 + v-if="comments.length > 0"
  40 + class="mt-10"
  41 + >
39 <h2>Commentaires publiés</h2> 42 <h2>Commentaires publiés</h2>
40 - <div v-for="(comment, index) in comments" :key="index" class="bg-gray-800 rounded-lg p-6 mb-4"> 43 + <div
  44 + v-for="(comment, index) in comments"
  45 + :key="index"
  46 + class="bg-gray-800 rounded-lg p-6 mb-4"
  47 + >
41 <div class="flex justify-between items-start mb-2"> 48 <div class="flex justify-between items-start mb-2">
42 <section> 49 <section>
43 - <h4 class="font-bold text-lg">Par {{ comment.username }}</h4> 50 + <h4 class="font-bold text-lg">
44 - <p class="text-sm text-gray-400">Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}</p> 51 + Par {{ comment.username }}
  52 + </h4>
  53 + <p class="text-sm text-gray-400">
  54 + Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}
  55 + </p>
45 </section> 56 </section>
46 <section class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold"> 57 <section class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
47 {{ comment.rating }} 58 {{ comment.rating }}
48 </section> 59 </section>
49 </div> 60 </div>
50 - <p :id="`message${index}`" class="text-gray-300">{{ comment.message }}</p> 61 + <p
  62 + :id="`message${index}`"
  63 + class="text-gray-300"
  64 + >
  65 + {{ comment.message }}
  66 + </p>
51 </div> 67 </div>
52 </section> 68 </section>
53 <!-- Si aucun commentaire --> 69 <!-- Si aucun commentaire -->
54 - <section v-else class="text-center py-8 bg-gray-800 rounded-lg mt-10"> 70 + <section
55 - <MessageSquareIcon :size="48" class="mx-auto mb-3 text-gray-600" /> 71 + v-else
56 - <p class="text-gray-400">Aucun commentaire pour le moment. Soyez le premier à donner votre avis !</p> 72 + class="text-center py-8 bg-gray-800 rounded-lg mt-10"
  73 + >
  74 + <MessageSquareIcon
  75 + :size="48"
  76 + class="mx-auto mb-3 text-gray-600"
  77 + />
  78 + <p class="text-gray-400">
  79 + Aucun commentaire pour le moment. Soyez le premier à donner votre avis !
  80 + </p>
57 </section> 81 </section>
58 </section> 82 </section>
59 </template> 83 </template>
@@ -151,7 +151,9 @@ onBeforeUnmount(() => { @@ -151,7 +151,9 @@ onBeforeUnmount(() => {
151 151
152 <template> 152 <template>
153 <section> 153 <section>
154 - <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1> 154 + <h1 class="text-4xl font-bold mb-8 text-center">
  155 + Découvrez les films populaires
  156 + </h1>
155 <!-- Barre de recherche --> 157 <!-- Barre de recherche -->
156 <ui-components-search-bar 158 <ui-components-search-bar
157 placeholder="Rechercher un film..." 159 placeholder="Rechercher un film..."
@@ -167,24 +169,46 @@ onBeforeUnmount(() => { @@ -167,24 +169,46 @@ onBeforeUnmount(() => {
167 /> 169 />
168 170
169 <!-- Liste des films --> 171 <!-- Liste des films -->
170 - <div v-else-if="movies.length > 0" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> 172 + <div
171 - <div v-for="movie in movies" :key="movie.id"> 173 + v-else-if="movies.length > 0"
  174 + class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
  175 + >
  176 + <div
  177 + v-for="movie in movies"
  178 + :key="movie.id"
  179 + >
172 <movie-card :movie="movie" /> 180 <movie-card :movie="movie" />
173 </div> 181 </div>
174 </div> 182 </div>
175 183
176 <!-- Message si aucun film trouvé --> 184 <!-- Message si aucun film trouvé -->
177 - <section v-else-if="searchQuery && !movies.length" class="text-center py-12"> 185 + <section
178 - <SearchXIcon :size="64" class="mx-auto mb-4 text-gray-600" /> 186 + v-else-if="searchQuery && !movies.length"
179 - <h3 class="text-xl font-bold mb-2">Aucun film trouvé</h3> 187 + class="text-center py-12"
180 - <p class="text-gray-400">Essayez avec un autre terme de recherche</p> 188 + >
  189 + <SearchXIcon
  190 + :size="64"
  191 + class="mx-auto mb-4 text-gray-600"
  192 + />
  193 + <h3 class="text-xl font-bold mb-2">
  194 + Aucun film trouvé
  195 + </h3>
  196 + <p class="text-gray-400">
  197 + Essayez avec un autre terme de recherche
  198 + </p>
181 </section> 199 </section>
182 200
183 <!-- Loader pour le chargement de plus de films --> 201 <!-- Loader pour le chargement de plus de films -->
184 - <ui-components-loader :is-initial-loading="isInitialLoading" :is-loading="isLoadingMore" /> 202 + <ui-components-loader
  203 + :is-initial-loading="isInitialLoading"
  204 + :is-loading="isLoadingMore"
  205 + />
185 206
186 <!-- Élément observé pour le défilement infini --> 207 <!-- Élément observé pour le défilement infini -->
187 - <div ref="loadMoreTrigger" class="h-10 mt-4" /> 208 + <div
  209 + ref="loadMoreTrigger"
  210 + class="h-10 mt-4"
  211 + />
188 </section> 212 </section>
189 </template> 213 </template>
190 214
No preview for this file type
@@ -17,7 +17,11 @@ defineProps({ @@ -17,7 +17,11 @@ defineProps({
17 <template> 17 <template>
18 <section class="mb-6"> 18 <section class="mb-6">
19 <div class="flex flex-wrap gap-2"> 19 <div class="flex flex-wrap gap-2">
20 - <span v-for="genre in genres" :key="genre.id" class="px-3 py-1 bg-gray-800 rounded-full text-sm"> 20 + <span
  21 + v-for="genre in genres"
  22 + :key="genre.id"
  23 + class="px-3 py-1 bg-gray-800 rounded-full text-sm"
  24 + >
21 {{ genre.name }} 25 {{ genre.name }}
22 </span> 26 </span>
23 </div> 27 </div>
@@ -34,8 +34,12 @@ const formatVoteCount = (count: number) => { @@ -34,8 +34,12 @@ const formatVoteCount = (count: number) => {
34 {{ score.toFixed(1) }} 34 {{ score.toFixed(1) }}
35 </section> 35 </section>
36 <section> 36 <section>
37 - <p class="font-semibold">Note TMDB</p> 37 + <p class="font-semibold">
38 - <div class="text-sm text-gray-400">{{ formatVoteCount(nbVote) }}</div> 38 + Note TMDB
  39 + </p>
  40 + <div class="text-sm text-gray-400">
  41 + {{ formatVoteCount(nbVote) }}
  42 + </div>
39 </section> 43 </section>
40 </section> 44 </section>
41 </template> 45 </template>
@@ -123,13 +123,22 @@ function handleMessageEvent(event: string) { @@ -123,13 +123,22 @@ function handleMessageEvent(event: string) {
123 } 123 }
124 " 124 "
125 > 125 >
126 - <span v-if="isSubmitting" class="flex items-center justify-center"> 126 + <span
  127 + v-if="isSubmitting"
  128 + class="flex items-center justify-center"
  129 + >
127 <span class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" /> 130 <span class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
128 Envoi en cours... 131 Envoi en cours...
129 </span> 132 </span>
130 <span v-else>Publier le commentaire</span> 133 <span v-else>Publier le commentaire</span>
131 </v-btn> 134 </v-btn>
132 - <v-btn class="mt-6 mr-4" color="primary" @click="clear"> effacer</v-btn> 135 + <v-btn
  136 + class="mt-6 mr-4"
  137 + color="primary"
  138 + @click="clear"
  139 + >
  140 + effacer
  141 + </v-btn>
133 </VForm> 142 </VForm>
134 </section> 143 </section>
135 </template> 144 </template>
@@ -17,7 +17,10 @@ defineProps({ @@ -17,7 +17,10 @@ defineProps({
17 </script> 17 </script>
18 18
19 <template> 19 <template>
20 - <section v-if="isLoading && !isInitialLoading" class="flex justify-center mt-8"> 20 + <section
  21 + v-if="isLoading && !isInitialLoading"
  22 + class="flex justify-center mt-8"
  23 + >
21 <div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin" /> 24 <div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin" />
22 </section> 25 </section>
23 </template> 26 </template>
@@ -20,9 +20,20 @@ defineProps({ @@ -20,9 +20,20 @@ defineProps({
20 <template> 20 <template>
21 <section class="w-full md:w-1/3 lg:w-1/4"> 21 <section class="w-full md:w-1/3 lg:w-1/4">
22 <div class="rounded-lg overflow-hidden shadow-lg bg-gray-800"> 22 <div class="rounded-lg overflow-hidden shadow-lg bg-gray-800">
23 - <v-img v-if="src" :alt="title" :src="`https://image.tmdb.org/t/p/w500${src}`" class="w-full h-auto" /> 23 + <v-img
24 - <div v-else class="aspect-[2/3] bg-gray-700 flex items-center justify-center"> 24 + v-if="src"
25 - <FilmIcon :size="64" class="text-gray-500" /> 25 + :alt="title"
  26 + :src="`https://image.tmdb.org/t/p/w500${src}`"
  27 + class="w-full h-auto"
  28 + />
  29 + <div
  30 + v-else
  31 + class="aspect-[2/3] bg-gray-700 flex items-center justify-center"
  32 + >
  33 + <FilmIcon
  34 + :size="64"
  35 + class="text-gray-500"
  36 + />
26 </div> 37 </div>
27 </div> 38 </div>
28 </section> 39 </section>
@@ -49,7 +49,7 @@ function handleClearSearchEvent() { @@ -49,7 +49,7 @@ function handleClearSearchEvent() {
49 class="w-full px-4 py-3 bg-gray-800 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary" 49 class="w-full px-4 py-3 bg-gray-800 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
50 type="text" 50 type="text"
51 @input="handleSearchEvent" 51 @input="handleSearchEvent"
52 - /> 52 + >
53 <button 53 <button
54 v-if="searchQuery" 54 v-if="searchQuery"
55 class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white" 55 class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
@@ -57,7 +57,10 @@ function handleClearSearchEvent() { @@ -57,7 +57,10 @@ function handleClearSearchEvent() {
57 > 57 >
58 <XIcon :size="20" /> 58 <XIcon :size="20" />
59 </button> 59 </button>
60 - <button v-else class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"> 60 + <button
  61 + v-else
  62 + class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
  63 + >
61 <SearchIcon :size="20" /> 64 <SearchIcon :size="20" />
62 </button> 65 </button>
63 </div> 66 </div>
@@ -18,8 +18,15 @@ defineProps({ @@ -18,8 +18,15 @@ defineProps({
18 18
19 <template> 19 <template>
20 <!-- Skeleton loader pendant le chargement initial --> 20 <!-- Skeleton loader pendant le chargement initial -->
21 - <section v-if="isInitialLoading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> 21 + <section
22 - <div v-for="i in skeletonNumber" :key="i" class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse"> 22 + v-if="isInitialLoading"
  23 + class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
  24 + >
  25 + <div
  26 + v-for="i in skeletonNumber"
  27 + :key="i"
  28 + class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse"
  29 + >
23 <div class="h-80 bg-gray-700" /> 30 <div class="h-80 bg-gray-700" />
24 <div class="p-4"> 31 <div class="p-4">
25 <div class="h-6 bg-gray-700 rounded mb-3" /> 32 <div class="h-6 bg-gray-700 rounded mb-3" />
@@ -79,9 +79,16 @@ watch( @@ -79,9 +79,16 @@ watch(
79 79
80 <template> 80 <template>
81 <div> 81 <div>
82 - <editor v-model="content" :api-key="runtimeConfig.public.apiTinyMceSecret" :init="init" /> 82 + <editor
  83 + v-model="content"
  84 + :api-key="runtimeConfig.public.apiTinyMceSecret"
  85 + :init="init"
  86 + />
83 </div> 87 </div>
84 - <div v-if="errorMessage" class="text-red-500 text-sm mt-1"> 88 + <div
  89 + v-if="errorMessage"
  90 + class="text-red-500 text-sm mt-1"
  91 + >
85 {{ errorMessage }} 92 {{ errorMessage }}
86 </div> 93 </div>
87 </template> 94 </template>
@@ -3,7 +3,10 @@ @@ -3,7 +3,10 @@
3 <template> 3 <template>
4 <v-container class="bg-gray-900"> 4 <v-container class="bg-gray-900">
5 <v-row class="bg-gray-900"> 5 <v-row class="bg-gray-900">
6 - <v-col cols="12" sm="4"> 6 + <v-col
  7 + cols="12"
  8 + sm="4"
  9 + >
7 <v-skeleton-loader 10 <v-skeleton-loader
8 class="mx-auto border bg-gray-800" 11 class="mx-auto border bg-gray-800"
9 color="#1f2937" 12 color="#1f2937"
@@ -12,7 +15,10 @@ @@ -12,7 +15,10 @@
12 type="paragraph, image" 15 type="paragraph, image"
13 /> 16 />
14 </v-col> 17 </v-col>
15 - <v-col cols="12" sm="8"> 18 + <v-col
  19 + cols="12"
  20 + sm="8"
  21 + >
16 <v-skeleton-loader 22 <v-skeleton-loader
17 class="mx-auto mt-10" 23 class="mx-auto mt-10"
18 color="#1f2937" 24 color="#1f2937"
1 // @ts-check 1 // @ts-check
2 import withNuxt from "./.nuxt/eslint.config.mjs"; 2 import withNuxt from "./.nuxt/eslint.config.mjs";
  3 +import js from "@eslint/js";
  4 +import eslintPluginVue from "eslint-plugin-vue";
  5 +import ts from "typescript-eslint";
3 6
4 -export default withNuxt(); 7 +export default withNuxt(
5 -// Your custom configs here 8 + // Your custom configs here
  9 + js.configs.recommended,
  10 + ...ts.configs.recommended,
  11 + ...eslintPluginVue.configs["flat/recommended"],
  12 + {
  13 + files: ["*.vue", "**/*.vue"],
  14 + languageOptions: {
  15 + parserOptions: {
  16 + parser: "@typescript-eslint/parser",
  17 + },
  18 + },
  19 + rules: {
  20 + "vue/multi-word-component-names": "off",
  21 + },
  22 + },
  23 + // your custom flat configs go here, for example:
  24 + // {
  25 + // files: ['**/*.ts', '**/*.tsx'],
  26 + // rules: {
  27 + // 'no-console': 'off' // allow console.log in TypeScript files
  28 + // }
  29 + // },
  30 + // {
  31 + // ...
  32 + // }
  33 +);
  34 +
  35 +// S'inspirer de ça :
  36 +//
  37 +// export default ts.config(
  38 +// js.configs.recommended,
  39 +// ...ts.configs.recommended,
  40 +// ...eslintPluginVue.configs['flat/recommended'],
  41 +// {
  42 +// files: ['*.vue', '**/*.vue'],
  43 +// languageOptions: {
  44 +// parserOptions: {
  45 +// parser: '@typescript-eslint/parser'
  46 +// }
  47 +// },
  48 +// rules: {
  49 +// 'vue/multi-word-component-names': 'off'
  50 +// }
  51 +// }
  52 +// )
@@ -9,8 +9,8 @@ export interface CreditInterface { @@ -9,8 +9,8 @@ export interface CreditInterface {
9 9
10 export type CreditsResponse = { 10 export type CreditsResponse = {
11 id: number; 11 id: number;
12 - cast: CreditInterface[], 12 + cast: CreditInterface[];
13 - crew: CreditInterface[], 13 + crew: CreditInterface[];
14 movie_id: unknown; 14 movie_id: unknown;
15 movie: MovieInterface; 15 movie: MovieInterface;
16 -} 16 +};
1 -import type { CreditInterface, CreditsResponse } from "~/interfaces/credit"; 1 +import type { CreditsResponse } from "~/interfaces/credit";
2 2
3 export interface MovieInterface { 3 export interface MovieInterface {
4 id: number; 4 id: number;
@@ -12,7 +12,7 @@ export interface MovieInterface { @@ -12,7 +12,7 @@ export interface MovieInterface {
12 popularity: number; 12 popularity: number;
13 poster_path: string | null; 13 poster_path: string | null;
14 release_date: string; 14 release_date: string;
15 - runtime: number 15 + runtime: number;
16 title: string; 16 title: string;
17 video: boolean; 17 video: boolean;
18 vote_average: number; 18 vote_average: number;
@@ -21,6 +21,6 @@ export interface MovieInterface { @@ -21,6 +21,6 @@ export interface MovieInterface {
21 } 21 }
22 22
23 export type Genre = { 23 export type Genre = {
24 - id: number, 24 + id: number;
25 - name: string, 25 + name: string;
26 -} 26 +};
@@ -22,10 +22,10 @@ export class MovieComment extends Model { @@ -22,10 +22,10 @@ export class MovieComment extends Model {
22 return { 22 return {
23 // Attributs. 23 // Attributs.
24 id: this.uid(), 24 id: this.uid(),
25 - createdAt: this.string(''), 25 + createdAt: this.string(""),
26 - username: this.string(''), 26 + username: this.string(""),
27 - message: this.string(''), 27 + message: this.string(""),
28 - rating: this.string(''), 28 + rating: this.string(""),
29 // Relations. 29 // Relations.
30 movie_id: this.attr(null), 30 movie_id: this.attr(null),
31 movie: this.belongsTo(Movie, "movie_id", "id"), 31 movie: this.belongsTo(Movie, "movie_id", "id"),
This diff is collapsed. Click to expand it.
@@ -9,7 +9,7 @@ @@ -9,7 +9,7 @@
9 "generate": "nuxt generate", 9 "generate": "nuxt generate",
10 "preview": "nuxt preview", 10 "preview": "nuxt preview",
11 "postinstall": "nuxt prepare", 11 "postinstall": "nuxt prepare",
12 - "lint:js": "eslint --ext \".ts,.vue\" .", 12 + "lint:js": "eslint --ext \".ts,.vue\" . --fix",
13 "lint:prettier": "prettier --write .", 13 "lint:prettier": "prettier --write .",
14 "lint": "npm run lint:js && npm run lint:prettier", 14 "lint": "npm run lint:js && npm run lint:prettier",
15 "format": "prettier --write \"{components,pages,plugins,middleware,layouts,composables,assets}/**/*.{js,jsx,ts,tsx,vue,html,css,scss,json,md}\"", 15 "format": "prettier --write \"{components,pages,plugins,middleware,layouts,composables,assets}/**/*.{js,jsx,ts,tsx,vue,html,css,scss,json,md}\"",
@@ -153,9 +153,16 @@ onMounted(() => { @@ -153,9 +153,16 @@ onMounted(() => {
153 <ui-components-skeleton-movie-detail-loader v-if="isLoading" /> 153 <ui-components-skeleton-movie-detail-loader v-if="isLoading" />
154 154
155 <!-- Contenu du film --> 155 <!-- Contenu du film -->
156 - <div v-else-if="movie" class="relative"> 156 + <div
  157 + v-else-if="movie"
  158 + class="relative"
  159 + >
157 <!-- Backdrop image --> 160 <!-- Backdrop image -->
158 - <ui-components-backdrop-image v-if="movie.backdrop_path" :src="movie.backdrop_path" :title="movie.title" /> 161 + <ui-components-backdrop-image
  162 + v-if="movie.backdrop_path"
  163 + :src="movie.backdrop_path"
  164 + :title="movie.title"
  165 + />
159 166
160 <!-- Contenu principal --> 167 <!-- Contenu principal -->
161 <div class="container mx-auto px-4 py-8 relative z-10 pt-20"> 168 <div class="container mx-auto px-4 py-8 relative z-10 pt-20">
@@ -163,37 +170,64 @@ onMounted(() => { @@ -163,37 +170,64 @@ onMounted(() => {
163 class="flex items-center text-gray-400 hover:text-white mb-8 transition-colors" 170 class="flex items-center text-gray-400 hover:text-white mb-8 transition-colors"
164 @click="navigateTo('/')" 171 @click="navigateTo('/')"
165 > 172 >
166 - <ArrowLeftIcon :size="20" class="mr-2" /> 173 + <ArrowLeftIcon
  174 + :size="20"
  175 + class="mr-2"
  176 + />
167 Retour 177 Retour
168 </button> 178 </button>
169 179
170 <div class="flex flex-col md:flex-row gap-8"> 180 <div class="flex flex-col md:flex-row gap-8">
171 <!-- Poster --> 181 <!-- Poster -->
172 - <ui-components-poster v-if="movie.poster_path" :src="movie.poster_path" :title="movie.title" /> 182 + <ui-components-poster
  183 + v-if="movie.poster_path"
  184 + :src="movie.poster_path"
  185 + :title="movie.title"
  186 + />
173 187
174 <!-- Informations du film --> 188 <!-- Informations du film -->
175 <section class="w-full md:w-2/3 lg:w-3/4"> 189 <section class="w-full md:w-2/3 lg:w-3/4">
176 - <h1 class="text-3xl md:text-4xl font-bold mb-2">{{ movie.title }}</h1> 190 + <h1 class="text-3xl md:text-4xl font-bold mb-2">
177 - <p v-if="movie.release_date" class="text-gray-400 mb-4"> 191 + {{ movie.title }}
  192 + </h1>
  193 + <p
  194 + v-if="movie.release_date"
  195 + class="text-gray-400 mb-4"
  196 + >
178 {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }} • {{ formatRuntime(movie.runtime) }} 197 {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }} • {{ formatRuntime(movie.runtime) }}
179 </p> 198 </p>
180 199
181 <!-- Note et votes --> 200 <!-- Note et votes -->
182 - <details-score-and-vote :nb-vote="movie.vote_count" :score="movie.vote_average" /> 201 + <details-score-and-vote
  202 + :nb-vote="movie.vote_count"
  203 + :score="movie.vote_average"
  204 + />
183 205
184 <!-- Genres --> 206 <!-- Genres -->
185 <details-movie-gender :genres="movie.genres" /> 207 <details-movie-gender :genres="movie.genres" />
186 208
187 <!-- Synopsis --> 209 <!-- Synopsis -->
188 <div class="mb-6"> 210 <div class="mb-6">
189 - <h2 class="text-xl font-bold mb-2">Synopsis</h2> 211 + <h2 class="text-xl font-bold mb-2">
190 - <p class="text-gray-300">{{ movie.overview || "Aucun synopsis disponible." }}</p> 212 + Synopsis
  213 + </h2>
  214 + <p class="text-gray-300">
  215 + {{ movie.overview || "Aucun synopsis disponible." }}
  216 + </p>
191 </div> 217 </div>
192 218
193 <!-- Réalisateur et têtes d'affiche --> 219 <!-- Réalisateur et têtes d'affiche -->
194 - <div v-if="movie.credit" class="mb-6"> 220 + <div
195 - <h2 class="text-xl font-bold mb-2">Équipe</h2> 221 + v-if="movie.credit"
196 - <div v-if="director" class="mb-2"> 222 + class="mb-6"
  223 + >
  224 + <h2 class="text-xl font-bold mb-2">
  225 + Équipe
  226 + </h2>
  227 + <div
  228 + v-if="director"
  229 + class="mb-2"
  230 + >
197 <span class="font-semibold">Réalisateur:</span> {{ director.name }} 231 <span class="font-semibold">Réalisateur:</span> {{ director.name }}
198 </div> 232 </div>
199 <div v-if="movie.credit.cast.length > 0"> 233 <div v-if="movie.credit.cast.length > 0">
@@ -208,7 +242,9 @@ onMounted(() => { @@ -208,7 +242,9 @@ onMounted(() => {
208 </div> 242 </div>
209 </div> 243 </div>
210 <!-- Comments form. --> 244 <!-- Comments form. -->
211 - <h3 class="text-xl font-bold mt-8 mb-4">Ajouter un commentaire</h3> 245 + <h3 class="text-xl font-bold mt-8 mb-4">
  246 + Ajouter un commentaire
  247 + </h3>
212 <form-movie-comment-form @event:submit="handleSubmitEvent" /> 248 <form-movie-comment-form @event:submit="handleSubmitEvent" />
213 249
214 <!-- Liste des commentaires --> 250 <!-- Liste des commentaires -->
@@ -219,10 +255,20 @@ onMounted(() => { @@ -219,10 +255,20 @@ onMounted(() => {
219 </div> 255 </div>
220 256
221 <!-- Erreur --> 257 <!-- Erreur -->
222 - <section v-else class="container mx-auto px-4 py-16 text-center"> 258 + <section
223 - <AlertTriangleIcon :size="64" class="mx-auto mb-4 text-red-500" /> 259 + v-else
224 - <h2 class="text-2xl font-bold mb-2">Film non trouvé</h2> 260 + class="container mx-auto px-4 py-16 text-center"
225 - <p class="text-gray-400 mb-6">Nous n'avons pas pu trouver le film que vous cherchez.</p> 261 + >
  262 + <AlertTriangleIcon
  263 + :size="64"
  264 + class="mx-auto mb-4 text-red-500"
  265 + />
  266 + <h2 class="text-2xl font-bold mb-2">
  267 + Film non trouvé
  268 + </h2>
  269 + <p class="text-gray-400 mb-6">
  270 + Nous n'avons pas pu trouver le film que vous cherchez.
  271 + </p>
226 <button 272 <button
227 class="px-6 py-2 bg-primary text-white font-bold rounded-md hover:bg-primary-dark transition-colors" 273 class="px-6 py-2 bg-primary text-white font-bold rounded-md hover:bg-primary-dark transition-colors"
228 @click="navigateTo('/')" 274 @click="navigateTo('/')"
1 export type Comment = { 1 export type Comment = {
2 - username: string 2 + username: string;
3 - message: string 3 + message: string;
4 - rating: number 4 + rating: number;
5 -} 5 +};
1 // vite.config.js 1 // vite.config.js
2 -import vue from '@vitejs/plugin-vue' 2 +import vue from "@vitejs/plugin-vue";
3 3
4 export default { 4 export default {
5 plugins: [vue()], 5 plugins: [vue()],
@@ -8,4 +8,4 @@ export default { @@ -8,4 +8,4 @@ export default {
8 environment: "happy-dom", 8 environment: "happy-dom",
9 // Additional test configurations can be added here 9 // Additional test configurations can be added here
10 }, 10 },
11 -} 11 +};
1 -import { defineVitestConfig } from '@nuxt/test-utils/config' 1 +import { defineVitestConfig } from "@nuxt/test-utils/config";
2 -import vue from '@vitejs/plugin-vue' 2 +import { fileURLToPath } from "node:url";
3 -import { fileURLToPath } from 'node:url'  
4 3
5 export default defineVitestConfig({ 4 export default defineVitestConfig({
6 /** 5 /**
@@ -8,31 +7,31 @@ export default defineVitestConfig({ @@ -8,31 +7,31 @@ export default defineVitestConfig({
8 * any custom Vitest config you require 7 * any custom Vitest config you require
9 */ 8 */
10 test: { 9 test: {
11 - environment: 'nuxt', 10 + environment: "nuxt",
12 globals: true, 11 globals: true,
13 // you can optionally set Nuxt-specific environment options 12 // you can optionally set Nuxt-specific environment options
14 environmentOptions: { 13 environmentOptions: {
15 nuxt: { 14 nuxt: {
16 - rootDir: fileURLToPath(new URL('./', import.meta.url)), 15 + rootDir: fileURLToPath(new URL("./", import.meta.url)),
17 - domEnvironment: 'happy-dom', // 'happy-dom' (default) or 'jsdom' 16 + domEnvironment: "happy-dom", // 'happy-dom' (default) or 'jsdom'
18 overrides: { 17 overrides: {
19 // other Nuxt config you want to pass 18 // other Nuxt config you want to pass
20 }, 19 },
21 mock: { 20 mock: {
22 intersectionObserver: true, 21 intersectionObserver: true,
23 indexedDb: true, 22 indexedDb: true,
24 - } 23 + },
25 }, 24 },
26 }, 25 },
27 coverage: { 26 coverage: {
28 - provider: 'v8', 27 + provider: "v8",
29 - reporter: ['text', 'json', 'html'], 28 + reporter: ["text", "json", "html"],
30 - } 29 + },
31 }, 30 },
32 resolve: { 31 resolve: {
33 alias: { 32 alias: {
34 - '~': fileURLToPath(new URL('./', import.meta.url)), 33 + "~": fileURLToPath(new URL("./", import.meta.url)),
35 - '@': fileURLToPath(new URL('./', import.meta.url)), 34 + "@": fileURLToPath(new URL("./", import.meta.url)),
36 - } 35 + },
37 - } 36 + },
38 -}) 37 +});