mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-09 03:04:54 -04:00
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
This commit is contained in:
parent
197d794ca6
commit
8e27d0b83f
@ -3,9 +3,6 @@
|
|||||||
<v-card-text>
|
<v-card-text>
|
||||||
<h2 class="mt-1 mb-1">{{ $t("settings.homepage.home-page") }}</h2>
|
<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-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-col cols="12" sm="3" md="2">
|
||||||
<v-switch
|
<v-switch
|
||||||
v-model="settings.showRecent"
|
v-model="settings.showRecent"
|
||||||
@ -119,6 +116,25 @@
|
|||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
</v-card-text>
|
</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-card-actions>
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
<v-btn color="success" @click="saveSettings" class="mr-2">
|
<v-btn color="success" @click="saveSettings" class="mr-2">
|
||||||
@ -145,6 +161,7 @@ export default {
|
|||||||
return {
|
return {
|
||||||
settings: {
|
settings: {
|
||||||
language: "en",
|
language: "en",
|
||||||
|
firstDayOfWeek: 0,
|
||||||
showRecent: null,
|
showRecent: null,
|
||||||
cardsPerSection: null,
|
cardsPerSection: null,
|
||||||
categories: [],
|
categories: [],
|
||||||
@ -158,6 +175,38 @@ export default {
|
|||||||
allCategories() {
|
allCategories() {
|
||||||
return this.$store.getters.getAllCategories;
|
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: {
|
methods: {
|
||||||
@ -176,6 +225,7 @@ export default {
|
|||||||
},
|
},
|
||||||
async saveSettings() {
|
async saveSettings() {
|
||||||
await api.siteSettings.update(this.settings);
|
await api.siteSettings.update(this.settings);
|
||||||
|
this.$store.commit("setLang", this.settings.language);
|
||||||
this.getOptions();
|
this.getOptions();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -31,11 +31,11 @@
|
|||||||
v-on="on"
|
v-on="on"
|
||||||
></v-text-field>
|
></v-text-field>
|
||||||
</template>
|
</template>
|
||||||
<v-date-picker
|
<DatePicker
|
||||||
v-model="startDate"
|
v-model="startDate"
|
||||||
no-title
|
no-title
|
||||||
@input="menu2 = false"
|
@input="menu2 = false"
|
||||||
></v-date-picker>
|
/>
|
||||||
</v-menu>
|
</v-menu>
|
||||||
</v-col>
|
</v-col>
|
||||||
<v-col cols="12" lg="6" md="6" sm="12">
|
<v-col cols="12" lg="6" md="6" sm="12">
|
||||||
@ -59,11 +59,11 @@
|
|||||||
v-on="on"
|
v-on="on"
|
||||||
></v-text-field>
|
></v-text-field>
|
||||||
</template>
|
</template>
|
||||||
<v-date-picker
|
<DatePicker
|
||||||
v-model="endDate"
|
v-model="endDate"
|
||||||
no-title
|
no-title
|
||||||
@input="menu2 = false"
|
@input="menu2 = false"
|
||||||
></v-date-picker>
|
/>
|
||||||
</v-menu>
|
</v-menu>
|
||||||
</v-col>
|
</v-col>
|
||||||
</v-row>
|
</v-row>
|
||||||
@ -87,12 +87,14 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
const CREATE_EVENT = "created";
|
const CREATE_EVENT = "created";
|
||||||
|
import DatePicker from "../UI/DatePicker";
|
||||||
import { api } from "@/api";
|
import { api } from "@/api";
|
||||||
import utils from "@/utils";
|
import utils from "@/utils";
|
||||||
import MealPlanCard from "./MealPlanCard";
|
import MealPlanCard from "./MealPlanCard";
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
MealPlanCard,
|
MealPlanCard,
|
||||||
|
DatePicker,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
31
frontend/src/components/UI/DatePicker.vue
Normal file
31
frontend/src/components/UI/DatePicker.vue
Normal file
@ -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>
|
@ -49,6 +49,13 @@
|
|||||||
"current-parenthesis": "(Current)",
|
"current-parenthesis": "(Current)",
|
||||||
"users": "Users",
|
"users": "Users",
|
||||||
"groups": "Groups",
|
"groups": "Groups",
|
||||||
|
"sunday": "Sunday",
|
||||||
|
"monday": "Monday",
|
||||||
|
"tuesday": "Tuesday",
|
||||||
|
"wednesday": "Wednesday",
|
||||||
|
"thursday": "Thursday",
|
||||||
|
"friday": "Friday",
|
||||||
|
"saturday": "Saturday",
|
||||||
"about": "About"
|
"about": "About"
|
||||||
},
|
},
|
||||||
"page": {
|
"page": {
|
||||||
@ -226,6 +233,8 @@
|
|||||||
"manage-users": "Manage Users",
|
"manage-users": "Manage Users",
|
||||||
"migrations": "Migrations",
|
"migrations": "Migrations",
|
||||||
"profile": "Profile",
|
"profile": "Profile",
|
||||||
|
"locale-settings": "Locale settings",
|
||||||
|
"first-day-of-week": "First day of the week",
|
||||||
"custom-pages": "Custom Pages",
|
"custom-pages": "Custom Pages",
|
||||||
"new-page": "New Page",
|
"new-page": "New Page",
|
||||||
"edit-page": "Edit Page",
|
"edit-page": "Edit Page",
|
||||||
|
@ -28,30 +28,6 @@ export default {
|
|||||||
HomePageSettings,
|
HomePageSettings,
|
||||||
CustomPageCreator,
|
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>
|
</script>
|
||||||
|
|
||||||
|
@ -3,6 +3,7 @@ import { api } from "@/api";
|
|||||||
const state = {
|
const state = {
|
||||||
siteSettings: {
|
siteSettings: {
|
||||||
language: "en",
|
language: "en",
|
||||||
|
firstDayOfWeek: 0,
|
||||||
showRecent: true,
|
showRecent: true,
|
||||||
cardsPerSection: 9,
|
cardsPerSection: 9,
|
||||||
categories: [],
|
categories: [],
|
||||||
|
@ -9,6 +9,7 @@ class SiteSettings(SqlAlchemyBase, BaseMixins):
|
|||||||
__tablename__ = "site_settings"
|
__tablename__ = "site_settings"
|
||||||
id = sa.Column(sa.Integer, primary_key=True)
|
id = sa.Column(sa.Integer, primary_key=True)
|
||||||
language = sa.Column(sa.String)
|
language = sa.Column(sa.String)
|
||||||
|
first_day_of_week = sa.Column(sa.Integer)
|
||||||
categories = orm.relationship(
|
categories = orm.relationship(
|
||||||
"Category",
|
"Category",
|
||||||
secondary=site_settings2categories,
|
secondary=site_settings2categories,
|
||||||
@ -21,12 +22,14 @@ class SiteSettings(SqlAlchemyBase, BaseMixins):
|
|||||||
self,
|
self,
|
||||||
session: Session = None,
|
session: Session = None,
|
||||||
language="en",
|
language="en",
|
||||||
|
first_day_of_week: int = 0,
|
||||||
categories: list = [],
|
categories: list = [],
|
||||||
show_recent=True,
|
show_recent=True,
|
||||||
cards_per_section: int = 9,
|
cards_per_section: int = 9,
|
||||||
) -> None:
|
) -> None:
|
||||||
session.commit()
|
session.commit()
|
||||||
self.language = language
|
self.language = language
|
||||||
|
self.first_day_of_week = first_day_of_week
|
||||||
self.cards_per_section = cards_per_section
|
self.cards_per_section = cards_per_section
|
||||||
self.show_recent = show_recent
|
self.show_recent = show_recent
|
||||||
self.categories = [Category.get_ref(session=session, slug=cat.get("slug")) for cat in categories]
|
self.categories = [Category.get_ref(session=session, slug=cat.get("slug")) for cat in categories]
|
||||||
|
@ -8,6 +8,7 @@ from slugify import slugify
|
|||||||
|
|
||||||
class SiteSettings(CamelModel):
|
class SiteSettings(CamelModel):
|
||||||
language: str = "en"
|
language: str = "en"
|
||||||
|
first_day_of_week: int = 0
|
||||||
show_recent: bool = True
|
show_recent: bool = True
|
||||||
cards_per_section: int = 9
|
cards_per_section: int = 9
|
||||||
categories: Optional[list[CategoryBase]] = []
|
categories: Optional[list[CategoryBase]] = []
|
||||||
@ -18,6 +19,7 @@ class SiteSettings(CamelModel):
|
|||||||
schema_extra = {
|
schema_extra = {
|
||||||
"example": {
|
"example": {
|
||||||
"language": "en",
|
"language": "en",
|
||||||
|
"firstDayOfWeek": 0,
|
||||||
"showRecent": True,
|
"showRecent": True,
|
||||||
"categories": [
|
"categories": [
|
||||||
{"id": 1, "name": "thanksgiving", "slug": "thanksgiving"},
|
{"id": 1, "name": "thanksgiving", "slug": "thanksgiving"},
|
||||||
|
Loading…
x
Reference in New Issue
Block a user