feat: Add recipe as ingredient (#4800)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

frontend/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -41,6 +41,7 @@
         </v-text-field>
       </v-col>
       <v-col
+        v-if="!state.isRecipe"
         sm="12"
         md="3"
         cols="12"
@@ -97,6 +98,7 @@
 
       <!-- Foods Input -->
       <v-col
+        v-if="!state.isRecipe"
         m="12"
         md="3"
         cols="12"
@@ -151,6 +153,33 @@
           </template>
         </v-autocomplete>
       </v-col>
+      <!-- Recipe Input -->
+      <v-col
+        v-if="state.isRecipe"
+        m="12"
+        md="6"
+        cols="12"
+        class=""
+      >
+        <v-autocomplete
+          ref="search.query"
+          v-model="model.referencedRecipe"
+          v-model:search="search.query.value"
+          auto-select-first
+          hide-details
+          density="compact"
+          variant="solo"
+          return-object
+          :items="search.data.value || []"
+          item-title="name"
+          class="mx-1 py-0"
+          placeholder="Choose Recipe"
+          clearable
+          label="Recipe"
+        >
+          <template #prepend />
+        </v-autocomplete>
+      </v-col>
       <v-col
         sm="12"
         md=""
@@ -173,6 +202,7 @@
             class="my-auto d-flex"
             :buttons="btns"
             @toggle-section="toggleTitle"
+            @toggle-subrecipe="toggleIsRecipe"
             @insert-above="$emit('insert-above')"
             @insert-below="$emit('insert-below')"
             @delete="$emit('delete')"
@@ -195,6 +225,8 @@ import { useI18n } from "vue-i18n";
 import { useFoodStore, useFoodData, useUnitStore, useUnitData } from "~/composables/store";
 import { useNuxtApp } from "#app";
 import type { RecipeIngredient } from "~/lib/api/types/recipe";
+import { usePublicExploreApi, useUserApi } from "~/composables/api";
+import { useRecipeSearch } from "~/composables/recipes/use-recipe-search";
 
 // defineModel replaces modelValue prop
 const model = defineModel<RecipeIngredient>({ required: true });
@@ -204,6 +236,10 @@ const props = defineProps({
     type: String,
     default: "body",
   },
+  isRecipe: {
+    type: Boolean,
+    default: false,
+  },
   unitError: {
     type: Boolean,
     default: false,
@@ -247,6 +283,7 @@ const { $globals } = useNuxtApp();
 
 const state = reactive({
   showTitle: false,
+  isRecipe: props.isRecipe,
 });
 
 const contextMenuOptions = computed(() => {
@@ -255,6 +292,10 @@ const contextMenuOptions = computed(() => {
       text: i18n.t("recipe.toggle-section"),
       event: "toggle-section",
     },
+    {
+      text: i18n.t("recipe.toggle-recipe"),
+      event: "toggle-subrecipe",
+    },
     {
       text: i18n.t("recipe.insert-above"),
       event: "insert-above",
@@ -303,6 +344,25 @@ async function createAssignFood() {
   foodAutocomplete.value?.blur();
 }
 
+// Recipes
+const route = useRoute();
+const $auth = useMealieAuth();
+const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
+
+const { isOwnGroup } = useLoggedInState();
+const api = isOwnGroup.value ? useUserApi() : usePublicExploreApi(groupSlug.value).explore;
+const search = useRecipeSearch(api);
+const loading = ref(false);
+const selectedIndex = ref(-1);
+// Reset or Grab Recipes on Change
+watch(loading, (val) => {
+  if (!val) {
+    search.query.value = "";
+    selectedIndex.value = -1;
+    search.data.value = [];
+  }
+});
+
 // Units
 const unitStore = useUnitStore();
 const unitsData = useUnitData();
@@ -323,6 +383,17 @@ function toggleTitle() {
   state.showTitle = !state.showTitle;
 }
 
+function toggleIsRecipe() {
+  if (state.isRecipe) {
+    model.value.referencedRecipe = undefined;
+  }
+  else {
+    model.value.unit = undefined;
+    model.value.food = undefined;
+  }
+  state.isRecipe = !state.isRecipe;
+}
+
 function handleUnitEnter() {
   if (
     model.value.unit === undefined