recipe suggestion

frontend/components/Domain/Recipe/RecipeSuggestion.vue

@@ -14,9 +14,7 @@
       <div v-for="(organizer, idx) in missingOrganizers" :key="idx">
         <v-col v-if="organizer.show" cols="12">
           <div class="d-flex flex-row flex-wrap align-center pt-2">
-            <v-icon class="ma-0 pa-0">
-              {{ organizer.icon }}
-            </v-icon>
+            <v-icon class="ma-0 pa-0" />
             <v-card-text class="mr-0 my-0 pl-1 py-0" style="width: min-content">
               {{ $t("recipe-finder.missing") }}:
             </v-card-text>
@@ -41,7 +39,7 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import RecipeCardMobile from "./RecipeCardMobile.vue";
 import type { IngredientFood, RecipeSummary, RecipeTool } from "~/lib/api/types/recipe";
 
@@ -51,27 +49,25 @@ interface Organizer {
   selected: boolean;
 }
 
-export default defineNuxtComponent({
-  components: { RecipeCardMobile },
-  props: {
-    recipe: {
-      type: Object as () => RecipeSummary,
-      required: true,
-    },
-    missingFoods: {
-      type: Array as () => IngredientFood[] | null,
-      default: null,
-    },
-    missingTools: {
-      type: Array as () => RecipeTool[] | null,
-      default: null,
-    },
-    disableCheckbox: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  setup(props, context) {
+interface Props {
+  recipe: RecipeSummary;
+  missingFoods?: IngredientFood[] | null;
+  missingTools?: RecipeTool[] | null;
+  disableCheckbox?: boolean;
+}
+const props = withDefaults(defineProps<Props>(), {
+  missingFoods: null,
+  missingTools: null,
+  disableCheckbox: false,
+});
+
+const emit = defineEmits<{
+  "add-food": [food: IngredientFood];
+  "remove-food": [food: IngredientFood];
+  "add-tool": [tool: RecipeTool];
+  "remove-tool": [tool: RecipeTool];
+}>();
+
 const { $globals } = useNuxtApp();
 const missingOrganizers = computed(() => [
   {
@@ -105,17 +101,20 @@ export default defineNuxtComponent({
 
   organizer.selected = !organizer.selected;
   if (organizer.selected) {
-        context.emit(`add-${organizer.type}`, organizer.item);
+    if (organizer.type === "food") {
+      emit("add-food", organizer.item as IngredientFood);
     }
     else {
-        context.emit(`remove-${organizer.type}`, organizer.item);
+      emit("add-tool", organizer.item as RecipeTool);
+    }
+  }
+  else {
+    if (organizer.type === "food") {
+      emit("remove-food", organizer.item as IngredientFood);
+    }
+    else {
+      emit("remove-tool", organizer.item as RecipeTool);
+    }
   }
 }
-
-    return {
-      missingOrganizers,
-      handleCheckbox,
-    };
-  },
-});
 </script>