feature/recipe-comments (#448)

* fix favorite color issue

* db and models for comments

* rename files

* initial UI for comments

* fix format

* import / export

* fixes #428

* format

Co-authored-by: hay-kot <hay-kot@pm.me>

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/MealPlan/MealPlanCard.vue

@@ -29,7 +29,7 @@
           </CardImage>
 
           <v-card-title class="my-n3 mb-n6">
-            {{ $d(new Date(planDay.date.split("-")), "short") }}
+            {{ $d(new Date(planDay.date.replaceAll("-", "/")), "short") }}
           </v-card-title>
           <v-card-subtitle class="mb-0 pb-0"> {{ planDay.meals[0].name }}</v-card-subtitle>
           <v-hover v-slot="{ hover }">

frontend/src/components/MealPlan/MealPlanNew.vue

@@ -140,6 +140,7 @@ export default {
     dateDif() {
       let startDate = new Date(this.startDate);
       let endDate = new Date(this.endDate);
+      console.log(startDate, endDate);
 
       let dateDif = (endDate - startDate) / (1000 * 3600 * 24) + 1;
 
@@ -227,6 +228,7 @@ export default {
       nextEndDate.setDate(nextEndDate.getDate() + 4);
 
       this.startDate = nextMonday.toISOString().substr(0, 10);
+
       this.endDate = nextEndDate.toISOString().substr(0, 10);
     },
   },

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/components/Recipe/FavoriteBadge.vue

@@ -3,7 +3,7 @@
     small
     @click.prevent="toggleFavorite"
     v-if="isFavorite || showAlways"
-    :color="isFavorite && buttonStyle ? 'secondary' : 'primary'"
+    :color="buttonStyle ? 'primary' : 'secondary'"
     :icon="!buttonStyle"
     :fab="buttonStyle"
   >

frontend/src/pages/MealPlan/Planner.vue

@@ -13,8 +13,8 @@
       <v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="(mealplan, i) in plannedMeals" :key="i">
         <v-card class="mt-1">
           <v-card-title class="mb-0 pb-0">
-            {{ $d(new Date(mealplan.startDate.split("-")), "short") }} -
-            {{ $d(new Date(mealplan.endDate.split("-")), "short") }}
+            {{ $d(new Date(mealplan.startDate.replaceAll("-", "/")), "short") }} -
+            {{ $d(new Date(mealplan.endDate.replaceAll("-", "/")), "short") }}
           </v-card-title>
           <v-divider class="mx-2 pa-1"></v-divider>
           <v-card-actions class="mb-0 px-2 py-0">
@@ -22,7 +22,7 @@
               <v-icon left small>
                 mdi-cart-check
               </v-icon>
-              {{$t('shopping-list.create-shopping-list')}}
+              {{ $t("shopping-list.create-shopping-list") }}
             </v-btn>
             <v-btn
               text
@@ -35,10 +35,12 @@
               <v-icon left small>
                 mdi-cart-check
               </v-icon>
-              {{$t('shopping-list.shopping-list')}}
+              {{ $t("shopping-list.shopping-list") }}
             </v-btn>
             <v-spacer></v-spacer>
-            <TheCopyButton color="info" :copy-text="mealPlanURL(mealplan.uid)"> {{$t('general.link-copied')}} </TheCopyButton>
+            <TheCopyButton color="info" :copy-text="mealPlanURL(mealplan.uid)">
+              {{ $t("general.link-copied") }}
+            </TheCopyButton>
           </v-card-actions>
 
           <v-list class="mt-0 pt-0">
@@ -48,7 +50,9 @@
                   <v-img :src="getImage(planDay['meals'][0].slug)"></v-img>
                 </v-list-item-avatar>
                 <v-list-item-content>
-                  <v-list-item-title v-html="$d(new Date(planDay.date.split('-')), 'short')"></v-list-item-title>
+                  <v-list-item-title
+                    v-html="$d(new Date(planDay.date.replaceAll('-', '/')), 'short')"
+                  ></v-list-item-title>
                   <v-list-item-subtitle v-html="planDay['meals'][0].name"></v-list-item-subtitle>
                 </v-list-item-content>
               </template>

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: {