Bruno Predot / tmdb_test

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

Revert "Modification de la config es-lint + fix." 

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