Sort Recipe Property Ingredient Window

[deeptikam]

Issue Solved : #4186

New Feature

I implemented a 'Sort Decreasing' Button for the property ingredient window on a recipe so that users can sort and see which ingredients are contributing the most in a recipe. It doesn't showcase in property windows that have a warning in them, since not all values are there for sorting. Where the button is showcased, selecting it changes the color to signal that it is selected to the user, and the ingredients are sorted by decreasing percentage. Deselecting the button sets the ingredients back to the original order.

Reasoning

Helps users identify primary contributors to a recipe. It can be helpful for figuring out which ingredients to substitute or take out to reach goals such as calorie goals.

Implementation

Functions

New constants 'originalFoodValues' and 'isSorted' are established. 'originalFoodValues' stores the original ingredient order so that it can be called when deselecting the sorting button. 'isSorted' is used for styling purposes.

Function sortFoodValues creates a new list using the original food values and sorts it in decreasing order based on the percentage amount. It also updates 'isSorted' as needed.

Styling

A button is added to the property window card header with a thin outline and alignment with the text above it. Clicking the button styles it using the primary vue3 styling given. The button is not showcased when the property window has a warning.

Testing

Manual Testing was done to ensure that the new functionality worked and was showcased only when appropriate.

Images

Property Window open, showcasing an unselected button and ingredients that are not sorted.

Property Window open, showcasing a selected button and ingredients sorted in decreasing order by percentage.

Button not shown in Property Windows where there are warnings

[vabene1111]

hi,. thanks for the PR. Do you think it makes sense to have this as a button? I think we could just always sort the list when its opened as I do not really see a reason to view it without being sorted 🤔