diff --git a/frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue b/frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue index d7a57ce8fe35..9209b079cc92 100644 --- a/frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue +++ b/frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue @@ -23,7 +23,7 @@ {{ $t("general.cancel") }}
- +
@@ -132,6 +132,7 @@ import { toRefs } from "@vueuse/core"; import RecipeIngredientListItem from "./RecipeIngredientListItem.vue"; import { useUserApi } from "~/composables/api"; import { alert } from "~/composables/use-toast"; +import { useShoppingListPreferences } from "~/composables/use-users/preferences"; import { ShoppingListSummary } from "~/lib/api/types/group"; import { Recipe, RecipeIngredient } from "~/lib/api/types/recipe"; @@ -178,6 +179,7 @@ export default defineComponent({ setup(props, context) { const { $auth, i18n } = useContext(); const api = useUserApi(); + const preferences = useShoppingListPreferences(); // v-model support const dialog = computed({ @@ -193,11 +195,10 @@ export default defineComponent({ const state = reactive({ shoppingListDialog: true, shoppingListIngredientDialog: false, - showAll: false, }); const shoppingListChoices = computed(() => { - return props.shoppingLists.filter((list) => state.showAll || list.userId === $auth.user?.id); + return props.shoppingLists.filter((list) => preferences.value.viewAllLists || list.userId === $auth.user?.id); }); const recipeIngredientSections = ref([]); @@ -351,6 +352,7 @@ export default defineComponent({ return { dialog, + preferences, shoppingListChoices, ...toRefs(state), addRecipesToList, diff --git a/frontend/composables/use-users/preferences.ts b/frontend/composables/use-users/preferences.ts index c93c5dcb4c01..a6933576fdd8 100644 --- a/frontend/composables/use-users/preferences.ts +++ b/frontend/composables/use-users/preferences.ts @@ -22,6 +22,7 @@ export interface UserRecipePreferences { } export interface UserShoppingListPreferences { + viewAllLists: boolean; viewByLabel: boolean; } @@ -70,6 +71,7 @@ export function useShoppingListPreferences(): Ref { const fromStorage = useLocalStorage( "shopping-list-preferences", { + viewAllLists: false, viewByLabel: false, }, { mergeDefaults: true } diff --git a/frontend/pages/shopping-lists/index.vue b/frontend/pages/shopping-lists/index.vue index 19ac10db8a0e..bde98330a51d 100644 --- a/frontend/pages/shopping-lists/index.vue +++ b/frontend/pages/shopping-lists/index.vue @@ -17,7 +17,7 @@ - + @@ -51,6 +51,7 @@ import { computed, defineComponent, useAsync, useContext, reactive, toRefs, useRoute } from "@nuxtjs/composition-api"; import { useUserApi } from "~/composables/api"; import { useAsyncKey } from "~/composables/use-utils"; +import { useShoppingListPreferences } from "~/composables/use-users/preferences"; export default defineComponent({ middleware: "auth", @@ -59,13 +60,13 @@ export default defineComponent({ const userApi = useUserApi(); const route = useRoute(); const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || ""); + const preferences = useShoppingListPreferences(); const state = reactive({ createName: "", createDialog: false, deleteDialog: false, deleteTarget: "", - showAll: false, }); const shoppingLists = useAsync(async () => { @@ -77,7 +78,7 @@ export default defineComponent({ return []; } - return shoppingLists.value.filter((list) => state.showAll || list.userId === $auth.user?.id); + return shoppingLists.value.filter((list) => preferences.value.viewAllLists || list.userId === $auth.user?.id); }); async function fetchShoppingLists() { @@ -118,6 +119,7 @@ export default defineComponent({ return { ...toRefs(state), groupSlug, + preferences, shoppingListChoices, createOne, deleteOne,