mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
caa9e03050
Refactor recipe page to use break up the component and make it more usable across different pages. I've left the old route in as well in case there is some functional breaks, I plan to remove it before the official release once we've tested the new editor some more in production. For now there will just have to be some duplicate components and pages around.
113 lines
3.3 KiB
Vue
113 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="d-flex justify-end flex-wrap align-stretch">
|
|
<v-card v-if="!landscape" width="50%" flat class="d-flex flex-column justify-center align-center">
|
|
<v-card-text>
|
|
<v-card-title class="headline pa-0 flex-column align-center">
|
|
{{ recipe.name }}
|
|
<RecipeRating :key="recipe.slug" :value="recipe.rating" :name="recipe.name" :slug="recipe.slug" />
|
|
</v-card-title>
|
|
<v-divider class="my-2"></v-divider>
|
|
<SafeMarkdown :source="recipe.description" />
|
|
<v-divider></v-divider>
|
|
<div class="d-flex justify-center mt-5">
|
|
<RecipeTimeCard
|
|
class="d-flex justify-center flex-wrap"
|
|
:class="true ? undefined : 'force-bottom'"
|
|
:prep-time="recipe.prepTime"
|
|
:total-time="recipe.totalTime"
|
|
:perform-time="recipe.performTime"
|
|
/>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
<v-img
|
|
:key="imageKey"
|
|
:max-width="landscape ? null : '50%'"
|
|
min-height="50"
|
|
:height="hideImage ? undefined : imageHeight"
|
|
:src="recipeImage(recipe.id, recipe.image, imageKey)"
|
|
class="d-print-none"
|
|
@error="hideImage = true"
|
|
>
|
|
</v-img>
|
|
</div>
|
|
<v-divider></v-divider>
|
|
<RecipeActionMenu
|
|
:slug="recipe.slug"
|
|
:locked="user.id !== recipe.userId && recipe.settings.locked"
|
|
:name="recipe.name"
|
|
:logged-in="$auth.loggedIn"
|
|
:open="isEditMode"
|
|
:recipe-id="recipe.id"
|
|
class="ml-auto mt-n8 pb-4"
|
|
@close="setMode(PageMode.VIEW)"
|
|
@json="toggleEditMode()"
|
|
@edit="setMode(PageMode.EDIT)"
|
|
@save="$emit('save')"
|
|
@delete="$emit('delete')"
|
|
@print="printRecipe"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, useContext, computed, ref } from "@nuxtjs/composition-api";
|
|
import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
|
|
import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
|
|
import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
|
|
import { useStaticRoutes } from "~/composables/api";
|
|
import { Recipe } from "~/types/api-types/recipe";
|
|
import { NoUndefinedField } from "~/types/api";
|
|
import { usePageState, usePageUser, PageMode, EditorMode } from "~/composables/recipe-page/shared-state";
|
|
export default defineComponent({
|
|
components: {
|
|
RecipeTimeCard,
|
|
RecipeActionMenu,
|
|
RecipeRating,
|
|
},
|
|
props: {
|
|
recipe: {
|
|
type: Object as () => NoUndefinedField<Recipe>,
|
|
required: true,
|
|
},
|
|
landscape: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const { recipeImage } = useStaticRoutes();
|
|
const { imageKey, pageMode, editMode, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);
|
|
const { user } = usePageUser();
|
|
|
|
function printRecipe() {
|
|
print();
|
|
}
|
|
|
|
const { $vuetify } = useContext();
|
|
|
|
const hideImage = ref(false);
|
|
const imageHeight = computed(() => {
|
|
return $vuetify.breakpoint.xs ? "200" : "400";
|
|
});
|
|
|
|
return {
|
|
setMode,
|
|
toggleEditMode,
|
|
recipeImage,
|
|
imageKey,
|
|
user,
|
|
PageMode,
|
|
pageMode,
|
|
EditorMode,
|
|
editMode,
|
|
printRecipe,
|
|
imageHeight,
|
|
hideImage,
|
|
isEditMode,
|
|
};
|
|
},
|
|
});
|
|
</script>
|