From b16d7e31aea92ed3c9a641288ae12d9ae45200a6 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Wed, 13 Jul 2022 01:02:23 +0200
Subject: [PATCH] feat [front]: display pretty date

---
 front/components/movieCard/full.vue |  3 ++-
 front/composables/strUtils.ts       | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 front/composables/strUtils.ts

diff --git a/front/components/movieCard/full.vue b/front/components/movieCard/full.vue
index 2f922c3..402ef75 100644
--- a/front/components/movieCard/full.vue
+++ b/front/components/movieCard/full.vue
@@ -74,7 +74,7 @@
           </template>
         </div>
         <div class="ml-auto title is-4">
-          {{ film.projectionDate }}
+          {{ prettyDate.full(film.projectionDate) }}
         </div>
       </footer>
     </div>
@@ -90,6 +90,7 @@
 <script setup lang="ts">
 import { Film } from "~/composables/types"
 import { PropType } from "@vue/runtime-core"
+import { prettyDate } from "~/composables/strUtils"
 
 const props = defineProps({
   film: { type: Object as PropType<Film>, required: true },
diff --git a/front/composables/strUtils.ts b/front/composables/strUtils.ts
new file mode 100644
index 0000000..d8bcd51
--- /dev/null
+++ b/front/composables/strUtils.ts
@@ -0,0 +1,20 @@
+export const prettyDate = {
+  full(date: Date | string) {
+    const objDate = typeof date === "string" ? new Date(date) : date
+    const strDate = objDate.toLocaleDateString("fr-FR", {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    })
+    const hour = objDate
+      .getHours()
+      .toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
+    const minute = objDate
+      .getMinutes()
+      .toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
+    const time = `${hour}h${minute}`
+
+    return `${strDate}, ${time}`
+  },
+}