1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-25 08:09:41 +02:00

feat: Display Shopping List Item Recipe Refs (#2501)

* added recipe ref display to shopping list items

* added backend support for recipe notes

* added recipe note to item recipe ref display

* fixed note merge bug with 3+ notes

* tweak display

* lint

* updated alembic refs

---------

Co-authored-by: Hayden <64056131+hay-kot@users.noreply.github.com>
This commit is contained in:
Michael Genson 2023-08-21 12:18:37 -05:00 committed by GitHub
parent 50a92c165c
commit d6e4829e6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 247 additions and 42 deletions

View file

@ -26,11 +26,37 @@
<div v-if="!listItem.checked" style="min-width: 72px">
<v-menu offset-x left min-width="125px">
<template #activator="{ on, attrs }">
<v-tooltip
v-if="recipeList && recipeList.length"
open-delay="200"
transition="slide-x-reverse-transition"
dense
right
content-class="text-caption"
>
<template #activator="{ on: onBtn, attrs: attrsBtn }">
<v-btn small class="ml-2" icon @click="displayRecipeRefs = !displayRecipeRefs" v-bind="attrsBtn" v-on="onBtn">
<v-icon>
{{ $globals.icons.potSteam }}
</v-icon>
</v-btn>
</template>
<span>Toggle Recipes</span>
</v-tooltip>
<!-- Dummy button so the spacing is consistent when labels are enabled -->
<v-btn v-else small class="ml-2" icon disabled>
</v-btn>
<v-btn small class="ml-2 handle" icon v-bind="attrs" v-on="on">
<v-icon>
{{ $globals.icons.arrowUpDown }}
</v-icon>
</v-btn>
<v-btn small class="ml-2" icon @click="toggleEdit(true)">
<v-icon>
{{ $globals.icons.edit }}
</v-icon>
</v-btn>
</template>
<v-list dense>
<v-list-item v-for="action in contextMenu" :key="action.event" dense @click="contextHandler(action.event)">
@ -38,14 +64,14 @@
</v-list-item>
</v-list>
</v-menu>
<v-btn small class="ml-2" icon @click="toggleEdit(true)">
<v-icon>
{{ $globals.icons.edit }}
</v-icon>
</v-btn>
</div>
</v-col>
</v-row>
<v-row v-if="!listItem.checked && recipeList && recipeList.length && displayRecipeRefs" no-gutters class="mb-2">
<v-col cols="auto" style="width: 100%;">
<RecipeList :recipes="recipeList" :list-item="listItem" small tile />
</v-col>
</v-row>
<v-row v-if="listItem.checked" no-gutters class="mb-2">
<v-col cols="auto">
<div class="text-caption font-weight-light font-italic">
@ -75,7 +101,8 @@ import ShoppingListItemEditor from "./ShoppingListItemEditor.vue";
import MultiPurposeLabel from "./MultiPurposeLabel.vue";
import { ShoppingListItemOut } from "~/lib/api/types/group";
import { MultiPurposeLabelOut, MultiPurposeLabelSummary } from "~/lib/api/types/labels";
import { IngredientFood, IngredientUnit } from "~/lib/api/types/recipe";
import { IngredientFood, IngredientUnit, RecipeSummary } from "~/lib/api/types/recipe";
import RecipeList from "~/components/Domain/Recipe/RecipeList.vue";
interface actions {
text: string;
@ -105,10 +132,15 @@ export default defineComponent({
type: Array as () => IngredientFood[],
required: true,
},
recipes: {
type: Map<string, RecipeSummary>,
default: undefined,
}
},
setup(props, context) {
const { i18n } = useContext();
const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "6" : "8");
const displayRecipeRefs = ref(false);
const itemLabelCols = ref<string>(props.value.checked ? "auto" : props.showLabel ? "4" : "6");
const contextMenu: actions[] = [
{
@ -190,16 +222,34 @@ export default defineComponent({
return undefined;
});
const recipeList = computed<RecipeSummary[]>(() => {
const recipeList: RecipeSummary[] = [];
if (!listItem.value.recipeReferences) {
return recipeList;
}
listItem.value.recipeReferences.forEach((ref) => {
const recipe = props.recipes.get(ref.recipeId)
if (recipe) {
recipeList.push(recipe);
}
});
return recipeList;
});
return {
updatedLabels,
save,
contextHandler,
displayRecipeRefs,
edit,
contextMenu,
itemLabelCols,
listItem,
localListItem,
label,
recipeList,
toggleEdit,
};
},