feat(frontend): 🚧 groundwork for user interactive ingredient parsing

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -59,6 +59,9 @@
             <RecipeIngredientFoodDialog class="mx-2" block small />
           </template>
         </v-autocomplete>
+        <template v-if="!checkForFood(value.food)">
+          '{{ value.food && value.food !== "" ? value.food.name : null }}' does not exists. Would you like to create it?
+        </template>
       </v-col>
       <v-col sm="12" md="" cols="12">
         <v-text-field v-model="value.note" hide-details dense solo class="mx-1" placeholder="Notes">
@@ -92,6 +95,7 @@ import RecipeIngredientFoodDialog from "./RecipeIngredientFoodDialog.vue";
 import { useFoods } from "~/composables/use-recipe-foods";
 import { useUnits } from "~/composables/use-recipe-units";
 import { validators } from "~/composables/use-validators";
+import { RecipeIngredientFood } from "~/types/api-types/recipe";
 
 export default defineComponent({
   components: { RecipeIngredientUnitDialog, RecipeIngredientFoodDialog },
@@ -115,6 +119,20 @@ export default defineComponent({
       showTitle: false,
     });
 
+    function checkForUnit(unit: RecipeIngredientFood) {
+      if (units.value && unit?.name) {
+        return units.value.some((u) => u.name === unit.name);
+      }
+      return false;
+    }
+
+    function checkForFood(food: RecipeIngredientFood) {
+      if (foods.value && food?.name) {
+        return foods.value.some((f) => f.name === food.name);
+      }
+      return false;
+    }
+
     function toggleTitle() {
       if (value.title) {
         state.showTitle = false;
@@ -125,7 +143,17 @@ export default defineComponent({
       }
     }
 
-    return { workingUnitData, unitActions, validators, foods, units, ...toRefs(state), toggleTitle };
+    return {
+      workingUnitData,
+      unitActions,
+      validators,
+      foods,
+      units,
+      ...toRefs(state),
+      toggleTitle,
+      checkForUnit,
+      checkForFood,
+    };
   },
 });
 </script>

frontend/components/Domain/Recipe/RecipeIngredientParserMenu.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <v-menu offset-y offset-overflow left top nudge-top="6" :close-on-content-click="false">
+      <template #activator="{ on, attrs }">
+        <v-btn color="accent" dark v-bind="attrs" v-on="on">
+          <v-icon left>
+            {{ $globals.icons.foods }}
+          </v-icon>
+          Parse
+        </v-btn>
+      </template>
+      <v-card width="400">
+        <v-card-title class="mb-1 pb-0"> Warning Experimental </v-card-title>
+        <v-card-text>
+          Mealie can use natural language processing to attempt to parse and create units, and foods for your Recipe
+          ingredients. This is experimental and may not work as expected. If you choose to not use the parsed results
+          you can click the close button at the top of the page and your changes will not be saved.
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <BaseButton small color="accent" @click="parseIngredients">
+            <template #icon>
+              {{ $globals.icons.check }}
+            </template>
+            {{ $t("general.confirm") }}
+          </BaseButton>
+        </v-card-actions>
+      </v-card>
+    </v-menu>
+    <BaseDialog ref="domParsedDataDialog" width="100%">
+      <v-card-text>
+        <div v-for="(ing, index) in parsedData.ingredient" :key="index">
+          <div class="ml-10 text-body-1" :class="index > 0 ? 'mt-4' : null">{{ ingredients[index].note }}</div>
+          <RecipeIngredientEditor :value="ing" />
+        </div>
+      </v-card-text>
+    </BaseDialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api";
+import RecipeIngredientEditor from "./RecipeIngredientEditor.vue";
+import { useApiSingleton } from "~/composables/use-api";
+import { RecipeIngredient } from "~/types/api-types/recipe";
+
+export default defineComponent({
+  components: {
+    RecipeIngredientEditor,
+  },
+  props: {
+    ingredients: {
+      type: Array,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ingredients = props.ingredients;
+    const api = useApiSingleton();
+
+    const parsedData = ref<any>([]);
+
+    const domParsedDataDialog = ref(null);
+
+    async function parseIngredients() {
+      // @ts-ignore -> No idea what it's talking about
+      const ingredientNotes = ingredients.map((ing: RecipeIngredient) => ing.note);
+
+      const { data } = await api.recipes.parseIngredients(ingredientNotes);
+
+      if (data) {
+        // @ts-ignore
+        domParsedDataDialog.value.open();
+        console.log(data);
+        parsedData.value = data;
+      }
+
+      console.log("ingredientNotes", ingredientNotes);
+    }
+
+    return { api, parseIngredients, parsedData, domParsedDataDialog };
+  },
+});
+</script>