diff --git a/frontend/pages/g/_groupSlug/recipes/finder/index.vue b/frontend/pages/g/_groupSlug/recipes/finder/index.vue index cd0248b4c3a..86219f35a1f 100644 --- a/frontend/pages/g/_groupSlug/recipes/finder/index.vue +++ b/frontend/pages/g/_groupSlug/recipes/finder/index.vue @@ -220,7 +220,7 @@ - + ([]); function addFood(food: IngredientFood) { selectedFoods.value.push(food); + handleFoodUpdates(); } function removeFood(food: IngredientFood) { selectedFoods.value = selectedFoods.value.filter((f) => f.id !== food.id); + handleFoodUpdates(); + } + function handleFoodUpdates() { + selectedFoods.value.sort((a, b) => (a.pluralName || a.name).localeCompare(b.pluralName || b.name)); + preferences.value.foodIds = selectedFoods.value.map((food) => food.id); } watch( () => selectedFoods.value, () => { - selectedFoods.value.sort((a, b) => (a.pluralName || a.name).localeCompare(b.pluralName || b.name)); - preferences.value.foodIds = selectedFoods.value.map((food) => food.id); - } + handleFoodUpdates(); + }, ) const toolStore = isOwnGroup.value ? useToolStore() : usePublicToolStore(groupSlug.value); const selectedTools = ref([]); function addTool(tool: RecipeTool) { selectedTools.value.push(tool); + handleToolUpdates(); } function removeTool(tool: RecipeTool) { selectedTools.value = selectedTools.value.filter((t) => t.id !== tool.id); + handleToolUpdates(); + } + function handleToolUpdates() { + selectedTools.value.sort((a, b) => a.name.localeCompare(b.name)); + preferences.value.toolIds = selectedTools.value.map((tool) => tool.id); } watch( () => selectedTools.value, () => { - selectedTools.value.sort((a, b) => a.name.localeCompare(b.name)); - preferences.value.toolIds = selectedTools.value.map((tool) => tool.id); + handleToolUpdates(); } )