Creating multiple entries with AntD's Create and useForm with Supabase

I have 2 tables: brokerage_accounts and brokerage_reports. When creating a brokerage_reports entry, I reference a brokerage_accounts entry. What I'd like to do is have a switch where the user submitting the form can select to create a single entry, or multiple entries for all brokerage_accounts entries. I know it needs to be done with a handleOnFinish function, but am unsure how to tweak my code to do what's needed.

export const BrokerageReportCreate: React.FC = () => {
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: () => {
return {
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
};
},
});

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_owner',
optionValue: 'id',
});
const [massReport, setMassReport] = useState(true);

const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
onFinish(values as IBrokerageReport);
} else {
onFinish(values as IBrokerageReport);
}
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish as (values: object) => void}>
<Switch defaultChecked checked={massReport} onChange={(checked) => setMassReport(checked)} />
{!massReport && (
<Form.Item
label='Select single brokerage account'
name='brokerage_account_id'
>
<Select {...userSelectProps} />
</Form.Item>
)}

<Form.Item
label='Reporting for which quarter?'
name='reportDate'
>
<DatePicker className='w-full' onChange={handleDateChange} picker='quarter' />
</Form.Item>
<Form.Item label='Set message' name='message'>
<TextArea rows={4} />
</Form.Item>
</Form>
</Create>
);
};

export const BrokerageReportCreate: React.FC = () => {
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: () => {
return {
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
};
},
});

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_owner',
optionValue: 'id',
});
const [massReport, setMassReport] = useState(true);

const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
onFinish(values as IBrokerageReport);
} else {
onFinish(values as IBrokerageReport);
}
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish as (values: object) => void}>
<Switch defaultChecked checked={massReport} onChange={(checked) => setMassReport(checked)} />
{!massReport && (
<Form.Item
label='Select single brokerage account'
name='brokerage_account_id'
>
<Select {...userSelectProps} />
</Form.Item>
)}

<Form.Item
label='Reporting for which quarter?'
name='reportDate'
>
<DatePicker className='w-full' onChange={handleDateChange} picker='quarter' />
</Form.Item>
<Form.Item label='Set message' name='message'>
<TextArea rows={4} />
</Form.Item>
</Form>
</Create>
);
};

export const BrokerageReportCreate: React.FC = () => {
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: () => {
return {
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
};
},
});

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_owner',
optionValue: 'id',
});
const [massReport, setMassReport] = useState(true);

const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
onFinish(values as IBrokerageReport);
} else {
onFinish(values as IBrokerageReport);
}
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish as (values: object) => void}>
<Switch defaultChecked checked={massReport} onChange={(checked) => setMassReport(checked)} />
{!massReport && (
<Form.Item
label='Select single brokerage account'
name='brokerage_account_id'
>
<Select {...userSelectProps} />
</Form.Item>
)}

<Form.Item
label='Reporting for which quarter?'
name='reportDate'
>
<DatePicker className='w-full' onChange={handleDateChange} picker='quarter' />
</Form.Item>
<Form.Item label='Set message' name='message'>
<TextArea rows={4} />
</Form.Item>
</Form>
</Create>
);
};

export const BrokerageReportCreate: React.FC = () => {
const { form, formProps, onFinish, saveButtonProps } = useForm<IBrokerageAccount>({
successNotification: () => {
return {
message: `Successfully added a new brokerage account report.`,
description: 'Success',
type: 'success',
};
},
});

const { selectProps: userSelectProps } = useSelect<IBrokerageAccount>({
resource: 'brokerage_accounts',
optionLabel: 'account_owner',
optionValue: 'id',
});
const [massReport, setMassReport] = useState(true);

const handleOnFinish = (values: IBrokerageReport) => {
if (massReport) {
onFinish(values as IBrokerageReport);
} else {
onFinish(values as IBrokerageReport);
}
};

return (
<Create saveButtonProps={saveButtonProps}>
<Form {...formProps} layout='vertical' onFinish={handleOnFinish as (values: object) => void}>
<Switch defaultChecked checked={massReport} onChange={(checked) => setMassReport(checked)} />
{!massReport && (
<Form.Item
label='Select single brokerage account'
name='brokerage_account_id'
>
<Select {...userSelectProps} />
</Form.Item>
)}

<Form.Item
label='Reporting for which quarter?'
name='reportDate'
>
<DatePicker className='w-full' onChange={handleDateChange} picker='quarter' />
</Form.Item>
<Form.Item label='Set message' name='message'>
<TextArea rows={4} />
</Form.Item>
</Form>
</Create>
);
};

Creating multiple entries with AntD's Create and useForm with Supabase

Similar Threads

Similar Threads

Similar Threads