76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
|
import { useField } from 'formik';
|
||
|
|
import type { ChangeEvent } from 'react';
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
|
||
|
|
import type { WithRelationships } from '@/api/admin';
|
||
|
|
import type { Egg } from '@/api/admin/egg';
|
||
|
|
import { searchEggs } from '@/api/admin/egg';
|
||
|
|
import Label from '@/components/elements/Label';
|
||
|
|
import Select from '@/components/elements/Select';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
nestId?: number;
|
||
|
|
selectedEggId?: number;
|
||
|
|
onEggSelect: (egg: Egg | null) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ({ nestId, selectedEggId, onEggSelect }: Props) => {
|
||
|
|
const [, , { setValue, setTouched }] = useField<Record<string, string | undefined>>('environment');
|
||
|
|
const [eggs, setEggs] = useState<WithRelationships<Egg, 'variables'>[] | null>(null);
|
||
|
|
|
||
|
|
const selectEgg = (egg: Egg | null) => {
|
||
|
|
if (egg === null) {
|
||
|
|
onEggSelect(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Clear values
|
||
|
|
setValue({});
|
||
|
|
setTouched(true);
|
||
|
|
|
||
|
|
onEggSelect(egg);
|
||
|
|
|
||
|
|
const values: Record<string, any> = {};
|
||
|
|
egg.relationships.variables?.forEach(v => {
|
||
|
|
values[v.environmentVariable] = v.defaultValue;
|
||
|
|
});
|
||
|
|
setValue(values);
|
||
|
|
setTouched(true);
|
||
|
|
};
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (!nestId) {
|
||
|
|
setEggs(null);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
searchEggs(nestId, {})
|
||
|
|
.then(eggs => {
|
||
|
|
setEggs(eggs);
|
||
|
|
selectEgg(eggs[0] || null);
|
||
|
|
})
|
||
|
|
.catch(error => console.error(error));
|
||
|
|
}, [nestId]);
|
||
|
|
|
||
|
|
const onSelectChange = (e: ChangeEvent<HTMLSelectElement>) => {
|
||
|
|
selectEgg(eggs?.find(egg => egg.id.toString() === e.currentTarget.value) || null);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Label>Egg</Label>
|
||
|
|
<Select id={'eggId'} name={'eggId'} defaultValue={selectedEggId} onChange={onSelectChange}>
|
||
|
|
{!eggs ? (
|
||
|
|
<option disabled>Loading...</option>
|
||
|
|
) : (
|
||
|
|
eggs.map(v => (
|
||
|
|
<option key={v.id} value={v.id.toString()}>
|
||
|
|
{v.name}
|
||
|
|
</option>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</Select>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|