Merge branch 'develop' of github.com:Budibase/budibase into scrollable-component-tree

This commit is contained in:
Andrew Kingston 2022-03-21 09:52:40 +00:00
commit 2db3bc44ce
42 changed files with 531 additions and 248 deletions

View File

@ -1,5 +1,5 @@
{
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"npmClient": "yarn",
"packages": [
"packages/*"

View File

@ -1,6 +1,6 @@
{
"name": "@budibase/backend-core",
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"description": "Budibase backend core libraries used in server and worker",
"main": "src/index.js",
"author": "Budibase",

View File

@ -1,7 +1,7 @@
{
"name": "@budibase/bbui",
"description": "A UI solution used in the different Budibase projects.",
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"license": "MPL-2.0",
"svelte": "src/index.js",
"module": "dist/bbui.es.js",
@ -38,7 +38,7 @@
],
"dependencies": {
"@adobe/spectrum-css-workflow-icons": "^1.2.1",
"@budibase/string-templates": "^1.0.91-alpha.3",
"@budibase/string-templates": "^1.0.91-alpha.6",
"@spectrum-css/actionbutton": "^1.0.1",
"@spectrum-css/actiongroup": "^1.0.1",
"@spectrum-css/avatar": "^3.0.2",

View File

@ -56,6 +56,7 @@
$: if (!loading) loaded = true
$: fields = getFields(schema, showAutoColumns, autoSortColumns)
$: rows = fields?.length ? data || [] : []
$: totalRowCount = rows?.length || 0
$: visibleRowCount = getVisibleRowCount(
loaded,
height,
@ -63,7 +64,12 @@
rowCount,
rowHeight
)
$: contentStyle = getContentStyle(visibleRowCount, rowCount, rowHeight)
$: heightStyle = getHeightStyle(
visibleRowCount,
rowCount,
totalRowCount,
rowHeight
)
$: sortedRows = sortRows(rows, sortColumn, sortOrder)
$: gridStyle = getGridStyle(fields, schema, showEditColumn)
$: showEditColumn = allowEditRows || allowSelectRows
@ -107,11 +113,16 @@
return Math.min(allRows, Math.ceil(height / rowHeight))
}
const getContentStyle = (visibleRows, rowCount, rowHeight) => {
if (!rowCount || !visibleRows) {
const getHeightStyle = (
visibleRowCount,
rowCount,
totalRowCount,
rowHeight
) => {
if (!rowCount || !visibleRowCount || totalRowCount <= rowCount) {
return ""
}
return `height: ${headerHeight + visibleRows * rowHeight}px;`
return `height: ${headerHeight + visibleRowCount * rowHeight}px;`
}
const getGridStyle = (fields, schema, showEditColumn) => {
@ -264,11 +275,11 @@
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
>
{#if !loaded}
<div class="loading" style={contentStyle}>
<div class="loading" style={heightStyle}>
<ProgressCircle />
</div>
{:else}
<div class="spectrum-Table" style={`${contentStyle}${gridStyle}`}>
<div class="spectrum-Table" style={`${heightStyle}${gridStyle}`}>
{#if fields.length}
<div class="spectrum-Table-head">
{#if showEditColumn}

View File

@ -247,7 +247,7 @@ Cypress.Commands.add("createScreen", (screenName, route) => {
cy.get("[aria-label=AddCircle]").click()
cy.get(".spectrum-Modal").within(() => {
cy.get(".item").contains("Blank").click()
cy.get(".spectrum-Button").contains("Add Screens").click({ force: true })
cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
cy.wait(500)
})
cy.get(".spectrum-Dialog-grid").within(() => {
@ -265,7 +265,7 @@ Cypress.Commands.add("createAutogeneratedScreens", screenNames => {
for (let i = 0; i < screenNames.length; i++) {
cy.get(".item").contains(screenNames[i]).click()
}
cy.get(".spectrum-Button").contains("Add Screens").click({ force: true })
cy.get(".spectrum-Button").contains("Add screens").click({ force: true })
cy.wait(4000)
})

View File

@ -1,6 +1,6 @@
{
"name": "@budibase/builder",
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"license": "GPL-3.0",
"private": true,
"scripts": {
@ -65,10 +65,10 @@
}
},
"dependencies": {
"@budibase/bbui": "^1.0.91-alpha.3",
"@budibase/client": "^1.0.91-alpha.3",
"@budibase/frontend-core": "^1.0.91-alpha.3",
"@budibase/string-templates": "^1.0.91-alpha.3",
"@budibase/bbui": "^1.0.91-alpha.6",
"@budibase/client": "^1.0.91-alpha.6",
"@budibase/frontend-core": "^1.0.91-alpha.6",
"@budibase/string-templates": "^1.0.91-alpha.6",
"@sentry/browser": "5.19.1",
"@spectrum-css/page": "^3.0.1",
"@spectrum-css/vars": "^3.0.1",

View File

@ -1,4 +1,10 @@
import { store } from "./index"
import { Helpers } from "@budibase/bbui"
import {
decodeJSBinding,
encodeJSBinding,
findHBSBlocks,
} from "@budibase/string-templates"
/**
* Recursively searches for a specific component ID
@ -161,3 +167,58 @@ export const getComponentSettings = componentType => {
return settings
}
/**
* Randomises a components ID's, including all child component IDs, and also
* updates all data bindings to still be valid.
* This mutates the object in place.
* @param component the component to randomise
*/
export const makeComponentUnique = component => {
if (!component) {
return
}
// Replace component ID
const oldId = component._id
const newId = Helpers.uuid()
component._id = newId
if (component._children?.length) {
let children = JSON.stringify(component._children)
// Replace all instances of this ID in child HBS bindings
children = children.replace(new RegExp(oldId, "g"), newId)
// Replace all instances of this ID in child JS bindings
const bindings = findHBSBlocks(children)
bindings.forEach(binding => {
// JSON.stringify will have escaped double quotes, so we need
// to account for that
let sanitizedBinding = binding.replace(/\\"/g, '"')
// Check if this is a valid JS binding
let js = decodeJSBinding(sanitizedBinding)
if (js != null) {
// Replace ID inside JS binding
js = js.replace(new RegExp(oldId, "g"), newId)
// Create new valid JS binding
let newBinding = encodeJSBinding(js)
// Replace escaped double quotes
newBinding = newBinding.replace(/"/g, '\\"')
// Insert new JS back into binding.
// A single string replace here is better than a regex as
// the binding contains special characters, and we only need
// to replace a single instance.
children = children.replace(binding, newBinding)
}
})
// Recurse on all children
component._children = JSON.parse(children)
component._children.forEach(makeComponentUnique)
}
}

View File

@ -126,7 +126,7 @@ export const getDatasourceForProvider = (asset, component) => {
if (dataProviderSetting) {
const settingValue = component[dataProviderSetting.key]
const providerId = extractLiteralHandlebarsID(settingValue)
const provider = findComponent(asset.props, providerId)
const provider = findComponent(asset?.props, providerId)
return getDatasourceForProvider(asset, provider)
}
@ -458,7 +458,7 @@ export const getSchemaForDatasource = (asset, datasource, options) => {
// Determine the entity which backs this datasource.
// "provider" datasources are those targeting another data provider
if (type === "provider") {
const component = findComponent(asset.props, datasource.providerId)
const component = findComponent(asset?.props, datasource.providerId)
const source = getDatasourceForProvider(asset, component)
return getSchemaForDatasource(asset, source, options)
}

View File

@ -25,7 +25,7 @@ export const selectedComponent = derived(
if (!$currentAsset || !$store.selectedComponentId) {
return null
}
return findComponent($currentAsset.props, $store.selectedComponentId)
return findComponent($currentAsset?.props, $store.selectedComponentId)
}
)

View File

@ -24,9 +24,9 @@ import {
findAllMatchingComponents,
findComponent,
getComponentSettings,
makeComponentUnique,
} from "../componentUtils"
import { Helpers } from "@budibase/bbui"
import { removeBindings } from "../dataBinding"
const INITIAL_FRONTEND_STATE = {
apps: [],
@ -400,11 +400,11 @@ export const getFrontendStore = () => {
parentComponent = selected
} else {
// Otherwise we need to use the parent of this component
parentComponent = findComponentParent(asset.props, selected._id)
parentComponent = findComponentParent(asset?.props, selected._id)
}
} else {
// Use screen or layout if no component is selected
parentComponent = asset.props
parentComponent = asset?.props
}
// Attach component
@ -490,37 +490,22 @@ export const getFrontendStore = () => {
}
}
},
paste: async (targetComponent, mode, preserveBindings = false) => {
paste: async (targetComponent, mode) => {
let promises = []
store.update(state => {
// Stop if we have nothing to paste
if (!state.componentToPaste) {
return state
}
// defines if this is a copy or a cut
const cut = state.componentToPaste.isCut
// immediately need to remove bindings, currently these aren't valid when pasted
if (!cut && !preserveBindings) {
state.componentToPaste = removeBindings(state.componentToPaste, "")
}
// Clone the component to paste
// Retain the same ID if cutting as things may be referencing this component
// Clone the component to paste and make unique if copying
delete state.componentToPaste.isCut
let componentToPaste = cloneDeep(state.componentToPaste)
if (cut) {
state.componentToPaste = null
} else {
const randomizeIds = component => {
if (!component) {
return
}
component._id = Helpers.uuid()
component._children?.forEach(randomizeIds)
}
randomizeIds(componentToPaste)
makeComponentUnique(componentToPaste)
}
if (mode === "inside") {

View File

@ -10,17 +10,18 @@ const allTemplates = tables => [
]
// Allows us to apply common behaviour to all create() functions
const createTemplateOverride = (frontendState, create) => () => {
const screen = create()
const createTemplateOverride = (frontendState, template) => () => {
const screen = template.create()
screen.name = screen.props._id
screen.routing.route = screen.routing.route.toLowerCase()
screen.template = template.id
return screen
}
export default (frontendState, tables) => {
const enrichTemplate = template => ({
...template,
create: createTemplateOverride(frontendState, template.create),
create: createTemplateOverride(frontendState, template),
})
const fromScratch = enrichTemplate(createFromScratchScreen)

View File

@ -238,6 +238,7 @@
border: var(--border-light);
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
border-color 130ms ease-in-out;
word-wrap: break-word;
}
li:not(:last-of-type) {
margin-bottom: var(--spacing-s);

View File

@ -160,6 +160,11 @@
await store.actions.components.updateProp(data.prop, data.value)
} else if (type === "delete-component" && data.id) {
confirmDeleteComponent(data.id)
} else if (type === "duplicate-component" && data.id) {
const rootComponent = get(currentAsset).props
const component = findComponent(rootComponent, data.id)
store.actions.components.copy(component)
await store.actions.components.paste(component)
} else if (type === "preview-loaded") {
// Wait for this event to show the client library if intelligent
// loading is supported

View File

@ -21,7 +21,7 @@
const moveUpComponent = () => {
const asset = get(currentAsset)
const parent = findComponentParent(asset.props, component._id)
const parent = findComponentParent(asset?.props, component._id)
if (!parent) {
return
}
@ -41,7 +41,7 @@
const moveDownComponent = () => {
const asset = get(currentAsset)
const parent = findComponentParent(asset.props, component._id)
const parent = findComponentParent(asset?.props, component._id)
if (!parent) {
return
}
@ -61,7 +61,7 @@
const duplicateComponent = () => {
storeComponentForCopy(false)
pasteComponent("below", true)
pasteComponent("below")
}
const deleteComponent = async () => {
@ -73,14 +73,12 @@
}
const storeComponentForCopy = (cut = false) => {
// lives in store - also used by drag drop
store.actions.components.copy(component, cut)
}
const pasteComponent = (mode, preserveBindings = false) => {
const pasteComponent = mode => {
try {
// lives in store - also used by drag drop
store.actions.components.paste(component, mode, preserveBindings)
store.actions.components.paste(component, mode)
} catch (error) {
notifications.error("Error saving component")
}

View File

@ -2,7 +2,7 @@
import { getContext } from "svelte"
import { store } from "builderStore"
import { DropEffect, DropPosition } from "./dragDropStore"
import ComponentDropdownMenu from "../ComponentDropdownMenu.svelte"
import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
import NavItem from "components/common/NavItem.svelte"
import { capitalise } from "helpers"
import { notifications } from "@budibase/bbui"

View File

@ -51,7 +51,7 @@
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
body={"Are you sure you wish to delete this layout?"}
okText="Delete Layout"
okText="Delete layout"
onOk={deleteLayout}
/>

View File

@ -0,0 +1,78 @@
<script>
import { goto } from "@roxi/routify"
import { store } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import {
ActionMenu,
MenuItem,
Icon,
Layout,
notifications,
} from "@budibase/bbui"
import { get } from "svelte/store"
export let path
export let screens
let confirmDeleteDialog
const deleteScreens = async () => {
if (!screens?.length) {
return
}
try {
for (let { id } of screens) {
// We have to fetch the screen to be deleted immediately before deleting
// as otherwise we're very likely to 409
const screen = get(store).screens.find(screen => screen._id === id)
if (!screen) {
continue
}
await store.actions.screens.delete(screen)
}
notifications.success("Screens deleted successfully")
$goto("../")
} catch (error) {
notifications.error("Error deleting screens")
}
}
</script>
<ActionMenu>
<div slot="control" class="icon">
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>
Delete all screens
</MenuItem>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
okText="Delete screens"
onOk={deleteScreens}
>
<Layout noPadding gap="S">
<div>
Are you sure you want to delete all screens under the <b>{path}</b> route?
</div>
<div>The following screens will be deleted:</div>
<div class="to-delete">
{#each screens as screen}
<div>{screen.route}</div>
{/each}
</div>
</Layout>
</ConfirmDialog>
<style>
.to-delete {
font-weight: bold;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding-left: var(--spacing-xl);
}
</style>

View File

@ -9,6 +9,7 @@
import instantiateStore from "./dragDropStore"
import ComponentTree from "./ComponentTree.svelte"
import NavItem from "components/common/NavItem.svelte"
import PathDropdownMenu from "./PathDropdownMenu.svelte"
import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
import { get } from "svelte/store"
@ -78,7 +79,9 @@
on:mouseover={e => {
scrollApi.scrollTo(0, e.detail)
}}
/>
>
<PathDropdownMenu screens={allScreens} {path} />
</NavItem>
{#if routeOpened}
{#each filteredScreens as screen (screen.id)}

View File

@ -2,14 +2,57 @@
import { goto } from "@roxi/routify"
import { store, allScreens } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
import {
ActionMenu,
MenuItem,
Icon,
Modal,
Helpers,
notifications,
} from "@budibase/bbui"
import ScreenDetailsModal from "../ScreenDetailsModal.svelte"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import analytics, { Events } from "analytics"
import { makeComponentUnique } from "builderStore/componentUtils"
export let screenId
let confirmDeleteDialog
let screenDetailsModal
$: screen = $allScreens.find(screen => screen._id === screenId)
const duplicateScreen = () => {
screenDetailsModal.show()
}
const createDuplicateScreen = async ({ screenName, screenUrl }) => {
// Create a dupe and ensure it is unique
let duplicateScreen = Helpers.cloneDeep(screen)
delete duplicateScreen._id
delete duplicateScreen._rev
makeComponentUnique(duplicateScreen.props)
// Attach the new name and URL
duplicateScreen.routing.route = sanitizeUrl(screenUrl)
duplicateScreen.props._instanceName = screenName
try {
// Create the screen
await store.actions.screens.save(duplicateScreen)
// Analytics
if (screen.template) {
analytics.captureEvent(Events.SCREEN.CREATED, {
template: "createFromScratch",
})
}
} catch (error) {
notifications.error("Error duplicating screen")
console.log(error)
}
}
const deleteScreen = async () => {
try {
await store.actions.screens.delete(screen)
@ -19,12 +62,28 @@
notifications.error("Error deleting screen")
}
}
const pasteComponent = mode => {
try {
store.actions.components.paste(screen?.props, mode)
} catch (error) {
notifications.error("Error saving component")
}
}
</script>
<ActionMenu>
<div slot="control" class="icon">
<Icon size="S" hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Duplicate" on:click={duplicateScreen}>Duplicate</MenuItem>
<MenuItem
icon="ShowOneLayer"
on:click={() => pasteComponent("inside")}
disabled={!$store.componentToPaste}
>
Paste inside
</MenuItem>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>
@ -32,6 +91,15 @@
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
body={"Are you sure you wish to delete this screen?"}
okText="Delete Screen"
okText="Delete screen"
onOk={deleteScreen}
/>
<Modal bind:this={screenDetailsModal}>
<ScreenDetailsModal
onConfirm={createDuplicateScreen}
screenName={screen?.props._instanceName}
screenUrl={screen?.routing.route}
confirmText="Duplicate"
/>
</Modal>

View File

@ -10,39 +10,19 @@
ProgressCircle,
} from "@budibase/bbui"
import getTemplates from "builderStore/store/screenTemplates"
import { onDestroy } from "svelte"
import { createEventDispatcher } from "svelte"
export let chooseModal
export let save
export let onConfirm
export let onCancel
export let showProgressCircle = false
let selectedScreens = []
const blankScreen = "createFromScratch"
const dispatch = createEventDispatcher()
function setScreens() {
dispatch("save", {
screens: selectedScreens,
})
}
let selectedScreens = []
let templates = getTemplates($store, $tables.list)
$: blankSelected = selectedScreens?.length === 1
$: autoSelected = selectedScreens?.length > 0 && !blankSelected
let templates = getTemplates($store, $tables.list)
const confirm = async () => {
if (autoSelected) {
setScreens()
await save()
} else {
setScreens()
chooseModal(1)
}
}
const toggleScreenSelection = table => {
if (selectedScreens.find(s => s.table === table.name)) {
selectedScreens = selectedScreens.filter(
@ -56,25 +36,25 @@
}
}
onDestroy(() => {
selectedScreens = []
})
const confirmScreenSelection = async () => {
await onConfirm(selectedScreens)
}
</script>
<div>
<ModalContent
title="Add screens"
confirmText="Add Screens"
confirmText="Add screens"
cancelText="Cancel"
onConfirm={() => confirm()}
onConfirm={confirmScreenSelection}
{onCancel}
disabled={!selectedScreens.length}
size="L"
>
<Body size="S"
>Please select the screens you would like to add to your application.
Autogenerated screens come with CRUD functionality.</Body
>
<Body size="S">
Please select the screens you would like to add to your application.
Autogenerated screens come with CRUD functionality.
</Body>
<Layout noPadding gap="S">
<Detail size="S">Blank screen</Detail>
<div

View File

@ -2,58 +2,62 @@
import { ModalContent, Input, ProgressCircle } from "@budibase/bbui"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import { selectedAccessRole, allScreens } from "builderStore"
import { onDestroy } from "svelte"
import { get } from "svelte/store"
export let screenName
export let url
export let chooseModal
export let save
export let onConfirm
export let onCancel
export let showProgressCircle = false
export let screenName
export let screenUrl
export let confirmText = "Continue"
let routeError
let roleId = $selectedAccessRole || "BASIC"
let touched = false
const routeChanged = event => {
if (!event.detail.startsWith("/")) {
url = "/" + event.detail
screenUrl = "/" + event.detail
}
url = sanitizeUrl(url)
if (routeExists(url, roleId)) {
touched = true
screenUrl = sanitizeUrl(screenUrl)
if (routeExists(screenUrl)) {
routeError = "This URL is already taken for this access role"
} else {
routeError = ""
routeError = null
}
}
const routeExists = (url, roleId) => {
return $allScreens.some(
const routeExists = url => {
const roleId = get(selectedAccessRole) || "BASIC"
return get(allScreens).some(
screen =>
screen.routing.route.toLowerCase() === url.toLowerCase() &&
screen.routing.roleId === roleId
)
}
onDestroy(() => {
screenName = ""
url = ""
})
const confirmScreenDetails = async () => {
await onConfirm({
screenName,
screenUrl,
})
}
</script>
<ModalContent
size="M"
title={"Enter details"}
confirmText={"Continue"}
onCancel={() => chooseModal(0)}
onConfirm={() => save()}
{confirmText}
onConfirm={confirmScreenDetails}
{onCancel}
cancelText={"Back"}
disabled={!screenName || !url || routeError}
disabled={!screenName || !screenUrl || routeError || !touched}
>
<Input label="Name" bind:value={screenName} />
<Input
label="URL"
error={routeError}
bind:value={url}
bind:value={screenUrl}
on:change={routeChanged}
/>
<div slot="footer">

View File

@ -3,141 +3,133 @@
import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
import { Modal, notifications } from "@budibase/bbui"
import { store, selectedAccessRole, allScreens } from "builderStore"
import { store, selectedAccessRole } from "builderStore"
import analytics, { Events } from "analytics"
import { get } from "svelte/store"
let newScreenModal
let navigationSelectionModal
let screenDetailsModal
let screenName = ""
let url = ""
let selectedScreens = []
let pendingScreen
let showProgressCircle = false
let routeError
let createdScreens = []
$: roleId = $selectedAccessRole || "BASIC"
// Modal refs
let newScreenModal
let screenDetailsModal
const createScreens = async () => {
for (let screen of selectedScreens) {
let test = screen.create()
createdScreens.push(test)
analytics.captureEvent(Events.SCREEN.CREATED, {
template: screen.id || screen.name,
})
}
}
// External handler to show the screen wizard
export const showModal = () => {
newScreenModal.show()
const save = async () => {
showProgressCircle = true
try {
await createScreens()
for (let screen of createdScreens) {
await saveScreens(screen)
}
await store.actions.routing.fetch()
selectedScreens = []
createdScreens = []
screenName = ""
url = ""
} catch (error) {
notifications.error("Error creating screens")
}
// Reset state when showing modal again
pendingScreen = null
showProgressCircle = false
}
const saveScreens = async draftScreen => {
let existingScreenCount = $store.screens.filter(
s => s.props._instanceName == draftScreen.props._instanceName
).length
if (existingScreenCount > 0) {
let oldUrlArr = draftScreen.routing.route.split("/")
oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
draftScreen.routing.route = oldUrlArr.join("/")
// Creates an array of screens, checking and sanitising their URLs
const createScreens = async screens => {
if (!screens?.length) {
return
}
showProgressCircle = true
let route = url ? sanitizeUrl(`${url}`) : draftScreen.routing.route
if (draftScreen) {
if (!route) {
routeError = "URL is required"
} else {
if (routeExists(route, roleId)) {
routeError = "This URL is already taken for this access role"
} else {
routeError = ""
try {
for (let screen of screens) {
// Check we aren't clashing with an existing URL
if (hasExistingUrl(screen.routing.route)) {
let suffix = 2
let candidateUrl = makeCandidateUrl(screen, suffix)
while (hasExistingUrl(candidateUrl)) {
candidateUrl = makeCandidateUrl(screen, ++suffix)
}
screen.routing.route = candidateUrl
}
}
if (routeError) return false
// Sanitise URL
screen.routing.route = sanitizeUrl(screen.routing.route)
if (screenName) {
draftScreen.props._instanceName = screenName
}
// Use the currently selected role
screen.routing.roleId = get(selectedAccessRole) || "BASIC"
draftScreen.routing.route = route
draftScreen.routing.roleId = roleId
// Create the screen
await store.actions.screens.save(screen)
await store.actions.screens.save(draftScreen)
if (draftScreen.props._instanceName.endsWith("List")) {
try {
// Analytics
if (screen.template) {
analytics.captureEvent(Events.SCREEN.CREATED, {
template: screen.template,
})
}
// Add link in layout for list screens
if (screen.props._instanceName.endsWith("List")) {
await store.actions.components.links.save(
draftScreen.routing.route,
draftScreen.routing.route.split("/")[1]
screen.routing.route,
screen.routing.route.split("/")[1]
)
} catch (error) {
notifications.error("Error creating link to screen")
}
}
} catch (error) {
notifications.error("Error creating screens")
}
showProgressCircle = false
}
// Checks if any screens exist in the store with the given route and
// currently selected role
const hasExistingUrl = url => {
const roleId = get(selectedAccessRole) || "BASIC"
const screens = get(store).screens.filter(s => s.routing.roleId === roleId)
return !!screens.find(s => s.routing?.route === url)
}
// Constructs a candidate URL for a new screen, suffixing the base of the
// screen's URL with a given suffix.
// e.g. "/sales/:id" => "/sales-1/:id"
const makeCandidateUrl = (screen, suffix) => {
let url = screen.routing?.route || ""
if (url.startsWith("/")) {
url = url.slice(1)
}
if (!url.includes("/")) {
return `/${url}-${suffix}`
} else {
const split = url.split("/")
return `/${split[0]}-${suffix}/${split.slice(1).join("/")}`
}
}
const routeExists = (route, roleId) => {
return $allScreens.some(
screen =>
screen.routing.route.toLowerCase() === route.toLowerCase() &&
screen.routing.roleId === roleId
)
}
export const showModal = () => {
newScreenModal.show()
}
const setScreens = evt => {
selectedScreens = evt.detail.screens
}
const chooseModal = index => {
/*
0 = newScreenModal
1 = screenDetailsModal
2 = navigationSelectionModal
*/
if (index === 0) {
newScreenModal.show()
} else if (index === 1) {
// Handler for NewScreenModal
const confirmScreenSelection = async templates => {
// Handle template selection
if (templates?.length > 1) {
// Autoscreens, so create immediately
const screens = templates.map(template => template.create())
await createScreens(screens)
} else {
// Empty screen, so proceed to the next modal
pendingScreen = templates[0].create()
screenDetailsModal.show()
} else if (index === 2) {
navigationSelectionModal.show()
}
}
// Handler for ScreenDetailsModal
const confirmScreenDetails = async ({ screenName, screenUrl }) => {
if (!pendingScreen) {
return
}
pendingScreen.props._instanceName = screenName
pendingScreen.routing.route = screenUrl
await createScreens([pendingScreen])
}
</script>
<Modal bind:this={newScreenModal}>
<NewScreenModal
on:save={setScreens}
{showProgressCircle}
{save}
{chooseModal}
/>
<NewScreenModal onConfirm={confirmScreenSelection} {showProgressCircle} />
</Modal>
<Modal bind:this={screenDetailsModal}>
<ScreenDetailsModal
bind:screenName
bind:url
{showProgressCircle}
{save}
{chooseModal}
onConfirm={confirmScreenDetails}
onCancel={() => newScreenModal.show()}
/>
</Modal>

View File

@ -33,7 +33,7 @@
const customSections = settings.filter(setting => setting.section)
return [
{
name: "General",
name: componentDefinition?.name || "General",
info: componentDefinition?.info,
settings: generalSettings,
},

View File

@ -5,7 +5,7 @@
export let parameters
$: components = findAllMatchingComponents($currentAsset.props, component =>
$: components = findAllMatchingComponents($currentAsset?.props, component =>
component._component.endsWith("s3upload")
)
</script>

View File

@ -10,7 +10,7 @@
const dispatch = createEventDispatcher()
const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
$: path = findComponentPath($currentAsset.props, $store.selectedComponentId)
$: path = findComponentPath($currentAsset?.props, $store.selectedComponentId)
$: providers = path.filter(c => c._component?.endsWith("/dataprovider"))
// Set initial value to closest data provider

View File

@ -18,9 +18,7 @@
let tempValue = value || []
$: dataSource = getDatasourceForProvider($currentAsset, componentInstance)
$: schema = getSchemaForDatasource($currentAsset, dataSource, {
searchableSchema: true,
})?.schema
$: schema = getSchemaForDatasource($currentAsset, dataSource)?.schema
$: schemaFields = Object.values(schema || {})
const saveFilter = async () => {

View File

@ -12,7 +12,7 @@
export let type
$: form = findClosestMatchingComponent(
$currentAsset.props,
$currentAsset?.props,
componentInstance._id,
component => component._component === "@budibase/standard-components/form"
)

View File

@ -11,7 +11,7 @@
const resetFormFields = async () => {
const form = findClosestMatchingComponent(
$currentAsset.props,
$currentAsset?.props,
componentInstance._id,
component => component._component.endsWith("/form")
)

View File

@ -135,7 +135,7 @@
if (asset?._id) {
url += `/${asset._id}`
if (componentId) {
const componentPath = findComponentPath(asset.props, componentId)
const componentPath = findComponentPath(asset?.props, componentId)
const componentURL = componentPath
.slice(1)
.map(comp => comp._id)

View File

@ -1,6 +1,6 @@
{
"name": "@budibase/cli",
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"description": "Budibase CLI, for developers, self hosting and migrations.",
"main": "src/index.js",
"bin": {

View File

@ -1,6 +1,6 @@
{
"name": "@budibase/client",
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"license": "MPL-2.0",
"module": "dist/budibase-client.js",
"main": "dist/budibase-client.js",
@ -19,9 +19,9 @@
"dev:builder": "rollup -cw"
},
"dependencies": {
"@budibase/bbui": "^1.0.91-alpha.3",
"@budibase/frontend-core": "^1.0.91-alpha.3",
"@budibase/string-templates": "^1.0.91-alpha.3",
"@budibase/bbui": "^1.0.91-alpha.6",
"@budibase/frontend-core": "^1.0.91-alpha.6",
"@budibase/string-templates": "^1.0.91-alpha.6",
"@spectrum-css/button": "^3.0.3",
"@spectrum-css/card": "^3.0.3",
"@spectrum-css/divider": "^1.0.3",

View File

@ -226,4 +226,13 @@
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: 4px;
}
/* Print styles */
@media print {
#spectrum-root,
#clip-root,
#app-root {
overflow: visible !important;
}
}
</style>

View File

@ -427,4 +427,20 @@
height: var(--height);
z-index: 998;
}
/* Print styles */
@media print {
.layout,
.main-wrapper {
overflow: visible !important;
}
.nav-wrapper {
display: none !important;
}
.layout {
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
}
}
</style>

View File

@ -146,6 +146,15 @@
<div class="divider" />
{/if}
{/each}
<SettingsButton
icon="Duplicate"
on:click={() => {
builderStore.actions.duplicateComponent(
$builderStore.selectedComponent._id
)
}}
title="Duplicate component"
/>
<SettingsButton
icon="Delete"
on:click={() => {
@ -153,6 +162,7 @@
$builderStore.selectedComponent._id
)
}}
title="Delete component"
/>
</div>
{/if}

View File

@ -62,6 +62,9 @@ const createBuilderStore = () => {
deleteComponent: id => {
dispatchEvent("delete-component", { id })
},
duplicateComponent: id => {
dispatchEvent("duplicate-component", { id })
},
notifyLoaded: () => {
dispatchEvent("preview-loaded")
},

View File

@ -1,12 +1,12 @@
{
"name": "@budibase/frontend-core",
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"description": "Budibase frontend core libraries used in builder and client",
"author": "Budibase",
"license": "MPL-2.0",
"svelte": "src/index.js",
"dependencies": {
"@budibase/bbui": "^1.0.91-alpha.3",
"@budibase/bbui": "^1.0.91-alpha.6",
"lodash": "^4.17.21",
"svelte": "^3.46.2"
}

View File

@ -1,7 +1,7 @@
{
"name": "@budibase/server",
"email": "hi@budibase.com",
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"description": "Budibase Web Server",
"main": "src/index.ts",
"repository": {
@ -71,9 +71,9 @@
"license": "GPL-3.0",
"dependencies": {
"@apidevtools/swagger-parser": "^10.0.3",
"@budibase/backend-core": "^1.0.91-alpha.3",
"@budibase/client": "^1.0.91-alpha.3",
"@budibase/string-templates": "^1.0.91-alpha.3",
"@budibase/backend-core": "^1.0.91-alpha.6",
"@budibase/client": "^1.0.91-alpha.6",
"@budibase/string-templates": "^1.0.91-alpha.6",
"@bull-board/api": "^3.7.0",
"@bull-board/koa": "^3.7.0",
"@elastic/elasticsearch": "7.10.0",

View File

@ -85,7 +85,11 @@ exports.patch = async ctx => {
const isUserTable = tableId === InternalTables.USER_METADATA
let oldRow
try {
oldRow = await db.get(inputs._id)
let dbTable = await db.get(tableId)
oldRow = await outputProcessing(
dbTable,
await findRow(ctx, tableId, inputs._id)
)
} catch (err) {
if (isUserTable) {
// don't include the rev, it'll be the global rev

View File

@ -27,11 +27,8 @@ function parse(input: any) {
if (typeof input !== "string") {
return input
}
if (input === MAX_ISO_DATE) {
return new Date(8640000000000000)
}
if (input === MIN_ISO_DATE) {
return new Date(-8640000000000000)
if (input === MAX_ISO_DATE || input === MIN_ISO_DATE) {
return null
}
if (isIsoDateString(input)) {
return new Date(input)
@ -130,11 +127,19 @@ class InternalBuilder {
}
if (filters.range) {
iterate(filters.range, (key, value) => {
if (!value.high || !value.low) {
return
if (value.low && value.high) {
// Use a between operator if we have 2 valid range values
const fnc = allOr ? "orWhereBetween" : "whereBetween"
query = query[fnc](key, [value.low, value.high])
} else if (value.low) {
// Use just a single greater than operator if we only have a low
const fnc = allOr ? "orWhere" : "where"
query = query[fnc](key, ">", value.low)
} else if (value.high) {
// Use just a single less than operator if we only have a high
const fnc = allOr ? "orWhere" : "where"
query = query[fnc](key, "<", value.high)
}
const fnc = allOr ? "orWhereBetween" : "whereBetween"
query = query[fnc](key, [value.low, value.high])
})
}
if (filters.equal) {

View File

@ -187,4 +187,55 @@ describe("SQL query builder", () => {
sql: `select * from (select * from \`${TABLE_NAME}\` limit ?) as \`${TABLE_NAME}\``
})
})
it("should use greater than when only low range specified", () => {
const date = new Date()
const query = sql._query(generateReadJson({
filters: {
range: {
property: {
low: date,
}
}
}
}))
expect(query).toEqual({
bindings: [date, limit],
sql: `select * from (select * from "${TABLE_NAME}" where "${TABLE_NAME}"."property" > $1 limit $2) as "${TABLE_NAME}"`
})
})
it("should use less than when only high range specified", () => {
const date = new Date()
const query = sql._query(generateReadJson({
filters: {
range: {
property: {
high: date,
}
}
}
}))
expect(query).toEqual({
bindings: [date, limit],
sql: `select * from (select * from "${TABLE_NAME}" where "${TABLE_NAME}"."property" < $1 limit $2) as "${TABLE_NAME}"`
})
})
it("should use greater than when only low range specified", () => {
const date = new Date()
const query = sql._query(generateReadJson({
filters: {
range: {
property: {
low: date,
}
}
}
}))
expect(query).toEqual({
bindings: [date, limit],
sql: `select * from (select * from "${TABLE_NAME}" where "${TABLE_NAME}"."property" > $1 limit $2) as "${TABLE_NAME}"`
})
})
})

View File

@ -1,6 +1,6 @@
{
"name": "@budibase/string-templates",
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"description": "Handlebars wrapper for Budibase templating.",
"main": "src/index.cjs",
"module": "dist/bundle.mjs",

View File

@ -1,7 +1,7 @@
{
"name": "@budibase/worker",
"email": "hi@budibase.com",
"version": "1.0.91-alpha.3",
"version": "1.0.91-alpha.6",
"description": "Budibase background service",
"main": "src/index.ts",
"repository": {
@ -34,8 +34,8 @@
"author": "Budibase",
"license": "GPL-3.0",
"dependencies": {
"@budibase/backend-core": "^1.0.91-alpha.3",
"@budibase/string-templates": "^1.0.91-alpha.3",
"@budibase/backend-core": "^1.0.91-alpha.6",
"@budibase/string-templates": "^1.0.91-alpha.6",
"@koa/router": "^8.0.0",
"@sentry/node": "^6.0.0",
"@techpass/passport-openidconnect": "^0.3.0",