chore: script setup #3 - recipe components (#5849)

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,71 +49,72 @@ 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) {
-    const { $globals } = useNuxtApp();
-    const missingOrganizers = computed(() => [
-      {
-        type: "food",
-        show: props.missingFoods?.length,
-        icon: $globals.icons.foods,
-        items: props.missingFoods
-          ? props.missingFoods.map((food) => {
-              return reactive({ type: "food", item: food, selected: false } as Organizer);
-            })
-          : [],
-        getLabel: (item: IngredientFood) => item.pluralName || item.name,
-      },
-      {
-        type: "tool",
-        show: props.missingTools?.length,
-        icon: $globals.icons.tools,
-        items: props.missingTools
-          ? props.missingTools.map((tool) => {
-              return reactive({ type: "tool", item: tool, selected: false } as Organizer);
-            })
-          : [],
-        getLabel: (item: RecipeTool) => item.name,
-      },
-    ]);
-
-    function handleCheckbox(organizer: Organizer) {
-      if (props.disableCheckbox) {
-        return;
-      }
-
-      organizer.selected = !organizer.selected;
-      if (organizer.selected) {
-        context.emit(`add-${organizer.type}`, organizer.item);
-      }
-      else {
-        context.emit(`remove-${organizer.type}`, organizer.item);
-      }
-    }
-
-    return {
-      missingOrganizers,
-      handleCheckbox,
-    };
-  },
+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(() => [
+  {
+    type: "food",
+    show: props.missingFoods?.length,
+    icon: $globals.icons.foods,
+    items: props.missingFoods
+      ? props.missingFoods.map((food) => {
+          return reactive({ type: "food", item: food, selected: false } as Organizer);
+        })
+      : [],
+    getLabel: (item: IngredientFood) => item.pluralName || item.name,
+  },
+  {
+    type: "tool",
+    show: props.missingTools?.length,
+    icon: $globals.icons.tools,
+    items: props.missingTools
+      ? props.missingTools.map((tool) => {
+          return reactive({ type: "tool", item: tool, selected: false } as Organizer);
+        })
+      : [],
+    getLabel: (item: RecipeTool) => item.name,
+  },
+]);
+
+function handleCheckbox(organizer: Organizer) {
+  if (props.disableCheckbox) {
+    return;
+  }
+
+  organizer.selected = !organizer.selected;
+  if (organizer.selected) {
+    if (organizer.type === "food") {
+      emit("add-food", organizer.item as IngredientFood);
+    }
+    else {
+      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);
+    }
+  }
+}
 </script>