Add pagination

qortal-ui-plugins/plugins/core/name-registration/name-registration.src.js

@@ -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/text-field'
-import '@vaadin/grid/vaadin-grid-sort-column.js'
 
 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)