2025-03-17

src/pages/AddEntryPage.vue

@@ -3,7 +3,10 @@
   import type { TmdbGenreName } from "@/libs/apis/tmdb/schemas/genres.ts";
   import type { ArtWorkTitle } from "@/libs/apis/tmdb/schemas/works.ts";
 
+  import AddDiaryEntryForm from "@/components/entries/AddDiaryEntryForm.vue";
+  import { getCountriesFromCompanies } from "@/libs/apis/tmdb/countries.ts";
   import { getMainMovieCrew } from "@/libs/apis/tmdb/crew.ts";
+  import { getLanguagesFromSpokenLanguages } from "@/libs/apis/tmdb/languages";
   import { TmdbGenre } from "@/libs/apis/tmdb/schemas/genres.ts";
   import { generateDitheredBufferFromUrl } from "@/libs/utils/images.ts";
   import { convertToMillions } from "@/libs/utils/numbers.ts";
@@ -11,15 +14,19 @@
   import { RuntimeClient } from "@/services/runtime-client.ts";
   import { useEntryStore } from "@/stores/entry.ts";
   import { canvasFromPixelBuffer } from "@thi.ng/pixel";
-  import { Array as Arr, Effect, pipe, String as Str } from "effect";
+  import { Array as Arr, Effect, Option, pipe, String as Str } from "effect";
+  import { isNotUndefined } from "effect/Predicate";
   import { ref, type Ref, type ShallowRef, useTemplateRef, watch } from "vue";
   import { useRouter } from "vue-router";
 
   // Types
   interface AddEntryDisplayData {
     budget: string;
+    countries: string[];
     genres: TmdbGenreName[];
+    hasDiaryEntry: boolean;
     hasUniqueOriginalTitle: boolean;
+    languages: string[];
     mainCrew: MovieMainCrew;
     originalLanguage: string;
     originalTitle: ArtWorkTitle;
@@ -55,9 +62,14 @@
     // Récupère les données à afficher.
     displayData.value = {
       budget: entryStore.tmdbData.budget ? `${String(convertToMillions(entryStore.tmdbData.budget))} M$` : "?",
+      countries: getCountriesFromCompanies(entryStore.tmdbData.production_companies).pipe(
+        Option.getOrElse(() => []),
+      ),
       genres: Arr.map(entryStore.tmdbData.genres, (genre: TmdbGenre) => genre.name),
+      hasDiaryEntry: isNotUndefined(entryStore.diaryEntry.artWorkId),
       hasUniqueOriginalTitle:
         Str.toLowerCase(entryStore.diaryEntry.originalTitle) !== Str.toLowerCase(entryStore.diaryEntry.title),
+      languages: getLanguagesFromSpokenLanguages(entryStore.tmdbData.spoken_languages),
       mainCrew: getMainMovieCrew(entryStore.tmdbData.credits.crew),
       originalLanguage: entryStore.tmdbData.original_language,
       originalTitle: entryStore.diaryEntry.originalTitle,
@@ -133,17 +145,34 @@
           </div>
         </div>
 
+        <div class="countries-languages cluster">
+          <ul class="countries inline-list">
+            <strong>Pays</strong>
+            <li v-for="country of displayData?.countries" :key="Str.toLowerCase(country)">{{ country }}</li>
+          </ul>
+
+          <ul class="languages inline-list">
+            <strong>Langues</strong>
+            <li v-for="language of displayData?.languages" :key="Str.toLowerCase(language)">{{ language }}</li>
+          </ul>
+        </div>
+
         <hr>
 
         <p v-if="displayData?.tagline" class="tagline">{{ displayData?.tagline }}</p>
         <p class="overview">{{ displayData?.overview }}</p>
 
-        <ul class="genres">
+        <ul class="genres inline-list">
           <strong>Genres</strong>
           <li v-for="genre of displayData?.genres" :key="Str.toLowerCase(genre)">{{ genre }}</li>
         </ul>
 
         <hr>
+
+        <!-- Données du Journal -->
+        <div v-if="!displayData?.hasDiaryEntry" class="diary-entry-state">
+          <AddDiaryEntryForm></AddDiaryEntryForm>
+        </div>
       </div>
     </div>
   </div>
@@ -198,7 +227,7 @@
     text-transform: uppercase;
   }
 
-  .genres {
+  .inline-list {
     display: inline-flex;
 
     strong {
@@ -215,4 +244,8 @@
       }
     }
   }
+
+  .diary-entry-state {
+    margin-block-end: var(--s2);
+  }
 </style>