mirror of
https://github.com/hay-kot/mealie.git
synced 2025-08-22 06:23:34 -07:00
frontend category placeholder
This commit is contained in:
hayden
parent
ac14926f1e
commit
2ad4085c9d
7 changed files with 200 additions and 82 deletions
|
|
@ -58,6 +58,7 @@ export default {
|
|||
mounted() {
|
||||
this.$store.dispatch("initTheme");
|
||||
this.$store.dispatch("requestRecentRecipes");
|
||||
this.$store.dispatch("requestHomePageSettings");
|
||||
this.$store.dispatch("initLang");
|
||||
this.darkModeSystemCheck();
|
||||
this.darkModeAddEventListener();
|
||||
|
|
|
|||
144
frontend/src/components/Settings/General/HomePageSettings.vue
Normal file
144
frontend/src/components/Settings/General/HomePageSettings.vue
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<h2 class="mt-1 mb-1">Home Page</h2>
|
||||
<v-row align="center" justify="center" dense class="mb-n7 pb-n5">
|
||||
<v-col sm="2">
|
||||
<v-switch v-model="showRecent" label="Show Recent"></v-switch>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-slider
|
||||
class="pt-4"
|
||||
label="Card Per Section"
|
||||
v-model="showLimit"
|
||||
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>
|
||||
<v-card outlined min-height="250">
|
||||
<v-card-text class="pt-2 pb-1">
|
||||
<h3>Homepage Categories</h3>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-list min-height="200px" dense>
|
||||
<v-list-item-group>
|
||||
<draggable v-model="homeCategories" group="categories">
|
||||
<v-list-item
|
||||
v-for="(item, index) in homeCategories"
|
||||
:key="item"
|
||||
>
|
||||
<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"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-icon @click="deleteActiveCategory(index)">
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
</draggable>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-card outlined min-height="250px">
|
||||
<v-card-text class="pt-2 pb-1">
|
||||
<h3>
|
||||
All Categories
|
||||
<span>
|
||||
<v-btn absolute right x-small color="success" icon> <v-icon>mdi-plus</v-icon></v-btn>
|
||||
</span>
|
||||
</h3>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-list min-height="200px" dense>
|
||||
<v-list-item-group>
|
||||
<draggable v-model="categories" group="categories">
|
||||
<v-list-item v-for="item in categories" :key="item">
|
||||
<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"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-list-item-icon @click="deleteActiveCategory(index)">
|
||||
<v-icon>mdi-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-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="success" @click="saveSettings" class="mr-2">
|
||||
<v-icon left> mdi-content-save </v-icon>
|
||||
{{ $t("general.save") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from "vuedraggable";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
homeCategories: [],
|
||||
showLimit: null,
|
||||
categories: ["breakfast"],
|
||||
showRecent: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getOptions();
|
||||
},
|
||||
|
||||
methods: {
|
||||
getOptions() {
|
||||
let options = this.$store.getters.getHomePageSettings;
|
||||
this.showLimit = options.showLimit;
|
||||
this.categories = options.categories;
|
||||
this.showRecent = options.showRecent;
|
||||
this.homeCategories = options.homeCategories;
|
||||
},
|
||||
deleteActiveCategory(index) {
|
||||
this.homeCategories.splice(index, 1);
|
||||
},
|
||||
saveSettings() {
|
||||
let payload = {
|
||||
showRecent: this.showRecent,
|
||||
showLimit: this.showLimit,
|
||||
categories: this.categories,
|
||||
homeCategories: this.homeCategories,
|
||||
};
|
||||
|
||||
this.$store.commit("setHomePageSettings", payload);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -4,76 +4,14 @@
|
|||
General Settings
|
||||
<v-spacer></v-spacer>
|
||||
<span>
|
||||
<v-btn class="pt-1" text to="/docs">
|
||||
<v-btn class="pt-1" text href="/docs">
|
||||
<v-icon left>mdi-link</v-icon>
|
||||
Local API
|
||||
</v-btn>
|
||||
</span>
|
||||
</v-card-title>
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<h2 class="mt-1 mb-1">Home Page</h2>
|
||||
<v-slider
|
||||
label="Card Per Section"
|
||||
v-model="homeOptions.recipesToShow"
|
||||
max="30"
|
||||
dense
|
||||
color="primary"
|
||||
min="3"
|
||||
thumb-label
|
||||
>
|
||||
</v-slider>
|
||||
</v-card-text>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-card outlined min-height="250">
|
||||
<v-card-text class="pb-1">
|
||||
<h3>Homepage Categories</h3>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-list min-height="200px" dense>
|
||||
<v-list-item-group>
|
||||
<draggable v-model="usedCategories" group="categories">
|
||||
<v-list-item v-for="item in usedCategories" :key="item">
|
||||
<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"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</draggable>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<v-card outlined min-height="250px">
|
||||
<v-card-text class="pb-1">
|
||||
<h3>All Categories</h3>
|
||||
</v-card-text>
|
||||
<v-divider></v-divider>
|
||||
<v-list min-height="200px" dense>
|
||||
<v-list-item-group>
|
||||
<draggable v-model="categories" group="categories">
|
||||
<v-list-item v-for="item in categories" :key="item">
|
||||
<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"></v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</draggable>
|
||||
</v-list-item-group>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<HomePageSettings />
|
||||
<v-divider></v-divider>
|
||||
<v-card-text>
|
||||
<h2 class="mt-1 mb-1">Language</h2>
|
||||
|
|
@ -97,11 +35,11 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import draggable from "vuedraggable";
|
||||
import HomePageSettings from "./HomePageSettings";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
draggable,
|
||||
HomePageSettings,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="mt-n5">
|
||||
<v-card flat class="transparent mb-2" height="50px">
|
||||
<v-card flat class="transparent" height="60px">
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col>
|
||||
|
|
@ -12,10 +12,21 @@
|
|||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col align="end">
|
||||
<v-btn-toggle group>
|
||||
<v-btn text color="accent"> Sort </v-btn>
|
||||
<v-btn text color="accent"> Limit </v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-menu offset-y>
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn-toggle group>
|
||||
<v-btn text v-bind="attrs" v-on="on"> Sort </v-btn>
|
||||
</v-btn-toggle>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item @click="$emit('sort-recent')">
|
||||
<v-list-item-title> Recent </v-list-item-title>
|
||||
</v-list-item>
|
||||
<v-list-item @click="$emit('sort')">
|
||||
<v-list-item-title> A-Z </v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
|
|
|
|||
|
|
@ -4,13 +4,16 @@
|
|||
v-if="pageSettings.showRecent"
|
||||
title="Recent"
|
||||
:recipes="recentRecipes"
|
||||
:card-limit="pageSettings.showLimit"
|
||||
/>
|
||||
<CardSection
|
||||
v-for="section in recipeByCategory"
|
||||
:key="section.title"
|
||||
v-for="(section, index) in recipeByCategory"
|
||||
:key="index"
|
||||
:title="section.title"
|
||||
:recipes="section.recipes"
|
||||
:limit="pageSettings.showLimit"
|
||||
:card-limit="pageSettings.showLimit"
|
||||
@sort="sortAZ(index)"
|
||||
@sort-recent="sortRecent(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -36,17 +39,29 @@ export default {
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
recentRecipes() {
|
||||
return this.$store.getters.getRecentRecipes;
|
||||
},
|
||||
pageSettings() {
|
||||
return this.$store.getters.getHomePageSettings;
|
||||
},
|
||||
recentRecipes() {
|
||||
return this.$store.getters.getRecentRecipes;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getRecentRecipes() {
|
||||
this.$store.dispatch("requestRecentRecipes");
|
||||
},
|
||||
sortAZ(index) {
|
||||
this.recipeByCategory[index].recipes.sort((a, b) =>
|
||||
a.name > b.name ? 1 : -1
|
||||
);
|
||||
console.log(this.recipeByCategory[index].recipes);
|
||||
},
|
||||
sortRecent(index) {
|
||||
this.recipeByCategory[index].recipes.sort((a, b) =>
|
||||
a.dateAdded > b.dateAdded ? -1 : 1
|
||||
);
|
||||
console.log(this.recipeByCategory[index].recipes);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
c
|
||||
|
|
@ -19,10 +19,11 @@ const store = new Vuex.Store({
|
|||
},
|
||||
state: {
|
||||
// Home Page Settings
|
||||
homePage: {
|
||||
homePageSettings: {
|
||||
showRecent: true,
|
||||
showLimit: 9,
|
||||
categories: [],
|
||||
homeCategories: [],
|
||||
},
|
||||
// Snackbar
|
||||
snackActive: false,
|
||||
|
|
@ -35,8 +36,8 @@ const store = new Vuex.Store({
|
|||
},
|
||||
|
||||
mutations: {
|
||||
setHomePage(state, payload) {
|
||||
state.homePage = payload;
|
||||
setHomePageSettings(state, payload) {
|
||||
state.homePageSettings = payload;
|
||||
},
|
||||
setSnackBar(state, payload) {
|
||||
state.snackText = payload.text;
|
||||
|
|
@ -66,6 +67,15 @@ const store = new Vuex.Store({
|
|||
|
||||
this.commit("setRecentRecipes", payload);
|
||||
},
|
||||
|
||||
async requestHomePageSettings() {
|
||||
// TODO: Query Backend for Categories
|
||||
// this.commit("setHomePage", {
|
||||
// showRecent: true,
|
||||
// showLimit: 9,
|
||||
// categories: ["breakfast", "lunch", "dinner"],
|
||||
// });
|
||||
},
|
||||
},
|
||||
|
||||
getters: {
|
||||
|
|
@ -75,7 +85,7 @@ const store = new Vuex.Store({
|
|||
getSnackType: (state) => state.snackType,
|
||||
|
||||
getRecentRecipes: (state) => state.recentRecipes,
|
||||
getHomePageSettings: (state) => state.homePage,
|
||||
getHomePageSettings: (state) => state.homePageSettings,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue