mirror of
https://github.com/s-frick/effigenix.git
synced 2026-03-28 13:49:36 +01:00
feat(shared): Länderauswahl mit ISO 3166-1 Mapping und CountryPicker
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
parent
2811836039
commit
a77f0ec5df
20 changed files with 1136 additions and 63 deletions
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import type { CustomerType } from '@effigenix/api-client';
|
||||
import type { CustomerType, 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 = 'name' | 'phone' | 'email' | 'street' | 'houseNumber' | 'postalCode' | 'city' | 'country' | 'paymentDueDays';
|
||||
const FIELDS: Field[] = ['name', 'phone', 'email', 'street', 'houseNumber', 'postalCode', 'city', 'country', 'paymentDueDays'];
|
||||
type Field = 'name' | 'phone' | 'email' | 'street' | 'houseNumber' | 'postalCode' | 'city' | 'countryPicker' | 'paymentDueDays';
|
||||
const FIELDS: Field[] = ['name', 'phone', 'email', 'street', 'houseNumber', 'postalCode', 'city', 'countryPicker', 'paymentDueDays'];
|
||||
|
||||
const FIELD_LABELS: Record<Field, string> = {
|
||||
name: 'Name *',
|
||||
|
|
@ -18,7 +20,7 @@ const FIELD_LABELS: Record<Field, string> = {
|
|||
houseNumber: 'Hausnummer *',
|
||||
postalCode: 'PLZ *',
|
||||
city: 'Stadt *',
|
||||
country: 'Land *',
|
||||
countryPicker: 'Land *',
|
||||
paymentDueDays: 'Zahlungsziel (Tage)',
|
||||
};
|
||||
|
||||
|
|
@ -28,15 +30,23 @@ export function CustomerCreateScreen() {
|
|||
const { replace, back } = useNavigation();
|
||||
const { createCustomer, loading, error, clearError } = useCustomers();
|
||||
|
||||
const [values, setValues] = useState<Record<Field, string>>({
|
||||
const [values, setValues] = useState<Record<Exclude<Field, 'countryPicker'>, string>>({
|
||||
name: '', phone: '', email: '', street: '', houseNumber: '',
|
||||
postalCode: '', city: '', country: 'Deutschland', paymentDueDays: '',
|
||||
postalCode: '', city: '', paymentDueDays: '',
|
||||
});
|
||||
const [typeIndex, setTypeIndex] = useState(0);
|
||||
const [activeField, setActiveField] = useState<Field | 'type'>('name');
|
||||
const [fieldErrors, setFieldErrors] = useState<Partial<Record<Field | 'type', 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 }));
|
||||
};
|
||||
|
||||
|
|
@ -75,7 +85,6 @@ export function CustomerCreateScreen() {
|
|||
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;
|
||||
|
||||
|
|
@ -87,7 +96,7 @@ export function CustomerCreateScreen() {
|
|||
houseNumber: values.houseNumber.trim(),
|
||||
postalCode: values.postalCode.trim(),
|
||||
city: values.city.trim(),
|
||||
country: values.country.trim(),
|
||||
country: countryCode,
|
||||
...(values.email.trim() ? { email: values.email.trim() } : {}),
|
||||
...(values.paymentDueDays.trim() ? { paymentDueDays: parseInt(values.paymentDueDays, 10) } : {}),
|
||||
});
|
||||
|
|
@ -122,17 +131,41 @@ export function CustomerCreateScreen() {
|
|||
{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] } : {})}
|
||||
/>
|
||||
))}
|
||||
{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}>
|
||||
|
|
|
|||
|
|
@ -164,7 +164,7 @@ export function CustomerDetailScreen() {
|
|||
)}
|
||||
<Box gap={2}>
|
||||
<Text color="gray">Rechnungsadresse:</Text>
|
||||
<Text>{`${customer.billingAddress.street} ${customer.billingAddress.houseNumber}, ${customer.billingAddress.postalCode} ${customer.billingAddress.city}`}</Text>
|
||||
<Text>{`${customer.billingAddress.street} ${customer.billingAddress.houseNumber}, ${customer.billingAddress.postalCode} ${customer.billingAddress.city}, ${customer.billingAddress.country}`}</Text>
|
||||
</Box>
|
||||
{customer.paymentTerms && (
|
||||
<Box gap={2}>
|
||||
|
|
@ -185,7 +185,7 @@ export function CustomerDetailScreen() {
|
|||
<Box key={addr.label} paddingLeft={2} gap={1}>
|
||||
<Text color="yellow">•</Text>
|
||||
<Text bold>{addr.label}:</Text>
|
||||
<Text>{`${addr.address.street} ${addr.address.houseNumber}, ${addr.address.city}`}</Text>
|
||||
<Text>{`${addr.address.street} ${addr.address.houseNumber}, ${addr.address.city}, ${addr.address.country}`}</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
|
|
|||
|
|
@ -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 { useSuppliers } from '../../../hooks/useSuppliers.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 = 'name' | 'phone' | 'email' | 'contactPerson' | 'street' | 'houseNumber' | 'postalCode' | 'city' | 'country' | 'paymentDueDays';
|
||||
const FIELDS: Field[] = ['name', 'phone', 'email', 'contactPerson', 'street', 'houseNumber', 'postalCode', 'city', 'country', 'paymentDueDays'];
|
||||
type Field = 'name' | 'phone' | 'email' | 'contactPerson' | 'street' | 'houseNumber' | 'postalCode' | 'city' | 'countryPicker' | 'paymentDueDays';
|
||||
const FIELDS: Field[] = ['name', 'phone', 'email', 'contactPerson', 'street', 'houseNumber', 'postalCode', 'city', 'countryPicker', 'paymentDueDays'];
|
||||
|
||||
const FIELD_LABELS: Record<Field, string> = {
|
||||
name: 'Name *',
|
||||
|
|
@ -18,7 +21,7 @@ const FIELD_LABELS: Record<Field, string> = {
|
|||
houseNumber: 'Hausnummer',
|
||||
postalCode: 'PLZ',
|
||||
city: 'Stadt',
|
||||
country: 'Land',
|
||||
countryPicker: 'Land',
|
||||
paymentDueDays: 'Zahlungsziel (Tage)',
|
||||
};
|
||||
|
||||
|
|
@ -26,15 +29,23 @@ export function SupplierCreateScreen() {
|
|||
const { replace, back } = useNavigation();
|
||||
const { createSupplier, loading, error, clearError } = useSuppliers();
|
||||
|
||||
const [values, setValues] = useState<Record<Field, string>>({
|
||||
const [values, setValues] = useState<Record<Exclude<Field, 'countryPicker'>, string>>({
|
||||
name: '', phone: '', email: '', contactPerson: '',
|
||||
street: '', houseNumber: '', postalCode: '', city: '', country: 'Deutschland',
|
||||
street: '', houseNumber: '', postalCode: '', city: '',
|
||||
paymentDueDays: '',
|
||||
});
|
||||
const [activeField, setActiveField] = useState<Field>('name');
|
||||
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 }));
|
||||
};
|
||||
|
||||
|
|
@ -71,7 +82,7 @@ export function SupplierCreateScreen() {
|
|||
...(values.houseNumber.trim() ? { houseNumber: values.houseNumber.trim() } : {}),
|
||||
...(values.postalCode.trim() ? { postalCode: values.postalCode.trim() } : {}),
|
||||
...(values.city.trim() ? { city: values.city.trim() } : {}),
|
||||
...(values.country.trim() ? { country: values.country.trim() } : {}),
|
||||
...(countryCode ? { country: countryCode } : {}),
|
||||
...(values.paymentDueDays.trim() ? { paymentDueDays: parseInt(values.paymentDueDays, 10) } : {}),
|
||||
});
|
||||
if (result) replace('supplier-list');
|
||||
|
|
@ -100,17 +111,41 @@ export function SupplierCreateScreen() {
|
|||
{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}>
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ export function SupplierDetailScreen() {
|
|||
{supplier.address && (
|
||||
<Box gap={2}>
|
||||
<Text color="gray">Adresse:</Text>
|
||||
<Text>{`${supplier.address.street} ${supplier.address.houseNumber}, ${supplier.address.postalCode} ${supplier.address.city}`}</Text>
|
||||
<Text>{`${supplier.address.street} ${supplier.address.houseNumber}, ${supplier.address.postalCode} ${supplier.address.city}, ${supplier.address.country}`}</Text>
|
||||
</Box>
|
||||
)}
|
||||
{supplier.paymentTerms && (
|
||||
|
|
|
|||
129
frontend/apps/cli/src/components/shared/CountryPicker.tsx
Normal file
129
frontend/apps/cli/src/components/shared/CountryPicker.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
import { useState, useMemo } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import type { CountryDTO } from '@effigenix/api-client';
|
||||
|
||||
interface CountryPickerProps {
|
||||
countries: CountryDTO[];
|
||||
query: string;
|
||||
onQueryChange: (q: string) => void;
|
||||
onSelect: (country: CountryDTO) => void;
|
||||
focus: boolean;
|
||||
selectedName?: string;
|
||||
maxVisible?: number;
|
||||
}
|
||||
|
||||
const DACH_CODES = ['DE', 'AT', 'CH'];
|
||||
|
||||
export function CountryPicker({
|
||||
countries,
|
||||
query,
|
||||
onQueryChange,
|
||||
onSelect,
|
||||
focus,
|
||||
selectedName,
|
||||
maxVisible = 5,
|
||||
}: CountryPickerProps) {
|
||||
const [cursor, setCursor] = useState(0);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!query) {
|
||||
// Show DACH favorites when no query
|
||||
return countries.filter((c) => DACH_CODES.includes(c.code)).slice(0, maxVisible);
|
||||
}
|
||||
const q = query.toLowerCase();
|
||||
return countries.filter(
|
||||
(c) => c.name.toLowerCase().includes(q) || c.code.toLowerCase().includes(q),
|
||||
).slice(0, maxVisible);
|
||||
}, [countries, query, maxVisible]);
|
||||
|
||||
useInput((input, key) => {
|
||||
if (!focus) return;
|
||||
|
||||
if (key.upArrow) {
|
||||
setCursor((c) => Math.max(0, c - 1));
|
||||
return;
|
||||
}
|
||||
if (key.downArrow) {
|
||||
setCursor((c) => Math.min(filtered.length - 1, c + 1));
|
||||
return;
|
||||
}
|
||||
if (key.return && filtered.length > 0) {
|
||||
const selected = filtered[cursor];
|
||||
if (selected) onSelect(selected);
|
||||
return;
|
||||
}
|
||||
if (key.backspace || key.delete) {
|
||||
onQueryChange(query.slice(0, -1));
|
||||
setCursor(0);
|
||||
return;
|
||||
}
|
||||
|
||||
if (key.tab || key.escape || key.ctrl || key.meta) return;
|
||||
|
||||
if (input && !key.upArrow && !key.downArrow) {
|
||||
onQueryChange(query + input);
|
||||
setCursor(0);
|
||||
}
|
||||
}, { isActive: focus });
|
||||
|
||||
if (!focus && selectedName) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text color="gray">Land *</Text>
|
||||
<Box>
|
||||
<Text color="gray"> › </Text>
|
||||
<Text color="green">✓ {selectedName}</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
if (focus && selectedName && !query) {
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text color="cyan">Land * (tippen zum Ändern)</Text>
|
||||
<Box>
|
||||
<Text color="gray"> › </Text>
|
||||
<Text color="green">✓ {selectedName}</Text>
|
||||
</Box>
|
||||
{filtered.length > 0 && (
|
||||
<Box flexDirection="column" paddingLeft={2}>
|
||||
{filtered.map((c, i) => (
|
||||
<Box key={c.code}>
|
||||
<Text color={i === cursor ? 'cyan' : 'white'}>
|
||||
{i === cursor ? '▶ ' : ' '}{c.code} – {c.name}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="column">
|
||||
<Text color={focus ? 'cyan' : 'gray'}>Land * (Suche)</Text>
|
||||
<Box>
|
||||
<Text color="gray"> › </Text>
|
||||
<Text>{query || (focus ? '▌' : '')}</Text>
|
||||
</Box>
|
||||
{focus && filtered.length > 0 && (
|
||||
<Box flexDirection="column" paddingLeft={2}>
|
||||
{filtered.map((c, i) => (
|
||||
<Box key={c.code}>
|
||||
<Text color={i === cursor ? 'cyan' : 'white'}>
|
||||
{i === cursor ? '▶ ' : ' '}{c.code} – {c.name}
|
||||
</Text>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
{focus && query && filtered.length === 0 && (
|
||||
<Box paddingLeft={2}>
|
||||
<Text color="yellow">Kein Land gefunden.</Text>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue