2020-03-28 00:28:30 +13:00
|
|
|
<script>
|
2020-08-08 03:13:57 +12:00
|
|
|
import { Input, Select } from "@budibase/bbui"
|
2020-09-09 05:03:41 +12:00
|
|
|
import DatePicker from "components/common/DatePicker.svelte"
|
2020-08-08 03:13:57 +12:00
|
|
|
|
2020-08-22 04:05:26 +12:00
|
|
|
export let meta
|
2020-08-25 02:48:34 +12:00
|
|
|
export let value = meta.type === "boolean" ? false : ""
|
2020-08-22 04:05:26 +12:00
|
|
|
|
2020-08-25 02:48:34 +12:00
|
|
|
let isSelect =
|
2020-08-22 04:05:26 +12:00
|
|
|
meta.type === "string" &&
|
|
|
|
meta.constraints &&
|
|
|
|
meta.constraints.inclusion &&
|
|
|
|
meta.constraints.inclusion.length > 0
|
2020-09-09 05:03:41 +12:00
|
|
|
|
2020-08-22 04:05:26 +12:00
|
|
|
let type = determineInputType(meta)
|
|
|
|
|
|
|
|
function determineInputType(meta) {
|
|
|
|
if (meta.type === "datetime") return "date"
|
|
|
|
if (meta.type === "number") return "number"
|
|
|
|
if (meta.type === "boolean") return "checkbox"
|
2020-08-25 02:48:34 +12:00
|
|
|
if (isSelect) return "select"
|
2020-08-22 04:05:26 +12:00
|
|
|
|
|
|
|
return "text"
|
|
|
|
}
|
|
|
|
|
2020-04-21 03:17:11 +12:00
|
|
|
const handleInput = event => {
|
|
|
|
if (event.target.type === "checkbox") {
|
2020-05-07 21:53:34 +12:00
|
|
|
value = event.target.checked
|
|
|
|
return
|
2020-04-21 03:17:11 +12:00
|
|
|
}
|
|
|
|
|
|
|
|
if (event.target.type === "number") {
|
2020-05-07 21:53:34 +12:00
|
|
|
value = parseInt(event.target.value)
|
|
|
|
return
|
2020-04-21 03:17:11 +12:00
|
|
|
}
|
|
|
|
|
2020-05-07 21:53:34 +12:00
|
|
|
value = event.target.value
|
2020-04-21 03:17:11 +12:00
|
|
|
}
|
2020-03-28 00:28:30 +13:00
|
|
|
</script>
|
|
|
|
|
2020-06-01 23:15:44 +12:00
|
|
|
{#if type === 'select'}
|
2020-08-22 04:05:26 +12:00
|
|
|
<Select thin secondary data-cy="{meta.name}-select" bind:value>
|
2020-07-08 08:29:20 +12:00
|
|
|
<option />
|
2020-08-25 02:48:34 +12:00
|
|
|
{#each meta.constraints.inclusion as opt}
|
2020-06-01 23:15:44 +12:00
|
|
|
<option value={opt}>{opt}</option>
|
|
|
|
{/each}
|
2020-08-08 03:13:57 +12:00
|
|
|
</Select>
|
2020-09-09 05:03:41 +12:00
|
|
|
{:else if type === 'date'}
|
2020-09-09 23:06:04 +12:00
|
|
|
<DatePicker label={meta.name} bind:value />
|
2020-05-29 09:26:32 +12:00
|
|
|
{:else}
|
2020-08-12 04:58:01 +12:00
|
|
|
{#if type === 'checkbox'}
|
2020-08-22 04:05:26 +12:00
|
|
|
<label>{meta.name}</label>
|
2020-08-12 04:58:01 +12:00
|
|
|
{/if}
|
2020-08-08 03:13:57 +12:00
|
|
|
<Input
|
|
|
|
thin
|
2020-08-22 04:05:26 +12:00
|
|
|
placeholder={meta.name}
|
|
|
|
data-cy="{meta.name}-input"
|
2020-08-15 03:31:53 +12:00
|
|
|
checked={value}
|
2020-06-01 23:15:44 +12:00
|
|
|
{type}
|
|
|
|
{value}
|
|
|
|
on:change={handleInput} />
|
2020-08-11 22:23:07 +12:00
|
|
|
{/if}
|
2020-08-12 04:58:01 +12:00
|
|
|
|
|
|
|
<style>
|
|
|
|
label {
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: var(--font-size-s);
|
|
|
|
float: left;
|
|
|
|
margin-right: 8px;
|
|
|
|
}
|
|
|
|
</style>
|