43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
// src/components/PlzSelector.tsx
|
|
import React, { useState } from 'react';
|
|
|
|
interface PlzSelectorProps {
|
|
columns: string[];
|
|
onSubmit: (selectedColumn: string) => void;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
const PlzSelector: React.FC<PlzSelectorProps> = ({ columns, onSubmit, isLoading }) => {
|
|
const [selectedColumn, setSelectedColumn] = useState<string>(columns[0] || '');
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (selectedColumn) {
|
|
onSubmit(selectedColumn);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="plz-selector" style={{ padding: '20px', border: '1px solid #555', borderRadius: '5px', marginTop: '20px' }}>
|
|
<h3>Postal Code Column Not Found</h3>
|
|
<p>Please select the column containing the postal codes (PLZ) from the list below.</p>
|
|
<form onSubmit={handleSubmit}>
|
|
<select
|
|
value={selectedColumn}
|
|
onChange={(e) => setSelectedColumn(e.target.value)}
|
|
style={{ width: '100%', padding: '8px', marginBottom: '10px' }}
|
|
>
|
|
{columns.map(col => (
|
|
<option key={col} value={col}>{col}</option>
|
|
))}
|
|
</select>
|
|
<button type="submit" disabled={isLoading || !selectedColumn} style={{ width: '100%', padding: '10px' }}>
|
|
{isLoading ? 'Confirming...' : 'Confirm'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PlzSelector;
|