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

2024-03-19 10:23:54 +00:00 · 2024-03-19 10:23:54 +00:00 · a5da7946db
parent 2d13f1b9e3 b86c6414bf
commit a5da7946db
6 changed files with 121 additions and 102 deletions
--- 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}
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/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
--- a/packages/client/src/components/app/blocks/FormBlockComponent.svelte
+++ b/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}
--- 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 { 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)}
-                  <BlockComponent
-                    type={getComponentForField(field)}
-                    props={getPropsForField(field)}
-                    order={fieldIdx}
-                    interactive
-                    name={field.field}
-                  />
-                {/if}
+                <FormBlockComponent {field} {schema} order={fieldIdx} />
              {/each}
            </div>
          </BlockComponent>
--- 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>
--- 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}