Add to Shopping List Dialog

frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue

@@ -51,7 +51,7 @@
     <BaseDialog
       v-if="shoppingListIngredientDialog"
       v-model="dialog"
-      :title="selectedShoppingList ? selectedShoppingList.name : $t('recipe.add-to-list')"
+      :title="selectedShoppingList?.name || $t('recipe.add-to-list')"
       :icon="$globals.icons.cartCheck"
       width="70%"
       :submit-text="$t('recipe.add-to-list')"
@@ -137,7 +137,7 @@
                     color="secondary"
                     density="compact"
                   />
-                  <div :key="ingredientData.ingredient.quantity">
+                  <div :key="`${ingredientData.ingredient.quantity || 'no-qty'}-${i}`">
                     <RecipeIngredientListItem
                       :ingredient="ingredientData.ingredient"
                       :disable-amount="ingredientData.disableAmount"
@@ -172,7 +172,7 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { toRefs } from "@vueuse/core";
 import RecipeIngredientListItem from "./RecipeIngredientListItem.vue";
 import { useUserApi } from "~/composables/api";
@@ -203,49 +203,31 @@ export interface ShoppingListRecipeIngredientSection {
   ingredientSections: ShoppingListIngredientSection[];
 }
 
-export default defineNuxtComponent({
+interface Props {
-  components: {
+  recipes?: RecipeWithScale[];
-    RecipeIngredientListItem,
+  shoppingLists?: ShoppingListSummary[];
-  },
+}
-  props: {
+const props = withDefaults(defineProps<Props>(), {
-    modelValue: {
+  recipes: undefined,
-      type: Boolean,
+  shoppingLists: () => [],
-      default: false,
+});
-    },
+
-    recipes: {
+const dialog = defineModel<boolean>({ default: false });
-      type: Array as () => RecipeWithScale[],
+
-      default: undefined,
-    },
-    shoppingLists: {
-      type: Array as () => ShoppingListSummary[],
-      default: () => [],
-    },
-  },
-  emits: ["update:modelValue"],
-  setup(props, context) {
 const i18n = useI18n();
 const $auth = useMealieAuth();
 const api = useUserApi();
 const preferences = useShoppingListPreferences();
 const ready = ref(false);
 
-    // v-model support
-    const dialog = computed({
-      get: () => {
-        return props.modelValue;
-      },
-      set: (val) => {
-        context.emit("update:modelValue", val);
-        initState();
-      },
-    });
-
 const state = reactive({
   shoppingListDialog: true,
   shoppingListIngredientDialog: false,
   shoppingListShowAllToggled: false,
 });
 
+const { shoppingListDialog, shoppingListIngredientDialog, shoppingListShowAllToggled: _shoppingListShowAllToggled } = toRefs(state);
+
 const userHousehold = computed(() => {
   return $auth.user.value?.householdSlug || "";
 });
@@ -269,6 +251,12 @@ export default defineNuxtComponent({
   },
 );
 
+watch(dialog, (val) => {
+  if (!val) {
+    initState();
+  }
+});
+
 async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
   const recipeSectionMap = new Map<string, ShoppingListRecipeIngredientSection>();
   for (const recipe of recipes) {
@@ -277,7 +265,10 @@ export default defineNuxtComponent({
     }
 
     if (recipeSectionMap.has(recipe.slug)) {
-          recipeSectionMap.get(recipe.slug).recipeScale += recipe.scale;
+      const existingSection = recipeSectionMap.get(recipe.slug);
+      if (existingSection) {
+        existingSection.recipeScale += recipe.scale;
+      }
       continue;
     }
 
@@ -421,22 +412,6 @@ export default defineNuxtComponent({
   state.shoppingListIngredientDialog = false;
   dialog.value = false;
 }
-
-    return {
-      dialog,
-      preferences,
-      ready,
-      shoppingListChoices,
-      ...toRefs(state),
-      addRecipesToList,
-      bulkCheckIngredients,
-      openShoppingListIngredientDialog,
-      setShowAllToggled,
-      recipeIngredientSections,
-      selectedShoppingList,
-    };
-  },
-});
 </script>
 
 <style scoped lang="css">