diff --git a/packages/builder/package.json b/packages/builder/package.json index 0ca766de36..f77060c1da 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -66,7 +66,7 @@ "@budibase/bbui": "^1.44.1", "@budibase/client": "^0.2.6", "@budibase/colorpicker": "^1.0.1", - "@budibase/svelte-ag-grid": "^0.0.15", + "@budibase/svelte-ag-grid": "^0.0.16", "@fortawesome/fontawesome-free": "^5.14.0", "@sentry/browser": "5.19.1", "@svelteschool/svelte-forms": "^0.7.0", diff --git a/packages/builder/src/components/backend/DataTable/Table.old.svelte b/packages/builder/src/components/backend/DataTable/Table.old.svelte deleted file mode 100644 index 3fa42aeb7c..0000000000 --- a/packages/builder/src/components/backend/DataTable/Table.old.svelte +++ /dev/null @@ -1,233 +0,0 @@ - - -
-
-

- {title} - {#if loading} -
- -
- {/if} -

-
- -
-
- - - - {#if allowEditing} - - {/if} - {#each columns as header} - - {/each} - - - - {#if paginatedData.length === 0} - {#if allowEditing} - - {/if} - {#each columns as header, idx} - - {/each} - {/if} - {#each paginatedData as row} - - {#if allowEditing} - - {/if} - {#each columns as header} - - {/each} - - {/each} - -
-
Edit
- 		- {#if allowEditing} - - {:else} -
{header}
- {/if} -
No data. - {#if idx === 0 && !allowEditing}No data.{/if} -
- - - {#if schema[header].type === 'link'} -
selectRelationship(row, header)}> - {row[header] ? row[header].length : 0} - related row(s) -
- {:else if schema[header].type === 'attachment'} - - {:else}{getOr('', header, row)}{/if} -
- -
- - diff --git a/packages/builder/src/components/backend/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte index ab405156c6..acb4c4e6c0 100644 --- a/packages/builder/src/components/backend/DataTable/Table.svelte +++ b/packages/builder/src/components/backend/DataTable/Table.svelte @@ -3,10 +3,15 @@ import { goto, params } from "@sveltech/routify" import Spinner from "components/common/Spinner.svelte" import AgGrid from "@budibase/svelte-ag-grid" - import { getRenderer, editRowRenderer } from "./cells/cellRenderers"; + import { + getRenderer, + editRowRenderer, + } from "./cells/cellRenderers" + import TableLoadingOverlay from "./TableLoadingOverlay" import TableHeader from "./TableHeader" + import "@budibase/svelte-ag-grid/dist/index.css" - export let schema = [] + export let schema = {} export let data = [] export let title export let allowEditing = false @@ -28,9 +33,12 @@ pagination: true, enableRangeSelection: true, popupParent: document.body, + components: { + customLoadingOverlay: TableLoadingOverlay, + }, + loadingOverlayComponent: "customLoadingOverlay", } - // TODO: refactor $: { let result = [] if (allowEditing) { @@ -43,25 +51,31 @@ suppressMenu: true, minWidth: 75, width: 75, - cellRenderer: editRowRenderer + cellRenderer: editRowRenderer, }) } - columnDefs = [...result, ...Object.keys(schema || {}).map(key => ({ - headerComponent: TableHeader, - headerComponentParams: { - field: schema[key] - }, - headerName: key, - field: key, - sortable: true, - cellRenderer: getRenderer(schema[key], true), - cellRendererParams: { - selectRelationship - }, - autoHeight: true, - resizable: true, - minWidth: 200, - }))] + + for (let key in schema) { + result.push({ + headerComponent: TableHeader, + headerComponentParams: { + field: schema[key], + editable: allowEditing, + }, + headerName: key, + field: key, + sortable: true, + cellRenderer: getRenderer(schema[key], true), + cellRendererParams: { + selectRelationship, + }, + autoHeight: true, + resizable: true, + minWidth: 200, + }) + } + + columnDefs = result } function selectRelationship(row, fieldName) { @@ -76,24 +90,12 @@
-

- {title} - {#if loading} -
- -
- {/if} -

+

{title}

- +
diff --git a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte index 72ad6efa0a..388b081c99 100644 --- a/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte +++ b/packages/builder/src/components/backend/DataTable/TableHeader/TableHeader.svelte @@ -1,7 +1,7 @@ + +
+
+ Budibase icon + Loading Your Data + +
+
+ + diff --git a/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js new file mode 100644 index 0000000000..886391d537 --- /dev/null +++ b/packages/builder/src/components/backend/DataTable/TableLoadingOverlay/index.js @@ -0,0 +1,17 @@ +import LoadingOverlay from "./LoadingOverlay.svelte" + +export default class LoadingOverlayWrapper { + init(params) { + this.gui = document.createElement("div") + new LoadingOverlay({ + target: this.gui, + props: { + params, + }, + }) + } + + getGui() { + return this.gui + } +} diff --git a/packages/builder/src/components/backend/DataTable/TablePagination.svelte b/packages/builder/src/components/backend/DataTable/TablePagination.svelte deleted file mode 100644 index ca5a58700d..0000000000 --- a/packages/builder/src/components/backend/DataTable/TablePagination.svelte +++ /dev/null @@ -1,136 +0,0 @@ - - - - - diff --git a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte index 7694a39951..7677451a44 100644 --- a/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte +++ b/packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte @@ -6,7 +6,7 @@ Modal, ModalContent, } from "@budibase/bbui" - import CreateEditColumnPopover from "../popovers/CreateEditColumnPopover.svelte" + import CreateEditColumn from "../modals/CreateEditColumn.svelte" let modal let fieldName @@ -23,6 +23,6 @@ showCancelButton={false} showConfirmButton={false} title={'Create Column'}> - + diff --git a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte index f5d0baa87f..290ff0cf28 100644 --- a/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte +++ b/packages/builder/src/components/backend/DataTable/cells/RelationshipCell.svelte @@ -9,9 +9,7 @@ : 0 -
selectRelationship(row, columnName)}> +
selectRelationship(row, columnName)}> {count} related row(s)
diff --git a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js index e0a450b370..28a49f3aaf 100644 --- a/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js +++ b/packages/builder/src/components/backend/DataTable/cells/cellRenderers.js @@ -1,6 +1,7 @@ import AttachmentList from "./AttachmentCell.svelte" import EditRowPopover from "../popovers/RowPopover.svelte" import RelationshipDisplay from "./RelationshipCell.svelte" +import LoadingOverlay from "./LoadingOverlay.svelte" const renderers = { attachment: attachmentRenderer, @@ -28,7 +29,6 @@ export function editRowRenderer(params) { return container } - /* eslint-disable no-unused-vars */ function attachmentRenderer(options, constraints, editable) { return params => { @@ -57,7 +57,7 @@ function linkedRowRenderer() { props: { row: params.data, columnName: params.column.colId, - selectRelationship: params.selectRelationship + selectRelationship: params.selectRelationship, }, }) diff --git a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte similarity index 98% rename from packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte rename to packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte index ff6fa33f9c..3682b38ce2 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/CreateEditColumnPopover.svelte +++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte @@ -1,10 +1,5 @@ - -
- {field.name} - -
- - {#if editing} -
Edit Column
- - {:else} -
    - {#if type !== 'link'} -
  • - - Edit -
    • - {/if} -
  • - - Delete -
    • - {#if sortDirection === 'desc' || sortDirection === 'asc'} -
  • sort('none', field.name)}> - - Remove sort -
    • - {/if} - {#if sortDirection === 'desc' || sortColumn !== field.name} -
  • sort('asc', field.name)}> - - Sort A - Z -
    • - {/if} - {#if sortDirection === 'asc' || sortColumn !== field.name} -
  • sort('desc', field.name)}> - - Sort Z - A -
    • - {/if} -
- {/if} - - - - diff --git a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte index 883794bc76..f844cdefae 100644 --- a/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte +++ b/packages/builder/src/components/backend/DataTable/popovers/ColumnPopover.svelte @@ -1,4 +1,3 @@ - -
- -
+