github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-23 06:45:22 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 12

recipeComments script setup and use defineModel

Browse source
This commit is contained in:
Kuchenpirat 2025-06-18 12:01:40 +00:00
commit 21538cd7cc
2 changed files with 22 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
View file

@ -76,7 +76,7 @@
<WakelockSwitch /> <WakelockSwitch />
<RecipePageComments <RecipePageComments
v-if="!recipe.settings.disableComments && !isEditForm && !isCookMode" v-if="!recipe.settings.disableComments && !isEditForm && !isCookMode"
:recipe="recipe" v-model="recipe"
class="px-1 my-4 d-print-none" class="px-1 my-4 d-print-none"
/> />
<RecipePrintContainer :recipe="recipe" :scale="scale" /> <RecipePrintContainer :recipe="recipe" :scale="scale" />

35
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageComments.vue
View file

@ -82,7 +82,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts" setup>
import { useUserApi } from "~/composables/api"; import { useUserApi } from "~/composables/api";
import type { Recipe } from "~/lib/api/types/recipe"; import type { Recipe } from "~/lib/api/types/recipe";
import UserAvatar from "~/components/Domain/User/UserAvatar.vue"; import UserAvatar from "~/components/Domain/User/UserAvatar.vue";
@ -90,48 +90,29 @@ import type { NoUndefinedField } from "~/lib/api/types/non-generated";
import { usePageUser } from "~/composables/recipe-page/shared-state"; import { usePageUser } from "~/composables/recipe-page/shared-state";
import SafeMarkdown from "~/components/global/SafeMarkdown.vue"; import SafeMarkdown from "~/components/global/SafeMarkdown.vue";
export default defineNuxtComponent({ const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
components: {
UserAvatar,
SafeMarkdown,
},
props: {
recipe: {
type: Object as () => NoUndefinedField<Recipe>,
required: true,
},
},
setup(props) {
const api = useUserApi(); const api = useUserApi();
const { user } = usePageUser(); const { user } = usePageUser();
const comment = ref("");
const state = reactive({
comment: "",
});
async function submitComment() { async function submitComment() {
const { data } = await api.recipes.comments.createOne({ const { data } = await api.recipes.comments.createOne({
recipeId: props.recipe.id, recipeId: recipe.value.id,
text: state.comment, text: comment.value,
}); });
if (data) { if (data) {
props.recipe.comments.push(data); recipe.value.comments.push(data);
} }
state.comment = ""; comment.value = "";
} }
async function deleteComment(id: string) { async function deleteComment(id: string) {
const { response } = await api.recipes.comments.deleteOne(id); const { response } = await api.recipes.comments.deleteOne(id);
if (response?.status === 200) { if (response?.status === 200) {
props.recipe.comments = props.recipe.comments.filter(comment => comment.id !== id); recipe.value.comments = recipe.value.comments.filter(comment => comment.id !== id);
} }
} }
return { api, ...toRefs(state), submitComment, deleteComment, user };
},
});
</script> </script>