Fix data table and grid rendering views

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 @@
 
 <div style="--grid-height: {height}px">
   {#if dataLoaded}
-    {#if editable}
+    {#if canAddDelete}
       <div class="controls">
         <CreateRowButton {_bb} {table} on:newRow={handleNewRow} />
         {#if selectedRows.length > 0}

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)}
       <tr>
         {#each headers as header}
-          {#if schema[header]}
+          {#if schema[header] !== undefined}
             <!-- Rudimentary solution for attachments on array given this entire table will be replaced by AG Grid -->
-            {#if schema[header].type === 'attachment'}
+            {#if schema[header] && schema[header].type === 'attachment'}
               <AttachmentList files={row[header]} />
-            {:else if schema[header].type === 'link'}
+            {:else if schema[header] && schema[header].type === 'link'}
               <td>{row[header] ? row[header].length : 0} related row(s)</td>
             {:else}
               <td>{row[header] == null ? '' : row[header]}</td>

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()