move showAll to user preferences

frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue

@@ -23,7 +23,7 @@
           {{ $t("general.cancel") }}
         </v-btn>
         <div class="d-flex justify-end" style="width: 100%;">
-          <v-checkbox v-model="showAll" hide-details :label="$tc('general.show-all')" class="my-auto mr-4" />
+          <v-checkbox v-model="preferences.viewAllLists" hide-details :label="$tc('general.show-all')" class="my-auto mr-4" />
         </div>
       </template>
     </BaseDialog>
@@ -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<ShoppingListRecipeIngredientSection[]>([]);
@@ -351,6 +352,7 @@ export default defineComponent({
 
     return {
       dialog,
+      preferences,
       shoppingListChoices,
       ...toRefs(state),
       addRecipesToList,

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<UserShoppingListPreferences> {
   const fromStorage = useLocalStorage(
     "shopping-list-preferences",
     {
+      viewAllLists: false,
       viewByLabel: false,
     },
     { mergeDefaults: true }

frontend/pages/shopping-lists/index.vue

@@ -17,7 +17,7 @@
     </BasePageTitle>
 
     <v-container class="d-flex justify-end px-0 pt-0 pb-4">
-      <v-checkbox v-model="showAll" hide-details :label="$tc('general.show-all')" class="my-auto mr-4" />
+      <v-checkbox v-model="preferences.viewAllLists" hide-details :label="$tc('general.show-all')" class="my-auto mr-4" />
       <BaseButton create @click="createDialog = true" />
     </v-container>
 
@@ -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,