1
0
Fork 0
mirror of https://github.com/s-frick/effigenix.git synced 2026-03-28 17:29:58 +01:00

feat(cli): Stammdaten-TUI mit Master Data API-Anbindung

- Neue Screens: Kategorien, Lieferanten, Artikel, Kunden (jeweils
  Liste, Detail, Anlegen + Detailaktionen wie Bewertung, Zertifikate,
  Verkaufseinheiten, Lieferadressen, Präferenzen)
- API-Client: Resources für alle 4 Stammdaten-Aggregate implementiert
  (categories, suppliers, articles, customers) mit Mapping von
  verschachtelten Domain-VOs auf flache DTOs
- Lieferant, Artikel, Kategorie: echte HTTP-Calls gegen Backend
  (/api/suppliers, /api/articles, /api/categories, /api/customers)
- 204-No-Content-Endpoints (removeSalesUnit, removeSupplier,
  removeCertificate, removeDeliveryAddress, removeFrameContract)
  lösen Re-Fetch des Aggregats aus
- MasterdataMenu, Navigation-Erweiterung, App.tsx-Routing
This commit is contained in:
Sebastian Frick 2026-02-18 13:35:20 +01:00
parent 797f435a49
commit d27dbaa843
30 changed files with 3882 additions and 1 deletions

View file

@ -0,0 +1,145 @@
import React, { useState } from 'react';
import { Box, Text, useInput } from 'ink';
import type { CustomerType } from '@effigenix/api-client';
import { useNavigation } from '../../../state/navigation-context.js';
import { useCustomers } from '../../../hooks/useCustomers.js';
import { FormInput } from '../../shared/FormInput.js';
import { LoadingSpinner } from '../../shared/LoadingSpinner.js';
import { ErrorDisplay } from '../../shared/ErrorDisplay.js';
type Field = 'name' | 'phone' | 'email' | 'street' | 'houseNumber' | 'postalCode' | 'city' | 'country' | 'paymentDueDays';
const FIELDS: Field[] = ['name', 'phone', 'email', 'street', 'houseNumber', 'postalCode', 'city', 'country', 'paymentDueDays'];
const FIELD_LABELS: Record<Field, string> = {
name: 'Name *',
phone: 'Telefon *',
email: 'E-Mail',
street: 'Straße *',
houseNumber: 'Hausnummer *',
postalCode: 'PLZ *',
city: 'Stadt *',
country: 'Land *',
paymentDueDays: 'Zahlungsziel (Tage)',
};
const TYPES: CustomerType[] = ['B2B', 'B2C'];
export function CustomerCreateScreen() {
const { navigate, back } = useNavigation();
const { createCustomer, loading, error, clearError } = useCustomers();
const [values, setValues] = useState<Record<Field, string>>({
name: '', phone: '', email: '', street: '', houseNumber: '',
postalCode: '', city: '', country: 'Deutschland', paymentDueDays: '',
});
const [typeIndex, setTypeIndex] = useState(0);
const [activeField, setActiveField] = useState<Field | 'type'>('name');
const [fieldErrors, setFieldErrors] = useState<Partial<Record<Field | 'type', string>>>({});
const setField = (field: Field) => (value: string) => {
setValues((v) => ({ ...v, [field]: value }));
};
useInput((_input, key) => {
if (loading) return;
if (activeField === 'type') {
if (key.leftArrow) setTypeIndex((i) => Math.max(0, i - 1));
if (key.rightArrow) setTypeIndex((i) => Math.min(TYPES.length - 1, i + 1));
if (key.tab || key.downArrow || key.return) setActiveField('name');
} else {
if (key.tab || key.downArrow) {
setActiveField((f) => {
if (f === 'type') return 'name';
const idx = FIELDS.indexOf(f as Field);
return FIELDS[(idx + 1) % FIELDS.length] ?? f;
});
}
if (key.upArrow) {
setActiveField((f) => {
if (f === 'type') return f;
const idx = FIELDS.indexOf(f as Field);
if (idx === 0) return 'type';
return FIELDS[idx - 1] ?? f;
});
}
}
if (key.escape) back();
});
const handleSubmit = async () => {
const errors: Partial<Record<Field | 'type', string>> = {};
if (!values.name.trim()) errors.name = 'Name ist erforderlich.';
if (!values.phone.trim()) errors.phone = 'Telefon ist erforderlich.';
if (!values.street.trim()) errors.street = 'Straße ist erforderlich.';
if (!values.houseNumber.trim()) errors.houseNumber = 'Hausnummer ist erforderlich.';
if (!values.postalCode.trim()) errors.postalCode = 'PLZ ist erforderlich.';
if (!values.city.trim()) errors.city = 'Stadt ist erforderlich.';
if (!values.country.trim()) errors.country = 'Land ist erforderlich.';
setFieldErrors(errors);
if (Object.keys(errors).length > 0) return;
const result = await createCustomer({
name: values.name.trim(),
type: TYPES[typeIndex] ?? 'B2B',
phone: values.phone.trim(),
street: values.street.trim(),
houseNumber: values.houseNumber.trim(),
postalCode: values.postalCode.trim(),
city: values.city.trim(),
country: values.country.trim(),
...(values.email.trim() ? { email: values.email.trim() } : {}),
...(values.paymentDueDays.trim() ? { paymentDueDays: parseInt(values.paymentDueDays, 10) } : {}),
});
if (result) navigate('customer-list');
};
const handleFieldSubmit = (field: Field) => (_value: string) => {
const idx = FIELDS.indexOf(field);
if (idx < FIELDS.length - 1) {
setActiveField(FIELDS[idx + 1] ?? field);
} else {
void handleSubmit();
}
};
if (loading) return <Box paddingY={2}><LoadingSpinner label="Kunde wird angelegt..." /></Box>;
return (
<Box flexDirection="column" gap={1}>
<Text color="cyan" bold>Neuer Kunde</Text>
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
<Box flexDirection="column" gap={1} width={60}>
{/* Type Selector */}
<Box flexDirection="column">
<Text color={activeField === 'type' ? 'cyan' : 'gray'}>Typ *</Text>
<Box gap={1}>
<Text color={activeField === 'type' ? 'cyan' : 'gray'}>{'< '}</Text>
<Text color={activeField === 'type' ? 'white' : 'gray'}>{TYPES[typeIndex]}</Text>
<Text color={activeField === 'type' ? 'cyan' : 'gray'}>{' >'}</Text>
</Box>
{activeField === 'type' && <Text color="gray" dimColor> Typ · Tab/Enter weiter</Text>}
</Box>
{FIELDS.map((field) => (
<FormInput
key={field}
label={FIELD_LABELS[field]}
value={values[field]}
onChange={setField(field)}
onSubmit={handleFieldSubmit(field)}
focus={activeField === field}
{...(fieldErrors[field] ? { error: fieldErrors[field] } : {})}
/>
))}
</Box>
<Box marginTop={1}>
<Text color="gray" dimColor>
Tab/ Feld · Typ · Enter auf letztem Feld speichern · Escape Abbrechen
</Text>
</Box>
</Box>
);
}