diff --git a/frontend/src/api/apiRoutes.js b/frontend/src/api/apiRoutes.js index b5d1c5b3c..0102f4f0f 100644 --- a/frontend/src/api/apiRoutes.js +++ b/frontend/src/api/apiRoutes.js @@ -65,6 +65,8 @@ export const API_ROUTES = { recipesRecipeSlug: (recipe_slug) => `${prefix}/recipes/${recipe_slug}`, recipesRecipeSlugAssets: (recipe_slug) => `${prefix}/recipes/${recipe_slug}/assets`, recipesRecipeSlugImage: (recipe_slug) => `${prefix}/recipes/${recipe_slug}/image`, + recipesSlugComments: (slug) => `${prefix}/recipes/${slug}/comments`, + recipesSlugCommentsId: (slug, id) => `${prefix}/recipes/${slug}/comments/${id}`, shoppingListsId: (id) => `${prefix}/shopping-lists/${id}`, siteSettingsCustomPagesId: (id) => `${prefix}/site-settings/custom-pages/${id}`, tagsTag: (tag) => `${prefix}/tags/${tag}`, diff --git a/frontend/src/api/recipe.js b/frontend/src/api/recipe.js index 7323ae333..e49b05a9f 100644 --- a/frontend/src/api/recipe.js +++ b/frontend/src/api/recipe.js @@ -1,5 +1,6 @@ -import { baseURL } from "./api-utils"; +import { API_ROUTES } from "./apiRoutes"; import { apiReq } from "./api-utils"; +import { baseURL } from "./api-utils"; import { store } from "../store"; import i18n from "@/i18n.js"; @@ -161,4 +162,28 @@ export const recipeAPI = { recipeAssetPath(recipeSlug, assetName) { return `api/media/recipes/${recipeSlug}/assets/${assetName}`; }, + + /** Create comment in the Database + * @param slug + */ + async createComment(slug, data) { + const response = await apiReq.post(API_ROUTES.recipesSlugComments(slug), data); + return response.data; + }, + /** Update comment in the Database + * @param slug + * @param id + */ + async updateComment(slug, id, data) { + const response = await apiReq.put(API_ROUTES.recipesSlugCommentsId(slug, id), data); + return response.data; + }, + /** Delete comment from the Database + * @param slug + * @param id + */ + async deleteComment(slug, id) { + const response = await apiReq.delete(API_ROUTES.recipesSlugCommentsId(slug, id)); + return response.data; + }, }; diff --git a/frontend/src/components/Recipe/CommentSection/index.vue b/frontend/src/components/Recipe/CommentSection/index.vue new file mode 100644 index 000000000..eeac72caf --- /dev/null +++ b/frontend/src/components/Recipe/CommentSection/index.vue @@ -0,0 +1,121 @@ + + + + + mdi-comment-text-multiple-outline + + Comments + + + + + + + + + {{ comment.user.username }} + {{ $d(new Date(comment.dateAdded), "short") }} + + + + + + + + + + {{ !editKeys[comment.id] ? comment.text : null }} + + + + + + + + Comment + + + + + + + + \ No newline at end of file diff --git a/frontend/src/pages/Recipe/ViewRecipe.vue b/frontend/src/pages/Recipe/ViewRecipe.vue index c503f436d..0be281451 100644 --- a/frontend/src/pages/Recipe/ViewRecipe.vue +++ b/frontend/src/pages/Recipe/ViewRecipe.vue @@ -44,6 +44,13 @@ /> + @@ -60,6 +67,7 @@ import EditorButtonRow from "@/components/Recipe/EditorButtonRow"; import NoRecipe from "@/components/Fallbacks/NoRecipe"; import { user } from "@/mixins/user"; import { router } from "@/routes"; +import CommentsSection from "@/components/Recipe/CommentSection"; export default { components: { @@ -71,6 +79,7 @@ export default { PrintView, NoRecipe, FavoriteBadge, + CommentsSection, }, mixins: [user], inject: {