Make first day of week in calendar view customizable (#263)

* Make first day of the week customizable

New settings section 'Locale settings'
New setting 'First day of week'
New date picker reusable UI that uses the new setting
Meal planner now uses this new date picker

* Clean up unused code in settings page

* Fix First day of week mapping

* Replace missing v-date-picker with custom card DatePicker

* Mention first day of the week feature in change log

frontend/src/components/Admin/General/HomePageSettings.vue

@@ -3,9 +3,6 @@
     <v-card-text>
       <h2 class="mt-1 mb-1">{{ $t("settings.homepage.home-page") }}</h2>
       <v-row align="center" justify="center" dense class="mb-n7 pb-n5">
-        <v-col cols="1">
-          <LanguageMenu @select-lang="writeLang" :site-settings="true" />
-        </v-col>
         <v-col cols="12" sm="3" md="2">
           <v-switch
             v-model="settings.showRecent"
@@ -119,6 +116,25 @@
         </v-col>
       </v-row>
     </v-card-text>
+    <v-card-text>
+      <h2 class="mt-1 mb-4">{{$t('settings.locale-settings')}}</h2>
+      <v-row>
+        <v-col cols="1">
+          <LanguageMenu @select-lang="writeLang" :site-settings="true" />
+        </v-col>
+        <v-col sm="3">
+          <v-select
+                dense
+                prepend-icon="mdi-calendar-week-begin"
+                v-model="settings.firstDayOfWeek"
+                :items="allDays"
+                item-text="name"
+                item-value="value"
+                :label="$t('settings.first-day-of-week')"
+           />
+        </v-col>
+      </v-row>
+    </v-card-text>
     <v-card-actions>
       <v-spacer></v-spacer>
       <v-btn color="success" @click="saveSettings" class="mr-2">
@@ -145,6 +161,7 @@ export default {
     return {
       settings: {
         language: "en",
+        firstDayOfWeek: 0,
         showRecent: null,
         cardsPerSection: null,
         categories: [],
@@ -158,6 +175,38 @@ export default {
     allCategories() {
       return this.$store.getters.getAllCategories;
     },
+    allDays() {
+      return [
+        {
+          name: this.$t('general.sunday'),
+          value: 0,
+        },
+        {
+          name: this.$t('general.monday'),
+          value: 1,
+        },
+        {
+          name: this.$t('general.tuesday'),
+          value: 2,
+        },
+        {
+          name: this.$t('general.wednesday'),
+          value: 3,
+        },
+        {
+          name: this.$t('general.thursday'),
+          value: 4,
+        },
+        {
+          name: this.$t('general.friday'),
+          value: 5,
+        },
+        {
+          name: this.$t('general.saturday'),
+          value: 6,
+        }
+      ];
+    },
   },
 
   methods: {
@@ -176,6 +225,7 @@ export default {
     },
     async saveSettings() {
       await api.siteSettings.update(this.settings);
+      this.$store.commit("setLang", this.settings.language);
       this.getOptions();
     },
   },

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -31,11 +31,11 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <v-date-picker
+            <DatePicker 
               v-model="startDate"
               no-title
               @input="menu2 = false"
-            ></v-date-picker>
+              />
           </v-menu>
         </v-col>
         <v-col cols="12" lg="6" md="6" sm="12">
@@ -59,11 +59,11 @@
                 v-on="on"
               ></v-text-field>
             </template>
-            <v-date-picker
+            <DatePicker 
               v-model="endDate"
               no-title
               @input="menu2 = false"
-            ></v-date-picker>
+              />
           </v-menu>
         </v-col>
       </v-row>
@@ -87,12 +87,14 @@
 
 <script>
 const CREATE_EVENT = "created";
+import DatePicker from "../UI/DatePicker";
 import { api } from "@/api";
 import utils from "@/utils";
 import MealPlanCard from "./MealPlanCard";
 export default {
   components: {
     MealPlanCard,
+    DatePicker,
   },
   data() {
     return {

frontend/src/components/UI/DatePicker.vue

@@ -0,0 +1,31 @@
+<template>
+    <v-date-picker
+        :first-day-of-week="firstDayOfWeek"
+        v-on="$listeners"
+    ></v-date-picker>
+</template>
+
+<script>
+import { api } from "@/api";
+
+export default {
+  data() {
+    return {
+       firstDayOfWeek: 0,
+    };
+  },
+  mounted() {
+    this.getOptions();
+  },
+
+  methods: {
+    async getOptions() {
+      const settings = await api.siteSettings.get();
+      this.firstDayOfWeek = settings.firstDayOfWeek;
+    },
+  },
+}
+</script>
+
+<style>
+</style>

frontend/src/locales/messages/en-US.json

@@ -49,6 +49,13 @@
     "current-parenthesis": "(Current)",
     "users": "Users",
     "groups": "Groups",
+    "sunday": "Sunday",
+    "monday": "Monday",
+    "tuesday": "Tuesday",
+    "wednesday": "Wednesday",
+    "thursday": "Thursday",
+    "friday": "Friday",
+    "saturday": "Saturday",
     "about": "About"
   },
   "page": {
@@ -226,6 +233,8 @@
     "manage-users": "Manage Users",
     "migrations": "Migrations",
     "profile": "Profile",
+    "locale-settings": "Locale settings",
+    "first-day-of-week": "First day of the week",
     "custom-pages": "Custom Pages",
     "new-page": "New Page",
     "edit-page": "Edit Page",

frontend/src/pages/Admin/Settings/index.vue

@@ -28,30 +28,6 @@ export default {
     HomePageSettings,
     CustomPageCreator,
   },
-  data() {
-    return {
-      langOptions: [],
-      selectedLang: "en",
-    };
-  },
-  mounted() {
-    this.getOptions();
-  },
-  watch: {
-    selectedLang() {
-      this.$store.commit("setLang", this.selectedLang);
-    },
-  },
-  methods: {
-    getOptions() {
-      this.langOptions = this.$store.getters.getAllLangs;
-      this.selectedLang = this.$store.getters.getActiveLang;
-    },
-    removeCategory(index) {
-      this.value.categories.splice(index, 1);
-    },
-
-  },
 };
 </script>
 

frontend/src/store/modules/siteSettings.js

@@ -3,6 +3,7 @@ import { api } from "@/api";
 const state = {
   siteSettings: {
     language: "en",
+    firstDayOfWeek: 0,
     showRecent: true,
     cardsPerSection: 9,
     categories: [],

mealie/db/models/settings.py

@@ -9,6 +9,7 @@ class SiteSettings(SqlAlchemyBase, BaseMixins):
     __tablename__ = "site_settings"
     id = sa.Column(sa.Integer, primary_key=True)
     language = sa.Column(sa.String)
+    first_day_of_week = sa.Column(sa.Integer)
     categories = orm.relationship(
         "Category",
         secondary=site_settings2categories,
@@ -21,12 +22,14 @@ class SiteSettings(SqlAlchemyBase, BaseMixins):
         self,
         session: Session = None,
         language="en",
+        first_day_of_week: int = 0,
         categories: list = [],
         show_recent=True,
         cards_per_section: int = 9,
     ) -> None:
         session.commit()
         self.language = language
+        self.first_day_of_week = first_day_of_week
         self.cards_per_section = cards_per_section
         self.show_recent = show_recent
         self.categories = [Category.get_ref(session=session, slug=cat.get("slug")) for cat in categories]

mealie/schema/settings.py

@@ -8,6 +8,7 @@ from slugify import slugify
 
 class SiteSettings(CamelModel):
     language: str = "en"
+    first_day_of_week: int = 0
     show_recent: bool = True
     cards_per_section: int = 9
     categories: Optional[list[CategoryBase]] = []
@@ -18,6 +19,7 @@ class SiteSettings(CamelModel):
         schema_extra = {
             "example": {
                 "language": "en",
+                "firstDayOfWeek": 0,
                 "showRecent": True,
                 "categories": [
                     {"id": 1, "name": "thanksgiving", "slug": "thanksgiving"},