Michael Genson 2c5e5a8421
feat: Public Recipe Browser (#2525)
* fixed incorrect var ref

* added public recipe pagination route

* refactored frontend public/explore API

* fixed broken public cards

* hid context menu from cards when public

* fixed public app header

* fixed random recipe

* added public food, category, tag, and tool routes

* not sure why I thought that would work

* added public organizer/foods stores

* disabled clicking on tags/categories

* added public link to profile page

* linting

* force a 404 if the group slug is missing or invalid

* oops

* refactored to fit sidebar into explore

* fixed invalid logic for app header

* removed most sidebar options from public

* added backend routes for public cookbooks

* added explore cookbook pages/apis

* codegen

* added backend tests

* lint

* fixes v-for keys

* I do not understand but sure why not

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
2023-09-14 06:01:24 -08:00

75 lines
2.1 KiB
Vue

<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-container class="pa-0">
<RecipeCardSection
class="mb-5 mx-1"
:recipes="recipes"
:query="{ cookbook: slug }"
:group-slug="groupSlug"
@sortRecipes="assignSorted"
@replaceRecipes="replaceRecipes"
@appendRecipes="appendRecipes"
@delete="removeRecipe"
/>
</v-container>
</v-container>
</template>
<script lang="ts">
import { computed, defineComponent, useRoute, ref, useContext, useMeta } from "@nuxtjs/composition-api";
import { useLazyRecipes } from "~/composables/recipes";
import RecipeCardSection from "@/components/Domain/Recipe/RecipeCardSection.vue";
import { useCookbook } from "~/composables/use-group-cookbooks";
export default defineComponent({
components: { RecipeCardSection },
props: {
groupSlug: {
type: String,
default: undefined,
}
},
setup(props) {
const { $auth } = useContext();
const loggedIn = computed(() => $auth.loggedIn);
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(loggedIn.value ? null : props.groupSlug);
const route = useRoute();
const slug = route.value.params.slug;
const { getOne } = useCookbook(loggedIn.value ? null : props.groupSlug);
const tab = ref(null);
const book = getOne(slug);
useMeta(() => {
return {
title: book?.value?.name || "Cookbook",
};
});
return {
book,
slug,
tab,
appendRecipes,
assignSorted,
recipes,
removeRecipe,
replaceRecipes,
};
},
head: {}, // Must include for useMeta
});
</script>