MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/Budibase/budibase into britecharts/separate-components-2

This commit is contained in:
cmack 2020-08-12 10:18:47 +01:00
parent 0c9f337814 22bc26238b
commit fe70bb16d6
63 changed files with 9463 additions and 914 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.github/workflows/budibase_ci.yml vendored
View File

@ -32,4 +32,5 @@ jobs:
- run: yarn test
env:
CI: true
name: Budibase CI
name: Budibase CI
- run: yarn test:e2e:ci

2
lerna.json
View File

@ -1,5 +1,5 @@
{
"version": "0.1.13",
"version": "0.1.17",
"npmClient": "yarn",
"packages": [
"packages/*"

5
package.json
View File

@ -19,14 +19,15 @@
"build": "lerna run build",
"initialise": "lerna run initialise",
"publishdev": "lerna run publishdev",
"publishnpm": "yarn build && lerna publish",
"publishnpm": "yarn build && lerna publish --force-publish",
"clean": "lerna clean",
"dev": "node ./scripts/symlinkDev.js && lerna run --parallel --stream dev:builder",
"test": "lerna run test",
"lint": "eslint packages",
"lint:fix": "eslint --fix packages",
"format": "prettier --write \"{,!(node_modules)/**/}*.{js,jsx,svelte}\"",
"test:e2e": "lerna run cy:test"
"test:e2e": "lerna run cy:test",
"test:e2e:ci": "lerna run cy:ci"
},
"dependencies": {
"@material/icon-button": "4.0.0",

1
packages/builder/.gitignore vendored
View File

@ -2,7 +2,6 @@
/node_modules/
node_modules_win
package-lock.json
yarn.lock
release/
dist/
cypress/screenshots

7
packages/builder/cypress.json
View File

@ -1,4 +1,5 @@
{
"baseUrl": "http://localhost:4001/_builder/",
"video": false
}
"baseUrl": "http://localhost:4001/_builder/",
"video": true,
"projectId": "bmbemn"
}

3
packages/builder/cypress/fixtures/apikey.json Normal file
View File

@ -0,0 +1,3 @@
{
"budibase": "CB373643-3FC4-4902-9E31-449C0ED066B6"
}

1
packages/builder/cypress/integration/createApp.spec.js
View File

@ -1,6 +1,7 @@
context('Create an Application', () => {
beforeEach(() => {
cy.server()
cy.visit('localhost:4001/_builder')
})

9
packages/builder/cypress/integration/createComponents.spec.js
View File

@ -1,10 +1,11 @@
context('Create Components', () => {
xcontext('Create Components', () => {
before(() => {
cy.server()
cy.visit('localhost:4001/_builder')
// https://on.cypress.io/type
cy.createApp('Model App', 'Model App Description')
cy.createModel('dog', 'name', 'age')
cy.createTable('dog', 'name', 'age')
cy.addRecord('bob', '15')
})
@ -22,8 +23,8 @@ context('Create Components', () => {
})
it('change the font size of the headline', () => {
cy.contains('Typography').click()
cy.get('input[name="font-size"]')
.type('60px')
cy.get('[data-cy=font-size-prop-control]').click()
cy.contains("60px").click()
cy.contains('Design').click()
getIframeBody().contains('An Amazing headline!').should('have.css', 'font-size', '60px')

22
packages/builder/cypress/integration/createModel.spec.js
View File

@ -1,22 +0,0 @@
context('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')
})
})

70
packages/builder/cypress/integration/createTable.spec.js Normal file
View File

@ -0,0 +1,70 @@
context('Create a Table', () => {
before(() => {
cy.visit('localhost:4001/_builder')
cy.createApp('Table App', 'Table App Description')
})
it('should create a new Table', () => {
cy.createTable('dog')
// Check if Table exists
cy.get('.title').should('have.text', 'dog')
})
it('adds a new column to the table', () => {
cy.addColumn('dog', 'name', 'Plain Text')
cy.contains('name').should("be.visible")
})
it('creates a record in the table', () => {
cy.addRecord(["Rover"])
cy.contains('Rover').should("be.visible")
})
it('updates a column on the table', () => {
cy.contains("name").click()
cy.get("[data-cy='edit-column-header']").click()
cy.get("[placeholder=Name]").type("updated")
cy.get("select").select("Plain Text")
cy.contains("Save Column").click()
cy.contains('nameupdated').should('have.text', 'nameupdated ')
})
it('edits a record', () => {
cy.get("tbody .ri-more-line").click()
cy.get("[data-cy=edit-row]").click()
cy.get(".actions input").type("updatedRecord")
cy.contains("Save").click()
cy.contains('updatedRecord').should('have.text', 'updatedRecord')
})
it('deletes a record', () => {
cy.get("tbody .ri-more-line").click()
cy.get("[data-cy=delete-row]").click()
cy.get(".modal-actions").contains("Delete").click()
cy.contains('updatedRecord').should('not.exist')
})
it('deletes a column', () => {
cy.contains("name").click()
cy.get("[data-cy='delete-column-header']").click()
cy.contains('nameupdated').should('not.exist')
})
it('deletes a table', () => {
cy.contains("div", "dog").get(".ri-more-line").click()
cy.get("[data-cy=delete-table]").click()
cy.get(".modal-actions").contains("Delete").click()
cy.contains('dog').should('not.exist')
})
})

6
packages/builder/cypress/integration/createUser.spec.js
View File

@ -1,6 +1,7 @@
context('Create a User', () => {
before(() => {
cy.server()
cy.visit('localhost:4001/_builder')
// https://on.cypress.io/type
cy.createApp('User App', 'This app is used to test user creation')
@ -8,12 +9,9 @@ context('Create a User', () => {
// https://on.cypress.io/interacting-with-elements
it('should create a user', () => {
// Close Model modal that shows up after creating an app
cy.get('.close').click()
cy.createUser('bbuser', 'test', 'ADMIN')
// Check to make sure user was created!
cy.contains('bbuser').should('have.text', 'bbuser')
cy.get("input[disabled]").should('have.value', 'bbuser')
})
})

14
packages/builder/cypress/integration/createWorkflow.spec.js
View File

@ -1,6 +1,7 @@
context('Create a workflow', () => {
xcontext('Create a workflow', () => {
before(() => {
cy.server()
cy.visit('localhost:4001/_builder')
cy.createApp('Workflow Test App', 'This app is used to test that workflows do in fact work!')
@ -8,12 +9,10 @@ context('Create a workflow', () => {
// https://on.cypress.io/interacting-with-elements
it('should create a workflow', () => {
cy.createModel('dog', 'name', 'age')
cy.createUser('bbuser', 'test', 'ADMIN')
cy.createTable('dog', 'name', 'age')
cy.contains('workflow').click()
cy.get('.new-workflow-button').click()
cy.contains('Create New Workflow').click()
cy.get('input').type('Add Record')
cy.contains('Save').click()
@ -28,14 +27,13 @@ context('Create a workflow', () => {
cy.get(':nth-child(3) > .budibase__input').type('11')
// Save
cy.get('[data-cy=save-workflow-setup]').click()
cy.get('.workflow-button').click()
cy.contains('Save Workflow').click()
// Activate Workflow
cy.get('[data-cy=activate-workflow]').click()
})
it('should add record when a new record is added', () => {
xit('should add record when a new record is added', () => {
cy.contains('backend').click()
cy.addRecord('bob', '15')

3
packages/builder/cypress/integration/screens.spec.js
View File

@ -1,13 +1,14 @@
context('Screen Tests', () => {
before(() => {
cy.server()
cy.visit('localhost:4001/_builder')
cy.createApp('Conor Cy App', 'Model App Description')
cy.navigateToFrontend()
})
it('Should successful create a screen', () => {
cy.createScreen("test Screen")
cy.createScreen("test Screen", "/test")
})
it('Should rename a screen', () => {

1
packages/builder/cypress/plugins/index.js
View File

@ -19,4 +19,5 @@
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
require("cypress-terminal-report/src/installLogsPrinter")(on)
}

22
packages/builder/cypress/setup.js
View File

@ -1,17 +1,23 @@
// What this script does:
// 1. Removes the old test folder if it exists (.budibase-cypress)
// 2. Initialises using `.budibase-cypress`
// 1. Removes the old test folder if it exists (.budibase)
// 2. Initialises using `.budibase`
// 3. Runs the server using said folder
const rimraf = require("rimraf")
const { join } = require("path")
const homedir = join(require("os").homedir(), ".budibase-cypress")
const init = require("../../cli/src/commands/init/initHandler")
const run = require("../../cli/src/commands/run/runHandler")
const initialiseBudibase = require("../../server/src/utilities/initialiseBudibase")
const homedir = join(require("os").homedir(), ".budibase")
rimraf.sync(homedir)
init({ dir: homedir, clientId: "cypress-test" }).then(() => {
delete require.cache[require.resolve("../../server/src/environment")]
run({ dir: homedir })
})
process.env.BUDIBASE_API_KEY = "6BE826CB-6B30-4AEC-8777-2E90464633DE"
process.env.NODE_ENV = "cypress"
initialiseBudibase({ dir: homedir, clientId: "cypress-test" })
.then(() => {
delete require.cache[require.resolve("../../server/src/environment")]
run({ dir: homedir })
})
.catch(e => console.error(e))

107
packages/builder/cypress/support/commands.js
View File

@ -24,69 +24,89 @@
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
Cypress.Commands.add("createApp", (name, description) => {
cy.get(".banner-button")
.click()
.get('input[name="name"]')
.type(name)
.should("have.value", name)
Cypress.Commands.add("createApp", name => {
cy.contains("Create New Web App").click()
cy.get('textarea[name="description"]')
.type(description)
.should("have.value", description)
cy.get("body")
.then($body => {
if ($body.find("input[name=apiKey]").length) {
// input was found, do something else here
cy.get("input[name=apiKey]")
.type(name)
.should("have.value", name)
cy.contains("Next").click()
}
})
.then(() => {
cy.get("input[name=applicationName]")
.type(name)
.should("have.value", name)
cy.contains("Save").click()
cy.contains("Next").click()
cy.get("input[name=username]")
.click()
.type("test")
cy.get("input[name=password]")
.click()
.type("test")
cy.contains("Submit").click()
cy.contains("Create New Table", {
timeout: 10000,
}).should("be.visible")
})
})
Cypress.Commands.add("createModel", (modelName, firstField, secondField) => {
Cypress.Commands.add("createTable", tableName => {
// Enter model name
cy.get("[data-cy=Name]")
.click()
.type(modelName)
cy.contains("Create New Table").click()
cy.get("[placeholder='Table Name']").type(tableName)
// Add 'name' field
cy.get("[data-cy=add-new-model-field]").click()
cy.get("[data-cy=Name]")
.click()
.type(firstField)
cy.contains("Save").click()
cy.contains(tableName).should("be.visible")
})
// Add 'age' field
cy.get("[data-cy=add-new-model-field]").click()
Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
// Select Table
cy.contains(tableName).click()
cy.contains("Create New Column").click()
cy.get("[data-cy=Name]")
.click()
.type(secondField)
cy.get("select").select("number")
cy.contains("Save").click()
cy.contains(secondField).should("exist")
cy.get("[placeholder=Name]").type(columnName)
cy.get("select").select(type)
cy.contains("Save Column")
// Save model
cy.contains("Save").click()
})
Cypress.Commands.add("addRecord", (firstField, secondField) => {
cy.contains("Create new record").click()
cy.get("[data-cy=name-input]")
.click()
.type(firstField)
cy.get("[data-cy=age-input]")
.click()
.type(secondField)
Cypress.Commands.add("addRecord", values => {
cy.contains("Create New Row").click()
for (let i = 0; i < values.length; i++) {
cy.get("input")
.eq(i)
.type(values[i])
}
// Save
cy.contains("Save").click()
})
Cypress.Commands.add("createUser", (username, password, level) => {
Cypress.Commands.add("createUser", (username, password) => {
// Create User
cy.get(".nav-group-header > .ri-add-line").click()
cy.get(".toprightnav > .settings").click()
cy.contains("Users").click()
cy.get("[data-cy=username]").type(username)
cy.get("[data-cy=password]").type(password)
cy.get("[data-cy=accessLevel]").select(level)
cy.get("[name=Name]")
.first()
.type(username)
cy.get("[name=Password]")
.first()
.type(password)
// Save
cy.contains("Save").click()
cy.get(".create-button").click()
})
Cypress.Commands.add("addHeadlineComponent", text => {
@ -95,7 +115,8 @@ Cypress.Commands.add("addHeadlineComponent", text => {
cy.get("[data-cy=Text]").click()
cy.get("[data-cy=Headline]").click()
cy.get(".tabs > :nth-child(2)").click()
cy.get('input[type="text"]').type(text)
cy.contains("Settings").click()
cy.get('input[name="text"]').type(text)
cy.contains("Design").click()
})
Cypress.Commands.add("addButtonComponent", () => {
@ -105,9 +126,7 @@ Cypress.Commands.add("addButtonComponent", () => {
})
Cypress.Commands.add("navigateToFrontend", () => {
cy.get(".close", { timeout: 10000 }).click()
cy.contains("frontend").click()
cy.get(".close", { timeout: 10000 }).click()
})
Cypress.Commands.add("createScreen", (screenName, route) => {

1
packages/builder/cypress/support/index.js
View File

@ -19,3 +19,4 @@ import "./commands"
// Alternatively you can use CommonJS syntax:
// require('./commands')
require("cypress-terminal-report/src/installLogsCollector")()

19
packages/builder/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/builder",
"version": "0.1.13",
"version": "0.1.17",
"license": "AGPL-3.0",
"private": true,
"scripts": {
@ -13,7 +13,9 @@
"cy:setup": "node ./cypress/setup.js",
"cy:run": "cypress run",
"cy:open": "cypress open",
"cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run"
"cy:run:ci": "cypress run --browser electron --record --key f308590b-6070-41af-b970-794a3823d451",
"cy:test": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run",
"cy:ci": "start-server-and-test cy:setup http://localhost:4001/_builder cy:run:ci"
},
"jest": {
"globals": {
@ -55,23 +57,24 @@
]
},
"dependencies": {
"@budibase/bbui": "^1.18.0",
"@budibase/client": "^0.1.1",
"@budibase/bbui": "^1.23.1",
"@budibase/client": "^0.1.17",
"@budibase/colorpicker": "^1.0.1",
"@nx-js/compiler-util": "^2.0.0",
"britecharts": "^2.16.0",
"@sentry/browser": "5.19.1",
"@svelteschool/svelte-forms": "^0.7.0",
"britecharts": "^2.16.0",
"codemirror": "^5.51.0",
"d3-selection": "^1.4.1",
"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",
"lunr": "^2.3.5",
"mustache": "^4.0.1",
"posthog-js": "^1.3.1",
"posthog-js": "1.3.1",
"safe-buffer": "^5.1.2",
"shortid": "^2.2.15",
"string_decoder": "^1.2.0",
@ -93,8 +96,10 @@
"babel-jest": "^24.8.0",
"browser-sync": "^2.26.7",
"cypress": "^4.8.0",
"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",
@ -116,4 +121,4 @@
"svelte-jester": "^1.0.6"
},
"gitHead": "115189f72a850bfb52b65ec61d932531bf327072"
}
}

3
packages/builder/src/analytics.js
View File

@ -3,6 +3,7 @@ import posthog from "posthog-js"
function activate() {
Sentry.init({ dsn: process.env.SENTRY_DSN })
if (!process.env.POSTHOG_TOKEN) return
posthog.init(process.env.POSTHOG_TOKEN, {
api_host: process.env.POSTHOG_URL,
})
@ -13,7 +14,7 @@ function captureException(err) {
}
function captureEvent(event) {
if (process.env.NODE_ENV !== "production") return
if (!process.env.POSTHOG_TOKEN) return
posthog.capture(event)
}

32
packages/builder/src/builderStore/store/backend.js
View File

@ -61,10 +61,9 @@ export const getBackendUiStore = () => {
state.draftModel = cloneDeep(model)
state.selectedField = ""
state.selectedView = `all_${model._id}`
state.tabs.SETUP_PANEL = "SETUP"
return state
}),
save: async ({ model }) => {
save: async model => {
const updatedModel = cloneDeep(model)
// update any renamed schema keys to reflect their names
@ -83,20 +82,35 @@ export const getBackendUiStore = () => {
const savedModel = await response.json()
await store.actions.models.fetch()
store.actions.models.select(savedModel)
return savedModel
},
addField: field => {
delete: async model => {
await api.delete(`/api/models/${model._id}/${model._rev}`)
store.update(state => {
if (!state.draftModel.schema) {
state.draftModel.schema = {}
}
state.models = state.models.filter(
existing => existing._id !== model._id
)
state.selectedModel = state.models[0] || {}
return state
})
},
saveField: ({ originalName, field }) => {
store.update(state => {
// delete the original if renaming
delete state.draftModel.schema[originalName]
state.draftModel.schema = {
...state.draftModel.schema,
[field.name]: cloneDeep(field),
}
state.selectedField = field.name
state.tabs.NAVIGATION_PANEL = "NAVIGATE"
store.actions.models.save(state.draftModel)
return state
})
},
deleteField: field => {
store.update(state => {
delete state.draftModel.schema[field.name]
store.actions.models.save(state.draftModel)
return state
})
},

149
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View File

@ -1,38 +1,19 @@
<script>
import { onMount, getContext } from "svelte"
import { onMount } from "svelte"
import fsort from "fast-sort"
import { store, backendUiStore } from "builderStore"
import { Button } from "@budibase/bbui"
import { Button, Icon } from "@budibase/bbui"
import Select from "components/common/Select.svelte"
import ActionButton from "components/common/ActionButton.svelte"
import LinkedRecord from "./LinkedRecord.svelte"
import TablePagination from "./TablePagination.svelte"
import { DeleteRecordModal, CreateEditRecordModal } from "./modals"
import RowPopover from "./popovers/Row.svelte"
import ColumnPopover from "./popovers/Column.svelte"
import ColumnHeaderPopover from "./popovers/ColumnHeader.svelte"
import EditRowPopover from "./popovers/EditRow.svelte"
import * as api from "./api"
const { open, close } = getContext("simple-modal")
const editRecord = async row => {
open(
CreateEditRecordModal,
{
onClosed: close,
record: row,
},
{ styleContent: { padding: "0" } }
)
}
const deleteRecord = async row => {
open(
DeleteRecordModal,
{
onClosed: close,
record: row,
},
{ styleContent: { padding: "0" } }
)
}
const ITEMS_PER_PAGE = 10
// Internal headers we want to hide from the user
const INTERNAL_HEADERS = ["_id", "_rev", "modelId", "type"]
@ -58,6 +39,8 @@
currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE
)
: []
$: sort = $backendUiStore.sort
$: sorted = sort ? fsort(data)[sort.direction](sort.column) : data
$: headers = Object.keys($backendUiStore.selectedModel.schema).filter(
id => !INTERNAL_HEADERS.includes(id)
@ -85,53 +68,41 @@
<section>
<div class="table-controls">
<h2 class="title">{$backendUiStore.selectedModel.name}</h2>
<Button primary on:click={createNewRecord}>
<span class="button-inner">Create New Record</span>
</Button>
<div class="popovers">
<ColumnPopover />
{#if Object.keys($backendUiStore.selectedModel.schema).length > 0}
<RowPopover />
{/if}
</div>
</div>
<table class="uk-table">
<thead>
<tr>
<th>Edit</th>
<th class="edit-header">
<div>Edit</div>
</th>
{#each headers as header}
<th>{$backendUiStore.selectedModel.schema[header].name}</th>
<th>
<ColumnHeaderPopover
field={$backendUiStore.selectedModel.schema[header]} />
</th>
{/each}
</tr>
</thead>
<tbody>
{#if paginatedData.length === 0}
{#if sorted.length === 0}
<div class="no-data">No Data.</div>
{/if}
{#each paginatedData as row}
<tr class="hoverable">
{#each sorted as row}
<tr>
<td>
<div class="uk-inline">
<i class="ri-more-line" />
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav">
<li
on:click={() => {
editRecord(row)
}}>
<i class="ri-edit-line" />
<div class="label">Edit</div>
</li>
<li
on:click={() => {
deleteRecord(row)
}}>
<i class="ri-delete-bin-2-line" />
<div class="label">Delete</div>
</li>
</ul>
</div>
</div>
<EditRowPopover {row} />
</td>
{#each headers as header}
<td>
{#if schema[header].type === 'link'}
<LinkedRecord field={schema[header]} ids={row[header]} />
{:else}{row[header]}{/if}
{:else}{row[header] || ''}{/if}
</td>
{/each}
</tr>
@ -164,7 +135,8 @@
}
thead {
background: var(--blue-light);
height: 40px;
background: var(--grey-3);
border: 1px solid var(--grey-4);
}
@ -174,6 +146,28 @@
font-weight: 500;
font-size: 14px;
text-rendering: optimizeLegibility;
transition: 0.5s all;
vertical-align: middle;
}
.edit-header {
width: 100px;
cursor: default;
}
.edit-header:hover {
color: var(--ink);
}
th:hover {
color: var(--blue);
cursor: pointer;
}
td {
max-width: 200px;
text-overflow: ellipsis;
border: 1px solid var(--grey-4);
}
tbody tr {
@ -188,47 +182,14 @@
}
.table-controls {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 10px;
width: 100%;
}
.ri-more-line:hover,
.uk-dropdown-nav li:hover {
cursor: pointer;
.popovers {
display: flex;
}
.no-data {
padding: 20px;
}
.button-inner {
display: flex;
align-items: center;
}
li {
display: flex;
align-items: center;
border-radius: 5px;
}
i {
color: var(--grey-7);
margin-right: 8px;
font-size: 20px;
}
.label {
color: var(--grey-7);
font-size: 14px;
font-family: inter;
font-weight: 400;
margin: 12px 0px;
}
.label:hover {
color: var(--ink);
cursor: pointer;
padding: 14px;
}
</style>

40
packages/builder/src/components/database/ModelDataTable/modals/CreateDatabase.svelte
View File

@ -1,40 +0,0 @@
<script>
import { store } from "builderStore"
import Modal from "components/common/Modal.svelte"
import ActionButton from "components/common/ActionButton.svelte"
import * as api from "../api"
export let onClosed
let databaseName
async function createDatabase() {
const response = await api.createDatabase($store.appId, databaseName)
store.createDatabaseForApp(response)
onClosed()
}
</script>
<div>
<section>
Database Name
<input class="uk-input" type="text" bind:value={databaseName} />
</section>
<footer>
<ActionButton alert on:click={onClosed}>Cancel</ActionButton>
<ActionButton disabled={!databaseName} on:click={createDatabase}>
Save
</ActionButton>
</footer>
</div>
<style>
section {
padding: 30px;
}
footer {
padding: 20px;
background: var(--grey-1);
border-radius: 0.5rem;
}
</style>

146
packages/builder/src/components/database/ModelDataTable/modals/CreateEditColumn.svelte Normal file
View File

@ -0,0 +1,146 @@
<script>
import { onMount } from "svelte"
import { Input, TextArea, Button, Select } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore"
import { FIELDS } from "constants/backend"
import { notifier } from "builderStore/store/notifications"
import Dropdown from "components/common/Dropdown.svelte"
import Textbox from "components/common/Textbox.svelte"
import ButtonGroup from "components/common/ButtonGroup.svelte"
import NumberBox from "components/common/NumberBox.svelte"
import ValuesList from "components/common/ValuesList.svelte"
import ErrorsBox from "components/common/ErrorsBox.svelte"
import Checkbox from "components/common/Checkbox.svelte"
import ActionButton from "components/common/ActionButton.svelte"
import DatePicker from "components/common/DatePicker.svelte"
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
import * as api from "../api"
export let onClosed
export let field = {}
let originalName = field.name
$: required =
field.constraints &&
field.constraints.presence &&
!field.constraints.presence.allowEmpty
$: if (field.type) {
field.constraints = FIELDS[field.type.toUpperCase()].constraints
}
async function saveColumn() {
backendUiStore.update(state => {
backendUiStore.actions.models.saveField({
originalName,
field,
})
return state
})
onClosed()
}
</script>
<div class="actions">
<Input placeholder="Name" thin bind:value={field.name} />
<Select secondary thin bind:value={field.type}>
{#each Object.values(FIELDS) as field}
<option value={field.type}>{field.name}</option>
{/each}
</Select>
<div class="info">
<div class="field">
<label>Required</label>
<input
type="checkbox"
bind:checked={required}
on:change={() => (field.constraints.presence.allowEmpty = required)} />
</div>
{#if field.type === 'string'}
<NumberBox
label="Max Length"
bind:value={field.constraints.length.maximum} />
<ValuesList
label="Categories"
bind:values={field.constraints.inclusion} />
{:else if field.type === 'datetime'}
<DatePicker
label="Min Value"
bind:value={field.constraints.datetime.earliest} />
<DatePicker
label="Max Value"
bind:value={field.constraints.datetime.latest} />
{:else if field.type === 'number'}
<NumberBox
label="Min Value"
bind:value={field.constraints.numericality.greaterThanOrEqualTo} />
<NumberBox
label="Max Value"
bind:value={field.constraints.numericality.lessThanOrEqualTo} />
{:else if field.type === 'link'}
<div class="field">
<label>Link</label>
<select class="budibase__input" bind:value={field.modelId}>
<option value={''} />
{#each $backendUiStore.models as model}
{#if model._id !== $backendUiStore.draftModel._id}
<option value={model._id}>{model.name}</option>
{/if}
{/each}
</select>
</div>
{/if}
</div>
</div>
<footer>
<div class="button-margin-3">
<Button secondary on:click={onClosed}>Cancel</Button>
</div>
<div class="button-margin-4">
<Button primary on:click={saveColumn}>Save Column</Button>
</div>
</footer>
<style>
.actions {
padding: var(--spacing-l) var(--spacing-xl);
display: grid;
grid-gap: var(--spacing-xl);
}
footer {
padding: 20px 30px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
background: var(--grey-1);
border-bottom-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.field {
display: grid;
grid-template-columns: auto 20px 1fr;
align-items: center;
grid-gap: 5px;
font-size: 14px;
font-weight: 500;
margin-bottom: var(--spacing-l);
font-family: var(--font-normal);
}
.button-margin-3 {
grid-column-start: 3;
display: grid;
}
.button-margin-4 {
grid-column-start: 4;
display: grid;
}
</style>

165
packages/builder/src/components/database/ModelDataTable/modals/CreateEditModel/CreateEditModel.svelte
View File

@ -1,165 +0,0 @@
<script>
import { tick } from "svelte"
import Textbox from "components/common/Textbox.svelte"
import Button from "components/common/Button.svelte"
import Select from "components/common/Select.svelte"
import ActionButton from "components/common/ActionButton.svelte"
import getIcon from "components/common/icon"
import FieldView from "./FieldView.svelte"
import api from "builderStore/api"
import { store, backendUiStore } from "builderStore"
import { pipe } from "components/common/core"
import ErrorsBox from "components/common/ErrorsBox.svelte"
export let model = { schema: {} }
export let onClosed
let showFieldView = false
let fieldToEdit
$: modelFields = model.schema ? Object.entries(model.schema) : []
function editField() {}
function deleteField() {}
function onFinishedFieldEdit() {}
async function saveModel() {
const SAVE_MODEL_URL = `/api/models`
const response = await api.post(SAVE_MODEL_URL, model)
const newModel = await response.json()
backendUiStore.actions.models.create(newModel)
onClosed()
}
</script>
<div class="heading">
{#if !showFieldView}
<i class="ri-list-settings-line button--toggled" />
<h3 class="budibase__title--3">Create / Edit Table</h3>
{:else}
<i class="ri-file-list-line button--toggled" />
<h3 class="budibase__title--3">Create / Edit Field</h3>
{/if}
</div>
{#if !showFieldView}
<div class="padding">
{#if $store.errors && $store.errors.length > 0}
<ErrorsBox errors={$store.errors} />
{/if}
<div class="textbox">
<Textbox label="Name" bind:text={model.name} />
</div>
<div class="table-controls">
<span class="label">Fields</span>
<div
data-cy="add-new-model-field"
class="hoverable new-field"
on:click={() => (showFieldView = true)}>
Add new field
</div>
</div>
<table class="uk-table fields-table budibase__table">
<thead>
<tr>
<th>Edit</th>
<th>Name</th>
<th>Type</th>
<th />
</tr>
</thead>
<tbody>
{#each modelFields as [key, meta]}
<tr>
<td>
<i class="ri-more-line" on:click={() => editField(meta)} />
</td>
<td>
<div>{key}</div>
</td>
<td>{meta.type}</td>
<td>
<i
class="ri-delete-bin-6-line hoverable"
on:click={() => deleteField(meta)} />
</td>
</tr>
{/each}
</tbody>
</table>
<footer>
<ActionButton color="secondary" on:click={saveModel}>Save</ActionButton>
</footer>
</div>
{:else}
<FieldView
field={fieldToEdit}
onFinished={onFinishedFieldEdit}
schema={model.schema}
goBack={() => (showFieldView = false)} />
{/if}
<style>
.padding {
padding-top: 40px;
}
.label {
font-size: 14px;
font-weight: 500;
}
.textbox {
margin: 0px 40px 0px 40px;
font-size: 14px;
font-weight: 500;
}
.new-field {
font-size: 16px;
font-weight: bold;
color: var(--blue);
}
.fields-table {
margin: 8px 40px 0px 40px;
border-collapse: collapse;
width: 88%;
}
tbody > tr:hover {
background-color: var(--grey-1);
}
.table-controls {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0px 40px;
}
.ri-more-line:hover {
cursor: pointer;
}
.heading {
padding: 40px 40px 0 40px;
display: flex;
align-items: center;
}
h3 {
margin: 0 0 0 10px;
color: var(--ink);
}
footer {
background-color: var(--grey-1);
margin-top: 40px;
padding: 20px 40px 20px 40px;
display: flex;
justify-content: flex-end;
}
</style>

41
packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
View File

@ -20,10 +20,6 @@
? Object.entries($backendUiStore.selectedModel.schema)
: []
function closed() {
onClosed()
}
const isSelect = meta =>
meta.type === "string" &&
meta.constraints &&
@ -68,10 +64,6 @@
</script>
<div class="actions">
<header>
<i class="ri-file-user-fill" />
<h4>Create / Edit Record</h4>
</header>
<ErrorsBox {errors} />
<form on:submit|preventDefault class="uk-form-stacked">
{#each modelSchema as [key, meta]}
@ -97,42 +89,13 @@
<Button secondary on:click={onClosed}>Cancel</Button>
</div>
<div class="button-margin-4">
<Button blue on:click={saveRecord}>Save</Button>
<Button primary on:click={saveRecord}>Save</Button>
</div>
</footer>
<style>
header {
margin-bottom: 40px;
display: grid;
grid-gap: 20px;
grid-template-columns: 40px 1fr;
align-items: center;
}
i {
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--blue-light);
color: var(--grey-7);
font-size: 20px;
border-radius: 5px;
}
h4 {
display: inline-block;
font-size: 24px;
font-weight: 600;
font-family: sans-serif;
color: var(--ink);
margin: 0;
}
.actions {
padding: 30px;
padding: var(--spacing-l) var(--spacing-xl);
}
footer {

64
packages/builder/src/components/database/ModelDataTable/modals/DeleteTable.svelte Normal file
View File

@ -0,0 +1,64 @@
<script>
import ActionButton from "components/common/ActionButton.svelte"
import { notifier } from "builderStore/store/notifications"
import { store, backendUiStore } from "builderStore"
import * as api from "../api"
export let table
export let onClosed
function deleteTable() {
backendUiStore.actions.models.delete(table)
}
</script>
<section>
<div class="content">
<heading>
<i class="ri-information-line alert" />
<h4 class="budibase__title--4">Delete Table</h4>
</heading>
<p>
Are you sure you want to delete this table? All of your data will be
permanently removed. This action cannot be undone.
</p>
</div>
<div class="modal-actions">
<ActionButton on:click={onClosed}>Cancel</ActionButton>
<ActionButton
alert
on:click={async () => {
await backendUiStore.actions.models.delete(table)
notifier.danger('Table deleted')
onClosed()
}}>
Delete
</ActionButton>
</div>
</section>
<style>
.alert {
color: rgba(255, 0, 31, 1);
background: var(--grey-1);
padding: 5px;
}
.modal-actions {
padding: 10px;
background: var(--grey-1);
border-top: 1px solid #ccc;
}
heading {
display: flex;
align-items: center;
}
.content {
padding: 30px;
}
h4 {
margin: 0 0 0 10px;
}
</style>

38
packages/builder/src/components/database/ModelDataTable/modals/RecordFieldControl.svelte
View File

@ -1,18 +1,13 @@
<script>
import { Input, Select } from "@budibase/bbui"
export let type = "text"
export let value = ""
export let label
export let errors = []
export let options = []
let checked = type === "checkbox" ? value : false
const determineClassName = type => {
if (type === "checkbox") return "uk-checkbox"
if (type === "select") return "uk-select"
return "uk-input"
}
const handleInput = event => {
if (event.target.type === "checkbox") {
value = event.target.checked
@ -28,24 +23,21 @@
}
</script>
<label>{label}</label>
{#if type === 'select'}
<select
data-cy="{label}-select"
class={determineClassName(type)}
bind:value
class:uk-form-danger={errors.length > 0}>
<Select thin secondary data-cy="{label}-select" bind:value>
<option />
{#each options as opt}
<option value={opt}>{opt}</option>
{/each}
</select>
</Select>
{:else}
<input
{#if type === 'checkbox'}
<label>{label}</label>
{/if}
<Input
thin
placeholder={label}
data-cy="{label}-input"
class={determineClassName(type)}
class:uk-form-danger={errors.length > 0}
{checked}
{type}
{value}
@ -55,13 +47,9 @@
<style>
label {
display: block;
font-size: 18px;
font-weight: 500;
margin-bottom: 12px;
}
input {
color: var(--dark-grey);
font-size: var(--font-size-s);
float: left;
margin-right: 8px;
}
</style>

1
packages/builder/src/components/database/ModelDataTable/modals/index.js
View File

@ -1,5 +1,4 @@
export { default as DeleteRecordModal } from "./DeleteRecord.svelte"
export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte"
export { default as CreateEditViewModal } from "./CreateEditView.svelte"
export { default as CreateDatabaseModal } from "./CreateDatabase.svelte"
export { default as CreateUserModal } from "./CreateUser.svelte"

31
packages/builder/src/components/database/ModelDataTable/popovers/Column.svelte Normal file
View File

@ -0,0 +1,31 @@
<script>
import { backendUiStore } from "builderStore"
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
import { FIELDS } from "constants/backend"
import { ModelSetupNav } from "components/nav/ModelSetupNav"
import ModelFieldEditor from "components/nav/ModelSetupNav/ModelFieldEditor.svelte"
import CreateEditColumn from "../modals/CreateEditColumn.svelte"
let anchor
let dropdown
let fieldName
</script>
<div bind:this={anchor}>
<Button text small on:click={dropdown.show}>
<Icon name="addcolumn" />
Create New Column
</Button>
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<h5>Create Column</h5>
<CreateEditColumn onClosed={dropdown.hide} />
</DropdownMenu>
<style>
h5 {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
margin: 0;
font-weight: 500;
}
</style>

107
packages/builder/src/components/database/ModelDataTable/popovers/ColumnHeader.svelte Normal file
View File

@ -0,0 +1,107 @@
<script>
import { backendUiStore } from "builderStore"
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
import { FIELDS } from "constants/backend"
import { ModelSetupNav } from "components/nav/ModelSetupNav"
import ModelFieldEditor from "components/nav/ModelSetupNav/ModelFieldEditor.svelte"
import CreateEditColumn from "../modals/CreateEditColumn.svelte"
export let field
let anchor
let dropdown
let editing
$: sortColumn = $backendUiStore.sort && $backendUiStore.sort.column
$: sortDirection = $backendUiStore.sort && $backendUiStore.sort.direction
function showEditor() {
editing = true
}
function hideEditor() {
dropdown.hide()
editing = false
}
function deleteField() {
backendUiStore.actions.models.deleteField(field)
}
function sort(direction, column) {
backendUiStore.update(state => {
state.sort = { direction, column }
return state
})
hideEditor()
}
</script>
<div bind:this={anchor} on:click={dropdown.show}>
{field.name}
<Icon name="arrowdown" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
{#if editing}
<h5>Edit Column</h5>
<CreateEditColumn onClosed={hideEditor} {field} />
{:else}
<ul>
<li data-cy="edit-column-header" on:click={showEditor}>
<Icon name="edit" />
Edit
</li>
<li data-cy="delete-column-header" on:click={deleteField}>
<Icon name="delete" />
Delete
</li>
{#if sortDirection === 'desc' || sortColumn !== field.name}
<li on:click={() => sort('asc', field.name)}>
<Icon name="sortascending" />
Sort A - Z
</li>
{/if}
{#if sortDirection === 'asc' || sortColumn !== field.name}
<li on:click={() => sort('desc', field.name)}>
<Icon name="sortdescending" />
Sort Z - A
</li>
{/if}
</ul>
{/if}
</DropdownMenu>
<style>
h5 {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
margin: 0;
font-weight: 500;
}
ul {
list-style: none;
padding-left: 0;
margin: 0;
padding: var(--spacing-s) 0;
}
li {
display: flex;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0px;
align-items: center;
cursor: pointer;
}
li:hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
</style>

97
packages/builder/src/components/database/ModelDataTable/popovers/EditRow.svelte Normal file
View File

@ -0,0 +1,97 @@
<script>
import { getContext } from "svelte"
import { backendUiStore } from "builderStore"
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
import { FIELDS } from "constants/backend"
import CreateEditRecord from "../modals/CreateEditRecord.svelte"
import DeleteRecordModal from "../modals/DeleteRecord.svelte"
const { open, close } = getContext("simple-modal")
export let row
let anchor
let dropdown
let editing
function showEditor() {
editing = true
}
function hideEditor() {
dropdown.hide()
editing = false
close()
}
const deleteRow = () => {
open(
DeleteRecordModal,
{
onClosed: hideEditor,
record: row,
},
{ styleContent: { padding: "0" } }
)
}
</script>
<div bind:this={anchor} on:click={dropdown.show}>
<i class="ri-more-line" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
{#if editing}
<h5>Edit Row</h5>
<CreateEditRecord onClosed={hideEditor} record={row} />
{:else}
<ul>
<li data-cy="edit-row" on:click={showEditor}>
<Icon name="edit" />
Edit
</li>
<li data-cy="delete-row" on:click={deleteRow}>
<Icon name="delete" />
Delete
</li>
</ul>
{/if}
</DropdownMenu>
<style>
.ri-more-line:hover {
cursor: pointer;
}
h5 {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
margin: 0;
font-weight: 500;
}
ul {
list-style: none;
padding-left: 0;
margin: 0;
padding: var(--spacing-s) 0;
}
li {
display: flex;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0px;
align-items: center;
cursor: pointer;
}
li:hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
</style>

26
packages/builder/src/components/database/ModelDataTable/popovers/Row.svelte Normal file
View File

@ -0,0 +1,26 @@
<script>
import { DropdownMenu, Button, Icon } from "@budibase/bbui"
import CreateEditRecord from "../modals/CreateEditRecord.svelte"
let anchor
let dropdown
</script>
<div bind:this={anchor}>
<Button text small on:click={dropdown.show}>
<Icon name="addrow" />
Create New Row
</Button>
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<h5>Add New Row</h5>
<CreateEditRecord onClosed={dropdown.hide} />
</DropdownMenu>
<style>
h5 {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
margin: 0;
font-weight: 500;
}
</style>

0
packages/builder/src/components/database/ModelDataTable/popovers/View.svelte Normal file
View File

91
packages/builder/src/components/nav/ModelNavigator/BlockNavigator.svelte
View File

@ -1,91 +0,0 @@
<script>
import * as blockDefinitions from "constants/backend"
import { backendUiStore } from "builderStore"
import Block from "components/common/Block.svelte"
const HEADINGS = [
{
title: "Fields",
key: "FIELDS",
},
{
title: "Blocks",
key: "BLOCKS",
},
]
let selectedTab = "FIELDS"
function addField(blockDefinition) {
backendUiStore.actions.models.addField(blockDefinition)
backendUiStore.actions.models.fetch()
}
</script>
<section>
<header>
{#each HEADINGS as tab}
<span
class:selected={selectedTab === tab.key}
on:click={() => (selectedTab = tab.key)}>
{tab.title}
</span>
{/each}
</header>
<div class="block-grid">
{#each Object.values(blockDefinitions[selectedTab]) as blockDefinition}
<Block
on:click={() => addField(blockDefinition)}
title={blockDefinition.name}
icon={blockDefinition.icon} />
{/each}
</div>
</section>
<style>
header {
margin-top: 20px;
margin-bottom: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
span {
cursor: pointer;
display: grid;
justify-content: center;
align-content: center;
padding: 0px 16px;
height: 36px;
text-align: center;
background: #ffffff;
color: var(--grey-7);
border-radius: 5px;
font-family: inter;
font-size: 14px;
font-weight: 400;
transition: all 0.3s;
text-rendering: optimizeLegibility;
border: none !important;
transition: 0.2s;
outline: none;
}
span:hover {
color: var(--ink);
cursor: pointer;
}
.selected {
background: var(--grey-3);
color: var(--ink);
}
.block-grid {
margin-top: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
</style>

76
packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte Normal file
View File

@ -0,0 +1,76 @@
<script>
import { goto } from "@sveltech/routify"
import { backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
export let table
let anchor
let dropdown
let name
async function saveTable() {
const model = await backendUiStore.actions.models.save({
name,
schema: {},
})
notifier.success(`Table ${name} created successfully.`)
$goto(`./model/${model._id}`)
dropdown.hide()
}
</script>
<div bind:this={anchor}>
<Button primary wide on:click={dropdown.show}>Create New Table</Button>
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<div class="container">
<h5>Create Table</h5>
<Input
data-cy="table-name-input"
placeholder="Table Name"
thin
bind:value={name} />
</div>
<footer>
<div class="button-margin-3">
<Button secondary on:click={dropdown.hide}>Cancel</Button>
</div>
<div class="button-margin-4">
<Button primary on:click={saveTable}>Save</Button>
</div>
</footer>
</DropdownMenu>
<style>
h5 {
margin-bottom: var(--spacing-l);
font-weight: 500;
}
.container {
padding: var(--spacing-l);
margin: 0;
}
footer {
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
background: var(--grey-1);
border-bottom-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.button-margin-3 {
grid-column-start: 3;
display: grid;
}
.button-margin-4 {
grid-column-start: 4;
display: grid;
}
</style>

137
packages/builder/src/components/nav/ModelNavigator/EditTable.svelte Normal file
View File

@ -0,0 +1,137 @@
<script>
import { getContext } from "svelte"
import { backendUiStore } from "builderStore"
import { DropdownMenu, Button, Icon, Input, Select } from "@budibase/bbui"
import { FIELDS } from "constants/backend"
import DeleteTableModal from "components/database/ModelDataTable/modals/DeleteTable.svelte"
const { open, close } = getContext("simple-modal")
export let table
let anchor
let dropdown
let editing
function showEditor() {
editing = true
}
function hideEditor() {
dropdown.hide()
editing = false
close()
}
const deleteTable = () => {
open(
DeleteTableModal,
{
onClosed: close,
table,
},
{ styleContent: { padding: "0" } }
)
}
function save() {
backendUiStore.actions.models.save(table)
hideEditor()
}
</script>
<div bind:this={anchor} on:click={dropdown.show}>
<i class="ri-more-line" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
{#if editing}
<h5>Edit Table</h5>
<div class="container">
<Input placeholder="Table Name" thin bind:value={table.name} />
</div>
<footer>
<div class="button-margin-3">
<Button secondary on:click={hideEditor}>Cancel</Button>
</div>
<div class="button-margin-4">
<Button primary on:click={save}>Save</Button>
</div>
</footer>
{:else}
<ul>
<li on:click={showEditor}>
<Icon name="edit" />
Edit
</li>
<li data-cy="delete-table" on:click={deleteTable}>
<Icon name="delete" />
Delete
</li>
</ul>
{/if}
</DropdownMenu>
<style>
h5 {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
margin: 0;
font-weight: 500;
}
.container {
padding: var(--spacing-xl);
}
ul {
padding: var(--spacing-xl) 0 0 var(--spacing-xl);
list-style: none;
padding-left: 0;
margin: 0;
padding: var(--spacing-s) 0;
}
li {
display: flex;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0px;
align-items: center;
cursor: pointer;
}
li:hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
footer {
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 20px;
background: var(--grey-1);
border-bottom-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.button-margin-1 {
grid-column-start: 1;
display: grid;
}
.button-margin-3 {
grid-column-start: 3;
display: grid;
}
.button-margin-4 {
grid-column-start: 4;
display: grid;
}
</style>

107
packages/builder/src/components/nav/ModelNavigator/EmptyModel.svelte
View File

@ -1,107 +0,0 @@
<script>
import { backendUiStore } from "builderStore"
import { uuid } from "builderStore/uuid"
import { fade } from "svelte/transition"
import { notifier } from "builderStore/store/notifications"
import { FIELDS, BLOCKS, MODELS } from "constants/backend"
import Block from "components/common/Block.svelte"
function addNewField(field) {
backendUiStore.actions.models.addField(field)
}
function createModel(model) {
const { schema, ...rest } = $backendUiStore.selectedModel
backendUiStore.actions.models.save({
model: {
...model,
...rest,
},
})
notifier.success(`${model.name} table created.`)
}
</script>
<section transition:fade>
<header>
<h2>Create New Table</h2>
<p>Before you can view your table, you need to set it up.</p>
</header>
<div class="block-row">
<span class="block-row-title">Fields</span>
<p>Blocks are pre-made fields and help you build your table quicker.</p>
<div class="blocks">
{#each Object.values(FIELDS) as field}
<Block
primary
title={field.name}
icon={field.icon}
on:click={() => addNewField(field)} />
{/each}
</div>
</div>
<div class="block-row">
<span class="block-row-title">Blocks</span>
<p>Blocks are pre-made fields and help you build your table quicker.</p>
<div class="blocks">
{#each Object.values(BLOCKS) as field}
<Block
secondary
title={field.name}
icon={field.icon}
on:click={() => addNewField(field)} />
{/each}
</div>
</div>
<div class="block-row">
<span class="block-row-title">Tables</span>
<p>Blocks are pre-made fields and help you build your table quicker.</p>
<div class="blocks">
{#each Object.values(MODELS) as model}
<Block
tertiary
title={model.name}
icon={model.icon}
on:click={() => createModel(model)} />
{/each}
</div>
</div>
</section>
<style>
section {
height: 100vh;
}
h2 {
font-size: 20px;
font-weight: bold;
margin: 0;
}
.block-row-title {
font-weight: 500;
font-size: 16px;
}
p {
margin-top: 8px;
margin-bottom: 20px;
font-size: 14px;
}
.block-row {
margin-top: 40px;
}
.block-row .blocks {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 110px;
grid-gap: 20px;
}
</style>

4
packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
View File

@ -9,6 +9,7 @@
<div class:selected on:click class={className}>
<i class:indented class={icon} />
<span>{title}</span>
<slot />
</div>
<style>
@ -20,7 +21,8 @@
padding: 0 10px 0 10px;
height: 36px;
border-radius: 5px;
display: flex;
display: grid;
grid-template-columns: 30px 1fr 20px;
align-items: center;
transition: 0.3s background-color;
color: var(--ink);

72
packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
View File

@ -4,23 +4,13 @@
import { Switcher } from "@budibase/bbui"
import { goto } from "@sveltech/routify"
import { store, backendUiStore } from "builderStore"
import BlockNavigator from "./BlockNavigator.svelte"
import ListItem from "./ListItem.svelte"
import { Button } from "@budibase/bbui"
import CreateTablePopover from "./CreateTable.svelte"
import EditTablePopover from "./EditTable.svelte"
const { open, close } = getContext("simple-modal")
let HEADINGS = [
{
title: "Navigate",
key: "NAVIGATE",
},
{
title: "Add",
key: "ADD",
},
]
$: selectedTab = $backendUiStore.tabs.NAVIGATION_PANEL
function selectModel(model, fieldId) {
@ -33,59 +23,35 @@
})
}
}
function setupForNewModel() {
backendUiStore.update(state => {
state.selectedModel = {}
state.draftModel = { schema: {} }
state.tabs.SETUP_PANEL = "SETUP"
return state
})
}
</script>
<div class="items-root">
{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
<div class="hierarchy">
<div class="components-list-container">
<Switcher
headings={HEADINGS}
bind:value={$backendUiStore.tabs.NAVIGATION_PANEL}>
{#if selectedTab === 'NAVIGATE'}
<Button purple wide on:click={setupForNewModel}>
Create New Table
</Button>
<div class="hierarchy-items-container">
{#each $backendUiStore.models as model}
<ListItem
selected={!$backendUiStore.selectedField && model._id === $backendUiStore.selectedModel._id}
title={model.name}
icon="ri-table-fill"
on:click={() => selectModel(model)} />
{#if model._id === $backendUiStore.selectedModel._id}
<div in:slide>
{#each Object.keys(model.schema) as fieldName}
<ListItem
selected={model._id === $backendUiStore.selectedModel._id && fieldName === $backendUiStore.selectedField}
indented
icon="ri-layout-column-line"
title={model.schema[fieldName].name}
on:click={() => selectModel(model, fieldName)} />
{/each}
</div>
{/if}
{/each}
</div>
{:else if selectedTab === 'ADD'}
<BlockNavigator />
{/if}
</Switcher>
<h4>Tables</h4>
<CreateTablePopover />
<div class="hierarchy-items-container">
{#each $backendUiStore.models as model}
<ListItem
selected={!$backendUiStore.selectedField && model._id === $backendUiStore.selectedModel._id}
title={model.name}
icon="ri-table-fill"
on:click={() => selectModel(model)}>
<EditTablePopover table={model} />
</ListItem>
{/each}
</div>
</div>
</div>
{/if}
</div>
<style>
h4 {
font-weight: 500;
}
.items-root {
display: flex;
flex-direction: column;

9
packages/builder/src/components/nav/ModelSetupNav/ModelSetupNav.svelte
View File

@ -35,7 +35,7 @@
if (field) {
const name = model.schema[field].name
delete model.schema[field]
backendUiStore.actions.models.save({ model })
backendUiStore.actions.models.save(model)
notifier.danger(`Field ${name} deleted.`)
return
}
@ -81,9 +81,7 @@
return
}
await backendUiStore.actions.models.save({
model: $backendUiStore.draftModel,
})
await backendUiStore.actions.models.save($backendUiStore.draftModel)
notifier.success(
"Success! Your changes have been saved. Please continue on with your greatness."
)
@ -99,6 +97,7 @@
<div class="titled-input">
<header>Name</header>
<input
data-cy="table-name-input"
type="text"
class="budibase__input"
bind:value={$backendUiStore.draftModel.name} />
@ -130,7 +129,7 @@
}
footer {
width: 100%;
width: 260px;
position: fixed;
bottom: 20px;
}

2
packages/builder/src/components/settings/Link.svelte
View File

@ -24,7 +24,7 @@
}
</script>
<span class="topnavitemright" on:click={showSettingsModal}>
<span class="topnavitemright settings" on:click={showSettingsModal}>
<SettingsIcon />
</span>

8
packages/builder/src/components/userInterface/DesignView.svelte
View File

@ -14,14 +14,6 @@
const getProperties = name => panelDefinition[name]
onMount(() => {
// if(propGroup) {
// propGroup.addEventListener("scroll", function(e){
// console.log("I SCROLLED", e.target.scrollTop)
// })
// }
})
function onChange(category) {
selectedCategory = category
}

2
packages/builder/src/components/userInterface/PropertyControl.svelte
View File

@ -33,7 +33,7 @@
<div class="property-control">
<div class="label">{label}</div>
<div class="control">
<div data-cy={`${key}-prop-control`} class="control">
<svelte:component
this={control}
{...handlevalueKey(value)}

185
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -306,7 +306,7 @@ export default {
label: "destinationUrl",
key: "destinationUrl",
control: Input,
placeholder: "/table/_id",
placeholder: "/table/{{context._id}}",
},
],
},
@ -429,38 +429,6 @@ export default {
},
],
},
{
name: "Data Chart",
_component: "@budibase/standard-components/datachart",
description: "Shiny chart",
icon: "ri-bar-chart-line",
properties: {
design: { ...all },
settings: [
{ label: "Table", key: "model", control: ModelSelect },
{
label: "Chart Type",
key: "type",
control: OptionSelect,
options: [
"column2d",
"column3d",
"line",
"area2d",
"bar2d",
"bar3d",
"pie2d",
"pie3d",
"doughnut2d",
"doughnut3d",
"pareto2d",
"pareto3d",
],
},
],
},
children: [],
},
{
name: "Chart",
description: "Shiny chart",
@ -471,26 +439,7 @@ export default {
_component: "@budibase/standard-components/donut",
description: "Donut chart",
icon: "ri-donut-chart-line",
presetProps: {
data: [
{
quantity: 1,
percentage: 50,
name: "glittering",
id: 1,
},
{
quantity: 1,
percentage: 50,
name: "luminous",
id: 2,
},
],
},
properties: {
design: {
...all,
},
settings: [
{
label: "Table",
@ -504,14 +453,14 @@ export default {
control: Checkbox,
},
{
label: "Keep Last Hover",
key: "hasLastHoverSliceHighlighted",
label: "Hover Highlight",
key: "hasHoverAnimation",
valueKey: "checked",
control: Checkbox,
},
{
label: "Hover Highlight",
key: "hasHoverAnimation",
label: "Keep Last Hover",
key: "hasLastHoverSliceHighlighted",
valueKey: "checked",
control: Checkbox,
},
@ -532,6 +481,16 @@ export default {
"yellow",
],
},
{
label: "Name Field",
key: "nameKey",
control: Input,
},
{
label: "Value Field",
key: "valueKey",
control: Input,
},
{
label: "External Radius",
key: "externalRadius",
@ -564,12 +523,8 @@ export default {
key: "legendWidth",
control: Input,
},
{
label: "Legend Height",
key: "legendHeight",
control: Input,
},
],
],
}
},
},
{
@ -1290,6 +1245,15 @@ export default {
_component: "@budibase/standard-components/groupedbar",
description: "Groupedbar chart",
icon: "ri-bar-chart-fill",
presetProps: {
data: [
{
name: "2011-01",
group: "Direct",
value: 0,
},
],
},
properties: {
settings: [
{
@ -1329,6 +1293,11 @@ export default {
key: "aspectRatio",
control: Input,
},
{
label: "Height",
key: "height",
control: Input,
},
{
label: "Grid",
key: "grid",
@ -1345,11 +1314,6 @@ export default {
key: "nameLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
},
{
label: "Y Ticks",
key: "yTicks",
@ -1580,6 +1544,58 @@ export default {
_component: "@budibase/standard-components/line",
description: "Line chart",
icon: "ri-bar-chart-fill",
presetProps: {
data: {
data: [
{
topicName: "San Francisco",
name: 1,
date: "2020-01-16",
value: 1,
},
{
topicName: "San Fran",
name: 2,
date: "2020-01-17",
value: 2,
},
{
topicName: "LA",
name: 3,
date: "2020-01-18",
value: 3,
},
{
topicName: "Toronto",
name: 4,
date: "2020-01-19",
value: 7,
},
{
topicName: "Van",
name: 4,
date: "2020-01-20",
value: 12,
},
{
topicName: "Dundee",
name: 4,
date: "2020-01-21",
value: 16,
},
{
topicName: "Dublin",
name: 4,
date: "2020-01-22",
value: 31,
},
],
},
aspectRatio: 0.5,
grid: "horizontal",
dateLabel: "fullDate",
shouldShowAllDataPoints: true,
},
properties: {
settings: [
{
@ -1587,6 +1603,16 @@ export default {
key: "model",
control: ModelSelect,
},
{
label: "X Axis Combo",
key: "axisTimeCombinations",
control: Input,
},
{
label: "X Axis Combo",
key: "axisTimeCombinations",
control: Input,
},
{
label: "Colors",
key: "color",
@ -1626,16 +1652,6 @@ export default {
key: "dateLabel",
control: Input,
},
{
label: "Topic Label",
key: "topicLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
},
{
label: "Width",
key: "width",
@ -1669,6 +1685,21 @@ export default {
"catmullRom",
],
},
{
label: "Locale",
key: "locale",
control: Input,
},
{
label: "Topic Label",
key: "topicLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
},
{
label: "X Axis Label",
key: "xAxisLabel",

53
packages/builder/src/constants/backend/index.js
View File

@ -1,5 +1,5 @@
export const FIELDS = {
PLAIN_TEXT: {
STRING: {
name: "Plain Text",
icon: "ri-text",
type: "string",
@ -65,15 +65,15 @@ export const FIELDS = {
// presence: { allowEmpty: true },
// },
// },
LINKED_FIELDS: {
name: "Linked Fields",
icon: "ri-link",
type: "link",
modelId: null,
constraints: {
type: "array",
},
},
// LINKED_FIELDS: {
// name: "Linked Fields",
// icon: "ri-link",
// type: "link",
// modelId: null,
// constraints: {
// type: "array",
// },
// },
}
export const BLOCKS = {
@ -195,36 +195,3 @@ export const BLOCKS = {
// },
// },
}
export const MODELS = {
CONTACTS: {
icon: "ri-contacts-book-line",
name: "Contacts",
schema: {
Name: BLOCKS.NAME,
"Phone Number": BLOCKS.PHONE_NUMBER,
},
},
RECIPES: {
icon: "ri-link",
name: "Recipes",
schema: {
Name: BLOCKS.NAME,
Cuisine: {
...FIELDS.PLAIN_TEXT,
name: "Cuisine",
},
},
},
SPORTS_TEAM: {
icon: "ri-basketball-line",
name: "Sports Team",
schema: {
Name: BLOCKS.NAME,
Championships: {
...FIELDS.NUMBER,
name: "Championships",
},
},
},
}

5
packages/builder/src/pages/[application]/backend/_layout.svelte
View File

@ -14,16 +14,13 @@
<div class="content">
<slot />
</div>
<div class="nav">
<ModelSetupNav />
</div>
</div>
<style>
.root {
height: 100%;
display: grid;
grid-template-columns: 300px minmax(0, 1fr) 300px;
grid-template-columns: 300px minmax(0, 1fr);
background: var(--grey-1);
line-height: 1;
}

11
packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
View File

@ -1,7 +1,6 @@
<script>
import { getContext } from "svelte"
import { Button } from "@budibase/bbui"
import EmptyModel from "components/nav/ModelNavigator/EmptyModel.svelte"
import ModelDataTable from "components/database/ModelDataTable"
import { backendUiStore } from "builderStore"
import ActionButton from "components/common/ActionButton.svelte"
@ -11,16 +10,6 @@
const { open, close } = getContext("simple-modal")
$: selectedModel = $backendUiStore.selectedModel
const createNewRecord = () => {
open(
CreateEditRecordModal,
{
onClosed: close,
},
{ styleContent: { padding: "0" } }
)
}
</script>
{#if $backendUiStore.selectedDatabase._id && selectedModel.name}

8311
packages/builder/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

6
packages/cli/package.json
View File

@ -1,6 +1,6 @@
{
"name": "budibase",
"version": "0.1.13",
"version": "0.1.17",
"description": "Budibase CLI",
"repository": "https://github.com/Budibase/Budibase",
"homepage": "https://www.budibase.com",
@ -17,7 +17,7 @@
"author": "Budibase",
"license": "AGPL-3.0-or-later",
"dependencies": {
"@budibase/server": "^0.1.13",
"@budibase/server": "^0.1.17",
"@inquirer/password": "^0.0.6-alpha.0",
"chalk": "^2.4.2",
"dotenv": "^8.2.0",
@ -29,5 +29,5 @@
"uuid": "^7.0.3",
"yargs": "^14.2.0"
},
"gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8"
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691"
}

6
packages/cli/src/commands/run/runHandler.js
View File

@ -8,8 +8,6 @@ module.exports = async ({ dir }) => {
// dont make this a variable or top level require
// it will cause environment module to be loaded prematurely
return require("@budibase/server/src/app")().then(server => {
server.on("close", () => console.log("Server Closed"))
console.log(`Budibase running on ${JSON.stringify(server.address())}`)
})
const server = require("@budibase/server/src/app")
server.on("close", () => console.log("Server Closed"))
}

2
packages/client/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/client",
"version": "0.1.1",
"version": "0.1.17",
"license": "MPL-2.0",
"main": "dist/budibase-client.js",
"module": "dist/budibase-client.esm.mjs",

8
packages/materialdesign-components/package.json
View File

@ -12,8 +12,8 @@
"dev:builder": "rollup -cw"
},
"devDependencies": {
"@budibase/client": "^0.1.1",
"@budibase/standard-components": "^0.1.13",
"@budibase/client": "^0.1.17",
"@budibase/standard-components": "^0.1.17",
"@material/button": "^4.0.0",
"@material/checkbox": "^4.0.0",
"@material/data-table": "4.0.0",
@ -50,9 +50,9 @@
"keywords": [
"svelte"
],
"version": "0.1.13",
"version": "0.1.17",
"license": "MIT",
"gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8",
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
"dependencies": {
"@material/card": "4.0.0"
}

6
packages/server/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@budibase/server",
"version": "0.1.13",
"version": "0.1.17",
"description": "Budibase Web Server",
"main": "src/electron.js",
"repository": {
@ -42,7 +42,7 @@
"author": "Michael Shanks",
"license": "AGPL-3.0-or-later",
"dependencies": {
"@budibase/client": "^0.1.1",
"@budibase/client": "^0.1.17",
"@koa/router": "^8.0.0",
"@sendgrid/mail": "^7.1.1",
"@sentry/node": "^5.19.2",
@ -97,5 +97,5 @@
"./scripts/jestSetup.js"
]
},
"gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8"
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691"
}

2
packages/server/src/api/controllers/application.js
View File

@ -207,7 +207,7 @@ const getClientId = ctx => {
env.CLIENT_ID
if (!clientId) {
ctx.throw(400, "ClientId not suplied")
ctx.throw(400, "ClientId not supplied")
}
return clientId
}

4
packages/server/src/api/controllers/record.js
View File

@ -68,7 +68,9 @@ exports.save = async function(ctx) {
ctx.eventEmitter &&
ctx.eventEmitter.emit(`record:save`, {
record,
args: {
record,
},
instanceId: ctx.user.instanceId,
})
ctx.body = record

6
packages/server/src/api/controllers/workflow/actions/SAVE_RECORD.js
View File

@ -1,17 +1,17 @@
const recordController = require("../../record")
module.exports = async function saveRecord({ args, instanceId }) {
module.exports = async function saveRecord({ args, context }) {
const { model, ...record } = args.record
const ctx = {
params: {
instanceId,
instanceId: context.instanceId,
modelId: model._id,
},
request: {
body: record,
},
user: { instanceId },
user: { instanceId: context.instanceId },
}
await recordController.save(ctx)

4
packages/server/src/api/index.js
View File

@ -44,7 +44,9 @@ router
useAppRootPath: true,
}
ctx.isDev =
process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "jest"
process.env.NODE_ENV !== "production" &&
process.env.NODE_ENV !== "jest" &&
process.env.NODE_ENV !== "cypress"
await next()
})
.use(authenticated)

2
packages/server/src/events/index.js
View File

@ -18,7 +18,7 @@ async function executeRelevantWorkflows(event, eventType) {
workflowOrchestrator.strategy = serverStrategy
for (let workflow of workflows) {
workflowOrchestrator.execute(workflow)
workflowOrchestrator.execute(workflow, event)
}
}

11
packages/server/src/events/workflow.js
View File

@ -12,9 +12,9 @@ exports.Orchestrator = class Orchestrator {
this._strategy = strategy()
}
async execute(workflow) {
async execute(workflow, context) {
if (workflow.live) {
this._strategy.run(workflow.definition)
this._strategy.run(workflow.definition, context)
}
}
}
@ -35,12 +35,15 @@ exports.serverStrategy = () => ({
return mappedArgs
},
run: async function(workflow) {
run: async function(workflow, context) {
for (let block of workflow.steps) {
if (block.type === "CLIENT") continue
const action = require(`../api/controllers/workflow/actions/${block.actionId}`)
const response = await action({ args: this.bindContextArgs(block.args) })
const response = await action({
args: this.bindContextArgs(block.args),
context,
})
this.context = {
...this.context,

1
packages/server/src/utilities/createAppPackage.js
View File

@ -18,7 +18,6 @@ exports.downloadExtractComponentLibraries = async appFolder => {
// Need to download tarballs directly from NPM as our users may not have node on their machine
for (let lib of LIBRARIES) {
// download tarball
// TODO: make sure the latest version is always downloaded
const registryUrl = `https://registry.npmjs.org/@budibase/${lib}/-/${lib}-${packageJson.version}.tgz`
const response = await fetch(registryUrl)
if (!response.ok)

3
packages/standard-components/components.json
View File

@ -287,13 +287,14 @@
"hasLastHoverSliceHighlighted": "bool",
"hasHoverAnimation": "bool",
"numberFormat": "string",
"nameKey": "string",
"valueKey": "string",
"isAnimated": "bool",
"externalRadius": "number",
"internalRadius": "number",
"radiusHoverOffset": "number",
"percentageFormat": "string",
"useLegend": "bool",
"horizontalLegend": "bool",
"legendWidth": "number",
"legendHeight": "number"
}

6
packages/standard-components/package.json
View File

@ -12,7 +12,7 @@
"dev:builder": "rollup -cw"
},
"devDependencies": {
"@budibase/client": "^0.1.1",
"@budibase/client": "^0.1.17",
"@nx-js/compiler-util": "^2.0.0",
"@rollup/plugin-commonjs": "^11.1.0",
"bcryptjs": "2.4.3",
@ -33,9 +33,9 @@
"keywords": [
"svelte"
],
"version": "0.1.13",
"version": "0.1.17",
"license": "MIT",
"gitHead": "eff4fa93ca1db11b97b5fdedc0c488413e277eb8",
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
"dependencies": {
"@beyonk/svelte-googlemaps": "^2.2.0",
"britecharts": "^2.16.0",

1
packages/standard-components/src/Chart/index.js
View File

@ -10,4 +10,3 @@ export { default as scatterplot } from "./ScatterPlot.svelte"
export { default as step } from "./Step.svelte"
export { default as stackedarea } from "./StackedArea.svelte"
export { default as stackedbar } from "./StackedBar.svelte"