Handle date type fields

src/frontend/src/components/forms/ApiForm.tsx

@@ -10,6 +10,7 @@ import {
   TextInput
 } from '@mantine/core';
 import { Button, Center, Group, Loader, Stack, Text } from '@mantine/core';
+import { DateInput } from '@mantine/dates';
 import { UseFormReturnType, useForm } from '@mantine/form';
 import { useDebouncedValue } from '@mantine/hooks';
 import { IconAlertCircle } from '@tabler/icons-react';
@@ -77,6 +78,17 @@ function constructField({
     def.value = value;
   }
 
+  // Change value to a date object if required
+  switch (def.fieldType) {
+    case 'date':
+      if (def.value) {
+        def.value = new Date(def.value);
+      }
+      break;
+    default:
+      break;
+  }
+
   return def;
 }
 
@@ -189,6 +201,15 @@ function ApiFormField({
           onChange={(event) => onChange(event.currentTarget.checked)}
         />
       );
+    case 'date':
+      return (
+        <DateInput
+          radius="sm"
+          {...definition}
+          date={undefined}
+          onChange={(value) => onChange(value)}
+        />
+      );
     case 'integer':
     case 'decimal':
     case 'float':

src/frontend/src/pages/Index/Home.tsx

@@ -8,9 +8,10 @@ import { PlaceholderPill } from '../../components/items/Placeholder';
 import { StylishText } from '../../components/items/StylishText';
 
 export default function Home() {
-  const [formOpened, setFormOpened] = useState(false);
+  const [partFormOpened, setPartFormOpened] = useState(false);
+  const [poFormOpened, setPoFormOpened] = useState(false);
 
-  const fields: ApiFormFieldType[] = [
+  const partFields: ApiFormFieldType[] = [
     {
       name: 'name'
     },
@@ -37,6 +38,18 @@ export default function Home() {
     }
   ];
 
+  const poFields: ApiFormFieldType[] = [
+    {
+      name: 'reference'
+    },
+    {
+      name: 'supplier'
+    },
+    {
+      name: 'target_date'
+    }
+  ];
+
   return (
     <>
       <Group>
@@ -47,21 +60,40 @@ export default function Home() {
       </Group>
       <ApiForm
         name="part-edit"
-        url="/part/1/"
+        url="/part/"
-        fields={fields}
+        pk={1}
+        fields={partFields}
         method="PUT"
         title="Edit Part"
-        opened={formOpened}
+        opened={partFormOpened}
-        onClose={() => setFormOpened(false)}
+        onClose={() => setPartFormOpened(false)}
+        fetchInitialData={true}
+      />
+      <ApiForm
+        name="po-edit"
+        url="/order/po/"
+        pk={1}
+        fields={poFields}
+        method="PUT"
+        title="Edit Purchase Order"
+        opened={poFormOpened}
+        onClose={() => setPoFormOpened(false)}
         fetchInitialData={true}
       />
       <Button
-        onClick={() => setFormOpened(true)}
+        onClick={() => setPartFormOpened(true)}
         variant="outline"
         color="blue"
       >
         Edit Part Form
       </Button>
+      <Button
+        variant="outline"
+        color="blue"
+        onClick={() => setPoFormOpened(true)}
+      >
+        Edit Purchase Order Form
+      </Button>
     </>
   );
 }