From 28c4b41570451a7636986a53af72bb58845c3690 Mon Sep 17 00:00:00 2001
From: Kuchenpirat <jojow@gmx.net>
Date: Wed, 30 Jul 2025 09:07:42 +0000
Subject: [PATCH] Recipe Ingredients and Tools

---
 .../RecipePageIngredientToolsView.vue         | 99 ++++++++-----------
 1 file changed, 40 insertions(+), 59 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
index 88e47f0d5..0c38194fd 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientToolsView.vue
@@ -36,7 +36,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
 import { useToolStore } from "~/composables/store";
@@ -48,71 +48,52 @@ interface RecipeToolWithOnHand extends RecipeTool {
   onHand: boolean;
 }
 
-export default defineNuxtComponent({
-  components: {
-    RecipeIngredients,
-  },
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-    scale: {
-      type: Number,
-      required: true,
-    },
-    isCookMode: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props) {
-    const { isOwnGroup } = useLoggedInState();
+interface Props {
+  recipe: NoUndefinedField<Recipe>;
+  scale: number;
+  isCookMode?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  isCookMode: false,
+});
 
-    const toolStore = isOwnGroup.value ? useToolStore() : null;
-    const { user } = usePageUser();
-    const { isEditMode } = usePageState(props.recipe.slug);
+const { isOwnGroup } = useLoggedInState();
 
-    const recipeTools = computed(() => {
-      if (!(user.householdSlug && toolStore)) {
-        return props.recipe.tools.map(tool => ({ ...tool, onHand: false }) as RecipeToolWithOnHand);
-      }
-      else {
-        return props.recipe.tools.map((tool) => {
-          const onHand = tool.householdsWithTool?.includes(user.householdSlug) || false;
-          return { ...tool, onHand } as RecipeToolWithOnHand;
-        });
-      }
+const toolStore = isOwnGroup.value ? useToolStore() : null;
+const { user } = usePageUser();
+const { isEditMode } = usePageState(props.recipe.slug);
+
+const recipeTools = computed(() => {
+  if (!(user.householdSlug && toolStore)) {
+    return props.recipe.tools.map(tool => ({ ...tool, onHand: false }) as RecipeToolWithOnHand);
+  }
+  else {
+    return props.recipe.tools.map((tool) => {
+      const onHand = tool.householdsWithTool?.includes(user.householdSlug) || false;
+      return { ...tool, onHand } as RecipeToolWithOnHand;
     });
+  }
+});
 
-    function updateTool(index: number) {
-      if (user.id && user.householdSlug && toolStore) {
-        const tool = recipeTools.value[index];
-        if (tool.onHand && !tool.householdsWithTool?.includes(user.householdSlug)) {
-          if (!tool.householdsWithTool) {
-            tool.householdsWithTool = [user.householdSlug];
-          }
-          else {
-            tool.householdsWithTool.push(user.householdSlug);
-          }
-        }
-        else if (!tool.onHand && tool.householdsWithTool?.includes(user.householdSlug)) {
-          tool.householdsWithTool = tool.householdsWithTool.filter(household => household !== user.householdSlug);
-        }
-
-        toolStore.actions.updateOne(tool);
+function updateTool(index: number) {
+  if (user.id && user.householdSlug && toolStore) {
+    const tool = recipeTools.value[index];
+    if (tool.onHand && !tool.householdsWithTool?.includes(user.householdSlug)) {
+      if (!tool.householdsWithTool) {
+        tool.householdsWithTool = [user.householdSlug];
       }
       else {
-        console.log("no user, skipping server update");
+        tool.householdsWithTool.push(user.householdSlug);
       }
     }
+    else if (!tool.onHand && tool.householdsWithTool?.includes(user.householdSlug)) {
+      tool.householdsWithTool = tool.householdsWithTool.filter(household => household !== user.householdSlug);
+    }
 
-    return {
-      toolStore,
-      recipeTools,
-      isEditMode,
-      updateTool,
-    };
-  },
-});
+    toolStore.actions.updateOne(tool);
+  }
+  else {
+    console.log("no user, skipping server update");
+  }
+}
 </script>