From fa80d9913969a7da6869608ad07841eb401d54dc Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 15 Aug 2024 16:14:00 +0100 Subject: [PATCH 001/574] Add initial new UI for views --- .../backend/DataTable/TableDataTable.svelte | 110 +++++----- .../backend/DataTable/ViewV2DataTable.svelte | 49 ++--- .../DeleteConfirmationModal.svelte | 2 +- .../TableNavItem/TableNavItem.svelte | 16 +- .../TableNavigator/TableNavigator.svelte | 15 -- .../ViewNavItem/ViewNavItem.svelte | 71 ------- .../table/[tableId]/[viewId]/_layout.svelte | 24 +++ .../table/[tableId]/[viewId]/index.svelte | 5 + .../_components/DeleteViewModal.svelte} | 0 .../_components}/EditViewModal.svelte | 0 .../[tableId]/_components/ViewNavBar.svelte | 200 ++++++++++++++++++ .../data/table/[tableId]/_layout.svelte | 16 +- .../data/table/[tableId]/view/index.svelte | 19 ++ .../view/v1/[viewName]/_layout.svelte | 24 +++ .../[tableId]/view/v1/[viewName]/index.svelte | 18 ++ .../data/table/[tableId]/view/v1/index.svelte | 5 + 16 files changed, 386 insertions(+), 188 deletions(-) delete mode 100644 packages/builder/src/components/backend/TableNavigator/ViewNavItem/ViewNavItem.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/_layout.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte rename packages/builder/src/{components/backend/TableNavigator/ViewNavItem/DeleteConfirmationModal.svelte => pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte} (100%) rename packages/builder/src/{components/backend/TableNavigator/ViewNavItem => pages/builder/app/[application]/data/table/[tableId]/_components}/EditViewModal.svelte (100%) create mode 100644 packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/index.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/[viewName]/_layout.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/[viewName]/index.svelte create mode 100644 packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/index.svelte diff --git a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte index 525421f996..22a7fabf24 100644 --- a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte @@ -57,64 +57,52 @@ } -
- - - {#if isUsersTable && $appStore.features.disableUserMetadata} - - {/if} - - - - {#if !isUsersTable} - - {/if} - - {#if !isUsersTable} - - {/if} - {#if relationshipsEnabled} - - {/if} - {#if isUsersTable} - - {:else} - - {/if} - - {#if isUsersTable} - - {:else} - - {/if} - - - - - - - - -
- - + + + {#if isUsersTable && $appStore.features.disableUserMetadata} + + {/if} + + + + {#if !isUsersTable} + + {/if} + + {#if !isUsersTable} + + {/if} + {#if relationshipsEnabled} + + {/if} + {#if isUsersTable} + + {:else} + + {/if} + + {#if isUsersTable} + + {:else} + + {/if} + + + + + + + + diff --git a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte index 646b764a2c..5f7a0feb67 100644 --- a/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/ViewV2DataTable.svelte @@ -19,34 +19,21 @@ } -
- - - - - - - - - -
- - + + + + + + + + + diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte index 03da9f3fd3..c0e030845f 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableNavItem/DeleteConfirmationModal.svelte @@ -104,7 +104,7 @@ {/if} -

Please enter the app name below to confirm.

+

Please enter the table name below to confirm.

diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte index ab79a8fff0..6b64096e2e 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableNavItem/TableNavItem.svelte @@ -20,14 +20,6 @@ const getContextMenuItems = () => { return [ - { - icon: "Delete", - name: "Delete", - keyBind: null, - visible: true, - disabled: false, - callback: deleteConfirmationModal.show, - }, { icon: "Edit", name: "Edit", @@ -36,6 +28,14 @@ disabled: false, callback: editModal.show, }, + { + icon: "Delete", + name: "Delete", + keyBind: null, + visible: true, + disabled: false, + callback: deleteConfirmationModal.show, + }, ] } diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte index f21230d7a6..6ab500b65d 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte @@ -1,7 +1,5 @@ - - - - - - diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/_layout.svelte new file mode 100644 index 0000000000..9c1baa723e --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/_layout.svelte @@ -0,0 +1,24 @@ + + + diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte new file mode 100644 index 0000000000..c2281710ba --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/[viewId]/index.svelte @@ -0,0 +1,5 @@ + + + diff --git a/packages/builder/src/components/backend/TableNavigator/ViewNavItem/DeleteConfirmationModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte similarity index 100% rename from packages/builder/src/components/backend/TableNavigator/ViewNavItem/DeleteConfirmationModal.svelte rename to packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/DeleteViewModal.svelte diff --git a/packages/builder/src/components/backend/TableNavigator/ViewNavItem/EditViewModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte similarity index 100% rename from packages/builder/src/components/backend/TableNavigator/ViewNavItem/EditViewModal.svelte rename to packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/EditViewModal.svelte diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte new file mode 100644 index 0000000000..20ecdc3f83 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte @@ -0,0 +1,200 @@ + + + + +{#if table} + + +{/if} + +{#if editableView} + + +{/if} + + diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_layout.svelte index 8c60dbdd69..4a33f8a967 100644 --- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_layout.svelte @@ -3,6 +3,7 @@ import { tables, builderStore } from "stores/builder" import * as routify from "@roxi/routify" import { onDestroy } from "svelte" + import ViewNavBar from "./_components/ViewNavBar.svelte" $: tableId = $tables.selectedTableId $: builderStore.selectResource(tableId) @@ -20,4 +21,17 @@ onDestroy(stopSyncing) - +
+ + +
+ + diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/index.svelte new file mode 100644 index 0000000000..623cd224db --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/index.svelte @@ -0,0 +1,19 @@ + diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/[viewName]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/[viewName]/_layout.svelte new file mode 100644 index 0000000000..df3a18c2bb --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/[viewName]/_layout.svelte @@ -0,0 +1,24 @@ + + + diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/[viewName]/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/[viewName]/index.svelte new file mode 100644 index 0000000000..51149b602d --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/[viewName]/index.svelte @@ -0,0 +1,18 @@ + + +{#if selectedView} + +{:else}Create your first table to start building{/if} + + diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/index.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/index.svelte new file mode 100644 index 0000000000..c11ca87023 --- /dev/null +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/view/v1/index.svelte @@ -0,0 +1,5 @@ + From d313968eaa69f07306db5bf207135d96a8c1c380 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 15 Aug 2024 16:33:39 +0100 Subject: [PATCH 002/574] Add view CRUD and table editing via new UI --- .../backend/DataTable/TableDataTable.svelte | 4 -- .../DatasourceNavigator.svelte | 4 +- .../TableNavigator/TableNavigator.svelte | 5 +- .../backend/TableNavigator/utils.js | 4 ++ .../_components/CreateViewModal.svelte} | 54 ++++++++++--------- .../[tableId]/_components/ViewNavBar.svelte | 41 ++++++++++---- 6 files changed, 66 insertions(+), 46 deletions(-) rename packages/builder/src/{components/backend/DataTable/modals/grid/GridCreateViewModal.svelte => pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewModal.svelte} (51%) diff --git a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte index 22a7fabf24..2dd1eec0a8 100644 --- a/packages/builder/src/components/backend/DataTable/TableDataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/TableDataTable.svelte @@ -9,7 +9,6 @@ import GridAddColumnModal from "components/backend/DataTable/modals/grid/GridCreateColumnModal.svelte" import GridCreateEditRowModal from "components/backend/DataTable/modals/grid/GridCreateEditRowModal.svelte" import GridEditUserModal from "components/backend/DataTable/modals/grid/GridEditUserModal.svelte" - import GridCreateViewButton from "components/backend/DataTable/buttons/grid/GridCreateViewButton.svelte" import GridImportButton from "components/backend/DataTable/buttons/grid/GridImportButton.svelte" import GridExportButton from "components/backend/DataTable/buttons/grid/GridExportButton.svelte" import GridFilterButton from "components/backend/DataTable/buttons/grid/GridFilterButton.svelte" @@ -77,9 +76,6 @@ - {#if !isUsersTable} - - {/if} {#if !isUsersTable} diff --git a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte index e0745c15a1..a6078e38fb 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/DatasourceNavigator.svelte @@ -39,9 +39,7 @@ const selectTable = tableId => { tables.select(tableId) - if (!$isActive("./table/:tableId")) { - $goto(`./table/${tableId}`) - } + $goto(`./table/${tableId}`) } function openNode(datasource) { diff --git a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte index 6ab500b65d..f97bd2487b 100644 --- a/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte +++ b/packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte @@ -1,14 +1,11 @@
diff --git a/packages/builder/src/components/backend/TableNavigator/utils.js b/packages/builder/src/components/backend/TableNavigator/utils.js index ae7aaa0f0a..a76a14c1a4 100644 --- a/packages/builder/src/components/backend/TableNavigator/utils.js +++ b/packages/builder/src/components/backend/TableNavigator/utils.js @@ -66,3 +66,7 @@ export const parseFile = e => { reader.readAsText(file) }) } + +export const alphabetical = (a, b) => { + return a.name?.toLowerCase() > b.name?.toLowerCase() ? 1 : -1 +} diff --git a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewModal.svelte similarity index 51% rename from packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte rename to packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewModal.svelte index eea64a4d9e..77477054b8 100644 --- a/packages/builder/src/components/backend/DataTable/modals/grid/GridCreateViewModal.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/CreateViewModal.svelte @@ -1,16 +1,21 @@ - - - + + + + + diff --git a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte index 20ecdc3f83..fb7d46f259 100644 --- a/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte +++ b/packages/builder/src/pages/builder/app/[application]/data/table/[tableId]/_components/ViewNavBar.svelte @@ -6,7 +6,7 @@ contextMenuStore, } from "stores/builder" import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte" - import { Icon } from "@budibase/bbui" + import { Icon, Button } from "@budibase/bbui" import { params, url } from "@roxi/routify" import EditViewModal from "./EditViewModal.svelte" import DeleteViewModal from "./DeleteViewModal.svelte" @@ -16,8 +16,11 @@ import { tick } from "svelte" import { DB_TYPE_EXTERNAL } from "constants/backend" import { TableNames } from "constants" + import { alphabetical } from "components/backend/TableNavigator/utils" + import CreateViewModal from "./CreateViewModal.svelte" // Editing table + let createViewModal let editTableModal let deleteTableModal @@ -101,10 +104,6 @@ } ) } - - const alphabetical = (a, b) => { - return a.name < b.name ? -1 : 1 - }
@@ -126,7 +125,13 @@ {/if} {#if tableEditable} - + {/if} {#each views as view (view.id)} @@ -145,15 +150,33 @@ {/if} openViewContextMenu(e, view)} - s hoverable name="MoreSmallList" + color="var(--spectrum-global-color-gray-600)" + hoverColor="var(--spectrum-global-color-gray-900)" /> {/each} + {#if !views.length && tableEditable} + + + To create subsets of data, control access and more, create a view. + + {/if} + {#if views.length} + + {/if}
-{#if table} +{#if table && tableEditable} + {/if} @@ -183,7 +206,7 @@ align-items: center; gap: var(--spacing-m); transition: background 130ms ease-out, color 130ms ease-out; - color: var(--spectrum-global-color-gray-700); + color: var(--spectrum-global-color-gray-600); } .title { font-size: 16px; From 40e7f58131b7af6795201e5a887c2a2a9bb809bd Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 15 Aug 2024 19:49:30 +0100 Subject: [PATCH 003/574] Add automatic overflow menu popover for views that don't fit --- packages/bbui/src/Menu/Item.svelte | 2 +- .../_components/CreateViewModal.svelte | 10 +- .../[tableId]/_components/ViewNavBar.svelte | 165 ++++++++++++++---- 3 files changed, 134 insertions(+), 43 deletions(-) diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte index 05a33adda9..758b819a62 100644 --- a/packages/bbui/src/Menu/Item.svelte +++ b/packages/bbui/src/Menu/Item.svelte @@ -35,7 +35,7 @@