From 8e27d0b83fa63b9ce7f1466e0fe43f919cf54a21 Mon Sep 17 00:00:00 2001
From: sephrat <34862846+sephrat@users.noreply.github.com>
Date: Wed, 21 Apr 2021 08:43:36 +0200
Subject: [PATCH] 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
---
 .../Admin/General/HomePageSettings.vue        | 56 ++++++++++++++++++-
 .../src/components/MealPlan/MealPlanNew.vue   | 10 ++--
 frontend/src/components/UI/DatePicker.vue     | 31 ++++++++++
 frontend/src/locales/messages/en-US.json      |  9 +++
 frontend/src/pages/Admin/Settings/index.vue   | 24 --------
 frontend/src/store/modules/siteSettings.js    |  1 +
 mealie/db/models/settings.py                  |  3 +
 mealie/schema/settings.py                     |  2 +
 8 files changed, 105 insertions(+), 31 deletions(-)
 create mode 100644 frontend/src/components/UI/DatePicker.vue

diff --git a/frontend/src/components/Admin/General/HomePageSettings.vue b/frontend/src/components/Admin/General/HomePageSettings.vue
index 91aec8a57..6345db60d 100644
--- a/frontend/src/components/Admin/General/HomePageSettings.vue
+++ b/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();
     },
   },
diff --git a/frontend/src/components/MealPlan/MealPlanNew.vue b/frontend/src/components/MealPlan/MealPlanNew.vue
index 278efd3fc..42f00116c 100644
--- a/frontend/src/components/MealPlan/MealPlanNew.vue
+++ b/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 {
diff --git a/frontend/src/components/UI/DatePicker.vue b/frontend/src/components/UI/DatePicker.vue
new file mode 100644
index 000000000..2262eb3cb
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/locales/messages/en-US.json b/frontend/src/locales/messages/en-US.json
index 4bf311d2a..9a63052c5 100644
--- a/frontend/src/locales/messages/en-US.json
+++ b/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",
diff --git a/frontend/src/pages/Admin/Settings/index.vue b/frontend/src/pages/Admin/Settings/index.vue
index ea83515db..73deaa87d 100644
--- a/frontend/src/pages/Admin/Settings/index.vue
+++ b/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>
 
diff --git a/frontend/src/store/modules/siteSettings.js b/frontend/src/store/modules/siteSettings.js
index f521f4eb5..9b526275a 100644
--- a/frontend/src/store/modules/siteSettings.js
+++ b/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: [],
diff --git a/mealie/db/models/settings.py b/mealie/db/models/settings.py
index cc40dd787..fbebdcd06 100644
--- a/mealie/db/models/settings.py
+++ b/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]
diff --git a/mealie/schema/settings.py b/mealie/schema/settings.py
index 9f147d16a..b275cf60c 100644
--- a/mealie/schema/settings.py
+++ b/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"},