Add support to data table modal UI for attachment single and signature types

packages/builder/src/components/backend/DataTable/RowFieldControl.svelte

@@ -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 defaultValue
   export let meta
@@ -39,8 +45,34 @@
 
   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)
+      value = uploadReq
+    } 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}
@@ -59,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"}
+  <div class="signature">
+    <Label>{label}</Label>
+    <div class="sig-wrap" class:display={value?.length}>
+      {#if value?.length}
+        <CoreSignature
+          {darkMode}
+          {value}
+          editable={false}
+          on:clear={() => {
+            value = []
+          }}
+        />
+      {: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}
@@ -95,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>

packages/builder/src/components/common/Dropzone.svelte

@@ -35,4 +35,5 @@
   {...$$restProps}
   {processFiles}
   {handleFileTooLarge}
+  on:change
 />