backwards pagination
This commit is contained in:
parent
fde5ef02ac
commit
41bc7dbaf7
|
@ -64,7 +64,6 @@ export const getDatasourceForProvider = component => {
|
||||||
return {
|
return {
|
||||||
tableId: component[datasourceSetting?.key],
|
tableId: component[datasourceSetting?.key],
|
||||||
type: "table",
|
type: "table",
|
||||||
searchableOnly: datasourceSetting.searchableOnly,
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return null
|
return null
|
||||||
|
@ -196,12 +195,6 @@ export const getSchemaForDatasource = datasource => {
|
||||||
schema = cloneDeep(table.views?.[datasource.name]?.schema)
|
schema = cloneDeep(table.views?.[datasource.name]?.schema)
|
||||||
} else {
|
} else {
|
||||||
schema = cloneDeep(table.schema)
|
schema = cloneDeep(table.schema)
|
||||||
// Find searchable fields only
|
|
||||||
if (datasource.searchableOnly) {
|
|
||||||
Object.keys(table.schema).forEach(key => {
|
|
||||||
if (!table.schema[key].searchable) delete schema[key]
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -127,7 +127,7 @@
|
||||||
<Toggle
|
<Toggle
|
||||||
bind:checked={field.searchable}
|
bind:checked={field.searchable}
|
||||||
thin
|
thin
|
||||||
text="Searchable" />
|
text="Index for Search" />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if field.type === 'string'}
|
{#if field.type === 'string'}
|
||||||
|
|
|
@ -17,7 +17,6 @@
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
let anchorRight, dropdownRight
|
let anchorRight, dropdownRight
|
||||||
let drawer
|
let drawer
|
||||||
let tableDrawer
|
|
||||||
|
|
||||||
export let value = {}
|
export let value = {}
|
||||||
|
|
||||||
|
|
|
@ -233,6 +233,8 @@ exports.createIndex = async function(ctx) {
|
||||||
const appId = "app_1987903cf3604d459969c80cf17651a0"
|
const appId = "app_1987903cf3604d459969c80cf17651a0"
|
||||||
const db = new CouchDB(appId)
|
const db = new CouchDB(appId)
|
||||||
|
|
||||||
|
const indexes = await db.getIndexes()
|
||||||
|
|
||||||
// ctx.body = await db.get("_design/search_ddoc")
|
// ctx.body = await db.get("_design/search_ddoc")
|
||||||
ctx.body = await db.createIndex({
|
ctx.body = await db.createIndex({
|
||||||
index: {
|
index: {
|
||||||
|
@ -246,28 +248,32 @@ exports.createIndex = async function(ctx) {
|
||||||
}
|
}
|
||||||
|
|
||||||
exports.search = async function(ctx) {
|
exports.search = async function(ctx) {
|
||||||
const appId = ctx.user.appId
|
// const appId = ctx.user.appId
|
||||||
// const appId = "app_1987903cf3604d459969c80cf17651a0"
|
const appId = "app_1987903cf3604d459969c80cf17651a0"
|
||||||
|
|
||||||
const db = new CouchDB(appId)
|
const db = new CouchDB(appId)
|
||||||
|
|
||||||
const {
|
const {
|
||||||
query,
|
query,
|
||||||
pagination: { pageSize = 10, cursor },
|
pagination: { pageSize = 10, page },
|
||||||
} = ctx.request.body
|
} = ctx.request.body
|
||||||
|
|
||||||
query.tableId = ctx.params.tableId
|
query.tableId = ctx.params.tableId
|
||||||
|
|
||||||
// Paginating
|
// Paginating
|
||||||
if (cursor) {
|
// if (cursor) {
|
||||||
query._id = { $gte: cursor }
|
// if (backwards) {
|
||||||
}
|
// query._id = { $lte: cursor }
|
||||||
|
// } else {
|
||||||
|
// query._id = { $gte: cursor }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
const response = await db.find({
|
const response = await db.find({
|
||||||
selector: query,
|
selector: query,
|
||||||
limit: pageSize,
|
limit: pageSize,
|
||||||
sort: ["_id"],
|
skip: pageSize * page,
|
||||||
skip: 1,
|
// sort: ["_id"],
|
||||||
})
|
})
|
||||||
|
|
||||||
const rows = response.docs
|
const rows = response.docs
|
||||||
|
@ -279,6 +285,7 @@ exports.search = async function(ctx) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ctx.body = response
|
||||||
ctx.body = await linkRows.attachLinkInfo(appId, rows)
|
ctx.body = await linkRows.attachLinkInfo(appId, rows)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -130,8 +130,7 @@
|
||||||
{
|
{
|
||||||
"type": "table",
|
"type": "table",
|
||||||
"label": "Table",
|
"label": "Table",
|
||||||
"key": "table",
|
"key": "table"
|
||||||
"searchableOnly": true
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"type": "multifield",
|
"type": "multifield",
|
||||||
|
|
|
@ -25,15 +25,13 @@
|
||||||
let schema
|
let schema
|
||||||
|
|
||||||
// pagination
|
// pagination
|
||||||
let pagination = {
|
let page = 0
|
||||||
page: 1
|
|
||||||
}
|
|
||||||
|
|
||||||
$: fetchData(table, pagination)
|
$: fetchData(table, page)
|
||||||
// omit empty strings
|
// omit empty strings
|
||||||
$: parsedSearch = Object.keys(search).reduce((acc, next) => search[next] === "" ? acc : { ...acc, [next]: search[next] }, {})
|
$: parsedSearch = Object.keys(search).reduce((acc, next) => search[next] === "" ? acc : { ...acc, [next]: search[next] }, {})
|
||||||
|
|
||||||
async function fetchData(table, pagination) {
|
async function fetchData(table, page) {
|
||||||
if (!isEmpty(table)) {
|
if (!isEmpty(table)) {
|
||||||
const tableDef = await API.fetchTableDefinition(table)
|
const tableDef = await API.fetchTableDefinition(table)
|
||||||
schema = tableDef.schema
|
schema = tableDef.schema
|
||||||
|
@ -42,7 +40,7 @@
|
||||||
search: parsedSearch,
|
search: parsedSearch,
|
||||||
pagination: {
|
pagination: {
|
||||||
pageSize,
|
pageSize,
|
||||||
...pagination
|
page
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
@ -50,22 +48,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function nextPage() {
|
function nextPage() {
|
||||||
// set cursor to last element
|
page += 1
|
||||||
pagination = {
|
|
||||||
// lastCursor: rows[0],
|
|
||||||
cursor: rows[rows.length - 1]?._id,
|
|
||||||
reverse: true,
|
|
||||||
page: pagination.page += 1
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// TODO: implement
|
|
||||||
function previousPage() {
|
function previousPage() {
|
||||||
pagination = {
|
page -= 1
|
||||||
cursor: lastCursor,
|
|
||||||
reverse: true,
|
|
||||||
page: pagination.page - 1
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -99,9 +86,7 @@
|
||||||
secondary
|
secondary
|
||||||
on:click={() => {
|
on:click={() => {
|
||||||
search = {}
|
search = {}
|
||||||
pagination = {
|
page = 0
|
||||||
page: 1
|
|
||||||
}
|
|
||||||
}}>
|
}}>
|
||||||
Reset
|
Reset
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -124,12 +109,14 @@
|
||||||
<p>{noRowsMessage}</p>
|
<p>{noRowsMessage}</p>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
<!-- {#if pagination.page > 1}
|
<!-- <Button primary on:click={previousPage}>First</Button> -->
|
||||||
<Button blue on:click={previousPage}>Back</Button>
|
{#if page > 0}
|
||||||
{/if} -->
|
<Button primary on:click={previousPage}>Back</Button>
|
||||||
|
{/if}
|
||||||
{#if rows.length === pageSize}
|
{#if rows.length === pageSize}
|
||||||
<Button primary on:click={nextPage}>Next</Button>
|
<Button primary on:click={nextPage}>Next</Button>
|
||||||
{/if}
|
{/if}
|
||||||
|
<!-- <Button primary on:click={previousPage}>Last</Button> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -160,8 +147,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination {
|
.pagination {
|
||||||
display: flex;
|
display: grid;
|
||||||
|
grid-gap: var(--spacing-s);
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
margin-top: var(--spacing-m);
|
margin-top: var(--spacing-m);
|
||||||
|
grid-auto-flow: column;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue