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

Merge branch 'mealie-next' into feat--dragable-items-in-ingredient-parser

Browse Source
This commit is contained in:
Kuchenpirat 2024-02-13 18:42:35 +01:00 committed by GitHub
commit 0a446928d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/components/Domain/Recipe/RecipeNutrition.vue
View File

@ -19,11 +19,11 @@
</div> </div>
</v-card-text> </v-card-text>
<v-list v-if="showViewer" dense class="mt-0 pt-0"> <v-list v-if="showViewer" dense class="mt-0 pt-0">
<v-list-item v-for="(item, key, index) in labels" :key="index" style="min-height: 25px" dense> <v-list-item v-for="(item, key, index) in renderedList" :key="index" style="min-height: 25px" dense>
<v-list-item-content> <v-list-item-content>
<v-list-item-title class="pl-4 caption flex row"> <v-list-item-title class="pl-4 caption flex row">
<div>{{ item.label }}</div> <div>{{ item.label }}</div>
<div class="ml-auto mr-1">{{ value[key] }}</div> <div class="ml-auto mr-1">{{ item.value }}</div>
<div>{{ item.suffix }}</div> <div>{{ item.suffix }}</div>
</v-list-item-title> </v-list-item-title>
</v-list-item-content> </v-list-item-content>
@ -37,6 +37,14 @@
import { computed, defineComponent, useContext } from "@nuxtjs/composition-api"; import { computed, defineComponent, useContext } from "@nuxtjs/composition-api";
import { Nutrition } from "~/lib/api/types/recipe"; import { Nutrition } from "~/lib/api/types/recipe";
type NutritionLabelType = {
[key: string]: {
label: string;
suffix: string;
value?: string;
};
};
export default defineComponent({ export default defineComponent({
props: { props: {
value: { value: {
@ -50,34 +58,34 @@ export default defineComponent({
}, },
setup(props, context) { setup(props, context) {
const { i18n } = useContext(); const { i18n } = useContext();
const labels = { const labels = <NutritionLabelType>{
calories: { calories: {
label: i18n.t("recipe.calories"), label: i18n.tc("recipe.calories"),
suffix: i18n.t("recipe.calories-suffix"), suffix: i18n.tc("recipe.calories-suffix"),
}, },
fatContent: { fatContent: {
label: i18n.t("recipe.fat-content"), label: i18n.tc("recipe.fat-content"),
suffix: i18n.t("recipe.grams"), suffix: i18n.tc("recipe.grams"),
}, },
fiberContent: { fiberContent: {
label: i18n.t("recipe.fiber-content"), label: i18n.tc("recipe.fiber-content"),
suffix: i18n.t("recipe.grams"), suffix: i18n.tc("recipe.grams"),
}, },
proteinContent: { proteinContent: {
label: i18n.t("recipe.protein-content"), label: i18n.tc("recipe.protein-content"),
suffix: i18n.t("recipe.grams"), suffix: i18n.tc("recipe.grams"),
}, },
sodiumContent: { sodiumContent: {
label: i18n.t("recipe.sodium-content"), label: i18n.tc("recipe.sodium-content"),
suffix: i18n.t("recipe.milligrams"), suffix: i18n.tc("recipe.milligrams"),
}, },
sugarContent: { sugarContent: {
label: i18n.t("recipe.sugar-content"), label: i18n.tc("recipe.sugar-content"),
suffix: i18n.t("recipe.grams"), suffix: i18n.tc("recipe.grams"),
}, },
carbohydrateContent: { carbohydrateContent: {
label: i18n.t("recipe.carbohydrate-content"), label: i18n.tc("recipe.carbohydrate-content"),
suffix: i18n.t("recipe.grams"), suffix: i18n.tc("recipe.grams"),
}, },
}; };
const valueNotNull = computed(() => { const valueNotNull = computed(() => {
@ -96,11 +104,25 @@ export default defineComponent({
context.emit("input", { ...props.value, [key]: event }); context.emit("input", { ...props.value, [key]: event });
} }
// Build a new list that only contains nutritional information that has a value
const renderedList = computed(() => {
return Object.entries(labels).reduce((item: NutritionLabelType, [key, label]) => {
if (props.value[key]?.trim()) {
item[key] = {
...label,
value: props.value[key],
};
}
return item;
}, {});
});
return { return {
labels, labels,
valueNotNull, valueNotNull,
showViewer, showViewer,
updateValue, updateValue,
renderedList,
}; };
}, },
}); });