From 8a10ea899c06fed1eba74b22c61e59d90bbbf618 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 13 Oct 2020 19:58:36 +0100 Subject: [PATCH] Fix data table and grid rendering views --- .../src/DataGrid/Component.svelte | 66 ++++++++++++------- .../standard-components/src/DataTable.svelte | 18 +++-- packages/standard-components/src/fetchData.js | 15 +++-- 3 files changed, 63 insertions(+), 36 deletions(-) diff --git a/packages/standard-components/src/DataGrid/Component.svelte b/packages/standard-components/src/DataGrid/Component.svelte index b7a277435d..c6522f56b4 100644 --- a/packages/standard-components/src/DataGrid/Component.svelte +++ b/packages/standard-components/src/DataGrid/Component.svelte @@ -21,6 +21,11 @@ export let height = 500 export let pagination + // These can never change at runtime so don't need to be reactive + let canEdit = editable && datasource && datasource.type !== "view" + let canAddDelete = editable && datasource && datasource.type === "model" + + let store = _bb.store let dataLoaded = false let data let columnDefs @@ -32,35 +37,50 @@ minWidth: 150, filter: true, }, - rowSelection: editable ? "multiple" : false, - suppressRowClickSelection: !editable, + rowSelection: canEdit ? "multiple" : false, + suppressRowClickSelection: !canEdit, paginationAutoPageSize: true, pagination, } - let store = _bb.store onMount(async () => { - if (datasource.tableId) { - const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`) - table = await jsonTable.json() - const { schema } = table - if (!isEmpty(datasource)) { - data = await fetchData(datasource, $store) - columnDefs = Object.keys(schema).map((key, i) => { - return { - headerCheckboxSelection: i === 0 && editable, - checkboxSelection: i === 0 && editable, - valueSetter: setters.get(schema[key].type), - headerName: key.charAt(0).toUpperCase() + key.slice(1), - field: key, - hide: shouldHideField(key), - sortable: true, - editable: editable, - cellRenderer: getRenderer(schema[key], editable), - autoHeight: true, - } + if (datasource != null) { + data = await fetchData(datasource, $store) + let schemaKeys = [] + let schema = {} + + // Get schema for datasource + if (datasource.type === "view") { + // For views, use the first object as the schema and pretend it's all strings + if (data && data.length) { + schemaKeys = Object.keys(data[0]) + } + schema = {} + schemaKeys.forEach(key => { + schema[key] = "string" }) + } else { + // Fetch the real schema for the table or relationship + const jsonTable = await _bb.api.get(`/api/tables/${datasource.tableId}`) + table = await jsonTable.json() + schema = table.schema + schemaKeys = Object.keys(schema) } + + columnDefs = schemaKeys.map((key, i) => { + return { + headerCheckboxSelection: i === 0 && canEdit, + checkboxSelection: i === 0 && canEdit, + valueSetter: setters.get(schema[key].type), + headerName: key.charAt(0).toUpperCase() + key.slice(1), + field: key, + hide: shouldHideField(key), + sortable: true, + editable: canEdit, + cellRenderer: getRenderer(schema[key], canEdit), + autoHeight: true, + } + }) dataLoaded = true } }) @@ -117,7 +137,7 @@
{#if dataLoaded} - {#if editable} + {#if canAddDelete}
{#if selectedRows.length > 0} diff --git a/packages/standard-components/src/DataTable.svelte b/packages/standard-components/src/DataTable.svelte index 896ca6a5ca..3344de1258 100644 --- a/packages/standard-components/src/DataTable.svelte +++ b/packages/standard-components/src/DataTable.svelte @@ -35,15 +35,20 @@ const FETCH_TABLE_URL = `/api/tables/${tableId}` const response = await _bb.api.get(FETCH_TABLE_URL) const table = await response.json() - schema = table.schema + return table.schema } onMount(async () => { if (!isEmpty(datasource)) { data = await fetchData(datasource, $store) if (data && data.length) { - await fetchTable(data[0].tableId) - headers = Object.keys(schema).filter(shouldDisplayField) + if (datasource.type === "view") { + schema = data[0] + headers = Object.keys(schema).filter(shouldDisplayField) + } else { + schema = await fetchTable(datasource.tableId) + headers = Object.keys(schema) + } } } }) @@ -54,7 +59,6 @@ if (name === "type") return false // tables are always tied to a single tableId, this is irrelevant if (name === "tableId") return false - return true } @@ -95,11 +99,11 @@ {#each sorted as row (row._id)} {#each headers as header} - {#if schema[header]} + {#if schema[header] !== undefined} - {#if schema[header].type === 'attachment'} + {#if schema[header] && schema[header].type === 'attachment'} - {:else if schema[header].type === 'link'} + {:else if schema[header] && schema[header].type === 'link'} {row[header] ? row[header].length : 0} related row(s) {:else} {row[header] == null ? '' : row[header]} diff --git a/packages/standard-components/src/fetchData.js b/packages/standard-components/src/fetchData.js index 27f3fb9e12..a9fc45bcf4 100644 --- a/packages/standard-components/src/fetchData.js +++ b/packages/standard-components/src/fetchData.js @@ -6,16 +6,16 @@ export default async function fetchData(datasource, store) { if (name) { let rows = [] if (type === "table") { - rows = await fetchTableData() + rows = fetchTableData() } else if (type === "view") { - rows = await fetchViewData() + rows = fetchViewData() } else if (type === "link") { - rows = await fetchLinkedRowsData() + rows = fetchLinkedRowsData() } // Fetch table schema so we can check for linked rows if (rows && rows.length) { - const table = await fetchTable(rows[0].tableId) + const table = await fetchTable() const keys = Object.keys(table.schema) rows.forEach(row => { for (let key of keys) { @@ -27,10 +27,12 @@ export default async function fetchData(datasource, store) { } return rows + } else { + return [] } - async function fetchTable(id) { - const FETCH_TABLE_URL = `/api/tables/${id}` + async function fetchTable() { + const FETCH_TABLE_URL = `/api/tables/${datasource.tableId}` const response = await api.get(FETCH_TABLE_URL) return await response.json() } @@ -44,6 +46,7 @@ export default async function fetchData(datasource, store) { } async function fetchViewData() { + console.log("fetching view") const { field, groupBy } = datasource const params = new URLSearchParams()