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 296 additions and 92 deletions
... ... @@ -26,9 +26,15 @@ defineProps({
:alt="movie.title"
:src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
class="absolute inset-0 w-full h-full object-cover"
/>
<div v-else class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center">
<FilmIcon :size="48" class="text-gray-500" />
>
<div
v-else
class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center"
>
<FilmIcon
:size="48"
class="text-gray-500"
/>
</div>
<div
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({
</div>
</div>
<div class="p-4">
<h2 class="text-lg font-bold mb-1 line-clamp-1">{{ movie.title }}</h2>
<p class="text-sm text-gray-400">{{ useDateFormat(movie.release_date, "DD-MM-YYYY") }}</p>
<h2 class="text-lg font-bold mb-1 line-clamp-1">
{{ movie.title }}
</h2>
<p class="text-sm text-gray-400">
{{ useDateFormat(movie.release_date, "DD-MM-YYYY") }}
</p>
</div>
</section>
</template>
... ...
... ... @@ -35,25 +35,49 @@ watch(
<template>
<section>
<!-- Liste des commentaires -->
<section v-if="comments.length > 0" class="mt-10">
<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
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">
<section>
<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>
<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>
</section>
<section class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
{{ comment.rating }}
</section>
</div>
<p :id="`message${index}`" class="text-gray-300">{{ comment.message }}</p>
<p
:id="`message${index}`"
class="text-gray-300"
>
{{ comment.message }}
</p>
</div>
</section>
<!-- Si aucun commentaire -->
<section v-else class="text-center py-8 bg-gray-800 rounded-lg mt-10">
<MessageSquareIcon :size="48" class="mx-auto mb-3 text-gray-600" />
<p class="text-gray-400">Aucun commentaire pour le moment. Soyez le premier à donner votre avis !</p>
<section
v-else
class="text-center py-8 bg-gray-800 rounded-lg mt-10"
>
<MessageSquareIcon
:size="48"
class="mx-auto mb-3 text-gray-600"
/>
<p class="text-gray-400">
Aucun commentaire pour le moment. Soyez le premier à donner votre avis !
</p>
</section>
</section>
</template>
... ...
... ... @@ -151,7 +151,9 @@ onBeforeUnmount(() => {
<template>
<section>
<h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
<h1 class="text-4xl font-bold mb-8 text-center">
Découvrez les films populaires
</h1>
<!-- Barre de recherche -->
<ui-components-search-bar
placeholder="Rechercher un film..."
... ... @@ -167,24 +169,46 @@ onBeforeUnmount(() => {
/>
<!-- Liste des films -->
<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">
<div v-for="movie in movies" :key="movie.id">
<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"
>
<div
v-for="movie in movies"
:key="movie.id"
>
<movie-card :movie="movie" />
</div>
</div>
<!-- Message si aucun film trouvé -->
<section v-else-if="searchQuery && !movies.length" class="text-center py-12">
<SearchXIcon :size="64" class="mx-auto mb-4 text-gray-600" />
<h3 class="text-xl font-bold mb-2">Aucun film trouvé</h3>
<p class="text-gray-400">Essayez avec un autre terme de recherche</p>
<section
v-else-if="searchQuery && !movies.length"
class="text-center py-12"
>
<SearchXIcon
:size="64"
class="mx-auto mb-4 text-gray-600"
/>
<h3 class="text-xl font-bold mb-2">
Aucun film trouvé
</h3>
<p class="text-gray-400">
Essayez avec un autre terme de recherche
</p>
</section>
<!-- Loader pour le chargement de plus de films -->
<ui-components-loader :is-initial-loading="isInitialLoading" :is-loading="isLoadingMore" />
<ui-components-loader
:is-initial-loading="isInitialLoading"
:is-loading="isLoadingMore"
/>
<!-- Élément observé pour le défilement infini -->
<div ref="loadMoreTrigger" class="h-10 mt-4" />
<div
ref="loadMoreTrigger"
class="h-10 mt-4"
/>
</section>
</template>
... ...
No preview for this file type
... ... @@ -17,7 +17,11 @@ defineProps({
<template>
<section class="mb-6">
<div class="flex flex-wrap gap-2">
<span v-for="genre in genres" :key="genre.id" class="px-3 py-1 bg-gray-800 rounded-full text-sm">
<span
v-for="genre in genres"
:key="genre.id"
class="px-3 py-1 bg-gray-800 rounded-full text-sm"
>
{{ genre.name }}
</span>
</div>
... ...
... ... @@ -34,8 +34,12 @@ const formatVoteCount = (count: number) => {
{{ score.toFixed(1) }}
</section>
<section>
<p class="font-semibold">Note TMDB</p>
<div class="text-sm text-gray-400">{{ formatVoteCount(nbVote) }}</div>
<p class="font-semibold">
Note TMDB
</p>
<div class="text-sm text-gray-400">
{{ formatVoteCount(nbVote) }}
</div>
</section>
</section>
</template>
... ...
... ... @@ -123,13 +123,22 @@ function handleMessageEvent(event: string) {
}
"
>
<span v-if="isSubmitting" class="flex items-center justify-center">
<span
v-if="isSubmitting"
class="flex items-center justify-center"
>
<span class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
Envoi en cours...
</span>
<span v-else>Publier le commentaire</span>
</v-btn>
<v-btn class="mt-6 mr-4" color="primary" @click="clear"> effacer</v-btn>
<v-btn
class="mt-6 mr-4"
color="primary"
@click="clear"
>
effacer
</v-btn>
</VForm>
</section>
</template>
... ...
... ... @@ -17,7 +17,10 @@ defineProps({
</script>
<template>
<section v-if="isLoading && !isInitialLoading" class="flex justify-center mt-8">
<section
v-if="isLoading && !isInitialLoading"
class="flex justify-center mt-8"
>
<div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin" />
</section>
</template>
... ...
... ... @@ -20,9 +20,20 @@ defineProps({
<template>
<section class="w-full md:w-1/3 lg:w-1/4">
<div class="rounded-lg overflow-hidden shadow-lg bg-gray-800">
<v-img v-if="src" :alt="title" :src="`https://image.tmdb.org/t/p/w500${src}`" class="w-full h-auto" />
<div v-else class="aspect-[2/3] bg-gray-700 flex items-center justify-center">
<FilmIcon :size="64" class="text-gray-500" />
<v-img
v-if="src"
:alt="title"
:src="`https://image.tmdb.org/t/p/w500${src}`"
class="w-full h-auto"
/>
<div
v-else
class="aspect-[2/3] bg-gray-700 flex items-center justify-center"
>
<FilmIcon
:size="64"
class="text-gray-500"
/>
</div>
</div>
</section>
... ...
... ... @@ -49,7 +49,7 @@ function handleClearSearchEvent() {
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"
type="text"
@input="handleSearchEvent"
/>
>
<button
v-if="searchQuery"
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
... ... @@ -57,7 +57,10 @@ function handleClearSearchEvent() {
>
<XIcon :size="20" />
</button>
<button v-else class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
<button
v-else
class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
>
<SearchIcon :size="20" />
</button>
</div>
... ...
... ... @@ -18,8 +18,15 @@ defineProps({
<template>
<!-- Skeleton loader pendant le chargement initial -->
<section v-if="isInitialLoading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div v-for="i in skeletonNumber" :key="i" class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse">
<section
v-if="isInitialLoading"
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
>
<div
v-for="i in skeletonNumber"
:key="i"
class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse"
>
<div class="h-80 bg-gray-700" />
<div class="p-4">
<div class="h-6 bg-gray-700 rounded mb-3" />
... ...
... ... @@ -79,9 +79,16 @@ watch(
<template>
<div>
<editor v-model="content" :api-key="runtimeConfig.public.apiTinyMceSecret" :init="init" />
<editor
v-model="content"
:api-key="runtimeConfig.public.apiTinyMceSecret"
:init="init"
/>
</div>
<div v-if="errorMessage" class="text-red-500 text-sm mt-1">
<div
v-if="errorMessage"
class="text-red-500 text-sm mt-1"
>
{{ errorMessage }}
</div>
</template>
... ...
... ... @@ -3,7 +3,10 @@
<template>
<v-container class="bg-gray-900">
<v-row class="bg-gray-900">
<v-col cols="12" sm="4">
<v-col
cols="12"
sm="4"
>
<v-skeleton-loader
class="mx-auto border bg-gray-800"
color="#1f2937"
... ... @@ -12,7 +15,10 @@
type="paragraph, image"
/>
</v-col>
<v-col cols="12" sm="8">
<v-col
cols="12"
sm="8"
>
<v-skeleton-loader
class="mx-auto mt-10"
color="#1f2937"
... ...
// @ts-check
import withNuxt from "./.nuxt/eslint.config.mjs";
import js from "@eslint/js";
import eslintPluginVue from "eslint-plugin-vue";
import ts from "typescript-eslint";
export default withNuxt();
// Your custom configs here
export default withNuxt(
// Your custom configs here
js.configs.recommended,
...ts.configs.recommended,
...eslintPluginVue.configs["flat/recommended"],
{
files: ["*.vue", "**/*.vue"],
languageOptions: {
parserOptions: {
parser: "@typescript-eslint/parser",
},
},
rules: {
"vue/multi-word-component-names": "off",
},
},
// your custom flat configs go here, for example:
// {
// files: ['**/*.ts', '**/*.tsx'],
// rules: {
// 'no-console': 'off' // allow console.log in TypeScript files
// }
// },
// {
// ...
// }
);
// S'inspirer de ça :
//
// export default ts.config(
// js.configs.recommended,
// ...ts.configs.recommended,
// ...eslintPluginVue.configs['flat/recommended'],
// {
// files: ['*.vue', '**/*.vue'],
// languageOptions: {
// parserOptions: {
// parser: '@typescript-eslint/parser'
// }
// },
// rules: {
// 'vue/multi-word-component-names': 'off'
// }
// }
// )
... ...
... ... @@ -9,8 +9,8 @@ export interface CreditInterface {
export type CreditsResponse = {
id: number;
cast: CreditInterface[],
crew: CreditInterface[],
cast: CreditInterface[];
crew: CreditInterface[];
movie_id: unknown;
movie: MovieInterface;
}
};
... ...
import type { CreditInterface, CreditsResponse } from "~/interfaces/credit";
import type { CreditsResponse } from "~/interfaces/credit";
export interface MovieInterface {
id: number;
... ... @@ -12,7 +12,7 @@ export interface MovieInterface {
popularity: number;
poster_path: string | null;
release_date: string;
runtime: number
runtime: number;
title: string;
video: boolean;
vote_average: number;
... ... @@ -21,6 +21,6 @@ export interface MovieInterface {
}
export type Genre = {
id: number,
name: string,
}
\ No newline at end of file
id: number;
name: string;
};
... ...
... ... @@ -22,10 +22,10 @@ export class MovieComment extends Model {
return {
// Attributs.
id: this.uid(),
createdAt: this.string(''),
username: this.string(''),
message: this.string(''),
rating: this.string(''),
createdAt: this.string(""),
username: this.string(""),
message: this.string(""),
rating: this.string(""),
// Relations.
movie_id: this.attr(null),
movie: this.belongsTo(Movie, "movie_id", "id"),
... ...
This diff is collapsed. Click to expand it.
... ... @@ -9,7 +9,7 @@
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"lint:js": "eslint --ext \".ts,.vue\" .",
"lint:js": "eslint --ext \".ts,.vue\" . --fix",
"lint:prettier": "prettier --write .",
"lint": "npm run lint:js && npm run lint:prettier",
"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(() => {
<ui-components-skeleton-movie-detail-loader v-if="isLoading" />
<!-- Contenu du film -->
<div v-else-if="movie" class="relative">
<div
v-else-if="movie"
class="relative"
>
<!-- Backdrop image -->
<ui-components-backdrop-image v-if="movie.backdrop_path" :src="movie.backdrop_path" :title="movie.title" />
<ui-components-backdrop-image
v-if="movie.backdrop_path"
:src="movie.backdrop_path"
:title="movie.title"
/>
<!-- Contenu principal -->
<div class="container mx-auto px-4 py-8 relative z-10 pt-20">
... ... @@ -163,37 +170,64 @@ onMounted(() => {
class="flex items-center text-gray-400 hover:text-white mb-8 transition-colors"
@click="navigateTo('/')"
>
<ArrowLeftIcon :size="20" class="mr-2" />
<ArrowLeftIcon
:size="20"
class="mr-2"
/>
Retour
</button>
<div class="flex flex-col md:flex-row gap-8">
<!-- Poster -->
<ui-components-poster v-if="movie.poster_path" :src="movie.poster_path" :title="movie.title" />
<ui-components-poster
v-if="movie.poster_path"
:src="movie.poster_path"
:title="movie.title"
/>
<!-- Informations du film -->
<section class="w-full md:w-2/3 lg:w-3/4">
<h1 class="text-3xl md:text-4xl font-bold mb-2">{{ movie.title }}</h1>
<p v-if="movie.release_date" class="text-gray-400 mb-4">
<h1 class="text-3xl md:text-4xl font-bold mb-2">
{{ movie.title }}
</h1>
<p
v-if="movie.release_date"
class="text-gray-400 mb-4"
>
{{ useDateFormat(movie.release_date, "DD-MM-YYYY") }} • {{ formatRuntime(movie.runtime) }}
</p>
<!-- Note et votes -->
<details-score-and-vote :nb-vote="movie.vote_count" :score="movie.vote_average" />
<details-score-and-vote
:nb-vote="movie.vote_count"
:score="movie.vote_average"
/>
<!-- Genres -->
<details-movie-gender :genres="movie.genres" />
<!-- Synopsis -->
<div class="mb-6">
<h2 class="text-xl font-bold mb-2">Synopsis</h2>
<p class="text-gray-300">{{ movie.overview || "Aucun synopsis disponible." }}</p>
<h2 class="text-xl font-bold mb-2">
Synopsis
</h2>
<p class="text-gray-300">
{{ movie.overview || "Aucun synopsis disponible." }}
</p>
</div>
<!-- Réalisateur et têtes d'affiche -->
<div v-if="movie.credit" class="mb-6">
<h2 class="text-xl font-bold mb-2">Équipe</h2>
<div v-if="director" class="mb-2">
<div
v-if="movie.credit"
class="mb-6"
>
<h2 class="text-xl font-bold mb-2">
Équipe
</h2>
<div
v-if="director"
class="mb-2"
>
<span class="font-semibold">Réalisateur:</span> {{ director.name }}
</div>
<div v-if="movie.credit.cast.length > 0">
... ... @@ -208,7 +242,9 @@ onMounted(() => {
</div>
</div>
<!-- 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" />
<!-- Liste des commentaires -->
... ... @@ -219,10 +255,20 @@ onMounted(() => {
</div>
<!-- Erreur -->
<section v-else class="container mx-auto px-4 py-16 text-center">
<AlertTriangleIcon :size="64" class="mx-auto mb-4 text-red-500" />
<h2 class="text-2xl font-bold mb-2">Film non trouvé</h2>
<p class="text-gray-400 mb-6">Nous n'avons pas pu trouver le film que vous cherchez.</p>
<section
v-else
class="container mx-auto px-4 py-16 text-center"
>
<AlertTriangleIcon
:size="64"
class="mx-auto mb-4 text-red-500"
/>
<h2 class="text-2xl font-bold mb-2">
Film non trouvé
</h2>
<p class="text-gray-400 mb-6">
Nous n'avons pas pu trouver le film que vous cherchez.
</p>
<button
class="px-6 py-2 bg-primary text-white font-bold rounded-md hover:bg-primary-dark transition-colors"
@click="navigateTo('/')"
... ...
export type Comment = {
username: string
message: string
rating: number
}
\ No newline at end of file
username: string;
message: string;
rating: number;
};
... ...
// vite.config.js
import vue from '@vitejs/plugin-vue'
import vue from "@vitejs/plugin-vue";
export default {
plugins: [vue()],
... ... @@ -8,4 +8,4 @@ export default {
environment: "happy-dom",
// Additional test configurations can be added here
},
}
\ No newline at end of file
};
... ...
import { defineVitestConfig } from '@nuxt/test-utils/config'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath } from 'node:url'
import { defineVitestConfig } from "@nuxt/test-utils/config";
import { fileURLToPath } from "node:url";
export default defineVitestConfig({
/**
... ... @@ -8,31 +7,31 @@ export default defineVitestConfig({
* any custom Vitest config you require
*/
test: {
environment: 'nuxt',
environment: "nuxt",
globals: true,
// you can optionally set Nuxt-specific environment options
environmentOptions: {
nuxt: {
rootDir: fileURLToPath(new URL('./', import.meta.url)),
domEnvironment: 'happy-dom', // 'happy-dom' (default) or 'jsdom'
rootDir: fileURLToPath(new URL("./", import.meta.url)),
domEnvironment: "happy-dom", // 'happy-dom' (default) or 'jsdom'
overrides: {
// other Nuxt config you want to pass
},
mock: {
intersectionObserver: true,
indexedDb: true,
}
},
},
},
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html'],
}
provider: "v8",
reporter: ["text", "json", "html"],
},
},
resolve: {
alias: {
'~': fileURLToPath(new URL('./', import.meta.url)),
'@': fileURLToPath(new URL('./', import.meta.url)),
}
}
})
"~": fileURLToPath(new URL("./", import.meta.url)),
"@": fileURLToPath(new URL("./", import.meta.url)),
},
},
});
... ...