Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

replace v-for/v-if with computed ref

Browse Source
This commit is contained in:
Michael Genson 2024-02-23 19:22:39 +00:00
parent ae8ea16dab
commit aa4527e5f7
2 changed files with 18 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,8 +3,7 @@
<BaseDialog v-if="shoppingListDialog" v-model="dialog" :title="$t('recipe.add-to-list')" :icon="$globals.icons.cartCheck">
<v-card-text>
<v-card
v-for="list in shoppingLists"
v-if="showAll || $auth.user && $auth.user.id == list.userId"
v-for="list in shoppingListChoices"
:key="list.id"
hover
class="my-2 left-border"
@ -177,7 +176,7 @@ export default defineComponent({
},
},
setup(props, context) {
const { i18n } = useContext();
const { $auth, i18n } = useContext();
const api = useUserApi();
// v-model support
@ -197,6 +196,10 @@ export default defineComponent({
showAll: false,
});
const shoppingListChoices = computed(() => {
return props.shoppingLists.filter((list) => state.showAll || list.userId === $auth.user?.id);
});
const recipeIngredientSections = ref<ShoppingListRecipeIngredientSection[]>([]);
const selectedShoppingList = ref<ShoppingListSummary | null>(null);
@ -348,6 +351,7 @@ export default defineComponent({
return {
dialog,
shoppingListChoices,
...toRefs(state),
addRecipesToList,
bulkCheckIngredients,

15
frontend/pages/shopping-lists/index.vue
View File

@ -1,5 +1,5 @@
<template>
<v-container v-if="shoppingLists" class="narrow-container">
<v-container v-if="shoppingListChoices" class="narrow-container">
<BaseDialog v-model="createDialog" :title="$tc('shopping-list.create-shopping-list')" @submit="createOne">
<v-card-text>
<v-text-field v-model="createName" autofocus :label="$t('shopping-list.new-list')"> </v-text-field>
@ -23,8 +23,7 @@
<section>
<v-card
v-for="list in shoppingLists"
v-if="showAll || ($auth.user && $auth.user.id == list.userId)"
v-for="list in shoppingListChoices"
:key="list.id"
class="my-2 left-border"
:to="`/shopping-lists/${list.id}`"
@ -73,6 +72,14 @@ export default defineComponent({
return await fetchShoppingLists();
}, useAsyncKey());
const shoppingListChoices = computed(() => {
if (!shoppingLists.value) {
return [];
}
return shoppingLists.value.filter((list) => state.showAll || list.userId === $auth.user?.id);
});
async function fetchShoppingLists() {
const { data } = await userApi.shopping.lists.getAll(1, -1, { orderBy: "name", orderDirection: "asc" });
@ -111,7 +118,7 @@ export default defineComponent({
return {
...toRefs(state),
groupSlug,
shoppingLists,
shoppingListChoices,
createOne,
deleteOne,
openDelete,