WIP feat [front]: first shot admin form page

front/layouts/admin.vue

@@ -0,0 +1,12 @@
+<template>
+<!-- TODO add menu -->
+  <div class="container"><slot /></div>
+
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style scoped lang="sass">
+
+</style>

front/pages/admin/form.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="columns">
+    <div class="column">
+      <div class="field">
+        <label class="label">Date de projection</label>
+        <div class="control">
+          <input class="input" type="datetime-local" />
+        </div>
+      </div>
+      <div class="field">
+        <label class="label">Titre</label>
+        <div class="control">
+          <input v-model="title" class="input" type="text" @change="findFilm" />
+        </div>
+      </div>
+      <div class="field">
+        <label class="label">Réalisateur</label>
+        <div class="control">
+          <input v-model="director" class="input" type="text" />
+        </div>
+      </div>
+      <div class="field">
+        <label class="label">Durée</label>
+        <div class="control">
+          <input class="input" type="number" />
+        </div>
+      </div>
+    </div>
+
+    <div class="column">
+      <!-- doc : https://bluefantail.github.io/bulma-list/ -->
+      <div class="list has-visible-pointer-controls">
+        <div
+          v-for="(foundFilm, index) of foundFilms?.results"
+          :key="foundFilm.id"
+          class="list-item"
+        >
+          <div class="list-item-image">
+            <figure class="image is-64x64">
+              <img :src="image(index)" />
+            </figure>
+          </div>
+          <div class="list-item-content">
+            <div class="list-item-title">{{ foundFilm.title }}</div>
+            <div class="list-item-description">
+              {{ foundFilm.release_date }}
+            </div>
+          </div>
+          <div class="list-item-controls">
+            <div class="buttons is-right">
+              <button class="button">Préremplir</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: "admin",
+})
+
+const foundFilms = ref()
+const title = ref<string>()
+
+const { data: films } = await useFetch("http://localhost:8000/api/films/", {
+  params: { test: 2 },
+})
+
+// https://developers.themoviedb.org/3/getting-started/images
+const image = computed(() => (index: number) => {
+  return `https://image.tmdb.org/t/p/w500${foundFilms.value?.results[index].poster_path}`
+})
+
+async function findFilm() {
+  foundFilms.value = await $fetch("https://api.themoviedb.org/3/search/movie", {
+    params: {
+      api_key: "INSERT API KEY HERE",
+      language: "fr-FR",
+      query: title.value,
+    },
+  })
+}
+</script>