feat: unify recipe card sections (#1560)

* removed unused import

* moved categories/tags to new recipe card section

* nuked old frontend sort code
minor refactoring

* bug fixes

* added backend recipes filter for tools

* removed debug log

* removed unusued props

* fixed sort for recipes by tool

* added tests for getting recipes by tool
This commit is contained in:
Michael Genson 2022-08-20 13:59:49 -05:00 committed by GitHub
parent 85448b8a18
commit aaeb162dd5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 231 additions and 232 deletions

View file

@ -15,49 +15,7 @@
{{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
</v-btn>
<v-menu v-if="$listeners.sort" offset-y left>
<template #activator="{ on, attrs }">
<v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" :loading="sortLoading" 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 @click="sortRecipesFrontend(EVENTS.az)">
<v-icon left>
{{ $globals.icons.orderAlphabeticalAscending }}
</v-icon>
<v-list-item-title>{{ $t("general.sort-alphabetically") }}</v-list-item-title>
</v-list-item>
<v-list-item @click="sortRecipesFrontend(EVENTS.rating)">
<v-icon left>
{{ $globals.icons.star }}
</v-icon>
<v-list-item-title>{{ $t("general.rating") }}</v-list-item-title>
</v-list-item>
<v-list-item @click="sortRecipesFrontend(EVENTS.created)">
<v-icon left>
{{ $globals.icons.newBox }}
</v-icon>
<v-list-item-title>{{ $t("general.created") }}</v-list-item-title>
</v-list-item>
<v-list-item @click="sortRecipesFrontend(EVENTS.updated)">
<v-icon left>
{{ $globals.icons.update }}
</v-icon>
<v-list-item-title>{{ $t("general.updated") }}</v-list-item-title>
</v-list-item>
<v-list-item @click="sortRecipesFrontend(EVENTS.shuffle)">
<v-icon left>
{{ $globals.icons.shuffleVariant }}
</v-icon>
<v-list-item-title>{{ $t("general.shuffle") }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-menu v-if="$listeners.sortRecipes" offset-y left>
<v-menu offset-y left>
<template #activator="{ on, attrs }">
<v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" :loading="sortLoading" v-on="on">
<v-icon :left="!$vuetify.breakpoint.xsOnly">
@ -147,12 +105,10 @@
</v-col>
</v-row>
</div>
<div v-if="usePagination">
<v-card v-intersect="infiniteScroll"></v-card>
<v-fade-transition>
<AppLoader v-if="loading" :loading="loading" />
</v-fade-transition>
</div>
<v-card v-intersect="infiniteScroll"></v-card>
<v-fade-transition>
<AppLoader v-if="loading" :loading="loading" />
</v-fade-transition>
</div>
</template>
@ -172,11 +128,10 @@ import { useThrottleFn } from "@vueuse/core";
import RecipeCard from "./RecipeCard.vue";
import RecipeCardMobile from "./RecipeCardMobile.vue";
import { useAsyncKey } from "~/composables/use-utils";
import { useLazyRecipes, useSorter } from "~/composables/recipes";
import { useLazyRecipes } from "~/composables/recipes";
import { Recipe } from "~/types/api-types/recipe";
import { useUserSortPreferences } from "~/composables/use-users/preferences";
const SORT_EVENT = "sort";
const REPLACE_RECIPES_EVENT = "replaceRecipes";
const APPEND_RECIPES_EVENT = "appendRecipes";
@ -206,16 +161,22 @@ export default defineComponent({
type: Array as () => Recipe[],
default: () => [],
},
usePagination: {
type: Boolean,
default: false,
categorySlug: {
type: String,
default: null,
},
tagSlug: {
type: String,
default: null,
},
toolSlug: {
type: String,
default: null,
},
},
setup(props, context) {
const preferences = useUserSortPreferences();
const utils = useSorter();
const EVENTS = {
az: "az",
rating: "rating",
@ -252,26 +213,30 @@ export default defineComponent({
const hasMore = ref(true);
const ready = ref(false);
const loading = ref(false);
const category = ref<string>(props.categorySlug);
const tag = ref<string>(props.tagSlug);
const tool = ref<string>(props.toolSlug);
const { fetchMore } = useLazyRecipes();
onMounted(async () => {
if (props.usePagination) {
const newRecipes = await fetchMore(
page.value,
const newRecipes = 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.value*2,
preferences.value.orderBy,
preferences.value.orderDirection
);
// 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.value*2,
preferences.value.orderBy,
preferences.value.orderDirection,
category.value,
tag.value,
tool.value,
);
// since we doubled the first call, we also need to advance the page
page.value = page.value + 1;
// since we doubled the first call, we also need to advance the page
page.value = page.value + 1;
context.emit(REPLACE_RECIPES_EVENT, newRecipes);
ready.value = true;
}
context.emit(REPLACE_RECIPES_EVENT, newRecipes);
ready.value = true;
});
const infiniteScroll = useThrottleFn(() => {
@ -287,7 +252,10 @@ export default defineComponent({
page.value,
perPage.value,
preferences.value.orderBy,
preferences.value.orderDirection
preferences.value.orderDirection,
category.value,
tag.value,
tool.value,
);
if (!newRecipes.length) {
hasMore.value = false;
@ -299,12 +267,6 @@ export default defineComponent({
}, useAsyncKey());
}, 500);
/**
* sortRecipes helps filter using the API. This will eventually replace the sortRecipesFrontend function which pulls all recipes
* (without pagination) and does the sorting in the frontend.
* TODO: remove sortRecipesFrontend and remove duplicate "sortRecipes" section in the template (above)
* @param sortType
*/
function sortRecipes(sortType: string) {
if (state.sortLoading || loading.value) {
return;
@ -351,7 +313,10 @@ export default defineComponent({
page.value,
perPage.value,
preferences.value.orderBy,
preferences.value.orderDirection
preferences.value.orderDirection,
category.value,
tag.value,
tool.value,
);
context.emit(REPLACE_RECIPES_EVENT, newRecipes);
@ -360,33 +325,6 @@ export default defineComponent({
}, useAsyncKey());
}
function sortRecipesFrontend(sortType: string) {
state.sortLoading = true;
const sortTarget = [...props.recipes];
switch (sortType) {
case EVENTS.az:
utils.sortAToZ(sortTarget);
break;
case EVENTS.rating:
utils.sortByRating(sortTarget);
break;
case EVENTS.created:
utils.sortByCreated(sortTarget);
break;
case EVENTS.updated:
utils.sortByUpdated(sortTarget);
break;
case EVENTS.shuffle:
utils.shuffle(sortTarget);
break;
default:
console.log("Unknown Event", sortType);
return;
}
context.emit(SORT_EVENT, sortTarget);
state.sortLoading = false;
}
function toggleMobileCards() {
preferences.value.useMobileCards = !preferences.value.useMobileCards;
}
@ -400,7 +338,6 @@ export default defineComponent({
navigateRandom,
preferences,
sortRecipes,
sortRecipesFrontend,
toggleMobileCards,
useMobileCards,
};

View file

@ -1,6 +1,6 @@
export { useFraction } from "./use-fraction";
export { useRecipe } from "./use-recipe";
export { useRecipes, recentRecipes, allRecipes, useLazyRecipes, useSorter } from "./use-recipes";
export { useRecipes, recentRecipes, allRecipes, useLazyRecipes } from "./use-recipes";
export { parseIngredientText } from "./use-recipe-ingredients";
export { useRecipeSearch } from "./use-recipe-search";
export { useTools } from "./use-recipe-tools";

View file

@ -6,69 +6,46 @@ import { Recipe } from "~/types/api-types/recipe";
export const allRecipes = ref<Recipe[]>([]);
export const recentRecipes = ref<Recipe[]>([]);
const rand = (n: number) => Math.floor(Math.random() * n);
function swap(t: Array<unknown>, i: number, j: number) {
const q = t[i];
t[i] = t[j];
t[j] = q;
return t;
}
export const useSorter = () => {
function sortAToZ(list: Array<Recipe>) {
list.sort((a, b) => {
const textA: string = a.name?.toUpperCase() ?? "";
const textB: string = b.name?.toUpperCase() ?? "";
return textA < textB ? -1 : textA > textB ? 1 : 0;
});
}
function sortByCreated(list: Array<Recipe>) {
list.sort((a, b) => ((a.dateAdded ?? "") > (b.dateAdded ?? "") ? -1 : 1));
}
function sortByUpdated(list: Array<Recipe>) {
list.sort((a, b) => ((a.dateUpdated ?? "") > (b.dateUpdated ?? "") ? -1 : 1));
}
function sortByRating(list: Array<Recipe>) {
list.sort((a, b) => ((a.rating ?? 0) > (b.rating ?? 0) ? -1 : 1));
}
function randomRecipe(list: Array<Recipe>): Recipe {
return list[Math.floor(Math.random() * list.length)];
}
function shuffle(list: Array<Recipe>) {
let last = list.length;
let n;
while (last > 0) {
n = rand(last);
swap(list, n, --last);
}
}
return {
sortAToZ,
sortByCreated,
sortByUpdated,
sortByRating,
randomRecipe,
shuffle,
};
};
export const useLazyRecipes = function () {
const api = useUserApi();
const recipes = ref<Recipe[]>([]);
async function fetchMore(page: number, perPage: number, orderBy: string | null = null, orderDirection = "desc") {
const { data } = await api.recipes.getAll(page, perPage, { orderBy, orderDirection });
async function fetchMore(page: number, perPage: number, orderBy: string | null = null, orderDirection = "desc", category: string | null = null, tag: string | null = null, tool: string | null = null) {
const { data } = await api.recipes.getAll(page, perPage, { orderBy, orderDirection, "categories": category, "tags": tag, "tools": tool });
return data ? data.items : [];
}
function appendRecipes(val: Array<Recipe>) {
val.forEach((recipe) => {
recipes.value.push(recipe);
});
}
function assignSorted(val: Array<Recipe>) {
recipes.value = val;
}
function removeRecipe(slug: string) {
for (let i = 0; i < recipes?.value?.length; i++) {
if (recipes?.value[i].slug === slug) {
recipes?.value.splice(i, 1);
break;
}
}
}
function replaceRecipes(val: Array<Recipe>) {
recipes.value = val;
}
return {
recipes,
fetchMore,
appendRecipes,
assignSorted,
removeRecipe,
replaceRecipes
};
};

View file

@ -4,7 +4,6 @@
:icon="$globals.icons.primary"
:title="$t('page.all-recipes')"
:recipes="recipes"
:use-pagination="true"
@sortRecipes="assignSorted"
@replaceRecipes="replaceRecipes"
@appendRecipes="appendRecipes"
@ -17,36 +16,11 @@
import { defineComponent } from "@nuxtjs/composition-api";
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
import { useLazyRecipes } from "~/composables/recipes";
import { Recipe } from "~/types/api-types/recipe";
export default defineComponent({
components: { RecipeCardSection },
setup() {
const { recipes, fetchMore } = useLazyRecipes();
function appendRecipes(val: Array<Recipe>) {
val.forEach((recipe) => {
recipes.value.push(recipe);
});
}
function assignSorted(val: Array<Recipe>) {
recipes.value = val;
}
function removeRecipe(slug: string) {
for (let i = 0; i < recipes?.value?.length; i++) {
if (recipes?.value[i].slug === slug) {
recipes?.value.splice(i, 1);
break;
}
}
}
function replaceRecipes(val: Array<Recipe>) {
recipes.value = val;
}
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
return { appendRecipes, assignSorted, recipes, removeRecipe, replaceRecipes };
},
head() {

View file

@ -4,8 +4,12 @@
v-if="category"
:icon="$globals.icons.tags"
:title="category.name"
:recipes="category.recipes"
@sort="assignSorted"
:recipes="recipes"
:category-slug="category.slug"
@sortRecipes="assignSorted"
@replaceRecipes="replaceRecipes"
@appendRecipes="appendRecipes"
@delete="removeRecipe"
>
<template #title>
<v-btn icon class="mr-1">
@ -54,13 +58,15 @@
<script lang="ts">
import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
import { useLazyRecipes } from "~/composables/recipes";
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
import { useUserApi } from "~/composables/api";
import { Recipe } from "~/types/api-types/recipe";
export default defineComponent({
components: { RecipeCardSection },
setup() {
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
const api = useUserApi();
const route = useRoute();
const router = useRouter();
@ -105,6 +111,11 @@ export default defineComponent({
reset,
...toRefs(state),
updateCategory,
appendRecipes,
assignSorted,
recipes,
removeRecipe,
replaceRecipes,
};
},
head() {
@ -112,12 +123,5 @@ export default defineComponent({
title: this.$t("category.categories") as string,
};
},
methods: {
assignSorted(val: Array<Recipe>) {
if (this.category) {
this.category.recipes = val;
}
},
},
});
</script>

View file

@ -1,11 +1,15 @@
<template>
<v-container>
<RecipeCardSection
v-if="tags"
v-if="tag"
:icon="$globals.icons.tags"
:title="tags.name"
:recipes="tags.recipes"
@sort="assignSorted"
:title="tag.name"
:recipes="recipes"
:tag-slug="tag.slug"
@sortRecipes="assignSorted"
@replaceRecipes="replaceRecipes"
@appendRecipes="appendRecipes"
@delete="removeRecipe"
>
<template #title>
<v-btn icon class="mr-1">
@ -16,7 +20,7 @@
<template v-if="edit">
<v-text-field
v-model="tags.name"
v-model="tag.name"
autofocus
single-line
dense
@ -41,7 +45,7 @@
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-toolbar-title v-bind="attrs" style="cursor: pointer" class="headline" v-on="on" @click="edit = true">
{{ tags.name }}
{{ tag.name }}
</v-toolbar-title>
</template>
<span> Click to Edit </span>
@ -54,13 +58,15 @@
<script lang="ts">
import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
import { useLazyRecipes } from "~/composables/recipes";
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
import { useUserApi } from "~/composables/api";
import { Recipe } from "~/types/api-types/recipe";
export default defineComponent({
components: { RecipeCardSection },
setup() {
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
const api = useUserApi();
const route = useRoute();
const router = useRouter();
@ -71,7 +77,7 @@ export default defineComponent({
edit: false,
});
const tags = useAsync(async () => {
const tag = useAsync(async () => {
const { data } = await api.tags.bySlug(slug);
if (data) {
state.initialValue = data.name;
@ -82,18 +88,18 @@ export default defineComponent({
function reset() {
state.edit = false;
if (tags.value) {
tags.value.name = state.initialValue;
if (tag.value) {
tag.value.name = state.initialValue;
}
}
async function updateTags() {
state.edit = false;
if (!tags.value) {
if (!tag.value) {
return;
}
const { data } = await api.tags.updateOne(tags.value.id, tags.value);
const { data } = await api.tags.updateOne(tag.value.id, tag.value);
if (data) {
router.push("/recipes/tags/" + data.slug);
@ -101,10 +107,15 @@ export default defineComponent({
}
return {
tags,
tag,
reset,
...toRefs(state),
updateTags,
appendRecipes,
assignSorted,
recipes,
removeRecipe,
replaceRecipes,
};
},
head() {
@ -112,12 +123,5 @@ export default defineComponent({
title: this.$t("tag.tags") as string,
};
},
methods: {
assignSorted(val: Array<Recipe>) {
if (this.tags) {
this.tags.recipes = val;
}
},
},
});
</script>

View file

@ -1,6 +1,16 @@
<template>
<v-container>
<RecipeCardSection v-if="tools" :title="tools.name" :recipes="tools.recipes" @sort="assignSorted">
<RecipeCardSection
v-if="tool"
:icon="$globals.icons.potSteam"
:title="tool.name"
:recipes="recipes"
:tool-slug="tool.slug"
@sortRecipes="assignSorted"
@replaceRecipes="replaceRecipes"
@appendRecipes="appendRecipes"
@delete="removeRecipe"
>
<template #title>
<v-btn icon class="mr-1">
<v-icon dark large @click="reset">
@ -10,7 +20,7 @@
<template v-if="edit">
<v-text-field
v-model="tools.name"
v-model="tool.name"
autofocus
single-line
dense
@ -35,7 +45,7 @@
<v-tooltip top>
<template #activator="{ on, attrs }">
<v-toolbar-title v-bind="attrs" style="cursor: pointer" class="headline" v-on="on" @click="edit = true">
{{ tools.name }}
{{ tool.name }}
</v-toolbar-title>
</template>
<span> Click to Edit </span>
@ -48,13 +58,15 @@
<script lang="ts">
import { defineComponent, useAsync, useRoute, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
import { useLazyRecipes } from "~/composables/recipes";
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
import { useUserApi } from "~/composables/api";
import { Recipe } from "~/types/api-types/recipe";
export default defineComponent({
components: { RecipeCardSection },
setup() {
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes();
const api = useUserApi();
const route = useRoute();
const router = useRouter();
@ -65,7 +77,7 @@ export default defineComponent({
edit: false,
});
const tools = useAsync(async () => {
const tool = useAsync(async () => {
const { data } = await api.tools.bySlug(slug);
if (data) {
state.initialValue = data.name;
@ -76,18 +88,18 @@ export default defineComponent({
function reset() {
state.edit = false;
if (tools.value) {
tools.value.name = state.initialValue;
if (tool.value) {
tool.value.name = state.initialValue;
}
}
async function updateTools() {
state.edit = false;
if (!tools.value) {
if (!tool.value) {
return;
}
const { data } = await api.tools.updateOne(tools.value.id, tools.value);
const { data } = await api.tools.updateOne(tool.value.id, tool.value);
if (data) {
router.push("/recipes/tools/" + data.slug);
@ -95,10 +107,15 @@ export default defineComponent({
}
return {
tools,
tool,
reset,
...toRefs(state),
updateTools,
appendRecipes,
assignSorted,
recipes,
removeRecipe,
replaceRecipes,
};
},
head() {
@ -106,12 +123,5 @@ export default defineComponent({
title: this.$t("tool.tools") as string,
};
},
methods: {
assignSorted(val: Array<Recipe>) {
if (this.tools) {
this.tools.recipes = val;
}
},
},
});
</script>

View file

@ -136,6 +136,7 @@ class RepositoryRecipes(RepositoryGeneric[Recipe, RecipeModel]):
load_food=False,
categories: Optional[list[UUID4 | str]] = None,
tags: Optional[list[UUID4 | str]] = None,
tools: Optional[list[UUID4 | str]] = None,
) -> RecipePagination:
q = self.session.query(self.model)
@ -169,6 +170,14 @@ class RepositoryRecipes(RepositoryGeneric[Recipe, RecipeModel]):
else:
q = q.filter(RecipeModel.tags.any(Tag.slug == tag))
if tools:
for tool in tools:
if isinstance(tool, UUID):
q = q.filter(RecipeModel.tools.any(Tool.id == tool))
else:
q = q.filter(RecipeModel.tools.any(Tool.slug == tool))
q, count, total_pages = self.add_pagination_to_query(q, pagination)
try:

View file

@ -213,12 +213,14 @@ class RecipeController(BaseRecipeController):
q: RecipePaginationQuery = Depends(RecipePaginationQuery),
categories: Optional[list[UUID4 | str]] = Query(None),
tags: Optional[list[UUID4 | str]] = Query(None),
tools: Optional[list[UUID4 | str]] = Query(None),
):
response = self.repo.page_all(
pagination=q,
load_food=q.load_food,
categories=categories,
tags=tags,
tools=tools,
)
response.set_pagination_guides(router.url_path_for("get_all"), q.dict())

View file

@ -4,6 +4,7 @@ from mealie.repos.repository_factory import AllRepositories
from mealie.repos.repository_recipes import RepositoryRecipes
from mealie.schema.recipe.recipe import Recipe, RecipeCategory, RecipePaginationQuery, RecipeSummary
from mealie.schema.recipe.recipe_category import CategoryOut, CategorySave, TagSave
from mealie.schema.recipe.recipe_tool import RecipeToolSave
from tests.utils.factories import random_string
from tests.utils.fixture_schemas import TestUser
@ -276,3 +277,84 @@ def test_recipe_repo_pagination_by_tags(database: AllRepositories, unique_user:
tag_ids = [tag.id for tag in recipe_summary.tags]
for tag in created_tags:
assert tag.id in tag_ids
def test_recipe_repo_pagination_by_tools(database: AllRepositories, unique_user: TestUser):
slug1, slug2 = [random_string(10) for _ in range(2)]
tools = [
RecipeToolSave(group_id=unique_user.group_id, name=slug1, slug=slug1),
RecipeToolSave(group_id=unique_user.group_id, name=slug2, slug=slug2),
]
created_tools = [database.tools.create(tool) for tool in tools]
# Bootstrap the database with recipes
recipes = []
for i in range(10):
# None of the tools
recipes.append(
Recipe(
user_id=unique_user.user_id,
group_id=unique_user.group_id,
name=random_string(),
)
)
# Only one of the tools
recipes.append(
Recipe(
user_id=unique_user.user_id,
group_id=unique_user.group_id,
name=random_string(),
tools=[created_tools[i % 2]],
),
)
# Both of the tools
recipes.append(
Recipe(
user_id=unique_user.user_id,
group_id=unique_user.group_id,
name=random_string(),
tools=created_tools,
)
)
for recipe in recipes:
database.recipes.create(recipe)
pagination_query = RecipePaginationQuery(
page=1,
per_page=-1,
)
# Get all recipes with only one tool by UUID
tool_id = created_tools[0].id
recipes_with_one_tool = database.recipes.page_all(pagination_query, tools=[tool_id]).items
assert len(recipes_with_one_tool) == 15
for recipe_summary in recipes_with_one_tool:
tool_ids = [tool.id for tool in recipe_summary.tools]
assert tool_id in tool_ids
# Get all recipes with only one tool by slug
tool_slug = created_tools[1].slug
recipes_with_one_tool = database.recipes.page_all(pagination_query, tools=[tool_slug]).items
assert len(recipes_with_one_tool) == 15
for recipe_summary in recipes_with_one_tool:
tool_slugs = [tool.slug for tool in recipe_summary.tools]
assert tool_slug in tool_slugs
# Get all recipes with both tools
recipes_with_both_tools = database.recipes.page_all(
pagination_query, tools=[tool.id for tool in created_tools]
).items
assert len(recipes_with_both_tools) == 10
for recipe_summary in recipes_with_both_tools:
tool_ids = [tool.id for tool in recipe_summary.tools]
for tool in created_tools:
assert tool.id in tool_ids