From cfe262d6023c9f1fb7817a915ec897736f205ca9 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Fri, 7 Aug 2020 18:31:40 +0100 Subject: [PATCH] new table creation --- .../cypress/integration/createModel.spec.js | 22 ----- .../cypress/integration/createTable.spec.js | 42 +++++++++ packages/builder/package.json | 1 + .../builder/src/builderStore/store/backend.js | 6 +- .../ModelDataTable/ModelDataTable.svelte | 60 ++---------- ...itTable.svelte => CreateEditColumn.svelte} | 4 - .../modals/CreateEditRecord.svelte | 5 - .../modals/tests/CreateEditTable.spec.js | 8 +- .../ModelDataTable/popovers/Column.svelte | 11 ++- .../popovers/ColumnHeader.svelte | 25 +++-- .../ModelDataTable/popovers/EditRow.svelte | 94 +++++++++++++++++++ .../ModelDataTable/popovers/Row.svelte | 6 +- .../nav/ModelNavigator/BlockNavigator.svelte | 91 ------------------ .../nav/ModelNavigator/CreateEditTable.svelte | 65 +++++++++++++ .../nav/ModelNavigator/EmptyModel.svelte | 93 ------------------ .../nav/ModelNavigator/ListItem.svelte | 1 + .../nav/ModelNavigator/ModelNavigator.svelte | 18 +--- .../nav/ModelSetupNav/ModelSetupNav.svelte | 6 +- .../model/[selectedModel]/index.svelte | 11 --- 19 files changed, 255 insertions(+), 314 deletions(-) delete mode 100644 packages/builder/cypress/integration/createModel.spec.js create mode 100644 packages/builder/cypress/integration/createTable.spec.js rename packages/builder/src/components/database/ModelDataTable/modals/{CreateEditTable.svelte => CreateEditColumn.svelte} (98%) create mode 100644 packages/builder/src/components/database/ModelDataTable/popovers/EditRow.svelte delete mode 100644 packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte create mode 100644 packages/builder/src/components/nav/ModelNavigator/CreateEditTable.svelte delete mode 100644 packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte diff --git a/packages/builder/cypress/integration/createModel.spec.js b/packages/builder/cypress/integration/createModel.spec.js deleted file mode 100644 index 06b2420331..0000000000 --- a/packages/builder/cypress/integration/createModel.spec.js +++ /dev/null @@ -1,22 +0,0 @@ -xcontext('Create a Model', () => { - - before(() => { - cy.visit('localhost:4001/_builder') - // https://on.cypress.io/type - cy.createApp('Model App', 'Model App Description') - }) - - // https://on.cypress.io/interacting-with-elements - it('should create a new model', () => { - - cy.createModel('dog', 'name', 'age') - - // Check if model exists - cy.get('.title').should('have.text', 'dog') - }) - it('should add a record', () => { - cy.addRecord('bob', '15') - - cy.contains('bob').should('have.text', 'bob') - }) -}) diff --git a/packages/builder/cypress/integration/createTable.spec.js b/packages/builder/cypress/integration/createTable.spec.js new file mode 100644 index 0000000000..d44a7cc6d6 --- /dev/null +++ b/packages/builder/cypress/integration/createTable.spec.js @@ -0,0 +1,42 @@ +xcontext('Create a Table', () => { + + before(() => { + cy.visit('localhost:4001/_builder') + // https://on.cypress.io/type + cy.createApp('Table App', 'Table App Description') + }) + + // https://on.cypress.io/interacting-with-elements + it('should create a new Table', () => { + + cy.createTable('dog', 'name', 'age') + + // Check if Table exists + cy.get('.title').should('have.text', 'dog') + }) + + it('adds a new column to the table', () => { + cy.addRecord('bob', '15') + + cy.contains('bob').should('have.text', 'bob') + }) + + it('updates a column on the table', () => { + cy.addRecord('bob', '15') + + cy.contains('bob').should('have.text', 'bob') + }) + + it('edits a record', () => { + cy.addRecord('bob', '15') + + cy.contains('bob').should('have.text', 'bob') + }) + + it('deletes a record', () => { + cy.addRecord('bob', '15') + + cy.contains('bob').should('have.text', 'bob') + }) + +}) diff --git a/packages/builder/package.json b/packages/builder/package.json index 26af308a29..ca1a6082e9 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -66,6 +66,7 @@ "codemirror": "^5.51.0", "date-fns": "^1.29.0", "deepmerge": "^4.2.2", + "fast-sort": "^2.2.0", "feather-icons": "^4.21.0", "flatpickr": "^4.5.7", "lodash": "^4.17.13", diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index 5708c98a98..3063c71a82 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/packages/builder/src/builderStore/store/backend.js @@ -63,7 +63,7 @@ export const getBackendUiStore = () => { state.selectedView = `all_${model._id}` return state }), - save: async ({ model }) => { + save: async model => { const updatedModel = cloneDeep(model) // update any renamed schema keys to reflect their names @@ -97,14 +97,14 @@ export const getBackendUiStore = () => { ...state.draftModel.schema, [field.name]: cloneDeep(field), } - store.actions.models.save({ model: state.draftModel }) + store.actions.models.save(state.draftModel) return state }) }, deleteField: field => { store.update(state => { delete state.draftModel.schema[field.name] - store.actions.models.save({ model: state.draftModel }) + store.actions.models.save(state.draftModel) return state }) } diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte index becef0e117..7476e7454e 100644 --- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte +++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte @@ -1,5 +1,6 @@
-
Add New Row
{#each modelSchema as [key, meta]} 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 index 97af4fd87f..44e866ddb3 100644 --- a/packages/builder/src/components/database/ModelDataTable/modals/tests/CreateEditTable.spec.js +++ b/packages/builder/src/components/database/ModelDataTable/modals/tests/CreateEditTable.spec.js @@ -1,24 +1,24 @@ import "@testing-library/jest-dom/extend-expect" import { render, fireEvent } from "@testing-library/svelte" -import CreateEditTable from "../CreateEditTable.svelte"; +import CreateEditColumn from "../CreateEditColumn.svelte"; const testField = { field: {}, name: "Yeet" }; -describe("", () => { +describe("", () => { describe("New Column", () => { it("shows proper heading when rendered", () => { - const { getByText } = render(CreateEditTable, { name: 'World' }) + const { getByText } = render(CreateEditColumn, { name: 'World' }) expect(getByText('Hello World!')).toBeInTheDocument() }) }) describe("Edit Existing Column", () => { - const { getByText } = render(CreateEditTable, testField) + const { getByText } = render(CreateEditColumn, testField) }) diff --git a/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte b/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte index 44f733ca06..8230bcecb5 100644 --- a/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte +++ b/packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte @@ -4,7 +4,7 @@ import { FIELDS } from "constants/backend" import { ModelSetupNav } from "components/nav/ModelSetupNav" import ModelFieldEditor from "components/nav/ModelSetupNav/ModelFieldEditor.svelte" - import CreateEditTable from "../modals/CreateEditTable.svelte" + import CreateEditColumn from "../modals/CreateEditColumn.svelte" let anchor let dropdown @@ -18,10 +18,13 @@
-
Create Column
- +

Create Column

+ diff --git a/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte b/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte index a444ead1f1..c0862c97cb 100644 --- a/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte +++ b/packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte @@ -4,7 +4,7 @@ import { FIELDS } from "constants/backend" import { ModelSetupNav } from "components/nav/ModelSetupNav" import ModelFieldEditor from "components/nav/ModelSetupNav/ModelFieldEditor.svelte" - import CreateEditTable from "../modals/CreateEditTable.svelte" + import CreateEditColumn from "../modals/CreateEditColumn.svelte" export let field @@ -26,7 +26,13 @@ backendUiStore.actions.models.deleteField(field) } - function save() {} + function sort(direction, column) { + backendUiStore.update(state => { + state.sort = { direction, column } + return state + }) + hideEditor() + }
@@ -35,9 +41,9 @@
{#if editing} -
Edit Column
- Edit Column + {:else} @@ -50,11 +56,11 @@ Delete -
  • +
  • sort('asc', field.name)}> Sort A - Z
    • -
  • +
  • sort('desc', field.name)}> Sort Z - A
    • @@ -63,6 +69,11 @@     diff --git a/packages/builder/src/components/database/ModelDataTable/popovers/Row.svelte b/packages/builder/src/components/database/ModelDataTable/popovers/Row.svelte index 3f01147943..bd50b5215e 100644 --- a/packages/builder/src/components/database/ModelDataTable/popovers/Row.svelte +++ b/packages/builder/src/components/database/ModelDataTable/popovers/Row.svelte @@ -13,9 +13,13 @@ +

    Add New Row

     diff --git a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte deleted file mode 100644 index a1eb2b7d3b..0000000000 --- a/packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte +++ /dev/null @@ -1,91 +0,0 @@ - - -
    -
    - {#each HEADINGS as tab} - (selectedTab = tab.key)}> - {tab.title} - - {/each} -
    - -
    - {#each Object.values(blockDefinitions[selectedTab]) as blockDefinition} - addField(blockDefinition)} - title={blockDefinition.name} - icon={blockDefinition.icon} /> - {/each} -
    -
    - - diff --git a/packages/builder/src/components/nav/ModelNavigator/CreateEditTable.svelte b/packages/builder/src/components/nav/ModelNavigator/CreateEditTable.svelte new file mode 100644 index 0000000000..201d6d03c0 --- /dev/null +++ b/packages/builder/src/components/nav/ModelNavigator/CreateEditTable.svelte @@ -0,0 +1,65 @@ + + +
    + +
    + +
    +

    Create Table

    + +
    +
    +
    + +
    +
    + +
    +
    +     + + diff --git a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte b/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte deleted file mode 100644 index b43c7210a1..0000000000 --- a/packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte +++ /dev/null @@ -1,93 +0,0 @@ - - -
    -
    -

    Create New Table

    -

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

    -
    - -
    - Fields -

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

    -
    - {#each Object.values(FIELDS) as field} - addNewField(field)} /> - {/each} -
    -
    - -
    - Blocks -

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

    -
    - {#each Object.values(BLOCKS) as field} - addNewField(field)} /> - {/each} -
    -
    -
    - - diff --git a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte index 83d83487a3..34fc577b7f 100644 --- a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte +++ b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte @@ -9,6 +9,7 @@
    {title} +