From 6ca25d400a3d40bf8bf966b4f099a70e86e2e3fe Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 14 Mar 2024 13:32:54 +0100
Subject: [PATCH] DRY

---
 .../app/blocks/FormBlockComponent.svelte      | 56 +++++++++++++++++++
 .../app/blocks/MultiStepFormblock.svelte      | 48 +---------------
 .../app/blocks/form/InnerFormBlock.svelte     | 49 +---------------
 3 files changed, 60 insertions(+), 93 deletions(-)
 create mode 100644 packages/client/src/components/app/blocks/FormBlockComponent.svelte

diff --git a/packages/client/src/components/app/blocks/FormBlockComponent.svelte b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
new file mode 100644
index 0000000000..aa62f628c7
--- /dev/null
+++ b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
@@ -0,0 +1,56 @@
+<script>
+  import BlockComponent from "components/BlockComponent.svelte"
+
+  export let field
+  export let schema
+  export let order
+
+  const FieldTypeToComponentMap = {
+    string: "stringfield",
+    number: "numberfield",
+    bigint: "bigintfield",
+    options: "optionsfield",
+    array: "multifieldselect",
+    boolean: "booleanfield",
+    longform: "longformfield",
+    datetime: "datetimefield",
+    attachment: "attachmentfield",
+    link: "relationshipfield",
+    json: "jsonfield",
+    barcodeqr: "codescanner",
+    bb_reference: "bbreferencefield",
+  }
+
+  const getComponentForField = field => {
+    const fieldSchemaName = field.field || field.name
+    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
+      return null
+    }
+    const type = schema[fieldSchemaName].type
+    return FieldTypeToComponentMap[type]
+  }
+
+  const getPropsForField = field => {
+    let fieldProps = field._component
+      ? {
+          ...field,
+        }
+      : {
+          field: field.name,
+          label: field.name,
+          placeholder: field.name,
+          _instanceName: field.name,
+        }
+    return fieldProps
+  }
+</script>
+
+{#if getComponentForField(field) && field.active}
+  <BlockComponent
+    type={getComponentForField(field)}
+    props={getPropsForField(field)}
+    {order}
+    interactive
+    name={field?.field}
+  />
+{/if}
diff --git a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
index b24c2f418a..43cb7b6578 100644
--- a/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
+++ b/packages/client/src/components/app/blocks/MultiStepFormblock.svelte
@@ -6,6 +6,7 @@
   import { Utils } from "@budibase/frontend-core"
   import FormBlockWrapper from "./form/FormBlockWrapper.svelte"
   import { writable } from "svelte/store"
+  import FormBlockComponent from "./FormBlockComponent.svelte"
 
   export let actionType
   export let rowId
@@ -23,22 +24,6 @@
   const currentStep = writable(1)
   setContext("current-step", currentStep)
 
-  const FieldTypeToComponentMap = {
-    string: "stringfield",
-    number: "numberfield",
-    bigint: "bigintfield",
-    options: "optionsfield",
-    array: "multifieldselect",
-    boolean: "booleanfield",
-    longform: "longformfield",
-    datetime: "datetimefield",
-    attachment: "attachmentfield",
-    link: "relationshipfield",
-    json: "jsonfield",
-    barcodeqr: "codescanner",
-    bb_reference: "bbreferencefield",
-  }
-
   let schema
 
   $: fetchSchema(dataSource)
@@ -68,27 +53,6 @@
     currentStep.set(newStep + 1)
   }
 
-  const getPropsForField = field => {
-    if (field._component) {
-      return field
-    }
-    return {
-      field: field.name,
-      label: field.name,
-      placeholder: field.name,
-      _instanceName: field.name,
-    }
-  }
-
-  const getComponentForField = field => {
-    const fieldSchemaName = field.field || field.name
-    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
-      return null
-    }
-    const type = schema[fieldSchemaName].type
-    return FieldTypeToComponentMap[type]
-  }
-
   const fetchSchema = async () => {
     schema = (await fetchDatasourceSchema(dataSource)) || {}
   }
@@ -195,15 +159,7 @@
               class:mobile={$context.device.mobile}
             >
               {#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)}
-                {#if getComponentForField(field)}
-                  <BlockComponent
-                    type={getComponentForField(field)}
-                    props={getPropsForField(field)}
-                    order={fieldIdx}
-                    interactive
-                    name={field.field}
-                  />
-                {/if}
+                <FormBlockComponent {field} {schema} order={fieldIdx} />
               {/each}
             </div>
           </BlockComponent>
diff --git a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
index 24d4cfa14c..b0733f3f4b 100644
--- a/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
+++ b/packages/client/src/components/app/blocks/form/InnerFormBlock.svelte
@@ -2,6 +2,7 @@
   import BlockComponent from "components/BlockComponent.svelte"
   import Placeholder from "components/app/Placeholder.svelte"
   import { getContext } from "svelte"
+  import FormBlockComponent from "../FormBlockComponent.svelte"
 
   export let dataSource
   export let actionType
@@ -14,49 +15,11 @@
   export let buttonPosition = "bottom"
   export let schema
 
-  const FieldTypeToComponentMap = {
-    string: "stringfield",
-    number: "numberfield",
-    bigint: "bigintfield",
-    options: "optionsfield",
-    array: "multifieldselect",
-    boolean: "booleanfield",
-    longform: "longformfield",
-    datetime: "datetimefield",
-    attachment: "attachmentfield",
-    link: "relationshipfield",
-    json: "jsonfield",
-    barcodeqr: "codescanner",
-    bb_reference: "bbreferencefield",
-  }
   const context = getContext("context")
 
   let formId
 
   $: renderHeader = buttons || title
-
-  const getComponentForField = field => {
-    const fieldSchemaName = field.field || field.name
-    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
-      return null
-    }
-    const type = schema[fieldSchemaName].type
-    return FieldTypeToComponentMap[type]
-  }
-
-  const getPropsForField = field => {
-    let fieldProps = field._component
-      ? {
-          ...field,
-        }
-      : {
-          field: field.name,
-          label: field.name,
-          placeholder: field.name,
-          _instanceName: field.name,
-        }
-    return fieldProps
-  }
 </script>
 
 {#if fields?.length}
@@ -132,15 +95,7 @@
         <BlockComponent type="container">
           <div class="form-block fields" class:mobile={$context.device.mobile}>
             {#each fields as field, idx}
-              {#if getComponentForField(field) && field.active}
-                <BlockComponent
-                  type={getComponentForField(field)}
-                  props={getPropsForField(field)}
-                  order={idx}
-                  interactive
-                  name={field?.field}
-                />
-              {/if}
+              <FormBlockComponent {field} {schema} order={idx} />
             {/each}
           </div>
         </BlockComponent>