From f8412aa971113c68ab5972624ff2e1d5e0418e44 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 27 Jul 2023 14:21:26 +1000
Subject: [PATCH] Add cancel and submit buttons

---
 src/frontend/src/components/forms/ApiForm.tsx | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/components/forms/ApiForm.tsx b/src/frontend/src/components/forms/ApiForm.tsx
index 63c7b3638e..c04b49d48c 100644
--- a/src/frontend/src/components/forms/ApiForm.tsx
+++ b/src/frontend/src/components/forms/ApiForm.tsx
@@ -1,5 +1,6 @@
-import { Modal } from '@mantine/core';
-import { Center, Loader, Stack, Text } from '@mantine/core';
+import { t } from '@lingui/macro';
+import { Divider, Modal } from '@mantine/core';
+import { Button, Center, Group, Loader, Stack, Text } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useQuery } from '@tanstack/react-query';
 import { AxiosResponse } from 'axios';
@@ -55,13 +56,17 @@ export function ApiForm({
   opened,
   onClose,
   onFormSuccess,
-  onFormError
+  onFormError,
+  cancelText = t`Cancel`,
+  submitText = t`Submit`
 }: {
   name: string;
   url: string;
   pk?: number;
   title: string;
   fields: ApiFormField[];
+  cancelText?: string;
+  submitText?: string;
   opened: boolean;
   onClose?: () => void;
   onFormSuccess?: () => void;
@@ -73,8 +78,6 @@ export function ApiForm({
   // Form field definitions (via API)
   const [fieldDefinitions, setFieldDefinitions] = useState<ApiFormField[]>([]);
 
-  const fetchFieldDefinitions = async () => {};
-
   const definitionQuery = useQuery({
     enabled: opened && !!url,
     queryKey: ['form-definition', name, url, pk, fields],
@@ -103,13 +106,22 @@ export function ApiForm({
   return (
     <Modal opened={opened} onClose={onClose} title={title}>
       <Stack>
-        <Center>
-          {definitionQuery.isFetching && <Loader />}
-          Hello world
-          {definitionQuery.isSuccess && <Text>Success!</Text>}
-          {definitionQuery.isError && <Text>Error!</Text>}
-          {definitionQuery.isLoading && <Text>Loading...</Text>}
-        </Center>
+        <Divider />
+        {definitionQuery.isFetching && (
+          <Center>
+            <Loader />
+          </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>
     </Modal>
   );