From fa84b3fbc2a15917a2deea197779baa64ca65b07 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 13 Mar 2024 15:16:21 +0100
Subject: [PATCH 1/8] Magic strings to enums

---
 .../DataTable/modals/CreateEditColumn.svelte     | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 1bad1ee221..c866f45e46 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -479,7 +479,7 @@
       newError.name = `Column name already in use.`
     }
 
-    if (fieldInfo.type === "auto" && !fieldInfo.subtype) {
+    if (fieldInfo.type === FieldType.AUTO && !fieldInfo.subtype) {
       newError.subtype = `Auto Column requires a type`
     }
 
@@ -540,18 +540,18 @@
     }}
   />
 
-  {#if editableColumn.type === "string"}
+  {#if editableColumn.type === FieldType.STRING}
     <Input
       type="number"
       label="Max Length"
       bind:value={editableColumn.constraints.length.maximum}
     />
-  {:else if editableColumn.type === "options"}
+  {:else if editableColumn.type === FieldType.OPTIONS}
     <OptionSelectDnD
       bind:constraints={editableColumn.constraints}
       bind:optionColors={editableColumn.optionColors}
     />
-  {:else if editableColumn.type === "longform"}
+  {:else if editableColumn.type === FieldType.LONGFORM}
     <div>
       <div class="tooltip-alignment">
         <Label size="M">Formatting</Label>
@@ -569,12 +569,12 @@
         text="Enable rich text support (markdown)"
       />
     </div>
-  {:else if editableColumn.type === "array"}
+  {:else if editableColumn.type === FieldType.ARRAY}
     <OptionSelectDnD
       bind:constraints={editableColumn.constraints}
       bind:optionColors={editableColumn.optionColors}
     />
-  {:else if editableColumn.type === "datetime" && !editableColumn.autocolumn}
+  {:else if editableColumn.type === FieldType.DATETIME && !editableColumn.autocolumn}
     <div class="split-label">
       <div class="label-length">
         <Label size="M">Earliest</Label>
@@ -613,7 +613,7 @@
       </div>
     {/if}
     <Toggle bind:value={editableColumn.dateOnly} text="Date only" />
-  {:else if editableColumn.type === "number" && !editableColumn.autocolumn}
+  {:else if editableColumn.type === FieldType.NUMBER && !editableColumn.autocolumn}
     <div class="split-label">
       <div class="label-length">
         <Label size="M">Min Value</Label>
@@ -638,7 +638,7 @@
         />
       </div>
     </div>
-  {:else if editableColumn.type === "link"}
+  {:else if editableColumn.type === FieldType.LINK}
     <RelationshipSelector
       bind:relationshipPart1
       bind:relationshipPart2

From b5ab4b90a03a264dc37dc1b03fab7b06df41d5df Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 13 Mar 2024 15:46:22 +0100
Subject: [PATCH 2/8] Multiple attachments flags

---
 .../DataTable/modals/CreateEditColumn.svelte  | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index c866f45e46..0aeaa105de 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -170,6 +170,10 @@
           relationshipPart1 = part1
           relationshipPart2 = part2
         }
+      } else if (editableColumn.type === FieldType.ATTACHMENT) {
+        editableColumn.constraints ??= { length: {} }
+        editableColumn.constraints.length ??= {}
+        editableColumn.constraints.length.maximum = 1
       }
     }
 
@@ -710,6 +714,21 @@
       thin
       text="Allow multiple users"
     />
+  {:else if editableColumn.type === FieldType.ATTACHMENT}
+    <Toggle
+      value={editableColumn.constraints?.length?.maximum !== 1}
+      on:change={e => {
+        if (!e.detail) {
+          editableColumn.constraints ??= { length: {} }
+          editableColumn.constraints.length ??= {}
+          editableColumn.constraints.length.maximum = 1
+        } else {
+          delete editableColumn.constraints?.length?.maximum
+        }
+      }}
+      thin
+      text="Multiple attachments"
+    />
   {/if}
   {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
     <Select

From e9f03649bd7b4a31d3f81a841a7865e643f0c086 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Wed, 13 Mar 2024 16:37:32 +0100
Subject: [PATCH 3/8] Send maximum to dropzone

---
 packages/bbui/src/Form/Core/Dropzone.svelte                   | 4 +++-
 .../src/components/grid/cells/AttachmentCell.svelte           | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/bbui/src/Form/Core/Dropzone.svelte b/packages/bbui/src/Form/Core/Dropzone.svelte
index 2bd95df516..3d803c0961 100644
--- a/packages/bbui/src/Form/Core/Dropzone.svelte
+++ b/packages/bbui/src/Form/Core/Dropzone.svelte
@@ -197,7 +197,9 @@
         >
           <Icon name="ChevronRight" />
         </div>
-        <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
+        {#if maximum !== 1}
+          <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
+        {/if}
       </div>
     {:else if value?.length}
       {#each value as file}
diff --git a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
index e6c9e53c75..a1f5c4f2aa 100644
--- a/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
+++ b/packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
@@ -9,6 +9,7 @@
   export let api
   export let invertX = false
   export let invertY = false
+  export let schema
 
   const { API, notifications } = getContext("grid")
   const imageExtensions = ["png", "tiff", "gif", "raw", "jpg", "jpeg"]
@@ -97,6 +98,7 @@
       {value}
       compact
       on:change={e => onChange(e.detail)}
+      maximum={schema.constraints?.length?.maximum}
       {processFiles}
       {deleteAttachments}
       {handleFileTooLarge}

From 0e139c19dafc7570aca11b3890550e07f0700905 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 14 Mar 2024 10:45:58 +0100
Subject: [PATCH 4/8] Rename

---
 .../components/backend/DataTable/modals/CreateEditColumn.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 0aeaa105de..891ba881e7 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -727,7 +727,7 @@
         }
       }}
       thin
-      text="Multiple attachments"
+      text="Allow multiple"
     />
   {/if}
   {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}

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 5/8] 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>

From fdf83fd65daf7af7d8af9a8d043cfcb3a7415128 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 14 Mar 2024 13:50:01 +0100
Subject: [PATCH 6/8] Limit attachment on forms

---
 .../app/blocks/FormBlockComponent.svelte      | 34 +++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/app/blocks/FormBlockComponent.svelte b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
index aa62f628c7..ea1c3b0a37 100644
--- a/packages/client/src/components/app/blocks/FormBlockComponent.svelte
+++ b/packages/client/src/components/app/blocks/FormBlockComponent.svelte
@@ -1,5 +1,6 @@
 <script>
   import BlockComponent from "components/BlockComponent.svelte"
+  import { FieldType } from "@budibase/types"
 
   export let field
   export let schema
@@ -21,12 +22,20 @@
     bb_reference: "bbreferencefield",
   }
 
-  const getComponentForField = field => {
+  const getFieldSchema = field => {
     const fieldSchemaName = field.field || field.name
     if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
       return null
     }
-    const type = schema[fieldSchemaName].type
+    return schema[fieldSchemaName]
+  }
+
+  const getComponentForField = field => {
+    const fieldSchema = getFieldSchema(field)
+    if (!fieldSchema) {
+      return null
+    }
+    const { type } = fieldSchema
     return FieldTypeToComponentMap[type]
   }
 
@@ -41,8 +50,29 @@
           placeholder: field.name,
           _instanceName: field.name,
         }
+
+    fieldProps = {
+      ...getPropsByType(field),
+      ...fieldProps,
+    }
     return fieldProps
   }
+
+  function getPropsByType(field) {
+    const propsMapByType = {
+      [FieldType.ATTACHMENT]: (_field, schema) => {
+        return {
+          maximum: schema?.constraints?.length?.maximum,
+        }
+      },
+    }
+
+    const fieldSchema = getFieldSchema(field)
+    const mapper = propsMapByType[fieldSchema.type]
+    if (mapper) {
+      return mapper(field, fieldSchema)
+    }
+  }
 </script>
 
 {#if getComponentForField(field) && field.active}

From 329fc53ac8ddf8775cd2614a277b5ea8737e7311 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 14 Mar 2024 14:20:51 +0100
Subject: [PATCH 7/8] Custom message

---
 .../backend/DataTable/modals/CreateEditColumn.svelte     | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 891ba881e7..a82d99e6d7 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -170,10 +170,6 @@
           relationshipPart1 = part1
           relationshipPart2 = part2
         }
-      } else if (editableColumn.type === FieldType.ATTACHMENT) {
-        editableColumn.constraints ??= { length: {} }
-        editableColumn.constraints.length ??= {}
-        editableColumn.constraints.length.maximum = 1
       }
     }
 
@@ -508,6 +504,8 @@
   onMount(() => {
     mounted = true
   })
+
+  $: console.log({ editableColumn })
 </script>
 
 <Layout noPadding gap="S">
@@ -722,8 +720,11 @@
           editableColumn.constraints ??= { length: {} }
           editableColumn.constraints.length ??= {}
           editableColumn.constraints.length.maximum = 1
+          editableColumn.constraints.length.message =
+            "cannot contain multiple files"
         } else {
           delete editableColumn.constraints?.length?.maximum
+          delete editableColumn.constraints?.length?.message
         }
       }}
       thin

From 2229210082be44adc2754219f204ba4137d42631 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Thu, 14 Mar 2024 16:01:21 +0100
Subject: [PATCH 8/8] Remove log

---
 .../components/backend/DataTable/modals/CreateEditColumn.svelte | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index a82d99e6d7..e5f66bc55b 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -504,8 +504,6 @@
   onMount(() => {
     mounted = true
   })
-
-  $: console.log({ editableColumn })
 </script>
 
 <Layout noPadding gap="S">