From 7659fa808101f235157569bc08e04bd8b0f0a010 Mon Sep 17 00:00:00 2001
From: connoratrug <47183404+connoratrug@users.noreply.github.com>
Date: Mon, 20 Jan 2025 09:58:27 +0100
Subject: [PATCH] feat: expose the filled out form values ( and errors) (#4612)

---
 .gitignore                                    |   1 +
 .../components/form/Fields.vue                |  25 +++--
 apps/tailwind-components/pages/Form.story.vue | 100 +++++++++++++-----
 apps/tailwind-components/playwright.config.ts |   2 +-
 .../tests/components/form/renderForm.spec.ts  |   6 +-
 5 files changed, 93 insertions(+), 41 deletions(-)

diff --git a/.gitignore b/.gitignore
index a96000fd5e..a21329e050 100644
--- a/.gitignore
+++ b/.gitignore
@@ -68,3 +68,4 @@ requirements.txt
 e2e/.auth
 e2e/e2e/.auth
 e2e/test-results/
+apps/tailwind-components/test-results/.last-run.json
diff --git a/apps/tailwind-components/components/form/Fields.vue b/apps/tailwind-components/components/form/Fields.vue
index 2a13d79949..55fcedc568 100644
--- a/apps/tailwind-components/components/form/Fields.vue
+++ b/apps/tailwind-components/components/form/Fields.vue
@@ -4,6 +4,7 @@ import type {
   columnId,
   columnValue,
   IColumn,
+  IFieldError,
   ITableMetaData,
 } from "../../../metadata-utils/src/types";
 
@@ -12,6 +13,8 @@ const props = defineProps<{
   data: Record<columnId, columnValue>[];
 }>();
 
+const emit = defineEmits(["error", "update:modelValue"]);
+
 const status = reactive({
   pristine: true,
   touched: false,
@@ -42,7 +45,7 @@ const chapters = computed(() => {
   }, [] as IChapter[]);
 });
 
-const dataMap = reactive(
+const dataMap = reactive<Record<columnId, columnValue>>(
   Object.fromEntries(
     props.metadata.columns
       .filter((column) => column.columnType !== "HEADING")
@@ -50,7 +53,7 @@ const dataMap = reactive(
   )
 );
 
-const errorMap = reactive(
+const errorMap = reactive<Record<columnId, IFieldError[]>>(
   Object.fromEntries(
     props.metadata.columns
       .filter((column) => column.columnType !== "HEADING")
@@ -83,15 +86,19 @@ function validate() {
   });
 }
 
+function onUpdate(column: IColumn, $event: columnValue) {
+  dataMap[column.id] = $event;
+  emit("update:modelValue", dataMap);
+}
+function onErrors(column: IColumn, $event: IFieldError[]) {
+  errorMap[column.id] = $event;
+  emit("error", errorMap);
+}
+
 defineExpose({ validate });
 </script>
 <template>
   <div>
-    <div>
-      dataMap: {{ dataMap }}
-      <hr class="my-2" />
-      errorMap: {{ errorMap }}
-    </div>
     <div class="first:pt-0 pt-10" v-for="chapter in chapters">
       <h2
         class="font-display md:text-heading-5xl text-heading-5xl text-form-header pb-8"
@@ -104,8 +111,8 @@ defineExpose({ validate });
           :column="column"
           :data="dataMap[column.id]"
           :errors="errorMap[column.id]"
-          @update:modelValue="dataMap[column.id] = $event"
-          @error="errorMap[column.id] = $event"
+          @update:modelValue="onUpdate(column, $event)"
+          @error="onErrors(column, $event)"
           @blur="validate"
           ref="formFields"
         ></FormField>
diff --git a/apps/tailwind-components/pages/Form.story.vue b/apps/tailwind-components/pages/Form.story.vue
index ad5d786fbe..38410566c5 100644
--- a/apps/tailwind-components/pages/Form.story.vue
+++ b/apps/tailwind-components/pages/Form.story.vue
@@ -2,6 +2,7 @@
 import type { FormFields } from "#build/components";
 import type {
   columnValue,
+  IFieldError,
   ISchemaMetaData,
   ITableMetaData,
 } from "../../metadata-utils/src/types";
@@ -36,37 +37,78 @@ function refetch() {
 const data = ref([] as Record<string, columnValue>[]);
 
 const formFields = ref<InstanceType<typeof FormFields>>();
+
+const formValues = ref<Record<string, columnValue>>({});
+
+function onModelUpdate(value: Record<string, columnValue>) {
+  console.log("story update", value);
+  formValues.value = value;
+}
+
+const errors = ref<Record<string, IFieldError[]>>({});
+
+function onErrors(newErrors: Record<string, IFieldError[]>) {
+  errors.value = newErrors;
+}
 </script>
 
 <template>
-  <div>Demo controles:</div>
-
-  <div class="p-4 border-2 mb-2">
-    <select
-      @change="refetch()"
-      v-model="sampleType"
-      class="border-1 border-black"
-    >
-      <option value="simple">Simple form example</option>
-      <option value="complex">Complex form example</option>
-    </select>
-
-    <div>schema id = {{ schemaId }}</div>
-    <div>table id = {{ tableId }}</div>
-
-    <button
-      class="border-gray-900 border-[1px] p-2 bg-gray-200"
-      @click="formFields?.validate"
-    >
-      External Validate
-    </button>
-  </div>
+  <div class="flex flex-row">
+    <FormFields
+      v-if="tableMeta && status == 'success'"
+      ref="formFields"
+      class="basis-1/2 p-8"
+      :metadata="tableMeta"
+      :data="data"
+      @update:model-value="onModelUpdate"
+      @error="onErrors($event)"
+    ></FormFields>
 
-  <FormFields
-    v-if="tableMeta && status == 'success'"
-    class="p-8"
-    :metadata="tableMeta"
-    :data="data"
-    ref="formFields"
-  ></FormFields>
+    <div class="basis-1/2">
+      <div>Demo controls, settings and status:</div>
+
+      <div class="p-4 border-2 mb-2">
+        <select
+          @change="refetch()"
+          v-model="sampleType"
+          class="border-1 border-black"
+        >
+          <option value="simple">Simple form example</option>
+          <option value="complex">Complex form example</option>
+        </select>
+
+        <div>schema id = {{ schemaId }}</div>
+        <div>table id = {{ tableId }}</div>
+
+        <button
+          class="border-gray-900 border-[1px] p-2 bg-gray-200"
+          @click="formFields?.validate"
+        >
+          External Validate
+        </button>
+
+        <div class="mt-4 flex flex-row">
+          <div v-if="Object.keys(formValues).length" class="basis-1/2">
+            <h3 class="text-label">Values</h3>
+            <dl class="flex">
+              <template v-for="(value, key) in formValues">
+                <dt v-if="value" class="font-bold">{{ key }}:</dt>
+                <dd v-if="value" class="ml-1">{{ value }}</dd>
+              </template>
+            </dl>
+          </div>
+          <div v-if="Object.keys(errors).length" class="basis-1/2">
+            <h3 class="text-label">Errors</h3>
+
+            <dl class="flex">
+              <template v-for="(value, key) in errors">
+                <dt v-if="value.length" class="font-bold">{{ key }}:</dt>
+                <dd v-if="value.length" class="ml-1">{{ value }}</dd>
+              </template>
+            </dl>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
diff --git a/apps/tailwind-components/playwright.config.ts b/apps/tailwind-components/playwright.config.ts
index 5d2fefc13c..ed52fe1bf1 100644
--- a/apps/tailwind-components/playwright.config.ts
+++ b/apps/tailwind-components/playwright.config.ts
@@ -18,7 +18,7 @@ export default defineConfig<ConfigOptions>({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: process.env.E2E_BASE_URL || "https://emx2.dev.molgenis.org/", // change to specific http://localhost:*/, preview, etc.
+    baseURL: process.env.E2E_BASE_URL || "http://localhost:3000/", // change to specific http://localhost:*/, preview, etc.
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
diff --git a/apps/tailwind-components/tests/components/form/renderForm.spec.ts b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
index 5f2421fc73..afea50f44e 100644
--- a/apps/tailwind-components/tests/components/form/renderForm.spec.ts
+++ b/apps/tailwind-components/tests/components/form/renderForm.spec.ts
@@ -23,7 +23,9 @@ test("it should render the form", async ({ page }) => {
 
 test("it should handle input", async ({ page }) => {
   await page.goto(`${route}Form.story`);
-  await page.getByLabel("name").click();
-  await page.getByLabel("name").fill("test");
+  await page.getByLabel("name").click({ delay: 500 }); // wait for hydration to complete
+  await page.getByLabel("name").pressSequentially("test");
   await expect(page.getByLabel("name")).toHaveValue("test");
+  await page.getByRole("heading", { name: "Values" }).click();
+  await expect(page.getByRole("definition")).toContainText("test");
 });