Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-19 05:09:40 +02:00
Code Issues Releases Activity

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

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

147
frontend/components/Domain/Recipe/RecipeList.vue
View file

@ -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>&frasl;<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>