Merge remote-tracking branch 'origin/master' into feature/screen-deselect

packages/bbui/src/Form/Core/Dropzone.svelte

@@ -197,7 +197,9 @@
         >
           <Icon name="ChevronRight" />
         </div>
+        {#if maximum !== 1}
           <div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
+        {/if}
       </div>
     {:else if value?.length}
       {#each value as file}

packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte

@@ -470,7 +470,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`
     }
 
@@ -531,18 +531,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>
@@ -560,12 +560,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>
@@ -604,7 +604,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>
@@ -629,7 +629,7 @@
         />
       </div>
     </div>
-  {:else if editableColumn.type === "link"}
+  {:else if editableColumn.type === FieldType.LINK}
     <RelationshipSelector
       bind:relationshipPart1
       bind:relationshipPart2
@@ -703,6 +703,24 @@
       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
+          editableColumn.constraints.length.message =
+            "cannot contain multiple files"
+        } else {
+          delete editableColumn.constraints?.length?.maximum
+          delete editableColumn.constraints?.length?.message
+        }
+      }}
+      thin
+      text="Allow multiple"
+    />
   {/if}
   {#if editableColumn.type === AUTO_TYPE || editableColumn.autocolumn}
     <Select

packages/client/src/components/app/blocks/FormBlockComponent.svelte

@@ -0,0 +1,86 @@
+<script>
+  import BlockComponent from "components/BlockComponent.svelte"
+  import { FieldType } from "@budibase/types"
+
+  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 getFieldSchema = field => {
+    const fieldSchemaName = field.field || field.name
+    if (!fieldSchemaName || !schema?.[fieldSchemaName]) {
+      return null
+    }
+    return schema[fieldSchemaName]
+  }
+
+  const getComponentForField = field => {
+    const fieldSchema = getFieldSchema(field)
+    if (!fieldSchema) {
+      return null
+    }
+    const { type } = fieldSchema
+    return FieldTypeToComponentMap[type]
+  }
+
+  const getPropsForField = field => {
+    let fieldProps = field._component
+      ? {
+          ...field,
+        }
+      : {
+          field: field.name,
+          label: field.name,
+          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}
+  <BlockComponent
+    type={getComponentForField(field)}
+    props={getPropsForField(field)}
+    {order}
+    interactive
+    name={field?.field}
+  />
+{/if}

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 { get, 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)
@@ -78,27 +63,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)) || {}
   }
@@ -205,15 +169,7 @@
               class:mobile={$context.device.mobile}
             >
               {#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)}
-                {#if getComponentForField(field)}
+                <FormBlockComponent {field} {schema} order={fieldIdx} />
-                  <BlockComponent
-                    type={getComponentForField(field)}
-                    props={getPropsForField(field)}
-                    order={fieldIdx}
-                    interactive
-                    name={field.field}
-                  />
-                {/if}
               {/each}
             </div>
           </BlockComponent>

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}
+              <FormBlockComponent {field} {schema} order={idx} />
-                <BlockComponent
-                  type={getComponentForField(field)}
-                  props={getPropsForField(field)}
-                  order={idx}
-                  interactive
-                  name={field?.field}
-                />
-              {/if}
             {/each}
           </div>
         </BlockComponent>

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}