1
0
Fork 0
mirror of synced 2024-06-17 18:04:42 +12:00
budibase/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte

71 lines
1.5 KiB
Svelte
Raw Normal View History

<script>
2020-08-08 03:13:57 +12:00
import { Input, Select } from "@budibase/bbui"
import DatePicker from "components/common/DatePicker.svelte"
2020-08-08 03:13:57 +12:00
export let meta
2020-08-25 02:48:34 +12:00
export let value = meta.type === "boolean" ? false : ""
2020-08-25 02:48:34 +12:00
let isSelect =
meta.type === "string" &&
meta.constraints &&
meta.constraints.inclusion &&
meta.constraints.inclusion.length > 0
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"
return "text"
}
const handleInput = event => {
if (event.target.type === "checkbox") {
2020-05-07 21:53:34 +12:00
value = event.target.checked
return
}
if (event.target.type === "number") {
2020-05-07 21:53:34 +12:00
value = parseInt(event.target.value)
return
}
2020-05-07 21:53:34 +12:00
value = event.target.value
}
</script>
2020-06-01 23:15:44 +12:00
{#if type === 'select'}
<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>
{:else if type === 'date'}
<DatePicker label={meta.name} bind:value />
{:else}
2020-08-12 04:58:01 +12:00
{#if type === 'checkbox'}
<label>{meta.name}</label>
2020-08-12 04:58:01 +12:00
{/if}
2020-08-08 03:13:57 +12:00
<Input
thin
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>