backwards pagination

This commit is contained in:
Martin McKeaveney 2021-02-09 12:12:03 +00:00
parent fde5ef02ac
commit 41bc7dbaf7
6 changed files with 32 additions and 45 deletions

View File

@ -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]
})
}
} }
} }
} }

View File

@ -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'}

View File

@ -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 = {}

View File

@ -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)
} }

View File

@ -130,8 +130,7 @@
{ {
"type": "table", "type": "table",
"label": "Table", "label": "Table",
"key": "table", "key": "table"
"searchableOnly": true
}, },
{ {
"type": "multifield", "type": "multifield",

View File

@ -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>