From 532a6cd51813da1f31e7c5ef579c198c59e14660 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Sun, 3 Apr 2022 01:20:55 +0200
Subject: [PATCH] WIP feat [front]: first shot admin form page

---
 front/layouts/admin.vue    | 12 ++++++
 front/pages/admin/form.vue | 86 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 98 insertions(+)
 create mode 100644 front/layouts/admin.vue
 create mode 100644 front/pages/admin/form.vue

diff --git a/front/layouts/admin.vue b/front/layouts/admin.vue
new file mode 100644
index 0000000..82713cd
--- /dev/null
+++ b/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>
diff --git a/front/pages/admin/form.vue b/front/pages/admin/form.vue
new file mode 100644
index 0000000..d244cca
--- /dev/null
+++ b/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>