diff --git a/src/components/ImageList.vue b/src/components/ImageList.vue index f946de6160fe211798bf20afbff7d8c42a659610..4c2cc81758c21dab024fd678a0e614d9c41665e9 100644 --- a/src/components/ImageList.vue +++ b/src/components/ImageList.vue @@ -1,13 +1,29 @@ <template> - <section id="list-container"> - <div - id="item-container" - v-for="(hash, index) in stateHashArray" - :key="index" - > - <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem> + <section class="w-full"> + <div class="w-full flex flex-row flex-wrap relative"> + <div + v-for="(hash, index) in stateHashArray" + :key="index" + class="max-w-xs flex flex-col" + > + <ImageItem :hash="hash" @checked="appendToDeleteArray"></ImageItem> + </div> + </div> + <div class="mx-auto max-w-max"> + <button + v-for="(page, index) in pages" + :key="index" + class="mr-2" + @click="pageUpdate(page)" + > + {{ page }} + </button> </div> - <button v-show="deleteArray.length" @click="deleteImages(deleteArray)"> + <button + v-show="deleteArray.length" + @click="deleteImages(deleteArray)" + class="fixed bottom-0 right-0 p-1 bg-blue-300" + > Delete </button> </section> @@ -23,22 +39,62 @@ export default { data: () => { return { deleteArray: [], + currentPage: 1, + lastPage: 1, + pages: [], }; }, computed: { ...mapState(["stateUser", "stateHashArray"]), }, - created() { - this.updateHashArray(); + async created() { + this.setStateHashArray(await this.getHashArray(this.currentPage - 1)); + this.lastPage = Number(await this.getTotalPages()); + this.paginationHandler(); }, methods: { - async updateHashArray() { - const response = await fetch("../api/image"); - const data = await response.json(); - if (data) { - this.setStateHashArray(data); - console.log("Set State Hash Array"); + // 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); } + // 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)); + }, + async getHashArray(pageEntry) { + const response = await fetch(`/api/page/${pageEntry}/image`); + const imageEntries = await response.json(); + if (imageEntries === null) { + return; + } + let hashArray = []; + imageEntries.forEach((imageEntry) => { + if (imageEntry.hash !== "") { + hashArray.unshift(imageEntry.hash); + } + }); + return hashArray; + }, + async getTotalPages() { + const response = await fetch("/api/page"); + const totalPages = await response.text(); + return totalPages; }, appendToDeleteArray(...args) { const [checked, hash] = args; @@ -59,27 +115,4 @@ export default { ...mapActions(["setStateHashArray"]), }, }; -</script> - -<style scoped> -#list-container { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: wrap; - position: relative; -} -#item-container { - max-width: 20%; - display: flex; - flex-direction: column; -} -button { - position: fixed; - bottom: 1em; - right: 1em; - padding: 1em 1em; - background: lightblue; - color: rgb(47, 42, 42); -} -</style> \ No newline at end of file +</script> \ No newline at end of file