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,