feat: If there's only one shopping list, navigate directly to it (#3958)

frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="dialog">
-    <BaseDialog v-if="shoppingListDialog" v-model="dialog" :title="$t('recipe.add-to-list')" :icon="$globals.icons.cartCheck">
+    <BaseDialog v-if="shoppingListDialog && ready" v-model="dialog" :title="$t('recipe.add-to-list')" :icon="$globals.icons.cartCheck">
       <v-card-text>
         <v-card
           v-for="list in shoppingListChoices"
@@ -23,7 +23,7 @@
           {{ $t("general.cancel") }}
         </v-btn>
         <div class="d-flex justify-end" style="width: 100%;">
-          <v-checkbox v-model="preferences.viewAllLists" 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" @click="setShowAllToggled()" />
         </div>
       </template>
     </BaseDialog>
@@ -127,14 +127,14 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, reactive, ref, useContext } from "@nuxtjs/composition-api";
-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";
+  import { computed, defineComponent, reactive, ref, useContext, watchEffect } from "@nuxtjs/composition-api"
+  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"
 
 export interface RecipeWithScale extends Recipe {
   scale: number;
@@ -180,6 +180,7 @@ export default defineComponent({
     const { $auth, i18n } = useContext();
     const api = useUserApi();
     const preferences = useShoppingListPreferences();
+    const ready = ref(false);
 
     // v-model support
     const dialog = computed({
@@ -195,6 +196,7 @@ export default defineComponent({
     const state = reactive({
       shoppingListDialog: true,
       shoppingListIngredientDialog: false,
+      shoppingListShowAllToggled: false,
     });
 
     const shoppingListChoices = computed(() => {
@@ -204,6 +206,16 @@ export default defineComponent({
     const recipeIngredientSections = ref<ShoppingListRecipeIngredientSection[]>([]);
     const selectedShoppingList = ref<ShoppingListSummary | null>(null);
 
+    watchEffect(
+      () => {
+        if (shoppingListChoices.value.length === 1 && !state.shoppingListShowAllToggled) {
+          openShoppingListIngredientDialog(shoppingListChoices.value[0]);
+        } else {
+          ready.value = true;
+        }
+      },
+    );
+
     async function consolidateRecipesIntoSections(recipes: RecipeWithScale[]) {
       const recipeSectionMap = new Map<string, ShoppingListRecipeIngredientSection>();
       for (const recipe of recipes) {
@@ -285,6 +297,7 @@ export default defineComponent({
     function initState() {
       state.shoppingListDialog = true;
       state.shoppingListIngredientDialog = false;
+      state.shoppingListShowAllToggled = false;
       recipeIngredientSections.value = [];
       selectedShoppingList.value = null;
     }
@@ -302,6 +315,10 @@ export default defineComponent({
       state.shoppingListIngredientDialog = true;
     }
 
+    function setShowAllToggled() {
+      state.shoppingListShowAllToggled = true;
+    }
+
     function bulkCheckIngredients(value = true) {
       recipeIngredientSections.value.forEach((recipeSection) => {
         recipeSection.ingredientSections.forEach((ingSection) => {
@@ -363,11 +380,13 @@ export default defineComponent({
     return {
       dialog,
       preferences,
+      ready,
       shoppingListChoices,
       ...toRefs(state),
       addRecipesToList,
       bulkCheckIngredients,
       openShoppingListIngredientDialog,
+      setShowAllToggled,
       recipeIngredientSections,
       selectedShoppingList,
     }