From 9756574e6fb3030215c8d7ee7a97c514187b5b39 Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Sat, 21 Mar 2020 20:39:37 +0000 Subject: [PATCH] enhanced modals --- .../builder/src/builderStore/store/backend.js | 77 +++++++++++-------- .../builder/src/builderStore/store/index.js | 4 +- packages/builder/src/common/Modal.svelte | 1 + .../builder/src/database/ActionsHeader.svelte | 35 ++++----- .../builder/src/database/DatabaseRoot.svelte | 30 +++++--- .../ModelDataTable/ModelDataTable.svelte | 20 ++--- .../src/database/ModelDataTable/api.js | 9 ++- .../modals/CreateDatabase.svelte | 16 ++-- .../modals/CreateEditModel.svelte | 7 +- .../modals/CreateEditRecord.svelte | 8 +- .../modals/CreateEditView.svelte | 4 +- .../ModelDataTable/modals/CreateUser.svelte | 27 +++++++ .../ModelDataTable/modals/DeleteRecord.svelte | 12 +-- .../builder/src/database/ModelView.svelte | 2 +- packages/builder/src/nav/HierarchyRow.svelte | 30 +++++--- 15 files changed, 176 insertions(+), 106 deletions(-) create mode 100644 packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index 5d4ef90107..527e842a14 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/packages/builder/src/builderStore/store/backend.js @@ -45,6 +45,11 @@ export const getBackendUiStore = () => { modals: { show: modal => store.update(state => ({ ...state, visibleModal: modal })), hide: () => store.update(state => ({ ...state, visibleModal: null })) + }, + nodes: { + select: () => {}, + update: () => {}, + delete: () => {}, } } @@ -52,10 +57,13 @@ export const getBackendUiStore = () => { }; // Store Actions -export const createShadowHierarchy = hierarchy => { - const hi = constructHierarchy(JSON.parse(JSON.stringify(hierarchy))) - console.log(hi) - return hi +export const createShadowHierarchy = hierarchy => constructHierarchy(JSON.parse(JSON.stringify(hierarchy))) + +export const createDatabaseForApp = store => appInstance => { + store.update(state => { + state.appInstances.push(appInstance) + return state + }) } export const saveBackend = async state => { @@ -98,12 +106,12 @@ export const selectExistingNode = store => nodeId => { export const newIndex = (store, useRoot) => () => { store.update(state => { + const shadowHierarchy = createShadowHierarchy(state.hierarchy) state.currentNodeIsNew = true state.errors = [] - const shadowHierarchy = createShadowHierarchy(state.hierarchy) const parent = useRoot - ? shadowHierarchy - : getNode(shadowHierarchy, state.currentNode.nodeId) + ? state.hierarchy + : getNode(state.hierarchy, state.currentNode.nodeId) state.currentNode = templateApi(shadowHierarchy).getNewIndexTemplate(parent) return state @@ -114,7 +122,7 @@ export const saveCurrentNode = store => () => { store.update(state => { const errors = validate.node(state.currentNode) state.errors = errors - if (errorstate.length > 0) { + if (errors.length > 0) { return state } @@ -126,9 +134,10 @@ export const saveCurrentNode = store => () => { if (existingNode) { // remove existing index = existingNode.parent().children.indexOf(existingNode) - existingNode.parent().children = pipe(existingNode.parent().children, [ - filter(c => c.nodeId !== existingNode.nodeId), - ]) + existingNode.parent().children = existingNode.parent().children.filter(c => c.nodeId !== existingNode.nodeId); + // existingNode.parent().children = pipe(existingNode.parent().children, [ + // filter(c => c.nodeId !== existingNode.nodeId), + // ]) } // should add node into existing hierarchy @@ -141,7 +150,7 @@ export const saveCurrentNode = store => () => { return currentIndex >= index ? currentIndex + 1 : currentIndex } - parentNode.children = pipe(parentNode.children, [sortBy(newIndexOfChild)]) + parentNode.children = sortBy(newIndexOfChild, parentNode.children) if (!existingNode && state.currentNode.type === "record") { const defaultIndex = templateApi(state.hierarchy).getNewIndexTemplate( @@ -162,18 +171,28 @@ export const saveCurrentNode = store => () => { export const deleteCurrentNode = store => () => { store.update(state => { const nodeToDelete = getNode(state.hierarchy, state.currentNode.nodeId) - state.currentNode = hierarchyFunctionstate.isRoot(nodeToDelete.parent()) - ? find(n => n != state.currentNode)(state.hierarchy.children) + state.currentNode = hierarchyFunctions.isRoot(nodeToDelete.parent()) + ? find(n => n !== state.currentNode)(state.hierarchy.children) : nodeToDelete.parent() - if (hierarchyFunctionstate.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) - } + + const recordOrIndexKey = hierarchyFunctions.isRecord(nodeToDelete) ? "children" : "indexes"; + + // remove the selected record or index + nodeToDelete.parent()[recordOrIndexKey] = remove( + nodeToDelete.parent()[recordOrIndexKey], + node => node.nodeId === nodeToDelete.nodeId + ) + + // if (hierarchyFunctions.isRecord(nodeToDelete)) { + // nodeToDelete.parent().children = filter( + // c => c.nodeId !== nodeToDelete.nodeId + // )(nodeToDelete.parent().children) + // } else { + // nodeToDelete.parent().indexes = remove( + // nodeToDelete.parent().indexes, + // node => node.nodeId === nodeToDelete.nodeId + // ) + // } state.errors = [] saveBackend(state) return state @@ -202,25 +221,23 @@ export const deleteField = databaseStore => field => { } const incrementAccessLevelsVersion = state => - (state.accessLevelstate.version = (state.accessLevelstate.version || 0) + 1) + (state.accessLevels.version = (state.accessLevels.version || 0) + 1) export const saveLevel = store => (newLevel, isNew, oldLevel = null) => { store.update(state => { - const levels = state.accessLevelstate.levels + const levels = state.accessLevels.levels const existingLevel = isNew ? null : find(a => a.name === oldLevel.name)(levels) if (existingLevel) { - state.accessLevelstate.levels = pipe(levels, [ - map(a => (a === existingLevel ? newLevel : a)), - ]) + state.accessLevels.levels = levels.map(level => level === existingLevel ? newLevel : level) } else { - state.accessLevelstate.levelstate.push(newLevel) + state.accessLevels.levels.push(newLevel) } - incrementAccessLevelsVersion(s) + incrementAccessLevelsVersion(state) saveBackend(state) return state diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 5bf35f7770..52f824debc 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -1,7 +1,6 @@ import { filter, cloneDeep, - // sortBy, map, last, concat, @@ -12,9 +11,7 @@ import { import { pipe, getNode, - // validate, constructHierarchy, - // templateApi, } from "../../common/core" import * as backendStoreActions from "./backend"; import { writable } from "svelte/store" @@ -78,6 +75,7 @@ export const getStore = () => { store.deleteField = backendStoreActions.deleteField(store) store.saveLevel = backendStoreActions.saveLevel(store) store.deleteLevel = backendStoreActions.deleteLevel(store) + store.createDatabaseForApp = backendStoreActions.createDatabaseForApp(store) store.importAppDefinition = importAppDefinition(store) store.saveAction = saveAction(store) diff --git a/packages/builder/src/common/Modal.svelte b/packages/builder/src/common/Modal.svelte index ceeae22aa5..f47665f9f9 100644 --- a/packages/builder/src/common/Modal.svelte +++ b/packages/builder/src/common/Modal.svelte @@ -24,6 +24,7 @@ } } } +
diff --git a/packages/builder/src/database/ActionsHeader.svelte b/packages/builder/src/database/ActionsHeader.svelte index ee939298bd..5cbcae28e5 100644 --- a/packages/builder/src/database/ActionsHeader.svelte +++ b/packages/builder/src/database/ActionsHeader.svelte @@ -19,39 +19,32 @@
- - - Save - - +
{#if !$store.currentNodeIsNew} - + Delete {/if} - + + + Save + +
{#if $store.errors && $store.errors.length > 0} {/if} - - (confirmDelete = false)} bind:isOpen={confirmDelete}> - Are you sure you want to delete {$store.currentNode.name}? -
- - Yes - (confirmDelete = false)}> - No - - -
-
diff --git a/packages/builder/src/database/DatabaseRoot.svelte b/packages/builder/src/database/DatabaseRoot.svelte index e20ca73841..e30f359ad2 100644 --- a/packages/builder/src/database/DatabaseRoot.svelte +++ b/packages/builder/src/database/DatabaseRoot.svelte @@ -12,34 +12,46 @@ CreateEditRecordModal, CreateEditModelModal, CreateEditViewModal, - CreateDatabaseModal + CreateDatabaseModal, + DeleteRecordModal } from "./ModelDataTable/modals" let selectedRecord function selectRecord(record) { selectedRecord = record - backendUiStore.actions.modals.show("RECORD") } function onClosed() { - // backendUiStore.actions.modals.hide() + backendUiStore.actions.modals.hide() } $: recordOpen = $backendUiStore.visibleModal === "RECORD" $: modelOpen = $backendUiStore.visibleModal === "MODEL" $: viewOpen = $backendUiStore.visibleModal === "VIEW" $: databaseOpen = $backendUiStore.visibleModal === "DATABASE" + $: deleteRecordOpen = $backendUiStore.visibleModal === "DELETE_RECORD" // $: recordOpen = $store.currentNode && $store.currentNode.type === 'record' // $: viewOpen = $store.currentNode && $store.currentNode.type === 'index' -({ console.log($backendUiStore.visibleModal) }) - - - - - + + {#if recordOpen} + + {/if} + {#if modelOpen} + + {/if} + {#if viewOpen} + + {/if} + {#if databaseOpen} + + {/if} + {#if deleteRecordOpen} + + {/if} +
diff --git a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte index a442da0792..883abfd10f 100644 --- a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte +++ b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte @@ -38,15 +38,12 @@ } onMount(async () => { - await fetchRecordsForView(views[0].name, currentAppInfo) + if (views.length > 0) { + await fetchRecordsForView(views[0].name, currentAppInfo) + } }) - -

Shoe database

@@ -79,13 +76,16 @@
View
  • selectRecord(row)}> + on:click={() => { + selectRecord(row) + backendUiStore.actions.modals.show("RECORD") + }}>
    Edit
  • { - selectedRecord = row + selectRecord(row) backendUiStore.actions.modals.show("DELETE_RECORD") }}> Delete @@ -112,7 +112,8 @@ table { border: 1px solid #ccc; background: #fff; - border-radius: 2px; + border-radius: 3px; + border-collapse: separate; } thead { @@ -128,6 +129,7 @@ tbody tr { border-bottom: 1px solid #ccc; transition: 0.3s background-color; + color: var(--darkslate); } tbody tr:hover { diff --git a/packages/builder/src/database/ModelDataTable/api.js b/packages/builder/src/database/ModelDataTable/api.js index 5848bbaab0..5fb3568324 100644 --- a/packages/builder/src/database/ModelDataTable/api.js +++ b/packages/builder/src/database/ModelDataTable/api.js @@ -1,5 +1,12 @@ import api from "../../builderStore/api"; - import { getNewRecord } from "../../common/core" + import { getNewRecord, getNewInstance } from "../../common/core" + + export async function createDatabase(appname, instanceName) { + const CREATE_DATABASE_URL = `/_builder/instance/_master/0/api/record` + const database = getNewInstance(appname, instanceName); + const response = await api.post(CREATE_DATABASE_URL, database); + return await response.json() + } export async function deleteRecord(record, { appname, instanceId }) { const DELETE_RECORDS_URL = `/_builder/instance/${appname}/${instanceId}/api/record${record.key}` diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte index 9b8ef77b1d..6360538798 100644 --- a/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte @@ -1,17 +1,23 @@ - +
    CREATE A NEW DATABASE FROM HERE +
    Cancel - Save + Save
    - +
    diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte index 16f88c9395..b2f402de19 100644 --- a/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte @@ -5,12 +5,9 @@ import ModelView from "../../ModelView.svelte" import ActionsHeader from "../../ActionsHeader.svelte" import * as api from "../api" - - export let modalOpen = false - export let onClosed - +

    Create / Edit Model @@ -19,4 +16,4 @@

    - +
    • diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte index c79e1ebc02..7526dd4390 100644 --- a/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte @@ -7,7 +7,6 @@ import { getNewRecord } from "../../../common/core" import * as api from "../api" - export let modalOpen = false export let record export let onClosed @@ -22,10 +21,9 @@ $: modelFields = selectedModel ? selectedModel.fields.map(({ name }) => name) : [] - - +

    Create / Edit Record

    @@ -80,10 +78,10 @@
    -     +
    diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateEditView.svelte index 09b88faf6d..c4195d2fdf 100644 --- a/packages/builder/src/database/ModelDataTable/modals/CreateEditView.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/CreateEditView.svelte @@ -12,7 +12,7 @@ - +
    @@ -22,4 +22,4 @@ Save
    --> - + diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte new file mode 100644 index 0000000000..8ce93cfbe2 --- /dev/null +++ b/packages/builder/src/database/ModelDataTable/modals/CreateUser.svelte @@ -0,0 +1,27 @@ + + + + CREATE A NEW user FROM HERE + +
    + Cancel + Save +
    +     diff --git a/packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte b/packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte index 86ec8f0bc4..eda585cfe4 100644 --- a/packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/DeleteRecord.svelte @@ -15,22 +15,22 @@ function onClosed() { backendUiStore.actions.modals.hide() } - - +

    Delete Record

    - Are you sure you want to delete this record? All of your data will be permanently removed. This action cannot be undone. + Are you sure you want to delete this record? All of your data will be + permanently removed. This action cannot be undone.
    Cancel { + on:click={async () => { await api.deleteRecord(record, currentAppInfo) backendUiStore.actions.records.delete(record) - onClosed(); + onClosed() }}> Delete
    - +
    diff --git a/packages/builder/src/database/ModelView.svelte b/packages/builder/src/database/ModelView.svelte index 149ed0f413..ab311d23d3 100644 --- a/packages/builder/src/database/ModelView.svelte +++ b/packages/builder/src/database/ModelView.svelte @@ -110,7 +110,7 @@