diff --git a/frontend/components/Domain/Recipe/RecipeCardSection.vue b/frontend/components/Domain/Recipe/RecipeCardSection.vue index d065e0e80d6..62ca93d5431 100644 --- a/frontend/components/Domain/Recipe/RecipeCardSection.vue +++ b/frontend/components/Domain/Recipe/RecipeCardSection.vue @@ -69,50 +69,52 @@ @toggle-dense-view="toggleMobileCards()" /> -
- - - - - - - - - - - - - - +
+
+ + + + + + + + + + + + + + +
+ + + +
- - - -
@@ -223,36 +225,42 @@ export default defineComponent({ const queryFilter = computed(() => { const orderBy = props.query?.orderBy || preferences.value.orderBy; - return preferences.value.filterNull && orderBy ? `${orderBy} IS NOT NULL` : null; + const orderByFilter = preferences.value.filterNull && orderBy ? `${orderBy} IS NOT NULL` : null; + + if (props.query.queryFilter && orderByFilter) { + return `(${props.query.queryFilter}) AND ${orderByFilter}`; + } else if (props.query.queryFilter) { + return props.query.queryFilter; + } else { + return orderByFilter; + } }); async function fetchRecipes(pageCount = 1) { 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 perPage * pageCount, props.query?.orderBy || preferences.value.orderBy, props.query?.orderDirection || preferences.value.orderDirection, props.query, - // filter out recipes that have a null value for the property we're sorting by + // we use a computed queryFilter to filter out recipes that have a null value for the property we're sorting by queryFilter.value ); } onMounted(async () => { - if (props.query) { - await initRecipes(); - ready.value = true; - } + await initRecipes(); + ready.value = true; }); - let lastQuery: string | undefined; + let lastQuery: string | undefined = JSON.stringify(props.query); watch( () => props.query, async (newValue: RecipeSearchQuery | undefined) => { const newValueString = JSON.stringify(newValue) - if (newValue && (!ready.value || lastQuery !== newValueString)) { + if (lastQuery !== newValueString) { lastQuery = newValueString; + ready.value = false; await initRecipes(); ready.value = true; } @@ -261,8 +269,12 @@ export default defineComponent({ async function initRecipes() { page.value = 1; - const newRecipes = await fetchRecipes(2); - if (!newRecipes.length) { + hasMore.value = true; + + // we double-up the first call to avoid a bug with large screens that render + // the entire first page without scrolling, preventing additional loading + const newRecipes = await fetchRecipes(page.value + 1); + if (newRecipes.length < perPage) { hasMore.value = false; } @@ -274,7 +286,7 @@ export default defineComponent({ const infiniteScroll = useThrottleFn(() => { useAsync(async () => { - if (!ready.value || !hasMore.value || loading.value) { + if (!hasMore.value || loading.value) { return; } @@ -282,9 +294,10 @@ export default defineComponent({ page.value = page.value + 1; const newRecipes = await fetchRecipes(); - if (!newRecipes.length) { + if (newRecipes.length < perPage) { hasMore.value = false; - } else { + } + if (newRecipes.length) { context.emit(APPEND_RECIPES_EVENT, newRecipes); } @@ -379,6 +392,7 @@ export default defineComponent({ displayTitleIcon, EVENTS, infiniteScroll, + ready, loading, navigateRandom, preferences, diff --git a/frontend/components/Domain/Recipe/RecipeDataTable.vue b/frontend/components/Domain/Recipe/RecipeDataTable.vue index fd8900004ce..152b08d06c6 100644 --- a/frontend/components/Domain/Recipe/RecipeDataTable.vue +++ b/frontend/components/Domain/Recipe/RecipeDataTable.vue @@ -3,6 +3,8 @@ v-model="selected" item-key="id" show-select + sort-by="dateAdded" + sort-desc :headers="headers" :items="recipes" :items-per-page="15" @@ -39,6 +41,9 @@ + @@ -132,6 +137,14 @@ export default defineComponent({ return hdrs; }); + function formatDate(date: string) { + try { + return i18n.d(Date.parse(date), "medium"); + } catch { + return ""; + } + } + // ============ // Group Members const api = useUserApi(); @@ -160,6 +173,7 @@ export default defineComponent({ groupSlug, setValue, headers, + formatDate, members, getMember, }; diff --git a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue index 03cb0f7f213..a9c212dff57 100644 --- a/frontend/components/Domain/Recipe/RecipeExplorerPage.vue +++ b/frontend/components/Domain/Recipe/RecipeExplorerPage.vue @@ -53,6 +53,14 @@ {{ $t("general.foods") }} + + + + {{ $globals.icons.household }} + + {{ $t("household.households") }} + +