From b9982c07f8f4a200f2038053acfa2588a02ee1ad Mon Sep 17 00:00:00 2001
From: Florian Dupret <florian.dupret@gmail.com>
Date: Mon, 22 Feb 2021 19:55:23 +0100
Subject: [PATCH] first step towards localized meal date

---
 .../src/components/MealPlan/MealPlanCard.vue  |  2 +-
 frontend/src/i18n.js                          | 19 +++++++++++++++++++
 frontend/src/pages/MealPlanPage.vue           |  6 +++---
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/MealPlan/MealPlanCard.vue b/frontend/src/components/MealPlan/MealPlanCard.vue
index b5c176638..702a9bded 100644
--- a/frontend/src/components/MealPlan/MealPlanCard.vue
+++ b/frontend/src/components/MealPlan/MealPlanCard.vue
@@ -17,7 +17,7 @@
             :src="getImage(meal.slug)"
             @click="openSearch(index)"
           ></v-img>
-          <v-card-title class="my-n3 mb-n6">{{ meal.dateText }}</v-card-title>
+          <v-card-title class="my-n3 mb-n6">{{ $d( new Date(meal.date), 'short' ) }}</v-card-title>
           <v-card-subtitle> {{ meal.name }}</v-card-subtitle>
         </v-card>
       </v-hover>
diff --git a/frontend/src/i18n.js b/frontend/src/i18n.js
index 41d46703c..c51d0f25c 100644
--- a/frontend/src/i18n.js
+++ b/frontend/src/i18n.js
@@ -20,8 +20,27 @@ function loadLocaleMessages() {
   return messages;
 }
 
+const dateTimeFormats = {
+  'en': {
+    short: {
+      month: 'short',
+      day: 'numeric',
+      weekday: 'long'
+    },
+  },
+  'fr': {
+    short: {
+      month: 'short',
+      day: 'numeric',
+      weekday: 'long'
+    }
+  }
+}
+
+
 export default new VueI18n({
   locale: "en",
   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
   messages: loadLocaleMessages(),
+  dateTimeFormats
 });
diff --git a/frontend/src/pages/MealPlanPage.vue b/frontend/src/pages/MealPlanPage.vue
index 90d583d2a..eb87f34b7 100644
--- a/frontend/src/pages/MealPlanPage.vue
+++ b/frontend/src/pages/MealPlanPage.vue
@@ -25,8 +25,8 @@
       >
         <v-card class="mt-1">
           <v-card-title>
-            {{ formatDate(mealplan.startDate) }} -
-            {{ formatDate(mealplan.endDate) }}
+            {{ $d( new Date(mealplan.startDate), 'short' ) }} -
+            {{ $d( new Date(mealplan.endDate), 'short' ) }}
           </v-card-title>
           <v-list nav>
             <v-list-item-group color="primary">
@@ -43,7 +43,7 @@
                 </v-list-item-avatar>
                 <v-list-item-content>
                   <v-list-item-title v-text="meal.name"></v-list-item-title>
-                  <v-list-item-subtitle v-text="meal.dateText">
+                  <v-list-item-subtitle v-text="$d( new Date(meal.date), 'short' )" >
                   </v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>