diff --git a/src/components/ImageList.vue b/src/components/ImageList.vue index 4c2cc81758c21dab024fd678a0e614d9c41665e9..077d8dcff1eed31961cdc7f48ca8b5d097376063 100644 --- a/src/components/ImageList.vue +++ b/src/components/ImageList.vue @@ -14,7 +14,7 @@ v-for="(page, index) in pages" :key="index" class="mr-2" - @click="pageUpdate(page)" + @click="updatePage(page)" > {{ page }} </button> @@ -41,39 +41,42 @@ export default { deleteArray: [], currentPage: 1, lastPage: 1, - pages: [], }; }, computed: { + // TODO: Rewrite this less confusingly if possible. + pages: function () { + return [ + this.currentPage - 1 > 1 ? 1 : null, + this.currentPage - 1 > 2 ? "..." : null, + this.currentPage !== 1 ? this.currentPage - 1 : null, + this.currentPage, + this.currentPage !== this.lastPage ? this.currentPage + 1 : null, + this.lastPage - this.currentPage > 2 ? "..." : null, + this.lastPage - this.currentPage > 1 ? this.lastPage : null, + ].filter((element) => element !== null); + }, ...mapState(["stateUser", "stateHashArray"]), }, async created() { - this.setStateHashArray(await this.getHashArray(this.currentPage - 1)); + this.updatePage(this.currentPage); this.lastPage = Number(await this.getTotalPages()); - this.paginationHandler(); }, methods: { - // TODO: Write this handler better, piece of shit code. - paginationHandler() { - for (let i = this.currentPage - 1; i < this.currentPage + 2; i++) { - if (i === 0) continue; - if (i === this.lastPage) break; - this.pages.push(i); - } - if (!this.pages.includes(1)) { - this.pages.unshift(1); - } - if (!this.pages.includes(this.lastPage)) { - this.pages.push(this.lastPage); + async updatePage(pageNumber) { + if (pageNumber === "...") { + let pageNumber = Number(prompt("Jump to page")); + if ( + !Number.isInteger(pageNumber) || + pageNumber > this.lastPage || + pageNumber < 1 + ) { + alert("Invalid page!"); + return; + } + this.updatePage(pageNumber); + return; } - // if (this.currentPage - 1 > 2) { - // this.pages.splice(1, 0, "..."); - // } - // if (this.lastPage - this.currentPage > 2) { - // this.pages.splice(this.pages.length - 1, 0, "..."); - // } - }, - async pageUpdate(pageNumber) { this.currentPage = pageNumber; this.setStateHashArray(await this.getHashArray(this.currentPage - 1)); },