Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-05 05:25:26 +02:00
Code Issues Releases Activity

fix: Optimize Recipe Timeline Requests (#5811)

Browse source
This commit is contained in:
Michael Genson 2025-07-28 06:25:49 -05:00 • committed by GitHub
parent 675ac9c32b
commit a087760d53
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 28 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

13
frontend/components/Domain/Recipe/RecipeCardMobile.vue
View file

@ -3,7 +3,10 @@
<v-expand-transition> <v-expand-transition>
<v-card <v-card
:ripple="false" :ripple="false"
:class="isFlat ? 'mx-auto flat' : 'mx-auto'" :class="[
isFlat ? 'mx-auto flat' : 'mx-auto',
{ 'disable-highlight': disableHighlight },
]"
:style="{ cursor }" :style="{ cursor }"
hover hover
height="100%" height="100%"
@ -181,6 +184,10 @@ export default defineNuxtComponent({
type: [Number], type: [Number],
default: 150, default: 150,
}, },
disableHighlight: {
type: Boolean,
default: false,
},
}, },
emits: ["selected", "delete"], emits: ["selected", "delete"],
setup(props) { setup(props) {
@ -241,4 +248,8 @@ export default defineNuxtComponent({
box-shadow: none !important; box-shadow: none !important;
background-color: transparent !important; background-color: transparent !important;
} }
.disable-highlight :deep(.v-card__overlay) {
opacity: 0 !important;
}
</style> </style>

22
frontend/components/Domain/Recipe/RecipeTimeline.vue
View file

@ -242,28 +242,28 @@ export default defineNuxtComponent({
alert.success(i18n.t("events.event-deleted") as string); alert.success(i18n.t("events.event-deleted") as string);
}; };
async function getRecipe(recipeId: string): Promise<Recipe | null> { async function getRecipes(recipeIds: string[]): Promise<Recipe[]> {
const { data } = await api.recipes.getOne(recipeId); const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
return data; const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
return data?.items || [];
}; };
async function updateRecipes(events: RecipeTimelineEventOut[]) { async function updateRecipes(events: RecipeTimelineEventOut[]) {
const recipePromises: Promise<Recipe | null>[] = []; const recipeIds: string[] = [];
const seenRecipeIds: string[] = [];
events.forEach((event) => { events.forEach((event) => {
if (seenRecipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) { if (recipeIds.includes(event.recipeId) || recipes.has(event.recipeId)) {
return; return;
} }
seenRecipeIds.push(event.recipeId); recipeIds.push(event.recipeId);
recipePromises.push(getRecipe(event.recipeId));
}); });
const results = await Promise.all(recipePromises); const results = await getRecipes(recipeIds);
results.forEach((result) => { results.forEach((result) => {
if (result && result.id) { if (!result?.id) {
recipes.set(result.id, result); return;
} }
recipes.set(result.id, result);
}); });
} }

1
frontend/components/Domain/Recipe/RecipeTimelineItem.vue
View file

@ -53,6 +53,7 @@
<v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%"> <v-row :class="useMobileFormat ? 'py-3 mx-0' : 'py-3 mx-0'" style="max-width: 100%">
<v-col align-self="center" class="pa-0"> <v-col align-self="center" class="pa-0">
<RecipeCardMobile <RecipeCardMobile
disable-highlight
:vertical="useMobileFormat" :vertical="useMobileFormat"
:name="recipe.name" :name="recipe.name"
:slug="recipe.slug" :slug="recipe.slug"

5
frontend/pages/g/[groupSlug]/recipes/timeline.vue
View file

@ -16,7 +16,10 @@
{{ $t("recipe.group-global-timeline", { groupName }) }} {{ $t("recipe.group-global-timeline", { groupName }) }}
</template> </template>
</BasePageTitle> </BasePageTitle>
<v-sheet :class="$vuetify.display.smAndDown ? 'pa-0' : 'px-3 py-0'"> <v-sheet
:class="$vuetify.display.smAndDown ? 'pa-0' : 'px-3 py-0'"
style="background-color: transparent;"
>
<RecipeTimeline <RecipeTimeline
v-if="queryFilter" v-if="queryFilter"
v-model="ready" v-model="ready"