feat: save default recipe ordering in local storage

This commit is contained in:
Felix Schneider 2025-07-28 14:48:13 +02:00
commit bd5b7762d3
2 changed files with 27 additions and 4 deletions

View file

@ -123,7 +123,7 @@
density="comfortable" density="comfortable"
:prepend-icon="v.icon" :prepend-icon="v.icon"
:title="v.name" :title="v.name"
@click="state.orderBy = v.value" @click="setOrderBy(v.value)"
/> />
</v-list> </v-list>
</v-card> </v-card>
@ -219,7 +219,7 @@ import {
useToolStore, useToolStore,
usePublicToolStore, usePublicToolStore,
} from "~/composables/store"; } from "~/composables/store";
import { useUserSearchQuerySession } from "~/composables/use-users/preferences"; import { useUserSearchQuerySession, useUserSortPreferences } from "~/composables/use-users/preferences";
import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue"; import RecipeCardSection from "~/components/Domain/Recipe/RecipeCardSection.vue";
import type { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe"; import type { IngredientFood, RecipeCategory, RecipeTag, RecipeTool } from "~/lib/api/types/recipe";
import type { NoUndefinedField } from "~/lib/api/types/non-generated"; import type { NoUndefinedField } from "~/lib/api/types/non-generated";
@ -253,6 +253,15 @@ export default defineNuxtComponent({
const route = useRoute(); const route = useRoute();
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || ""); const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
const searchQuerySession = useUserSearchQuerySession(); const searchQuerySession = useUserSearchQuerySession();
const sortPreferences = useUserSortPreferences();
watch(() => state.value.orderBy, (newValue) => {
sortPreferences.value.orderBy = newValue;
});
watch(() => state.value.orderDirection, (newValue) => {
sortPreferences.value.orderDirection = newValue;
});
const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value); const { recipes, appendRecipes, assignSorted, removeRecipe, replaceRecipes } = useLazyRecipes(isOwnGroup.value ? null : groupSlug.value);
const categories = isOwnGroup.value ? useCategoryStore() : usePublicCategoryStore(groupSlug.value); const categories = isOwnGroup.value ? useCategoryStore() : usePublicCategoryStore(groupSlug.value);
@ -325,6 +334,12 @@ export default defineNuxtComponent({
function toggleOrderDirection() { function toggleOrderDirection() {
state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc"; state.value.orderDirection = state.value.orderDirection === "asc" ? "desc" : "asc";
sortPreferences.value.orderDirection = state.value.orderDirection;
}
function setOrderBy(value: string) {
state.value.orderBy = value;
sortPreferences.value.orderBy = value;
} }
function toIDArray(array: { id: string }[]) { function toIDArray(array: { id: string }[]) {
@ -623,6 +638,13 @@ export default defineNuxtComponent({
} }
await hydrateSearch(); await hydrateSearch();
if (!route.query.orderBy) {
state.value.orderBy = sortPreferences.value.orderBy;
}
if (!route.query.orderDirection) {
state.value.orderDirection = sortPreferences.value.orderDirection as "asc" | "desc";
}
await search(); await search();
state.value.ready = true; state.value.ready = true;
}); });
@ -665,6 +687,7 @@ export default defineNuxtComponent({
sortable, sortable,
toggleOrderDirection, toggleOrderDirection,
setOrderBy,
hideKeyboard, hideKeyboard,
input, input,

View file

@ -96,8 +96,8 @@ export function useUserSortPreferences(): Ref<UserRecipePreferences> {
const fromStorage = useLocalStorage( const fromStorage = useLocalStorage(
"recipe-section-preferences", "recipe-section-preferences",
{ {
orderBy: "name", orderBy: "created_at",
orderDirection: "asc", orderDirection: "desc",
filterNull: false, filterNull: false,
sortIcon: $globals.icons.sortAlphabeticalAscending, sortIcon: $globals.icons.sortAlphabeticalAscending,
useMobileCards: false, useMobileCards: false,