diff --git a/lerna.json b/lerna.json index fb1b966db4..f41e29c815 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "2.8.29-alpha.3", + "version": "2.8.29-alpha.6", "npmClient": "yarn", "packages": [ "packages/*" diff --git a/packages/bbui/package.json b/packages/bbui/package.json index 4d39f6330b..e5d0ad6b57 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -85,7 +85,8 @@ "dayjs": "^1.10.4", "easymde": "^2.16.1", "svelte-flatpickr": "3.2.3", - "svelte-portal": "^1.0.0" + "svelte-portal": "^1.0.0", + "svelte-dnd-action": "^0.9.8" }, "resolutions": { "loader-utils": "1.4.1" diff --git a/packages/bbui/src/IconPicker/IconPicker.svelte b/packages/bbui/src/IconPicker/IconPicker.svelte index 2b42da61b1..b3cc72daa3 100644 --- a/packages/bbui/src/IconPicker/IconPicker.svelte +++ b/packages/bbui/src/IconPicker/IconPicker.svelte @@ -1,5 +1,4 @@ + +
+
+ {#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} +
+
+ +
Add option
+
+
+ + 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/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index d4c994dae5..38eb87aa73 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -64,6 +64,13 @@ + + + + + + + {#if isInternal} @@ -77,9 +84,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"}