From 2e77e6dc5848e05e2eddece6265a15490106848e Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Tue, 10 Mar 2020 13:53:23 +0000 Subject: [PATCH 01/55] new backend beginnings --- packages/builder/src/BackendRoot.svelte | 25 ++- packages/builder/src/budibase.css | 8 + packages/builder/src/builderStore/store.js | 10 -- .../builder/src/database/ActionsHeader.svelte | 9 +- .../builder/src/database/DatabaseRoot.svelte | 3 +- .../ModelDataTable/ModelDataTable.svelte | 63 +++++++ .../src/database/ModelDataTable/index.js | 1 + .../test/ModelDataTable.spec.js | 0 packages/builder/src/nav/BackendNav.svelte | 170 ++++++++---------- packages/builder/src/nav/DatabasesList.svelte | 0 packages/builder/src/nav/HierarchyRow.svelte | 11 +- packages/builder/src/nav/NavItem.svelte | 12 +- .../src/nav/SchemaManagementDrawer.svelte | 119 ++++++++++++ .../userInterface/UserInterfaceRoot.svelte | 3 + 14 files changed, 306 insertions(+), 128 deletions(-) create mode 100644 packages/builder/src/database/ModelDataTable/ModelDataTable.svelte create mode 100644 packages/builder/src/database/ModelDataTable/index.js create mode 100644 packages/builder/src/database/ModelDataTable/test/ModelDataTable.spec.js create mode 100644 packages/builder/src/nav/DatabasesList.svelte create mode 100644 packages/builder/src/nav/SchemaManagementDrawer.svelte diff --git a/packages/builder/src/BackendRoot.svelte b/packages/builder/src/BackendRoot.svelte index 26cd39f756..3ce1ab508b 100644 --- a/packages/builder/src/BackendRoot.svelte +++ b/packages/builder/src/BackendRoot.svelte @@ -1,5 +1,6 @@
@@ -16,29 +20,32 @@
- {#if $store.activeNav === 'database'} + {#if activeNav === 'database'} - {:else if $store.activeNav === 'actions'} + {:else if activeNav === 'actions'} - {:else if $store.activeNav === 'access levels'} + {:else if activeNav === 'access levels'} {/if}
+
+ +
diff --git a/packages/builder/src/database/DatabaseRoot.svelte b/packages/builder/src/database/DatabaseRoot.svelte index f8e1b2875e..1bbcb5044e 100644 --- a/packages/builder/src/database/DatabaseRoot.svelte +++ b/packages/builder/src/database/DatabaseRoot.svelte @@ -2,6 +2,7 @@ import HierarchyRow from "./HierarchyRow.svelte" import RecordView from "./RecordView.svelte" import IndexView from "./IndexView.svelte" + import ModelDataTable from "./ModelDataTable" import ActionsHeader from "./ActionsHeader.svelte" import { store } from "../builderStore" import getIcon from "../common/icon" @@ -59,7 +60,7 @@
{#if !$store.currentNode} -

:)

+ {:else if $store.currentNode.type === 'record'} {:else} diff --git a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte new file mode 100644 index 0000000000..caaa67b91c --- /dev/null +++ b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte @@ -0,0 +1,63 @@ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Shoe Database
Table HeadingTable HeadingTable Heading
Table FooterTable FooterTable Footer
Table DataTable DataTable Data
Table DataTable DataTable Data
+ +
+ + \ No newline at end of file diff --git a/packages/builder/src/database/ModelDataTable/index.js b/packages/builder/src/database/ModelDataTable/index.js new file mode 100644 index 0000000000..57b83126d6 --- /dev/null +++ b/packages/builder/src/database/ModelDataTable/index.js @@ -0,0 +1 @@ +export { default } from "./ModelDataTable.svelte" \ No newline at end of file diff --git a/packages/builder/src/database/ModelDataTable/test/ModelDataTable.spec.js b/packages/builder/src/database/ModelDataTable/test/ModelDataTable.spec.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/nav/BackendNav.svelte b/packages/builder/src/nav/BackendNav.svelte index 1da512d4eb..6b78842f40 100644 --- a/packages/builder/src/nav/BackendNav.svelte +++ b/packages/builder/src/nav/BackendNav.svelte @@ -1,4 +1,5 @@
-
- {@html getIcon('database', '18')} -
-
Database
- +
Databases
+
- {#each $store.hierarchy.children as record} + + +
+
+
+
+
+
Users
+ +
+
- - - +
+ +
+
diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index 18ad131923..ebb78d98e9 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -126,6 +126,7 @@ flex-direction: column; } +<<<<<<< HEAD .preview-pane { grid-column: 2; margin: 40px; @@ -134,6 +135,8 @@ box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05); } +======= +>>>>>>> new backend beginnings .components-pane { grid-column: 3; background-color: var(--secondary5); From 62176b6b14ccf9295cb06a5e33a1889ab056b765 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Tue, 10 Mar 2020 14:00:32 +0000 Subject: [PATCH 02/55] databases list --- packages/builder/src/nav/BackendNav.svelte | 35 ++++---- packages/builder/src/nav/DatabasesList.svelte | 86 +++++++++++++++++++ packages/builder/src/nav/UsersList.svelte | 0 .../userInterface/UserInterfaceRoot.svelte | 3 - 4 files changed, 102 insertions(+), 22 deletions(-) create mode 100644 packages/builder/src/nav/UsersList.svelte diff --git a/packages/builder/src/nav/BackendNav.svelte b/packages/builder/src/nav/BackendNav.svelte index 6b78842f40..77cdc76480 100644 --- a/packages/builder/src/nav/BackendNav.svelte +++ b/packages/builder/src/nav/BackendNav.svelte @@ -1,44 +1,41 @@ + +
+
    + {#each pages as { title, id }} +
  • + + {#if id === $store.currentPageName} + + {/if} + + + +
    • + {/each} +
+
+ + diff --git a/packages/builder/src/nav/UsersList.svelte b/packages/builder/src/nav/UsersList.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index ebb78d98e9..18ad131923 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -126,7 +126,6 @@ flex-direction: column; } -<<<<<<< HEAD .preview-pane { grid-column: 2; margin: 40px; @@ -135,8 +134,6 @@ box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05); } -======= ->>>>>>> new backend beginnings .components-pane { grid-column: 3; background-color: var(--secondary5); From 8c983192e66bedea71e8ea26042d661f0652270a Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Tue, 10 Mar 2020 16:06:30 +0000 Subject: [PATCH 03/55] iterate over package app instances --- packages/builder/src/BackendRoot.svelte | 9 +- packages/builder/src/PackageRoot.svelte | 25 ++++-- packages/builder/src/builderStore/store.js | 89 ++++++++++++++----- packages/builder/src/common/Select.svelte | 3 +- .../ModelDataTable/ModelDataTable.svelte | 66 ++++++++------ packages/builder/src/nav/BackendNav.svelte | 7 +- packages/builder/src/nav/DatabasesList.svelte | 24 +---- packages/builder/src/nav/HierarchyRow.svelte | 14 ++- .../src/nav/SchemaManagementDrawer.svelte | 1 + packages/builder/src/nav/UsersList.svelte | 83 +++++++++++++++++ 10 files changed, 230 insertions(+), 91 deletions(-) diff --git a/packages/builder/src/BackendRoot.svelte b/packages/builder/src/BackendRoot.svelte index 3ce1ab508b..722afcfedf 100644 --- a/packages/builder/src/BackendRoot.svelte +++ b/packages/builder/src/BackendRoot.svelte @@ -20,13 +20,13 @@
- {#if activeNav === 'database'} + - {:else if activeNav === 'actions'} +
@@ -43,9 +43,6 @@ .content { flex: 1 1 auto; margin: 80px 60px; - background: #fff; - border-radius: 5px; - box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05); } .nav { diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte index 3362e81289..fcdc2d5c71 100644 --- a/packages/builder/src/PackageRoot.svelte +++ b/packages/builder/src/PackageRoot.svelte @@ -6,6 +6,13 @@ import { fade } from "svelte/transition" import { SettingsIcon, PreviewIcon, HelpIcon } from "./common/Icons/" + const TABS = { + BACKEND: "backend", + FRONTEND: "frontend", + } + + let selectedTab = TABS.BACKEND +
@@ -19,37 +26,37 @@ color="var(--slate)" hoverColor="var(--secondary75)"/> --> + on:click={() => selectedTab = TABS.BACKEND}> Backend + on:click={() => selectedTab = TABS.FRONTEND}> Frontend
+ on:click={() => selectedTab === TABS.FRONTEND}> + on:click={() => selectedTab === TABS.FRONTEND}>
- {#if $store.isBackend} + {#if selectedTab === TABS.BACKEND}
diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js index 6026f782f2..3a8b346a7d 100644 --- a/packages/builder/src/builderStore/store.js +++ b/packages/builder/src/builderStore/store.js @@ -55,7 +55,6 @@ export const getStore = () => { currentComponentProps: null, currentNodeIsNew: false, errors: [], - isBackend: true, hasAppPackage: false, accessLevels: { version: 0, levels: [] }, currentNode: null, @@ -66,6 +65,61 @@ export const getStore = () => { const store = writable(initial) + // store.api = { + // appDefinition: { + // create: () => {}, + // }, + // records: { + // create: () => {}, + // update: () => {}, + // delete: () => {}, + // }, + // indexes: { + // create: () => {}, + // update: () => {}, + // delete: () => {}, + // }, + // pages: { + // create: () => {}, + // update: () => {}, + // delete: () => {}, + // }, + // screens: { + // create: () => {}, + // select: () => {}, + // rename: () => {} + // }, + // accessLevels: { + // create: () => {}, + // update: () => {}, + // delete: () => {}, + // }, + // users: { + // create: () => {}, + // update: () => {}, + // delete: () => {}, + // }, + // actions: { + // update: () => {}, + // delete: () => {} + // }, + // triggers: { + // create: () => {}, + // update: () => {}, + // delete: () => {}, + // }, + // stylesheets: { + // create: () => {}, + // update: () => {}, + // delete: () => {}, + // }, + // components: { + // create: () => {}, + // update: () => {}, + // delete: () => {}, + // } + // } + store.initialise = initialise(store, initial) store.newChildRecord = newRecord(store, false) store.newRootRecord = newRecord(store, true) @@ -94,8 +148,8 @@ export const getStore = () => { store.addStylesheet = addStylesheet(store) store.removeStylesheet = removeStylesheet(store) store.savePage = savePage(store) - store.showFrontend = showFrontend(store) - store.showBackend = showBackend(store) + // store.showFrontend = showFrontend(store) + // store.showBackend = showBackend(store) store.showSettings = showSettings(store) store.useAnalytics = useAnalytics(store) store.createGeneratedComponents = createGeneratedComponents(store) @@ -172,6 +226,7 @@ const initialise = (store, initial) => async () => { initial.builtins = [getBuiltin("##builtin/screenslot")] initial.actions = values(pkg.appDefinition.actions) initial.triggers = pkg.appDefinition.triggers + initial.appInstances = pkg.application.instances if (!!initial.hierarchy && !isEmpty(initial.hierarchy)) { initial.hierarchy = constructHierarchy(initial.hierarchy) @@ -185,9 +240,9 @@ const initialise = (store, initial) => async () => { } const showSettings = store => () => { - store.update(s => { - s.showSettings = !s.showSettings - return s + store.update(state => { + state.showSettings = !state.showSettings + return state }) } @@ -198,20 +253,6 @@ const useAnalytics = store => () => { }) } -const showBackend = store => () => { - store.update(s => { - s.isBackend = true - return s - }) -} - -const showFrontend = store => () => { - store.update(s => { - s.isBackend = false - return s - }) -} - const newRecord = (store, useRoot) => () => { store.update(s => { s.currentNodeIsNew = true @@ -377,10 +418,10 @@ const saveAction = store => (newAction, isNew, oldAction = null) => { } const deleteAction = store => action => { - store.update(s => { - s.actions = filter(a => a.name !== action.name)(s.actions) - saveBackend(s) - return s + store.update(state => { + state.actions = state.actions.filter(a => a.name !== action.name); + saveBackend(state); + return state; }) } diff --git a/packages/builder/src/common/Select.svelte b/packages/builder/src/common/Select.svelte index e360c1c4d6..db24e88b89 100644 --- a/packages/builder/src/common/Select.svelte +++ b/packages/builder/src/common/Select.svelte @@ -14,12 +14,12 @@ \ No newline at end of file + + .table-controls { + display: flex; + justify-content: space-between; + align-items: center; + } + diff --git a/packages/builder/src/nav/BackendNav.svelte b/packages/builder/src/nav/BackendNav.svelte index 77cdc76480..55d35ecb33 100644 --- a/packages/builder/src/nav/BackendNav.svelte +++ b/packages/builder/src/nav/BackendNav.svelte @@ -3,7 +3,7 @@ import { store } from "../builderStore" import HierarchyRow from "./HierarchyRow.svelte" import DatabasesList from "./DatabasesList.svelte" - import DropdownButton from "../common/DropdownButton.svelte" + import UsersList from "./UsersList.svelte" import { hierarchy as hierarchyFunctions } from "../../../core/src" import NavItem from "./NavItem.svelte" import getIcon from "../common/icon" @@ -68,7 +68,7 @@
Databases
- +
@@ -89,11 +89,12 @@
Users
- +
+ diff --git a/packages/builder/src/nav/DatabasesList.svelte b/packages/builder/src/nav/DatabasesList.svelte index 3916361a47..e690959b32 100644 --- a/packages/builder/src/nav/DatabasesList.svelte +++ b/packages/builder/src/nav/DatabasesList.svelte @@ -3,30 +3,12 @@ import getIcon from "../common/icon" import { CheckIcon } from "../common/Icons" - const getPage = (s, name) => { - const props = s.pages[name] - return { name, props } - } - - $: databases = $store.app - - const pages = [ - { - title: "Main", - id: "main", - }, - { - title: "Login", - id: "unauthenticated", - }, - ] - - store.setCurrentPage("main") + $: instances = $store.appInstances
    - {#each pages as { title, id }} + {#each $store.appInstances as { id, name }}
  • {#if id === $store.currentPageName} @@ -37,7 +19,7 @@
    • {/each} diff --git a/packages/builder/src/nav/HierarchyRow.svelte b/packages/builder/src/nav/HierarchyRow.svelte index 13459e53cc..abfe34b134 100644 --- a/packages/builder/src/nav/HierarchyRow.svelte +++ b/packages/builder/src/nav/HierarchyRow.svelte @@ -25,7 +25,8 @@
    store.selectExistingNode(node.nodeId)} - class="budibase__nav-item" + class="budibase__nav-item hierarchy-item" + class:capitalized={type === "record"} style="padding-left: {20 + level * 20}px" class:selected={navActive}> @@ -42,3 +43,14 @@ {/each} {/if}
    + + diff --git a/packages/builder/src/nav/SchemaManagementDrawer.svelte b/packages/builder/src/nav/SchemaManagementDrawer.svelte index 3ac709b49f..b25f36bccb 100644 --- a/packages/builder/src/nav/SchemaManagementDrawer.svelte +++ b/packages/builder/src/nav/SchemaManagementDrawer.svelte @@ -98,6 +98,7 @@ .nav-group-header { display: flex; justify-content: space-between; + align-items: center; padding: 2rem 1rem 1rem 1rem; } diff --git a/packages/builder/src/nav/UsersList.svelte b/packages/builder/src/nav/UsersList.svelte index e69de29bb2..384114d5d1 100644 --- a/packages/builder/src/nav/UsersList.svelte +++ b/packages/builder/src/nav/UsersList.svelte @@ -0,0 +1,83 @@ + + +
    +
      + {#each pages as { title, id }} +
    • + + +
      • + {/each} +
    +
    + + From 4678f2c168c087b32b4fcd451cdc7e8e5d157f54 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Thu, 12 Mar 2020 14:23:29 +0000 Subject: [PATCH 04/55] UI structure --- packages/builder/package.json | 1 + packages/builder/rollup.config.js | 2 +- packages/builder/src/App.svelte | 16 +- packages/builder/src/BackendRoot.svelte | 13 +- packages/builder/src/budibase.css | 20 ++ packages/builder/src/builderStore/store.js | 2 - packages/builder/src/common/CodeArea.svelte | 13 +- packages/builder/src/common/Select.svelte | 20 +- packages/builder/src/common/Table.svelte | 45 ++++ .../builder/src/database/DatabaseRoot.svelte | 27 ++- .../builder/src/database/FieldView.svelte | 12 +- .../builder/src/database/IndexView.svelte | 84 ++++++-- .../ModelDataTable/ModelDataTable.svelte | 62 ++++-- .../ModelDataTable/TablePagination.svelte | 44 ++++ .../src/database/ModelDataTable/api.js | 24 +++ .../modals/CreateEditField.svelte | 23 ++ .../modals/CreateEditModel.svelte | 23 ++ .../modals/CreateEditRecord.svelte | 60 ++++++ .../modals/CreateEditView.svelte | 23 ++ .../ModelDataTable/modals/DeleteRecord.svelte | 24 +++ .../database/ModelDataTable/modals/index.js | 2 + .../{RecordView.svelte => ModelView.svelte} | 204 +++++++----------- packages/builder/src/global.css | 4 + packages/builder/src/main.js | 2 +- packages/builder/src/nav/BackendNav.svelte | 4 +- packages/builder/src/nav/DatabasesList.svelte | 15 +- packages/builder/src/nav/HierarchyRow.svelte | 3 +- .../src/nav/SchemaManagementDrawer.svelte | 14 +- .../core/src/indexing/indexSchemaCreator.js | 2 +- 29 files changed, 576 insertions(+), 212 deletions(-) create mode 100644 packages/builder/src/common/Table.svelte create mode 100644 packages/builder/src/database/ModelDataTable/TablePagination.svelte create mode 100644 packages/builder/src/database/ModelDataTable/api.js create mode 100644 packages/builder/src/database/ModelDataTable/modals/CreateEditField.svelte create mode 100644 packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte create mode 100644 packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte create mode 100644 packages/builder/src/database/ModelDataTable/modals/CreateEditView.svelte create mode 100644 packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte create mode 100644 packages/builder/src/database/ModelDataTable/modals/index.js rename packages/builder/src/database/{RecordView.svelte => ModelView.svelte} (58%) diff --git a/packages/builder/package.json b/packages/builder/package.json index fa92be46a2..70a9602309 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -47,6 +47,7 @@ "safe-buffer": "^5.1.2", "shortid": "^2.2.8", "string_decoder": "^1.2.0", + "svelte-routing": "^1.4.2", "uikit": "^3.1.7" }, "devDependencies": { diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js index 5a607720d8..bbc1d3c5fc 100644 --- a/packages/builder/rollup.config.js +++ b/packages/builder/rollup.config.js @@ -165,7 +165,7 @@ export default { svelte({ // enable run-time checks when not in production dev: !production, - include: "src/**/*.svelte", + include: ["src/**/*.svelte", "node_modules/**/*.svelte"], // we'll extract any component CSS out into // a separate file — better for performance css: css => { diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte index 81e74e8543..69bddc225c 100644 --- a/packages/builder/src/App.svelte +++ b/packages/builder/src/App.svelte @@ -29,16 +29,16 @@ {/await} + {#if $store.useAnalytics} +