From 293a969f5fc59ad96ef05d20d012948f0aa8a0f6 Mon Sep 17 00:00:00 2001 From: Gerard Burns Date: Thu, 11 Apr 2024 10:56:08 +0100 Subject: [PATCH] wip --- .../controls/FieldContext/FieldContext.svelte | 28 +++---- .../controls/FieldContext/columnInfo.js | 77 ++++++++++++++++++ .../settings/controls/FieldContext/index.js | 2 +- .../FieldContext/lines/Support.svelte | 41 +++++++++- .../controls/FieldContext/validator.js | 80 ------------------- .../settings/controls/FieldSelect.svelte | 14 ++-- .../settings/controls/MultiFieldSelect.svelte | 18 +++-- .../Component/ComponentSettingsSection.svelte | 2 +- packages/client/manifest.json | 14 +++- 9 files changed, 160 insertions(+), 116 deletions(-) create mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/columnInfo.js delete mode 100644 packages/builder/src/components/design/settings/controls/FieldContext/validator.js diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte index 82e755036e..50fbc5273c 100644 --- a/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldContext/FieldContext.svelte @@ -1,6 +1,6 @@ setExplanationSubject(subjects.support)} on:mouseleave={() => setExplanationSubject(subjects.none)} - icon={support.icon} - color={support.iconColor} - text={support.text} + {icon} + {color} + {text} /> with diff --git a/packages/builder/src/components/design/settings/controls/FieldContext/validator.js b/packages/builder/src/components/design/settings/controls/FieldContext/validator.js deleted file mode 100644 index cb4e309148..0000000000 --- a/packages/builder/src/components/design/settings/controls/FieldContext/validator.js +++ /dev/null @@ -1,80 +0,0 @@ -import { capitalize } from 'lodash'; - -export const errors = { - general: Symbol("values-validator-general"), - jsonPrimitivesOnly: Symbol("values-validator-json-primitives-only"), -} - -export const warnings = { - stringAsNumber: Symbol("values-validator-string-as-number"), - chartDatetime: Symbol("values-validator-chart-datetime"), - notRequired: Symbol("values-validator-not-required"), -} - -export const constants = { - unsupported: Symbol("values-validator-unsupported"), - partialSupport: Symbol("values-validator-partialSupport"), - supported: Symbol("values-validator-supported") -} - -export const validate = (fieldSchema) => { - try { - const response = { - level: null, - warnings: [], - errors: [], - text: "", - icon: "", - iconColor: "" - } - const generalUnsupportedFields = ["array", "attachment", "barcodeqr", "link", "bb_reference"] - if (generalUnsupportedFields.includes(fieldSchema.type)) { - response.errors.push(errors.general) - } - - if (fieldSchema.type === "json") { - response.errors.push(errors.jsonPrimitivesOnly) - } - - if (fieldSchema.type === "string") { - response.warnings.push(warnings.stringAsNumber) - } - if (fieldSchema.type === "datetime") { - response.warnings.push(warnings.chartDatetime); - //"This column can be used as an input for a chart, but it may be parsed differently depending on which is used. - } - - const isRequired = fieldSchema?.constraints?.presence?.allowEmpty === false - if (!isRequired) { - response.warnings.push(warnings.notRequired); - } - - if (response.errors.length > 0) { - response.level = constants.unsupported - response.text = "Not compatible" - response.icon = "Alert" - response.iconColor = "var(--red)" - } else if (response.warnings.length > 0) { - response.level = constants.partialSupport - response.text = "Partially compatible" - response.icon = "AlertCheck" - response.iconColor = "var(--yellow)" - } else { - response.level = constants.supported - response.text = "Compatible" - response.icon = "CheckmarkCircle" - response.iconColor = "var(--green)" - } - - return response - } catch (e) { - return { - level: constants.partialSupport, - warnings: [], - errors: [], - text: "Partially compatible", - icon: "AlertCheck", - iconColor: "var(--yellow)" - } - } -} diff --git a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte index ecb506f656..e28718d86e 100644 --- a/packages/builder/src/components/design/settings/controls/FieldSelect.svelte +++ b/packages/builder/src/components/design/settings/controls/FieldSelect.svelte @@ -3,7 +3,7 @@ import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding" import { selectedScreen } from "stores/builder" import { createEventDispatcher } from "svelte" - import { FieldContext, validate } from './FieldContext' + import { FieldContext, getColumnInfoMessagesAndSupport } from './FieldContext' import { debounce } from "lodash" import { goto, params } from "@roxi/routify" import { Constants } from "@budibase/frontend-core" @@ -12,21 +12,21 @@ export let componentInstance = {} export let value = "" export let placeholder - export let columnContext + export let columnInfo let contextTooltipAnchor = null let currentOption = null let previousOption = null let contextTooltipVisible = false - const getFieldSupport = (schema, columnContext) => { - if (!columnContext) { + const getFieldSupport = (schema, columnInfo) => { + if (columnInfo == null) { return {} } const fieldSupport = {} Object.entries(schema || {}).forEach(([key, value]) => { - fieldSupport[key] = validate(value) + fieldSupport[key] = getColumnInfoMessagesAndSupport(value) }) return fieldSupport @@ -35,7 +35,7 @@ const dispatch = createEventDispatcher() $: datasource = getDatasourceForProvider($selectedScreen, componentInstance) $: schema = getSchemaForDatasource($selectedScreen, datasource).schema - $: fieldSupport = getFieldSupport(schema, columnContext); + $: fieldSupport = getFieldSupport(schema, columnInfo); $: options = Object.keys(schema || {}) $: boundValue = getValidValue(value, options) @@ -117,7 +117,7 @@ {onOptionMouseleave} /> -{#if columnContext} +{#if columnInfo} { - if (!columnContext) { + const getFieldSupport = (schema, columnInfo) => { + if (columnInfo == null) { return {} } const fieldSupport = {} Object.entries(schema || {}).forEach(([key, value]) => { - fieldSupport[key] = validate(value) + // super TODO: nicer to do this at the component level jit and store each value seperately so i don't have this long ass name??? + fieldSupport[key] = getColumnInfoMessagesAndSupport(value, columnInfo) }) return fieldSupport @@ -43,9 +43,11 @@ $: datasource = getDatasourceForProvider($selectedScreen, componentInstance) $: schema = getSchemaForDatasource($selectedScreen, datasource).schema $: options = Object.keys(schema || {}) - $: fieldSupport = getFieldSupport(schema, columnContext); + $: fieldSupport = getFieldSupport(schema, columnInfo); $: boundValue = getValidOptions(value, options) + $: console.log(fieldSupport) + const getValidOptions = (selectedOptions, allOptions) => { // Fix the hardcoded default string value @@ -133,7 +135,7 @@ {onOptionMouseleave} /> -{#if columnContext} +{#if columnInfo}