58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
import MacroBadge from '@/components/common/MacroBadge.vue'
|
|
import type { Meal, MealType } from '@/types/domain'
|
|
|
|
const props = defineProps<{
|
|
mealType: MealType
|
|
label: string
|
|
mealOptions: Array<{ value: number; label: string }>
|
|
selectedMealId: number | null
|
|
meal: Meal | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(event: 'select-meal', mealType: MealType, mealId: number | null): void
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const selectedValue = computed({
|
|
get: () => (props.selectedMealId === null ? '' : String(props.selectedMealId)),
|
|
set: (value: string) => {
|
|
if (value.length <= 0) {
|
|
emit('select-meal', props.mealType, null)
|
|
return
|
|
}
|
|
emit('select-meal', props.mealType, Number(value))
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<section class="card day-meal-card">
|
|
<div class="day-meal-card__header">
|
|
<h3>{{ label }}</h3>
|
|
</div>
|
|
<select v-model="selectedValue" class="input-select">
|
|
<option value="">{{ t('today.noMealPlan') }}</option>
|
|
<option v-for="option in mealOptions" :key="option.value" :value="String(option.value)">
|
|
{{ option.label }}
|
|
</option>
|
|
</select>
|
|
<div class="day-meal-card__summary day-meal-card__summary--nutrition" v-if="meal?.totals">
|
|
<span class="day-meal-card__kcal">{{ meal.totals.kcal }} {{ t('common.kcalUnit') }}</span>
|
|
<div class="macro-badge-group macro-badge-group--compact">
|
|
<MacroBadge macro="protein" :label="t('nutrition.short.protein')" :grams="meal.totals.protein_g" />
|
|
<MacroBadge macro="carbs" :label="t('nutrition.short.carbs')" :grams="meal.totals.carbs_g" />
|
|
<MacroBadge macro="fat" :label="t('nutrition.short.fat')" :grams="meal.totals.fat_g" />
|
|
<MacroBadge macro="fiber" :label="t('nutrition.short.fiber')" :grams="meal.totals.fiber_g" />
|
|
</div>
|
|
</div>
|
|
<p class="day-meal-card__summary" v-else>
|
|
{{ t('today.noItems') }}
|
|
</p>
|
|
</section>
|
|
</template>
|