feat [api]: include and display new fields

- originCountry
- actors
- imdb id
- tmdb id
- show comment

front/components/admin/form.vue

@@ -33,6 +33,21 @@
         </div>
       </div>
 
+      <div class="field">
+        <label class="label">Pays d'origine</label>
+        <div class="control">
+          <input v-model="film.originCountry" class="input" type="text" />
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">Acteurs</label>
+        <div class="control">
+          <AdminActorsInput v-model="film.actors" />
+        </div>
+        <p class="help">Un nom par ligne</p>
+      </div>
+
       <div class="field">
         <label class="label">Durée</label>
         <div class="control">
@@ -43,7 +58,7 @@
       <div class="field">
         <label class="label">Synopsis</label>
         <div class="control">
-          <textarea v-model="film.synopsis" class="input" />
+          <textarea v-model="film.synopsis" class="textarea" rows="10" />
         </div>
       </div>
 
@@ -67,6 +82,21 @@
       </div>
 
       <div class="field">
+        <label class="label">id IMDB</label>
+        <div class="control">
+          <input v-model="film.imdbId" class="input" type="text" />
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">id TMDB</label>
+        <div class="control">
+          <input v-model="film.tmdbId" class="input" type="number" />
+        </div>
+      </div>
+
+      <div class="field">
+        <label class="label">Couleur / Noir & Blanc</label>
         <label class="checkbox">
           <input v-model="film.isInColor" type="checkbox" />
           Couleur
@@ -126,8 +156,18 @@
         </div>
       </div>
 
-      <div class="buttons">
-        <!-- TODO change labels according to publishing status -->
+      <div class="field">
+        <label class="label">Commentaire de séance</label>
+        <div class="control">
+          <textarea
+            v-model="film.projectionComment"
+            class="textarea"
+            rows="2"
+          />
+        </div>
+      </div>
+
+      <div class="buttons mt-6">
         <button class="button" @click="emits('save')">
           {{
             film?.isConfirmed

front/components/movieCard/full.vue

@@ -36,7 +36,7 @@
           </figure>
         </div>
         <div class="card-content">
-          <div class="content">
+          <div class="content movie-content">
             <p v-if="film.actors && film.actors.length" class="block">
               <span class="has-text-weight-bold">Acteurs :</span>
               {{ film.actors.join(", ") }}
@@ -45,7 +45,12 @@
               <span class="has-text-weight-bold">Synopsis :</span>
               {{ film.synopsis }}
             </p>
-            <!-- TODO additional info about partnership etc -->
+            <div
+              v-if="film.projectionComment"
+              class="block has-text-centered has-text-weight-bold is-italic my-auto"
+            >
+              <p>{{ film.projectionComment }}</p>
+            </div>
           </div>
         </div>
       </div>
@@ -133,4 +138,10 @@ const headerTags = computed<{ label?: string; value: string }[]>(() =>
 <style scoped lang="sass">
 .movie-card .poster-container
   width: 200px
+
+.card .card-content .content.movie-content
+  height: 100%
+  display: flex
+  flex-direction: column
+  white-space: pre-wrap
 </style>