Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add recipe count to header of recipe card section #4946

Open
wants to merge 2 commits into
base: mealie-next
Choose a base branch
from

Conversation

jannon
Copy link

@jannon jannon commented Jan 26, 2025

What this PR does / why we need it:

This just adds the recipe count to the header of the recipe card section. It provides a useful piece of information right at the top of the section so users can see how many total recipes or how many match the filters/search.

So it goes from 'Recipes' to 'Recipes (n)' where n is the number of recipes in the result.

Which issue(s) this PR fixes:

This is a small change looking to enhance the usability/convenience of the UI. It's a common UI paradigm to display the number of items in a collection somewhere near the top.

Special notes for your reviewer:

I just starting using mealie and found myself wanting this. I thought this was a nice simple change to start to familiarize myself with the project. I don't think it warranted any test or doc changes, but let me know if there's anything else I should do.

Testing

Visual testing with the development UI:

  • Upon start, displays 'Recipes (0)'
  • After adding a recipe, displays 'Recipes (1)'
  • After adding another, displays 'Recipes (2)'
  • After searching for something specific to one of the recipes, displays 'Recipes (1)'

@@ -5,7 +5,7 @@
<v-icon v-if="title" large left>
{{ displayTitleIcon }}
</v-icon>
<v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
<v-toolbar-title class="headline"> {{ title }} ({{ recipes.length }})</v-toolbar-title>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Won't this only show the currently fetched recipes (i.e. after pagination)? We return the true "total" with the pagination API, should we use that value instead?

Copy link
Collaborator

@michael-genson michael-genson Jan 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is what the API returns:

class PaginationBase(BaseModel, Generic[DataT]):
page: int = 1
per_page: int = 10
total: int = 0
total_pages: int = 0
items: list[DataT]
next: str | None = None
previous: str | None = None

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see. I hadn't encountered any pagination yet in my usage. I'll have a look and take another pass

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IIRC the frontend pulls two pages at once (with a page size of 32 that's 64 recipes) so you might want to add 100 recipes or so to your dev instance

@michael-genson
Copy link
Collaborator

I like the idea, see my comment though, I'm not sure this will work as-is. Also, would you be able to include a screenshot of what it looks like?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants