diff --git a/packages/builder/src/builderStore/getNewComponentName.js b/packages/builder/src/builderStore/getNewComponentName.js index b3ddc4e953..9ab8ef16dc 100644 --- a/packages/builder/src/builderStore/getNewComponentName.js +++ b/packages/builder/src/builderStore/getNewComponentName.js @@ -8,8 +8,9 @@ export default function(component, state) { const findMatches = props => { walkProps(props, c => { - if ((c._instanceName || "").startsWith(capitalised)) { - matchingComponents.push(c._instanceName) + const thisInstanceName = get_capitalised_name(c._instanceName) + if ((thisInstanceName || "").startsWith(capitalised)) { + matchingComponents.push(thisInstanceName) } }) } diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 794d9436ee..dadba69e44 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -153,20 +153,30 @@ const _saveScreen = async (store, s, screen) => { return s } -const createScreen = store => ({ screenName, route, screen }) => { +const createScreen = store => ({ + screenName, + route, + baseComponent, + screen, +}) => { store.update(state => { const rootComponent = - state.components["@budibase/standard-components/container"] + state.components[ + baseComponent || "@budibase/standard-components/container" + ] const newScreen = screen || { description: "", url: "", _css: "", props: createProps(rootComponent).props, + route, } - newScreen.route = route newScreen.name = newScreen.props._id - newScreen.props._instanceName = screenName || "" + if (screenName) { + newScreen.props._instanceName = screenName + } + state.currentPreviewItem = newScreen state.currentComponentInfo = newScreen.props state.currentFrontEndType = "screen" diff --git a/packages/builder/src/builderStore/store/screenTemplates/editRecordScreen.js b/packages/builder/src/builderStore/store/screenTemplates/editRecordScreen.js deleted file mode 100644 index 1666d6d3c5..0000000000 --- a/packages/builder/src/builderStore/store/screenTemplates/editRecordScreen.js +++ /dev/null @@ -1,8 +0,0 @@ -export default function(models) { - return models.map(model => ({ - name: `Edit ${model.name}`, - create: () => createScreen(model), - })) -} - -const createScreen = model => ({}) diff --git a/packages/builder/src/builderStore/store/screenTemplates/index.js b/packages/builder/src/builderStore/store/screenTemplates/index.js index 6118df42a6..6825b8b973 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/index.js +++ b/packages/builder/src/builderStore/store/screenTemplates/index.js @@ -1,12 +1,22 @@ -import editRecordScreen from "./editRecordScreen" +import newRecordScreen from "./newRecordScreen" +import recordDetailScreen from "./recordDetailScreen" import { generateNewIdsForComponent } from "../../storeUtils" +import { uuid } from "builderStore/uuid" -const allTemplates = models => [...editRecordScreen(models)] +const allTemplates = models => [ + ...newRecordScreen(models), + ...recordDetailScreen(models), +] // allows us to apply common behaviour to all create() functions const createTemplateOverride = (frontendState, create) => () => { const screen = create() - generateNewIdsForComponent(screen.props, frontendState) + for (let component in screen.props.children) { + generateNewIdsForComponent(component, frontendState) + } + screen.props._id = uuid() + screen.name = screen.props._id + screen.route = screen.route.toLowerCase() return screen } diff --git a/packages/builder/src/builderStore/store/screenTemplates/newRecordScreen.js b/packages/builder/src/builderStore/store/screenTemplates/newRecordScreen.js new file mode 100644 index 0000000000..4c3466ca1c --- /dev/null +++ b/packages/builder/src/builderStore/store/screenTemplates/newRecordScreen.js @@ -0,0 +1,44 @@ +export default function(models) { + return models.map(model => ({ + name: `New ${model.name}`, + create: () => createScreen(model), + })) +} + +const createScreen = model => ({ + props: { + _id: "f684460e-1f79-42b4-8ffd-1f708bca93ed", + _component: "@budibase/standard-components/container", + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, + }, + className: "", + onLoad: [], + type: "div", + _children: [ + { + _id: "7d1d6b43-b444-46a5-a75c-267fd6b5baf6", + _component: "@budibase/standard-components/heading", + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, + }, + _code: "", + className: "", + text: `Create New ${model.name}`, + type: "h1", + _instanceId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394", + _instanceName: `Heading 1`, + _children: [], + }, + ], + _instanceName: `New ${model.name}`, + }, + route: `/${model.name}/new`, + name: "screen-id", +}) diff --git a/packages/builder/src/builderStore/store/screenTemplates/recordDetailScreen.js b/packages/builder/src/builderStore/store/screenTemplates/recordDetailScreen.js new file mode 100644 index 0000000000..252e0f5e20 --- /dev/null +++ b/packages/builder/src/builderStore/store/screenTemplates/recordDetailScreen.js @@ -0,0 +1,44 @@ +export default function(models) { + return models.map(model => ({ + name: `New ${model.name}`, + create: () => createScreen(model), + })) +} + +const createScreen = model => ({ + props: { + _id: "f684460e-1f79-42b4-8ffd-1f708bca93ed", + _component: "@budibase/standard-components/recorddetail", + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, + }, + className: "", + onLoad: [], + type: "div", + _children: [ + { + _id: "7d1d6b43-b444-46a5-a75c-267fd6b5baf6", + _component: "@budibase/standard-components/heading", + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, + }, + _code: "", + className: "", + text: `${model.name} Detail`, + type: "h1", + _instanceId: "inst_cf8ace4_69efc0d72e6f443db2d4c902c14d9394", + _instanceName: `Heading 1`, + _children: [], + }, + ], + _instanceName: `${model.name} Detail`, + }, + route: `/${model.name}/new`, + name: "screen-id", +}) diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte index 581bee5ef0..1c3353c888 100644 --- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte +++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte @@ -69,18 +69,8 @@ } const copyComponent = () => { - store.update(s => { - const parent = getParent(s.currentPreviewItem.props, component) - const copiedComponent = cloneDeep(component) - walkProps(copiedComponent, p => { - p._id = uuid() - }) - parent._children = [...parent._children, copiedComponent] - saveCurrentPreviewItem(s) - s.currentComponentInfo = copiedComponent - regenerateCssForCurrentScreen(s) - return s - }) + storeComponentForCopy(false) + pasteComponent("below") } const deleteComponent = () => { diff --git a/packages/builder/src/components/userInterface/CreateScreen/ChooseTemplate.svelte b/packages/builder/src/components/userInterface/CreateScreen/ChooseTemplate.svelte index 8f806b6b05..a0b1e88ac8 100644 --- a/packages/builder/src/components/userInterface/CreateScreen/ChooseTemplate.svelte +++ b/packages/builder/src/components/userInterface/CreateScreen/ChooseTemplate.svelte @@ -2,6 +2,7 @@ import { store, backendUiStore } from "builderStore" import { Input, Select, Button, Spacer } from "@budibase/bbui" import getTemplates from "builderStore/store/screenTemplates" + import { createEventDispatcher } from "svelte" const dispatch = createEventDispatcher() let screens @@ -35,9 +36,11 @@ diff --git a/packages/builder/src/components/userInterface/CreateScreen/CreateScreen.svelte b/packages/builder/src/components/userInterface/CreateScreen/CreateScreen.svelte index 166ddcf0a9..4a5ec9f69d 100644 --- a/packages/builder/src/components/userInterface/CreateScreen/CreateScreen.svelte +++ b/packages/builder/src/components/userInterface/CreateScreen/CreateScreen.svelte @@ -9,6 +9,11 @@ dialog.show() } + const finished = () => { + dialog.hide() + template = undefined + } + let dialog let template @@ -19,12 +24,12 @@ {#if template === 'none'}
- +
{:else} -
+
(template = 'none')} />
{/if} diff --git a/packages/builder/src/components/userInterface/CreateScreen/NoTemplate.svelte b/packages/builder/src/components/userInterface/CreateScreen/NoTemplate.svelte index 37bcd0cc0d..f83970cdb0 100644 --- a/packages/builder/src/components/userInterface/CreateScreen/NoTemplate.svelte +++ b/packages/builder/src/components/userInterface/CreateScreen/NoTemplate.svelte @@ -1,17 +1,23 @@ -

New Screen

@@ -68,6 +85,15 @@ on:change={routeChanged} />
+
+ + +
+
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index e600b264be..e8715dfbef 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -274,6 +274,17 @@ "context": "model", "children": true, "data": true, + "baseComponent": true, + "props": { + "model": "models" + } + }, + "newrecord": { + "description": "Loads a record, using an ID in the url", + "context": "model", + "children": true, + "data": true, + "baseComponent": true, "props": { "model": "models" } @@ -715,7 +726,7 @@ "default": "div" } }, - "container": true, + "baseComponent": true, "tags": [ "div", "container",