feat [front]: display pretty date

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 },

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}`
+  },
+}