import { faNetworkWired } from '@fortawesome/free-solid-svg-icons'; import { useFormikContext } from 'formik'; import tw from 'twin.macro'; import getAllocations from '@/api/admin/nodes/getAllocations'; import { useServerFromRoute } from '@/api/admin/server'; import AdminBox from '@/components/admin/AdminBox'; import Label from '@/components/elements/Label'; import Select from '@/components/elements/Select'; import type { Option } from '@/components/elements/SelectField'; import SelectField, { AsyncSelectField } from '@/components/elements/SelectField'; export default () => { const { isSubmitting } = useFormikContext(); const { data: server } = useServerFromRoute(); const loadOptions = async (inputValue: string, callback: (options: Option[]) => void) => { if (!server) { callback([] as Option[]); return; } const allocations = await getAllocations(server.nodeId, { ip: inputValue, server_id: '0' }); callback( allocations.map(a => { return { value: a.id.toString(), label: a.getDisplayText() }; }), ); }; return ( <AdminBox icon={faNetworkWired} title={'Networking'} isLoading={isSubmitting}> <div css={tw`grid grid-cols-1 gap-4 lg:gap-6`}> <div> <Label htmlFor={'allocationId'}>Primary Allocation</Label> <Select id={'allocationId'} name={'allocationId'}> {server?.relationships.allocations?.map(a => ( <option key={a.id} value={a.id}> {a.getDisplayText()} </option> ))} </Select> </div> <AsyncSelectField id={'addAllocations'} name={'addAllocations'} label={'Add Allocations'} loadOptions={loadOptions} isMulti /> <SelectField id={'removeAllocations'} name={'removeAllocations'} label={'Remove Allocations'} options={ server?.relationships.allocations?.map(a => { return { value: a.id.toString(), label: a.getDisplayText() }; }) || [] } isMulti isSearchable /> </div> </AdminBox> ); };