363 lines
13 KiB
TypeScript
363 lines
13 KiB
TypeScript
import { useState } from 'react';
|
|
import { Alert, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { fetchIngredientCatalogItems } from '@/src/api/ingredient-catalog.api';
|
|
import { createRecipe } from '@/src/api/recipes.api';
|
|
import { Button } from '@/src/components/Button';
|
|
import { ExcelImportPanel } from '@/src/components/ExcelImportPanel';
|
|
import { Input } from '@/src/components/Input';
|
|
import { Screen } from '@/src/components/Screen';
|
|
import { useAppearance } from '@/src/context/AppearanceContext';
|
|
import { MealCategory } from '@/src/types/recipe';
|
|
import { ALL_CATEGORIES, categoryLabel, parseOptionalNumber } from '@/src/utils/recipe';
|
|
import { extractApiError } from '@/src/utils/apiError';
|
|
import { ingredientDisplayName } from '@/src/utils/ingredient-catalog.util';
|
|
|
|
type ManageTab = 'manual' | 'import';
|
|
|
|
interface IngredientRow {
|
|
name: string;
|
|
amountGrams: string;
|
|
unit: string;
|
|
catalogItemId: number | null;
|
|
}
|
|
|
|
interface StepRow {
|
|
description: string;
|
|
}
|
|
|
|
export default function ManageScreen() {
|
|
const { t, i18n } = useTranslation();
|
|
const { colors } = useAppearance();
|
|
const queryClient = useQueryClient();
|
|
const [manageTab, setManageTab] = useState<ManageTab>('manual');
|
|
|
|
const catalogQuery = useQuery({
|
|
queryKey: ['ingredient-catalog', 'all'],
|
|
queryFn: () => fetchIngredientCatalogItems(),
|
|
});
|
|
|
|
const [name, setName] = useState('');
|
|
const [category, setCategory] = useState<MealCategory>(MealCategory.Lunch);
|
|
const [prepTime, setPrepTime] = useState('');
|
|
const [calories, setCalories] = useState('');
|
|
const [protein, setProtein] = useState('');
|
|
const [fat, setFat] = useState('');
|
|
const [carbs, setCarbs] = useState('');
|
|
const [ingredients, setIngredients] = useState<IngredientRow[]>([
|
|
{ name: '', amountGrams: '', unit: '', catalogItemId: null },
|
|
]);
|
|
const [steps, setSteps] = useState<StepRow[]>([{ description: '' }]);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const saveMutation = useMutation({
|
|
mutationFn: createRecipe,
|
|
onSuccess: (recipe) => {
|
|
queryClient.invalidateQueries({ queryKey: ['recipes'] });
|
|
queryClient.invalidateQueries({ queryKey: ['categories'] });
|
|
Alert.alert(t('manage.title'), t('manage.savedSuccess', { name: recipe.name }));
|
|
setName('');
|
|
setPrepTime('');
|
|
setCalories('');
|
|
setProtein('');
|
|
setFat('');
|
|
setCarbs('');
|
|
setIngredients([{ name: '', amountGrams: '', unit: '', catalogItemId: null }]);
|
|
setSteps([{ description: '' }]);
|
|
setError(null);
|
|
},
|
|
onError: (err) => {
|
|
setError(extractApiError(err, t('errors.saveRecipeFailed')));
|
|
},
|
|
});
|
|
|
|
function validate(): string | null {
|
|
if (!name.trim()) return t('validation.recipeNameRequired');
|
|
const validSteps = steps.filter((s) => s.description.trim());
|
|
if (validSteps.length === 0) return t('validation.stepsMin');
|
|
return null;
|
|
}
|
|
|
|
function handleSave() {
|
|
const validationError = validate();
|
|
if (validationError) {
|
|
setError(validationError);
|
|
return;
|
|
}
|
|
|
|
const filteredIngredients = ingredients
|
|
.filter((i) => i.name.trim())
|
|
.map((i, index) => ({
|
|
name: i.name.trim(),
|
|
amountGrams: parseOptionalNumber(i.amountGrams),
|
|
unit: i.unit,
|
|
catalogItemId: i.catalogItemId,
|
|
sortOrder: index,
|
|
}));
|
|
|
|
const filteredSteps = steps
|
|
.filter((s) => s.description.trim())
|
|
.map((s, index) => ({
|
|
stepNumber: index + 1,
|
|
description: s.description.trim(),
|
|
}));
|
|
|
|
saveMutation.mutate({
|
|
name: name.trim(),
|
|
mealCategory: category,
|
|
calories: parseOptionalNumber(calories),
|
|
protein: parseOptionalNumber(protein),
|
|
fat: parseOptionalNumber(fat),
|
|
carbs: parseOptionalNumber(carbs),
|
|
prepTimeMinutes: parseOptionalNumber(prepTime),
|
|
ingredients: filteredIngredients,
|
|
steps: filteredSteps,
|
|
});
|
|
}
|
|
|
|
const catalogItems = catalogQuery.data ?? [];
|
|
|
|
return (
|
|
<Screen title={t('manage.title')} subtitle={t('manage.subtitle')}>
|
|
<View style={styles.tabs}>
|
|
{(['manual', 'import'] as ManageTab[]).map((tab) => (
|
|
<Pressable
|
|
key={tab}
|
|
onPress={() => setManageTab(tab)}
|
|
style={[styles.tab, { backgroundColor: manageTab === tab ? colors.brand : colors.surface, borderColor: manageTab === tab ? colors.brand : colors.border }]}
|
|
>
|
|
<Text style={{ color: manageTab === tab ? '#fff' : colors.text, fontWeight: '600', fontSize: 13 }}>
|
|
{t(tab === 'manual' ? 'manage.tabManual' : 'manage.tabImport')}
|
|
</Text>
|
|
</Pressable>
|
|
))}
|
|
</View>
|
|
|
|
{manageTab === 'import' ? (
|
|
<ExcelImportPanel onImported={() => queryClient.invalidateQueries({ queryKey: ['recipes'] })} />
|
|
) : (
|
|
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled">
|
|
<Text style={[styles.section, { color: colors.text }]}>{t('manage.basicInfo')}</Text>
|
|
<Input
|
|
label={t('manage.recipeName')}
|
|
placeholder={t('manage.recipeNamePlaceholder')}
|
|
value={name}
|
|
onChangeText={setName}
|
|
/>
|
|
|
|
<Text style={[styles.label, { color: colors.text }]}>{t('common.category')}</Text>
|
|
<View style={styles.chips}>
|
|
{ALL_CATEGORIES.map((cat) => {
|
|
const selected = category === cat;
|
|
return (
|
|
<Pressable
|
|
key={cat}
|
|
onPress={() => setCategory(cat)}
|
|
style={[
|
|
styles.chip,
|
|
{
|
|
backgroundColor: selected ? colors.brand : colors.surface,
|
|
borderColor: selected ? colors.brand : colors.border,
|
|
},
|
|
]}
|
|
>
|
|
<Text style={{ color: selected ? '#fff' : colors.text, fontSize: 13 }}>
|
|
{categoryLabel(cat, t)}
|
|
</Text>
|
|
</Pressable>
|
|
);
|
|
})}
|
|
</View>
|
|
|
|
<View style={styles.row}>
|
|
<View style={styles.half}>
|
|
<Input
|
|
label={t('manage.prepTimeMin')}
|
|
keyboardType="numeric"
|
|
value={prepTime}
|
|
onChangeText={setPrepTime}
|
|
/>
|
|
</View>
|
|
<View style={styles.half}>
|
|
<Input
|
|
label={t('manage.caloriesKcal')}
|
|
keyboardType="numeric"
|
|
value={calories}
|
|
onChangeText={setCalories}
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={styles.row}>
|
|
<View style={styles.third}>
|
|
<Input label={t('manage.proteinG')} keyboardType="numeric" value={protein} onChangeText={setProtein} />
|
|
</View>
|
|
<View style={styles.third}>
|
|
<Input label={t('manage.fatG')} keyboardType="numeric" value={fat} onChangeText={setFat} />
|
|
</View>
|
|
<View style={styles.third}>
|
|
<Input label={t('manage.carbsG')} keyboardType="numeric" value={carbs} onChangeText={setCarbs} />
|
|
</View>
|
|
</View>
|
|
|
|
<Text style={[styles.section, { color: colors.text }]}>{t('recipes.ingredients')}</Text>
|
|
{ingredients.map((ing, index) => (
|
|
<View key={index} style={styles.block}>
|
|
<Input
|
|
label={t('manage.ingredientName')}
|
|
value={ing.name}
|
|
onChangeText={(value) => {
|
|
const next = [...ingredients];
|
|
next[index] = { ...next[index], name: value };
|
|
setIngredients(next);
|
|
}}
|
|
/>
|
|
<Text style={[styles.label, { color: colors.text }]}>{t('manage.catalogItem')}</Text>
|
|
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.chips}>
|
|
<Pressable
|
|
onPress={() => {
|
|
const next = [...ingredients];
|
|
next[index] = { ...next[index], catalogItemId: null };
|
|
setIngredients(next);
|
|
}}
|
|
style={[styles.chip, { backgroundColor: ing.catalogItemId == null ? colors.brand : colors.surface, borderColor: ing.catalogItemId == null ? colors.brand : colors.border }]}
|
|
>
|
|
<Text style={{ color: ing.catalogItemId == null ? '#fff' : colors.text, fontSize: 12 }}>{t('diet.noCatalogItem')}</Text>
|
|
</Pressable>
|
|
{catalogItems.map((item) => (
|
|
<Pressable
|
|
key={item.id}
|
|
onPress={() => {
|
|
const next = [...ingredients];
|
|
next[index] = { ...next[index], catalogItemId: item.id, name: ingredientDisplayName(item, i18n.language) };
|
|
setIngredients(next);
|
|
}}
|
|
style={[styles.chip, { backgroundColor: ing.catalogItemId === item.id ? colors.brand : colors.surface, borderColor: ing.catalogItemId === item.id ? colors.brand : colors.border }]}
|
|
>
|
|
<Text style={{ color: ing.catalogItemId === item.id ? '#fff' : colors.text, fontSize: 12 }}>{ingredientDisplayName(item, i18n.language)}</Text>
|
|
</Pressable>
|
|
))}
|
|
</ScrollView>
|
|
<View style={styles.row}>
|
|
<View style={styles.half}>
|
|
<Input
|
|
label={t('manage.ingredientGrams')}
|
|
keyboardType="numeric"
|
|
value={ing.amountGrams}
|
|
onChangeText={(value) => {
|
|
const next = [...ingredients];
|
|
next[index] = { ...next[index], amountGrams: value };
|
|
setIngredients(next);
|
|
}}
|
|
/>
|
|
</View>
|
|
<View style={styles.half}>
|
|
<Input
|
|
label={t('manage.ingredientUnit')}
|
|
value={ing.unit}
|
|
onChangeText={(value) => {
|
|
const next = [...ingredients];
|
|
next[index] = { ...next[index], unit: value };
|
|
setIngredients(next);
|
|
}}
|
|
/>
|
|
</View>
|
|
</View>
|
|
{ingredients.length > 1 ? (
|
|
<Button
|
|
title={t('manage.removeIngredient')}
|
|
variant="ghost"
|
|
onPress={() => setIngredients(ingredients.filter((_, i) => i !== index))}
|
|
/>
|
|
) : null}
|
|
</View>
|
|
))}
|
|
<Button
|
|
title={t('common.add')}
|
|
variant="secondary"
|
|
onPress={() => setIngredients([...ingredients, { name: '', amountGrams: '', unit: '', catalogItemId: null }])}
|
|
/>
|
|
|
|
<Text style={[styles.section, { color: colors.text }]}>{t('manage.preparationSteps')}</Text>
|
|
{steps.map((step, index) => (
|
|
<View key={index} style={styles.block}>
|
|
<Input
|
|
label={`${index + 1}.`}
|
|
placeholder={t('manage.stepPlaceholder')}
|
|
value={step.description}
|
|
onChangeText={(value) => {
|
|
const next = [...steps];
|
|
next[index] = { description: value };
|
|
setSteps(next);
|
|
}}
|
|
multiline
|
|
/>
|
|
{steps.length > 1 ? (
|
|
<Button
|
|
title={t('manage.removeStep')}
|
|
variant="ghost"
|
|
onPress={() => setSteps(steps.filter((_, i) => i !== index))}
|
|
/>
|
|
) : null}
|
|
</View>
|
|
))}
|
|
<Button title={t('manage.addStep')} variant="secondary" onPress={() => setSteps([...steps, { description: '' }])} />
|
|
|
|
{error ? <Text style={[styles.error, { color: colors.danger }]}>{error}</Text> : null}
|
|
<Button
|
|
title={saveMutation.isPending ? t('manage.saving') : t('manage.saveRecipe')}
|
|
loading={saveMutation.isPending}
|
|
onPress={handleSave}
|
|
/>
|
|
</ScrollView>
|
|
)}
|
|
</Screen>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
scroll: {
|
|
gap: 12,
|
|
paddingBottom: 32,
|
|
},
|
|
tabs: { flexDirection: 'row', gap: 8, marginBottom: 8 },
|
|
tab: { borderWidth: 1, borderRadius: 999, paddingHorizontal: 14, paddingVertical: 8 },
|
|
section: {
|
|
fontSize: 18,
|
|
fontWeight: '700',
|
|
marginTop: 4,
|
|
},
|
|
label: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
chips: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 8,
|
|
},
|
|
chip: {
|
|
borderWidth: 1,
|
|
borderRadius: 999,
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 8,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
gap: 10,
|
|
},
|
|
half: {
|
|
flex: 1,
|
|
},
|
|
third: {
|
|
flex: 1,
|
|
},
|
|
block: {
|
|
gap: 8,
|
|
},
|
|
error: {
|
|
fontSize: 14,
|
|
},
|
|
});
|