From 5f5b06683abff18726e603ffd811008e1b8882f1 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Tue, 12 Mar 2024 17:46:34 -0500
Subject: [PATCH] fix: add locale and first day of week to all date pickers
 (#3303)

---
 .../Domain/Recipe/RecipeContextMenu.vue           | 15 ++++++++++++++-
 .../Domain/Recipe/RecipeDialogShare.vue           | 15 ++++++++++++++-
 .../components/Domain/Recipe/RecipeLastMade.vue   | 10 +++++++++-
 frontend/pages/group/mealplan/planner.vue         | 15 ++++++++++++++-
 frontend/pages/group/mealplan/planner/edit.vue    | 11 +++--------
 5 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu.vue b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
index 3207c1234..dd96bb137 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu.vue
@@ -59,7 +59,13 @@
               v-on="on"
             ></v-text-field>
           </template>
-          <v-date-picker v-model="newMealdate" no-title @input="pickerMenu = false"></v-date-picker>
+          <v-date-picker
+            v-model="newMealdate"
+            no-title
+            :first-day-of-week="firstDayOfWeek"
+            :local="$i18n.locale"
+            @input="pickerMenu = false"
+          />
         </v-menu>
         <v-select
           v-model="newMealType"
@@ -111,6 +117,7 @@ import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
 import RecipeDialogShare from "./RecipeDialogShare.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
+import { useGroupSelf } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
 import { usePlanTypeOptions } from "~/composables/use-group-mealplan";
 import { Recipe } from "~/lib/api/types/recipe";
@@ -224,11 +231,16 @@ export default defineComponent({
     });
 
     const { i18n, $auth, $globals } = useContext();
+    const { group } = useGroupSelf();
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     // ===========================================================================
     // Context Menu Setup
 
@@ -432,6 +444,7 @@ export default defineComponent({
       addRecipeToPlan,
       icon,
       planTypeOptions,
+      firstDayOfWeek,
     };
   },
 });
diff --git a/frontend/components/Domain/Recipe/RecipeDialogShare.vue b/frontend/components/Domain/Recipe/RecipeDialogShare.vue
index f64aa3415..49b5f4a55 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogShare.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogShare.vue
@@ -22,7 +22,13 @@
               v-on="on"
             ></v-text-field>
           </template>
-          <v-date-picker v-model="expirationDate" no-title @input="datePickerMenu = false"></v-date-picker>
+          <v-date-picker
+            v-model="expirationDate"
+            no-title
+            :first-day-of-week="firstDayOfWeek"
+            :local="$i18n.locale"
+            @input="datePickerMenu = false"
+          />
         </v-menu>
       </v-card-text>
       <v-card-actions class="justify-end">
@@ -60,6 +66,7 @@ import { defineComponent, computed, toRefs, reactive, useContext, useRoute } fro
 import { useClipboard, useShare, whenever } from "@vueuse/core";
 import { RecipeShareToken } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
+import { useGroupSelf } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
 
 export default defineComponent({
@@ -106,9 +113,14 @@ export default defineComponent({
     );
 
     const { $auth, i18n } = useContext();
+    const { group } = useGroupSelf();
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     // ============================================================
     // Token Actions
 
@@ -185,6 +197,7 @@ export default defineComponent({
       dialog,
       createNewToken,
       deleteToken,
+      firstDayOfWeek,
       shareRecipe,
       copyTokenLink,
     };
diff --git a/frontend/components/Domain/Recipe/RecipeLastMade.vue b/frontend/components/Domain/Recipe/RecipeLastMade.vue
index 49323407c..0811e48b2 100644
--- a/frontend/components/Domain/Recipe/RecipeLastMade.vue
+++ b/frontend/components/Domain/Recipe/RecipeLastMade.vue
@@ -41,6 +41,7 @@
                     <v-date-picker
                       v-model="newTimelineEventTimestamp"
                       no-title
+                      :first-day-of-week="firstDayOfWeek"
                       :local="$i18n.locale"
                       @input="datePickerMenu = false"
                     />
@@ -109,10 +110,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
 import { whenever } from "@vueuse/core";
 import { VForm } from "~/types/vuetify";
 import { useUserApi } from "~/composables/api";
+import { useGroupSelf } from "~/composables/use-groups";
 import { Recipe, RecipeTimelineEventIn } from "~/lib/api/types/recipe";
 
 export default defineComponent({
@@ -129,6 +131,7 @@ export default defineComponent({
   setup(props, context) {
     const madeThisDialog = ref(false);
     const userApi = useUserApi();
+    const { group } = useGroupSelf();
     const { $auth, i18n } = useContext();
     const domMadeThisForm = ref<VForm>();
     const newTimelineEvent = ref<RecipeTimelineEventIn>({
@@ -153,6 +156,10 @@ export default defineComponent({
       }
     );
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     function clearImage() {
       newTimelineEventImage.value = undefined;
       newTimelineEventImageName.value = "";
@@ -226,6 +233,7 @@ export default defineComponent({
       ...toRefs(state),
       domMadeThisForm,
       madeThisDialog,
+      firstDayOfWeek,
       newTimelineEvent,
       newTimelineEventImage,
       newTimelineEventImagePreviewUrl,
diff --git a/frontend/pages/group/mealplan/planner.vue b/frontend/pages/group/mealplan/planner.vue
index 3ddc56ba9..8db3cd54c 100644
--- a/frontend/pages/group/mealplan/planner.vue
+++ b/frontend/pages/group/mealplan/planner.vue
@@ -16,7 +16,13 @@
           {{ $d(weekRange.start, "short") }} - {{ $d(weekRange.end, "short") }}
         </v-btn>
       </template>
-      <v-date-picker v-model="state.range" no-title range>
+      <v-date-picker
+        v-model="state.range"
+        no-title
+        range
+        :first-day-of-week="firstDayOfWeek"
+        :local="$i18n.locale"
+      >
         <v-spacer></v-spacer>
         <v-btn text color="primary" @click="state.picker = false">
           {{ $t("general.ok") }}
@@ -43,6 +49,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
 import { isSameDay, addDays, parseISO } from "date-fns";
+import { useGroupSelf } from "~/composables/use-groups";
 import { useMealplans } from "~/composables/use-group-mealplan";
 
 export default defineComponent({
@@ -50,6 +57,7 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const router = useRouter();
+    const { group } = useGroupSelf();
 
     // Force to /view if current route is /planner
     if (route.value.path === "/group/mealplan/planner") {
@@ -72,6 +80,10 @@ export default defineComponent({
       end: addDays(new Date(), 6),
     });
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     const recipeSearchTerm = ref("");
 
     const weekRange = computed(() => {
@@ -128,6 +140,7 @@ export default defineComponent({
       actions,
       mealsByDate,
       weekRange,
+      firstDayOfWeek,
       recipeSearchTerm,
     };
   },
diff --git a/frontend/pages/group/mealplan/planner/edit.vue b/frontend/pages/group/mealplan/planner/edit.vue
index 3a32274b2..505da5177 100644
--- a/frontend/pages/group/mealplan/planner/edit.vue
+++ b/frontend/pages/group/mealplan/planner/edit.vue
@@ -46,8 +46,9 @@
           </template>
           <v-date-picker
             v-model="newMeal.date"
-            :first-day-of-week="firstDayOfWeek"
             no-title
+            :first-day-of-week="firstDayOfWeek"
+            :local="$i18n.locale"
             @input="state.pickerMenu = false"
           />
         </v-menu>
@@ -256,13 +257,7 @@ export default defineComponent({
     });
 
     const firstDayOfWeek = computed(() => {
-      const pref = group.value?.preferences?.firstDayOfWeek;
-
-      if (pref) {
-        return pref;
-      }
-
-      return 0;
+      return group.value?.preferences?.firstDayOfWeek || 0;
     });
 
     function onMoveCallback(evt: SortableEvent) {