feat: Set default number of days on meal planner (#3650)

frontend/composables/use-users/preferences.ts

@@ -18,6 +18,10 @@ export enum ImagePosition {
   right = "right",
 }
 
+export interface UserMealPlanPreferences {
+  numberOfDays: number;
+}
+
 export interface UserRecipePreferences {
   orderBy: string;
   orderDirection: string;
@@ -40,6 +44,20 @@ export interface UserParsingPreferences {
   parser: RegisteredParser;
 }
 
+export function useUserMealPlanPreferences(): Ref<UserMealPlanPreferences> {
+  const fromStorage = useLocalStorage(
+    "meal-planner-preferences",
+    {
+      numberOfDays: 7,
+    },
+    { mergeDefaults: true }
+    // we cast to a Ref because by default it will return an optional type ref
+    // but since we pass defaults we know all properties are set.
+  ) as unknown as Ref<UserMealPlanPreferences>;
+
+  return fromStorage;
+}
+
 export function useUserPrintPreferences(): Ref<UserPrintPreferences> {
   const fromStorage = useLocalStorage(
     "recipe-print-preferences",

frontend/lang/messages/en-US.json

@@ -291,6 +291,8 @@
     "mealplan-updated": "Mealplan Updated",
     "no-meal-plan-defined-yet": "No meal plan defined yet",
     "no-meal-planned-for-today": "No meal planned for today",
+    "numberOfDays-hint": "Number of days on page load",
+    "numberOfDays-label": "Default Days",
     "only-recipes-with-these-categories-will-be-used-in-meal-plans": "Only recipes with these categories will be used in Meal Plans",
     "planner": "Planner",
     "quick-week": "Quick Week",

frontend/pages/group/mealplan/planner.vue

@@ -23,6 +23,13 @@
         :first-day-of-week="firstDayOfWeek"
         :local="$i18n.locale"
       >
+        <v-text-field
+          v-model="numberOfDays"
+          type="number"
+          :label="$t('meal-plan.numberOfDays-label')"
+          :hint="$t('meal-plan.numberOfDays-hint')"
+          persistent-hint
+        />
         <v-spacer></v-spacer>
         <v-btn text color="primary" @click="state.picker = false">
           {{ $t("general.ok") }}
@@ -47,10 +54,11 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
+import { computed, defineComponent, ref, useRoute, useRouter, watch } from "@nuxtjs/composition-api";
 import { isSameDay, addDays, parseISO } from "date-fns";
 import { useGroupSelf } from "~/composables/use-groups";
 import { useMealplans } from "~/composables/use-group-mealplan";
+import { useUserMealPlanPreferences } from "~/composables/use-users/preferences";
 
 export default defineComponent({
   middleware: ["auth"],
@@ -59,6 +67,12 @@ export default defineComponent({
     const router = useRouter();
     const { group } = useGroupSelf();
 
+    const mealPlanPreferences = useUserMealPlanPreferences();
+    const numberOfDays = ref<number>(mealPlanPreferences.value.numberOfDays || 7);
+    watch(numberOfDays, (val) => {
+      mealPlanPreferences.value.numberOfDays = Number(val);
+    });
+
     // Force to /view if current route is /planner
     if (route.value.path === "/group/mealplan/planner") {
       router.push("/group/mealplan/planner/view");
@@ -74,18 +88,16 @@ export default defineComponent({
     }
 
     const state = ref({
-      range: [fmtYYYYMMDD(new Date()), fmtYYYYMMDD(addDays(new Date(), 6))] as [string, string],
+      range: [fmtYYYYMMDD(new Date()), fmtYYYYMMDD(addDays(new Date(), adjustForToday(numberOfDays.value)))] as [string, string],
       start: new Date(),
       picker: false,
-      end: addDays(new Date(), 6),
+      end: addDays(new Date(), adjustForToday(numberOfDays.value)),
     });
 
     const firstDayOfWeek = computed(() => {
       return group.value?.preferences?.firstDayOfWeek || 0;
     });
 
-    const recipeSearchTerm = ref("");
-
     const weekRange = computed(() => {
       const sorted = state.value.range.sort((a, b) => {
         return parseYYYYMMDD(a).getTime() - parseYYYYMMDD(b).getTime();
@@ -99,7 +111,7 @@ export default defineComponent({
       }
       return {
         start: new Date(),
-        end: addDays(new Date(), 6),
+        end: addDays(new Date(), adjustForToday(numberOfDays.value)),
       };
     });
 
@@ -113,6 +125,12 @@ export default defineComponent({
       });
     }
 
+    function adjustForToday(days: number) {
+      // The use case for this function is "how many days are we adding to 'today'?"
+      // e.g. If the user wants 7 days, we substract one to do "today + 6"
+      return days > 0 ? days - 1 : days + 1
+    }
+
     const days = computed(() => {
       const numDays =
         Math.floor((weekRange.value.end.getTime() - weekRange.value.start.getTime()) / (1000 * 60 * 60 * 24)) + 1;
@@ -141,7 +159,7 @@ export default defineComponent({
       mealsByDate,
       weekRange,
       firstDayOfWeek,
-      recipeSearchTerm,
+      numberOfDays,
     };
   },
   head() {