+
+ {#each options as option, idx (option.id)}
+
+
+
+
+
+
openColorPickerPopover(idx, e.target)}
+ >
+
+
+ {#each colorsArray as color}
+
handleColorChange(option.name, color, idx)}
+ style="--color:{color};"
+ class="circle circle-hover"
+ />
+ {/each}
+
+
+
+
+ handleNameChange(option.name, idx, e.target.value)}
+ value={option.name}
+ placeholder="Option name"
+ />
+
+
+
+
+
+ {/each}
+
+
+
+
+
diff --git a/packages/bbui/src/Popover/Popover.svelte b/packages/bbui/src/Popover/Popover.svelte
index 9f951a6a7e..6706bf7a8b 100644
--- a/packages/bbui/src/Popover/Popover.svelte
+++ b/packages/bbui/src/Popover/Popover.svelte
@@ -21,6 +21,7 @@
export let offset = 5
export let customHeight
export let animate = true
+ export let customZindex
$: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
@@ -77,8 +78,9 @@
}}
on:keydown={handleEscape}
class="spectrum-Popover is-open"
+ class:customZindex
role="presentation"
- style="height: {customHeight}"
+ style="height: {customHeight}; --customZindex: {customZindex};"
transition:fly|local={{ y: -20, duration: animate ? 200 : 0 }}
>
@@ -92,4 +94,8 @@
border-color: var(--spectrum-global-color-gray-300);
overflow: auto;
}
+
+ .customZindex {
+ z-index: var(--customZindex) !important;
+ }
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index 97762d2b3a..cda6b5acbf 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -84,7 +84,7 @@ export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte
export { default as Slider } from "./Form/Slider.svelte"
export { default as Accordion } from "./Accordion/Accordion.svelte"
export { default as File } from "./Form/File.svelte"
-
+export { default as OptionSelectDnD } from "./OptionSelectDnD/OptionSelectDnD.svelte"
// Renderers
export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"
export { default as CodeRenderer } from "./Table/CodeRenderer.svelte"
diff --git a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
index 7ef779d300..33175b336d 100644
--- a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
+++ b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte
@@ -66,6 +66,13 @@
+
+
+
+
+
+
+
{#if isInternal}
@@ -79,9 +86,8 @@
{:else}
{/if}
+
-
-
{#if isUsersTable}
{:else}
diff --git a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index 4761ccee02..7c3e13f39a 100644
--- a/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -7,12 +7,12 @@
Toggle,
RadioGroup,
DatePicker,
- ModalContent,
- Context,
Modal,
notifications,
+ OptionSelectDnD,
+ Layout,
} from "@budibase/bbui"
- import { createEventDispatcher } from "svelte"
+ import { createEventDispatcher, getContext } from "svelte"
import { cloneDeep } from "lodash/fp"
import { tables, datasources } from "stores/backend"
import { TableNames, UNEDITABLE_USER_FIELDS } from "constants"
@@ -26,12 +26,10 @@
SWITCHABLE_TYPES,
} from "constants/backend"
import { getAutoColumnInformation, buildAutoColumn } from "builderStore/utils"
- import ValuesList from "components/common/ValuesList.svelte"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { truncate } from "lodash"
import ModalBindableInput from "components/common/bindings/ModalBindableInput.svelte"
import { getBindings } from "components/backend/DataTable/formula"
- import { getContext } from "svelte"
import JSONSchemaModal from "./JSONSchemaModal.svelte"
import { ValidColumnNameRegex } from "@budibase/shared-core"
@@ -45,11 +43,11 @@
const dispatch = createEventDispatcher()
const PROHIBITED_COLUMN_NAMES = ["type", "_id", "_rev", "tableId"]
- const { hide } = getContext(Context.Modal)
- let fieldDefinitions = cloneDeep(FIELDS)
+ const { dispatch: gridDispatch } = getContext("grid")
export let field
+ let fieldDefinitions = cloneDeep(FIELDS)
let originalName
let linkEditDisabled
let primaryDisplay
@@ -61,11 +59,10 @@
let savingColumn
let deleteColName
let jsonSchemaModal
-
+ let allowedTypes = []
let editableColumn = {
type: "string",
constraints: fieldDefinitions.STRING.constraints,
-
// Initial value for column name in other table for linked records
fieldName: $tables.selected.name,
}
@@ -83,7 +80,23 @@
primaryDisplay =
$tables.selected.primaryDisplay == null ||
$tables.selected.primaryDisplay === editableColumn.name
+ } else if (!savingColumn) {
+ let highestNumber = 0
+ Object.keys(table.schema).forEach(columnName => {
+ const columnNumber = extractColumnNumber(columnName)
+ if (columnNumber > highestNumber) {
+ highestNumber = columnNumber
+ }
+ return highestNumber
+ })
+
+ if (highestNumber >= 1) {
+ editableColumn.name = `Column 0${highestNumber + 1}`
+ } else {
+ editableColumn.name = "Column 01"
+ }
}
+ allowedTypes = getAllowedTypes()
}
$: initialiseField(field, savingColumn)
@@ -182,6 +195,8 @@
indexes,
})
dispatch("updatecolumns")
+ gridDispatch("close-edit-column")
+
if (
saveColumn.type === LINK_TYPE &&
saveColumn.relationshipType === RelationshipType.MANY_TO_MANY
@@ -203,6 +218,7 @@
function cancelEdit() {
editableColumn.name = originalName
+ gridDispatch("close-edit-column")
}
async function deleteColumn() {
@@ -214,8 +230,8 @@
await tables.deleteField(editableColumn)
notifications.success(`Column ${editableColumn.name} deleted`)
confirmDeleteDialog.hide()
- hide()
dispatch("updatecolumns")
+ gridDispatch("close-edit-column")
}
} catch (error) {
notifications.error(`Error deleting column: ${error.message}`)
@@ -251,14 +267,6 @@
required = req
}
- function onChangePrimaryDisplay(e) {
- const isPrimary = e.detail
- // primary display is always required
- if (isPrimary) {
- editableColumn.constraints.presence = { allowEmpty: false }
- }
- }
-
function openJsonSchemaEditor() {
jsonSchemaModal.show()
}
@@ -272,6 +280,11 @@
deleteColName = ""
}
+ function extractColumnNumber(columnName) {
+ const match = columnName.match(/Column (\d+)/)
+ return match ? parseInt(match[1]) : 0
+ }
+
function getRelationshipOptions(field) {
if (!field || !field.tableId) {
return null
@@ -402,15 +415,8 @@
}
-
+
field.name}
getOptionValue={field => field.type}
+ getOptionIcon={field => field.icon}
isOptionEnabled={option => {
if (option.type == AUTO_TYPE) {
return availableAutoColumnKeys?.length > 0
@@ -433,28 +439,6 @@
}}
/>
- {#if canBeRequired || canBeDisplay}
-
- {#if canBeRequired}
-
- {/if}
- {#if canBeDisplay}
-
- {/if}
-
- {/if}
-
{#if editableColumn.type === "string"}
{:else if editableColumn.type === "options"}
-
{:else if editableColumn.type === "longform"}
@@ -480,19 +464,28 @@
/>
{:else if editableColumn.type === "array"}
-
{:else if editableColumn.type === "datetime" && !editableColumn.autocolumn}
-
-
+
+
+
{#if datasource?.source !== "ORACLE" && datasource?.source !== "SQL_SERVER"}