Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-10-31 02:03:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
boc-the-git
2024-08-10 00:11:54 +10:00
committed by GitHub
parent 37d93d4e4b
commit 66b19eecfb
1 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue
View File

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