Merge master.
This commit is contained in:
commit
402afa1df6
58 changed files with 1217 additions and 257 deletions
267
packages/bbui/src/Form/Core/Signature.svelte
Normal file
267
packages/bbui/src/Form/Core/Signature.svelte
Normal 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>
|
|
@ -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"
|
||||
|
|
|
@ -173,6 +173,7 @@
|
|||
}
|
||||
|
||||
.spectrum-Modal {
|
||||
border: 2px solid var(--spectrum-global-color-gray-200);
|
||||
overflow: visible;
|
||||
max-height: none;
|
||||
margin: 40px 0;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -412,6 +412,7 @@
|
|||
FIELDS.FORMULA,
|
||||
FIELDS.JSON,
|
||||
FIELDS.BARCODEQR,
|
||||
FIELDS.SIGNATURE_SINGLE,
|
||||
FIELDS.BIGINT,
|
||||
FIELDS.AUTO,
|
||||
]
|
||||
|
|
|
@ -54,6 +54,10 @@
|
|||
label: "Attachment",
|
||||
value: FieldType.ATTACHMENT_SINGLE,
|
||||
},
|
||||
{
|
||||
label: "Signature",
|
||||
value: FieldType.SIGNATURE_SINGLE,
|
||||
},
|
||||
{
|
||||
label: "Attachment list",
|
||||
value: FieldType.ATTACHMENTS,
|
||||
|
|
|
@ -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={() => {
|
||||
|
|
|
@ -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,
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -108,6 +108,8 @@
|
|||
Constraints.MaxFileSize,
|
||||
Constraints.MaxUploadSize,
|
||||
],
|
||||
["attachment_single"]: [Constraints.Required, Constraints.MaxUploadSize],
|
||||
["signature_single"]: [Constraints.Required],
|
||||
["link"]: [
|
||||
Constraints.Required,
|
||||
Constraints.Contains,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -71,6 +71,7 @@
|
|||
"multifieldselect",
|
||||
"s3upload",
|
||||
"codescanner",
|
||||
"signaturesinglefield",
|
||||
"bbreferencesinglefield",
|
||||
"bbreferencefield"
|
||||
]
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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
129
packages/client/src/components/app/forms/SignatureField.svelte
Normal 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>
|
|
@ -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"
|
||||
|
|
|
@ -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
59
packages/frontend-core/src/components/SignatureModal.svelte
Normal 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>
|
|
@ -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}
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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 || ""}
|
||||
|
|
|
@ -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)}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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,
|
||||
})
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,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"
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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`
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
@ -21,9 +21,6 @@ import _ from "lodash"
|
|||
import tk from "timekeeper"
|
||||
import { encodeJSBinding } from "@budibase/string-templates"
|
||||
|
||||
const serverTime = new Date("2024-05-06T00:00:00.000Z")
|
||||
tk.freeze(serverTime)
|
||||
|
||||
describe.each([
|
||||
//["lucene", undefined],
|
||||
["sqs", undefined],
|
||||
|
@ -251,8 +248,14 @@ describe.each([
|
|||
describe("bindings", () => {
|
||||
let globalUsers: any = []
|
||||
|
||||
const future = new Date(serverTime.getTime())
|
||||
future.setDate(future.getDate() + 30)
|
||||
const serverTime = new Date()
|
||||
|
||||
// In MariaDB and MySQL we only store dates to second precision, so we need
|
||||
// to remove milliseconds from the server time to ensure searches work as
|
||||
// expected.
|
||||
serverTime.setMilliseconds(0)
|
||||
|
||||
const future = new Date(serverTime.getTime() + 1000 * 60 * 60 * 24 * 30)
|
||||
|
||||
const rows = (currentUser: User) => {
|
||||
return [
|
||||
|
@ -358,20 +361,22 @@ describe.each([
|
|||
})
|
||||
|
||||
it("should parse the date binding and return all rows after the resolved value", async () => {
|
||||
await expectQuery({
|
||||
range: {
|
||||
appointment: {
|
||||
low: "{{ [now] }}",
|
||||
high: "9999-00-00T00:00:00.000Z",
|
||||
await tk.withFreeze(serverTime, async () => {
|
||||
await expectQuery({
|
||||
range: {
|
||||
appointment: {
|
||||
low: "{{ [now] }}",
|
||||
high: "9999-00-00T00:00:00.000Z",
|
||||
},
|
||||
},
|
||||
},
|
||||
}).toContainExactly([
|
||||
{
|
||||
name: config.getUser().firstName,
|
||||
appointment: future.toISOString(),
|
||||
},
|
||||
{ name: "serverDate", appointment: serverTime.toISOString() },
|
||||
])
|
||||
}).toContainExactly([
|
||||
{
|
||||
name: config.getUser().firstName,
|
||||
appointment: future.toISOString(),
|
||||
},
|
||||
{ name: "serverDate", appointment: serverTime.toISOString() },
|
||||
])
|
||||
})
|
||||
})
|
||||
|
||||
it("should parse the date binding and return all rows before the resolved value", async () => {
|
||||
|
@ -406,9 +411,8 @@ describe.each([
|
|||
])
|
||||
})
|
||||
|
||||
it.only("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();"
|
||||
it("should parse the encoded js binding. Return rows with appointments 2 weeks in the past", async () => {
|
||||
const jsBinding = `const currentTime = new Date(${Date.now()})\ncurrentTime.setDate(currentTime.getDate()-14);\nreturn currentTime.toISOString();`
|
||||
const encodedBinding = encodeJSBinding(jsBinding)
|
||||
|
||||
await expectQuery({
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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:
|
||||
|
|
|
@ -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])
|
||||
|
|
|
@ -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)
|
||||
}
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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`)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 }],
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue