Feature/recipe viewer (#244)

* fix dialog placement

* markdown support in ingredients

* fix line render issue

* fix tag rendering bug

* change ingredients to text area

* no slug error

* add tag pages

* remove console.logs

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

frontend/src/components/Recipe/RecipeCard.vue

@@ -26,21 +26,16 @@
       </v-card-title>
 
       <v-card-actions class="">
-        <v-row dense align="center">
-          <v-col>
-            <v-rating
-              class="mr-2"
-              color="secondary"
-              background-color="secondary lighten-3"
-              dense
-              length="5"
-              size="15"
-              :value="rating"
-            ></v-rating>
-          </v-col>
-          <v-col></v-col>
-          <v-col align="end"> </v-col>
-        </v-row>
+        <v-rating
+          class="mr-2"
+          color="secondary"
+          background-color="secondary lighten-3"
+          dense
+          length="5"
+          size="15"
+          :value="rating"
+        ></v-rating>
+        <v-spacer></v-spacer>
       </v-card-actions>
     </v-card>
   </v-hover>
@@ -55,6 +50,7 @@ export default {
     description: String,
     rating: Number,
     image: String,
+
     route: {
       default: true,
     },

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

@@ -83,14 +83,16 @@
                 :key="generateKey('ingredient', index)"
               >
                 <v-row align="center">
-                  <v-text-field
+                  <v-textarea
                     class="mr-2"
                     :label="$t('recipe.ingredient')"
                     v-model="value.recipeIngredient[index]"
                     append-outer-icon="mdi-menu"
                     mdi-move-resize
+                    auto-grow
                     solo
                     dense
+                    rows="2"
                   >
                     <v-icon
                       class="mr-n1"
@@ -100,7 +102,7 @@
                     >
                       mdi-delete
                     </v-icon>
-                  </v-text-field>
+                  </v-textarea>
                 </v-row>
               </div>
             </transition-group>
@@ -235,6 +237,7 @@
                     dense
                     v-model="value.recipeInstructions[index]['text']"
                     :key="generateKey('instructions', index)"
+                    rows="4"
                   >
                   </v-textarea>
                 </v-card-text>

frontend/src/components/Recipe/RecipeViewer/Ingredients.vue

@@ -1,27 +1,52 @@
 <template>
   <div>
     <h2 class="mb-4">{{ $t("recipe.ingredients") }}</h2>
-    <div
-      v-for="(ingredient, index) in ingredients"
+    <v-list-item
+      dense
+      v-for="(ingredient, index) in displayIngredients"
       :key="generateKey('ingredient', index)"
+      @click="ingredient.checked = !ingredient.checked"
     >
       <v-checkbox
         hide-details
-        class="ingredients"
-        :label="ingredient"
+        v-model="ingredient.checked"
+        class=" pt-0 ingredients my-auto py-auto"
         color="secondary"
       >
       </v-checkbox>
-    </div>
+
+      <v-list-item-content>
+        <vue-markdown
+          class="my-auto text-subtitle-1 mb-0"
+          :source="ingredient.text"
+        >
+        </vue-markdown>
+      </v-list-item-content>
+    </v-list-item>
   </div>
 </template>
 
 <script>
+import VueMarkdown from "@adapttive/vue-markdown";
 import utils from "@/utils";
 export default {
+  components: {
+    VueMarkdown,
+  },
   props: {
     ingredients: Array,
   },
+  data() {
+    return {
+      displayIngredients: [],
+    };
+  },
+  mounted() {
+    this.displayIngredients = this.ingredients.map(x => ({
+      text: x,
+      checked: false,
+    }));
+  },
   methods: {
     generateKey(item, index) {
       return utils.generateUniqueKey(item, index);
@@ -31,4 +56,11 @@ export default {
 </script>
 
 <style>
+p {
+  margin-bottom: auto !important;
+}
+
+.my-card-text {
+  overflow-wrap: break-word;
+}
 </style>

frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue

@@ -2,12 +2,12 @@
   <div v-if="items && items.length > 0">
     <h2 class="mt-4">{{ title }}</h2>
     <v-chip
-      :to="`/recipes/${getSlug(category)}`"
       label
       class="ma-1"
       color="accent"
       dark
       v-for="category in items"
+      :to="`/recipes/${urlParam}/${getSlug(category)}`"
       :key="category"
     >
       {{ category }}
@@ -20,7 +20,7 @@ export default {
   props: {
     items: Array,
     title: String,
-    category: {
+    isCategory: {
       default: true,
     },
   },
@@ -28,11 +28,23 @@ export default {
     allCategories() {
       return this.$store.getters.getAllCategories;
     },
+    allTags() {
+      return this.$store.getters.getAllTags;
+    },
+    urlParam() {
+      return this.isCategory ? 'category' : 'tag'
+    }
   },
   methods: {
     getSlug(name) {
-      if (this.category) {
-        return this.allCategories.filter(x => x.name == name)[0].slug;
+      if (!name) return;
+
+      if (this.isCategory) {
+        const matches = this.allCategories.filter(x => x.name == name);
+        if (matches.length > 0) return matches[0].slug;
+      } else {
+        const matches = this.allTags.filter(x => x.name == name);
+        if (matches.length > 0) return matches[0].slug;
       }
     },
   },

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

@@ -34,7 +34,11 @@
           <Ingredients :ingredients="ingredients" />
           <div v-if="medium">
             <RecipeChips :title="$t('recipe.categories')" :items="categories" />
-            <RecipeChips :title="$t('recipe.tags')" :items="tags" />
+            <RecipeChips
+              :title="$t('recipe.tags')"
+              :items="tags"
+              :isCategory="false"
+            />
             <Notes :notes="notes" />
           </div>
         </v-col>