From f5e8c6f559b93367575f4a2bf1fa0ca5539a8a71 Mon Sep 17 00:00:00 2001 From: mike12345567 Date: Tue, 23 Nov 2021 18:20:12 +0000 Subject: [PATCH 01/75] Adding some basic UI around the key/value data type. --- .../DataTable/modals/CreateEditColumn.svelte | 16 +++ .../DataTable/modals/JSONSchemaModal.svelte | 97 +++++++++++++++++++ .../builder/src/constants/backend/index.js | 8 ++ 3 files changed, 121 insertions(+) create mode 100644 packages/builder/src/components/backend/DataTable/modals/JSONSchemaModal.svelte diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index 841e781cf2..32a2d1f659 100644 --- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -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} + {/if}
@@ -408,6 +421,9 @@ {/if}
+ + console.log(detail)} /> + + 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 + }) + + + + + + {#each Array(fieldCount) as _, i} +
+ +