feat [both]: fill values from film

front/components/admin/form.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="columns">
-    <div class="column">
+    <div class="column is-three-fifths">
       <div class="field">
         <label class="label">Date de projection</label>
         <div class="control">
@@ -140,13 +140,14 @@
       </div>
     </div>
 
-    <div class="column">
+    <div class="column is-two-fifths">
       <!-- doc : https://bluefantail.github.io/bulma-list/ -->
       <div class="list has-visible-pointer-controls">
         <div
           v-for="(foundFilm, index) of foundFilms"
           :key="foundFilm.id"
           class="list-item"
+          :class="{ 'is-active': isChosen(foundFilm) }"
         >
           <div class="list-item-image">
             <figure class="image is-64x64">
@@ -161,8 +162,16 @@
           </div>
           <div class="list-item-controls">
             <div class="buttons is-right">
-              <button class="button" @click="fill(foundFilm.id)">
-                Préremplir
+              <button
+                v-if="isChosen(foundFilm)"
+                class="button"
+                @click="fillAll"
+              >
+                <v-icon name="bi-arrow-bar-left" />
+                Remplir tout
+              </button>
+              <button v-else class="button" @click="choose(foundFilm.id)">
+                Choisir
               </button>
             </div>
           </div>
@@ -186,7 +195,7 @@ defineProps({
     },
   },
 })
-const emits = defineEmits(["save", "publish"])
+const emits = defineEmits(["save", "publish", "update:modelValue"])
 const film = useModel<Film>("modelValue", { type: "object" })
 
 const foundFilms = ref()
@@ -215,9 +224,18 @@ async function findFilm() {
   ).data.value
 }
 
-async function fill(tmdbId: number) {
-  film.value = (await apiGet(`tmdb/${tmdbId}/fill/`)).data.value
-  // TODO fix form reactivity
+async function choose(tmdbId: number) {
+  chosenFilm.value =
+    ((await apiGet<Film>(`tmdb/${tmdbId}/fill/`)).data.value as Film) ||
+    undefined
+}
+
+function isChosen(filmToCheck: Film) {
+  return chosenFilm.value?.tmdbId === filmToCheck?.tmdbId
+}
+
+function fillAll() {
+  Object.assign(film.value, chosenFilm.value)
 }
 </script>
 
@@ -225,4 +243,10 @@ async function fill(tmdbId: number) {
 .image img
   height: 100%
   object-fit: cover
+
+textarea
+  resize: vertical
+
+.list-item.is-active
+  background-color: $grey-lighter
 </style>

front/composables/types.ts

@@ -25,6 +25,7 @@ export type Film = {
   posterLink?: string
   bannerLink?: string
   isConfirmed?: boolean
+  tmdbId?: number
 }
 
 export type ShortFilm = {

front/plugins/ohVueIcons.ts

@@ -1,10 +1,12 @@
 import { OhVueIcon, addIcons } from "oh-vue-icons"
 import {
+  BiArrowBarLeft,
   RiCalendarEventFill,
   RiDoubleQuotesL,
   RiFacebookBoxFill,
   RiInstagramFill,
   RiMailFill,
+  RiMailLine,
   RiMapPin2Fill,
   RiPlayCircleFill,
 } from "oh-vue-icons/icons"
@@ -15,8 +17,10 @@ addIcons(
   RiFacebookBoxFill,
   RiInstagramFill,
   RiMailFill,
+  RiMailLine,
   RiMapPin2Fill,
-  RiPlayCircleFill
+  RiPlayCircleFill,
+  BiArrowBarLeft
 )
 
 export default defineNuxtPlugin((nuxtApp) => {

server/myapi/serializers.py

@@ -16,3 +16,21 @@ class FilmSerializer(serializers.ModelSerializer):
     class Meta:
         model = Film
         fields = "__all__"  #
+
+
+class FromTmdbFilmSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Film
+        fields = [
+            "title",
+            "actors",
+            "director",
+            "duration",
+            "synopsis",
+            "origin_country",
+            "release_year",
+            "is_in_color",
+            "poster_link",
+            "imdb_id",
+            "tmdb_id",
+        ]

server/myapi/views/tmdb_views.py

@@ -7,7 +7,7 @@ from rest_framework.response import Response
 from tmdbv3api import TMDb, Search, Movie
 
 from myapi.models import Film
-from myapi.serializers import FilmSerializer
+from myapi.serializers import FilmSerializer, FromTmdbFilmSerializer
 from ulm_cine_club_api.settings.base import TMDB_API_KEY
 
 tmdb = TMDb()
@@ -23,7 +23,7 @@ class TmdbViewSet(viewsets.ViewSet):
         tmdb_results = search.movies({"query": query})
         res = [
             {
-                "id": film["id"],
+                "tmdb_id": film["id"],
                 "release_date": film["release_date"],
                 "title": film["title"],
                 "poster_path": film["poster_path"],
@@ -50,7 +50,7 @@ class TmdbViewSet(viewsets.ViewSet):
             ),  # TODO iso to French name
             is_in_color=not any(keyword["id"] == 12999 for keyword in tmdb_movie["keywords"]["keywords"])
         )
-        serializer = FilmSerializer(internal_movie)
+        serializer = FromTmdbFilmSerializer(internal_movie)
         return Response(serializer.data)