2021-03-17 02:54:34 +13:00
|
|
|
<script>
|
|
|
|
import { getContext } from "svelte"
|
2021-05-13 23:26:18 +12:00
|
|
|
import { ProgressCircle, Pagination } from "@budibase/bbui"
|
2021-05-28 02:11:08 +12:00
|
|
|
import {
|
|
|
|
buildLuceneQuery,
|
|
|
|
luceneQuery,
|
|
|
|
luceneSort,
|
|
|
|
luceneLimit,
|
|
|
|
} from "./lucene"
|
2021-03-17 02:54:34 +13:00
|
|
|
|
|
|
|
export let dataSource
|
|
|
|
export let filter
|
|
|
|
export let sortColumn
|
|
|
|
export let sortOrder
|
2021-05-13 23:26:18 +12:00
|
|
|
export let limit
|
|
|
|
export let paginate
|
2021-03-17 02:54:34 +13:00
|
|
|
|
|
|
|
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
|
2021-05-14 00:11:45 +12:00
|
|
|
let schemaLoaded = false
|
2021-03-17 02:54:34 +13:00
|
|
|
|
2021-05-01 03:29:53 +12:00
|
|
|
// Provider state
|
|
|
|
let rows = []
|
2021-05-11 22:24:16 +12:00
|
|
|
let allRows = []
|
2021-03-19 04:53:25 +13:00
|
|
|
let schema = {}
|
2021-05-01 03:29:53 +12:00
|
|
|
let bookmarks = [null]
|
|
|
|
let pageNumber = 0
|
2021-06-02 01:59:42 +12:00
|
|
|
let query = null
|
2021-03-19 04:53:25 +13:00
|
|
|
|
2021-05-28 02:11:08 +12:00
|
|
|
$: query = buildLuceneQuery(filter)
|
2021-06-02 01:59:42 +12:00
|
|
|
$: internalTable = dataSource?.type === "table"
|
|
|
|
$: nestedProvider = dataSource?.type === "provider"
|
2021-05-01 03:29:53 +12:00
|
|
|
$: hasNextPage = bookmarks[pageNumber + 1] != null
|
|
|
|
$: hasPrevPage = pageNumber > 0
|
2021-03-19 04:53:25 +13:00
|
|
|
$: getSchema(dataSource)
|
2021-05-11 22:24:16 +12:00
|
|
|
$: sortType = getSortType(schema, sortColumn)
|
|
|
|
$: {
|
2021-05-14 00:11:45 +12:00
|
|
|
// Wait until schema loads before loading data, so that we can determine
|
|
|
|
// the correct sort type first time
|
|
|
|
if (schemaLoaded) {
|
|
|
|
fetchData(
|
|
|
|
dataSource,
|
|
|
|
query,
|
|
|
|
limit,
|
|
|
|
sortColumn,
|
|
|
|
sortOrder,
|
|
|
|
sortType,
|
|
|
|
paginate
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
$: {
|
2021-05-11 22:24:16 +12:00
|
|
|
if (internalTable) {
|
2021-05-28 02:11:08 +12:00
|
|
|
// Internal tables are already processed server-side
|
2021-05-11 22:24:16 +12:00
|
|
|
rows = allRows
|
|
|
|
} else {
|
2021-05-28 02:11:08 +12:00
|
|
|
// For anything else we use client-side implementations to filter, sort
|
|
|
|
// and limit
|
|
|
|
const filtered = luceneQuery(allRows, query)
|
|
|
|
const sorted = luceneSort(filtered, sortColumn, sortOrder, sortType)
|
|
|
|
rows = luceneLimit(sorted, limit)
|
2021-05-11 22:24:16 +12:00
|
|
|
}
|
|
|
|
}
|
2021-03-17 02:54:34 +13:00
|
|
|
$: actions = [
|
|
|
|
{
|
|
|
|
type: ActionTypes.RefreshDatasource,
|
2021-05-28 02:11:08 +12:00
|
|
|
callback: () => refresh(),
|
2021-03-17 02:54:34 +13:00
|
|
|
metadata: { dataSource },
|
|
|
|
},
|
2021-06-02 01:59:42 +12:00
|
|
|
{
|
|
|
|
type: ActionTypes.SetDataProviderQuery,
|
|
|
|
callback: newQuery => (query = newQuery),
|
|
|
|
},
|
2021-03-17 02:54:34 +13:00
|
|
|
]
|
2021-06-02 01:59:42 +12:00
|
|
|
$: dataContext = {
|
|
|
|
rows,
|
|
|
|
schema,
|
|
|
|
rowsLength: rows.length,
|
|
|
|
|
|
|
|
// Undocumented properties. These aren't supposed to be used in builder
|
|
|
|
// bindings, but are used internally by other components
|
|
|
|
id: $component?.id,
|
|
|
|
state: { query },
|
|
|
|
}
|
2021-03-17 02:54:34 +13:00
|
|
|
|
2021-05-11 22:24:16 +12:00
|
|
|
const getSortType = (schema, sortColumn) => {
|
|
|
|
if (!schema || !sortColumn || !schema[sortColumn]) {
|
|
|
|
return "string"
|
|
|
|
}
|
|
|
|
const type = schema?.[sortColumn]?.type
|
|
|
|
return type === "number" ? "number" : "string"
|
|
|
|
}
|
|
|
|
|
2021-05-28 02:11:08 +12:00
|
|
|
const refresh = async () => {
|
2021-06-02 01:59:42 +12:00
|
|
|
if (schemaLoaded && !nestedProvider) {
|
2021-05-28 02:11:08 +12:00
|
|
|
fetchData(
|
|
|
|
dataSource,
|
|
|
|
query,
|
|
|
|
limit,
|
|
|
|
sortColumn,
|
|
|
|
sortOrder,
|
|
|
|
sortType,
|
|
|
|
paginate
|
|
|
|
)
|
2021-05-01 03:29:53 +12:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-05-11 22:24:16 +12:00
|
|
|
const fetchData = async (
|
|
|
|
dataSource,
|
|
|
|
query,
|
|
|
|
limit,
|
|
|
|
sortColumn,
|
|
|
|
sortOrder,
|
2021-05-13 23:26:18 +12:00
|
|
|
sortType,
|
|
|
|
paginate
|
2021-05-11 22:24:16 +12:00
|
|
|
) => {
|
2021-03-17 02:54:34 +13:00
|
|
|
loading = true
|
2021-05-01 03:29:53 +12:00
|
|
|
if (dataSource?.type === "table") {
|
2021-05-28 02:11:08 +12:00
|
|
|
// For internal tables we use server-side processing
|
2021-05-01 03:29:53 +12:00
|
|
|
const res = await API.searchTable({
|
|
|
|
tableId: dataSource.tableId,
|
|
|
|
query,
|
|
|
|
limit,
|
|
|
|
sort: sortColumn,
|
|
|
|
sortOrder: sortOrder?.toLowerCase() ?? "ascending",
|
2021-05-11 22:24:16 +12:00
|
|
|
sortType,
|
2021-05-13 23:26:18 +12:00
|
|
|
paginate,
|
2021-05-01 03:29:53 +12:00
|
|
|
})
|
|
|
|
pageNumber = 0
|
2021-05-11 22:24:16 +12:00
|
|
|
allRows = res.rows
|
2021-05-13 23:26:18 +12:00
|
|
|
if (res.hasNextPage) {
|
2021-05-01 03:29:53 +12:00
|
|
|
bookmarks = [null, res.bookmark]
|
|
|
|
} else {
|
|
|
|
bookmarks = [null]
|
|
|
|
}
|
2021-05-28 02:11:08 +12:00
|
|
|
} else if (dataSource?.type === "provider") {
|
|
|
|
// For providers referencing another provider, just use the rows it
|
|
|
|
// provides
|
|
|
|
allRows = dataSource?.value?.rows ?? []
|
2021-05-01 03:29:53 +12:00
|
|
|
} else {
|
2021-05-28 02:11:08 +12:00
|
|
|
// For other data sources like queries or views, fetch all rows from the
|
|
|
|
// server
|
|
|
|
allRows = await API.fetchDatasource(dataSource)
|
2021-05-01 03:29:53 +12:00
|
|
|
}
|
2021-03-17 02:54:34 +13:00
|
|
|
loading = false
|
2021-03-17 08:11:00 +13:00
|
|
|
loaded = true
|
2021-03-17 02:54:34 +13:00
|
|
|
}
|
|
|
|
|
2021-05-11 22:24:16 +12:00
|
|
|
const getSchema = async dataSource => {
|
2021-03-19 04:53:25 +13:00
|
|
|
if (dataSource?.schema) {
|
|
|
|
schema = dataSource.schema
|
|
|
|
} else if (dataSource?.tableId) {
|
|
|
|
const definition = await API.fetchTableDefinition(dataSource.tableId)
|
|
|
|
schema = definition?.schema ?? {}
|
2021-05-28 02:11:08 +12:00
|
|
|
} else if (dataSource?.type === "provider") {
|
|
|
|
schema = dataSource.value?.schema ?? {}
|
2021-03-19 04:53:25 +13:00
|
|
|
} else {
|
|
|
|
schema = {}
|
|
|
|
}
|
2021-03-25 21:14:53 +13:00
|
|
|
|
2021-05-04 22:04:42 +12:00
|
|
|
// Ensure there are "name" properties for all fields and that field schema
|
|
|
|
// are objects
|
|
|
|
let fixedSchema = {}
|
|
|
|
Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
|
|
|
|
if (typeof fieldSchema === "string") {
|
|
|
|
fixedSchema[fieldName] = {
|
|
|
|
type: fieldSchema,
|
|
|
|
name: fieldName,
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
fixedSchema[fieldName] = {
|
|
|
|
...fieldSchema,
|
|
|
|
name: fieldName,
|
|
|
|
}
|
2021-03-25 21:14:53 +13:00
|
|
|
}
|
|
|
|
})
|
2021-05-04 22:04:42 +12:00
|
|
|
schema = fixedSchema
|
2021-05-14 00:11:45 +12:00
|
|
|
schemaLoaded = true
|
2021-03-19 04:53:25 +13:00
|
|
|
}
|
2021-05-01 03:29:53 +12:00
|
|
|
|
|
|
|
const nextPage = async () => {
|
2021-05-12 06:07:52 +12:00
|
|
|
if (!hasNextPage || !internalTable) {
|
2021-05-01 03:29:53 +12:00
|
|
|
return
|
|
|
|
}
|
|
|
|
const res = await API.searchTable({
|
|
|
|
tableId: dataSource?.tableId,
|
|
|
|
query,
|
|
|
|
bookmark: bookmarks[pageNumber + 1],
|
|
|
|
limit,
|
|
|
|
sort: sortColumn,
|
|
|
|
sortOrder: sortOrder?.toLowerCase() ?? "ascending",
|
2021-05-11 22:24:16 +12:00
|
|
|
sortType,
|
2021-05-13 23:26:18 +12:00
|
|
|
paginate: true,
|
2021-05-01 03:29:53 +12:00
|
|
|
})
|
|
|
|
pageNumber++
|
2021-05-11 22:24:16 +12:00
|
|
|
allRows = res.rows
|
2021-05-13 23:26:18 +12:00
|
|
|
if (res.hasNextPage) {
|
2021-05-01 03:29:53 +12:00
|
|
|
bookmarks[pageNumber + 1] = res.bookmark
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const prevPage = async () => {
|
2021-05-12 06:07:52 +12:00
|
|
|
if (!hasPrevPage || !internalTable) {
|
2021-05-01 03:29:53 +12:00
|
|
|
return
|
|
|
|
}
|
|
|
|
const res = await API.searchTable({
|
|
|
|
tableId: dataSource?.tableId,
|
|
|
|
query,
|
|
|
|
bookmark: bookmarks[pageNumber - 1],
|
|
|
|
limit,
|
|
|
|
sort: sortColumn,
|
|
|
|
sortOrder: sortOrder?.toLowerCase() ?? "ascending",
|
2021-05-11 22:24:16 +12:00
|
|
|
sortType,
|
2021-05-13 23:26:18 +12:00
|
|
|
paginate: true,
|
2021-05-01 03:29:53 +12:00
|
|
|
})
|
|
|
|
pageNumber--
|
2021-05-11 22:24:16 +12:00
|
|
|
allRows = res.rows
|
2021-05-01 03:29:53 +12:00
|
|
|
}
|
2021-03-17 02:54:34 +13:00
|
|
|
</script>
|
|
|
|
|
2021-05-13 23:26:18 +12:00
|
|
|
<div use:styleable={$component.styles} class="container">
|
2021-04-29 20:41:49 +12:00
|
|
|
<Provider {actions} data={dataContext}>
|
2021-05-14 03:33:19 +12:00
|
|
|
{#if !loaded}
|
2021-05-13 23:26:18 +12:00
|
|
|
<div class="loading">
|
|
|
|
<ProgressCircle />
|
|
|
|
</div>
|
|
|
|
{:else}
|
|
|
|
<slot />
|
2021-05-15 00:29:37 +12:00
|
|
|
{#if paginate && internalTable}
|
2021-05-13 23:26:18 +12:00
|
|
|
<div class="pagination">
|
|
|
|
<Pagination
|
|
|
|
page={pageNumber + 1}
|
|
|
|
{hasPrevPage}
|
|
|
|
{hasNextPage}
|
|
|
|
goToPrevPage={prevPage}
|
|
|
|
goToNextPage={nextPage}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
{/if}
|
2021-04-29 20:41:49 +12:00
|
|
|
</Provider>
|
|
|
|
</div>
|
2021-05-13 23:26:18 +12:00
|
|
|
|
|
|
|
<style>
|
|
|
|
.container {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: flex-start;
|
|
|
|
align-items: stretch;
|
|
|
|
}
|
|
|
|
.loading {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
height: 100px;
|
|
|
|
}
|
|
|
|
.pagination {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: flex-end;
|
|
|
|
align-items: center;
|
|
|
|
margin-top: var(--spacing-xl);
|
|
|
|
}
|
|
|
|
</style>
|