2020-03-28 00:28:30 +13:00
|
|
|
<script>
|
2021-08-20 03:54:44 +12:00
|
|
|
import {
|
|
|
|
Input,
|
|
|
|
Select,
|
|
|
|
DatePicker,
|
|
|
|
Toggle,
|
|
|
|
Multiselect,
|
2021-11-30 07:16:44 +13:00
|
|
|
Label,
|
2022-02-03 04:18:46 +13:00
|
|
|
RichTextField,
|
2022-02-08 01:04:43 +13:00
|
|
|
TextArea,
|
2021-08-20 03:54:44 +12:00
|
|
|
} from "@budibase/bbui"
|
2020-09-12 02:09:56 +12:00
|
|
|
import Dropzone from "components/common/Dropzone.svelte"
|
2021-05-07 03:39:34 +12:00
|
|
|
import { capitalise } from "helpers"
|
2020-10-10 07:10:28 +13:00
|
|
|
import LinkedRowSelector from "components/common/LinkedRowSelector.svelte"
|
2021-11-30 07:16:44 +13:00
|
|
|
import Editor from "../../integration/QueryEditor.svelte"
|
2020-08-08 03:13:57 +12:00
|
|
|
|
2021-02-23 00:39:58 +13:00
|
|
|
export let defaultValue
|
2020-08-22 04:05:26 +12:00
|
|
|
export let meta
|
2021-02-23 00:39:58 +13:00
|
|
|
export let value = defaultValue || (meta.type === "boolean" ? false : "")
|
2020-12-08 08:05:39 +13:00
|
|
|
export let readonly
|
2022-11-07 11:35:33 +13:00
|
|
|
export let error
|
2020-08-22 04:05:26 +12:00
|
|
|
|
2022-04-04 22:51:52 +12:00
|
|
|
const resolveTimeStamp = timestamp => {
|
2022-04-29 00:18:10 +12:00
|
|
|
if (!timestamp) {
|
|
|
|
return null
|
|
|
|
}
|
2022-04-04 22:51:52 +12:00
|
|
|
let maskedDate = new Date(`0-${timestamp}`)
|
|
|
|
if (maskedDate instanceof Date && !isNaN(maskedDate.getTime())) {
|
|
|
|
return maskedDate
|
|
|
|
} else {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-11-30 07:16:44 +13:00
|
|
|
$: stringVal =
|
|
|
|
typeof value === "object" ? JSON.stringify(value, null, 2) : value
|
2021-10-30 01:34:10 +13:00
|
|
|
$: type = meta?.type
|
|
|
|
$: label = meta.name ? capitalise(meta.name) : ""
|
2022-04-04 22:51:52 +12:00
|
|
|
|
|
|
|
const timeStamp = resolveTimeStamp(value)
|
2022-05-04 01:11:06 +12:00
|
|
|
const isTimeStamp = !!timeStamp || meta?.timeOnly
|
2020-03-28 00:28:30 +13:00
|
|
|
</script>
|
|
|
|
|
2022-04-09 03:21:30 +12:00
|
|
|
{#if type === "options" && meta.constraints.inclusion.length !== 0}
|
2021-04-16 06:42:58 +12:00
|
|
|
<Select
|
|
|
|
{label}
|
|
|
|
data-cy="{meta.name}-select"
|
|
|
|
bind:value
|
2021-05-04 22:04:42 +12:00
|
|
|
options={meta.constraints.inclusion}
|
2021-08-20 21:03:21 +12:00
|
|
|
sort
|
2021-05-04 22:04:42 +12:00
|
|
|
/>
|
|
|
|
{:else if type === "datetime"}
|
2022-05-04 01:11:06 +12:00
|
|
|
<DatePicker
|
2022-11-07 11:35:33 +13:00
|
|
|
{error}
|
2022-05-04 01:11:06 +12:00
|
|
|
{label}
|
|
|
|
timeOnly={isTimeStamp}
|
|
|
|
enableTime={!meta?.dateOnly}
|
2022-06-07 19:31:00 +12:00
|
|
|
ignoreTimezones={meta?.ignoreTimezones}
|
2022-05-04 01:11:06 +12:00
|
|
|
bind:value
|
|
|
|
/>
|
2021-05-04 22:04:42 +12:00
|
|
|
{:else if type === "attachment"}
|
2022-11-07 11:35:33 +13:00
|
|
|
<Dropzone {label} {error} bind:value />
|
2021-05-04 22:04:42 +12:00
|
|
|
{:else if type === "boolean"}
|
2022-11-07 11:35:33 +13:00
|
|
|
<Toggle text={label} {error} bind:value data-cy="{meta.name}-input" />
|
2022-04-09 03:21:30 +12:00
|
|
|
{:else if type === "array" && meta.constraints.inclusion.length !== 0}
|
2022-11-07 11:35:33 +13:00
|
|
|
<Multiselect
|
|
|
|
bind:value
|
|
|
|
{error}
|
|
|
|
{label}
|
|
|
|
options={meta.constraints.inclusion}
|
|
|
|
/>
|
2021-05-04 22:04:42 +12:00
|
|
|
{:else if type === "link"}
|
2022-11-07 11:35:33 +13:00
|
|
|
<LinkedRowSelector {error} bind:linkedRows={value} schema={meta} />
|
2021-05-04 22:04:42 +12:00
|
|
|
{:else if type === "longform"}
|
2022-02-08 01:04:43 +13:00
|
|
|
{#if meta.useRichText}
|
2022-11-07 11:35:33 +13:00
|
|
|
<RichTextField {error} {label} height="150px" bind:value />
|
2022-02-08 01:04:43 +13:00
|
|
|
{:else}
|
2022-11-07 11:35:33 +13:00
|
|
|
<TextArea {error} {label} height="150px" bind:value />
|
2022-02-08 01:04:43 +13:00
|
|
|
{/if}
|
2021-11-30 07:16:44 +13:00
|
|
|
{:else if type === "json"}
|
|
|
|
<Label>{label}</Label>
|
|
|
|
<Editor
|
|
|
|
editorHeight="250"
|
|
|
|
mode="json"
|
|
|
|
on:change={({ detail }) => (value = detail.value)}
|
|
|
|
value={stringVal}
|
2022-11-07 11:35:33 +13:00
|
|
|
{error}
|
2021-11-30 07:16:44 +13:00
|
|
|
/>
|
2020-05-29 09:26:32 +12:00
|
|
|
{:else}
|
2020-11-28 03:59:27 +13:00
|
|
|
<Input
|
|
|
|
{label}
|
|
|
|
data-cy="{meta.name}-input"
|
|
|
|
{type}
|
2022-11-07 11:35:33 +13:00
|
|
|
{error}
|
2020-11-28 03:59:27 +13:00
|
|
|
bind:value
|
2021-05-04 22:04:42 +12:00
|
|
|
disabled={readonly}
|
|
|
|
/>
|
2020-08-11 22:23:07 +12:00
|
|
|
{/if}
|