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

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: {
@@ -175,6 +224,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">
@@ -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,30 @@
+<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() {
+      this.firstDayOfWeek = await api.siteSettings.get().firstDayOfWeek;
+    },
+  },
+}
+</script>
+
+<style>
+</style>

frontend/src/locales/messages/en.json

@@ -48,7 +48,14 @@
     "apply": "Apply",
     "current-parenthesis": "(Current)",
     "users": "Users",
-    "groups": "Groups"
+    "groups": "Groups",
+    "sunday": "Sunday",
+    "monday": "Monday",
+    "tuesday": "Tuesday",
+    "wednesday": "Wednesday",
+    "thursday": "Thursday",
+    "friday": "Friday",
+    "saturday": "Saturday"
   },
   "page": {
     "home-page": "Home Page",
@@ -215,7 +222,9 @@
     "site-settings": "Site Settings",
     "manage-users": "Manage Users",
     "migrations": "Migrations",
-    "profile": "Profile"
+    "profile": "Profile",
+    "locale-settings": "Locale settings",
+    "first-day-of-week": "First day of the week"
   },
   "migration": {
     "recipe-migration": "Recipe Migration",

frontend/src/locales/messages/fr.json

@@ -46,7 +46,14 @@
     "token": "Jeton",
     "field-required": "Champ obligatoire",
     "apply": "Appliquer",
-    "current-parenthesis": "(Actuel)"
+    "current-parenthesis": "(Actuel)",
+    "friday": "Vendredi",
+    "monday": "Lundi",
+    "saturday": "Samedi",
+    "sunday": "Dimanche",
+    "thursday": "Jeudi",
+    "tuesday": "Mardi",
+    "wednesday": "Mercredi"
   },
   "page": {
     "home-page": "Accueil",
@@ -213,7 +220,9 @@
     "manage-users": "Utilisateurs",
     "migrations": "Migrations",
     "profile": "Profil",
-    "site-settings": "Paramètres site"
+    "site-settings": "Paramètres site",
+    "locale-settings": "Paramètres de langue",
+    "first-day-of-week": "Premier jour de la semaine"
   },
   "migration": {
     "recipe-migration": "Migrer les recettes",

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"},