sebi/effigenix
1
0
Fork 0
mirror of https://github.com/s-frick/effigenix.git synced 2026-03-28 13:49:36 +01:00
Code Issues Releases Activity Actions

feat(shared): Länderauswahl mit ISO 3166-1 Mapping und CountryPicker

Browse source 
Backend: Country-Record (Shared Kernel), InMemoryCountryRepository mit
~249 Ländern und DACH-Priorisierung, ListCountries-UseCase,
GET /api/countries?q= Endpoint.

Frontend: CountryPicker-Komponente mit Fuzzy-Suche, DACH-Favoriten bei
leerem Query. SupplierCreate-, CustomerCreate- und AddDeliveryAddress-
Screens verwenden jetzt den CountryPicker statt Freitext. Detail-Screens
zeigen den Ländercode in der Adressanzeige.

Closes #71
This commit is contained in:
Sebastian Frick 2026-02-24 09:28:56 +01:00
parent 2811836039
commit a77f0ec5df
20 changed files with 1136 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

74
frontend/apps/cli/src/components/masterdata/customers/AddDeliveryAddressScreen.tsx
View file

@ -1,13 +1,16 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import { Box, Text, useInput } from 'ink';
import type { CountryDTO } from '@effigenix/api-client';
import { useNavigation } from '../../../state/navigation-context.js';
import { useCustomers } from '../../../hooks/useCustomers.js';
import { FormInput } from '../../shared/FormInput.js';
import { CountryPicker } from '../../shared/CountryPicker.js';
import { LoadingSpinner } from '../../shared/LoadingSpinner.js';
import { ErrorDisplay } from '../../shared/ErrorDisplay.js';
import { client } from '../../../utils/api-client.js';
type Field = 'label' | 'street' | 'houseNumber' | 'postalCode' | 'city' | 'country' | 'contactPerson' | 'deliveryNotes';
const FIELDS: Field[] = ['label', 'street', 'houseNumber', 'postalCode', 'city', 'country', 'contactPerson', 'deliveryNotes'];
type Field = 'label' | 'street' | 'houseNumber' | 'postalCode' | 'city' | 'countryPicker' | 'contactPerson' | 'deliveryNotes';
const FIELDS: Field[] = ['label', 'street', 'houseNumber', 'postalCode', 'city', 'countryPicker', 'contactPerson', 'deliveryNotes'];
const FIELD_LABELS: Record<Field, string> = {
label: 'Bezeichnung * (z.B. Hauptküche)',
@ -15,7 +18,7 @@ const FIELD_LABELS: Record<Field, string> = {
houseNumber: 'Hausnummer *',
postalCode: 'PLZ *',
city: 'Stadt *',
country: 'Land *',
countryPicker: 'Land *',
contactPerson: 'Ansprechpartner',
deliveryNotes: 'Lieferhinweis',
};
@ -25,14 +28,22 @@ export function AddDeliveryAddressScreen() {
const customerId = params['customerId'] ?? '';
const { addDeliveryAddress, loading, error, clearError } = useCustomers();
const [values, setValues] = useState<Record<Field, string>>({
const [values, setValues] = useState<Record<Exclude<Field, 'countryPicker'>, string>>({
label: '', street: '', houseNumber: '', postalCode: '',
city: '', country: 'Deutschland', contactPerson: '', deliveryNotes: '',
city: '', contactPerson: '', deliveryNotes: '',
});
const [activeField, setActiveField] = useState<Field>('label');
const [fieldErrors, setFieldErrors] = useState<Partial<Record<Field, string>>>({});
const [countryQuery, setCountryQuery] = useState('');
const [countryCode, setCountryCode] = useState('DE');
const [countryName, setCountryName] = useState('Deutschland');
const [countries, setCountries] = useState<CountryDTO[]>([]);
const setField = (field: Field) => (value: string) => {
useEffect(() => {
client.countries.search().then(setCountries).catch(() => {});
}, []);
const setField = (field: Exclude<Field, 'countryPicker'>) => (value: string) => {
setValues((v) => ({ ...v, [field]: value }));
};
@ -60,7 +71,6 @@ export function AddDeliveryAddressScreen() {
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;
@ -70,7 +80,7 @@ export function AddDeliveryAddressScreen() {
houseNumber: values.houseNumber.trim(),
postalCode: values.postalCode.trim(),
city: values.city.trim(),
country: values.country.trim(),
country: countryCode,
...(values.contactPerson.trim() ? { contactPerson: values.contactPerson.trim() } : {}),
...(values.deliveryNotes.trim() ? { deliveryNotes: values.deliveryNotes.trim() } : {}),
});
@ -94,17 +104,41 @@ export function AddDeliveryAddressScreen() {
{error && <ErrorDisplay message={error} onDismiss={clearError} />}
<Box flexDirection="column" gap={1} width={60}>
{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] } : {})}
/>
))}
{FIELDS.map((field) => {
if (field === 'countryPicker') {
return (
<CountryPicker
key="countryPicker"
countries={countries}
query={countryQuery}
onQueryChange={setCountryQuery}
onSelect={(c) => {
setCountryCode(c.code);
setCountryName(c.name);
setCountryQuery('');
const idx = FIELDS.indexOf('countryPicker');
if (idx < FIELDS.length - 1) {
setActiveField(FIELDS[idx + 1] ?? 'countryPicker');
}
}}
focus={activeField === 'countryPicker'}
selectedName={countryName}
/>
);
}
const f = field as Exclude<Field, 'countryPicker'>;
return (
<FormInput
key={f}
label={FIELD_LABELS[f]}
value={values[f]}
onChange={setField(f)}
onSubmit={handleFieldSubmit(f)}
focus={activeField === f}
{...(fieldErrors[f] ? { error: fieldErrors[f] } : {})}
/>
);
})}
</Box>
<Box marginTop={1}>