Feature update

Added pagination to search results

components.js

@@ -1712,17 +1712,6 @@ customElements.define('strip-select', class extends HTMLElement{
     get value() {
         return this._value
     }
-    fireEvent = () => {
-        this.dispatchEvent(
-            new CustomEvent("change", {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    value: this.value
-                }
-            })
-        )
-    }
     scrollLeft = () => {
         this.stripSelect.scrollBy({
             left: -this.scrollDistance,
@@ -1766,7 +1755,6 @@ customElements.define('strip-select', class extends HTMLElement{
                 slot.assignedElements().forEach(elem => elem.removeAttribute('active'))
                 e.target.setAttribute('active', '')
                 e.target.scrollIntoView({behavior: "smooth", block: "nearest", inline: "center"})
-                this.fireEvent()
             }
         })
         const firstOptionObserver = new IntersectionObserver(entries => {

css/main.css

@@ -666,7 +666,8 @@ sm-option {
   font-size: 0.9rem;
 }
 
-#page_selector strip-option {
+#page_selector strip-option,
+#search_page_selector strip-option {
   --border-radius: 0.3rem;
   --active-option-color: white;
   --active-option-backgroud-color: var(--accent-color);

css/main.scss

@@ -592,7 +592,8 @@ sm-option{
     font-size: 0.9rem;
 }
 
-#page_selector{
+#page_selector,
+#search_page_selector{
     strip-option{
         --border-radius: 0.3rem;
         --active-option-color: white;

index.html

@@ -159,6 +159,7 @@
             </section>
             <div id="result_for"></div>
             <section id="search_result" class="torrent-container"></section>
+            <strip-select id="search_page_selector"></strip-select>
         </section>
         <section id="browse" class="hide-completely page page-layout">
             <section class="flex direction-column">
@@ -940,23 +941,13 @@
                     searchKey = getRef('advance_torrent_search').value.trim() !== '' ? getRef('advance_torrent_search').value.trim() : lastQuery
                 }
                 advancedSearch['query'] = searchKey
-                const torrents = await getDataFromIDB()
-                const options = {
-                    keys: ['name', 'filename', 'tags'],
-                    threshold: 0.3
-                }
                 let result
                 if (advancedSearch.isActive) {
-                    options.keys = ['type']
+                    result = await getFilteredTorrents(['type'], advancedSearch.category)
-                    let fuseSearch = new Fuse(torrents, options)
+                    result = await getFilteredTorrents(['name', 'filename', 'tags'], searchKey, {torrents: result})
-                    result = fuseSearch.search(`'${advancedSearch.category}`).map(elem => elem.item)
-                    options.keys = ['name', 'filename', 'tags']
-                    fuseSearch = new Fuse(result, options)
-                    result = fuseSearch.search(searchKey).map(elem => elem.item)
                 }
                 else {
-                    const fuseSearch = new Fuse(torrents, options)
+                    result = getFilteredTorrents(['name', 'filename', 'tags'], searchKey)
-                    result = fuseSearch.search(searchKey).map(elem => elem.item)
                 }
                 if (result.length) {
                     getRef('result_for').innerHTML = `Showing results for <strong>${searchKey}</strong>`
@@ -964,8 +955,19 @@
                 else {
                     getRef('result_for').innerHTML = `No results for <strong>${searchKey}</strong>`
                 }
+
+                console.log(result.length, result.length/20)
+
                 getRef('search_result').innerHTML = ``
-                getRef('search_result').append(renderTorrents(result))
+                getRef('search_page_selector').innerHTML = ``
+                if(result.length > 20){
+                    const pages = Math.round(result.length / 20)
+                    getRef('search_page_selector').append(createPageButtons(pages))
+                    getRef('search_result').append(renderTorrents(result.slice(0, 20)))
+                }
+                else{
+                    getRef('search_result').append(renderTorrents(result))
+                }
 
                 lastQuery = searchKey
                 lastCategory = advancedSearch.category
@@ -1029,16 +1031,35 @@
             return arr.sort((a, b) => b[prop].localeCompare(a[prop]))
         }
 
-        async function getFilteredTorrents(keys, searchKey, limit = undefined){
+        async function getFilteredTorrents(keys, searchKey, options = {}){
-            const torrents = await getDataFromIDB()
+            console.log(options)
-            const options = {
+            let {limit, torrents} = options
+            if(!torrents){
+                torrents = await getDataFromIDB()
+            }
+            const config = {
                 keys,
                 threshold: 0.2,
             }
-            const fuseSearch = new Fuse(torrents, options)
+            const fuseSearch = new Fuse(torrents, config)
             return fuseSearch.search(searchKey, {limit}).map(elem => elem.item)
         }
 
+        function createPageButtons(pages){
+            const paginationFrag = document.createDocumentFragment()
+            for (let i = 0; i < pages; i++) {
+                    const pageButton = create('strip-option', {
+                        textContent: (i + 1)
+                    })
+                    pageButton.setAttribute('value', i)
+                    if (i === 0) {
+                        pageButton.setAttribute('selected', '')
+                    }
+                    paginationFrag.append(pageButton)
+                }
+            return paginationFrag
+        }
+
         async function showCategoryTorrents(category) {
             const result = await getFilteredTorrents(['type'], category)
             getRef('browser_category_torrents').innerHTML = ``
@@ -1047,19 +1068,8 @@
             if (result.length) {
                 getRef('browser_category_torrents').append(renderTorrents(result.slice(0, 20)))
 
-                const paginationFrag = document.createDocumentFragment()
                 const pages = Math.round(result.length / 20)
-                for (let i = 0; i < pages; i++) {
+                getRef('page_selector').append(createPageButtons(pages))
-                    const pageButton = create('strip-option', {
-                        textContent: (i + 1)
-                    })
-                    pageButton.setAttribute('value', i)
-                    if (i === 0) {
-                        pageButton.setAttribute('selected', '')
-                    }
-                    paginationFrag.append(pageButton)
-                }
-                getRef('page_selector').append(paginationFrag)
             }
             else {
                 getRef('browser_category_torrents').innerHTML = `<h4 class="justify-center text-center">No ${category} torrents 😔</h4>`
@@ -1067,7 +1077,7 @@
         }
 
         async function renderSearchSuggestions(searchKey, advance = false) {
-            const result = await getFilteredTorrents(['name', 'filename'], searchKey, limit = 6)
+            const result = await getFilteredTorrents(['name', 'filename'], searchKey, {limit: 6})
             if(advance){
                 getRef('advance_search_suggestions').innerHTML = ``
             }
@@ -1220,6 +1230,18 @@
                 getRef('browser_category_torrents').append(renderTorrents(result.slice(startIndex, endIndex)))
             }, 200);
         })
+        getRef('search_page_selector').addEventListener('change', async e => {
+            const result = await getFilteredTorrents(['name', 'filename', 'tags'], lastQuery)
+            console.log(result.length , result.length/20)
+            const startIndex = parseInt(e.detail.value) * 20
+            const endIndex = ((parseInt(e.detail.value) * 20) + 30) < result.length ? (parseInt(e.detail.value) * 20) + 20 : result.length
+
+            setTimeout(() => {
+                getRef('search_result').scrollIntoView({ behavior: 'smooth', block: 'start' })
+                getRef('search_result').innerHTML = ``
+                getRef('search_result').append(renderTorrents(result.slice(startIndex, endIndex)))
+            }, 200);
+        })
     </script>
 </body>