CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-16 19:56:10 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #13418 from Budibase/feature/signature-field-and-component

Browse source 
Signature field and component support
This commit is contained in:
deanhannigan 2024-05-20 12:05:50 +01:00 committed by GitHub
parent 39f59c076a 377d7fdb76
commit d8113ddb5e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
58 changed files with 1195 additions and 239 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

267
packages/bbui/src/Form/Core/Signature.svelte Normal file
View file

@ -0,0 +1,267 @@
<script>
import { onMount, createEventDispatcher } from "svelte"
import Atrament from "atrament"
import Icon from "../../Icon/Icon.svelte"
const dispatch = createEventDispatcher()
let last
export let value
export let disabled = false
export let editable = true
export let width = 400
export let height = 220
export let saveIcon = false
export let darkMode
export function toDataUrl() {
// PNG to preserve transparency
return canvasRef.toDataURL("image/png")
}
export function toFile() {
const data = canvasContext
.getImageData(0, 0, width, height)
.data.some(channel => channel !== 0)
if (!data) {
return
}
let dataURIParts = toDataUrl().split(",")
if (!dataURIParts.length) {
console.error("Could not retrieve signature data")
}
// Pull out the base64 encoded byte data
let binaryVal = atob(dataURIParts[1])
let blobArray = new Uint8Array(binaryVal.length)
let pos = 0
while (pos < binaryVal.length) {
blobArray[pos] = binaryVal.charCodeAt(pos)
pos++
}
const signatureBlob = new Blob([blobArray], {
type: "image/png",
})
return new File([signatureBlob], "signature.png", {
type: signatureBlob.type,
})
}
export function clearCanvas() {
return canvasContext.clearRect(0, 0, canvasWidth, canvasHeight)
}
let canvasRef
let canvasContext
let canvasWrap
let canvasWidth
let canvasHeight
let signature
let updated = false
let signatureFile
let urlFailed
$: if (value) {
signatureFile = value
}
$: if (signatureFile?.url) {
updated = false
}
$: if (last) {
dispatch("update")
}
onMount(() => {
if (!editable) {
return
}
const getPos = e => {
var rect = canvasRef.getBoundingClientRect()
const canvasX = e.offsetX || e.targetTouches?.[0].pageX - rect.left
const canvasY = e.offsetY || e.targetTouches?.[0].pageY - rect.top
return { x: canvasX, y: canvasY }
}
const checkUp = e => {
last = getPos(e)
}
canvasRef.addEventListener("pointerdown", e => {
const current = getPos(e)
//If the cursor didn't move at all, block the default pointerdown
if (last?.x === current?.x && last?.y === current?.y) {
e.preventDefault()
e.stopImmediatePropagation()
}
})
document.addEventListener("pointerup", checkUp)
signature = new Atrament(canvasRef, {
width,
height,
color: "white",
})
signature.weight = 4
signature.smoothing = 2
canvasWrap.style.width = `${width}px`
canvasWrap.style.height = `${height}px`
const { width: wrapWidth, height: wrapHeight } =
canvasWrap.getBoundingClientRect()
canvasHeight = wrapHeight
canvasWidth = wrapWidth
canvasContext = canvasRef.getContext("2d")
return () => {
signature.destroy()
document.removeEventListener("pointerup", checkUp)
}
})
</script>
<div class="signature" class:light={!darkMode} class:image-error={urlFailed}>
{#if !disabled}
<div class="overlay">
{#if updated && saveIcon}
<span class="save">
<Icon
name="Checkmark"
hoverable
tooltip={"Save"}
tooltipPosition={"top"}
tooltipType={"info"}
on:click={() => {
dispatch("change", toDataUrl())
}}
/>
</span>
{/if}
{#if signatureFile?.url && !updated}
<span class="delete">
<Icon
name="DeleteOutline"
hoverable
tooltip={"Delete"}
tooltipPosition={"top"}
tooltipType={"info"}
on:click={() => {
if (editable) {
clearCanvas()
}
dispatch("clear")
}}
/>
</span>
{/if}
</div>
{/if}
{#if !editable && signatureFile?.url}
<!-- svelte-ignore a11y-missing-attribute -->
{#if !urlFailed}
<img
src={signatureFile?.url}
on:error={() => {
urlFailed = true
}}
/>
{:else}
Could not load signature
{/if}
{:else}
<div bind:this={canvasWrap} class="canvas-wrap">
<canvas
id="signature-canvas"
bind:this={canvasRef}
style="--max-sig-width: {width}px; --max-sig-height: {height}px"
/>
{#if editable}
<div class="indicator-overlay">
<div class="sign-here">
<Icon name="Close" />
<hr />
</div>
</div>
{/if}
</div>
{/if}
</div>
<style>
.indicator-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0px;
display: flex;
flex-direction: column;
justify-content: end;
padding: var(--spectrum-global-dimension-size-150);
box-sizing: border-box;
pointer-events: none;
}
.sign-here {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spectrum-global-dimension-size-150);
}
.sign-here hr {
border: 0;
border-top: 2px solid var(--spectrum-global-color-gray-200);
width: 100%;
}
.canvas-wrap {
position: relative;
margin: auto;
}
.signature img {
max-width: 100%;
}
#signature-canvas {
max-width: var(--max-sig-width);
max-height: var(--max-sig-height);
}
.signature.light img,
.signature.light #signature-canvas {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.signature.image-error .overlay {
padding-top: 0px;
}
.signature {
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
padding: var(--spectrum-global-dimension-size-150);
text-align: right;
z-index: 2;
box-sizing: border-box;
}
.save,
.delete {
display: inline-block;
}
</style>

1
packages/bbui/src/Form/Core/index.js
View file

@ -16,3 +16,4 @@ export { default as CoreStepper } from "./Stepper.svelte"
export { default as CoreRichTextField } from "./RichTextField.svelte"
export { default as CoreSlider } from "./Slider.svelte"
export { default as CoreFile } from "./File.svelte"
export { default as CoreSignature } from "./Signature.svelte"

1
packages/bbui/src/Modal/Modal.svelte
View file

@ -173,6 +173,7 @@
}
.spectrum-Modal {
border: 2px solid var(--spectrum-global-color-gray-200);
overflow: visible;
max-height: none;
margin: 40px 0;

23
packages/bbui/src/Modal/ModalContent.svelte
View file

@ -27,6 +27,7 @@
export let secondaryButtonText = undefined
export let secondaryAction = undefined
export let secondaryButtonWarning = false
export let custom = false
const { hide, cancel } = getContext(Context.Modal)
let loading = false
@ -63,12 +64,13 @@
class:spectrum-Dialog--medium={size === "M"}
class:spectrum-Dialog--large={size === "L"}
class:spectrum-Dialog--extraLarge={size === "XL"}
class:no-grid={custom}
style="position: relative;"
role="dialog"
tabindex="-1"
aria-modal="true"
>
<div class="spectrum-Dialog-grid">
<div class="modal-core" class:spectrum-Dialog-grid={!custom}>
{#if title || $$slots.header}
<h1
class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader"
@ -153,6 +155,25 @@
.spectrum-Dialog-content {
overflow: visible;
}
.no-grid .spectrum-Dialog-content {
border-top: 2px solid var(--spectrum-global-color-gray-200);
border-bottom: 2px solid var(--spectrum-global-color-gray-200);
}
.no-grid .spectrum-Dialog-heading {
margin-top: 12px;
margin-left: 12px;
}
.spectrum-Dialog.no-grid {
width: 100%;
}
.spectrum-Dialog.no-grid .spectrum-Dialog-buttonGroup {
padding: 12px;
}
.spectrum-Dialog-heading {
font-family: var(--font-accent);
font-weight: 600;

3
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View file

@ -364,6 +364,7 @@
value.customType !== "cron" &&
value.customType !== "triggerSchema" &&
value.customType !== "automationFields" &&
value.type !== "signature_single" &&
value.type !== "attachment" &&
value.type !== "attachment_single"
)
@ -456,7 +457,7 @@
value={inputData[key]}
options={Object.keys(table?.schema || {})}
/>
{:else if value.type === "attachment"}
{:else if value.type === "attachment" || value.type === "signature_single"}
<div class="attachment-field-wrapper">
<div class="label-wrapper">
<Label>{label}</Label>

15
packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
View file

@ -24,6 +24,11 @@
let table
let schemaFields
let attachmentTypes = [
FieldType.ATTACHMENTS,
FieldType.ATTACHMENT_SINGLE,
FieldType.SIGNATURE_SINGLE,
]
$: {
table = $tables.list.find(table => table._id === value?.tableId)
@ -120,15 +125,9 @@
{#if schemaFields.length}
{#each schemaFields as [field, schema]}
{#if !schema.autocolumn}
<div
class:schema-fields={schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE}
>
<div class:schema-fields={!attachmentTypes.includes(schema.type)}>
<Label>{field}</Label>
<div
class:field-width={schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE}
>
<div class:field-width={!attachmentTypes.includes(schema.type)}>
{#if isTestModal}
<RowSelectorTypes
{isTestModal}

22
packages/builder/src/components/automation/SetupPanel/RowSelectorTypes.svelte
View file

@ -21,6 +21,12 @@
return clone
})
let attachmentTypes = [
FieldType.ATTACHMENTS,
FieldType.ATTACHMENT_SINGLE,
FieldType.SIGNATURE_SINGLE,
]
function schemaHasOptions(schema) {
return !!schema.constraints?.inclusion?.length
}
@ -29,7 +35,8 @@
let params = {}
if (
schema.type === FieldType.ATTACHMENT_SINGLE &&
(schema.type === FieldType.ATTACHMENT_SINGLE ||
schema.type === FieldType.SIGNATURE_SINGLE) &&
Object.keys(keyValueObj).length === 0
) {
return []
@ -100,16 +107,20 @@
on:change={e => onChange(e, field)}
useLabel={false}
/>
{:else if schema.type === FieldType.ATTACHMENTS || schema.type === FieldType.ATTACHMENT_SINGLE}
{:else if attachmentTypes.includes(schema.type)}
<div class="attachment-field-spacinng">
<KeyValueBuilder
on:change={e =>
onChange(
{
detail:
schema.type === FieldType.ATTACHMENT_SINGLE
schema.type === FieldType.ATTACHMENT_SINGLE ||
schema.type === FieldType.SIGNATURE_SINGLE
? e.detail.length > 0
? { url: e.detail[0].name, filename: e.detail[0].value }
? {
url: e.detail[0].name,
filename: e.detail[0].value,
}
: {}
: e.detail.map(({ name, value }) => ({
url: name,
@ -125,7 +136,8 @@
customButtonText={"Add attachment"}
keyPlaceholder={"URL"}
valuePlaceholder={"Filename"}
actionButtonDisabled={schema.type === FieldType.ATTACHMENT_SINGLE &&
actionButtonDisabled={(schema.type === FieldType.ATTACHMENT_SINGLE ||
schema.type === FieldType.SIGNATURE) &&
Object.keys(value[field]).length >= 1}
/>
</div>

98
packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
View file

@ -1,4 +1,5 @@
<script>
import { API } from "api"
import {
Input,
Select,
@ -8,11 +9,16 @@
Label,
RichTextField,
TextArea,
CoreSignature,
ActionButton,
notifications,
} from "@budibase/bbui"
import Dropzone from "components/common/Dropzone.svelte"
import { capitalise } from "helpers"
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
import Editor from "../../integration/QueryEditor.svelte"
import { SignatureModal } from "@budibase/frontend-core/src/components"
import { themeStore } from "stores/portal"
export let meta
export let value
@ -38,8 +44,35 @@
const timeStamp = resolveTimeStamp(value)
const isTimeStamp = !!timeStamp || meta?.timeOnly
$: currentTheme = $themeStore?.theme
$: darkMode = !currentTheme.includes("light")
let signatureModal
</script>
<SignatureModal
{darkMode}
onConfirm={async sigCanvas => {
const signatureFile = sigCanvas.toFile()
let attachRequest = new FormData()
attachRequest.append("file", signatureFile)
try {
const uploadReq = await API.uploadBuilderAttachment(attachRequest)
const [signatureAttachment] = uploadReq
value = signatureAttachment
} catch (error) {
$notifications.error(error.message || "Failed to save signature")
value = []
}
}}
title={meta.name}
{value}
bind:this={signatureModal}
/>
{#if type === "options" && meta.constraints.inclusion.length !== 0}
<Select
{label}
@ -58,7 +91,51 @@
bind:value
/>
{:else if type === "attachment"}
<Dropzone {label} {error} bind:value />
<Dropzone
compact
{label}
{error}
{value}
on:change={e => {
value = e.detail
}}
/>
{:else if type === "attachment_single"}
<Dropzone
compact
{label}
{error}
value={value ? [value] : []}
on:change={e => {
value = e.detail?.[0]
}}
maximum={1}
/>
{:else if type === "signature_single"}
<div class="signature">
<Label>{label}</Label>
<div class="sig-wrap" class:display={value}>
{#if value}
<CoreSignature
{darkMode}
{value}
editable={false}
on:clear={() => {
value = null
}}
/>
{:else}
<ActionButton
fullWidth
on:click={() => {
signatureModal.show()
}}
>
Add signature
</ActionButton>
{/if}
</div>
</div>
{:else if type === "boolean"}
<Toggle text={label} {error} bind:value />
{:else if type === "array" && meta.constraints.inclusion.length !== 0}
@ -94,3 +171,22 @@
{:else}
<Input {label} {type} {error} bind:value disabled={readonly} />
{/if}
<style>
.signature :global(label.spectrum-FieldLabel) {
padding-top: var(--spectrum-fieldlabel-padding-top);
padding-bottom: var(--spectrum-fieldlabel-padding-bottom);
}
.sig-wrap.display {
min-height: 50px;
justify-content: center;
width: 100%;
display: flex;
flex-direction: column;
background-color: var(--spectrum-global-color-gray-50);
box-sizing: border-box;
border: var(--spectrum-alias-border-size-thin)
var(--spectrum-alias-border-color) solid;
border-radius: var(--spectrum-alias-border-radius-regular);
}
</style>

6
packages/builder/src/components/backend/DataTable/TableDataTable.svelte
View file

@ -1,6 +1,6 @@
<script>
import { datasources, tables, integrations, appStore } from "stores/builder"
import { admin } from "stores/portal"
import { themeStore, admin } from "stores/portal"
import EditRolesButton from "./buttons/EditRolesButton.svelte"
import { TableNames } from "constants"
import { Grid } from "@budibase/frontend-core"
@ -38,6 +38,9 @@
})
$: relationshipsEnabled = relationshipSupport(tableDatasource)
$: currentTheme = $themeStore?.theme
$: darkMode = !currentTheme.includes("light")
const relationshipSupport = datasource => {
const integration = $integrations[datasource?.source]
return !isInternal && integration?.relationships !== false
@ -56,6 +59,7 @@
<div class="wrapper">
<Grid
{API}
{darkMode}
datasource={gridDatasource}
canAddRows={!isUsersTable}
canDeleteRows={!isUsersTable}

1
packages/builder/src/components/backend/DataTable/formula.js
View file

@ -9,6 +9,7 @@ const MAX_DEPTH = 1
const TYPES_TO_SKIP = [
FieldType.FORMULA,
FieldType.LONGFORM,
FieldType.SIGNATURE_SINGLE,
FieldType.ATTACHMENTS,
//https://github.com/Budibase/budibase/issues/3030
FieldType.INTERNAL,

1
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View file

@ -412,6 +412,7 @@
FIELDS.FORMULA,
FIELDS.JSON,
FIELDS.BARCODEQR,
FIELDS.SIGNATURE_SINGLE,
FIELDS.BIGINT,
FIELDS.AUTO,
]

4
packages/builder/src/components/backend/TableNavigator/ExistingTableDataImport.svelte
View file

@ -54,6 +54,10 @@
label: "Attachment",
value: FieldType.ATTACHMENT_SINGLE,
},
{
label: "Signature",
value: FieldType.SIGNATURE_SINGLE,
},
{
label: "Attachment list",
value: FieldType.ATTACHMENTS,

10
packages/builder/src/components/common/bindings/DrawerBindableSlot.svelte
View file

@ -28,6 +28,12 @@
let bindingDrawer
let currentVal = value
let attachmentTypes = [
FieldType.ATTACHMENT_SINGLE,
FieldType.ATTACHMENTS,
FieldType.SIGNATURE_SINGLE,
]
$: readableValue = runtimeToReadableBinding(bindings, value)
$: tempValue = readableValue
$: isJS = isJSBinding(value)
@ -105,6 +111,7 @@
boolean: isValidBoolean,
attachment: false,
attachment_single: false,
signature_single: false,
}
const isValid = value => {
@ -126,6 +133,7 @@
"bigint",
"barcodeqr",
"attachment",
"signature_single",
"attachment_single",
].includes(type)
) {
@ -169,7 +177,7 @@
{updateOnChange}
/>
{/if}
{#if !disabled && type !== "formula" && !disabled && type !== FieldType.ATTACHMENTS && !disabled && type !== FieldType.ATTACHMENT_SINGLE}
{#if !disabled && type !== "formula" && !disabled && !attachmentTypes.includes(type)}
<div
class={`icon ${getIconClass(value, type)}`}
on:click={() => {

3
packages/builder/src/components/design/settings/componentSettings.js
View file

@ -76,6 +76,7 @@ const componentMap = {
"field/array": FormFieldSelect,
"field/json": FormFieldSelect,
"field/barcodeqr": FormFieldSelect,
"field/signature_single": FormFieldSelect,
"field/bb_reference": FormFieldSelect,
// Some validation types are the same as others, so not all types are
// explicitly listed here. e.g. options uses string validation
@ -85,6 +86,8 @@ const componentMap = {
"validation/boolean": ValidationEditor,
"validation/datetime": ValidationEditor,
"validation/attachment": ValidationEditor,
"validation/attachment_single": ValidationEditor,
"validation/signature_single": ValidationEditor,
"validation/link": ValidationEditor,
"validation/bb_reference": ValidationEditor,
}

1
packages/builder/src/components/design/settings/controls/FieldConfiguration/utils.js
View file

@ -41,6 +41,7 @@ export const FieldTypeToComponentMap = {
[FieldType.BOOLEAN]: "booleanfield",
[FieldType.LONGFORM]: "longformfield",
[FieldType.DATETIME]: "datetimefield",
[FieldType.SIGNATURE_SINGLE]: "signaturesinglefield",
[FieldType.ATTACHMENTS]: "attachmentfield",
[FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
[FieldType.LINK]: "relationshipfield",

2
packages/builder/src/components/design/settings/controls/ValidationEditor/ValidationDrawer.svelte
View file

@ -108,6 +108,8 @@
Constraints.MaxFileSize,
Constraints.MaxUploadSize,
],
["attachment_single"]: [Constraints.Required, Constraints.MaxUploadSize],
["signature_single"]: [Constraints.Required],
["link"]: [
Constraints.Required,
Constraints.Contains,

8
packages/builder/src/constants/backend/index.js
View file

@ -127,6 +127,14 @@ export const FIELDS = {
presence: false,
},
},
SIGNATURE_SINGLE: {
name: "Signature",
type: FieldType.SIGNATURE_SINGLE,
icon: "AnnotatePen",
constraints: {
presence: false,
},
},
LINK: {
name: "Relationship",
type: FieldType.LINK,

1
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json
View file

@ -71,6 +71,7 @@
"multifieldselect",
"s3upload",
"codescanner",
"signaturesinglefield",
"bbreferencesinglefield",
"bbreferencefield"
]

51
packages/client/manifest.json
View file

@ -4115,6 +4115,55 @@
}
]
},
"signaturesinglefield": {
"name": "Signature",
"icon": "AnnotatePen",
"styles": ["size"],
"size": {
"width": 400,
"height": 50
},
"settings": [
{
"type": "field/signature_single",
"label": "Field",
"key": "field",
"required": true
},
{
"type": "text",
"label": "Label",
"key": "label"
},
{
"type": "text",
"label": "Help text",
"key": "helpText"
},
{
"type": "boolean",
"label": "Disabled",
"key": "disabled",
"defaultValue": false
},
{
"type": "event",
"label": "On change",
"key": "onChange",
"context": [
{
"label": "Field Value",
"key": "value"
}
]
},
{
"type": "validation/signature_single",
"label": "Validation",
"key": "validation"
}
]
},
"embeddedmap": {
"name": "Embedded Map",
"icon": "Location",
@ -4380,7 +4429,7 @@
"defaultValue": false
},
{
"type": "validation/attachment",
"type": "validation/attachment_single",
"label": "Validation",
"key": "validation"
},

3
packages/client/package.json
View file

@ -34,7 +34,8 @@
"screenfull": "^6.0.1",
"shortid": "^2.2.15",
"svelte-apexcharts": "^1.0.2",
"svelte-spa-router": "^4.0.1"
"svelte-spa-router": "^4.0.1",
"atrament": "^4.3.0"
},
"devDependencies": {
"@rollup/plugin-alias": "^5.1.0",

4
packages/client/src/components/Component.svelte
View file

@ -193,6 +193,9 @@
$: pad = pad || (interactive && hasChildren && inDndPath)
$: $dndIsDragging, (pad = false)
$: currentTheme = $context?.device?.theme
$: darkMode = !currentTheme?.includes("light")
// Update component context
$: store.set({
id,
@ -222,6 +225,7 @@
parent: id,
ancestors: [...($component?.ancestors ?? []), instance._component],
path: [...($component?.path ?? []), id],
darkMode,
})
const initialise = (instance, force = false) => {

5
packages/client/src/components/app/GridBlock.svelte
View file

@ -37,8 +37,10 @@
let grid
let gridContext
let minHeight
let minHeight = 0
$: currentTheme = $context?.device?.theme
$: darkMode = !currentTheme?.includes("light")
$: parsedColumns = getParsedColumns(columns)
$: columnWhitelist = parsedColumns.filter(x => x.active).map(x => x.field)
$: schemaOverrides = getSchemaOverrides(parsedColumns)
@ -154,6 +156,7 @@
{API}
{stripeRows}
{quiet}
{darkMode}
{initialFilter}
{initialSortColumn}
{initialSortOrder}

1
packages/client/src/components/app/blocks/FormBlockComponent.svelte
View file

@ -15,6 +15,7 @@
[FieldType.BOOLEAN]: "booleanfield",
[FieldType.LONGFORM]: "longformfield",
[FieldType.DATETIME]: "datetimefield",
[FieldType.SIGNATURE_SINGLE]: "signaturesinglefield",
[FieldType.ATTACHMENTS]: "attachmentfield",
[FieldType.ATTACHMENT_SINGLE]: "attachmentsinglefield",
[FieldType.LINK]: "relationshipfield",

129
packages/client/src/components/app/forms/SignatureField.svelte Normal file
View file

@ -0,0 +1,129 @@
<script>
import { CoreSignature, ActionButton } from "@budibase/bbui"
import { getContext } from "svelte"
import Field from "./Field.svelte"
import { SignatureModal } from "@budibase/frontend-core/src/components"
export let field
export let label
export let disabled = false
export let readonly = false
export let validation
export let onChange
export let span
export let helpText = null
let fieldState
let fieldApi
let fieldSchema
let modal
const { API, notificationStore, builderStore } = getContext("sdk")
const context = getContext("context")
const formContext = getContext("form")
const saveSignature = async canvas => {
try {
const signatureFile = canvas.toFile()
let updateValue
if (signatureFile) {
let attachRequest = new FormData()
attachRequest.append("file", signatureFile)
const resp = await API.uploadAttachment({
data: attachRequest,
tableId: formContext?.dataSource?.tableId,
})
const [signatureAttachment] = resp
updateValue = signatureAttachment
} else {
updateValue = null
}
const changed = fieldApi.setValue(updateValue)
if (onChange && changed) {
onChange({ value: updateValue })
}
} catch (error) {
notificationStore.actions.error(
`There was a problem saving your signature`
)
console.error(error)
}
}
const deleteSignature = async () => {
const changed = fieldApi.setValue(null)
if (onChange && changed) {
onChange({ value: null })
}
}
$: currentTheme = $context?.device?.theme
$: darkMode = !currentTheme?.includes("light")
</script>
<SignatureModal
onConfirm={saveSignature}
title={label || fieldSchema?.name || ""}
value={fieldState?.value}
{darkMode}
bind:this={modal}
/>
<Field
{label}
{field}
{disabled}
{readonly}
{validation}
{span}
{helpText}
type="signature_single"
bind:fieldState
bind:fieldApi
bind:fieldSchema
defaultValue={[]}
>
{#if fieldState}
{#if (Array.isArray(fieldState?.value) && !fieldState?.value?.length) || !fieldState?.value}
<ActionButton
fullWidth
disabled={fieldState.disabled}
on:click={() => {
if (!$builderStore.inBuilder) {
modal.show()
}
}}
>
Add signature
</ActionButton>
{:else}
<div class="signature-field">
<CoreSignature
{darkMode}
disabled={$builderStore.inBuilder || fieldState.disabled}
editable={false}
value={fieldState?.value}
on:clear={deleteSignature}
/>
</div>
{/if}
{/if}
</Field>
<style>
.signature-field {
min-height: 50px;
justify-content: center;
width: 100%;
display: flex;
flex-direction: column;
background-color: var(--spectrum-global-color-gray-50);
box-sizing: border-box;
border: var(--spectrum-alias-border-size-thin)
var(--spectrum-alias-border-color) solid;
border-radius: var(--spectrum-alias-border-radius-regular);
}
</style>

1
packages/client/src/components/app/forms/index.js
View file

@ -16,5 +16,6 @@ export { default as formstep } from "./FormStep.svelte"
export { default as jsonfield } from "./JSONField.svelte"
export { default as s3upload } from "./S3Upload.svelte"
export { default as codescanner } from "./CodeScannerField.svelte"
export { default as signaturesinglefield } from "./SignatureField.svelte"
export { default as bbreferencefield } from "./BBReferenceField.svelte"
export { default as bbreferencesinglefield } from "./BBReferenceSingleField.svelte"

24
packages/client/src/components/app/forms/validation.js
View file

@ -200,6 +200,17 @@ const parseType = (value, type) => {
return value
}
// Parse attachment/signature single, treating no key as null
if (
type === FieldTypes.ATTACHMENT_SINGLE ||
type === FieldTypes.SIGNATURE_SINGLE
) {
if (!value?.key) {
return null
}
return value
}
// Parse links, treating no elements as null
if (type === FieldTypes.LINK) {
if (!Array.isArray(value) || !value.length) {
@ -246,10 +257,8 @@ const maxLengthHandler = (value, rule) => {
// Evaluates a max file size (MB) constraint
const maxFileSizeHandler = (value, rule) => {
const limit = parseType(rule.value, "number")
return (
value == null ||
!value.some(attachment => attachment.size / 1000000 > limit)
)
const check = attachment => attachment.size / 1000000 > limit
return value == null || !(value?.key ? check(value) : value.some(check))
}
// Evaluates a max total upload size (MB) constraint
@ -257,8 +266,11 @@ const maxUploadSizeHandler = (value, rule) => {
const limit = parseType(rule.value, "number")
return (
value == null ||
value.reduce((acc, currentItem) => acc + currentItem.size, 0) / 1000000 <=
limit
(value?.key
? value.size / 1000000 <= limit
: value.reduce((acc, currentItem) => acc + currentItem.size, 0) /
1000000 <=
limit)
)
}

59
packages/frontend-core/src/components/SignatureModal.svelte Normal file
View file

@ -0,0 +1,59 @@
<script>
import { Modal, ModalContent, Body, CoreSignature } from "@budibase/bbui"
export let onConfirm = () => {}
export let value
export let title
export let darkMode
export const show = () => {
edited = false
modal.show()
}
let modal
let canvas
let edited = false
</script>
<Modal bind:this={modal}>
<ModalContent
showConfirmButton
showCancelButton={false}
showCloseIcon={false}
custom
disabled={!edited}
showDivider={false}
onConfirm={() => {
onConfirm(canvas)
}}
>
<div slot="header">
<Body>{title}</Body>
</div>
<div class="signature-wrap modal">
<CoreSignature
{darkMode}
{value}
saveIcon={false}
bind:this={canvas}
on:update={() => {
edited = true
}}
/>
</div>
</ModalContent>
</Modal>
<style>
.signature-wrap {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: var(--spectrum-global-color-gray-50);
color: var(--spectrum-alias-text-color);
box-sizing: border-box;
position: relative;
}
</style>

9
packages/frontend-core/src/components/grid/cells/AttachmentCell.svelte
View file

@ -8,7 +8,6 @@
export let onChange
export let readonly = false
export let api
export let invertX = false
export let schema
export let maximum
@ -92,13 +91,7 @@
</div>
{#if isOpen}
<GridPopover
open={isOpen}
{anchor}
{invertX}
maxHeight={null}
on:close={close}
>
<GridPopover open={isOpen} {anchor} maxHeight={null} on:close={close}>
<div class="dropzone">
<Dropzone
{value}

4
packages/frontend-core/src/components/grid/cells/DataCell.svelte
View file

@ -18,8 +18,6 @@
export let row
export let cellId
export let updateValue = rows.actions.updateValue
export let invertX = false
export let invertY = false
export let contentLines = 1
export let hidden = false
@ -93,8 +91,6 @@
onChange={cellAPI.setValue}
{focused}
{readonly}
{invertY}
{invertX}
{contentLines}
/>
<slot />

3
packages/frontend-core/src/components/grid/cells/DateCell.svelte
View file

@ -10,7 +10,6 @@
export let focused = false
export let readonly = false
export let api
export let invertX = false
let isOpen
let anchor
@ -111,7 +110,7 @@
</div>
{#if isOpen}
<GridPopover {anchor} {invertX} maxHeight={null} on:close={close}>
<GridPopover {anchor} maxHeight={null} on:close={close}>
<CoreDatePickerPopoverContents
value={parsedValue}
useKeyboardShortcuts={false}

3
packages/frontend-core/src/components/grid/cells/LongFormCell.svelte
View file

@ -8,7 +8,6 @@
export let onChange
export let readonly = false
export let api
export let invertX = false
let textarea
let isOpen = false
@ -67,7 +66,7 @@
</div>
{#if isOpen}
<GridPopover {anchor} {invertX} on:close={close}>
<GridPopover {anchor} on:close={close}>
<textarea
bind:this={textarea}
value={value || ""}

3
packages/frontend-core/src/components/grid/cells/OptionsCell.svelte
View file

@ -11,7 +11,6 @@
export let multi = false
export let readonly = false
export let api
export let invertX
export let contentLines = 1
let isOpen = false
@ -120,7 +119,7 @@
</div>
{#if isOpen}
<GridPopover {anchor} {invertX} on:close={close}>
<GridPopover {anchor} on:close={close}>
<div class="options">
{#each options as option, idx}
{@const color = optionColors[option] || getOptionColor(option)}

3
packages/frontend-core/src/components/grid/cells/RelationshipCell.svelte
View file

@ -13,7 +13,6 @@
export let focused
export let schema
export let onChange
export let invertX = false
export let contentLines = 1
export let searchFunction = API.searchTable
export let primaryDisplay
@ -275,7 +274,7 @@
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
{#if isOpen}
<GridPopover open={isOpen} {anchor} {invertX} on:close={close}>
<GridPopover open={isOpen} {anchor} on:close={close}>
<div class="dropdown" on:wheel|stopPropagation>
<div class="search">
<Input

162
packages/frontend-core/src/components/grid/cells/SignatureCell.svelte Normal file
View file

@ -0,0 +1,162 @@
<script>
import { onMount, getContext } from "svelte"
import { SignatureModal } from "@budibase/frontend-core/src/components"
import { CoreSignature, ActionButton } from "@budibase/bbui"
import GridPopover from "../overlays/GridPopover.svelte"
export let schema
export let value
export let focused = false
export let onChange
export let readonly = false
export let api
const { API, notifications, props } = getContext("grid")
let isOpen = false
let modal
let anchor
$: editable = focused && !readonly
$: {
if (!focused) {
close()
}
}
const onKeyDown = () => {
return false
}
const open = () => {
isOpen = true
}
const close = () => {
isOpen = false
}
const deleteSignature = async () => {
onChange(null)
}
const saveSignature = async sigCanvas => {
const signatureFile = sigCanvas.toFile()
let attachRequest = new FormData()
attachRequest.append("file", signatureFile)
try {
const uploadReq = await API.uploadBuilderAttachment(attachRequest)
const [signatureAttachment] = uploadReq
onChange(signatureAttachment)
} catch (error) {
$notifications.error(error.message || "Failed to save signature")
return []
}
}
onMount(() => {
api = {
focus: () => open(),
blur: () => close(),
isActive: () => isOpen,
onKeyDown,
}
})
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="signature-cell"
class:light={!$props?.darkMode}
class:editable
bind:this={anchor}
on:click={editable ? open : null}
>
{#if value?.url}
<!-- svelte-ignore a11y-missing-attribute -->
<img src={value?.url} />
{/if}
</div>
<SignatureModal
onConfirm={saveSignature}
title={schema?.name}
{value}
darkMode={$props.darkMode}
bind:this={modal}
/>
{#if isOpen}
<GridPopover open={isOpen} {anchor} maxHeight={null} on:close={close}>
<div class="signature" class:empty={!value}>
{#if value?.key}
<div class="signature-wrap">
<CoreSignature
darkMode={$props.darkMode}
editable={false}
{value}
on:change={saveSignature}
on:clear={deleteSignature}
/>
</div>
{:else}
<div class="add-signature">
<ActionButton
fullWidth
on:click={() => {
modal.show()
}}
>
Add signature
</ActionButton>
</div>
{/if}
</div>
</GridPopover>
{/if}
<style>
.signature {
min-width: 320px;
padding: var(--cell-padding);
background: var(--grid-background-alt);
border: var(--cell-border);
}
.signature.empty {
width: 100%;
min-width: unset;
}
.signature-cell.light img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.signature-cell {
flex: 1 1 auto;
display: flex;
flex-direction: row;
align-items: stretch;
max-width: 320px;
padding-left: var(--cell-padding);
padding-right: var(--cell-padding);
flex-wrap: nowrap;
align-self: stretch;
overflow: hidden;
user-select: none;
}
.signature-cell.editable:hover {
cursor: pointer;
}
.signature-wrap {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background-color: var(--spectrum-global-color-gray-50);
color: var(--spectrum-alias-text-color);
box-sizing: border-box;
position: relative;
}
</style>

2
packages/frontend-core/src/components/grid/layout/Grid.svelte
View file

@ -54,6 +54,7 @@
export let notifySuccess = null
export let notifyError = null
export let buttons = null
export let darkMode
export let isCloud = null
// Unique identifier for DOM nodes inside this instance
@ -109,6 +110,7 @@
notifySuccess,
notifyError,
buttons,
darkMode,
isCloud,
})

7
packages/frontend-core/src/components/grid/layout/GridBody.svelte
View file

@ -9,7 +9,6 @@
bounds,
renderedRows,
visibleColumns,
rowVerticalInversionIndex,
hoveredRowId,
dispatch,
isDragging,
@ -41,11 +40,7 @@
<div bind:this={body} class="grid-body">
<GridScrollWrapper scrollHorizontally scrollVertically attachHandlers>
{#each $renderedRows as row, idx}
<GridRow
{row}
top={idx === 0}
invertY={idx >= $rowVerticalInversionIndex}
/>
<GridRow {row} top={idx === 0} />
{/each}
{#if $config.canAddRows}
<div

6
packages/frontend-core/src/components/grid/layout/GridRow.svelte
View file

@ -5,7 +5,6 @@
export let row
export let top = false
export let invertY = false
const {
focusedCellId,
@ -15,7 +14,6 @@
hoveredRowId,
selectedCellMap,
focusedRow,
columnHorizontalInversionIndex,
contentLines,
isDragging,
dispatch,
@ -38,15 +36,13 @@
on:mouseleave={$isDragging ? null : () => ($hoveredRowId = null)}
on:click={() => dispatch("rowclick", rows.actions.cleanRow(row))}
>
{#each $visibleColumns as column, columnIdx}
{#each $visibleColumns as column}
{@const cellId = getCellID(row._id, column.name)}
<DataCell
{cellId}
{column}
{row}
{invertY}
{rowFocused}
invertX={columnIdx >= $columnHorizontalInversionIndex}
highlighted={rowHovered || rowFocused || reorderSource === column.name}
selected={rowSelected}
rowIdx={row.__idx}

15
packages/frontend-core/src/components/grid/layout/NewRow.svelte
View file

@ -24,8 +24,6 @@
rowHeight,
hasNextPage,
maxScrollTop,
rowVerticalInversionIndex,
columnHorizontalInversionIndex,
selectedRows,
loaded,
refreshing,
@ -43,17 +41,9 @@
$: firstColumn = $stickyColumn || $visibleColumns[0]
$: width = GutterWidth + ($stickyColumn?.width || 0)
$: $datasource, (visible = false)
$: invertY = shouldInvertY(offset, $rowVerticalInversionIndex, $renderedRows)
$: selectedRowCount = Object.values($selectedRows).length
$: hasNoRows = !$rows.length
const shouldInvertY = (offset, inversionIndex, rows) => {
if (offset === 0) {
return false
}
return rows.length >= inversionIndex
}
const addRow = async () => {
// Blur the active cell and tick to let final value updates propagate
isAdding = true
@ -205,7 +195,6 @@
width={$stickyColumn.width}
{updateValue}
topRow={offset === 0}
{invertY}
>
{#if $stickyColumn?.schema?.autocolumn}
<div class="readonly-overlay">Can't edit auto column</div>
@ -219,7 +208,7 @@
<div class="normal-columns" transition:fade|local={{ duration: 130 }}>
<GridScrollWrapper scrollHorizontally attachHandlers>
<div class="row">
{#each $visibleColumns as column, columnIdx}
{#each $visibleColumns as column}
{@const cellId = `new-${column.name}`}
<DataCell
{cellId}
@ -230,8 +219,6 @@
focused={$focusedCellId === cellId}
width={column.width}
topRow={offset === 0}
invertX={columnIdx >= $columnHorizontalInversionIndex}
{invertY}
hidden={!$columnRenderMap[column.name]}
>
{#if column?.schema?.autocolumn}

2
packages/frontend-core/src/components/grid/lib/renderers.js
View file

@ -13,6 +13,7 @@ import JSONCell from "../cells/JSONCell.svelte"
import AttachmentCell from "../cells/AttachmentCell.svelte"
import AttachmentSingleCell from "../cells/AttachmentSingleCell.svelte"
import BBReferenceCell from "../cells/BBReferenceCell.svelte"
import SignatureCell from "../cells/SignatureCell.svelte"
import BBReferenceSingleCell from "../cells/BBReferenceSingleCell.svelte"
const TypeComponentMap = {
@ -20,6 +21,7 @@ const TypeComponentMap = {
[FieldType.OPTIONS]: OptionsCell,
[FieldType.DATETIME]: DateCell,
[FieldType.BARCODEQR]: TextCell,
[FieldType.SIGNATURE_SINGLE]: SignatureCell,
[FieldType.LONGFORM]: LongFormCell,
[FieldType.ARRAY]: MultiSelectCell,
[FieldType.NUMBER]: NumberCell,

47
packages/frontend-core/src/components/grid/stores/viewport.js
View file

@ -1,9 +1,5 @@
import { derived } from "svelte/store"
import {
MaxCellRenderOverflow,
MinColumnWidth,
ScrollBarSize,
} from "../lib/constants"
import { MinColumnWidth } from "../lib/constants"
export const deriveStores = context => {
const {
@ -85,51 +81,10 @@ export const deriveStores = context => {
}
)
// Determine the row index at which we should start vertically inverting cell
// dropdowns
const rowVerticalInversionIndex = derived(
[height, rowHeight, scrollTop],
([$height, $rowHeight, $scrollTop]) => {
const offset = $scrollTop % $rowHeight
// Compute the last row index with space to render popovers below it
const minBottom =
$height - ScrollBarSize * 3 - MaxCellRenderOverflow + offset
const lastIdx = Math.floor(minBottom / $rowHeight)
// Compute the first row index with space to render popovers above it
const minTop = MaxCellRenderOverflow + offset
const firstIdx = Math.ceil(minTop / $rowHeight)
// Use the greater of the two indices so that we prefer content below,
// unless there is room to render the entire popover above
return Math.max(lastIdx, firstIdx)
}
)
// Determine the column index at which we should start horizontally inverting
// cell dropdowns
const columnHorizontalInversionIndex = derived(
[visibleColumns, scrollLeft, width],
([$visibleColumns, $scrollLeft, $width]) => {
const cutoff = $width + $scrollLeft - ScrollBarSize * 3
let inversionIdx = $visibleColumns.length
for (let i = $visibleColumns.length - 1; i >= 0; i--, inversionIdx--) {
const rightEdge = $visibleColumns[i].left + $visibleColumns[i].width
if (rightEdge + MaxCellRenderOverflow <= cutoff) {
break
}
}
return inversionIdx
}
)
return {
scrolledRowCount,
visualRowCapacity,
renderedRows,
columnRenderMap,
rowVerticalInversionIndex,
columnHorizontalInversionIndex,
}
}

1
packages/frontend-core/src/components/index.js
View file

@ -1,5 +1,6 @@
export { default as SplitPage } from "./SplitPage.svelte"
export { default as TestimonialPage } from "./TestimonialPage.svelte"
export { default as SignatureModal } from "./SignatureModal.svelte"
export { default as Testimonial } from "./Testimonial.svelte"
export { default as UserAvatar } from "./UserAvatar.svelte"
export { default as UserAvatars } from "./UserAvatars.svelte"

1
packages/frontend-core/src/constants.js
View file

@ -121,6 +121,7 @@ export const TypeIconMap = {
[FieldType.OPTIONS]: "Dropdown",
[FieldType.DATETIME]: "Calendar",
[FieldType.BARCODEQR]: "Camera",
[FieldType.SIGNATURE_SINGLE]: "AnnotatePen",
[FieldType.LONGFORM]: "TextAlignLeft",
[FieldType.ARRAY]: "Duplicate",
[FieldType.NUMBER]: "123",

128
packages/server/src/api/routes/tests/row.spec.ts
View file

@ -309,6 +309,11 @@ describe.each([
name: "attachments",
constraints: { type: "array", presence: false },
}
const signature: FieldSchema = {
type: FieldType.SIGNATURE_SINGLE,
name: "signature",
constraints: { presence: false },
}
const bool: FieldSchema = {
type: FieldType.BOOLEAN,
name: "boolean",
@ -375,6 +380,8 @@ describe.each([
attachmentListUndefined: attachmentList,
attachmentListEmpty: attachmentList,
attachmentListEmptyArrayStr: attachmentList,
signatureNull: signature,
signatureUndefined: signature,
arrayFieldEmptyArrayStr: arrayField,
arrayFieldArrayStrKnown: arrayField,
arrayFieldNull: arrayField,
@ -416,6 +423,8 @@ describe.each([
attachmentListUndefined: undefined,
attachmentListEmpty: "",
attachmentListEmptyArrayStr: "[]",
signatureNull: null,
signatureUndefined: undefined,
arrayFieldEmptyArrayStr: "[]",
arrayFieldUndefined: undefined,
arrayFieldNull: null,
@ -450,6 +459,8 @@ describe.each([
expect(row.attachmentListUndefined).toBe(undefined)
expect(row.attachmentListEmpty).toEqual([])
expect(row.attachmentListEmptyArrayStr).toEqual([])
expect(row.signatureNull).toEqual(null)
expect(row.signatureUndefined).toBe(undefined)
expect(row.arrayFieldEmptyArrayStr).toEqual([])
expect(row.arrayFieldNull).toEqual([])
expect(row.arrayFieldUndefined).toEqual(undefined)
@ -894,70 +905,91 @@ describe.each([
})
isInternal &&
describe("attachments", () => {
it("should allow enriching single attachment rows", async () => {
const table = await config.api.table.save(
describe("attachments and signatures", () => {
const coreAttachmentEnrichment = async (
schema: any,
field: string,
attachmentCfg: string | string[]
) => {
const testTable = await config.api.table.save(
defaultTable({
schema: {
attachment: {
type: FieldType.ATTACHMENT_SINGLE,
name: "attachment",
constraints: { presence: false },
},
},
schema,
})
)
const attachmentId = `${uuid.v4()}.csv`
const row = await config.api.row.save(table._id!, {
const attachmentToStoreKey = (attachmentId: string) => {
return {
key: `${config.getAppId()}/attachments/${attachmentId}`,
}
}
const draftRow = {
name: "test",
description: "test",
attachment: {
key: `${config.getAppId()}/attachments/${attachmentId}`,
},
[field]:
typeof attachmentCfg === "string"
? attachmentToStoreKey(attachmentCfg)
: attachmentCfg.map(attachmentToStoreKey),
tableId: testTable._id,
}
const row = await config.api.row.save(testTable._id!, draftRow)
tableId: table._id,
})
await config.withEnv({ SELF_HOSTED: "true" }, async () => {
return context.doInAppContext(config.getAppId(), async () => {
const enriched = await outputProcessing(table, [row])
expect((enriched as Row[])[0].attachment.url.split("?")[0]).toBe(
`/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
)
const enriched: Row[] = await outputProcessing(table, [row])
const [targetRow] = enriched
const attachmentEntries = Array.isArray(targetRow[field])
? targetRow[field]
: [targetRow[field]]
for (const entry of attachmentEntries) {
const attachmentId = entry.key.split("/").pop()
expect(entry.url.split("?")[0]).toBe(
`/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
)
}
})
})
}
it("should allow enriching single attachment rows", async () => {
await coreAttachmentEnrichment(
{
attachment: {
type: FieldType.ATTACHMENT_SINGLE,
name: "attachment",
constraints: { presence: false },
},
},
"attachment",
`${uuid.v4()}.csv`
)
})
it("should allow enriching attachment list rows", async () => {
const table = await config.api.table.save(
defaultTable({
schema: {
attachment: {
type: FieldType.ATTACHMENTS,
name: "attachment",
constraints: { type: "array", presence: false },
},
await coreAttachmentEnrichment(
{
attachments: {
type: FieldType.ATTACHMENTS,
name: "attachments",
constraints: { type: "array", presence: false },
},
})
},
"attachments",
[`${uuid.v4()}.csv`]
)
const attachmentId = `${uuid.v4()}.csv`
const row = await config.api.row.save(table._id!, {
name: "test",
description: "test",
attachment: [
{
key: `${config.getAppId()}/attachments/${attachmentId}`,
})
it("should allow enriching signature rows", async () => {
await coreAttachmentEnrichment(
{
signature: {
type: FieldType.SIGNATURE_SINGLE,
name: "signature",
constraints: { presence: false },
},
],
tableId: table._id,
})
await config.withEnv({ SELF_HOSTED: "true" }, async () => {
return context.doInAppContext(config.getAppId(), async () => {
const enriched = await outputProcessing(table, [row])
expect((enriched as Row[])[0].attachment[0].url.split("?")[0]).toBe(
`/files/signed/prod-budi-app-assets/${config.getProdAppId()}/attachments/${attachmentId}`
)
})
})
},
"signature",
`${uuid.v4()}.png`
)
})
})

6
packages/server/src/api/routes/tests/search.spec.ts
View file

@ -19,9 +19,10 @@ import {
} from "@budibase/types"
import _ from "lodash"
import tk from "timekeeper"
import { mocks } from "@budibase/backend-core/tests"
import { encodeJSBinding } from "@budibase/string-templates"
const serverTime = new Date("2024-05-06T00:00:00.000Z")
const serverTime = mocks.date.MOCK_DATE
tk.freeze(serverTime)
describe.each([
@ -407,8 +408,7 @@ describe.each([
})
it("should parse the encoded js binding. Return rows with appointments 2 weeks in the past", async () => {
const jsBinding =
"const currentTime = new Date()\ncurrentTime.setDate(currentTime.getDate()-14);\nreturn currentTime.toISOString();"
const jsBinding = `const currentTime = new Date(${Date.now()})\ncurrentTime.setDate(currentTime.getDate()-14);\nreturn currentTime.toISOString();`
const encodedBinding = encodeJSBinding(jsBinding)
await expectQuery({

3
packages/server/src/automations/automationUtils.ts
View file

@ -113,7 +113,8 @@ export async function sendAutomationAttachmentsToStorage(
const schema = table.schema[prop]
if (
schema?.type === FieldType.ATTACHMENTS ||
schema?.type === FieldType.ATTACHMENT_SINGLE
schema?.type === FieldType.ATTACHMENT_SINGLE ||
schema?.type === FieldType.SIGNATURE_SINGLE
) {
attachmentRows[prop] = value
}

1
packages/server/src/integrations/base/sqlTable.ts
View file

@ -125,6 +125,7 @@ function generateSchema(
break
case FieldType.ATTACHMENTS:
case FieldType.ATTACHMENT_SINGLE:
case FieldType.SIGNATURE_SINGLE:
case FieldType.AUTO:
case FieldType.JSON:
case FieldType.INTERNAL:

1
packages/server/src/integrations/googlesheets.ts
View file

@ -72,6 +72,7 @@ const isTypeAllowed: Record<FieldType, boolean> = {
[FieldType.JSON]: false,
[FieldType.INTERNAL]: false,
[FieldType.BIGINT]: false,
[FieldType.SIGNATURE_SINGLE]: false,
}
const ALLOWED_TYPES = Object.entries(isTypeAllowed)

1
packages/server/src/integrations/utils/utils.ts
View file

@ -381,6 +381,7 @@ function copyExistingPropsOver(
case FieldType.ARRAY:
case FieldType.ATTACHMENTS:
case FieldType.ATTACHMENT_SINGLE:
case FieldType.SIGNATURE_SINGLE:
case FieldType.JSON:
case FieldType.BB_REFERENCE:
case FieldType.BB_REFERENCE_SINGLE:

3
packages/server/src/sdk/app/backups/imports.ts
View file

@ -68,7 +68,8 @@ export async function updateAttachmentColumns(prodAppId: string, db: Database) {
rewriteAttachmentUrl(prodAppId, attachment)
)
} else if (
columnType === FieldType.ATTACHMENT_SINGLE &&
(columnType === FieldType.ATTACHMENT_SINGLE ||
columnType === FieldType.SIGNATURE_SINGLE) &&
row[column]
) {
row[column] = rewriteAttachmentUrl(prodAppId, row[column])

3
packages/server/src/sdk/app/rows/attachments.ts
View file

@ -32,7 +32,8 @@ export async function getRowsWithAttachments(appId: string, table: Table) {
for (let [key, column] of Object.entries(table.schema)) {
if (
column.type === FieldType.ATTACHMENTS ||
column.type === FieldType.ATTACHMENT_SINGLE
column.type === FieldType.ATTACHMENT_SINGLE ||
column.type === FieldType.SIGNATURE_SINGLE
) {
attachmentCols.push(key)
}

1
packages/server/src/sdk/app/tables/internal/sqs.ts
View file

@ -42,6 +42,7 @@ const FieldTypeMap: Record<FieldType, SQLiteType> = {
[FieldType.BARCODEQR]: SQLiteType.BLOB,
[FieldType.ATTACHMENTS]: SQLiteType.BLOB,
[FieldType.ATTACHMENT_SINGLE]: SQLiteType.BLOB,
[FieldType.SIGNATURE_SINGLE]: SQLiteType.BLOB,
[FieldType.ARRAY]: SQLiteType.BLOB,
[FieldType.LINK]: SQLiteType.BLOB,
[FieldType.BIGINT]: SQLiteType.TEXT,

63
packages/server/src/sdk/tests/attachments.spec.ts
View file

@ -23,13 +23,35 @@ describe("should be able to re-write attachment URLs", () => {
await config.init()
})
it("should update URLs on a number of rows over the limit", async () => {
const coreBehaviour = async (tblSchema: any, row: any) => {
const table = await config.api.table.save({
name: "photos",
type: "table",
sourceId: INTERNAL_TABLE_SOURCE_ID,
sourceType: TableSourceType.INTERNAL,
schema: {
schema: tblSchema,
})
for (let i = 0; i < FIND_LIMIT * 4; i++) {
await config.api.row.save(table._id!, {
...row,
})
}
const db = dbCore.getDB(config.getAppId())
await sdk.backups.updateAttachmentColumns(db.name, db)
return {
db,
rows: (await sdk.rows.getAllInternalRows(db.name)).filter(
row => row.tableId === table._id
),
}
}
it("Attachment field, should update URLs on a number of rows over the limit", async () => {
const { rows, db } = await coreBehaviour(
{
photo: {
type: FieldType.ATTACHMENT_SINGLE,
name: "photo",
@ -43,21 +65,11 @@ describe("should be able to re-write attachment URLs", () => {
name: "otherCol",
},
},
})
for (let i = 0; i < FIND_LIMIT * 4; i++) {
await config.api.row.save(table._id!, {
{
photo: { ...attachment },
gallery: [{ ...attachment }, { ...attachment }],
otherCol: "string",
})
}
const db = dbCore.getDB(config.getAppId())
await sdk.backups.updateAttachmentColumns(db.name, db)
const rows = (await sdk.rows.getAllInternalRows(db.name)).filter(
row => row.tableId === table._id
}
)
for (const row of rows) {
expect(row.otherCol).toBe("string")
@ -69,4 +81,27 @@ describe("should be able to re-write attachment URLs", () => {
expect(row.gallery[1].key).toBe(`${db.name}/attachments/a.png`)
}
})
it("Signature field, should update URLs on a number of rows over the limit", async () => {
const { rows, db } = await coreBehaviour(
{
signature: {
type: FieldType.SIGNATURE_SINGLE,
name: "signature",
},
otherCol: {
type: FieldType.STRING,
name: "otherCol",
},
},
{
signature: { ...attachment },
otherCol: "string",
}
)
for (const row of rows) {
expect(row.otherCol).toBe("string")
expect(row.signature.url).toBe("")
expect(row.signature.key).toBe(`${db.name}/attachments/a.png`)
}
})
})

13
packages/server/src/utilities/rowProcessor/attachments.ts
View file

@ -31,7 +31,8 @@ export class AttachmentCleanup {
): string[] {
if (
type !== FieldType.ATTACHMENTS &&
type !== FieldType.ATTACHMENT_SINGLE
type !== FieldType.ATTACHMENT_SINGLE &&
type !== FieldType.SIGNATURE_SINGLE
) {
return []
}
@ -62,7 +63,8 @@ export class AttachmentCleanup {
for (let [key, schema] of Object.entries(tableSchema)) {
if (
schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE
schema.type !== FieldType.ATTACHMENT_SINGLE &&
schema.type !== FieldType.SIGNATURE_SINGLE
) {
continue
}
@ -100,10 +102,12 @@ export class AttachmentCleanup {
for (let [key, schema] of Object.entries(table.schema)) {
if (
schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE
schema.type !== FieldType.ATTACHMENT_SINGLE &&
schema.type !== FieldType.SIGNATURE_SINGLE
) {
continue
}
rows.forEach(row => {
files = files.concat(
AttachmentCleanup.extractAttachmentKeys(schema.type, row[key])
@ -120,7 +124,8 @@ export class AttachmentCleanup {
for (let [key, schema] of Object.entries(table.schema)) {
if (
schema.type !== FieldType.ATTACHMENTS &&
schema.type !== FieldType.ATTACHMENT_SINGLE
schema.type !== FieldType.ATTACHMENT_SINGLE &&
schema.type !== FieldType.SIGNATURE_SINGLE
) {
continue
}

8
packages/server/src/utilities/rowProcessor/index.ts
View file

@ -158,7 +158,10 @@ export async function inputProcessing(
delete attachment.url
})
}
} else if (field.type === FieldType.ATTACHMENT_SINGLE) {
} else if (
field.type === FieldType.ATTACHMENT_SINGLE ||
field.type === FieldType.SIGNATURE_SINGLE
) {
const attachment = clonedRow[key]
if (attachment?.url) {
delete clonedRow[key].url
@ -230,7 +233,8 @@ export async function outputProcessing<T extends Row[] | Row>(
for (let [property, column] of Object.entries(table.schema)) {
if (
column.type === FieldType.ATTACHMENTS ||
column.type === FieldType.ATTACHMENT_SINGLE
column.type === FieldType.ATTACHMENT_SINGLE ||
column.type === FieldType.SIGNATURE_SINGLE
) {
for (let row of enriched) {
if (row[property] == null) {

180
packages/server/src/utilities/rowProcessor/tests/attachments.spec.ts
View file

@ -1,22 +1,30 @@
import { AttachmentCleanup } from "../attachments"
import { FieldType, Table, Row, TableSourceType } from "@budibase/types"
import { DEFAULT_BB_DATASOURCE_ID } from "../../../constants"
import { objectStore } from "@budibase/backend-core"
import { objectStore, db, context } from "@budibase/backend-core"
import * as uuid from "uuid"
const BUCKET = "prod-budi-app-assets"
const FILE_NAME = "file/thing.jpg"
const DEV_APPID = "abc_dev_123"
const PROD_APPID = "abc_123"
jest.mock("@budibase/backend-core", () => {
const actual = jest.requireActual("@budibase/backend-core")
return {
...actual,
context: {
...actual.context,
getAppId: jest.fn(),
},
objectStore: {
deleteFiles: jest.fn(),
ObjectStoreBuckets: actual.objectStore.ObjectStoreBuckets,
},
db: {
isProdAppID: () => jest.fn(() => false),
dbExists: () => jest.fn(() => false),
isProdAppID: jest.fn(),
getProdAppID: jest.fn(),
dbExists: jest.fn(),
},
}
})
@ -27,12 +35,18 @@ const mockedDeleteFiles = objectStore.deleteFiles as jest.MockedFunction<
const rowGenerators: [
string,
FieldType.ATTACHMENT_SINGLE | FieldType.ATTACHMENTS,
(
| FieldType.ATTACHMENT_SINGLE
| FieldType.ATTACHMENTS
| FieldType.SIGNATURE_SINGLE
),
string,
(fileKey?: string) => Row
][] = [
[
"row with a attachment list column",
FieldType.ATTACHMENTS,
"attach",
function rowWithAttachments(fileKey: string = FILE_NAME): Row {
return {
attach: [
@ -48,6 +62,7 @@ const rowGenerators: [
[
"row with a single attachment column",
FieldType.ATTACHMENT_SINGLE,
"attach",
function rowWithAttachments(fileKey: string = FILE_NAME): Row {
return {
attach: {
@ -58,11 +73,25 @@ const rowGenerators: [
}
},
],
[
"row with a single signature column",
FieldType.SIGNATURE_SINGLE,
"signature",
function rowWithSignature(): Row {
return {
signature: {
size: 1,
extension: "png",
key: `${uuid.v4()}.png`,
},
}
},
],
]
describe.each(rowGenerators)(
"attachment cleanup",
(_, attachmentFieldType, rowGenerator) => {
(_, attachmentFieldType, colKey, rowGenerator) => {
function tableGenerator(): Table {
return {
name: "table",
@ -75,97 +104,158 @@ describe.each(rowGenerators)(
type: attachmentFieldType,
constraints: {},
},
signature: {
name: "signature",
type: FieldType.SIGNATURE_SINGLE,
constraints: {},
},
},
}
}
const getRowKeys = (row: any, col: string) => {
return Array.isArray(row[col])
? row[col].map((entry: any) => entry.key)
: [row[col]?.key]
}
beforeEach(() => {
mockedDeleteFiles.mockClear()
jest.resetAllMocks()
jest.spyOn(context, "getAppId").mockReturnValue(DEV_APPID)
jest.spyOn(db, "isProdAppID").mockReturnValue(false)
jest.spyOn(db, "getProdAppID").mockReturnValue(PROD_APPID)
jest.spyOn(db, "dbExists").mockReturnValue(Promise.resolve(false))
})
it("should be able to cleanup a table update", async () => {
// Ignore calls to prune attachments when app is in production.
it(`${attachmentFieldType} - should not attempt to delete attachments/signatures if a published app exists`, async () => {
jest.spyOn(db, "dbExists").mockReturnValue(Promise.resolve(true))
const originalTable = tableGenerator()
delete originalTable.schema["attach"]
delete originalTable.schema[colKey]
await AttachmentCleanup.tableUpdate(originalTable, [rowGenerator()], {
oldTable: tableGenerator(),
})
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
})
it("should be able to cleanup a table deletion", async () => {
await AttachmentCleanup.tableDelete(tableGenerator(), [rowGenerator()])
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
})
it("should handle table column renaming", async () => {
const updatedTable = tableGenerator()
updatedTable.schema.attach2 = updatedTable.schema.attach
delete updatedTable.schema.attach
await AttachmentCleanup.tableUpdate(updatedTable, [rowGenerator()], {
oldTable: tableGenerator(),
rename: { old: "attach", updated: "attach2" },
})
expect(mockedDeleteFiles).not.toHaveBeenCalled()
})
it("shouldn't cleanup if no table changes", async () => {
it(`${attachmentFieldType} - should be able to cleanup a table update`, async () => {
const originalTable = tableGenerator()
delete originalTable.schema[colKey]
const targetRow = rowGenerator()
await AttachmentCleanup.tableUpdate(originalTable, [targetRow], {
oldTable: tableGenerator(),
})
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it(`${attachmentFieldType} - should be able to cleanup a table deletion`, async () => {
const targetRow = rowGenerator()
await AttachmentCleanup.tableDelete(tableGenerator(), [targetRow])
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it(`${attachmentFieldType} - should handle table column renaming`, async () => {
const updatedTable = tableGenerator()
updatedTable.schema.col2 = updatedTable.schema[colKey]
delete updatedTable.schema.attach
await AttachmentCleanup.tableUpdate(updatedTable, [rowGenerator()], {
oldTable: tableGenerator(),
rename: { old: colKey, updated: "col2" },
})
expect(mockedDeleteFiles).not.toHaveBeenCalled()
})
it(`${attachmentFieldType} - shouldn't cleanup if no table changes`, async () => {
await AttachmentCleanup.tableUpdate(tableGenerator(), [rowGenerator()], {
oldTable: tableGenerator(),
})
expect(mockedDeleteFiles).not.toHaveBeenCalled()
})
it("should handle row updates", async () => {
it(`${attachmentFieldType} - should handle row updates`, async () => {
const updatedRow = rowGenerator()
delete updatedRow.attach
delete updatedRow[colKey]
const targetRow = rowGenerator()
await AttachmentCleanup.rowUpdate(tableGenerator(), {
row: updatedRow,
oldRow: rowGenerator(),
oldRow: targetRow,
})
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it("should handle row deletion", async () => {
await AttachmentCleanup.rowDelete(tableGenerator(), [rowGenerator()])
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [FILE_NAME])
it(`${attachmentFieldType} - should handle row deletion`, async () => {
const targetRow = rowGenerator()
await AttachmentCleanup.rowDelete(tableGenerator(), [targetRow])
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it("should handle row deletion and not throw when attachments are undefined", async () => {
it(`${attachmentFieldType} - should handle row deletion, prune signature`, async () => {
const targetRow = rowGenerator()
await AttachmentCleanup.rowDelete(tableGenerator(), [targetRow])
expect(mockedDeleteFiles).toHaveBeenCalledWith(
BUCKET,
getRowKeys(targetRow, colKey)
)
})
it(`${attachmentFieldType} - should handle row deletion and not throw when attachments are undefined`, async () => {
await AttachmentCleanup.rowDelete(tableGenerator(), [
{
multipleAttachments: undefined,
[colKey]: undefined,
},
])
})
it("shouldn't cleanup attachments if row not updated", async () => {
it(`${attachmentFieldType} - shouldn't cleanup attachments if row not updated`, async () => {
const targetRow = rowGenerator()
await AttachmentCleanup.rowUpdate(tableGenerator(), {
row: rowGenerator(),
oldRow: rowGenerator(),
row: targetRow,
oldRow: targetRow,
})
expect(mockedDeleteFiles).not.toHaveBeenCalled()
})
it("should be able to cleanup a column and not throw when attachments are undefined", async () => {
it(`${attachmentFieldType} - should be able to cleanup a column and not throw when attachments are undefined`, async () => {
const originalTable = tableGenerator()
delete originalTable.schema["attach"]
delete originalTable.schema[colKey]
const row1 = rowGenerator("file 1")
const row2 = rowGenerator("file 2")
await AttachmentCleanup.tableUpdate(
originalTable,
[rowGenerator("file 1"), { attach: undefined }, rowGenerator("file 2")],
[row1, { [colKey]: undefined }, row2],
{
oldTable: tableGenerator(),
}
)
const expectedKeys = [row1, row2].reduce((acc: string[], row) => {
acc = [...acc, ...getRowKeys(row, colKey)]
return acc
}, [])
expect(mockedDeleteFiles).toHaveBeenCalledTimes(1)
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, [
"file 1",
"file 2",
])
expect(mockedDeleteFiles).toHaveBeenCalledWith(BUCKET, expectedKeys)
})
it("should be able to cleanup a column and not throw when ALL attachments are undefined", async () => {
it(`${attachmentFieldType} - should be able to cleanup a column and not throw when ALL attachments are undefined`, async () => {
const originalTable = tableGenerator()
delete originalTable.schema["attach"]
delete originalTable.schema[colKey]
await AttachmentCleanup.tableUpdate(
originalTable,
[{}, { attach: undefined }],

3
packages/server/src/utilities/schema.ts
View file

@ -151,7 +151,8 @@ export function parse(rows: Rows, schema: TableSchema): Rows {
parsedRow[columnName] = parsedValue?._id
} else if (
(columnType === FieldType.ATTACHMENTS ||
columnType === FieldType.ATTACHMENT_SINGLE) &&
columnType === FieldType.ATTACHMENT_SINGLE ||
columnType === FieldType.SIGNATURE_SINGLE) &&
typeof columnData === "string"
) {
parsedRow[columnName] = parseCsvExport(columnData)

3
packages/shared-core/src/table.ts
View file

@ -15,6 +15,7 @@ const allowDisplayColumnByType: Record<FieldType, boolean> = {
[FieldType.ARRAY]: false,
[FieldType.ATTACHMENTS]: false,
[FieldType.ATTACHMENT_SINGLE]: false,
[FieldType.SIGNATURE_SINGLE]: false,
[FieldType.LINK]: false,
[FieldType.JSON]: false,
[FieldType.BB_REFERENCE]: false,
@ -33,10 +34,10 @@ const allowSortColumnByType: Record<FieldType, boolean> = {
[FieldType.BIGINT]: true,
[FieldType.BOOLEAN]: true,
[FieldType.JSON]: true,
[FieldType.FORMULA]: false,
[FieldType.ATTACHMENTS]: false,
[FieldType.ATTACHMENT_SINGLE]: false,
[FieldType.SIGNATURE_SINGLE]: false,
[FieldType.ARRAY]: false,
[FieldType.LINK]: false,
[FieldType.BB_REFERENCE]: false,

5
packages/types/src/documents/app/row.ts
View file

@ -93,6 +93,11 @@ export enum FieldType {
* type is found. The column will contain the contents of any barcode scanned.
*/
BARCODEQR = "barcodeqr",
/**
* a JSON type, called Signature within Budibase. This type functions much the same as ATTACHMENTS but restricted
* only to signatures.
*/
SIGNATURE_SINGLE = "signature_single",
/**
* a string type, this allows representing very large integers, but they are held/managed within Budibase as
* strings. When stored in external databases Budibase will attempt to use a real big integer type and depend