mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-24 15:49:42 +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
GitHub
parent
50a92c165c
commit
d6e4829e6f
8 changed files with 247 additions and 42 deletions
|
|
@ -1,22 +1,28 @@
|
|||
<template>
|
||||
<v-list>
|
||||
<v-list-item v-for="recipe in recipes" :key="recipe.id" :to="'/recipe/' + recipe.slug">
|
||||
<v-list-item-avatar>
|
||||
<v-icon class="pa-1 primary" dark> {{ $globals.icons.primary }} </v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>
|
||||
{{ recipe.name }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ recipe.description }}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
<slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
|
||||
</v-list-item>
|
||||
<v-list :class="tile ? 'd-flex flex-wrap background' : 'background'">
|
||||
<v-sheet v-for="recipe, index in recipes" :key="recipe.id" :class="attrs.class.sheet" :style="tile ? 'width: fit-content;' : 'width: 100%;'">
|
||||
<v-list-item :to="'/recipe/' + recipe.slug" :class="attrs.class.listItem">
|
||||
<v-list-item-avatar :class="attrs.class.avatar">
|
||||
<v-icon :class="attrs.class.icon" dark :small="small"> {{ $globals.icons.primary }} </v-icon>
|
||||
</v-list-item-avatar>
|
||||
<v-list-item-content :class="attrs.class.text">
|
||||
<v-list-item-title :class="listItem && listItemDescriptions[index] ? '' : 'pr-4'" :style="attrs.style.text.title">
|
||||
{{ recipe.name }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle v-if="showDescription">{{ recipe.description }}</v-list-item-subtitle>
|
||||
<v-list-item-subtitle v-if="listItem && listItemDescriptions[index]" :style="attrs.style.text.subTitle" v-html="listItemDescriptions[index]"/>
|
||||
</v-list-item-content>
|
||||
<slot :name="'actions-' + recipe.id" :v-bind="{ item: recipe }"> </slot>
|
||||
</v-list-item>
|
||||
</v-sheet>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "@nuxtjs/composition-api";
|
||||
import { computed, defineComponent } from "@nuxtjs/composition-api";
|
||||
import DOMPurify from "dompurify";
|
||||
import { useFraction } from "~/composables/recipes/use-fraction";
|
||||
import { ShoppingListItemOut } from "~/lib/api/types/group";
|
||||
import { RecipeSummary } from "~/lib/api/types/recipe";
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -25,9 +31,118 @@ export default defineComponent({
|
|||
type: Array as () => RecipeSummary[],
|
||||
required: true,
|
||||
},
|
||||
listItem: {
|
||||
type: Object as () => ShoppingListItemOut | undefined,
|
||||
default: undefined,
|
||||
},
|
||||
small: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
tile: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showDescription: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
return {};
|
||||
setup(props) {
|
||||
const { frac } = useFraction();
|
||||
|
||||
const attrs = computed(() => {
|
||||
return props.small ? {
|
||||
class: {
|
||||
sheet: props.tile ? "mb-1 me-1 justify-center align-center" : "mb-1 justify-center align-center",
|
||||
listItem: "px-0",
|
||||
avatar: "ma-0",
|
||||
icon: "ma-0 pa-0 primary",
|
||||
text: "pa-0",
|
||||
},
|
||||
style: {
|
||||
text: {
|
||||
title: "font-size: small;",
|
||||
subTitle: "font-size: x-small;",
|
||||
},
|
||||
},
|
||||
} : {
|
||||
class: {
|
||||
sheet: props.tile ? "mx-1 justify-center align-center" : "mb-1 justify-center align-center",
|
||||
listItem: "px-4",
|
||||
avatar: "",
|
||||
icon: "pa-1 primary",
|
||||
text: "",
|
||||
},
|
||||
style: {
|
||||
text: {
|
||||
title: "",
|
||||
subTitle: "",
|
||||
},
|
||||
},
|
||||
}
|
||||
});
|
||||
|
||||
function sanitizeHTML(rawHtml: string) {
|
||||
return DOMPurify.sanitize(rawHtml, {
|
||||
USE_PROFILES: { html: true },
|
||||
ALLOWED_TAGS: ["strong", "sup"],
|
||||
});
|
||||
}
|
||||
|
||||
const listItemDescriptions = computed<string[]>(() => {
|
||||
if (
|
||||
props.recipes.length === 1 // we don't need to specify details if there's only one recipe ref
|
||||
|| !props.listItem?.recipeReferences
|
||||
|| props.listItem.recipeReferences.length !== props.recipes.length
|
||||
) {
|
||||
return props.recipes.map((_) => "")
|
||||
}
|
||||
|
||||
const listItemDescriptions: string[] = [];
|
||||
for (let i = 0; i < props.recipes.length; i++) {
|
||||
const itemRef = props.listItem?.recipeReferences[i];
|
||||
const quantity = (itemRef.recipeQuantity || 1) * (itemRef.recipeScale || 1);
|
||||
|
||||
let listItemDescription = ""
|
||||
if (props.listItem.unit?.fraction) {
|
||||
const fraction = frac(quantity, 10, true);
|
||||
if (fraction[0] !== undefined && fraction[0] > 0) {
|
||||
listItemDescription += fraction[0];
|
||||
}
|
||||
|
||||
if (fraction[1] > 0) {
|
||||
listItemDescription += ` <sup>${fraction[1]}</sup>⁄<sub>${fraction[2]}</sub>`;
|
||||
}
|
||||
else {
|
||||
listItemDescription = (quantity).toString();
|
||||
}
|
||||
}
|
||||
else {
|
||||
listItemDescription = (Math.round(quantity*100)/100).toString();
|
||||
}
|
||||
|
||||
if (props.listItem.unit) {
|
||||
const unitDisplay = props.listItem.unit.useAbbreviation && props.listItem.unit.abbreviation
|
||||
? props.listItem.unit.abbreviation : props.listItem.unit.name;
|
||||
|
||||
listItemDescription += ` ${unitDisplay}`
|
||||
}
|
||||
|
||||
if (itemRef.recipeNote) {
|
||||
listItemDescription += `, ${itemRef.recipeNote}`
|
||||
}
|
||||
|
||||
listItemDescriptions.push(sanitizeHTML(listItemDescription));
|
||||
}
|
||||
|
||||
return listItemDescriptions;
|
||||
});
|
||||
|
||||
return {
|
||||
attrs,
|
||||
listItemDescriptions,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
};
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue