1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 07:39:41 +02:00
mealie/frontend/src/pages/Admin/Settings/HomePageSettings.vue
Hayden 034a21e203
TheButton global component (#425)
Co-authored-by: hay-kot <hay-kot@pm.me>
2021-05-24 10:12:46 -08:00

220 lines
6.3 KiB
Vue

<template>
<v-card flat>
<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="12" sm="3" md="2">
<v-switch v-model="settings.showRecent" :label="$t('settings.homepage.show-recent')"></v-switch>
</v-col>
<v-col cols="12" sm="5" md="5">
<v-slider
class="pt-sm-4"
:label="$t('settings.homepage.card-per-section')"
v-model="settings.cardsPerSection"
max="30"
dense
color="primary"
min="3"
thumb-label
>
</v-slider>
</v-col>
<v-spacer></v-spacer>
</v-row>
</v-card-text>
<v-card-text>
<v-row>
<v-col cols="12" sm="6">
<v-card outlined min-height="350px">
<v-app-bar dark dense color="primary">
<v-icon left>
mdi-home
</v-icon>
<v-toolbar-title class="headline">
{{ $t("settings.homepage.home-page-sections") }}
</v-toolbar-title>
<v-spacer></v-spacer>
</v-app-bar>
<v-list height="300" dense style="overflow:auto">
<v-list-item-group>
<draggable
v-model="settings.categories"
group="categories"
:style="{
minHeight: `150px`,
}"
>
<v-list-item v-for="(item, index) in settings.categories" :key="`${item.name}-${index}`">
<v-list-item-icon>
<v-icon>mdi-menu</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item-content>
<v-list-item-icon @click="deleteActiveCategory(index)">
<v-icon>{{ $globals.icons.delete }}</v-icon>
</v-list-item-icon>
</v-list-item>
</draggable>
</v-list-item-group>
</v-list>
</v-card>
</v-col>
<v-col cols="12" sm="6">
<v-card outlined height="350px">
<v-app-bar dark dense color="primary">
<v-icon left>
{{ $globals.icons.tags }}
</v-icon>
<v-toolbar-title class="headline">
{{ $t("settings.homepage.all-categories") }}
</v-toolbar-title>
<v-spacer></v-spacer>
<NewCategoryTagDialog :tag-dialog="false" />
</v-app-bar>
<v-list height="300" dense style="overflow:auto">
<v-list-item-group>
<draggable
v-model="allCategories"
group="categories"
:style="{
minHeight: `150px`,
}"
>
<v-list-item v-for="(item, index) in allCategories" :key="`${item.name}-${index}`">
<v-list-item-icon>
<v-icon>mdi-menu</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title v-text="item.name"></v-list-item-title>
</v-list-item-content>
<v-list-item-icon @click="deleteCategoryfromDatabase(item.slug)">
<v-icon>{{ $globals.icons.delete }}</v-icon>
</v-list-item-icon>
</v-list-item>
</draggable>
</v-list-item-group>
</v-list>
</v-card>
</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="12" md="3" sm="12">
<LanguageSelector @select-lang="writeLang" :site-settings="true" />
</v-col>
<v-col cols="12" md="3" sm="12">
<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>
<TheButton class="mr-2" update @click="saveSettings" />
</v-card-actions>
</v-card>
</template>
<script>
import { api } from "@/api";
import LanguageSelector from "@/components/FormHelpers/LanguageSelector";
import draggable from "vuedraggable";
import NewCategoryTagDialog from "@/components/UI/Dialogs/NewCategoryTagDialog.vue";
export default {
components: {
draggable,
LanguageSelector,
NewCategoryTagDialog,
},
data() {
return {
settings: {
language: "en",
firstDayOfWeek: 0,
showRecent: null,
cardsPerSection: null,
categories: [],
},
};
},
mounted() {
this.getOptions();
},
computed: {
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: {
writeLang(val) {
this.settings.language = val;
},
deleteCategoryfromDatabase(category) {
api.categories.delete(category);
},
async getOptions() {
this.settings = await api.siteSettings.get();
},
deleteActiveCategory(index) {
this.settings.categories.splice(index, 1);
},
async saveSettings() {
if (await api.siteSettings.update(this.settings)) {
this.getOptions();
}
},
},
};
</script>
<style></style>