Qortal/qortal-ui
1
0
Fork 0
mirror of https://github.com/Qortal/qortal-ui.git synced 2025-03-30 17:25:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix pagination buttons

Browse Source
This commit is contained in:
AlphaX-Projects 2022-03-17 20:20:18 +01:00 committed by GitHub
parent 81706d923e
commit aea56efe74
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
qortal-ui-plugins/plugins/core/qdn/websites.src.js
View File

@ -292,7 +292,7 @@ class Websites extends LitElement {
</div> </div>
<div class="divCard"> <div class="divCard">
<h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Websites</h3> <h3 style="margin: 0; margin-bottom: 1em; text-align: center;">Websites</h3>
<vaadin-grid theme="wrap-cell-content" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.resources)}" aria-label="Websites" page-size="20" all-rows-visible> <vaadin-grid theme="wrap-cell-content" id="resourcesGrid" ?hidden="${this.isEmptyArray(this.pageRes)}" .items="${this.pageRes}" aria-label="Websites" all-rows-visible>
<vaadin-grid-column width="7rem" flex-grow="0" header="Avatar" .renderer=${(root, column, data) => { <vaadin-grid-column width="7rem" flex-grow="0" header="Avatar" .renderer=${(root, column, data) => {
render(html`${this.renderAvatar(data.item)}`, root) render(html`${this.renderAvatar(data.item)}`, root)
}}> }}>
@ -315,10 +315,10 @@ class Websites extends LitElement {
</vaadin-grid-column> </vaadin-grid-column>
</vaadin-grid> </vaadin-grid>
<div id="pages"></div> <div id="pages"></div>
${this.resources == null ? html` ${this.pageRes == null ? html`
Loading... Loading...
`: ''} `: ''}
${this.isEmptyArray(this.resources) ? html` ${this.isEmptyArray(this.pageRes) ? html`
<span style="color: var(--black);">No websites available</span> <span style="color: var(--black);">No websites available</span>
`: ''} `: ''}
</div> </div>
@ -595,11 +595,11 @@ class Websites extends LitElement {
async getData(offset) { async getData(offset) {
const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node] const myNode = window.parent.reduxStore.getState().app.nodeConfig.knownNodes[window.parent.reduxStore.getState().app.nodeConfig.node]
const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port const nodeUrl = myNode.protocol + '://' + myNode.domain + ':' + myNode.port
let jsonUrl = `${nodeUrl}/arbitrary/resources?service=WEBSITE&default=true&limit=20&offset=${offset}&reverse=false&includestatus=true&includemetadata=true`; let jsonUrl = `${nodeUrl}/arbitrary/resources?service=WEBSITE&default=true&limit=20&offset=${offset}&reverse=false&includestatus=true&includemetadata=true`
const jsonRes = await fetch(jsonUrl); const jsonRes = await fetch(jsonUrl)
const jsonData = await jsonRes.json(); const jsonData = await jsonRes.json()
this.pageRes = jsonData; this.pageRes = jsonData
} }
async updateItemsFromPage(page) { async updateItemsFromPage(page) {
@ -608,13 +608,21 @@ class Websites extends LitElement {
} }
if (!this.pages) { if (!this.pages) {
this.pages = Array.apply(null, { length: Math.ceil(this.resources.length / this.resourcesGrid.pageSize) }).map((item, index) => { this.pages = Array.apply(null, { length: Math.ceil(this.resources.length / 20) }).map((item, index) => {
return index + 1 return index + 1
}) })
let offset = 0;
const prevBtn = document.createElement('button') const prevBtn = document.createElement('button')
prevBtn.textContent = '<' prevBtn.textContent = '<'
prevBtn.addEventListener('click', () => { prevBtn.addEventListener('click', () => {
if (parseInt(this.pagesControl.querySelector('[selected]').textContent) > 1) {
offset = (parseInt(this.pagesControl.querySelector('[selected]').textContent) - 2) * 20;
} else {
offset = 0;
}
this.getData(offset);
const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent) const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
this.updateItemsFromPage(selectedPage - 1) this.updateItemsFromPage(selectedPage - 1)
}) })
@ -623,7 +631,7 @@ class Websites extends LitElement {
this.pages.forEach((pageNumber) => { this.pages.forEach((pageNumber) => {
const pageBtn = document.createElement('button') const pageBtn = document.createElement('button')
pageBtn.textContent = pageNumber pageBtn.textContent = pageNumber
let offset = 1; let offset = 0;
pageBtn.addEventListener('click', (e) => { pageBtn.addEventListener('click', (e) => {
if (parseInt(e.target.textContent) > 1) { if (parseInt(e.target.textContent) > 1) {
offset = (parseInt(e.target.textContent) - 1) * 20; offset = (parseInt(e.target.textContent) - 1) * 20;
@ -642,6 +650,12 @@ class Websites extends LitElement {
const nextBtn = window.document.createElement('button') const nextBtn = window.document.createElement('button')
nextBtn.textContent = '>' nextBtn.textContent = '>'
nextBtn.addEventListener('click', () => { nextBtn.addEventListener('click', () => {
if (parseInt(this.pagesControl.querySelector('[selected]').textContent) >= 1) {
offset = ((parseInt(this.pagesControl.querySelector('[selected]').textContent) + 1) * 20) - 20;
} else {
offset = 0;
}
this.getData(offset);
const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent) const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
this.updateItemsFromPage(selectedPage + 1) this.updateItemsFromPage(selectedPage + 1)
}) })
@ -670,16 +684,12 @@ class Websites extends LitElement {
} }
} }
}) })
let start = (page - 1) * this.resourcesGrid.pageSize
let end = page * this.resourcesGrid.pageSize
this.resourcesGrid.items = this.pageRes
} }
async showWebsites() { async showWebsites() {
await this.getArbitraryResources() await this.getArbitraryResources()
await this.getResourcesGrid()
await this.getData(0) await this.getData(0)
await this.getResourcesGrid()
await this.updateItemsFromPage(1, true) await this.updateItemsFromPage(1, true)
} }