1
0
Fork 0
mirror of synced 2024-06-14 08:24:48 +12:00

Adding some basic UI around the key/value data type.

This commit is contained in:
mike12345567 2021-11-23 18:20:12 +00:00
parent e996d4cc9d
commit 18b742ede5
3 changed files with 121 additions and 0 deletions

View file

@ -9,6 +9,7 @@
DatePicker,
ModalContent,
Context,
Modal,
} from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { cloneDeep } from "lodash/fp"
@ -32,12 +33,14 @@
import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
import { getBindings } from "components/backend/DataTable/formula"
import { getContext } from "svelte"
import JSONSchemaModal from "./JSONSchemaModal.svelte"
const AUTO_TYPE = "auto"
const FORMULA_TYPE = FIELDS.FORMULA.type
const LINK_TYPE = FIELDS.LINK.type
const STRING_TYPE = FIELDS.STRING.type
const NUMBER_TYPE = FIELDS.NUMBER.type
const JSON_TYPE = FIELDS.JSON.type
const dispatch = createEventDispatcher()
const PROHIBITED_COLUMN_NAMES = ["type", "_id", "_rev", "tableId"]
@ -63,6 +66,7 @@
let confirmDeleteDialog
let deletion
let deleteColName
let jsonSchemaModal
$: checkConstraints(field)
$: required = !!field?.constraints?.presence || primaryDisplay
@ -83,6 +87,7 @@
// used to select what different options can be displayed for column type
$: canBeSearched =
field.type !== LINK_TYPE &&
field.type !== JSON_TYPE &&
field.subtype !== AUTO_COLUMN_SUB_TYPES.CREATED_BY &&
field.subtype !== AUTO_COLUMN_SUB_TYPES.UPDATED_BY &&
field.type !== FORMULA_TYPE
@ -173,6 +178,10 @@
}
}
function openJsonSchemaEditor() {
jsonSchemaModal.show()
}
function confirmDelete() {
confirmDeleteDialog.show()
deletion = true
@ -400,6 +409,10 @@
getOptionLabel={option => option[1].name}
getOptionValue={option => option[0]}
/>
{:else if field.type === JSON_TYPE}
<Button primary text on:click={openJsonSchemaEditor}
>Open schema editor</Button
>
{/if}
<div slot="footer">
@ -408,6 +421,9 @@
{/if}
</div>
</ModalContent>
<Modal bind:this={jsonSchemaModal}>
<JSONSchemaModal on:save={({ detail }) => console.log(detail)} />
</Modal>
<ConfirmDialog
bind:this={confirmDeleteDialog}
okText="Delete Column"

View file

@ -0,0 +1,97 @@
<script>
import Editor from "../../../integration/QueryEditor.svelte"
import {
ModalContent,
Tabs,
Tab,
Button,
Input,
Select,
} from "@budibase/bbui"
import { onMount, createEventDispatcher } from "svelte"
export let onConfirm = undefined
export let schema = {}
let dispatcher = createEventDispatcher()
let mode = "Key/Value"
let json
let fieldCount = 0
let fieldKeys = {},
fieldTypes = {}
let keyValueOptions = ["String", "Number", "Boolean", "Object", "Array"]
$: invalid = false
function onJsonUpdate({ detail }) {
// TODO: make request
const input = detail.value
console.log(input)
}
function saveSchema() {
for (let i of Object.keys(fieldKeys)) {
const key = fieldKeys[i]
schema[key] = {
type: fieldTypes[i],
}
}
dispatcher("save", schema)
}
onMount(() => {
if (!schema) {
schema = {}
}
let i = 0
for (let [key, value] of Object.entries(schema)) {
fieldKeys[i] = key
fieldTypes[i] = value.type
i++
}
fieldCount = i
})
</script>
<ModalContent
title={"Key/Value Schema Editor"}
confirmText="Save Column"
onConfirm={saveSchema}
disabled={invalid}
size="L"
>
<Tabs selected={mode} noPadding>
<Tab title="Key/Value">
{#each Array(fieldCount) as _, i}
<div class="horizontal">
<Input outline label="Key" bind:value={fieldKeys[i]} />
<Select
label="Type"
options={keyValueOptions}
bind:value={fieldTypes[i]}
getOptionValue={field => field.toLowerCase()}
/>
</div>
{/each}
<div class:add-field-btn={fieldCount !== 0}>
<Button primary text on:click={() => fieldCount++}>Add Field</Button>
</div>
</Tab>
<Tab title="JSON">
<Editor mode="json" on:change={onJsonUpdate} value={json} />
</Tab>
</Tabs>
</ModalContent>
<style>
.horizontal {
display: grid;
grid-template-columns: 30% 1fr;
grid-gap: var(--spacing-s);
align-items: center;
}
.add-field-btn {
margin-top: var(--spacing-xl);
}
</style>

View file

@ -89,6 +89,14 @@ export const FIELDS = {
presence: false,
},
},
JSON: {
name: "Key/Value",
type: "json",
constraints: {
type: "object",
presence: false,
},
},
}
export const AUTO_COLUMN_SUB_TYPES = {