initial UI for comments

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}`,

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;
+  },
 };

frontend/src/components/Recipe/CommentSection/index.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-card>
+    <v-card-title class="headline">
+      <v-icon large class="mr-2">
+        mdi-comment-text-multiple-outline
+      </v-icon>
+      Comments
+    </v-card-title>
+    <v-divider class="mx-2"></v-divider>
+    <v-card class="ma-2" v-for="(comment, index) in comments" :key="comment.id">
+      <v-list-item two-line>
+        <v-list-item-avatar color="accent" class="white--text">
+          <img :src="getProfileImage(comment.user.id)" />
+        </v-list-item-avatar>
+        <v-list-item-content>
+          <v-list-item-title> {{ comment.user.username }}</v-list-item-title>
+          <v-list-item-subtitle> {{ $d(new Date(comment.dateAdded), "short") }} </v-list-item-subtitle>
+        </v-list-item-content>
+        <v-card-actions v-if="loggedIn">
+          <TheButton
+            small
+            minor
+            v-if="!editKeys[comment.id] && (user.admin || comment.user.id === user.id)"
+            delete
+            @click="deleteComment(comment.id)"
+          />
+          <TheButton
+            small
+            v-if="!editKeys[comment.id] && comment.user.id === user.id"
+            edit
+            @click="editComment(comment.id)"
+          />
+          <TheButton small v-else-if="editKeys[comment.id]" update @click="updateComment(comment.id, index)" />
+        </v-card-actions>
+      </v-list-item>
+      <div>
+        <v-card-text>
+          {{ !editKeys[comment.id] ? comment.text : null }}
+          <v-textarea v-if="editKeys[comment.id]" v-model="comment.text"> </v-textarea>
+        </v-card-text>
+      </div>
+    </v-card>
+    <v-card-text v-if="loggedIn">
+      <v-textarea auto-grow row-height="1" outlined v-model="newComment"> </v-textarea>
+      <div class="d-flex">
+        <TheButton class="ml-auto" create @click="createNewComment"> Comment </TheButton>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { api } from "@/api";
+const NEW_COMMENT_EVENT = "new-comment";
+const UPDATE_COMMENT_EVENT = "update-comment";
+export default {
+  props: {
+    comments: {
+      type: Array,
+    },
+    slug: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      newComment: "",
+      editKeys: {},
+    };
+  },
+  computed: {
+    user() {
+      return this.$store.getters.getUserData;
+    },
+    loggedIn() {
+      return this.$store.getters.getIsLoggedIn;
+    },
+  },
+  watch: {
+    comments() {
+      for (const comment of this.comments) {
+        this.$set(this.editKeys, comment.id, false);
+      }
+    },
+    editKeys() {
+      console.log(this.editKeys);
+    },
+  },
+  methods: {
+    resetImage() {
+      this.hideImage == false;
+    },
+    getProfileImage(id) {
+      return `api/users/${id}/image`;
+    },
+    editComment(id) {
+      this.$set(this.editKeys, id, true);
+    },
+    async updateComment(id, index) {
+      this.$set(this.editKeys, id, false);
+
+      await api.recipes.updateComment(this.slug, id, this.comments[index]);
+      this.$emit(UPDATE_COMMENT_EVENT);
+    },
+    async createNewComment() {
+      console.log(this.slug);
+      await api.recipes.createComment(this.slug, { text: this.newComment });
+      this.$emit(NEW_COMMENT_EVENT);
+
+      this.newComment = "";
+    },
+    async deleteComment(id) {
+      await api.recipes.deleteComment(this.slug, id);
+      this.$emit(UPDATE_COMMENT_EVENT);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/pages/Recipe/ViewRecipe.vue

@@ -44,6 +44,13 @@
       />
       <RecipeEditor v-else v-model="recipeDetails" ref="recipeEditor" @upload="getImageFile" />
     </v-card>
+    <CommentsSection
+      class="mt-2"
+      :slug="recipeDetails.slug"
+      :comments="recipeDetails.comments"
+      @new-comment="getRecipeDetails"
+      @update-comment="getRecipeDetails"
+    />
     <PrintView :recipe="recipeDetails" />
   </v-container>
 </template>
@@ -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: {