mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-05-24 01:12:54 -04:00
wip: infinite scroll (broken)
This commit is contained in:
Hayden
parent
9650ba9b00
commit
4174cdb446
@ -124,7 +124,6 @@ import {
|
||||
reactive,
|
||||
ref,
|
||||
toRefs,
|
||||
useAsync,
|
||||
useContext,
|
||||
useRouter,
|
||||
watch,
|
||||
@ -132,7 +131,6 @@ import {
|
||||
import { useThrottleFn } from "@vueuse/core";
|
||||
import RecipeCard from "./RecipeCard.vue";
|
||||
import RecipeCardMobile from "./RecipeCardMobile.vue";
|
||||
import { useAsyncKey } from "~/composables/use-utils";
|
||||
import { useLazyRecipes } from "~/composables/recipes";
|
||||
import { Recipe } from "~/lib/api/types/recipe";
|
||||
import { useUserSortPreferences } from "~/composables/use-users/preferences";
|
||||
@ -198,6 +196,7 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function navigateRandom() {
|
||||
if (props.recipes.length > 0) {
|
||||
const recipe = props.recipes[Math.floor(Math.random() * props.recipes.length)];
|
||||
@ -221,6 +220,7 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
async function fetchRecipes(pageCount = 1) {
|
||||
console.log("fetching recipes", pageCount);
|
||||
return await fetchMore(
|
||||
page.value,
|
||||
// we double-up the first call to avoid a bug with large screens that render the entire first page without scrolling, preventing additional loading
|
||||
@ -261,27 +261,26 @@ export default defineComponent({
|
||||
}
|
||||
);
|
||||
|
||||
const infiniteScroll = useThrottleFn(() => {
|
||||
useAsync(async () => {
|
||||
if (!ready.value || !hasMore.value || loading.value) {
|
||||
return;
|
||||
}
|
||||
const infiniteScroll = useThrottleFn(async () => {
|
||||
console.log("infinite scroll");
|
||||
if (!ready.value || !hasMore.value || loading.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
page.value = page.value + 1;
|
||||
loading.value = true;
|
||||
page.value = page.value + 1;
|
||||
|
||||
const newRecipes = await fetchRecipes();
|
||||
if (!newRecipes.length) {
|
||||
hasMore.value = false;
|
||||
} else {
|
||||
context.emit(APPEND_RECIPES_EVENT, newRecipes);
|
||||
}
|
||||
const newRecipes = await fetchRecipes();
|
||||
if (newRecipes.length <= 0) {
|
||||
hasMore.value = false;
|
||||
} else {
|
||||
context.emit(APPEND_RECIPES_EVENT, newRecipes);
|
||||
}
|
||||
|
||||
loading.value = false;
|
||||
}, useAsyncKey());
|
||||
loading.value = false;
|
||||
}, 500);
|
||||
|
||||
function sortRecipes(sortType: string) {
|
||||
async function sortRecipes(sortType: string) {
|
||||
if (state.sortLoading || loading.value) {
|
||||
return;
|
||||
}
|
||||
@ -342,21 +341,19 @@ export default defineComponent({
|
||||
return;
|
||||
}
|
||||
|
||||
useAsync(async () => {
|
||||
// reset pagination
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
// reset pagination
|
||||
page.value = 1;
|
||||
hasMore.value = true;
|
||||
|
||||
state.sortLoading = true;
|
||||
loading.value = true;
|
||||
state.sortLoading = true;
|
||||
loading.value = true;
|
||||
|
||||
// fetch new recipes
|
||||
const newRecipes = await fetchRecipes();
|
||||
context.emit(REPLACE_RECIPES_EVENT, newRecipes);
|
||||
// fetch new recipes
|
||||
const newRecipes = await fetchRecipes();
|
||||
context.emit(REPLACE_RECIPES_EVENT, newRecipes);
|
||||
|
||||
state.sortLoading = false;
|
||||
loading.value = false;
|
||||
}, useAsyncKey());
|
||||
state.sortLoading = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
function toggleMobileCards() {
|
||||
|
||||
197
frontend/components/Domain/Recipe/RecipeCardSectionv2.vue
Normal file
197
frontend/components/Domain/Recipe/RecipeCardSectionv2.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- Section Toolbar -->
|
||||
<v-app-bar v-if="toolbar" color="transparent" flat class="mt-n1 flex-sm-wrap rounded">
|
||||
<slot name="title">
|
||||
<v-icon v-if="title" large left>
|
||||
{{ displayIcon }}
|
||||
</v-icon>
|
||||
<v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
|
||||
</slot>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn :icon="$vuetify.breakpoint.xsOnly" text :disabled="recipes.length === 0">
|
||||
<v-icon :left="!$vuetify.breakpoint.xsOnly">
|
||||
{{ $globals.icons.diceMultiple }}
|
||||
</v-icon>
|
||||
{{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
|
||||
</v-btn>
|
||||
|
||||
<v-menu v-if="$listeners.sortRecipes" offset-y left>
|
||||
<template #activator="{ on, attrs }">
|
||||
<v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on">
|
||||
<v-icon :left="!$vuetify.breakpoint.xsOnly">
|
||||
{{ $globals.icons.sort }}
|
||||
</v-icon>
|
||||
{{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="sort in sorters" :key="sort.id" @click="sort.action">
|
||||
<v-icon left>
|
||||
{{ sort.icon }}
|
||||
</v-icon>
|
||||
<v-list-item-title>{{ sort.label }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
<ContextMenu
|
||||
v-if="!$vuetify.breakpoint.xsOnly"
|
||||
:menu-top="false"
|
||||
:items="[
|
||||
{
|
||||
title: $tc('general.toggle-view'),
|
||||
icon: $globals.icons.eye,
|
||||
event: 'toggle-dense-view',
|
||||
},
|
||||
]"
|
||||
@toggle-dense-view="() => (state.preferMobileCards = !state.preferMobileCards)"
|
||||
/>
|
||||
</v-app-bar>
|
||||
|
||||
<!-- Recipe Section -->
|
||||
<div v-if="recipes && recipes.length > 0" class="mt-2">
|
||||
<v-row v-if="!mobileCards">
|
||||
<v-col v-for="(recipe, index) in recipes" :key="recipe.slug + index" :sm="6" :md="6" :lg="4" :xl="3">
|
||||
<v-lazy>
|
||||
<RecipeCard
|
||||
:name="recipe.name"
|
||||
:description="recipe.description"
|
||||
:slug="recipe.slug"
|
||||
:rating="recipe.rating"
|
||||
:image="recipe.image"
|
||||
:tags="recipe.tags"
|
||||
:recipe-id="recipe.id"
|
||||
/>
|
||||
</v-lazy>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row v-else dense>
|
||||
<v-col v-for="recipe in recipes" :key="recipe.name" cols="12" :sm="'12'" :md="'6'" :lg="'4'" :xl="'3'">
|
||||
<v-lazy>
|
||||
<RecipeCardMobile
|
||||
:name="recipe.name"
|
||||
:description="recipe.description"
|
||||
:slug="recipe.slug"
|
||||
:rating="recipe.rating"
|
||||
:image="recipe.image"
|
||||
:tags="recipe.tags"
|
||||
:recipe-id="recipe.id"
|
||||
/>
|
||||
</v-lazy>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-card v-intersect="infiniteScroll"></v-card>
|
||||
</div>
|
||||
<div v-else class="d-flex justify-center">
|
||||
<div class="text-center">
|
||||
<v-icon size="64">
|
||||
{{ $globals.icons.search }}
|
||||
</v-icon>
|
||||
<p class="headline">No Results</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, ref, useContext } from "@nuxtjs/composition-api";
|
||||
import RecipeCard from "./RecipeCard.vue";
|
||||
import RecipeCardMobile from "./RecipeCardMobile.vue";
|
||||
import { Recipe } from "~/lib/api/types/recipe";
|
||||
|
||||
const EVENTS = {
|
||||
az: "az",
|
||||
rating: "rating",
|
||||
created: "created",
|
||||
updated: "updated",
|
||||
lastMade: "lastMade",
|
||||
} as const;
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
RecipeCard,
|
||||
RecipeCardMobile,
|
||||
},
|
||||
props: {
|
||||
toolbar: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
recipes: {
|
||||
type: Array as () => Recipe[],
|
||||
default: () => [],
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const { $globals, i18n, $vuetify } = useContext();
|
||||
|
||||
const state = ref({
|
||||
preferMobileCards: false,
|
||||
});
|
||||
|
||||
const displayIcon = computed(() => props.icon || $globals.icons.tags);
|
||||
const mobileCards = computed(() => $vuetify.breakpoint.xsOnly || state.value.preferMobileCards);
|
||||
|
||||
const sorters = computed(() => {
|
||||
return [
|
||||
{
|
||||
id: 1,
|
||||
label: i18n.t("general.sort-alphabetically"),
|
||||
icon: $globals.icons.orderAlphabeticalAscending,
|
||||
action: () => emit(EVENTS.az),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: i18n.t("general.rating"),
|
||||
icon: $globals.icons.star,
|
||||
action: () => emit(EVENTS.rating),
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: i18n.t("general.created"),
|
||||
icon: $globals.icons.newBox,
|
||||
action: () => emit(EVENTS.created),
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
label: i18n.t("general.updated"),
|
||||
icon: $globals.icons.update,
|
||||
action: () => emit(EVENTS.updated),
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
label: i18n.t("general.last-made"),
|
||||
icon: $globals.icons.chefHat,
|
||||
action: () => emit(EVENTS.lastMade),
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
function infiniteScroll() {
|
||||
emit("intersect");
|
||||
}
|
||||
|
||||
return {
|
||||
state,
|
||||
sorters,
|
||||
displayIcon,
|
||||
mobileCards,
|
||||
infiniteScroll,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
48
frontend/composables/use-infinite-scroll.ts
Normal file
48
frontend/composables/use-infinite-scroll.ts
Normal file
@ -0,0 +1,48 @@
|
||||
import { ref, Ref } from "@nuxtjs/composition-api"
|
||||
import { useDebounceFn } from "@vueuse/core"
|
||||
|
||||
|
||||
type InfiniteScrollOptions ={
|
||||
page: Ref<number>
|
||||
perPage: Ref<number>
|
||||
total: Ref<number>
|
||||
locked?: Ref<boolean>
|
||||
data: Ref<any[]>
|
||||
callback: () => Promise<void>
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
export function useInfiniteScroll(opts: InfiniteScrollOptions) {
|
||||
const loading = ref(false)
|
||||
|
||||
const { data, callback, locked, page, total} = opts
|
||||
|
||||
const onScrollRaw = () => {
|
||||
console.log("onScroll")
|
||||
const { length } = data.value
|
||||
|
||||
|
||||
// don't run if:
|
||||
// - already loading
|
||||
// - there's nothing more to load
|
||||
if (loading.value || locked?.value || total.value !== -1 && length >= total.value) {
|
||||
return
|
||||
}
|
||||
|
||||
// load more items
|
||||
loading.value = true
|
||||
page.value = page.value + 1
|
||||
callback().then(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
const onScroll = useDebounceFn(onScrollRaw, 100)
|
||||
|
||||
return {
|
||||
onScroll,
|
||||
loading,
|
||||
}
|
||||
}
|
||||
@ -118,14 +118,13 @@
|
||||
</div>
|
||||
<v-divider></v-divider>
|
||||
<v-container class="mt-6 px-md-6">
|
||||
<RecipeCardSection
|
||||
{{ recipes.length }}
|
||||
<RecipeCardSectionv2
|
||||
class="mt-n5"
|
||||
:icon="$globals.icons.search"
|
||||
:title="$tc('search.results')"
|
||||
:recipes="recipes"
|
||||
:query="passedQuery"
|
||||
@replaceRecipes="replaceRecipes"
|
||||
@appendRecipes="appendRecipes"
|
||||
@intersect="onScroll"
|
||||
/>
|
||||
</v-container>
|
||||
</v-container>
|
||||
@ -136,20 +135,22 @@ import { ref, defineComponent, useRouter, onMounted, useContext, computed } from
|
||||
import { watchDebounced } from "@vueuse/shared";
|
||||
import SearchFilter from "~/components/Domain/SearchFilter.vue";
|
||||
import { useCategoryStore, useFoodStore, useTagStore, useToolStore } from "~/composables/store";
|
||||
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
|
||||
import { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
|
||||
import { NoUndefinedField } from "~/lib/api/types/non-generated";
|
||||
import { useLazyRecipes } from "~/composables/recipes";
|
||||
import { RecipeSearchQuery } from "~/lib/api/user/recipes/recipe";
|
||||
import RecipeCardSectionv2 from "~/components/Domain/Recipe/RecipeCardSectionv2.vue";
|
||||
import { useInfiniteScroll } from "~/composables/use-infinite-scroll";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { RecipeSummary } from "~/lib/api/types/group";
|
||||
|
||||
export default defineComponent({
|
||||
components: { SearchFilter, RecipeCardSection },
|
||||
components: { SearchFilter, RecipeCardSectionv2 },
|
||||
setup() {
|
||||
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
|
||||
|
||||
const router = useRouter();
|
||||
const { $globals, i18n } = useContext();
|
||||
|
||||
const recipes = ref<RecipeSummary[]>([]);
|
||||
|
||||
const state = ref({
|
||||
auto: true,
|
||||
search: "",
|
||||
@ -163,6 +164,22 @@ export default defineComponent({
|
||||
requireAllFoods: false,
|
||||
});
|
||||
|
||||
const activeQuery = ref<RecipeSearchQuery>({
|
||||
search: "",
|
||||
orderBy: "created_at",
|
||||
orderDirection: "desc",
|
||||
requireAllCategories: false,
|
||||
requireAllTags: false,
|
||||
requireAllTools: false,
|
||||
requireAllFoods: false,
|
||||
categories: [],
|
||||
tags: [],
|
||||
tools: [],
|
||||
foods: [],
|
||||
});
|
||||
|
||||
const pageLocked = ref(false);
|
||||
|
||||
const categories = useCategoryStore();
|
||||
const selectedCategories = ref<NoUndefinedField<RecipeCategory>[]>([]);
|
||||
|
||||
@ -175,8 +192,6 @@ export default defineComponent({
|
||||
const tools = useToolStore();
|
||||
const selectedTools = ref<NoUndefinedField<RecipeTool>[]>([]);
|
||||
|
||||
const passedQuery = ref<RecipeSearchQuery | null>(null);
|
||||
|
||||
function reset() {
|
||||
state.value.search = "";
|
||||
state.value.orderBy = "created_at";
|
||||
@ -190,6 +205,8 @@ export default defineComponent({
|
||||
selectedTags.value = [];
|
||||
selectedTools.value = [];
|
||||
|
||||
recipes.value = [];
|
||||
|
||||
router.push({
|
||||
query: {},
|
||||
});
|
||||
@ -205,43 +222,80 @@ export default defineComponent({
|
||||
return array.map((item) => item.id);
|
||||
}
|
||||
|
||||
const api = useUserApi();
|
||||
|
||||
const page = ref(0);
|
||||
const perPage = ref(10);
|
||||
const total = ref(-1);
|
||||
|
||||
async function search() {
|
||||
await router.push({
|
||||
query: {
|
||||
categories: toIDArray(selectedCategories.value),
|
||||
foods: toIDArray(selectedFoods.value),
|
||||
tags: toIDArray(selectedTags.value),
|
||||
tools: toIDArray(selectedTools.value),
|
||||
if (pageLocked.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Only add the query param if it's or not default
|
||||
...{
|
||||
auto: state.value.auto ? undefined : "false",
|
||||
search: state.value.search === "" ? undefined : state.value.search,
|
||||
orderBy: state.value.orderBy === "createdAt" ? undefined : state.value.orderBy,
|
||||
orderDirection: state.value.orderDirection === "desc" ? undefined : state.value.orderDirection,
|
||||
requireAllCategories: state.value.requireAllCategories ? "true" : undefined,
|
||||
requireAllTags: state.value.requireAllTags ? "true" : undefined,
|
||||
requireAllTools: state.value.requireAllTools ? "true" : undefined,
|
||||
requireAllFoods: state.value.requireAllFoods ? "true" : undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
activeQuery.value = {
|
||||
perPage: perPage.value,
|
||||
page: page.value,
|
||||
|
||||
passedQuery.value = {
|
||||
search: state.value.search,
|
||||
categories: toIDArray(selectedCategories.value),
|
||||
foods: toIDArray(selectedFoods.value),
|
||||
tags: toIDArray(selectedTags.value),
|
||||
tools: toIDArray(selectedTools.value),
|
||||
orderBy: state.value.orderBy,
|
||||
orderDirection: state.value.orderDirection,
|
||||
requireAllCategories: state.value.requireAllCategories,
|
||||
requireAllTags: state.value.requireAllTags,
|
||||
requireAllTools: state.value.requireAllTools,
|
||||
requireAllFoods: state.value.requireAllFoods,
|
||||
orderBy: state.value.orderBy,
|
||||
orderDirection: state.value.orderDirection,
|
||||
categories: toIDArray(selectedCategories.value),
|
||||
tags: toIDArray(selectedTags.value),
|
||||
tools: toIDArray(selectedTools.value),
|
||||
foods: toIDArray(selectedFoods.value),
|
||||
};
|
||||
|
||||
await router.push({
|
||||
query: {
|
||||
categories: activeQuery.value.categories,
|
||||
foods: activeQuery.value.foods,
|
||||
tags: activeQuery.value.tags,
|
||||
tools: activeQuery.value.tools,
|
||||
|
||||
// Only add the query param if it's or not default
|
||||
...{
|
||||
auto: state.value.auto ? undefined : "false",
|
||||
search: activeQuery.value.search === "" ? undefined : activeQuery.value.search,
|
||||
orderBy: activeQuery.value.orderBy === "createdAt" ? undefined : activeQuery.value.orderBy,
|
||||
orderDirection: activeQuery.value.orderDirection === "desc" ? undefined : activeQuery.value.orderDirection,
|
||||
requireAllCategories: activeQuery.value.requireAllCategories ? "true" : undefined,
|
||||
requireAllTags: activeQuery.value.requireAllTags ? "true" : undefined,
|
||||
requireAllTools: activeQuery.value.requireAllTools ? "true" : undefined,
|
||||
requireAllFoods: activeQuery.value.requireAllFoods ? "true" : undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const result = await api.recipes.search(activeQuery.value);
|
||||
|
||||
if (result.error || result.data == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// append
|
||||
if (page.value > 0) {
|
||||
recipes.value = recipes.value.concat(result.data.items);
|
||||
} else {
|
||||
recipes.value = result.data.items;
|
||||
}
|
||||
total.value = result.data.total;
|
||||
}
|
||||
|
||||
const { onScroll } = useInfiniteScroll({
|
||||
page,
|
||||
total,
|
||||
perPage,
|
||||
data: recipes,
|
||||
callback: async () => {
|
||||
await search();
|
||||
},
|
||||
});
|
||||
|
||||
function waitUntilAndExecute(
|
||||
condition: () => boolean,
|
||||
callback: () => void,
|
||||
@ -387,7 +441,8 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
Promise.allSettled(promises).then(() => {
|
||||
search();
|
||||
pageLocked.value = false;
|
||||
onScroll();
|
||||
});
|
||||
});
|
||||
|
||||
@ -427,17 +482,13 @@ export default defineComponent({
|
||||
|
||||
sortable,
|
||||
toggleOrderDirection,
|
||||
onScroll,
|
||||
|
||||
selectedCategories,
|
||||
selectedFoods,
|
||||
selectedTags,
|
||||
selectedTools,
|
||||
appendRecipes,
|
||||
assignSorted,
|
||||
recipes,
|
||||
removeRecipe,
|
||||
replaceRecipes,
|
||||
passedQuery,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user