Feature/restore-recipe-functionality (#810)

* feat(frontend): ✨ add back support for assets

* feat(backend): ✨ add back support for assets

* feat(frontend): ✨ add support for recipe tools

* feat(backend): ✨ add support for recipe tools

* feat(frontend): ✨ add onHand support for recipe toosl

* feat(backend): ✨ add onHand support for backend

* refactor(frontend): ♻️ move items to recipe folder and break apart types

* feat(frontend): ✨ add support for recipe comments

* feat(backend): ✨ Add support for recipe comments

* fix(backend): 💥 disable comments import

* fix(frontend): 🐛 fix rendering issue with titles when moving steps

* add tools to changelog

* fix type errors

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

frontend/components/Domain/Recipe/RecipeAssets.vue

@@ -23,10 +23,10 @@
               <v-icon> {{ $globals.icons.download }} </v-icon>
             </v-btn>
             <div v-else>
-              <v-btn color="error" icon top @click="deleteAsset(i)">
+              <v-btn color="error" icon top @click="value.splice(i, 1)">
                 <v-icon>{{ $globals.icons.delete }}</v-icon>
               </v-btn>
-              <AppCopyButton :copy-text="copyLink(item.fileName)" />
+              <AppButtonCopy color="" :copy-text="assetEmbed(item.fileName)" />
             </div>
           </v-list-item-action>
         </v-list-item>
@@ -35,12 +35,10 @@
     <div class="d-flex ml-auto mt-2">
       <v-spacer></v-spacer>
       <BaseDialog :title="$t('asset.new-asset')" :icon="getIconDefinition(newAsset.icon).icon" @submit="addAsset">
-        <template #open="{ open }">
-          <v-btn v-if="edit" color="secondary" dark @click="open">
-            <v-icon>{{ $globals.icons.create }}</v-icon>
-          </v-btn>
+        <template #activator="{ open }">
+          <BaseButton v-if="edit" small create @click="open" />
         </template>
-        <v-card-text class="pt-2">
+        <v-card-text class="pt-4">
           <v-text-field v-model="newAsset.name" dense :label="$t('general.name')"></v-text-field>
           <div class="d-flex justify-space-between">
             <v-select
@@ -70,9 +68,14 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, reactive, toRefs, useContext } from "@nuxtjs/composition-api";
 import { useUserApi } from "~/composables/api";
-export default {
+import { alert } from "~/composables/use-toast";
+
+const BASE_URL = window.location.origin;
+
+export default defineComponent({
   props: {
     slug: {
       type: String,
@@ -87,82 +90,95 @@ export default {
       default: true,
     },
   },
-  setup() {
+  setup(props, context) {
     const api = useUserApi();
 
-    return { api };
-  },
-  data() {
-    return {
-      fileObject: {},
+    const state = reactive({
+      fileObject: {} as File,
       newAsset: {
         name: "",
         icon: "mdi-file",
       },
+    });
+
+    // @ts-ignore
+    const { $globals, i18n } = useContext();
+
+    const iconOptions = [
+      {
+        name: "mdi-file",
+        title: i18n.t("asset.file"),
+        icon: $globals.icons.file,
+      },
+      {
+        name: "mdi-file-pdf-box",
+        title: i18n.t("asset.pdf"),
+        icon: $globals.icons.filePDF,
+      },
+      {
+        name: "mdi-file-image",
+        title: i18n.t("asset.image"),
+        icon: $globals.icons.fileImage,
+      },
+      {
+        name: "mdi-code-json",
+        title: i18n.t("asset.code"),
+        icon: $globals.icons.codeJson,
+      },
+      {
+        name: "mdi-silverware-fork-knife",
+        title: i18n.t("asset.recipe"),
+        icon: $globals.icons.primary,
+      },
+    ];
+
+    function getIconDefinition(icon: string) {
+      return iconOptions.find((item) => item.name === icon) || iconOptions[0];
+    }
+
+    function assetURL(assetName: string) {
+      return api.recipes.recipeAssetPath(props.slug, assetName);
+    }
+
+    function assetEmbed(name: string) {
+      return `<img src="${BASE_URL}${assetURL(name)}" height="100%" width="100%"> </img>`;
+    }
+
+    function setFileObject(fileObject: any) {
+      state.fileObject = fileObject;
+    }
+
+    function validFields() {
+      return state.newAsset.name.length > 0 && state.fileObject.name.length > 0;
+    }
+
+    async function addAsset() {
+      if (!validFields()) {
+        alert.error("Error Submitting Form");
+        return;
+      }
+
+      const { data } = await api.recipes.createAsset(props.slug, {
+        name: state.newAsset.name,
+        icon: state.newAsset.icon,
+        file: state.fileObject,
+        extension: state.fileObject.name.split(".").pop() || "",
+      });
+
+      context.emit("input", [...props.value, data]);
+      state.newAsset = { name: "", icon: "mdi-file" };
+      state.fileObject = {} as File;
+    }
+
+    return {
+      ...toRefs(state),
+      addAsset,
+      assetURL,
+      assetEmbed,
+      getIconDefinition,
+      iconOptions,
+      setFileObject,
     };
   },
-  computed: {
-    baseURL() {
-      return window.location.origin;
-    },
-    iconOptions() {
-      return [
-        {
-          name: "mdi-file",
-          title: this.$i18n.t("asset.file"),
-          icon: this.$globals.icons.file,
-        },
-        {
-          name: "mdi-file-pdf-box",
-          title: this.$i18n.t("asset.pdf"),
-          icon: this.$globals.icons.filePDF,
-        },
-        {
-          name: "mdi-file-image",
-          title: this.$i18n.t("asset.image"),
-          icon: this.$globals.icons.fileImage,
-        },
-        {
-          name: "mdi-code-json",
-          title: this.$i18n.t("asset.code"),
-          icon: this.$globals.icons.codeJson,
-        },
-        {
-          name: "mdi-silverware-fork-knife",
-          title: this.$i18n.t("asset.recipe"),
-          icon: this.$globals.icons.primary,
-        },
-      ];
-    },
-  },
-  methods: {
-    getIconDefinition(val) {
-      return this.iconOptions.find(({ name }) => name === val);
-    },
-    assetURL(assetName) {
-      return api.recipes.recipeAssetPath(this.slug, assetName);
-    },
-    setFileObject(obj) {
-      this.fileObject = obj;
-    },
-    async addAsset() {
-      const serverAsset = await api.recipes.createAsset(
-        this.slug,
-        this.fileObject,
-        this.newAsset.name,
-        this.newAsset.icon
-      );
-      this.value.push(serverAsset.data);
-      this.newAsset = { name: "", icon: "mdi-file" };
-    },
-    deleteAsset(index) {
-      this.value.splice(index, 1);
-    },
-    copyLink(fileName) {
-      const assetLink = api.recipes.recipeAssetPath(this.slug, fileName);
-      return `<img src="${this.baseURL}${assetLink}" height="100%" width="100%"> </img>`;
-    },
-  },
-};
+});
 </script>
-

frontend/components/Domain/Recipe/RecipeCategoryTagSelector.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import RecipeCategoryTagDialog from "./RecipeCategoryTagDialog";
+import RecipeCategoryTagDialog from "./RecipeCategoryTagDialog.vue";
 import { useUserApi } from "~/composables/api";
 import { useTags, useCategories } from "~/composables/recipes";
 const MOUNTED_EVENT = "mounted";

frontend/components/Domain/Recipe/RecipeComments.vue

@@ -1,125 +1,117 @@
 <template>
-  <v-card>
-    <v-card-title class="headline">
-      <v-icon large class="mr-2">
+  <div>
+    <v-card-title class="headline pb-3">
+      <v-icon class="mr-2">
         {{ $globals.icons.commentTextMultipleOutline }}
       </v-icon>
       {{ $t("recipe.comments") }}
     </v-card-title>
     <v-divider class="mx-2"></v-divider>
-    <v-card v-for="(comment, index) in comments" :key="comment.id" class="ma-2">
-      <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
-            v-if="!editKeys[comment.id] && (user.admin || comment.user.id === user.id)"
-            small
-            minor
-            delete
-            @click="deleteComment(comment.id)"
-          />
-          <TheButton
-            v-if="!editKeys[comment.id] && comment.user.id === user.id"
-            small
-            edit
-            @click="editComment(comment.id)"
-          />
-          <TheButton v-else-if="editKeys[comment.id]" small 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>
+    <div class="d-flex flex-column">
+      <div class="d-flex mt-3" style="gap: 10px">
+        <v-avatar size="40">
+          <img alt="user" src="https://cdn.pixabay.com/photo/2020/06/24/19/12/cabbage-5337431_1280.jpg" />
+        </v-avatar>
+        <v-textarea
+          v-model="comment"
+          hide-details=""
+          dense
+          single-line
+          outlined
+          auto-grow
+          rows="2"
+          placeholder="Join the Conversation"
+        >
+        </v-textarea>
+      </div>
+      <div class="ml-auto mt-1">
+        <BaseButton small :disabled="!comment" @click="submitComment">
+          <template #icon>{{ $globals.icons.check }}</template>
+          {{ $t("general.submit") }}
+        </BaseButton>
+      </div>
+    </div>
+    <div v-for="comment in comments" :key="comment.id" class="d-flex my-2" style="gap: 10px">
+      <v-avatar size="40">
+        <img alt="user" src="https://cdn.pixabay.com/photo/2020/06/24/19/12/cabbage-5337431_1280.jpg" />
+      </v-avatar>
+      <v-card outlined class="flex-grow-1">
+        <v-card-text class="pa-3 pb-0">
+          <p class="">{{ comment.user.username }} • {{ $d(Date.parse(comment.createdAt), "medium") }}</p>
+          {{ comment.text }}
         </v-card-text>
-      </div>
-    </v-card>
-    <v-card-text v-if="loggedIn">
-      <v-textarea v-model="newComment" auto-grow row-height="1" outlined> </v-textarea>
-      <div class="d-flex">
-        <TheButton class="ml-auto" create @click="createNewComment"> {{ $t("recipe.comment-action") }} </TheButton>
-      </div>
-    </v-card-text>
-  </v-card>
+        <v-card-actions class="justify-end mt-0 pt-0">
+          <v-btn
+            v-if="$auth.user.id == comment.user.id || $auth.user.admin"
+            color="error"
+            text
+            x-small
+            @click="deleteComment(comment.id)"
+          >
+            Delete
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </div>
+  </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, ref, toRefs } from "@nuxtjs/composition-api";
+import { onMounted, reactive } from "vue-demi";
 import { useUserApi } from "~/composables/api";
-const NEW_COMMENT_EVENT = "new-comment";
-const UPDATE_COMMENT_EVENT = "update-comment";
-export default {
+import { RecipeComment } from "~/api/class-interfaces/recipes/types";
+
+export default defineComponent({
   props: {
-    comments: {
-      type: Array,
-      default: () => [],
-    },
     slug: {
       type: String,
       required: true,
     },
+    recipeId: {
+      type: Number,
+      required: true,
+    },
   },
-  setup() {
+  setup(props) {
     const api = useUserApi();
 
-    return { api };
-  },
-  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);
+    const comments = ref<RecipeComment[]>([]);
+
+    const state = reactive({
+      comment: "",
+    });
+
+    onMounted(async () => {
+      const { data } = await api.recipes.comments.byRecipe(props.slug);
+
+      if (data) {
+        comments.value = data;
       }
-    },
+    });
+
+    async function submitComment() {
+      const { data } = await api.recipes.comments.createOne({
+        recipeId: props.recipeId,
+        text: state.comment,
+      });
+
+      if (data) {
+        comments.value.push(data);
+      }
+
+      state.comment = "";
+    }
+
+    async function deleteComment(id: string) {
+      const { response } = await api.recipes.comments.deleteOne(id);
+
+      if (response?.status === 200) {
+        comments.value = comments.value.filter((comment) => comment.id !== id);
+      }
+    }
+
+    return { api, comments, ...toRefs(state), submitComment, deleteComment };
   },
-  methods: {
-    resetImage() {
-      this.hideImage = false;
-    },
-    getProfileImage() {
-      // TODO Actually get Profile Image
-      return null;
-    },
-    editComment(id) {
-      this.$set(this.editKeys, id, true);
-    },
-    async updateComment(id, index) {
-      this.$set(this.editKeys, id, false);
-
-      await this.api.recipes.updateComment(this.slug, id, this.comments[index]);
-      this.$emit(UPDATE_COMMENT_EVENT);
-    },
-    async createNewComment() {
-      await this.api.recipes.createComment(this.slug, { text: this.newComment });
-      this.$emit(NEW_COMMENT_EVENT);
-
-      this.newComment = "";
-    },
-    async deleteComment(id) {
-      await this.api.recipes.deleteComment(this.slug, id);
-      this.$emit(UPDATE_COMMENT_EVENT);
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-</style>
+});
+</script>

frontend/components/Domain/Recipe/RecipeIngredients.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="value && value.length > 0">
     <div class="d-flex justify-start">
-      <h2 class="mb-4 mt-1">{{ $t("recipe.ingredients") }}</h2>
+      <h2 class="mb-2 mt-1">{{ $t("recipe.ingredients") }}</h2>
       <AppButtonCopy btn-class="ml-auto" :copy-text="ingredientCopyText" />
     </div>
     <div>

frontend/components/Domain/Recipe/RecipeInstructions.vue

@@ -75,8 +75,8 @@
       @start="drag = true"
       @end="drag = false"
     >
-      <div v-for="(step, index) in value" :key="index">
-        <v-app-bar v-if="showTitleEditor[index]" class="primary mx-1 mt-6" dark dense rounded>
+      <div v-for="(step, index) in value" :key="step.id">
+        <v-app-bar v-if="showTitleEditor[step.id]" class="primary mx-1 mt-6" dark dense rounded>
           <v-toolbar-title v-if="!edit" class="headline">
             <v-app-bar-title v-text="step.title"> </v-app-bar-title>
           </v-toolbar-title>
@@ -114,7 +114,7 @@
                   mode="event"
                   :items="actionEvents || []"
                   @merge-above="mergeAbove(index - 1, index)"
-                  @toggle-section="toggleShowTitle(index)"
+                  @toggle-section="toggleShowTitle(step.id)"
                   @link-ingredients="openDialog(index, step.ingredientReferences, step.text)"
                 >
                 </BaseOverflowButton>
@@ -155,6 +155,7 @@ import VueMarkdown from "@adapttive/vue-markdown";
 import { ref, toRefs, reactive, defineComponent, watch, onMounted } from "@nuxtjs/composition-api";
 import { RecipeStep, IngredientToStepRef, RecipeIngredient } from "~/types/api-types/recipe";
 import { parseIngredientText } from "~/composables/recipes";
+import { uuid4 } from "~/composables/use-utils";
 
 interface MergerHistory {
   target: number;
@@ -195,7 +196,7 @@ export default defineComponent({
       usedIngredients: [] as RecipeIngredient[],
     });
 
-    const showTitleEditor = ref<boolean[]>([]);
+    const showTitleEditor = ref<{ [key: string]: boolean }>({});
 
     const actionEvents = [
       {
@@ -220,12 +221,17 @@ export default defineComponent({
 
     watch(props.value, (v) => {
       state.disabledSteps = [];
-      showTitleEditor.value = v.map((x) => validateTitle(x.title));
+
+      v.forEach((element) => {
+        showTitleEditor.value[element.id] = validateTitle(element.title);
+      });
     });
 
     // Eliminate state with an eager call to watcher?
     onMounted(() => {
-      showTitleEditor.value = props.value.map((x) => validateTitle(x.title));
+      props.value.forEach((element) => {
+        showTitleEditor.value[element.id] = validateTitle(element.title);
+      });
     });
 
     function toggleDisabled(stepIndex: number) {
@@ -246,16 +252,11 @@ export default defineComponent({
         return "disabled-card";
       }
     }
-    function toggleShowTitle(index: number) {
-      const newVal = !showTitleEditor.value[index];
-      if (!newVal) {
-        props.value[index].title = "";
-      }
+    function toggleShowTitle(id: string) {
+      showTitleEditor.value[id] = !showTitleEditor.value[id];
 
-      // Must create a new temporary list due to vue-composition-api backport limitations (I think...)
-      const tempList = [...showTitleEditor.value];
-      tempList[index] = newVal;
-      showTitleEditor.value = tempList;
+      const temp = { ...showTitleEditor.value };
+      showTitleEditor.value = temp;
     }
     function updateIndex(data: RecipeStep) {
       context.emit("input", data);
@@ -387,6 +388,7 @@ export default defineComponent({
 
         props.value[lastMerge.target].text = lastMerge.targetText;
         props.value.splice(lastMerge.source, 0, {
+          id: uuid4(),
           title: "",
           text: lastMerge.sourceText,
           ingredientReferences: [],

frontend/components/Domain/Recipe/RecipeNutrition.vue

@@ -1,10 +1,10 @@
 <template>
   <div v-if="valueNotNull || edit">
     <v-card class="mt-2">
-      <v-card-title class="py-2">
+      <v-card-title class="pt-2 pb-0">
         {{ $t("recipe.nutrition") }}
       </v-card-title>
-      <v-divider class="mx-2"></v-divider>
+      <v-divider class="mx-2 my-1"></v-divider>
       <v-card-text v-if="edit">
         <div v-for="(item, key, index) in value" :key="index">
           <v-text-field
@@ -19,9 +19,9 @@
         </div>
       </v-card-text>
       <v-list v-if="showViewer" dense class="mt-0 pt-0">
-        <v-list-item v-for="(item, key, index) in labels" :key="index">
+        <v-list-item v-for="(item, key, index) in labels" :key="index" style="min-height: 25px" dense>
           <v-list-item-content>
-            <v-list-item-title class="pl-4 text-subtitle-1 flex row">
+            <v-list-item-title class="pl-4 caption flex row">
               <div>{{ item.label }}</div>
               <div class="ml-auto mr-1">{{ value[key] }}</div>
               <div>{{ item.suffix }}</div>

frontend/components/Domain/Recipe/RecipeTools.vue

@@ -0,0 +1,88 @@
+<template>
+  <div v-if="edit || (value && value.length > 0)">
+    <template v-if="edit">
+      <v-autocomplete
+        v-if="tools"
+        v-model="recipeTools"
+        :items="tools"
+        item-text="name"
+        multiple
+        return-object
+        deletable-chips
+        :prepend-icon="$globals.icons.potSteam"
+        chips
+      >
+        <template #selection="data">
+          <v-chip
+            :key="data.index"
+            small
+            class="ma-1"
+            :input-value="data.selected"
+            close
+            label
+            color="accent"
+            dark
+            @click:close="recipeTools.splice(data.index, 1)"
+          >
+            {{ data.item.name || data.item }}
+          </v-chip>
+        </template>
+        <template #append-outer="">
+          <BaseDialog title="Create New Tool" @submit="actions.createOne()">
+            <template #activator="{ open }">
+              <v-btn icon @click="open">
+                <v-icon> {{ $globals.icons.create }}</v-icon>
+              </v-btn>
+            </template>
+            <v-card-text>
+              <v-text-field v-model="workingToolData.name" label="Tool Name"></v-text-field>
+              <v-checkbox v-model="workingToolData.onHand" label="Show as On Hand (Checked)"></v-checkbox>
+            </v-card-text>
+          </BaseDialog>
+        </template>
+      </v-autocomplete>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+import { computed } from "vue-demi";
+import { Tool } from "~/api/class-interfaces/tools";
+import { useTools } from "~/composables/recipes";
+
+export default defineComponent({
+  props: {
+    value: {
+      type: Array as () => Tool[],
+      required: true,
+    },
+    edit: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, context) {
+    const { tools, actions, workingToolData } = useTools();
+
+    const recipeTools = computed({
+      get: () => {
+        return props.value;
+      },
+      set: (val) => {
+        context.emit("input", val);
+      },
+    });
+
+    return {
+      workingToolData,
+      actions,
+      tools,
+      recipeTools,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+</style>