diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js new file mode 100644 index 0000000000..f9adaad606 --- /dev/null +++ b/packages/builder/src/builderStore/store/backend.js @@ -0,0 +1,163 @@ +import api from "../api" +import { + filter, + cloneDeep, + sortBy, + find +} from "lodash/fp" +import { hierarchy as hierarchyFunctions } from "../../../../core/src" +import { + pipe, + getNode, + validate, + constructHierarchy, + templateApi, +} from "../../common/core" +import { store } from "../index"; + +export const createShadowHierarchy = hierarchy => + constructHierarchy(JSON.parse(JSON.stringify(hierarchy))) + +export const saveBackend = async state => { + await api.post(`/_builder/api/${state.appname}/backend`, { + appDefinition: { + hierarchy: state.hierarchy, + actions: state.actions, + triggers: state.triggers, + }, + accessLevels: state.accessLevels, + }) +} + +export const newRecord = (store, useRoot) => () => { + store.update(s => { + s.currentNodeIsNew = true + const shadowHierarchy = createShadowHierarchy(s.hierarchy) + const parent = useRoot + ? shadowHierarchy + : getNode(shadowHierarchy, s.currentNode.nodeId) + s.errors = [] + s.currentNode = templateApi(shadowHierarchy).getNewRecordTemplate( + parent, + "", + true + ) + return s + }) +} + +export const selectExistingNode = store => nodeId => { + store.update(s => { + const shadowHierarchy = createShadowHierarchy(s.hierarchy) + s.currentNode = getNode(shadowHierarchy, nodeId) + s.currentNodeIsNew = false + s.errors = [] + return s + }) +} + +export const newIndex = (store, useRoot) => () => { + store.update(s => { + s.currentNodeIsNew = true + s.errors = [] + const shadowHierarchy = createShadowHierarchy(s.hierarchy) + const parent = useRoot + ? shadowHierarchy + : getNode(shadowHierarchy, s.currentNode.nodeId) + + s.currentNode = templateApi(shadowHierarchy).getNewIndexTemplate(parent) + return s + }) +} + +// TODO: ONLY SEEMS TO BE CALLED BY THE BACKEND +export const saveCurrentNode = store => () => { + store.update(s => { + const errors = validate.node(s.currentNode) + s.errors = errors + if (errors.length > 0) { + return s + } + + const parentNode = getNode(s.hierarchy, s.currentNode.parent().nodeId) + + const existingNode = getNode(s.hierarchy, s.currentNode.nodeId) + + let index = parentNode.children.length + if (existingNode) { + // remove existing + index = existingNode.parent().children.indexOf(existingNode) + existingNode.parent().children = pipe(existingNode.parent().children, [ + filter(c => c.nodeId !== existingNode.nodeId), + ]) + } + + // should add node into existing hierarchy + const cloned = cloneDeep(s.currentNode) + templateApi(s.hierarchy).constructNode(parentNode, cloned) + + const newIndexOfChild = child => { + if (child === cloned) return index + const currentIndex = parentNode.children.indexOf(child) + return currentIndex >= index ? currentIndex + 1 : currentIndex + } + + parentNode.children = pipe(parentNode.children, [sortBy(newIndexOfChild)]) + + if (!existingNode && s.currentNode.type === "record") { + const defaultIndex = templateApi(s.hierarchy).getNewIndexTemplate( + cloned.parent() + ) + defaultIndex.name = `all_${cloned.collectionName}` + defaultIndex.allowedRecordNodeIds = [cloned.nodeId] + } + + s.currentNodeIsNew = false + + saveBackend(s) + + return s + }) +} + +export const deleteCurrentNode = store => () => { + store.update(s => { + const nodeToDelete = getNode(s.hierarchy, s.currentNode.nodeId) + s.currentNode = hierarchyFunctions.isRoot(nodeToDelete.parent()) + ? find(n => n != s.currentNode)(s.hierarchy.children) + : nodeToDelete.parent() + if (hierarchyFunctions.isRecord(nodeToDelete)) { + nodeToDelete.parent().children = filter( + c => c.nodeId !== nodeToDelete.nodeId + )(nodeToDelete.parent().children) + } else { + nodeToDelete.parent().indexes = filter( + c => c.nodeId !== nodeToDelete.nodeId + )(nodeToDelete.parent().indexes) + } + s.errors = [] + saveBackend(s) + return s + }) +} + +export const saveField = databaseStore => field => { + databaseStore.update(db => { + db.currentNode.fields = filter(f => f.name !== field.name)( + db.currentNode.fields + ) + + templateApi(db.hierarchy).addField(db.currentNode, field) + return db + }) +} + +export const deleteField = databaseStore => field => { + databaseStore.update(db => { + db.currentNode.fields = filter(f => f.name !== field.name)( + db.currentNode.fields + ) + + return db + }) +} \ No newline at end of file diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store/index.js similarity index 77% rename from packages/builder/src/builderStore/store.js rename to packages/builder/src/builderStore/store/index.js index 593869aa4e..381b26164b 100644 --- a/packages/builder/src/builderStore/store.js +++ b/packages/builder/src/builderStore/store/index.js @@ -1,8 +1,7 @@ -import { hierarchy as hierarchyFunctions } from "../../../core/src" import { filter, cloneDeep, - sortBy, + // sortBy, map, last, concat, @@ -13,27 +12,28 @@ import { import { pipe, getNode, - validate, + // validate, constructHierarchy, - templateApi, -} from "../common/core" + // templateApi, +} from "../../common/core" +import * as backendStoreActions from "./backend"; import { writable } from "svelte/store" -import { defaultPagesObject } from "../userInterface/pagesParsing/defaultPagesObject" -import api from "./api" -import { getExactComponent } from "../userInterface/pagesParsing/searchComponents" -import { rename } from "../userInterface/pagesParsing/renameScreen" +import { defaultPagesObject } from "../../userInterface/pagesParsing/defaultPagesObject" +import api from "../api" +import { getExactComponent } from "../../userInterface/pagesParsing/searchComponents" +import { rename } from "../../userInterface/pagesParsing/renameScreen" import { getNewScreen, createProps, makePropsSafe, getBuiltin, -} from "../userInterface/pagesParsing/createProps" -import { expandComponentDefinition } from "../userInterface/pagesParsing/types" -import { loadLibs, libUrlsForPreview } from "./loadComponentLibraries" -import { buildCodeForScreens } from "./buildCodeForScreens" -import { generate_screen_css } from "./generate_css" -import { insertCodeMetadata } from "./insertCodeMetadata" -import { uuid } from "./uuid" +} from "../../userInterface/pagesParsing/createProps" +import { expandComponentDefinition } from "../../userInterface/pagesParsing/types" +import { loadLibs, libUrlsForPreview } from "../loadComponentLibraries" +import { buildCodeForScreens } from "../buildCodeForScreens" +import { generate_screen_css } from "../generate_css" +import { insertCodeMetadata } from "../insertCodeMetadata" +import { uuid } from "../uuid" let appname = "" @@ -121,16 +121,18 @@ export const getStore = () => { // } store.initialise = initialise(store, initial) - store.newChildRecord = newRecord(store, false) - store.newRootRecord = newRecord(store, true) - store.selectExistingNode = selectExistingNode(store) - store.newChildIndex = newIndex(store, false) - store.newRootIndex = newIndex(store, true) - store.saveCurrentNode = saveCurrentNode(store) + + store.newChildRecord = backendStoreActions.newRecord(store, false) + store.newRootRecord = backendStoreActions.newRecord(store, true) + store.selectExistingNode = backendStoreActions.selectExistingNode(store) + store.newChildIndex = backendStoreActions.newIndex(store, false) + store.newRootIndex = backendStoreActions.newIndex(store, true) + store.saveCurrentNode = backendStoreActions.saveCurrentNode(store) + store.deleteCurrentNode = backendStoreActions.deleteCurrentNode(store) + store.saveField = backendStoreActions.saveField(store) + store.deleteField = backendStoreActions.deleteField(store) store.importAppDefinition = importAppDefinition(store) - store.deleteCurrentNode = deleteCurrentNode(store) - store.saveField = saveField(store) - store.deleteField = deleteField(store) + store.saveAction = saveAction(store) store.deleteAction = deleteAction(store) store.saveTrigger = saveTrigger(store) @@ -245,101 +247,12 @@ const showSettings = store => () => { } const useAnalytics = store => () => { - store.update(s => { - s.useAnalytics = !s.useAnalytics - return s + store.update(state => { + state.useAnalytics = !s.useAnalytics + return state }) } -const newRecord = (store, useRoot) => () => { - store.update(s => { - s.currentNodeIsNew = true - const shadowHierarchy = createShadowHierarchy(s.hierarchy) - const parent = useRoot - ? shadowHierarchy - : getNode(shadowHierarchy, s.currentNode.nodeId) - s.errors = [] - s.currentNode = templateApi(shadowHierarchy).getNewRecordTemplate( - parent, - "", - true - ) - return s - }) -} - -const selectExistingNode = store => nodeId => { - store.update(s => { - const shadowHierarchy = createShadowHierarchy(s.hierarchy) - s.currentNode = getNode(shadowHierarchy, nodeId) - s.currentNodeIsNew = false - s.errors = [] - return s - }) -} - -const newIndex = (store, useRoot) => () => { - store.update(s => { - s.currentNodeIsNew = true - s.errors = [] - const shadowHierarchy = createShadowHierarchy(s.hierarchy) - const parent = useRoot - ? shadowHierarchy - : getNode(shadowHierarchy, s.currentNode.nodeId) - - s.currentNode = templateApi(shadowHierarchy).getNewIndexTemplate(parent) - return s - }) -} - -const saveCurrentNode = store => () => { - store.update(s => { - const errors = validate.node(s.currentNode) - s.errors = errors - if (errors.length > 0) { - return s - } - - const parentNode = getNode(s.hierarchy, s.currentNode.parent().nodeId) - - const existingNode = getNode(s.hierarchy, s.currentNode.nodeId) - - let index = parentNode.children.length - if (existingNode) { - // remove existing - index = existingNode.parent().children.indexOf(existingNode) - existingNode.parent().children = pipe(existingNode.parent().children, [ - filter(c => c.nodeId !== existingNode.nodeId), - ]) - } - - // should add node into existing hierarchy - const cloned = cloneDeep(s.currentNode) - templateApi(s.hierarchy).constructNode(parentNode, cloned) - - const newIndexOfChild = child => { - if (child === cloned) return index - const currentIndex = parentNode.children.indexOf(child) - return currentIndex >= index ? currentIndex + 1 : currentIndex - } - - parentNode.children = pipe(parentNode.children, [sortBy(newIndexOfChild)]) - - if (!existingNode && s.currentNode.type === "record") { - const defaultIndex = templateApi(s.hierarchy).getNewIndexTemplate( - cloned.parent() - ) - defaultIndex.name = `all_${cloned.collectionName}` - defaultIndex.allowedRecordNodeIds = [cloned.nodeId] - } - - s.currentNodeIsNew = false - - saveBackend(s) - - return s - }) -} const importAppDefinition = store => appDefinition => { store.update(s => { @@ -355,48 +268,6 @@ const importAppDefinition = store => appDefinition => { }) } -const deleteCurrentNode = store => () => { - store.update(s => { - const nodeToDelete = getNode(s.hierarchy, s.currentNode.nodeId) - s.currentNode = hierarchyFunctions.isRoot(nodeToDelete.parent()) - ? find(n => n != s.currentNode)(s.hierarchy.children) - : nodeToDelete.parent() - if (hierarchyFunctions.isRecord(nodeToDelete)) { - nodeToDelete.parent().children = filter( - c => c.nodeId !== nodeToDelete.nodeId - )(nodeToDelete.parent().children) - } else { - nodeToDelete.parent().indexes = filter( - c => c.nodeId !== nodeToDelete.nodeId - )(nodeToDelete.parent().indexes) - } - s.errors = [] - saveBackend(s) - return s - }) -} - -const saveField = databaseStore => field => { - databaseStore.update(db => { - db.currentNode.fields = filter(f => f.name !== field.name)( - db.currentNode.fields - ) - - templateApi(db.hierarchy).addField(db.currentNode, field) - return db - }) -} - -const deleteField = databaseStore => field => { - databaseStore.update(db => { - db.currentNode.fields = filter(f => f.name !== field.name)( - db.currentNode.fields - ) - - return db - }) -} - const saveAction = store => (newAction, isNew, oldAction = null) => { store.update(s => { const existingAction = isNew @@ -526,32 +397,6 @@ const _saveScreen = async (store, s, screen) => { return innerState }) - - - /*const updatedScreen = await savedScreen.json() - const screens = [ - ...currentPageScreens.filter( - storeScreen => storeScreen.name !== updatedScreen.name - ), - updatedScreen, - ] - store.update(innerState => { - innerState.pages[s.currentPageName]._screens = screens - innerState.screens = screens - - let curentComponentId - walkProps(screen.props, p => { - if(p === innerState.currentComponentInfo) - currentComponentId = p._id - }) - - innerState.currentPreviewItem = updatedScreen - innerState.currentComponentInfo = makePropsSafe(componentDef, component) - - _savePage(innerState) - return innerState - }) - */ }) return s @@ -761,17 +606,6 @@ const _savePage = async s => { }) } -const saveBackend = async state => { - await api.post(`/_builder/api/${appname}/backend`, { - appDefinition: { - hierarchy: state.hierarchy, - actions: state.actions, - triggers: state.triggers, - }, - accessLevels: state.accessLevels, - }) -} - const setCurrentPage = store => pageName => { store.update(s => { const current_screens = s.pages[pageName]._screens @@ -801,9 +635,6 @@ const setCurrentPage = store => pageName => { }) } -const getContainerComponent = components => - getComponentDefinition(components, "@budibase/standard-components/container") - const getComponentDefinition = (components, name) => components.find(c => c.name === name) diff --git a/packages/builder/src/database/ActionsHeader.svelte b/packages/builder/src/database/ActionsHeader.svelte index e6a7360554..fac7013edf 100644 --- a/packages/builder/src/database/ActionsHeader.svelte +++ b/packages/builder/src/database/ActionsHeader.svelte @@ -14,19 +14,22 @@ confirmDelete = true } + // const deleteCurrentNode = () => { + // confirmDelete = false + // store.deleteCurrentNode() + // } + + // TODO: COMPLETELY REFACTOR THIS SHIT const deleteCurrentNode = () => { confirmDelete = false store.deleteCurrentNode() } -
+
- - {#if $store.currentNodeIsNew}Create{:else}Update{/if} + + Save {#if !$store.currentNodeIsNew} diff --git a/packages/builder/src/database/DatabaseRoot.svelte b/packages/builder/src/database/DatabaseRoot.svelte index 565df1a428..51edd71cf3 100644 --- a/packages/builder/src/database/DatabaseRoot.svelte +++ b/packages/builder/src/database/DatabaseRoot.svelte @@ -7,61 +7,34 @@ import { store } from "../builderStore" import getIcon from "../common/icon" import DropdownButton from "../common/DropdownButton.svelte" + import ActionButton from "../common/ActionButton.svelte" import Modal from "../common/Modal.svelte" - import { hierarchy as hierarchyFunctions } from "../../../core/src" + import { CreateEditRecordModal } from "./ModelDataTable/modals" - const hierarchyWidth = "200px" + let modalOpen + let selectedRecord - const defaultNewIndexActions = [ - { - label: "New Root Index", - onclick: store.newRootIndex, - }, - ] - - const defaultNewRecordActions = [ - { - label: "New Root Record", - onclick: store.newRootRecord, - }, - ] - - let newIndexActions = defaultNewIndexActions - let newRecordActions = defaultNewRecordActions - - store.subscribe(db => { - if (!db.currentNode || hierarchyFunctions.isIndex(db.currentNode)) { - newRecordActions = defaultNewRecordActions - newIndexActions = defaultNewIndexActions - } else { - newRecordActions = [ - ...defaultNewRecordActions, - { - label: `New Child Record of ${db.currentNode.name}`, - onclick: store.newChildRecord, - }, - ] - - newIndexActions = [ - ...defaultNewIndexActions, - { - label: `New Index on ${db.currentNode.name}`, - onclick: store.newChildIndex, - }, - ] - } - }) + function selectRecord(record) { + selectedRecord = record + modalOpen = true + } + + +
-
{$store.currentlySelectedDatabase}
- + { + selectedRecord = null + modalOpen = true + }}> + Create new record + + {#if $store.currentNode} {#if $store.currentNode.type === 'record'} @@ -82,10 +55,6 @@ position: relative; } - .actions-header { - flex: 0 1 auto; - } - .node-view { overflow-y: auto; flex: 1 1 auto; diff --git a/packages/builder/src/database/IndexView.svelte b/packages/builder/src/database/IndexView.svelte index 141cd63d5e..d3af05a9a8 100644 --- a/packages/builder/src/database/IndexView.svelte +++ b/packages/builder/src/database/IndexView.svelte @@ -110,11 +110,6 @@ margin-right: 30px; } - .index-label { - color: #333; - font-size: 0.875rem; - } - .snippet-selector__heading { margin-right: 20px; opacity: 0.7; diff --git a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte index 8651306c07..80c764c18f 100644 --- a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte +++ b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte @@ -1,43 +1,53 @@ - - +

Shoe database

@@ -61,11 +71,18 @@
  • View
    • -
  • -
    (modalOpen = true)}>Edit
    +
  • selectRecord(row)}> +
    Edit
  • -
    (deleteRecordModal = true)}>Delete
    +
    { + deleteRecordModal = true + selectedRecord = row + }}> + Delete +
  • Duplicate
    @@ -111,7 +128,8 @@ align-items: center; } - .ri-more-line:hover, .uk-dropdown-nav li:hover{ + .ri-more-line:hover, + .uk-dropdown-nav li:hover { cursor: pointer; } diff --git a/packages/builder/src/database/ModelDataTable/api.js b/packages/builder/src/database/ModelDataTable/api.js index 410c155140..6d6ed0be35 100644 --- a/packages/builder/src/database/ModelDataTable/api.js +++ b/packages/builder/src/database/ModelDataTable/api.js @@ -1,24 +1,26 @@ import api from "../../builderStore/api"; + import { getNewRecord } from "../../common/core" - export async function deleteRecord(appName, appInstanceId, record) { - const DELETE_RECORDS_URL = `/_builder/instance/${appName}/${appInstanceId}/api/record/${record.name}/${record.id}` + export async function deleteRecord(record, { appname, instanceId }) { + const DELETE_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/record/${record.name}/${record.id}` const response = await api.delete({ url: DELETE_RECORDS_URL }); + return response; } - export async function createNewRecord(record) { - console.log(record); + export async function saveRecord(record, { appname, instanceId }) { + const SAVE_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/record` + const updatedRecord = getNewRecord(record, "") + const response = await api.post(SAVE_RECORDS_URL, updatedRecord) + return response } - export async function fetchDataForView(viewName) { - console.log(viewName); - // const FETCH_RECORDS_URL = `/_builder/instance/${}/${}/api/listRecords/` + export async function fetchDataForView(viewName, { appname, instanceId }) { + const FETCH_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/listRecords/${viewName}`; - // const response = await api.get({ url: FETCH_RECORDS_URL }); - - // console.log(response); - - // GET /_builder/instance/:appname/:instanceid/api/listRecords/contacts/abcd1234/all_deals + // TODO: Error handling + const response = await api.get(FETCH_RECORDS_URL); + return await response.json(); } \ No newline at end of file diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte index d5b1189daf..ed22e4ca55 100644 --- a/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte @@ -11,7 +11,7 @@ -

    Create / Edit Record

    +

    Create / Edit Model

    Cancel + import { onMount } from "svelte" + import { store } from "../../../builderStore" import Modal from "../../../common/Modal.svelte" import ActionButton from "../../../common/ActionButton.svelte" + import Select from "../../../common/Select.svelte" import * as api from "../api" export let modalOpen = false - export let model = {} + export let record + + let selectedModel + + $: currentAppInfo = { + instanceId: $store.currentInstanceId, + appname: $store.appname, + } + $: recordFields = record ? Object.keys(record) : [] + $: models = $store.hierarchy.children + $: modelFields = selectedModel + ? selectedModel.fields.map(({ name }) => name) + : [] const onClosed = () => (modalOpen = false) - +

    Create / Edit Record

    -
    -
    - -
    - + {console.log('record', record)} + {console.log('selectedModel', selectedModel)} + {console.log('recordFields', recordFields)} + + {#if !record} +
    + +
    -
    - -
    - -
    - + {/if} + {#each modelFields as field} +
    + +
    + +
    -
    - -
    -
    Radio
    -
    - -
    - + {/each} + {#each recordFields as field} +
    + +
    + +
    -
    - + {/each} - Cancel - api.createNewRecord(recordInfo)}> - Save - +
    + Cancel + api.saveRecord(record || selectedModel, currentAppInfo)}> + Save + +
    + + diff --git a/packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte b/packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte index 5ed084fb5d..8dd8cc35aa 100644 --- a/packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte @@ -4,20 +4,22 @@ import * as api from "../api" export let modalOpen = false - - let recordInfo = {} + export let record const onClosed = () => (modalOpen = false) - +

    Delete Record

    Are you sure you want to delete this record? All of your data will be permanently removed. This action cannot be undone.
    Cancel api.deleteRecord(recordInfo)}> + on:click={async () => { + await api.deleteRecord(record) + onClosed(); + }}> Delete
    diff --git a/packages/builder/src/database/ModelView.svelte b/packages/builder/src/database/ModelView.svelte index d0f0c32605..6f3d758555 100644 --- a/packages/builder/src/database/ModelView.svelte +++ b/packages/builder/src/database/ModelView.svelte @@ -139,7 +139,7 @@ - {#each record.fields as field} + {#each record ? record.fields : [] as field} editField(field)} /> @@ -150,9 +150,6 @@ {field.type} ({console.log(field.typeOptions)}) {field.typeOptions.values} - deleteField(field)}> {@html getIcon('trash')} diff --git a/packages/builder/src/nav/DatabasesList.svelte b/packages/builder/src/nav/DatabasesList.svelte index 600b92ce47..fdd2dc3846 100644 --- a/packages/builder/src/nav/DatabasesList.svelte +++ b/packages/builder/src/nav/DatabasesList.svelte @@ -1,5 +1,4 @@ diff --git a/packages/builder/src/nav/SchemaManagementDrawer.svelte b/packages/builder/src/nav/SchemaManagementDrawer.svelte index 4276a591d2..e10a7c24c2 100644 --- a/packages/builder/src/nav/SchemaManagementDrawer.svelte +++ b/packages/builder/src/nav/SchemaManagementDrawer.svelte @@ -71,13 +71,13 @@
    Schema
    - +
      -
    • +
    • {}}> Model
      • -
    • +
    • {}}> View
    diff --git a/packages/client/src/state/stateManager/dynamicPropertySource.js b/packages/client/src/state/stateManager/dynamicPropertySource.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/core/src/recordApi/getNew.js b/packages/core/src/recordApi/getNew.js index 39453e859d..4ac373e9ba 100644 --- a/packages/core/src/recordApi/getNew.js +++ b/packages/core/src/recordApi/getNew.js @@ -22,6 +22,11 @@ export const getNew = app => (collectionKey, recordTypeName) => { ) } +/** + * Constructs a record object that can be saved to the backend. + * @param {*} recordNode - record + * @param {*} collectionKey - nested collection key that the record will be saved to. + */ export const _getNew = (recordNode, collectionKey) => constructRecord(recordNode, getNewFieldValue, collectionKey)