Update grid to support data providers
This commit is contained in:
parent
1ccbe140b8
commit
8b9f5692ab
2 changed files with 10 additions and 23 deletions
|
@ -15,9 +15,9 @@
|
||||||
"styleable": true,
|
"styleable": true,
|
||||||
"settings": [
|
"settings": [
|
||||||
{
|
{
|
||||||
"type": "datasource",
|
"type": "dataProvider",
|
||||||
"label": "Source",
|
"label": "Data",
|
||||||
"key": "datasource"
|
"key": "dataProvider"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "detailScreen",
|
"type": "detailScreen",
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
const component = getContext("component")
|
const component = getContext("component")
|
||||||
const { API, styleable } = SDK
|
const { API, styleable } = SDK
|
||||||
|
|
||||||
export let datasource = {}
|
export let dataProvider
|
||||||
export let editable
|
export let editable
|
||||||
export let theme = "alpine"
|
export let theme = "alpine"
|
||||||
export let height = 500
|
export let height = 500
|
||||||
|
@ -33,15 +33,15 @@
|
||||||
["--grid-height"]: `${height}px`,
|
["--grid-height"]: `${height}px`,
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
$: fetchData(datasource)
|
$: setUpGrid(dataProvider)
|
||||||
|
$: dataLoaded = dataProvider?.loaded
|
||||||
|
$: data = dataProvider?.rows
|
||||||
|
|
||||||
// These can never change at runtime so don't need to be reactive
|
// These can never change at runtime so don't need to be reactive
|
||||||
let canEdit = editable && datasource && datasource.type !== "view"
|
let canEdit = editable && datasource && datasource.type !== "view"
|
||||||
let canAddDelete = editable && datasource && datasource.type === "table"
|
let canAddDelete = editable && datasource && datasource.type === "table"
|
||||||
|
|
||||||
let modal
|
let modal
|
||||||
let dataLoaded = false
|
|
||||||
let data
|
|
||||||
let columnDefs
|
let columnDefs
|
||||||
let selectedRows = []
|
let selectedRows = []
|
||||||
let table
|
let table
|
||||||
|
@ -58,23 +58,12 @@
|
||||||
pagination,
|
pagination,
|
||||||
}
|
}
|
||||||
|
|
||||||
async function fetchData(datasource) {
|
async function setUpGrid(dataProvider) {
|
||||||
if (isEmpty(datasource)) {
|
if (!dataProvider) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
data = await API.fetchDatasource(datasource)
|
|
||||||
|
|
||||||
let schema
|
|
||||||
|
|
||||||
// Get schema for datasource
|
|
||||||
// Views with "Calculate" applied provide their own schema.
|
|
||||||
// For everything else, use the tableId property to pull to table schema
|
|
||||||
if (datasource.schema) {
|
|
||||||
schema = datasource.schema
|
|
||||||
} else {
|
|
||||||
schema = (await API.fetchTableDefinition(datasource.tableId)).schema
|
|
||||||
}
|
|
||||||
|
|
||||||
|
const { schema } = dataProvider
|
||||||
columnDefs = Object.keys(schema).map((key, i) => {
|
columnDefs = Object.keys(schema).map((key, i) => {
|
||||||
return {
|
return {
|
||||||
headerCheckboxSelection: i === 0 && canEdit,
|
headerCheckboxSelection: i === 0 && canEdit,
|
||||||
|
@ -115,8 +104,6 @@
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
dataLoaded = true
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const shouldHideField = name => {
|
const shouldHideField = name => {
|
||||||
|
|
Loading…
Reference in a new issue