From 10d798fe62c4060bc15845d86a2059b025561878 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Fri, 7 Aug 2020 16:13:57 +0100 Subject: [PATCH] creating rows and columns working --- packages/builder/package.json | 3 +- .../builder/src/builderStore/store/backend.js | 2 - .../ModelDataTable/ModelDataTable.svelte | 64 +++++-- .../CreateEditModel/CreateEditModel.svelte | 165 ------------------ .../modals/CreateEditRecord.svelte | 36 +--- .../modals/CreateEditTable.svelte | 143 +++++++++++++++ .../modals/RecordFieldControl.svelte | 40 +---- .../modals/tests/CreateEditTable.spec.js | 38 ++++ .../ModelDataTable/popovers/Column.svelte | 25 +++ .../popovers/ColumnHeader.svelte | 114 ++++++++++++ .../ModelDataTable/popovers/Row.svelte | 21 +++ .../ModelDataTable/popovers/View.svelte | 0 .../nav/ModelNavigator/EmptyModel.svelte | 16 +- .../nav/ModelNavigator/ModelNavigator.svelte | 19 +- .../builder/src/constants/backend/index.js | 37 +--- .../[application]/backend/_layout.svelte | 5 +- 16 files changed, 408 insertions(+), 320 deletions(-) delete mode 100644 packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte create mode 100644 packages/builder/src/components/database/ModelDataTable/modals/CreateEditTable.svelte create mode 100644 packages/builder/src/components/database/ModelDataTable/modals/tests/CreateEditTable.spec.js create mode 100644 packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte create mode 100644 packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte create mode 100644 packages/builder/src/components/database/ModelDataTable/popovers/Row.svelte create mode 100644 packages/builder/src/components/database/ModelDataTable/popovers/View.svelte diff --git a/packages/builder/package.json b/packages/builder/package.json index 7dfd29354a..f560d8b5c3 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -57,7 +57,7 @@ ] }, "dependencies": { - "@budibase/bbui": "^1.18.0", + "@budibase/bbui": "^1.22.3", "@budibase/client": "^0.1.1", "@budibase/colorpicker": "^1.0.1", "@nx-js/compiler-util": "^2.0.0", @@ -96,6 +96,7 @@ "cypress-terminal-report": "^1.4.1", "eslint-plugin-cypress": "^2.11.1", "http-proxy-middleware": "^0.19.1", + "identity-obj-proxy": "^3.0.0", "jest": "^24.8.0", "ncp": "^2.0.0", "npm-run-all": "^4.1.5", diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index 393371ce85..b0d5fcee29 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/packages/builder/src/builderStore/store/backend.js @@ -61,7 +61,6 @@ export const getBackendUiStore = () => { state.draftModel = cloneDeep(model) state.selectedField = "" state.selectedView = `all_${model._id}` - state.tabs.SETUP_PANEL = "SETUP" return state }), save: async ({ model }) => { @@ -95,7 +94,6 @@ export const getBackendUiStore = () => { [field.name]: cloneDeep(field), } state.selectedField = field.name - state.tabs.NAVIGATION_PANEL = "NAVIGATE" return state }) diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte index bbd9d6d4a3..becef0e117 100644 --- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte +++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte @@ -1,12 +1,15 @@ - -
- {#if !showFieldView} - -

Create / Edit Table

- {:else} - -

Create / Edit Field

- {/if} -
-{#if !showFieldView} -
- {#if $store.errors && $store.errors.length > 0} - - {/if} -
- -
-
- Fields -
(showFieldView = true)}> - Add new field -
-
- - - - - - - - - - - {#each modelFields as [key, meta]} - - - - - - - {/each} - -
EditNameType -
- editField(meta)} /> - -
{key}
- 		{meta.type} - deleteField(meta)} /> -
-
- Save -
-
-{:else} - (showFieldView = false)} /> -{/if} - - diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte index f17730893c..af831d98cd 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte @@ -68,10 +68,7 @@
-
- -

Create / Edit Record

-
+
Add New Row
{#each modelSchema as [key, meta]} @@ -97,40 +94,11 @@
- +
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte index 465ca29c42..790b33604f 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte +++ b/packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte @@ -1,18 +1,13 @@ - - {#if type === 'select'} - {/each} - + {:else} - 0} {checked} {type} {value} on:input={handleInput} on:change={handleInput} /> -{/if} - - +{/if} \ No newline at end of file diff --git a/packages/builder/src/components/database/ModelDataTable/modals/tests/CreateEditTable.spec.js b/packages/builder/src/components/database/ModelDataTable/modals/tests/CreateEditTable.spec.js new file mode 100644 index 0000000000..97af4fd87f --- /dev/null +++ b/packages/builder/src/components/database/ModelDataTable/modals/tests/CreateEditTable.spec.js @@ -0,0 +1,38 @@ +import "@testing-library/jest-dom/extend-expect" +import { render, fireEvent } from "@testing-library/svelte" +import CreateEditTable from "../CreateEditTable.svelte"; + +const testField = { + field: {}, + name: "Yeet" +}; + +describe("", () => { + + describe("New Column", () => { + it("shows proper heading when rendered", () => { + const { getByText } = render(CreateEditTable, { name: 'World' }) + + expect(getByText('Hello World!')).toBeInTheDocument() + }) + }) + + describe("Edit Existing Column", () => { + const { getByText } = render(CreateEditTable, testField) + + }) + +}) + + +// // Note: This is as an async test as we are using `fireEvent` +// test('changes button text on click', async () => { +// const { getByText } = render(Comp, { name: 'World' }) +// const button = getByText('Button') + +// // Using await when firing events is unique to the svelte testing library because +// // we have to wait for the next `tick` so that Svelte flushes all pending state changes. +// await fireEvent.click(button) + +// expect(button).toHaveTextContent('Button Clicked') +// }) \ No newline at end of file diff --git a/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte b/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte new file mode 100644 index 0000000000..44bc751f5e --- /dev/null +++ b/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte @@ -0,0 +1,25 @@ + + +
+ +
+ + + + + diff --git a/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte b/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte new file mode 100644 index 0000000000..ab4ad05f86 --- /dev/null +++ b/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte @@ -0,0 +1,114 @@ + + +
+ {field.name} + +
+ + {#if editing} +
Edit Column
+ + {:else} +
    +
  • + + Edit +
    • +
  • + + Delete +
    • +
  • + + Sort A - Z +
    • +
  • + + Sort Z - A +
    • +
+ {/if} + + + diff --git a/packages/builder/src/components/database/ModelDataTable/popovers/Row.svelte b/packages/builder/src/components/database/ModelDataTable/popovers/Row.svelte new file mode 100644 index 0000000000..3f01147943 --- /dev/null +++ b/packages/builder/src/components/database/ModelDataTable/popovers/Row.svelte @@ -0,0 +1,21 @@ + + +
+ +
+ + + + + diff --git a/packages/builder/src/components/database/ModelDataTable/popovers/View.svelte b/packages/builder/src/components/database/ModelDataTable/popovers/View.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte b/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte index 4541c095d3..b43c7210a1 100644 --- a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte +++ b/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte @@ -3,7 +3,7 @@ import { uuid } from "builderStore/uuid" import { fade } from "svelte/transition" import { notifier } from "builderStore/store/notifications" - import { FIELDS, BLOCKS, MODELS } from "constants/backend" + import { FIELDS, BLOCKS } from "constants/backend" import Block from "components/common/Block.svelte" function addNewField(field) { @@ -56,20 +56,6 @@ {/each} - -
- Tables -

Blocks are pre-made fields and help you build your table quicker.

-
- {#each Object.values(MODELS) as model} - createModel(model)} /> - {/each} -
-