2021-03-16 14:54:34 +01:00
|
|
|
<script>
|
|
|
|
import { getContext } from "svelte"
|
|
|
|
|
|
|
|
export let dataSource
|
|
|
|
export let filter
|
|
|
|
export let sortColumn
|
|
|
|
export let sortOrder
|
|
|
|
export let limit
|
|
|
|
|
|
|
|
const { API, styleable, Provider, ActionTypes } = getContext("sdk")
|
|
|
|
const component = getContext("component")
|
|
|
|
|
|
|
|
// Loading flag every time data is being fetched
|
|
|
|
let loading = false
|
|
|
|
|
|
|
|
// Loading flag for the initial load
|
|
|
|
let loaded = false
|
|
|
|
|
|
|
|
let allRows = []
|
2021-03-18 16:53:25 +01:00
|
|
|
let schema = {}
|
|
|
|
|
2021-03-16 14:54:34 +01:00
|
|
|
$: fetchData(dataSource)
|
|
|
|
$: filteredRows = filterRows(allRows, filter)
|
|
|
|
$: sortedRows = sortRows(filteredRows, sortColumn, sortOrder)
|
|
|
|
$: rows = limitRows(sortedRows, limit)
|
2021-03-18 16:53:25 +01:00
|
|
|
$: getSchema(dataSource)
|
2021-03-16 14:54:34 +01:00
|
|
|
$: actions = [
|
|
|
|
{
|
|
|
|
type: ActionTypes.RefreshDatasource,
|
|
|
|
callback: () => fetchData(dataSource),
|
|
|
|
metadata: { dataSource },
|
|
|
|
},
|
|
|
|
]
|
|
|
|
$: dataContext = {
|
|
|
|
rows,
|
2021-03-18 16:53:25 +01:00
|
|
|
schema,
|
2021-03-16 14:54:34 +01:00
|
|
|
rowsLength: rows.length,
|
|
|
|
loading,
|
|
|
|
loaded,
|
|
|
|
}
|
|
|
|
|
|
|
|
const fetchData = async dataSource => {
|
|
|
|
loading = true
|
|
|
|
allRows = await API.fetchDatasource(dataSource)
|
|
|
|
loading = false
|
2021-03-16 20:11:00 +01:00
|
|
|
loaded = true
|
2021-03-16 14:54:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const filterRows = (rows, filter) => {
|
|
|
|
if (!Object.keys(filter || {}).length) {
|
|
|
|
return rows
|
|
|
|
}
|
|
|
|
let filteredData = [...rows]
|
|
|
|
Object.entries(filter).forEach(([field, value]) => {
|
|
|
|
if (value != null && value !== "") {
|
|
|
|
filteredData = filteredData.filter(row => {
|
|
|
|
return row[field] === value
|
|
|
|
})
|
|
|
|
}
|
|
|
|
})
|
|
|
|
return filteredData
|
|
|
|
}
|
|
|
|
|
|
|
|
const sortRows = (rows, sortColumn, sortOrder) => {
|
|
|
|
if (!sortColumn || !sortOrder) {
|
|
|
|
return rows
|
|
|
|
}
|
|
|
|
return rows.slice().sort((a, b) => {
|
|
|
|
const colA = a[sortColumn]
|
|
|
|
const colB = b[sortColumn]
|
2021-03-16 20:11:00 +01:00
|
|
|
if (sortOrder === "Descending") {
|
2021-03-16 14:54:34 +01:00
|
|
|
return colA > colB ? -1 : 1
|
|
|
|
} else {
|
|
|
|
return colA > colB ? 1 : -1
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
const limitRows = (rows, limit) => {
|
|
|
|
const numLimit = parseFloat(limit)
|
|
|
|
if (isNaN(numLimit)) {
|
|
|
|
return rows
|
|
|
|
}
|
|
|
|
return rows.slice(0, numLimit)
|
|
|
|
}
|
2021-03-18 16:53:25 +01:00
|
|
|
|
|
|
|
const getSchema = async dataSource => {
|
|
|
|
if (dataSource?.schema) {
|
|
|
|
schema = dataSource.schema
|
|
|
|
} else if (dataSource?.tableId) {
|
|
|
|
const definition = await API.fetchTableDefinition(dataSource.tableId)
|
|
|
|
schema = definition?.schema ?? {}
|
|
|
|
} else {
|
|
|
|
schema = {}
|
|
|
|
}
|
2021-03-25 09:14:53 +01:00
|
|
|
|
|
|
|
// Ensure all schema fields have a name property
|
|
|
|
Object.entries(schema).forEach(([key, value]) => {
|
|
|
|
if (!value.name) {
|
|
|
|
value.name = key
|
|
|
|
}
|
|
|
|
})
|
2021-03-18 16:53:25 +01:00
|
|
|
}
|
2021-03-16 14:54:34 +01:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<Provider {actions} data={dataContext}>
|
|
|
|
<slot />
|
|
|
|
</Provider>
|