From b474f8a60084da23fb4e9ac28475474c1f42bc0f Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Sun, 22 Mar 2020 09:21:18 +0000 Subject: [PATCH] table enhancements --- packages/builder/rollup.config.js | 4 +- packages/builder/src/budibase.css | 8 +- .../builder/src/builderStore/store/backend.js | 15 +- .../builder/src/database/DatabaseRoot.svelte | 2 - .../ModelDataTable/ModelDataTable.svelte | 146 +++++++----- .../ModelDataTable/TablePagination.svelte | 47 +++- .../modals/CreateDatabase.svelte | 6 +- .../modals/CreateEditModel.svelte | 11 +- .../modals/CreateEditRecord.svelte | 6 +- .../ModelDataTable/modals/DeleteRecord.svelte | 37 ++- .../builder/src/database/ModelView.svelte | 224 +++++++----------- packages/builder/src/nav/HierarchyRow.svelte | 29 +-- 12 files changed, 274 insertions(+), 261 deletions(-) diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js index 8eccb73402..2ec676b0e8 100644 --- a/packages/builder/rollup.config.js +++ b/packages/builder/rollup.config.js @@ -103,7 +103,9 @@ const lodash_fp_exports = [ "toNumber", "takeRight", "toPairs", - "remove" + "remove", + "findIndex", + "compose" ] const lodash_exports = [ diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index fdb81db7ed..7d0a06ef68 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -107,7 +107,7 @@ } .budibase__table thead { - background: var(--background-button); + background: #fafafa; } .budibase__table th { @@ -118,4 +118,10 @@ .budibase__table tr { border-bottom: 1px solid #ccc; +} + +.button--toggled { + background: #fafafa; + color: var(--button-text); + padding: 10px; } \ No newline at end of file diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index 527e842a14..59893a0eff 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/packages/builder/src/builderStore/store/backend.js @@ -38,7 +38,7 @@ export const getBackendUiStore = () => { }, records: { delete: record => store.update(state => { - state.selectedView.records = remove(state.selectedView.records, { key: record.key }); + state.selectedView.records = remove(state.selectedView.records, { id: record.id }); return state }), }, @@ -125,7 +125,6 @@ export const saveCurrentNode = store => () => { if (errors.length > 0) { return state } - const parentNode = getNode(state.hierarchy, state.currentNode.parent().nodeId) const existingNode = getNode(state.hierarchy, state.currentNode.nodeId) @@ -134,10 +133,7 @@ export const saveCurrentNode = store => () => { if (existingNode) { // remove existing index = existingNode.parent().children.indexOf(existingNode) - 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), - // ]) + existingNode.parent().children = existingNode.parent().children.filter(node => node.nodeId !== existingNode.nodeId); } // should add node into existing hierarchy @@ -172,7 +168,7 @@ export const deleteCurrentNode = store => () => { store.update(state => { const nodeToDelete = getNode(state.hierarchy, state.currentNode.nodeId) state.currentNode = hierarchyFunctions.isRoot(nodeToDelete.parent()) - ? find(n => n !== state.currentNode)(state.hierarchy.children) + ? state.hierarchy.children.find(node => node !== state.currentNode) : nodeToDelete.parent() const recordOrIndexKey = hierarchyFunctions.isRecord(nodeToDelete) ? "children" : "indexes"; @@ -212,10 +208,7 @@ export const saveField = databaseStore => field => { export const deleteField = databaseStore => field => { databaseStore.update(db => { - db.currentNode.fields = filter(f => f.name !== field.name)( - db.currentNode.fields - ) - + db.currentNode.fields = db.currentNode.fields.filter(f => f.name !== field.name) return db }) } diff --git a/packages/builder/src/database/DatabaseRoot.svelte b/packages/builder/src/database/DatabaseRoot.svelte index e30f359ad2..6f0f750675 100644 --- a/packages/builder/src/database/DatabaseRoot.svelte +++ b/packages/builder/src/database/DatabaseRoot.svelte @@ -31,8 +31,6 @@ $: 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' diff --git a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte index 883abfd10f..7a2080147f 100644 --- a/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte +++ b/packages/builder/src/database/ModelDataTable/ModelDataTable.svelte @@ -10,19 +10,23 @@ export let selectRecord - let pages = [1, 2, 3] + const ITEMS_PER_PAGE = 2 + let selectedView = "" let modalOpen = false let headers = [] let selectedRecord + let currentPage = 0 $: views = $store.hierarchy.indexes $: currentAppInfo = { appname: $store.appname, - instanceId: $store.currentInstanceId + instanceId: $store.currentInstanceId, } - $: data = $backendUiStore.selectedView.records - $: deleteRecordModal = $backendUiStore.visibleModal === "DELETE_RECORD" + $: data = $backendUiStore.selectedView.records.slice( + currentPage * ITEMS_PER_PAGE, + currentPage * ITEMS_PER_PAGE + ITEMS_PER_PAGE + ) const getSchema = getIndexSchema($store.hierarchy) @@ -44,76 +48,86 @@ }) -
-
-

Shoe database

- -
- - - - - {#each headers as header} - +{#if views.length > 0} +
+
+

{$backendUiStore.selectedDatabase.name || ""}

+
- - - {#each data as row} - - + + +
Edit{header}
-
- -
-
    -
  • -
    View
    -
    • -
  • { - selectRecord(row) - backendUiStore.actions.modals.show("RECORD") - }}> -
    Edit
    -
    • -
  • -
    { - selectRecord(row) - backendUiStore.actions.modals.show("DELETE_RECORD") - }}> - Delete -
    -
    • -
  • -
    Duplicate
    -
    • -
-
-
-
+ + + {#each headers as header} - + {/each} - {/each} - -
Edit{row[header]}{header}
- -
+ + + {#if data.length === 0} +
No Data.
+ {/if} + {#each data as row} + + +
+ +
+
    +
  • { + selectRecord(row) + backendUiStore.actions.modals.show('RECORD') + }}> +
    Edit
    +
    • +
  • +
    { + selectRecord(row) + backendUiStore.actions.modals.show('DELETE_RECORD') + }}> + Delete +
    +
    • +
  • +
    { + console.log("DUPLICATION") + }}> + Duplicate +
    +
    • +
+
+
+ + {#each headers as header} + {row[header]} + {/each} + + {/each} + + + + +{:else} + Please create a model to get started. +{/if} + diff --git a/packages/builder/src/database/ModelDataTable/TablePagination.svelte b/packages/builder/src/database/ModelDataTable/TablePagination.svelte index 498a2a5bad..5d83bff979 100644 --- a/packages/builder/src/database/ModelDataTable/TablePagination.svelte +++ b/packages/builder/src/database/ModelDataTable/TablePagination.svelte @@ -1,18 +1,43 @@ diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte index 6360538798..e28b6418fb 100644 --- a/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/CreateDatabase.svelte @@ -4,6 +4,8 @@ import ActionButton from "../../../common/ActionButton.svelte" import * as api from "../api" + export let onClosed + let databaseName async function createDatabase() { @@ -14,8 +16,8 @@
- CREATE A NEW DATABASE FROM HERE - + Database Name +
Cancel Save diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte index b2f402de19..4c0d91cdd2 100644 --- a/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/CreateEditModel.svelte @@ -8,12 +8,5 @@
-

- - Create / Edit Model -

-
- - -
-
+ +
\ No newline at end of file diff --git a/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte b/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte index 7526dd4390..a13dbcb532 100644 --- a/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte +++ b/packages/builder/src/database/ModelDataTable/modals/CreateEditRecord.svelte @@ -1,6 +1,7 @@
-

Delete Record

- Are you sure you want to delete this record? All of your data will be - permanently removed. This action cannot be undone. + + +

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
+ + diff --git a/packages/builder/src/database/ModelView.svelte b/packages/builder/src/database/ModelView.svelte index ab311d23d3..d6e1be99b6 100644 --- a/packages/builder/src/database/ModelView.svelte +++ b/packages/builder/src/database/ModelView.svelte @@ -7,8 +7,9 @@ import Modal from "../common/Modal.svelte" import { map, join, filter, some, find, keys, isDate } from "lodash/fp" import { store } from "../builderStore" - import { common, hierarchy as h } from "../../../core/src" + import { common, hierarchy } from "../../../core/src" import { templateApi, pipe, validate } from "../common/core" + import ActionsHeader from "./ActionsHeader.svelte" let record let getIndexAllowedRecords @@ -26,7 +27,7 @@ store.subscribe($store => { record = $store.currentNode - const flattened = h.getFlattenedHierarchy($store.hierarchy) + const flattened = hierarchy.getFlattenedHierarchy($store.hierarchy) getIndexAllowedRecords = index => pipe( index.allowedRecordNodeIds, @@ -78,21 +79,6 @@ return value } - let getTypeOptions = typeOptions => - pipe( - typeOptions, - [ - keys, - map( - k => - `${k}: ${getTypeOptionsValueText( - typeOptions[k] - )}` - ), - join("
"), - ] - ) - const nameChanged = ev => { const pluralName = n => `${n}s` if (record.collectionName === "") { @@ -102,113 +88,79 @@
-
-

Settings

- - - -
- -
- {#if !record.isSingle} - - + + {#if !editingField} + +

Create / Edit Model

+ {:else} + +

Create / Edit Field

{/if} -
{record.nodeKey()}
+ + {#if !editingField} + +

Settings

- -
- Fields -

Add new field

-
+ - - - - - - - - - - - {#each record ? record.fields : [] as field} - - - - - - - - {/each} - -
EditNameTypeValues -
- editField(field)} /> - -
{field.name}
- 		{field.type}{field.typeOptions.values} - deleteField(field)}> - {@html getIcon('trash')} - -
- - {#if editingField} - onFinishedFieldEdit(false)}> - -

- - Create / Edit Field -

- - - {/if} - - - - + +
+ Fields +

Add new field

+
+ + + + + + + + + + + + {#each record ? record.fields : [] as field} + + + + + + + {/each} + +
EditNameTypeValues
+ editField(field)} /> + +
{field.name}
+ 		{field.type}{field.typeOptions.values}
+ + {:else} + + {/if}
diff --git a/packages/builder/src/nav/HierarchyRow.svelte b/packages/builder/src/nav/HierarchyRow.svelte index 66c827d163..fe80186ff2 100644 --- a/packages/builder/src/nav/HierarchyRow.svelte +++ b/packages/builder/src/nav/HierarchyRow.svelte @@ -9,9 +9,6 @@ export let type let navActive = "" - let expanded = false - - $: hasChildren = (node.children || node.indexes) && (node.children.length || node.indexes.length) const ICON_MAP = { index: "ri-eye-line", @@ -38,26 +35,18 @@ class:capitalized={type === 'record'} style="padding-left: {20 + level * 20}px" class:selected={navActive}> - {#if hasChildren} - expanded = !expanded} - /> - {/if} {node.name} - {#if expanded} - {#if node.children} - {#each node.children as child} - - {/each} - {/if} - {#if node.indexes} - {#each node.indexes as index} - - {/each} - {/if} + {#if node.children} + {#each node.children as child} + + {/each} + {/if} + {#if node.indexes} + {#each node.indexes as index} + + {/each} {/if}