mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-30 18:49:41 +02:00
feature/profile-cards (#391)
* unify format * pass variables * remove namespace * rename * group-card init * shuffle + icons * remove console.logs * token CRUD * update changelog * add profile link * consolidate mealplan to profile dashboard * update docs * add query parameter to search page * update test routes * update python depts * basic token tests Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
parent
f4384167f6
commit
95ec13161f
41 changed files with 977 additions and 449 deletions
|
@ -1,24 +1,23 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<v-card flat height="100%">
|
||||
<v-app-bar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-card-title class="text-center justify-center py-3 ">
|
||||
{{ title.toUpperCase() }}
|
||||
</v-card-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-app-bar color="transparent" flat class="mt-n1 rounded">
|
||||
<v-icon large left>
|
||||
mdi-tag-multiple-outline
|
||||
</v-icon>
|
||||
<v-toolbar-title class="headline"> {{ page.name }} </v-toolbar-title>
|
||||
</v-app-bar>
|
||||
|
||||
<div v-if="render">
|
||||
<v-tabs v-model="tab" background-color="transparent" grow>
|
||||
<v-tab v-for="item in categories" :key="item.slug">
|
||||
<v-tab v-for="item in page.categories" :key="item.slug" :href="`#${item.slug}`">
|
||||
{{ item.name }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item v-for="(item, index) in categories" :key="item.slug + index">
|
||||
<CardSection class="mb-5 mx-1" :recipes="filterRecipe(item.slug)" />
|
||||
<v-tab-item v-for="(item, index) in page.categories" :key="item.slug + index" :value="item.slug">
|
||||
<CardSection class="mb-5 mx-1" :recipes="item.recipes" @sort="sortRecipes($event, index)" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</div>
|
||||
|
@ -36,8 +35,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
page: "",
|
||||
title: "",
|
||||
tab: null,
|
||||
render: false,
|
||||
recipeStore: [],
|
||||
categories: [],
|
||||
|
@ -47,6 +46,14 @@ export default {
|
|||
pageSlug() {
|
||||
return this.$route.params.customPage;
|
||||
},
|
||||
tab: {
|
||||
set(tab) {
|
||||
this.$router.replace({ query: { ...this.$route.query, tab } });
|
||||
},
|
||||
get() {
|
||||
return this.$route.query.tab;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
|
@ -61,27 +68,15 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
async buildPage() {
|
||||
const page = await api.siteSettings.getPage(this.pageSlug);
|
||||
this.title = page.name;
|
||||
this.categories = page.categories;
|
||||
page.categories.forEach(async element => {
|
||||
let categoryRecipes = await this.getRecipeByCategory(element.slug);
|
||||
this.recipeStore.push(categoryRecipes);
|
||||
});
|
||||
},
|
||||
async getRecipeByCategory(category) {
|
||||
return await api.categories.getRecipesInCategory(category);
|
||||
this.page = await api.siteSettings.getPage(this.pageSlug);
|
||||
},
|
||||
filterRecipe(slug) {
|
||||
const storeCategory = this.recipeStore.find(element => element.slug === slug);
|
||||
return storeCategory ? storeCategory.recipes : [];
|
||||
},
|
||||
sortRecipes(sortedRecipes, destKey) {
|
||||
this.page.categories[destKey].recipes = sortedRecipes;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-background {
|
||||
background-color: #121619;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue