diff --git a/components/Pagination.vue b/components/Pagination.vue
new file mode 100644
index 000000000..ce765c5aa
--- /dev/null
+++ b/components/Pagination.vue
@@ -0,0 +1,100 @@
+
+
+
+
+ ...
+ {{
+ item
+ }}
+
+
+
+
Mods
-
@@ -374,6 +361,7 @@
import Multiselect from 'vue-multiselect'
import axios from 'axios'
import SearchResult from '@/components/ModResult'
+import Pagination from '@/components/Pagination'
const config = {
headers: {
@@ -384,6 +372,7 @@ const config = {
export default {
components: {
SearchResult,
+ Pagination,
Multiselect,
},
data() {
@@ -395,12 +384,11 @@ export default {
results: [],
pages: [],
currentPage: 1,
- overrideOffset: 0,
sortType: 'relevance',
- maxResults: 6,
+ maxResults: 5,
}
},
- async mounted() {
+ async created() {
if (this.$route.query.q) this.query = this.$route.query.q
if (this.$route.query.f) {
const facets = this.$route.query.f.split(',')
@@ -409,16 +397,21 @@ export default {
}
if (this.$route.query.v)
this.selectedVersions = this.$route.query.v.split(',')
- if (this.$route.query.s) this.sortType = this.$route.query.s
- if (this.$route.query.o) this.overrideOffset = this.$route.query.o
+ if (this.$route.query.s) {
+ this.sortType = this.$route.query.s
+ }
+ if (this.$route.query.m) {
+ this.maxResults = this.$route.query.m
+ }
+ if (this.$route.query.o)
+ this.currentPage = Math.ceil(this.$route.query.o / this.maxResults) + 1
await this.fillInitialVersions()
-
- window.addEventListener('resize', this.resize)
- await this.resize()
+ await this.onSearchChange(this.currentPage)
},
- destroyed() {
- window.removeEventListener('resize', this.resize)
+ mounted() {
+ document.getElementById('sort-type').value = this.sortType
+ document.getElementById('max-results').value = this.maxResults
},
methods: {
async fillInitialVersions() {
@@ -429,27 +422,20 @@ export default {
)
const versions = res.data.versions
+ const betaVersions = []
+ const legacyVersions = []
for (const version of versions) {
- this.versions.push(version.id)
+ if (version.type === 'release') this.versions.push(version.id)
+ if (version.type === 'snapshot') betaVersions.push(version.id)
+ if (version.type === 'old_beta' || version.type === 'old_alpha')
+ legacyVersions.push(version.id)
}
+ this.versions.concat(betaVersions, legacyVersions)
} catch (err) {
+ // eslint-disable-next-line no-console
console.error(err)
}
},
- async resize() {
- const vh = Math.max(
- document.documentElement.clientHeight || 0,
- window.innerHeight || 0
- )
- this.maxResults = Math.floor((vh - 200) / 120)
-
- await this.onSearchChange(this.currentPage)
-
- if (this.currentPage > this.pages[this.pages.length - 1]) {
- this.currentPage = this.pages[this.pages.length - 1]
- await this.onSearchChange(this.currentPage)
- }
- },
async clearFilters() {
for (const facet of [...this.facets]) await this.toggleFacet(facet, true)
@@ -457,24 +443,38 @@ export default {
await this.onSearchChange(1)
},
async toggleFacet(elementName, sendRequest) {
- const element = document.getElementById(elementName)
- const index = this.facets.indexOf(element.id)
+ const element = process.client
+ ? document.getElementById(elementName)
+ : null
+ const index = this.facets.indexOf(elementName)
if (index !== -1) {
- element.classList.remove('filter-active')
+ if (process.client) element.classList.remove('filter-active')
this.facets.splice(index, 1)
} else {
- element.classList.add('filter-active')
- this.facets.push(element.id)
+ if (process.client) element.classList.add('filter-active')
+ this.facets.push(elementName)
}
if (!sendRequest) await this.onSearchChange(1)
},
async changeSortType() {
- this.sortType = document.getElementById('sort-type').value
+ if (process.client)
+ this.sortType = document.getElementById('sort-type').value
await this.onSearchChange(1)
},
+ async changeMaxResults() {
+ if (process.client)
+ this.maxResults = document.getElementById('max-results').value
+
+ await this.onSearchChangeToTop(1)
+ },
+ async onSearchChangeToTop(newPageNumber) {
+ if (process.client) window.scrollTo(0, 0)
+
+ await this.onSearchChange(newPageNumber)
+ },
async onSearchChange(newPageNumber) {
try {
const params = [`limit=${this.maxResults}`, `index=${this.sortType}`]
@@ -501,11 +501,7 @@ export default {
}
const offset = (newPageNumber - 1) * this.maxResults
- if (this.overrideOffset > 0) {
- console.log(this.overrideOffset)
- params.push(`offset=${this.overrideOffset}`)
- this.overrideOffset = 0
- } else if (newPageNumber !== 1) {
+ if (newPageNumber !== 1) {
params.push(`offset=${offset}`)
}
@@ -547,15 +543,21 @@ export default {
this.pages = Array.from({ length: pageAmount }, (_, i) => i + 1)
}
- url = `mods?q=${encodeURIComponent(
- this.query
- )}&o=${offset}&f=${encodeURIComponent(
- this.facets.toString()
- )}&v=${encodeURIComponent(
- this.selectedVersions.toString()
- )}&s=${encodeURIComponent(this.sortType)}`
+ if (process.client) {
+ url = `mods?q=${encodeURIComponent(this.query)}`
- window.history.pushState(new Date(), 'Mods', url)
+ if (offset > 0) url += `&o=${offset}`
+ if (this.facets.length > 0)
+ url += `&f=${encodeURIComponent(this.facets)}`
+ if (this.selectedVersions.length > 0)
+ url += `&v=${encodeURIComponent(this.selectedVersions)}`
+ if (this.sortType !== 'relevance')
+ url += `&s=${encodeURIComponent(this.sortType)}`
+ if (this.maxResults > 5)
+ url += `&m=${encodeURIComponent(this.maxResults)}`
+
+ window.history.pushState(new Date(), 'Mods', url)
+ }
} catch (err) {
// eslint-disable-next-line no-console
console.error(err)
@@ -570,23 +572,24 @@ export default {