From 68b6a3a2564715e273394195b07d769dcd760420 Mon Sep 17 00:00:00 2001
From: sephrat <34862846+sephrat@users.noreply.github.com>
Date: Wed, 24 Feb 2021 21:16:52 +0100
Subject: [PATCH] Localized meal date (#182)

* first step towards localized meal date

* Refactor datetimeFormats to dedicated locale files

* localized date in 'Dinner this week'
---
 .../src/components/MealPlan/MealPlanCard.vue  |  2 +-
 frontend/src/i18n.js                          | 28 +++++++++++++++----
 frontend/src/locales/dateTimeFormats/da.json  |  7 +++++
 frontend/src/locales/dateTimeFormats/de.json  |  7 +++++
 frontend/src/locales/dateTimeFormats/en.json  |  7 +++++
 frontend/src/locales/dateTimeFormats/fr.json  |  7 +++++
 frontend/src/locales/dateTimeFormats/pl.json  |  7 +++++
 frontend/src/locales/dateTimeFormats/sv.json  |  7 +++++
 .../src/locales/dateTimeFormats/zh-CN.json    |  7 +++++
 .../src/locales/dateTimeFormats/zh-TW.json    |  7 +++++
 frontend/src/locales/{ => messages}/da.json   |  0
 frontend/src/locales/{ => messages}/de.json   |  0
 frontend/src/locales/{ => messages}/en.json   |  8 ++++++
 frontend/src/locales/{ => messages}/fr.json   |  0
 frontend/src/locales/{ => messages}/pl.json   |  0
 frontend/src/locales/{ => messages}/sv.json   |  0
 .../src/locales/{ => messages}/zh-CN.json     |  0
 .../src/locales/{ => messages}/zh-TW.json     |  0
 frontend/src/pages/MealPlanPage.vue           |  6 ++--
 frontend/src/pages/MealPlanThisWeekPage.vue   |  2 +-
 20 files changed, 91 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/locales/dateTimeFormats/da.json
 create mode 100644 frontend/src/locales/dateTimeFormats/de.json
 create mode 100644 frontend/src/locales/dateTimeFormats/en.json
 create mode 100644 frontend/src/locales/dateTimeFormats/fr.json
 create mode 100644 frontend/src/locales/dateTimeFormats/pl.json
 create mode 100644 frontend/src/locales/dateTimeFormats/sv.json
 create mode 100644 frontend/src/locales/dateTimeFormats/zh-CN.json
 create mode 100644 frontend/src/locales/dateTimeFormats/zh-TW.json
 rename frontend/src/locales/{ => messages}/da.json (100%)
 rename frontend/src/locales/{ => messages}/de.json (100%)
 rename frontend/src/locales/{ => messages}/en.json (98%)
 rename frontend/src/locales/{ => messages}/fr.json (100%)
 rename frontend/src/locales/{ => messages}/pl.json (100%)
 rename frontend/src/locales/{ => messages}/sv.json (100%)
 rename frontend/src/locales/{ => messages}/zh-CN.json (100%)
 rename frontend/src/locales/{ => messages}/zh-TW.json (100%)

diff --git a/frontend/src/components/MealPlan/MealPlanCard.vue b/frontend/src/components/MealPlan/MealPlanCard.vue
index 100aceced..9fffa6e47 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..f5320dcc2 100644
--- a/frontend/src/i18n.js
+++ b/frontend/src/i18n.js
@@ -3,12 +3,8 @@ import VueI18n from "vue-i18n";
 
 Vue.use(VueI18n);
 
-function loadLocaleMessages() {
-  const locales = require.context(
-    "./locales",
-    true,
-    /[A-Za-z0-9-_,\s]+\.json$/i
-  );
+
+function parseLocaleFiles(locales) {
   const messages = {};
   locales.keys().forEach(key => {
     const matched = key.match(/([A-Za-z0-9-_]+)\./i);
@@ -20,8 +16,28 @@ function loadLocaleMessages() {
   return messages;
 }
 
+function loadLocaleMessages() {
+  const locales = require.context(
+    "./locales/messages",
+    true,
+    /[A-Za-z0-9-_,\s]+\.json$/i
+  );
+  return parseLocaleFiles(locales);
+}
+
+function loadDateTimeFormats() {
+  const locales = require.context(
+    "./locales/dateTimeFormats",
+    true,
+    /[A-Za-z0-9-_,\s]+\.json$/i
+  );
+  return parseLocaleFiles(locales);
+}
+
+
 export default new VueI18n({
   locale: "en",
   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",
   messages: loadLocaleMessages(),
+  dateTimeFormats: loadDateTimeFormats() 
 });
diff --git a/frontend/src/locales/dateTimeFormats/da.json b/frontend/src/locales/dateTimeFormats/da.json
new file mode 100644
index 000000000..a0af56a4e
--- /dev/null
+++ b/frontend/src/locales/dateTimeFormats/da.json
@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/dateTimeFormats/de.json b/frontend/src/locales/dateTimeFormats/de.json
new file mode 100644
index 000000000..a0af56a4e
--- /dev/null
+++ b/frontend/src/locales/dateTimeFormats/de.json
@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/dateTimeFormats/en.json b/frontend/src/locales/dateTimeFormats/en.json
new file mode 100644
index 000000000..a0af56a4e
--- /dev/null
+++ b/frontend/src/locales/dateTimeFormats/en.json
@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/dateTimeFormats/fr.json b/frontend/src/locales/dateTimeFormats/fr.json
new file mode 100644
index 000000000..a0af56a4e
--- /dev/null
+++ b/frontend/src/locales/dateTimeFormats/fr.json
@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/dateTimeFormats/pl.json b/frontend/src/locales/dateTimeFormats/pl.json
new file mode 100644
index 000000000..a0af56a4e
--- /dev/null
+++ b/frontend/src/locales/dateTimeFormats/pl.json
@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/dateTimeFormats/sv.json b/frontend/src/locales/dateTimeFormats/sv.json
new file mode 100644
index 000000000..a0af56a4e
--- /dev/null
+++ b/frontend/src/locales/dateTimeFormats/sv.json
@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/dateTimeFormats/zh-CN.json b/frontend/src/locales/dateTimeFormats/zh-CN.json
new file mode 100644
index 000000000..a0af56a4e
--- /dev/null
+++ b/frontend/src/locales/dateTimeFormats/zh-CN.json
@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/dateTimeFormats/zh-TW.json b/frontend/src/locales/dateTimeFormats/zh-TW.json
new file mode 100644
index 000000000..a0af56a4e
--- /dev/null
+++ b/frontend/src/locales/dateTimeFormats/zh-TW.json
@@ -0,0 +1,7 @@
+{
+  "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/locales/da.json b/frontend/src/locales/messages/da.json
similarity index 100%
rename from frontend/src/locales/da.json
rename to frontend/src/locales/messages/da.json
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/messages/de.json
similarity index 100%
rename from frontend/src/locales/de.json
rename to frontend/src/locales/messages/de.json
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/messages/en.json
similarity index 98%
rename from frontend/src/locales/en.json
rename to frontend/src/locales/messages/en.json
index bdf4685ab..429f28e82 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/messages/en.json
@@ -1,4 +1,12 @@
 {
+
+  "dateTimeFormats": {
+    "short": {
+      "month": "short",
+      "day": "numeric",
+      "weekday": "long"
+    }
+  },
   "404": {
     "page-not-found": "404 Page Not Found",
     "take-me-home": "Take me Home"
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/messages/fr.json
similarity index 100%
rename from frontend/src/locales/fr.json
rename to frontend/src/locales/messages/fr.json
diff --git a/frontend/src/locales/pl.json b/frontend/src/locales/messages/pl.json
similarity index 100%
rename from frontend/src/locales/pl.json
rename to frontend/src/locales/messages/pl.json
diff --git a/frontend/src/locales/sv.json b/frontend/src/locales/messages/sv.json
similarity index 100%
rename from frontend/src/locales/sv.json
rename to frontend/src/locales/messages/sv.json
diff --git a/frontend/src/locales/zh-CN.json b/frontend/src/locales/messages/zh-CN.json
similarity index 100%
rename from frontend/src/locales/zh-CN.json
rename to frontend/src/locales/messages/zh-CN.json
diff --git a/frontend/src/locales/zh-TW.json b/frontend/src/locales/messages/zh-TW.json
similarity index 100%
rename from frontend/src/locales/zh-TW.json
rename to frontend/src/locales/messages/zh-TW.json
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>
diff --git a/frontend/src/pages/MealPlanThisWeekPage.vue b/frontend/src/pages/MealPlanThisWeekPage.vue
index c61cfa232..aacec5312 100644
--- a/frontend/src/pages/MealPlanThisWeekPage.vue
+++ b/frontend/src/pages/MealPlanThisWeekPage.vue
@@ -18,7 +18,7 @@
                 <v-card-title class="justify-center">
                   {{ meal.name }}
                 </v-card-title>
-                <v-card-subtitle> {{ meal.dateText }}</v-card-subtitle>
+                <v-card-subtitle> {{ $d(new Date(meal.date), 'short' ) }}</v-card-subtitle>
 
                 <v-card-text> {{ meal.description }} </v-card-text>