From af9038f64f0b49ab07c90e73e0fd9bbbec070938 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Mon, 15 Jun 2020 16:41:31 +0100 Subject: [PATCH] structuring new backend UI --- packages/builder/package.json | 4 +- packages/builder/rollup.config.js | 4 + packages/builder/src/actions/backend.js | 0 packages/builder/src/actions/index.js | 0 .../builder/src/builderStore/store/backend.js | 18 +-- .../CreateEditModel/CreateEditModel.svelte | 7 -- .../src/components/nav/HierarchyRow.svelte | 8 -- .../nav/ModelNavigator/Block.svelte | 47 ++++++++ .../nav/ModelNavigator/BlockNavigator.svelte | 79 +++++++++++++ .../nav/ModelNavigator/ListItem.svelte | 46 ++++++++ .../nav/ModelNavigator/ModelNavigator.svelte | 90 ++++++++++++++ .../src/components/nav/ModelSetupNav.svelte | 111 ++++++++++++++++++ .../builder/src/constants/backend/index.js | 101 ++++++++++++++++ .../[application]/backend/_layout.svelte | 8 +- .../backend/actions/index.svelte | 0 .../database/[selectedDatabase]/Block.svelte | 49 ++++++++ .../[selectedDatabase]/newmodel.svelte | 40 +++++++ .../server/src/api/routes/tests/model.spec.js | 2 +- .../server/src/utilities/builder/index.js | 2 +- 19 files changed, 580 insertions(+), 36 deletions(-) delete mode 100644 packages/builder/src/actions/backend.js delete mode 100644 packages/builder/src/actions/index.js create mode 100644 packages/builder/src/components/nav/ModelNavigator/Block.svelte create mode 100644 packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte create mode 100644 packages/builder/src/components/nav/ModelNavigator/ListItem.svelte create mode 100644 packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte create mode 100644 packages/builder/src/components/nav/ModelSetupNav.svelte create mode 100644 packages/builder/src/constants/backend/index.js delete mode 100644 packages/builder/src/pages/[application]/backend/actions/index.svelte create mode 100644 packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/Block.svelte create mode 100644 packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/newmodel.svelte diff --git a/packages/builder/package.json b/packages/builder/package.json index 8fe9ffd494..b2de1252b3 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -39,7 +39,7 @@ }, "dependencies": { "@beyonk/svelte-notifications": "^2.0.3", - "@budibase/bbui": "^1.1.1", + "@budibase/bbui": "^1.4.1", "@budibase/client": "^0.0.32", "@nx-js/compiler-util": "^2.0.0", "codemirror": "^5.51.0", @@ -86,4 +86,4 @@ "svelte": "3.23.x" }, "gitHead": "115189f72a850bfb52b65ec61d932531bf327072" -} \ No newline at end of file +} diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js index fd7c487c3f..5441268407 100644 --- a/packages/builder/rollup.config.js +++ b/packages/builder/rollup.config.js @@ -153,6 +153,10 @@ export default { find: "builderStore", replacement: path.resolve(projectRootDir, "src/builderStore"), }, + { + find: "constants", + replacement: path.resolve(projectRootDir, "src/constants"), + }, ], customResolver, }), diff --git a/packages/builder/src/actions/backend.js b/packages/builder/src/actions/backend.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/builder/src/actions/index.js b/packages/builder/src/actions/index.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index 9a5a7b1fbc..b7e831c43b 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/packages/builder/src/builderStore/store/backend.js @@ -39,18 +39,6 @@ export const getBackendUiStore = () => { state.views = views return state }) - /** TODO: DEMO SOLUTION**/ - if (!models || models.length === 0) { - const { open, close } = getContext("simple-modal") - open( - CreateEditModelModal, - { - onClosed: close, - }, - { styleContent: { padding: "0" } } - ) - } - /** DEMO SOLUTION END **/ }, }, records: { @@ -71,6 +59,10 @@ export const getBackendUiStore = () => { }), }, models: { + select: model => store.update(state => { + state.selectedModel = model; + return state; + }), create: model => store.update(state => { state.models.push(model) @@ -78,7 +70,7 @@ export const getBackendUiStore = () => { state.selectedModel = model state.selectedView = `all_${model._id}` return state - }), + }) }, views: { select: view => diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte index 6264b74e09..4eee351e7b 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte @@ -20,12 +20,6 @@ $: modelFields = model.schema ? Object.entries(model.schema) : [] $: instanceId = $backendUiStore.selectedDatabase._id - function editField() {} - - function deleteField() {} - - function onFinishedFieldEdit() {} - async function saveModel() { const SAVE_MODEL_URL = `/api/${instanceId}/models` const response = await api.post(SAVE_MODEL_URL, model) @@ -94,7 +88,6 @@ {:else} (showFieldView = false)} /> {/if} diff --git a/packages/builder/src/components/nav/HierarchyRow.svelte b/packages/builder/src/components/nav/HierarchyRow.svelte index 8921ab74de..d57463cc20 100644 --- a/packages/builder/src/components/nav/HierarchyRow.svelte +++ b/packages/builder/src/components/nav/HierarchyRow.svelte @@ -31,14 +31,6 @@ class:selected={$backendUiStore.selectedView === `all_${node._id}`}> {node.name} - diff --git a/packages/builder/src/components/nav/ModelNavigator/Block.svelte b/packages/builder/src/components/nav/ModelNavigator/Block.svelte new file mode 100644 index 0000000000..c9e7f67623 --- /dev/null +++ b/packages/builder/src/components/nav/ModelNavigator/Block.svelte @@ -0,0 +1,47 @@ + + +
+ + {title} +
+ + diff --git a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte new file mode 100644 index 0000000000..8c117fbcbc --- /dev/null +++ b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte @@ -0,0 +1,79 @@ + + +
+
+ {#each HEADINGS as tab} + (selectedTab = tab.key)}> + {tab.title} + + {/each} +
+ +
+ {#each Object.values(blockDefinitions[selectedTab]) as blockDefinition} + + {/each} +
+
+ + diff --git a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte new file mode 100644 index 0000000000..6452b3459d --- /dev/null +++ b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte @@ -0,0 +1,46 @@ + + +
+ + {title} +
+ + diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte new file mode 100644 index 0000000000..2bf286d9ee --- /dev/null +++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte @@ -0,0 +1,90 @@ + + +
+ {#if $backendUiStore.selectedDatabase._id} +
+
+ + {#if selectedTab === 'NAVIGATE'} + +
+ {#each $backendUiStore.models as model} + selectModel(model)} /> + {#each Object.keys(model.schema) as field} + selectField(model.schema[field])} /> + {/each} + {/each} +
+ {:else if selectedTab === 'ADD'} + + {/if} + +
+
+ {/if} +
+ + diff --git a/packages/builder/src/components/nav/ModelSetupNav.svelte b/packages/builder/src/components/nav/ModelSetupNav.svelte new file mode 100644 index 0000000000..f72037d33e --- /dev/null +++ b/packages/builder/src/components/nav/ModelSetupNav.svelte @@ -0,0 +1,111 @@ + + +
+ + {#if selectedTab === 'SETUP'} +
+
Name
+ +
+
+
Import Data
+ +
+ + + {:else if selectedTab === 'DELETE'} +
+
Danger Zone
+ +
+ {/if} + +
+ + diff --git a/packages/builder/src/constants/backend/index.js b/packages/builder/src/constants/backend/index.js new file mode 100644 index 0000000000..b49d97d262 --- /dev/null +++ b/packages/builder/src/constants/backend/index.js @@ -0,0 +1,101 @@ +const FIELD_TYPES = ["string", "number", "boolean"] + +export const FIELDS = { + PLAIN_TEXT: { + name: "Plain Text", + icon: "ri-text", + definition: { + type: "string", + constraints: { + type: "string", + length: {}, + presence: false, + }, + }, + }, + NUMBER: { + name: "Number", + icon: "ri-number-1", + definition: { + type: "number", + constraints: { + type: "number", + presence: false, + numericality: {}, + }, + }, + }, + BOOLEAN: { + name: "True/False", + icon: "ri-toggle-line", + definition: { + type: "boolean", + constraints: { + type: "boolean", + presence: false, + }, + }, + }, + OPTIONS: { + name: "Options", + icon: "ri-list-check-2", + definition: { + type: "options", + constraints: { + type: "string", + presence: false, + }, + }, + }, + DATETIME: { + name: "Date/Time", + icon: "ri-calendar-event-fill", + definition: { + type: "date", + constraints: { + type: "date", + datetime: {}, + presence: false, + }, + }, + }, + IMAGE: { + name: "Image", + icon: "ri-image-line", + definition: { + type: "image", + constraints: { + type: "string", + presence: false, + }, + }, + }, + FILE: { + name: "Image", + icon: "ri-file-line", + definition: { + type: "file", + constraints: { + type: "string", + presence: false, + }, + }, + }, + DATA_LINK: { + name: "Data Links", + icon: "ri-link", + definition: { + type: "link", + modelId: null, + constraints: { + type: "array", + }, + }, + }, +} + +export const BLOCKS = { + +} + +export const TABLES = {} diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte index 0e36980c6c..9d8cb5ef17 100644 --- a/packages/builder/src/pages/[application]/backend/_layout.svelte +++ b/packages/builder/src/pages/[application]/backend/_layout.svelte @@ -3,19 +3,19 @@ import { store, backendUiStore } from "builderStore" import * as api from "components/database/ModelDataTable/api" - import BackendNav from "components/nav/BackendNav.svelte" - import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte" + import ModelNavigator from "components/nav/ModelNavigator/ModelNavigator.svelte" + import ModelSetupNav from "components/nav/ModelSetupNav.svelte"
- +
- +
diff --git a/packages/builder/src/pages/[application]/backend/actions/index.svelte b/packages/builder/src/pages/[application]/backend/actions/index.svelte deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/Block.svelte b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/Block.svelte new file mode 100644 index 0000000000..b31ec7776f --- /dev/null +++ b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/Block.svelte @@ -0,0 +1,49 @@ + + + +
+ + {title} +
+ + diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/newmodel.svelte b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/newmodel.svelte new file mode 100644 index 0000000000..5d4b83808f --- /dev/null +++ b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/newmodel.svelte @@ -0,0 +1,40 @@ + + +
+
+

Create New Table

+ Before you can view your table, you need to set it up. +
+ +
+

Fields

+
+ {#each Object.values(FIELDS) as field} + + {/each} +
+
+ + + +
+ + \ No newline at end of file diff --git a/packages/server/src/api/routes/tests/model.spec.js b/packages/server/src/api/routes/tests/model.spec.js index 7134245fb3..4a9710b827 100644 --- a/packages/server/src/api/routes/tests/model.spec.js +++ b/packages/server/src/api/routes/tests/model.spec.js @@ -110,7 +110,7 @@ describe("/models", () => { afterEach(() => { delete testModel._rev - }) + }); it("returns a success response when a model is deleted.", async done => { request diff --git a/packages/server/src/utilities/builder/index.js b/packages/server/src/utilities/builder/index.js index 7b9a6a69ec..9a065642ad 100644 --- a/packages/server/src/utilities/builder/index.js +++ b/packages/server/src/utilities/builder/index.js @@ -41,7 +41,7 @@ const screenPath = (appPath, pageName, name) => module.exports.saveScreen = async (config, appname, pagename, screen) => { const appPath = appPackageFolder(config, appname) - const compPath = screenPath(appPath, pagename, screen.name) + const compPath = screenPath(appPath, pagename, screen.props._instanceName) await ensureDir(dirname(compPath)) if (screen._css) { delete screen._css