Popup Feature for List Food Item

[lposhni]

New Feature

We implemented a popup screen feature that appears when a user clicks on a food item in the list. This popup displays all recipes that include the selected food item, using an API call to fetch the related recipes. Users can click on a recipe to be redirected to that specific recipe's details.

Context

This change is being made so users can quickly see how a specific food item is used across their recipes without leaving the main food list. It improves discoverability of recipes, helps with planning and ingredient substitution, and keeps the workflow inside a single, consistent UI.

Detailed Description

When a user clicks on a food name in the Food model list, the frontend now opens a dialog showing all recipes that use that food. User can click on the recipes so that they can be redirected to a specific recipe page.

The click handler:

1. Stores the selected food in local state and opens a v-dialog.
2. Calls the existing API (ApiApi().apiRecipeList) with the selected food’s ID and a large pageSize to retrieve all matching recipes.
3. Shows a loading indicator while the request is in progress.
4. Once the API resolves:
   • Displays recipe names that include the selected food.
   • If no recipes are found or the request fails, the dialog shows a friendly message explaining that no recipes currently use this food (or that recipes are not yet loaded).
5. The user can close the dialog, which clears the selected food and recipe results.

The dialog can be closed with a button, which clears the selected food and recipe list from local state.

Changes in the Codebase

ModelListPage.vue (Food View)

• Added a clickable food-link span in the item.name slot.
• Added new reactive state:
  • selectedFood
  • showFoodDialog
  • foodRecipes
  • loadingFoodRecipes

New Functions

openFoodUsageDialog(food: Food)

• Sets the selected food
• Opens the dialog
• Fetches recipes via:

ApiApi().apiRecipeList({ food: food.id, pageSize: 350 })
markdown

• Handles success, empty result sets, and error cases

closeFoodUsageDialog()

• Closes the dialog
• Clears selected food and recipe data

goToRecipe()

• This will load the Recipe Detail Page for that recipe.

Styling

• Adds underline + clickable styling to food names to indicate interactivity.

No backend changes; uses existing API endpoints.

Additional Information

This feature is intended to be incremental and non-breaking: if the API fails or returns no recipes, the rest of the page still functions normally and the dialog shows a safe fallback message. Basic manual testing has been done for:

Clicking different foods with/without associated recipes
Handling loading and error states
Closing and reopening the dialog

Associated Issue

#4128

Screenshots of new feature

1st Screenshot shows how each element is underlined because it's a link
2nd Screenshot shows what the popup looks like
3rd Screenshot is what is displayed after a recipe has been chosen from the popup

[CLAassistant]

All committers have signed the CLA.