inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-06-15 19:45:46 +00:00
Code Activity

Add cancel and submit buttons

Browse Source
This commit is contained in:
Oliver Walters
2023-07-27 14:21:26 +10:00
parent c57b1c0b33
commit f8412aa971
1 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/frontend/src/components/forms/ApiForm.tsx
View File

@ -1,5 +1,6 @@
import { Modal } from '@mantine/core'; import { t } from '@lingui/macro';
import { Center, Loader, Stack, Text } from '@mantine/core'; import { Divider, Modal } from '@mantine/core';
import { Button, Center, Group, Loader, Stack, Text } from '@mantine/core';
import { useForm } from '@mantine/form'; import { useForm } from '@mantine/form';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { AxiosResponse } from 'axios'; import { AxiosResponse } from 'axios';
@ -55,13 +56,17 @@ export function ApiForm({
opened, opened,
onClose, onClose,
onFormSuccess, onFormSuccess,
onFormError onFormError,
cancelText = t`Cancel`,
submitText = t`Submit`
}: { }: {
name: string; name: string;
url: string; url: string;
pk?: number; pk?: number;
title: string; title: string;
fields: ApiFormField[]; fields: ApiFormField[];
cancelText?: string;
submitText?: string;
opened: boolean; opened: boolean;
onClose?: () => void; onClose?: () => void;
onFormSuccess?: () => void; onFormSuccess?: () => void;
@ -73,8 +78,6 @@ export function ApiForm({
// Form field definitions (via API) // Form field definitions (via API)
const [fieldDefinitions, setFieldDefinitions] = useState<ApiFormField[]>([]); const [fieldDefinitions, setFieldDefinitions] = useState<ApiFormField[]>([]);
const fetchFieldDefinitions = async () => {};
const definitionQuery = useQuery({ const definitionQuery = useQuery({
enabled: opened && !!url, enabled: opened && !!url,
queryKey: ['form-definition', name, url, pk, fields], queryKey: ['form-definition', name, url, pk, fields],
@ -103,13 +106,22 @@ export function ApiForm({
return ( return (
<Modal opened={opened} onClose={onClose} title={title}> <Modal opened={opened} onClose={onClose} title={title}>
<Stack> <Stack>
<Center> <Divider />
{definitionQuery.isFetching && <Loader />} {definitionQuery.isFetching && (
Hello world <Center>
{definitionQuery.isSuccess && <Text>Success!</Text>} <Loader />
{definitionQuery.isError && <Text>Error!</Text>} </Center>
{definitionQuery.isLoading && <Text>Loading...</Text>} )}
</Center> {!definitionQuery.isFetching && <Text>Form definition fetched!</Text>}
<Divider />
<Group position="right">
<Button onClick={onClose} variant="outline" color="red">
{cancelText}
</Button>
<Button onClick={() => null} variant="outline" color="green">
{submitText}
</Button>
</Group>
</Stack> </Stack>
</Modal> </Modal>
); );