1
0
Fork 0
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:
Hayden 2021-08-31 18:51:34 -08:00 committed by GitHub
parent 165fd8efd6
commit 9b1bf56a5d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 167 additions and 173 deletions

View 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>

View file

@ -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>