added implementation frontend by prompt @ 2026-02-14 05:35:18 #CODEX

frontend/src/components/meals/MealItemsEditor.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { Ingredient, MealItem } from '@/types/domain'
+
+const props = defineProps<{
+	items: MealItem[]
+	ingredients: Ingredient[]
+}>()
+
+const emit = defineEmits<{
+	(event: 'add-item', payload: { ingredient_id: number; grams: number }): void
+	(event: 'update-item', payload: { meal_item_id: number; ingredient_id: number; grams: number; position: number }): void
+	(event: 'remove-item', mealItemId: number): void
+}>()
+
+const addIngredientId = ref<number | null>(null)
+const addGrams = ref<number>(100)
+
+const updateIngredient = (item: MealItem, ingredientId: number) => {
+	emit('update-item', {
+		meal_item_id: item.meal_item_id,
+		ingredient_id: ingredientId,
+		grams: item.grams,
+		position: item.position,
+	})
+}
+
+const updateGrams = (item: MealItem, grams: number) => {
+	emit('update-item', {
+		meal_item_id: item.meal_item_id,
+		ingredient_id: item.ingredient_id,
+		grams,
+		position: item.position,
+	})
+}
+
+const addItem = () => {
+	if (!addIngredientId.value || addGrams.value <= 0) {
+		return
+	}
+	emit('add-item', {
+		ingredient_id: addIngredientId.value,
+		grams: addGrams.value,
+	})
+	addGrams.value = 100
+}
+</script>
+
+<template>
+	<section class="card meal-items-editor">
+		<h3>Položky jedálnička</h3>
+
+		<div class="meal-items-editor__add-row">
+			<select v-model.number="addIngredientId" class="input-select">
+				<option :value="null">Vyber surovinu</option>
+				<option v-for="ingredient in props.ingredients" :key="ingredient.ingredient_id" :value="ingredient.ingredient_id">
+					{{ ingredient.name }}
+				</option>
+			</select>
+			<input v-model.number="addGrams" type="number" min="1" class="input-number" />
+			<button class="btn btn-primary" type="button" @click="addItem">Pridať</button>
+		</div>
+
+		<table class="table" v-if="props.items.length > 0">
+			<thead>
+				<tr>
+					<th>Surovina</th>
+					<th>Gramáž</th>
+					<th>Akcia</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="item in props.items" :key="item.meal_item_id">
+					<td>
+						<select
+							class="input-select"
+							:value="item.ingredient_id"
+							@change="updateIngredient(item, Number(($event.target as HTMLSelectElement).value))"
+						>
+							<option
+								v-for="ingredient in props.ingredients"
+								:key="ingredient.ingredient_id"
+								:value="ingredient.ingredient_id"
+							>
+								{{ ingredient.name }}
+							</option>
+						</select>
+					</td>
+					<td>
+						<input
+							class="input-number"
+							type="number"
+							min="1"
+							:value="item.grams"
+							@change="updateGrams(item, Number(($event.target as HTMLInputElement).value))"
+						/>
+					</td>
+					<td>
+						<button class="btn btn-danger" type="button" @click="emit('remove-item', item.meal_item_id)">
+							Zmazať
+						</button>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<p v-else class="empty-state">Tento jedálniček zatiaľ nemá položky.</p>
+	</section>
+</template>

frontend/src/components/meals/MealTypeFilter.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { MealType } from '@/types/domain'
+
+const props = defineProps<{
+	modelValue: MealType | ''
+}>()
+
+const emit = defineEmits<{
+	(event: 'update:modelValue', value: MealType | ''): void
+}>()
+</script>
+
+<template>
+	<label class="filter-control">
+		<span>Typ jedla</span>
+		<select
+			class="input-select"
+			:value="props.modelValue"
+			@change="emit('update:modelValue', ($event.target as HTMLSelectElement).value as MealType | '')"
+		>
+			<option value="">Všetky</option>
+			<option value="breakfast">Raňajky</option>
+			<option value="lunch">Obed</option>
+			<option value="dinner">Večera</option>
+		</select>
+	</label>
+</template>