mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
[Feat] ✨ Migrate from Pages to Cookbooks (#664)
* feat: ✨ Add Description to Cookbooks * feat(frontend): ✨ Cookbook view page * feat(frontend): 💄 Add final UI touches * fix(backend): 🐛 Add get by slug or id * fix linting issue * test(backend): ✅ Update tests from pages -> cookbooks * refactor(backend): 🔥 Delete old page files Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
parent
165fd8efd6
commit
9b1bf56a5d
22 changed files with 167 additions and 173 deletions
49
frontend/pages/cookbooks/_slug.vue
Normal file
49
frontend/pages/cookbooks/_slug.vue
Normal file
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<v-container v-if="book" fluid>
|
||||
<v-app-bar color="transparent" flat class="mt-n1 rounded">
|
||||
<v-icon large left> {{ $globals.icons.pages }} </v-icon>
|
||||
<v-toolbar-title class="headline"> {{ book.name }} </v-toolbar-title>
|
||||
</v-app-bar>
|
||||
<v-card flat>
|
||||
<v-card-text class="py-0">
|
||||
{{ book.description }}
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-tabs v-model="tab" show-arrows>
|
||||
<v-tab v-for="(cat, index) in book.categories" :key="index">
|
||||
{{ cat.name }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item v-for="(cat, idx) in book.categories" :key="`tabs` + idx">
|
||||
<RecipeCardSection class="mb-5 mx-1" :recipes="cat.recipes" />
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
|
||||
import { defineComponent, useRoute, ref } from "@nuxtjs/composition-api";
|
||||
import { useCookbook } from "~/composables/use-cookbooks";
|
||||
export default defineComponent({
|
||||
components: { RecipeCardSection },
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const slug = route.value.params.slug;
|
||||
const { getOne } = useCookbook();
|
||||
|
||||
const tab = ref(null);
|
||||
|
||||
const book = getOne(slug);
|
||||
|
||||
return {
|
||||
book,
|
||||
tab,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
|
@ -6,27 +6,33 @@
|
|||
<draggable v-model="cookbooks" handle=".handle" style="width: 100%" @change="actions.updateOrder()">
|
||||
<v-expansion-panel v-for="(cookbook, index) in cookbooks" :key="index" class="my-2 my-border rounded">
|
||||
<v-expansion-panel-header disable-icon-rotate class="headline">
|
||||
{{ cookbook.name }}
|
||||
<div class="d-flex align-center">
|
||||
<v-icon large left>
|
||||
{{ $globals.icons.pages }}
|
||||
</v-icon>
|
||||
{{ cookbook.name }}
|
||||
</div>
|
||||
<template #actions>
|
||||
<v-btn color="info" fab small class="ml-auto mr-2">
|
||||
<v-icon class="handle">
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
<v-btn color="info" fab small class="ml-2">
|
||||
<v-icon color="white">
|
||||
{{ $globals.icons.edit }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<v-icon class="handle">
|
||||
{{ $globals.icons.arrowUpDown }}
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-expansion-panel-header>
|
||||
<v-expansion-panel-content>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="cookbooks[index].name" label="Cookbook Name"></v-text-field>
|
||||
<v-textarea v-model="cookbooks[index].description" auto-grow :rows="2" label="Description"></v-textarea>
|
||||
<DomainRecipeCategoryTagSelector v-model="cookbooks[index].categories" />
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<BaseButton delete @click="actions.deleteOne(cookbook.id)" />
|
||||
<BaseButton update @click="actions.updateOne(cookbook)"> </BaseButton>
|
||||
<BaseButton save @click="actions.updateOne(cookbook)"> </BaseButton>
|
||||
</v-card-actions>
|
||||
</v-expansion-panel-content>
|
||||
</v-expansion-panel>
|
Loading…
Add table
Add a link
Reference in a new issue