backwards pagination

This commit is contained in:
Martin McKeaveney 2021-02-09 12:12:03 +00:00
parent 36f3bbf6dd
commit 05353c7666
6 changed files with 32 additions and 45 deletions

View File

@ -64,7 +64,6 @@ export const getDatasourceForProvider = component => {
return {
tableId: component[datasourceSetting?.key],
type: "table",
searchableOnly: datasourceSetting.searchableOnly,
}
}
return null
@ -196,12 +195,6 @@ export const getSchemaForDatasource = datasource => {
schema = cloneDeep(table.views?.[datasource.name]?.schema)
} else {
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
bind:checked={field.searchable}
thin
text="Searchable" />
text="Index for Search" />
{/if}
{#if field.type === 'string'}

View File

@ -17,7 +17,6 @@
const dispatch = createEventDispatcher()
let anchorRight, dropdownRight
let drawer
let tableDrawer
export let value = {}

View File

@ -233,6 +233,8 @@ exports.createIndex = async function(ctx) {
const appId = "app_1987903cf3604d459969c80cf17651a0"
const db = new CouchDB(appId)
const indexes = await db.getIndexes()
// ctx.body = await db.get("_design/search_ddoc")
ctx.body = await db.createIndex({
index: {
@ -246,28 +248,32 @@ exports.createIndex = async function(ctx) {
}
exports.search = async function(ctx) {
const appId = ctx.user.appId
// const appId = "app_1987903cf3604d459969c80cf17651a0"
// const appId = ctx.user.appId
const appId = "app_1987903cf3604d459969c80cf17651a0"
const db = new CouchDB(appId)
const {
query,
pagination: { pageSize = 10, cursor },
pagination: { pageSize = 10, page },
} = ctx.request.body
query.tableId = ctx.params.tableId
// Paginating
if (cursor) {
query._id = { $gte: cursor }
}
// if (cursor) {
// if (backwards) {
// query._id = { $lte: cursor }
// } else {
// query._id = { $gte: cursor }
// }
// }
const response = await db.find({
selector: query,
limit: pageSize,
sort: ["_id"],
skip: 1,
skip: pageSize * page,
// sort: ["_id"],
})
const rows = response.docs
@ -279,6 +285,7 @@ exports.search = async function(ctx) {
}
}
// ctx.body = response
ctx.body = await linkRows.attachLinkInfo(appId, rows)
}

View File

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

View File

@ -25,15 +25,13 @@
let schema
// pagination
let pagination = {
page: 1
}
let page = 0
$: fetchData(table, pagination)
$: fetchData(table, page)
// omit empty strings
$: 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)) {
const tableDef = await API.fetchTableDefinition(table)
schema = tableDef.schema
@ -42,7 +40,7 @@
search: parsedSearch,
pagination: {
pageSize,
...pagination
page
}
})
}
@ -50,22 +48,11 @@
}
function nextPage() {
// set cursor to last element
pagination = {
// lastCursor: rows[0],
cursor: rows[rows.length - 1]?._id,
reverse: true,
page: pagination.page += 1
}
page += 1
}
// TODO: implement
function previousPage() {
pagination = {
cursor: lastCursor,
reverse: true,
page: pagination.page - 1
}
page -= 1
}
</script>
@ -99,9 +86,7 @@
secondary
on:click={() => {
search = {}
pagination = {
page: 1
}
page = 0
}}>
Reset
</Button>
@ -124,12 +109,14 @@
<p>{noRowsMessage}</p>
{/if}
<div class="pagination">
<!-- {#if pagination.page > 1}
<Button blue on:click={previousPage}>Back</Button>
{/if} -->
<!-- <Button primary on:click={previousPage}>First</Button> -->
{#if page > 0}
<Button primary on:click={previousPage}>Back</Button>
{/if}
{#if rows.length === pageSize}
<Button primary on:click={nextPage}>Next</Button>
{/if}
<!-- <Button primary on:click={previousPage}>Last</Button> -->
</div>
</div>
@ -160,8 +147,10 @@
}
.pagination {
display: flex;
display: grid;
grid-gap: var(--spacing-s);
justify-content: flex-end;
margin-top: var(--spacing-m);
grid-auto-flow: column;
}
</style>