fixed test and added meal plan client settings load save

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -380,18 +380,14 @@ export default {
         }
     },
     mounted() {
-        this.$nextTick(function () {
-            if (this.$cookies.isKey(SETTINGS_COOKIE_NAME)) {
-                this.settings = Object.assign({}, this.settings, this.$cookies.get(SETTINGS_COOKIE_NAME))
-            }
-        })
+        this.settings = useMealPlanStore().client_settings
         this.$i18n.locale = window.CUSTOM_LOCALE
         moment.locale(window.CUSTOM_LOCALE)
     },
     watch: {
         settings: {
             handler() {
-                this.$cookies.set(SETTINGS_COOKIE_NAME, this.settings, "360d")
+                useMealPlanStore().updateClientSettings(this.settings)
             },
             deep: true,
         },

vue/src/components/Settings/MealPlanSettingsComponent.vue

@@ -14,24 +14,24 @@
 
         <hr/>
 
-        <b-form v-if="meal_plan_store">
+        <b-form v-if="settings">
             <b-form-group id="UomInput" :label="$t('Period')" :description="$t('Plan_Period_To_Show')"
                           label-for="UomInput">
-                <b-form-select id="UomInput" v-model="meal_plan_store.client_settings.displayPeriodUom"
+                <b-form-select id="UomInput" v-model="settings.displayPeriodUom"
                                :options="calendar_options.displayPeriodUom"></b-form-select>
             </b-form-group>
             <b-form-group id="PeriodInput" :label="$t('Periods')"
                           :description="$t('Plan_Show_How_Many_Periods')" label-for="PeriodInput">
-                <b-form-select id="PeriodInput" v-model="meal_plan_store.client_settings.displayPeriodCount"
+                <b-form-select id="PeriodInput" v-model="settings.displayPeriodCount"
                                :options="calendar_options.displayPeriodCount"></b-form-select>
             </b-form-group>
             <b-form-group id="DaysInput" :label="$t('Starting_Day')" :description="$t('Starting_Day')"
                           label-for="DaysInput">
-                <b-form-select id="DaysInput" v-model="meal_plan_store.client_settings.startingDayOfWeek"
+                <b-form-select id="DaysInput" v-model="settings.startingDayOfWeek"
                                :options="dayNames()"></b-form-select>
             </b-form-group>
             <b-form-group id="WeekNumInput" :label="$t('Week_Numbers')">
-                <b-form-checkbox v-model="meal_plan_store.client_settings.displayWeekNumbers" name="week_num">
+                <b-form-checkbox v-model="settings.displayWeekNumbers" name="week_num">
                     {{ $t("Show_Week_Numbers") }}
                 </b-form-checkbox>
             </b-form-group>
@@ -96,7 +96,7 @@ export default {
         return {
             user_preferences: undefined,
             languages: [],
-            meal_plan_store: undefined,
+            settings: undefined,
             calendar_options: {
                 displayPeriodUom: [
                     {text: this.$t("Week"), value: "week"},
@@ -108,14 +108,24 @@ export default {
             meal_types: [],
             generic_action: null,
             editing_meal_type: null,
+
         }
     },
+    watch: {
+        settings: {
+            handler() {
+                useMealPlanStore().updateClientSettings(this.settings)
+            },
+            deep: true,
+        },
+    },
     mounted() {
         this.user_preferences = this.preferences
         this.languages = window.AVAILABLE_LANGUAGES
         this.loadSettings()
 
-        this.meal_plan_store = useMealPlanStore()
+        this.settings = useMealPlanStore().client_settings
+        
 
         this.loadMealTypes()
     },

vue/src/stores/MealPlanStore.js

@@ -2,6 +2,7 @@ import {defineStore} from 'pinia'
 import {ApiApiFactory} from "@/utils/openapi/api";
 
 const _STORE_ID = 'meal_plan_store'
+const _LOCAL_STORAGE_KEY = 'MEAL_PLAN_CLIENT_SETTINGS'
 import Vue from "vue"
 import {StandardToasts} from "@/utils/utils";
 /*
@@ -12,12 +13,7 @@ export const useMealPlanStore = defineStore(_STORE_ID, {
     state: () => ({
         plans: {},
         currently_updating: null,
-        client_settings: {
-            displayPeriodUom: "week",
-            displayPeriodCount: 2,
-            startingDayOfWeek: 1,
-            displayWeekNumbers: true,
-        },
+        settings: null,
     }),
     getters: {
         plan_list: function () {
@@ -41,6 +37,12 @@ export const useMealPlanStore = defineStore(_STORE_ID, {
                 title: "",
                 title_placeholder: 'Title', // meal plan edit modal should be improved to not need this
             }
+        },
+        client_settings: function () {
+            if (this.settings === null) {
+                this.settings = this.loadClientSettings()
+            }
+            return this.settings
         }
     },
     actions: {
@@ -91,6 +93,23 @@ export const useMealPlanStore = defineStore(_STORE_ID, {
             }).catch(err => {
                 StandardToasts.makeStandardToast(this, StandardToasts.FAIL_DELETE, err)
             })
+        },
+        updateClientSettings(settings) {
+            this.settings = settings
+            localStorage.setItem(_LOCAL_STORAGE_KEY, JSON.stringify(this.settings))
+        },
+        loadClientSettings() {
+            let s = localStorage.getItem(_LOCAL_STORAGE_KEY)
+            if (s === null || s === {}) {
+                return {
+                    displayPeriodUom: "week",
+                    displayPeriodCount: 3,
+                    startingDayOfWeek: 1,
+                    displayWeekNumbers: true,
+                }
+            } else {
+                return JSON.parse(s)
+            }
         }
     },
 })