feat [front]: admin pretty date

front/components/admin/form.vue

@@ -4,10 +4,12 @@
       <div class="field">
         <label class="label">Date de projection</label>
         <div class="control">
-          <input
-            v-model="film.projectionDate"
+          <Datepicker
+            v-model="projectionDateObject"
+            :locale="fr"
             class="input"
-            type="datetime-local"
+            minimum-view="time"
+            input-format="dd/MM/yyyy HH'h'mm"
           />
         </div>
       </div>
@@ -172,6 +174,8 @@
 
 <script setup lang="ts">
 import { Film, Format, LanguageSubtitles } from "~/composables/types"
+import Datepicker from "vue3-datepicker"
+import { fr } from "date-fns/locale"
 import { PropType } from "@vue/runtime-core"
 
 defineProps({
@@ -198,6 +202,13 @@ const durationNoSecond = computed<string>({
   },
 })
 
+const projectionDateObject = computed<Date>({
+  get: () => new Date(film.value.projectionDate),
+  set(value: Date) {
+    film.value.projectionDate = value.toISOString()
+  },
+})
+
 async function findFilm() {
   foundFilms.value = (
     await apiGet("tmdb/search/", { query: film.value.title })

front/package.json

@@ -13,7 +13,8 @@
     "oh-vue-icons": "^1.0.0-rc3",
     "prettier": "^2.5.1",
     "swiper": "^8.3.1",
-    "typescript": "^4.6.2"
+    "typescript": "^4.6.2",
+    "vue3-datepicker": "^0.3.4"
   },
   "devDependencies": {
     "@pinia/nuxt": "^0.3.0",

front/pages/admin/[id]/edition.vue

@@ -1,6 +1,8 @@
 <template>
   <main>
-    <h1 class="title">Modifier la séance du {{ film.projectionDate }}</h1>
+    <h1 class="title">
+      Modifier la séance du {{ new Date(film.projectionDate).toLocaleString() }}
+    </h1>
     <AdminForm v-model="film" @save="saveDraft" @publish="publish" />
   </main>
 </template>

front/pages/admin/[id]/index.vue

@@ -5,7 +5,8 @@
         {{ film.isConfirmed ? "Publié" : "Brouillon" }}
       </div>
       <h1 class="mx-5">
-        {{ film.projectionDate || "À planifier" }} - {{ film.title }}
+        {{ new Date(film.projectionDate).toLocaleString() || "À planifier" }} -
+        {{ film.title }}
         <span class="has-text-grey-lighter">#{{ film.id }}</span>
       </h1>
       <nuxt-link :to="`/admin/${id}/edition`" class="button">

front/pages/admin/index.vue

@@ -4,7 +4,8 @@
     <ul class="list has-visible-pointer-controls">
       <li v-for="film of films" :key="film.id" class="list-item">
         <nuxt-link :to="`/admin/${film.id}`" class="list-item-content">
-          {{ film.projectionDate || "À planifier" }} - {{ film.title }}
+          {{ new Date(film.projectionDate).toLocaleString() || "À planifier" }}
+          - {{ film.title }}
           <template v-if="film.director"> de {{ film.director }}</template>
         </nuxt-link>
         <div class="list-item-controls">

front/yarn.lock

@@ -1814,6 +1814,11 @@ data-uri-to-buffer@^4.0.0:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
   integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
 
+date-fns@^2.22.1:
+  version "2.29.2"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.2.tgz#0d4b3d0f3dff0f920820a070920f0d9662c51931"
+  integrity sha512-0VNbwmWJDS/G3ySwFSJA3ayhbURMTJLtwM2DTxf9CWondCnh6DTNlO9JgRSq6ibf4eD0lfMJNBxUdEAHHix+bA==
+
 debug@2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -5447,6 +5452,13 @@ vue-router@^4.1.2:
   dependencies:
     "@vue/devtools-api" "^6.1.4"
 
+vue3-datepicker@^0.3.4:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/vue3-datepicker/-/vue3-datepicker-0.3.4.tgz#1f406d8dc6228c06b471a1a52a8b8093238e7997"
+  integrity sha512-pD4Lixnqdr6KeIO/ZK/xdmhYDQUvMPHgTeWkNYeAx5sKY4eaNItOqbLuevwI51d3ubozhNS1y+Z8Enxi33pXiQ==
+  dependencies:
+    date-fns "^2.22.1"
+
 vue@^3.2.37:
   version "3.2.37"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.37.tgz#da220ccb618d78579d25b06c7c21498ca4e5452e"