diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue index f9fb6fe4b..05b22c85d 100644 --- a/frontend/components/Domain/Recipe/RecipeCardSection.vue +++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue @@ -90,6 +90,14 @@ {{ $t("general.last-made") }} + + + + {{ $globals.icons.diceMultiple }} + + {{ $t("general.random") }} + + { }); const sortLoading = ref(false); +const randomSeed = ref(Date.now().toString()); const route = useRoute(); const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || ""); @@ -256,13 +265,18 @@ const queryFilter = computed(() => { async function fetchRecipes(pageCount = 1) { const orderDir = props.query?.orderDirection || preferences.value.orderDirection; const orderByNullPosition = props.query?.orderByNullPosition || orderDir === "asc" ? "first" : "last"; + const orderBy = props.query?.orderBy || preferences.value.orderBy; + const localQuery = { ...props.query }; + if (orderBy === "random") { + localQuery._searchSeed = randomSeed.value; + } return await fetchMore( page.value, perPage * pageCount, - props.query?.orderBy || preferences.value.orderBy, + orderBy, orderDir, orderByNullPosition, - props.query, + localQuery, // we use a computed queryFilter to filter out recipes that have a null value for the property we're sorting by queryFilter.value, ); @@ -288,6 +302,9 @@ watch( ); async function initRecipes() { + if (preferences.value.orderBy === "random") { + randomSeed.value = Date.now().toString(); + } page.value = 1; hasMore.value = true; @@ -380,6 +397,15 @@ async function sortRecipes(sortType: string) { true, ); break; + case EVENTS.shuffle: + setter( + "random", + $globals.icons.diceMultiple, + $globals.icons.diceMultiple, // icon in asc and desc is the same for random + ); + // We update the seed value to have a different order + randomSeed.value = Date.now().toString(); + break; default: console.log("Unknown Event", sortType); return;