Add skeleton for a 'related field'

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

@@ -6,6 +6,7 @@ import {
   Modal,
   NumberInput,
   ScrollArea,
+  Select,
   TextInput
 } from '@mantine/core';
 import { Button, Center, Group, Loader, Stack, Text } from '@mantine/core';
@@ -38,23 +39,18 @@ export type ApiFormFieldType = {
   error?: any;
 };
 
-/**
+/*
- * Render an individual form field
+ * Build a complete field definition based on the provided data
  */
-function ApiFormField({
+function constructField({
   form,
   field,
-  definitions,
+  definitions
-  onValueChange
 }: {
   form: UseFormReturnType<Record<string, unknown>>;
   field: ApiFormFieldType;
   definitions: ApiFormFieldType[];
-  onValueChange: (fieldName: string, value: any) => void;
 }) {
-  // Extract field definition from provided data
-  // Where user has provided specific data, override the API definition
-  const definition: ApiFormFieldType = useMemo(() => {
   let def = definitions.find((def) => def.name == field.name) || field;
 
   def = {
@@ -79,7 +75,60 @@ function ApiFormField({
   }
 
   return def;
-  }, [field, definitions]);
+}
+
+/**
+ * Render a 'select' field for searching the database against a particular model type
+ */
+function RelatedModelField({
+  form,
+  field,
+  definitions
+}: {
+  form: UseFormReturnType<Record<string, unknown>>;
+  field: ApiFormFieldType;
+  definitions: ApiFormFieldType[];
+}) {
+  // Extract field definition from provided data
+  // Where user has provided specific data, override the API definition
+  const definition: ApiFormFieldType = useMemo(
+    () =>
+      constructField({
+        form: form,
+        field: field,
+        definitions: definitions
+      }),
+    [form.values, field, definitions]
+  );
+
+  return <Select withinPortal={true} {...definition} data={[]} />;
+}
+
+/**
+ * Render an individual form field
+ */
+function ApiFormField({
+  form,
+  field,
+  definitions,
+  onValueChange
+}: {
+  form: UseFormReturnType<Record<string, unknown>>;
+  field: ApiFormFieldType;
+  definitions: ApiFormFieldType[];
+  onValueChange: (fieldName: string, value: any) => void;
+}) {
+  // Extract field definition from provided data
+  // Where user has provided specific data, override the API definition
+  const definition: ApiFormFieldType = useMemo(
+    () =>
+      constructField({
+        form: form,
+        field: field,
+        definitions: definitions
+      }),
+    [form.values, field, definitions]
+  );
 
   // Callback helper when form value changes
   function onChange(value: any) {
@@ -88,6 +137,14 @@ function ApiFormField({
   }
 
   switch (definition.fieldType) {
+    case 'related field':
+      return (
+        <RelatedModelField
+          form={form}
+          field={definition}
+          definitions={definitions}
+        />
+      );
     case 'url':
     case 'string':
       return (

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

@@ -60,7 +60,7 @@ export default function Home() {
         variant="outline"
         color="blue"
       >
-        Open Form
+        Edit Part Form
       </Button>
     </>
   );