qortal.link/qortal-ui
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add pagination

Browse Source
This commit is contained in:
AlphaX-Projects 2023-02-15 16:08:33 +01:00
parent 11e4a7f3e2
commit c3b00f2b7d
1 changed files with 151 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js
View File

@ -19,8 +19,7 @@ import '@vaadin/button'
import '@vaadin/icon'
import '@vaadin/icons'
import '@vaadin/grid'
import '@vaadin/grid/vaadin-grid-filter-column.js'
import '@vaadin/grid/vaadin-grid-sort-column.js'
import '@vaadin/text-field'
const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
@ -33,6 +32,7 @@ class NameRegistration extends LitElement {
names: { type: Array },
marketSellNames: { type: Array },
filteredItems: { type: Array },
searchSellNames: { type: Array },
recipientPublicKey: { type: String },
selectedAddress: { type: Object },
btnDisable: { type: Boolean },
@ -130,6 +130,43 @@ class NameRegistration extends LitElement {
text-align: right;
}
#pages {
display: flex;
flex-wrap: wrap;
padding: 10px 5px 5px 5px;
margin: 0px 20px 20px 20px;
}
#pages > button {
user-select: none;
padding: 5px;
margin: 0 5px;
border-radius: 10%;
border: 0;
background: transparent;
font: inherit;
outline: none;
cursor: pointer;
color: var(--black);
}
#pages > button:not([disabled]):hover,
#pages > button:focus {
color: #ccc;
background-color: #eee;
}
#pages > button[selected] {
font-weight: bold;
color: var(--white);
background-color: #ccc;
}
#pages > button[disabled] {
opacity: 0.5;
cursor: default;
}
.card-container {
background-color: var(--white);
border-radius: 5px;
@ -193,6 +230,7 @@ class NameRegistration extends LitElement {
this.names = []
this.marketSellNames = []
this.filteredItems = []
this.searchSellNames = []
this.recipientPublicKey = ''
this.btnDisable = false
this.isLoading = false
@ -250,19 +288,24 @@ class NameRegistration extends LitElement {
style="width: 25%; margin-bottom: 20px;"
clear-button-visible
@value-changed="${(e) => {
this.filteredItems = []
this.searchSellNames = []
const searchTerm = (e.target.value || '').trim()
const keys = ['name', 'owner']
const keys = ['name', 'owner', 'salePrice']
const filtered = this.marketSellNames.filter((search) => keys.some((key) => search[key].toLowerCase().includes(searchTerm.toLowerCase())))
this.filteredItems = filtered
if (!e.target.value) {
this.updatePageSize()
} else {
this.searchSellNames = filtered
this.updatePageSizeSearch()
}
}}"
>
<vaadin-icon slot="prefix" icon="vaadin:search"></vaadin-icon>
</vaadin-text-field><br>
<vaadin-grid theme="large" id="marketSellNames" ?hidden="${this.isEmptyArray(this.marketSellNames)}" aria-label="Names" .items="${this.filteredItems}" all-rows-visible>
<vaadin-grid theme="large" id="marketSellNames" ?hidden="${this.isEmptyArray(this.marketSellNames)}" aria-label="Names" page-size="15" all-rows-visible>
<vaadin-grid-column header="${translate("registernamepage.nchange5")}" path="name"></vaadin-grid-column>
<vaadin-grid-column header="${translate("registernamepage.nchange6")}" path="owner"></vaadin-grid-column>
<vaadin-grid-sort-column header="${translate("registernamepage.nchange23")} (QORT)" path="salePrice" direction="asc"></vaadin-grid-sort-column>
<vaadin-grid-column header="${translate("registernamepage.nchange23")} (QORT)" path="salePrice"></vaadin-grid-column>
<vaadin-grid-column width="14rem" flex-grow="0" header="${translate("registernamepage.nchange7")}" .renderer=${(root, column, data) => {
if (data.item.owner === this.selectedAddress.address) {
render(html`${this.renderCancelSellNameButton(data.item)}`, root)
@ -271,6 +314,7 @@ class NameRegistration extends LitElement {
}
}}></vaadin-grid-column>
</vaadin-grid>
<div id="pages"></div>
${this.isEmptyArray(this.marketSellNames) ? html`
<span style="color: var(--black);">${translate("registernamepage.nchange24")}</span>
`: ''}
@ -541,9 +585,9 @@ class NameRegistration extends LitElement {
url: `/names/forsale?limit=0&reverse=true`
}).then(res => {
this.marketSellNames = res
this.filteredItems = this.marketSellNames
})
setTimeout(fetchMarketSellNames, 120000)
this.updatePageSize()
setTimeout(fetchMarketSellNames, 180000)
}
window.addEventListener("contextmenu", (event) => {
@ -622,6 +666,103 @@ class NameRegistration extends LitElement {
}
}
async updatePageSize() {
this.filteredItems = []
this.marketSellNames.sort((a, b) => parseFloat(a.salePrice) - parseFloat(b.salePrice))
this.filteredItems = this.marketSellNames
await this.setPages()
await this.updateItemsFromPage(1, true)
}
async setPages() {
this.namesGrid = this.shadowRoot.querySelector(`#marketSellNames`)
this.pagesControl = this.shadowRoot.querySelector('#pages')
this.pages = undefined
}
async updatePageSizeSearch() {
this.filteredItems = []
this.searchSellNames.sort((a, b) => parseFloat(a.salePrice) - parseFloat(b.salePrice))
this.filteredItems = this.searchSellNames
await this.setPagesSearch()
await this.updateItemsFromPage(1, true)
}
async setPagesSearch() {
this.namesGrid = this.shadowRoot.querySelector(`#marketSellNames`)
this.pagesControl = this.shadowRoot.querySelector('#pages')
this.pages = undefined
}
async updateItemsFromPage(page, changeNames = false) {
if (page === undefined) {
return
}
changeNames === true ? (this.pagesControl.innerHTML = '') : null
if (!this.pages) {
this.pages = Array.apply(null, { length: Math.ceil(this.filteredItems.length / this.namesGrid.pageSize) }).map((item, index) => {
return index + 1
})
const prevBtn = document.createElement('button')
prevBtn.textContent = '<'
prevBtn.addEventListener('click', () => {
const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
this.updateItemsFromPage(selectedPage - 1)
})
this.pagesControl.appendChild(prevBtn)
this.pages.forEach((pageNumber) => {
const pageBtn = document.createElement('button')
pageBtn.textContent = pageNumber
pageBtn.addEventListener('click', (e) => {
this.updateItemsFromPage(parseInt(e.target.textContent))
})
if (pageNumber === page) {
pageBtn.setAttribute('selected', true)
}
this.pagesControl.appendChild(pageBtn)
})
const nextBtn = window.document.createElement('button')
nextBtn.textContent = '>'
nextBtn.addEventListener('click', () => {
const selectedPage = parseInt(this.pagesControl.querySelector('[selected]').textContent)
this.updateItemsFromPage(selectedPage + 1)
})
this.pagesControl.appendChild(nextBtn)
}
const buttons = Array.from(this.pagesControl.children)
buttons.forEach((btn, index) => {
if (parseInt(btn.textContent) === page) {
btn.setAttribute('selected', true)
} else {
btn.removeAttribute('selected')
}
if (index === 0) {
if (page === 1) {
btn.setAttribute('disabled', '')
} else {
btn.removeAttribute('disabled')
}
}
if (index === buttons.length - 1) {
if (page === this.pages.length) {
btn.setAttribute('disabled', '')
} else {
btn.removeAttribute('disabled')
}
}
})
let start = (page - 1) * this.namesGrid.pageSize
let end = page * this.namesGrid.pageSize
this.namesGrid.items = this.filteredItems.slice(start, end)
}
async updateQortWalletBalance() {
let qortAddress = window.parent.reduxStore.getState().app.selectedAddress.address
@ -1202,4 +1343,4 @@ class NameRegistration extends LitElement {
}
}
window.customElements.define('name-registration', NameRegistration)
window.customElements.define('name-registration', NameRegistration)