diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte index 65934a032d..ae78405ccb 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/FieldView.svelte @@ -13,17 +13,33 @@ const FIELD_TYPES = ["string", "number", "boolean"] - export let field = { type: "string" } + export let field = { type: "string", constraints: { type: "string", presence: false } } export let schema export let goBack let errors = [] let draftField = cloneDeep(field) + + let type = field.type + let constraints = field.constraints + let required = field.constraints.presence && !field.constraints.presence.allowEmpty const save = () => { + constraints.presence = required ? { allowEmpty: false } : false + draftField.constraints = constraints + draftField.type = type schema[field.name] = draftField goBack() } + + $: constraints = + type === "string" ? { type: "string", length: {}, presence: false } + : type === "number" ? { type: "number", presence: false, numericality: {} } + : type === "boolean" ? { type: "boolean", presence: false } + : type === "datetime" ? { type: "date", datetime: {}, presence: false } + : type.startsWith('array') ? { type: "array", presence: false } + : { type: "string", presence: false } +
@@ -34,30 +50,22 @@ + + + - {#if field.type === 'string'} - - - {:else if field.type === 'boolean'} + {#if type === 'string'} + + + {:else if type === 'datetime'} - - {:else if field.format === 'datetime'} - - - - {:else if field.type === 'number'} - - - {:else if draftField.type.startsWith('array')} - - - + + + {:else if type === 'number'} + + {/if}
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte index 49749a70a1..d5320eca0d 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte @@ -8,10 +8,6 @@ import * as api from "../api" import ErrorsBox from "components/common/ErrorsBox.svelte" - const CLASS_NAME_MAP = { - boolean: "uk-checkbox", - } - export let record = {} export let onClosed @@ -27,14 +23,25 @@ function closed() { onClosed() } - + + const isSelect = meta => + meta.type === "string" + && meta.constraints + && meta.constraints.inclusion + && meta.constraints.inclusion.length > 0 + function determineInputType(meta) { if (meta.type === "datetime") return "date" if (meta.type === "number") return "number" if (meta.type === "boolean") return "checkbox" - + if (isSelect(meta)) return "select" + return "text" } + + function determineOptions(meta) { + return isSelect(meta) ? meta.constraints.inclusion : [] + } async function saveRecord() { const recordResponse = await api.saveRecord( @@ -46,7 +53,9 @@ $backendUiStore.selectedModel._id ) if (recordResponse.errors) { - errors = recordResponse.errors + errors = Object.keys(recordResponse.errors) + .map(k => ({dataPath: k, message: recordResponse.errors[k]})) + .flat() return } @@ -65,8 +74,8 @@ {#each modelSchema as [key, meta]}
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte index 0839180601..b0571a2353 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte @@ -3,10 +3,16 @@ export let value = "" export let label export let errors = [] - export let className = "uk-input" - + export let options = [] + let checked = type === "checkbox" ? value : false - + + const determineClassName = type => { + if (type === "checkbox") return "uk-checkbox" + if (type === "select") return "uk-select" + return "uk-input" + } + const handleInput = event => { if (event.target.type === "checkbox") { value = event.target.checked @@ -23,11 +29,23 @@ + +{#if type === "select"} + +{:else} 0} {checked} {type} {value} on:input={handleInput} on:change={handleInput} /> +{/if}