89 lines
3.2 KiB
TypeScript
89 lines
3.2 KiB
TypeScript
import { useRouter } from 'expo-router';
|
||
import { useState } from 'react';
|
||
import { ScrollView, StyleSheet, Text, View } from 'react-native';
|
||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||
|
||
import { Button, ErrorNote, Field } from '@/components/ui';
|
||
import { Wahl } from '@/components/wahl';
|
||
import { fehlertext } from '@/lib/auth';
|
||
import { ordnerAnlegen, STARTWERTE, ZWECKE, type Startwert, type Zweck } from '@/lib/folders';
|
||
import { useSession } from '@/lib/session';
|
||
import { colors, space, text } from '@/theme/tokens';
|
||
|
||
export default function OrdnerNeuScreen() {
|
||
const router = useRouter();
|
||
const { brand, ordnerNeuLaden, setzeAktivenOrdner } = useSession();
|
||
|
||
const [name, setName] = useState('');
|
||
const [thema, setThema] = useState('');
|
||
const [zweck, setZweck] = useState<Zweck>('wissens_scope');
|
||
const [startwert, setStartwert] = useState<Startwert>('erben');
|
||
const [fehler, setFehler] = useState<string | null>(null);
|
||
const [busy, setBusy] = useState(false);
|
||
|
||
async function anlegen() {
|
||
if (!brand?.team_id) {
|
||
setFehler('Zur Marke ist kein Team hinterlegt – bitte neu anmelden.');
|
||
return;
|
||
}
|
||
setFehler(null);
|
||
setBusy(true);
|
||
try {
|
||
const o = await ordnerAnlegen(brand.$id, brand.team_id, {
|
||
name: name.trim(),
|
||
zweck,
|
||
startwert_modus: startwert,
|
||
theme_md: thema.trim(),
|
||
});
|
||
await ordnerNeuLaden();
|
||
setzeAktivenOrdner(o);
|
||
router.back();
|
||
} catch (e) {
|
||
setFehler(fehlertext(e));
|
||
setBusy(false);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<SafeAreaView style={s.safe} edges={['top', 'left', 'right']}>
|
||
<ScrollView contentContainerStyle={s.body} keyboardShouldPersistTaps="handled">
|
||
<Text style={s.titel}>Ordner anlegen</Text>
|
||
<Text style={s.unter}>
|
||
Ein Ordner ist ein eigener Wissensstand, keine Ablage. Was hier hineinkommt, prägt die
|
||
Bilder, die daraus entstehen – und nur die.
|
||
</Text>
|
||
|
||
{fehler ? <ErrorNote message={fehler} /> : null}
|
||
|
||
<Field label="Name" value={name} onChangeText={setName} placeholder="z. B. Sommerkampagne" />
|
||
<Field
|
||
label="Worum geht es hier? (optional)"
|
||
value={thema}
|
||
onChangeText={setThema}
|
||
placeholder="Hilft später beim Einsortieren"
|
||
multiline
|
||
numberOfLines={3}
|
||
style={s.mehrzeilig}
|
||
/>
|
||
|
||
<Wahl label="Zweck" optionen={ZWECKE} wert={zweck} aufWahl={setZweck} />
|
||
<Wahl label="Startwerte" optionen={STARTWERTE} wert={startwert} aufWahl={setStartwert} />
|
||
|
||
<View style={s.actions}>
|
||
<Button title="Ordner anlegen" onPress={anlegen} busy={busy} disabled={name.trim().length < 2} />
|
||
<Button title="Abbrechen" variant="ghost" onPress={() => router.back()} />
|
||
</View>
|
||
</ScrollView>
|
||
</SafeAreaView>
|
||
);
|
||
}
|
||
|
||
const s = StyleSheet.create({
|
||
safe: { flex: 1, backgroundColor: colors.bg },
|
||
body: { padding: space.xl, gap: space.lg, paddingBottom: space.xxl },
|
||
titel: { ...text.title, color: colors.txt },
|
||
unter: { ...text.body, color: colors.mut, lineHeight: 21, marginTop: -space.sm },
|
||
mehrzeilig: { minHeight: 84, textAlignVertical: 'top' },
|
||
actions: { gap: space.md, marginTop: space.md },
|
||
});
|