mirror of
https://github.com/s-frick/effigenix.git
synced 2026-03-28 11:59:35 +01:00
feat(tui): Edit-Screen für Lagerort-Bearbeitung (Name, Temperaturbereich)
StorageLocationEditScreen mit Formular für Name und Temperaturbereich. StorageType wird als immutable angezeigt. Erreichbar über [Bearbeiten] im DetailScreen. Vervollständigt Story 1.2 im Frontend.
This commit is contained in:
parent
614f3ece30
commit
5020df5d93
6 changed files with 192 additions and 4 deletions
|
|
@ -36,6 +36,7 @@ import { InventoryMenu } from './components/inventory/InventoryMenu.js';
|
|||
import { StorageLocationListScreen } from './components/inventory/StorageLocationListScreen.js';
|
||||
import { StorageLocationCreateScreen } from './components/inventory/StorageLocationCreateScreen.js';
|
||||
import { StorageLocationDetailScreen } from './components/inventory/StorageLocationDetailScreen.js';
|
||||
import { StorageLocationEditScreen } from './components/inventory/StorageLocationEditScreen.js';
|
||||
import { StockBatchEntryScreen } from './components/inventory/StockBatchEntryScreen.js';
|
||||
import { AddBatchScreen } from './components/inventory/AddBatchScreen.js';
|
||||
// Produktion
|
||||
|
|
@ -114,6 +115,7 @@ function ScreenRouter() {
|
|||
{current === 'storage-location-list' && <StorageLocationListScreen />}
|
||||
{current === 'storage-location-create' && <StorageLocationCreateScreen />}
|
||||
{current === 'storage-location-detail' && <StorageLocationDetailScreen />}
|
||||
{current === 'storage-location-edit' && <StorageLocationEditScreen />}
|
||||
{current === 'stock-batch-entry' && <StockBatchEntryScreen />}
|
||||
{current === 'stock-add-batch' && <AddBatchScreen />}
|
||||
{current === 'stock-list' && <StockListScreen />}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,11 @@ import { SuccessDisplay } from '../shared/SuccessDisplay.js';
|
|||
import { ConfirmDialog } from '../shared/ConfirmDialog.js';
|
||||
import { client } from '../../utils/api-client.js';
|
||||
|
||||
type MenuAction = 'toggle-status' | 'back';
|
||||
type MenuAction = 'edit' | 'toggle-status' | 'back';
|
||||
type Mode = 'menu' | 'confirm-status';
|
||||
|
||||
const MENU_ITEMS: { id: MenuAction; label: (loc: StorageLocationDTO) => string }[] = [
|
||||
{ id: 'edit', label: () => '[Bearbeiten]' },
|
||||
{ id: 'toggle-status', label: (loc) => loc.active ? '[Deaktivieren]' : '[Aktivieren]' },
|
||||
{ id: 'back', label: () => '[Zurück]' },
|
||||
];
|
||||
|
|
@ -23,7 +24,7 @@ function errorMessage(err: unknown): string {
|
|||
}
|
||||
|
||||
export function StorageLocationDetailScreen() {
|
||||
const { params, back } = useNavigation();
|
||||
const { params, back, navigate } = useNavigation();
|
||||
const storageLocationId = params['storageLocationId'] ?? '';
|
||||
const { activateStorageLocation, deactivateStorageLocation } = useStorageLocations();
|
||||
|
||||
|
|
@ -61,6 +62,9 @@ export function StorageLocationDetailScreen() {
|
|||
if (!item) return;
|
||||
|
||||
switch (item.id) {
|
||||
case 'edit':
|
||||
navigate('storage-location-edit', { storageLocationId: location.id });
|
||||
break;
|
||||
case 'toggle-status':
|
||||
setMode('confirm-status');
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,159 @@
|
|||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { Box, Text, useInput } from 'ink';
|
||||
import type { StorageLocationDTO, StorageType } from '@effigenix/api-client';
|
||||
import { STORAGE_TYPE_LABELS } from '@effigenix/api-client';
|
||||
import { useNavigation } from '../../state/navigation-context.js';
|
||||
import { useStorageLocations } from '../../hooks/useStorageLocations.js';
|
||||
import { FormInput } from '../shared/FormInput.js';
|
||||
import { LoadingSpinner } from '../shared/LoadingSpinner.js';
|
||||
import { ErrorDisplay } from '../shared/ErrorDisplay.js';
|
||||
import { client } from '../../utils/api-client.js';
|
||||
|
||||
type Field = 'name' | 'minTemperature' | 'maxTemperature';
|
||||
const FIELDS: Field[] = ['name', 'minTemperature', 'maxTemperature'];
|
||||
|
||||
const FIELD_LABELS: Record<Field, string> = {
|
||||
name: 'Name',
|
||||
minTemperature: 'Min. Temperatur (°C)',
|
||||
maxTemperature: 'Max. Temperatur (°C)',
|
||||
};
|
||||
|
||||
function errorMessage(err: unknown): string {
|
||||
return err instanceof Error ? err.message : 'Unbekannter Fehler';
|
||||
}
|
||||
|
||||
export function StorageLocationEditScreen() {
|
||||
const { params, replace, back } = useNavigation();
|
||||
const storageLocationId = params['storageLocationId'] ?? '';
|
||||
const { updateStorageLocation } = useStorageLocations();
|
||||
|
||||
const [location, setLocation] = useState<StorageLocationDTO | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [values, setValues] = useState<Record<Field, string>>({
|
||||
name: '',
|
||||
minTemperature: '',
|
||||
maxTemperature: '',
|
||||
});
|
||||
const [activeField, setActiveField] = useState<Field>('name');
|
||||
const [fieldErrors, setFieldErrors] = useState<Partial<Record<Field, string>>>({});
|
||||
|
||||
const loadLocation = useCallback(() => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
client.storageLocations.getById(storageLocationId)
|
||||
.then((loc) => {
|
||||
setLocation(loc);
|
||||
setValues({
|
||||
name: loc.name,
|
||||
minTemperature: loc.temperatureRange?.minTemperature?.toString() ?? '',
|
||||
maxTemperature: loc.temperatureRange?.maxTemperature?.toString() ?? '',
|
||||
});
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err: unknown) => { setError(errorMessage(err)); setLoading(false); });
|
||||
}, [storageLocationId]);
|
||||
|
||||
useEffect(() => { if (storageLocationId) loadLocation(); }, [loadLocation, storageLocationId]);
|
||||
|
||||
const setField = (field: Field) => (value: string) => {
|
||||
setValues((v) => ({ ...v, [field]: value }));
|
||||
};
|
||||
|
||||
useInput((_input, key) => {
|
||||
if (loading || saving) return;
|
||||
|
||||
if (key.tab || key.downArrow) {
|
||||
setActiveField((f) => {
|
||||
const idx = FIELDS.indexOf(f);
|
||||
return FIELDS[(idx + 1) % FIELDS.length] ?? f;
|
||||
});
|
||||
}
|
||||
if (key.upArrow) {
|
||||
setActiveField((f) => {
|
||||
const idx = FIELDS.indexOf(f);
|
||||
return FIELDS[(idx - 1 + FIELDS.length) % FIELDS.length] ?? f;
|
||||
});
|
||||
}
|
||||
if (key.escape) back();
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const errors: Partial<Record<Field, string>> = {};
|
||||
if (!values.name.trim()) errors.name = 'Name ist erforderlich.';
|
||||
setFieldErrors(errors);
|
||||
if (Object.keys(errors).length > 0) return;
|
||||
|
||||
setSaving(true);
|
||||
setError(null);
|
||||
const result = await updateStorageLocation(storageLocationId, {
|
||||
...(values.name.trim() ? { name: values.name.trim() } : {}),
|
||||
...(values.minTemperature.trim() ? { minTemperature: values.minTemperature.trim() } : {}),
|
||||
...(values.maxTemperature.trim() ? { maxTemperature: values.maxTemperature.trim() } : {}),
|
||||
});
|
||||
setSaving(false);
|
||||
|
||||
if (result) {
|
||||
replace('storage-location-detail', { storageLocationId });
|
||||
} else {
|
||||
setError('Speichern fehlgeschlagen.');
|
||||
}
|
||||
};
|
||||
|
||||
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 <LoadingSpinner label="Lade Lagerort..." />;
|
||||
if (error && !location) return <ErrorDisplay message={error} onDismiss={back} />;
|
||||
if (!location) return <Text color="red">Lagerort nicht gefunden.</Text>;
|
||||
|
||||
const typeName = STORAGE_TYPE_LABELS[location.storageType as StorageType] ?? location.storageType;
|
||||
|
||||
if (saving) {
|
||||
return (
|
||||
<Box flexDirection="column" alignItems="center" paddingY={2}>
|
||||
<LoadingSpinner label="Lagerort wird gespeichert..." />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flexDirection="column" gap={1}>
|
||||
<Text color="cyan" bold>Lagerort bearbeiten: {location.name}</Text>
|
||||
{error && <ErrorDisplay message={error} onDismiss={() => setError(null)} />}
|
||||
|
||||
<Box gap={2}>
|
||||
<Text color="gray">Lagertyp:</Text>
|
||||
<Text>{typeName}</Text>
|
||||
<Text color="gray" dimColor>(nicht änderbar)</Text>
|
||||
</Box>
|
||||
|
||||
<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] } : {})}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box marginTop={1}>
|
||||
<Text color="gray" dimColor>
|
||||
Tab/↑↓ Feld wechseln · Enter auf letztem Feld speichern · Escape Abbrechen
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
|
@ -33,6 +33,7 @@ export type Screen =
|
|||
| 'storage-location-list'
|
||||
| 'storage-location-create'
|
||||
| 'storage-location-detail'
|
||||
| 'storage-location-edit'
|
||||
| 'stock-batch-entry'
|
||||
| 'stock-add-batch'
|
||||
| 'stock-list'
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue