diff --git a/src/components/BaseComponents/PaginationTemplate.vue b/src/components/BaseComponents/PaginationTemplate.vue index 0d96ee5d7fcea9955cf6c9a85546b7c4033b21b3..206f880770cabc4931733dd2725bc39efeb4c306 100644 --- a/src/components/BaseComponents/PaginationTemplate.vue +++ b/src/components/BaseComponents/PaginationTemplate.vue @@ -1,15 +1,18 @@ <template> <div v-if="totalPages() > 0"> - <span v-if="showPreviousLink()" - class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700" - @click="updatePage(currentPage - 1)"> + <span + v-if="showPreviousLink()" + class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700" + @click="updatePage(currentPage - 1)" + > Forrige </span> <label class="mx-2">{{ currentPage + 1 }} av {{ totalPages() }}</label> <span - v-if="showNextLink()" - class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700" - @click="updatePage(currentPage + 1)"> + v-if="showNextLink()" + class="cursor-pointer inline-flex items-center p-2 text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:text-gray-700" + @click="updatePage(currentPage + 1)" + > Neste </span> </div> @@ -17,11 +20,11 @@ <script> export default { - name: 'paginationTemplate', - props: ['items', 'currentPage', 'pageSize'], + name: "paginationTemplate", + props: ["items", "currentPage", "pageSize"], methods: { updatePage(pageNumber) { - this.$emit('page:update', pageNumber); + this.$emit("page:update", pageNumber); }, totalPages() { return Math.ceil(this.items.length / this.pageSize); @@ -30,8 +33,8 @@ export default { return this.currentPage == 0 ? false : true; }, showNextLink() { - return this.currentPage == (this.totalPages() - 1) ? false : true; - } - } -} + return this.currentPage == this.totalPages() - 1 ? false : true; + }, + }, +}; </script> diff --git a/src/components/CommunityComponents/CommunityHome.vue b/src/components/CommunityComponents/CommunityHome.vue index e38a62f4983523dd4ace837e58a1cb33397155fc..49f254bc9bbe779588ddfc7086e7363d76b2b905 100644 --- a/src/components/CommunityComponents/CommunityHome.vue +++ b/src/components/CommunityComponents/CommunityHome.vue @@ -26,35 +26,44 @@ /> </div> - <div class="absolute inset-x-0 px-5 py-3"> - <!-- ItemCards --> <div class="flex items-center justify-center w-screen"> <!-- Shows items based on pagination --> <div - class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full" - v-if="showItems"> - <ItemCard v-for="item in visibleItems" :key="item" :item="item" @click="goToItemInfoPage(item.listingID)" /> + class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full" + v-if="showItems" + > + <ItemCard + v-for="item in visibleItems" + :key="item" + :item="item" + @click="goToItemInfoPage(item.listingID)" + /> </div> <!-- Shows items based on search field input --> <div - class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center" - v-if="showSearchedItems"> - <ItemCard v-for="item in searchedItems" :key="item" :item="item" @click="goToItemInfoPage(item.listingID)" /> + class="grid grid-flow-row-dense grid-cols-2 md:grid-cols-4 lg:grid-cols-5 w-full place-items-center" + v-if="showSearchedItems" + > + <ItemCard + v-for="item in searchedItems" + :key="item" + :item="item" + @click="goToItemInfoPage(item.listingID)" + /> </div> </div> - <!-- pagination --> <div class="flex justify-center" v-if="showItems"> <PaginationTemplate - v-bind:items="items" - v-on:page:update="updatePage" - v-bind:currentPage="currentPage" - v-bind:pageSize="pageSize" - class="mt-10" + v-bind:items="items" + v-on:page:update="updatePage" + v-bind:currentPage="currentPage" + v-bind:pageSize="pageSize" + class="mt-10" /> </div> </div> @@ -144,13 +153,12 @@ export default { let res = await getItemPictures(itemid); return res; }, - searchWritten: function (){ + searchWritten: function () { //This method triggers when search input field is changed - if(this.search.length > 0){ + if (this.search.length > 0) { this.showItems = false; this.showSearchedItems = true; - } - else{ + } else { this.showItems = true; this.showSearchedItems = false; } @@ -162,11 +170,14 @@ export default { this.updateVisibleTodos(); }, updateVisibleTodos() { - this.visibleItems = this.items.slice(this.currentPage * this.pageSize, (this.currentPage * this.pageSize) + this.pageSize); + this.visibleItems = this.items.slice( + this.currentPage * this.pageSize, + this.currentPage * this.pageSize + this.pageSize + ); // if we have 0 visible items, go back a page if (this.visibleItems.length === 0 && this.currentPage > 0) { - this.updatePage(this.currentPage -1); + this.updatePage(this.currentPage - 1); } }, },