Kinda better implementation of the paginator

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);
+    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;
         }
-      if (!this.pages.includes(this.lastPage)) {
-        this.pages.push(this.lastPage);
+        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));
     },