From 2a5b81a40a3be4ec4b667c970d25d5e206ec461a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 7 Apr 2022 15:30:55 +0100 Subject: [PATCH 01/22] Add placeholder table content and add highlighted and disabled states to table buttons --- packages/bbui/src/Table/Table.svelte | 31 +++++++--- .../backend/DataTable/DataTable.svelte | 59 +++++++++++++++---- .../components/backend/DataTable/Table.svelte | 6 +- .../buttons/CreateColumnButton.svelte | 13 +++- .../DataTable/buttons/CreateRowButton.svelte | 12 +++- .../DataTable/buttons/CreateViewButton.svelte | 10 +++- 6 files changed, 106 insertions(+), 25 deletions(-) diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index 1d957b3f30..1b7f1cddfb 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -36,6 +36,7 @@ export let disableSorting = false export let autoSortColumns = true export let compact = false + export let customPlaceholder = false const dispatch = createEventDispatcher() @@ -387,13 +388,24 @@ {/each} {:else} -
-
- - - -
No rows found
-
+
+ {#if customPlaceholder} + + {:else} +
+ + + +
No rows found
+
+ {/if}
{/if}
@@ -576,16 +588,19 @@ border-top: none; grid-column: 1 / -1; background-color: var(--table-bg); + padding: 60px 40px; } .placeholder--no-fields { border-top: var(--table-border); } + .placeholder--custom { + justify-content: flex-start; + } .wrapper--quiet .placeholder { border-left: none; border-right: none; } .placeholder-content { - padding: 40px; display: flex; flex-direction: column; justify-content: center; diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 9132fc1c89..0a1244d9c9 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -14,7 +14,7 @@ import Table from "./Table.svelte" import { TableNames } from "constants" import CreateEditRow from "./modals/CreateEditRow.svelte" - import { Pagination } from "@budibase/bbui" + import { Pagination, Heading, Body, Layout } from "@budibase/bbui" import { fetchData } from "@budibase/frontend-core" import { API } from "api" @@ -27,6 +27,8 @@ $: enrichedSchema = enrichSchema($tables.selected?.schema) $: id = $tables.selected?._id $: fetch = createFetch(id) + $: hasCols = checkHasCols(schema) + $: hasRows = !!$fetch.data?.length const enrichSchema = schema => { let tempSchema = { ...schema } @@ -47,6 +49,20 @@ return tempSchema } + + const checkHasCols = schema => { + if (!schema || Object.keys(schema).length === 0) { + return false + } + let fields = Object.values(schema) + for (let field of fields) { + if (!field.autocolumn) { + return true + } + } + return false + } + // Fetches new data whenever the table changes const createFetch = tableId => { return fetchData({ @@ -104,19 +120,27 @@ disableSorting on:updatecolumns={onUpdateColumns} on:updaterows={onUpdateRows} + customPlaceholder > - - {#if schema && Object.keys(schema).length > 0} - {#if !isUsersTable} - - {/if} - {#if isInternal} - - {/if} +
+
+ + {#if !isUsersTable} + + {/if} + {#if isInternal} + + {/if} +
+
+
+ {#if hasCols} {#if isUsersTable} @@ -138,6 +162,15 @@ {/key} {/if} +
+ + Let's create some columns! + + Start building out your table structure
+ by adding some columns + +
+
{#key id}
diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index 81edb39667..543b31ca4d 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -25,6 +25,7 @@ export let rowCount export let type export let disableSorting = false + export let customPlaceholder = false let selectedRows = [] let editableColumn @@ -144,6 +145,7 @@ {customRenderers} {rowCount} {disableSorting} + {customPlaceholder} bind:selectedRows allowSelectRows={allowEditing && !isUsersTable} allowEditRows={allowEditing} @@ -153,7 +155,9 @@ on:editrow={e => editRow(e.detail)} on:clickrelationship={e => selectRelationship(e.detail)} on:sort - /> + > + +
{/key} diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte index abf7e25d2a..8644ee86da 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte @@ -2,10 +2,21 @@ import { ActionButton, Modal } from "@budibase/bbui" import CreateEditColumn from "../modals/CreateEditColumn.svelte" + export let highlighted = false + export let disabled = false + let modal - + Create column diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte index 2a31d02375..1676a5b23c 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte @@ -4,11 +4,21 @@ export let modalContentComponent = CreateEditRow export let title = "Create row" + export let disabled = false + export let highlighted = false let modal - + {title} diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte index 297d120ede..0133b5bd79 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte @@ -2,10 +2,18 @@ import { Modal, ActionButton } from "@budibase/bbui" import CreateViewModal from "../modals/CreateViewModal.svelte" + export let disabled = false + let modal - + Create view From 7a2a7bfc878f00af075db50d143e1f2d191f1aac Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 7 Apr 2022 15:32:46 +0100 Subject: [PATCH 02/22] Split buttons into left and right sides --- .../backend/DataTable/DataTable.svelte | 52 +++++++++++-------- 1 file changed, 29 insertions(+), 23 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 0a1244d9c9..fd2045fc07 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -138,30 +138,29 @@ {/if}
-
-
- {#if hasCols} - - {#if isUsersTable} - - {/if} - {#if !isInternal} - + + {#if isUsersTable} + + {/if} + {#if !isInternal} + + {/if} + + + + - {/if} - - - - - {#key id} - - {/key} - {/if} + {#key id} + + {/key} + +
Let's create some columns! @@ -195,4 +194,11 @@ align-items: center; margin-top: var(--spacing-xl); } + .buttons { + flex: 1 1 auto; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + } From 2d3618eab09f6770473bcf0bbefc3229a45a8cf0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 7 Apr 2022 15:38:51 +0100 Subject: [PATCH 03/22] Fix padding in action buttons --- packages/bbui/src/ActionButton/ActionButton.svelte | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index 5ab7a7f047..b518ac3d92 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -80,8 +80,4 @@ .active svg { color: var(--spectrum-global-color-blue-600); } - - .spectrum-ActionButton-label { - padding-bottom: 2px; - } From 9e20f0406c0ba49965939e3d35fd1abd00865b24 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 7 Apr 2022 15:39:14 +0100 Subject: [PATCH 04/22] Update auto column, export and filter buttons to new designs and to support disabled state --- .../components/backend/DataTable/DataTable.svelte | 12 +++++++++--- .../backend/DataTable/buttons/ExportButton.svelte | 9 ++++++++- .../DataTable/buttons/HideAutocolumnButton.svelte | 10 ++++++++-- .../DataTable/buttons/TableFilterButton.svelte | 2 ++ 4 files changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index fd2045fc07..6a6b16b6fd 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -150,14 +150,20 @@ /> {/if} - - + {#key id} - + {/key}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte index d8502c7d3e..093ca33182 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte @@ -3,11 +3,18 @@ import ExportModal from "../modals/ExportModal.svelte" export let view + export let disabled = false let modal - + Export diff --git a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte index 3d74188ee4..e9b042a653 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte @@ -8,6 +8,12 @@ } - - {#if hideAutocolumns}Show auto columns{:else}Hide auto columns{/if} + + Auto columns diff --git a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte index c07b11237b..cf9e4b1358 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/TableFilterButton.svelte @@ -5,6 +5,7 @@ export let schema export let filters + export let disabled = false const dispatch = createEventDispatcher() let modal @@ -17,6 +18,7 @@ icon="Filter" size="S" quiet + {disabled} on:click={modal.show} active={tempValue?.length > 0} > From 620008fc42142ffeeffd35bae957aee82830d360 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 7 Apr 2022 15:48:35 +0100 Subject: [PATCH 05/22] Prevent flashing CTA buttons when initially loading table data --- packages/bbui/src/Table/Table.svelte | 2 +- .../backend/DataTable/DataTable.svelte | 27 +++++++++++++------ 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index 1b7f1cddfb..d34b012bfa 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -588,7 +588,7 @@ border-top: none; grid-column: 1 / -1; background-color: var(--table-bg); - padding: 60px 40px; + padding: 40px; } .placeholder--no-fields { border-top: var(--table-border); diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 6a6b16b6fd..4442346653 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -28,7 +28,7 @@ $: id = $tables.selected?._id $: fetch = createFetch(id) $: hasCols = checkHasCols(schema) - $: hasRows = !!$fetch.data?.length + $: hasRows = !!$fetch.rows?.length const enrichSchema = schema => { let tempSchema = { ...schema } @@ -124,14 +124,17 @@ >
- + {#if !isUsersTable} {/if} {#if isInternal} @@ -169,11 +172,19 @@
- Let's create some columns! - - Start building out your table structure
- by adding some columns - + {#if !hasCols} + Let's create some columns + + Start building out your table structure
+ by adding some columns + + {:else} + Now let's add a row + + Add some data to your table
+ by adding some rows + + {/if}
From 526805d7e7b261838557a7558b2372cc71e24035 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 8 Apr 2022 10:28:07 +0100 Subject: [PATCH 06/22] Increase table title size and padding around table headers --- packages/bbui/src/Table/Table.svelte | 7 +++++++ .../builder/src/components/backend/DataTable/Table.svelte | 7 ++++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/bbui/src/Table/Table.svelte b/packages/bbui/src/Table/Table.svelte index d34b012bfa..863dc84040 100644 --- a/packages/bbui/src/Table/Table.svelte +++ b/packages/bbui/src/Table/Table.svelte @@ -470,6 +470,13 @@ justify-content: flex-start; align-items: center; user-select: none; + border-top: var(--table-border); + } + .spectrum-Table-headCell:first-of-type { + border-left: var(--table-border); + } + .spectrum-Table-headCell:last-of-type { + border-right: var(--table-border); } .spectrum-Table-headCell--alignCenter { justify-content: center; diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index 543b31ca4d..85b271dee8 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -118,10 +118,10 @@ -
+ {#if title}
- {title} + {title} {#if loading}
@@ -135,7 +135,7 @@ {/if}
-
+
{#key tableId}
div { margin-left: var(--spacing-xs); From 6be3c7c6248592308264bcdb35a4a69c2b51214b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 8 Apr 2022 10:35:13 +0100 Subject: [PATCH 07/22] Allow table buttons to wrap --- .../src/components/backend/DataTable/DataTable.svelte | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 4442346653..182fbf382e 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -217,5 +217,13 @@ flex-direction: row; justify-content: space-between; align-items: center; + flex-wrap: wrap; + } + .left-buttons, + .right-buttons { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; } From 61fb90e03d9b56d78d8ed290b9b30cfc36aac138 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 8 Apr 2022 10:37:45 +0100 Subject: [PATCH 08/22] Add spacing between title buttons --- .../builder/src/components/backend/DataTable/DataTable.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/builder/src/components/backend/DataTable/DataTable.svelte b/packages/builder/src/components/backend/DataTable/DataTable.svelte index 182fbf382e..6a1befd7e4 100644 --- a/packages/builder/src/components/backend/DataTable/DataTable.svelte +++ b/packages/builder/src/components/backend/DataTable/DataTable.svelte @@ -225,5 +225,6 @@ flex-direction: row; justify-content: flex-start; align-items: center; + gap: var(--spacing-m); } From 1c4294fb138f663f3a9d179f903b1260c5d10d54 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 13 Apr 2022 14:42:09 +0100 Subject: [PATCH 09/22] Fix sizing of create new app screen --- .../builder/src/pages/builder/portal/apps/create.svelte | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/apps/create.svelte b/packages/builder/src/pages/builder/portal/apps/create.svelte index cf1e3b66bd..cd2d47ea4c 100644 --- a/packages/builder/src/pages/builder/portal/apps/create.svelte +++ b/packages/builder/src/pages/builder/portal/apps/create.svelte @@ -75,8 +75,8 @@
- {createAppTitle} - + {createAppTitle} + {welcomeBody} @@ -84,7 +84,7 @@