From 660cf3a50cebc89cbc6beb2d489035436437f187 Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Tue, 10 Dec 2024 13:30:27 +0100
Subject: [PATCH] feat: initial form connection

---
 .../components/form/Field.vue                 | 14 +++++++++++++
 .../components/form/FieldInput.vue            | 20 +++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/apps/tailwind-components/components/form/Field.vue b/apps/tailwind-components/components/form/Field.vue
index e6926a7bee..609f1a6620 100644
--- a/apps/tailwind-components/components/form/Field.vue
+++ b/apps/tailwind-components/components/form/Field.vue
@@ -35,6 +35,18 @@ function validate(value: columnValue) {
 
   formFieldInput.value.validate(value);
 }
+
+const refData = ref();
+
+onMounted(async () => {
+  if (["ONTOLOGY", "ONTOLOGY_ARRAY"].includes(props.column.columnType)) {
+    const response = await fetchTableData(
+      props.column.refSchemaId as string,
+      props.column.refTableId as string
+    );
+    refData.value = response.rows.map((row) => row.name);
+  }
+});
 </script>
 
 <template>
@@ -49,11 +61,13 @@ function validate(value: columnValue) {
       {{ column.description }}
     </div>
     <div>
+      {{ column }}
       <FormFieldInput
         :type="column.columnType"
         :id="column.id"
         :label="column.label"
         :data="data"
+        :options="refData ? refData : null"
         :required="!!column.required"
         :aria-invalid="hasError"
         :aria-desribedBy="`${column.id}-input-error`"
diff --git a/apps/tailwind-components/components/form/FieldInput.vue b/apps/tailwind-components/components/form/FieldInput.vue
index b15b55b1b6..de7df07e7b 100644
--- a/apps/tailwind-components/components/form/FieldInput.vue
+++ b/apps/tailwind-components/components/form/FieldInput.vue
@@ -3,6 +3,7 @@ import type {
   InputString,
   InputTextArea,
   InputPlaceHolder,
+  InputListbox,
 } from "#build/components";
 import type {
   columnId,
@@ -10,6 +11,8 @@ import type {
   CellValueType,
 } from "../../../metadata-utils/src/types";
 
+import type { IListboxValue } from "~/types/listbox";
+
 type inputComponent =
   | InstanceType<typeof InputString>
   | InstanceType<typeof InputTextArea>
@@ -21,6 +24,7 @@ defineProps<{
   label: string;
   required: boolean;
   data: columnValue;
+  options?: IListboxValue[];
 }>();
 
 defineEmits(["focus", "error", "update:modelValue"]);
@@ -47,7 +51,7 @@ function validate(value: columnValue) {
     :id="id"
     :label="label"
     :required="required"
-    :value="data as string"
+    :value="(data as string)"
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
@@ -58,10 +62,22 @@ function validate(value: columnValue) {
     :id="id"
     :label="label"
     :required="required"
-    :value="data as string"
+    :value="(data as string)"
     @focus="$emit('focus')"
     @update:modelValue="$emit('update:modelValue', $event)"
     @error="$emit('error', $event)"
   ></LazyInputTextArea>
+  <template
+    v-else-if="['ONTOLOGY', 'ONTOLOGY_ARRAY'].includes(type) && options"
+  >
+    <LazyInputListbox
+      ref="input"
+      :id="id"
+      :label-id="id"
+      :required="required"
+      :options="options"
+      :placeholder="`Select a ${id}`"
+    />
+  </template>
   <LazyInputPlaceHolder v-else ref="input" :type="type" />
 </template>