Merge pull request #24 from jovialcore/chore/pagination

fix: implemented pagination and fixed the search bug
jovialcore · Dec 30, 2023 · 41c69b5 · 41c69b5
2 parents b8a35c6 + 3deda3a
commit 41c69b5
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 74 deletions.
diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
@@ -0,0 +1,75 @@
+<template>
+	<nav aria-label="Page navigation example">
+		<ul class="pagination justify-content-center">
+			<li class="page-item">
+				<a
+					class="page-link"
+					aria-label="Previous"
+					@click.prevent="previousPage"
+					:class="{ disabled: currentPage === 1 }"
+				>
+					<span aria-hidden="true">&laquo;</span>
+				</a>
+			</li>
+			<li
+				v-for="pageNumber in paginationCount"
+				:key="pageNumber"
+				@click.prevent="gotoPage(pageNumber)"
+				class="page-item"
+				:class="{ active: pageNumber === currentPage }"
+			>
+				<a class="page-link">{{ pageNumber }}</a>
+			</li>
+			<li class="page-item">
+				<a
+					class="page-link"
+					aria-label="Next"
+					@click.prevent="nextPage"
+					:class="{ disabled: currentPage === paginationCount }"
+				>
+					<span aria-hidden="true">&raquo;</span>
+				</a>
+			</li>
+		</ul>
+	</nav>
+</template>
+
+<script>
+	import { ref } from "vue";
+
+	export default {
+		props: ["paginationCount"],
+		name: "PaginationComponent",
+
+		setup(props, { emit }) {
+			const currentPage = ref(1);
+
+			const previousPage = () => {
+				if (currentPage.value > 1) {
+					currentPage.value -= 1;
+				}
+				emit("pageChange", currentPage.value);
+			};
+
+			const nextPage = () => {
+				if (currentPage.value < props.paginationCount) {
+					currentPage.value += 1;
+				}
+				emit("pageChange", currentPage.value);
+			};
+
+			const gotoPage = (pageNumber) => {
+				currentPage.value = pageNumber;
+				emit("pageChange", currentPage.value);
+			};
+
+			return { currentPage, previousPage, nextPage, gotoPage };
+		},
+	};
+</script>
+
+<style>
+	.page-item {
+		cursor: pointer;
+	}
+</style>
diff --git a/src/composables/getCompanies.js b/src/composables/getCompanies.js
@@ -1,77 +1,94 @@
-import { onMounted, ref, computed } from 'vue'
-import axios from 'axios'
-
+import { onMounted, ref, computed } from "vue";
+import axios from "axios";
 
 const useGetCompanies = () => {
-
-	const companies = ref([])
-	const searchTerm = ref('');
-
-	let bePlangs = ref([])
-
-	let beFrameworks = ref([])
-
-	let feLang = ref([])
+	let allCompanies = ref([]); // stores all companies
+	let companies = ref([]);
+	let searchTerm = ref("");
+	let paginationCount = ref(1);
+	let bePlangs = ref([]);
+	let beFrameworks = ref([]);
+	let feLang = ref([]);
+	let currentPage = ref(1);
+	let isLoading = ref(true);
 
 	const fetchData = async () => {
-
 		try {
-			const response = await axios.get(`${process.env.VUE_APP_ROOT_API}/api/company/stack/all`);
-			companies.value = response.data;
+			const response = await axios.get(
+				`${process.env.VUE_APP_ROOT_API}/api/company/stack/all`
+			);
+			allCompanies.value = response.data;
+			paginateData();
+			isLoading.value = false;
 		} catch (err) {
 			console.error("Error fetching data:", err.message);
 			companies.value = [];
 		}
-	}
+	};
+
+	const paginateData = () => {
+		const perPage = 15;
+		const startIndex = (currentPage.value - 1) * perPage;
+		const endIndex = startIndex + perPage;
+		companies.value = allCompanies.value.data.slice(startIndex, endIndex);
+		paginationCount.value = Math.ceil(allCompanies.value.data.length / perPage);
+	};
 
 	onMounted(() => {
 		fetchData();
 	});
 
 	const filteredCompanies = computed(() => {
-		const term = searchTerm.value.toLocaleLowerCase()
+		const term = searchTerm.value.toLocaleLowerCase();
 
 		if (searchTerm.value) {
-			return companies.value.data.filter((item) => {
+			return allCompanies.value.data.filter((item) => {
 				if (item.company.toLowerCase().includes(term)) {
 					return true;
 				}
 
-				if (item.stack_be_plang.length !== 0) {
-					bePlangs.value = item.stack_be_plang.map(
-						(obj) => Object.keys(obj)[0]
-					)
+				if (item.stack_be_plang.length > 0) {
+					bePlangs.value = item.stack_be_plang.map((obj) => Object.keys(obj)[0]);
 				}
-				
+
 				if (bePlangs.value.some((key) => key.toLowerCase().includes(term))) {
-					return true
+					return true;
 				}
 
-				if (item.stack_be_framework.length !== 0) {
-					beFrameworks.value = item.stack_be_framework.map((obj) => Object.keys(obj)[0])
+				if (item.stack_be_framework.length > 0) {
+					beFrameworks.value = item.stack_be_framework.map(
+						(obj) => Object.keys(obj)[0]
+					);
 				}
 
 				if (beFrameworks.value.some((key) => key.toLowerCase().includes(term))) {
-					return true
+					return true;
 				}
 
-				if (item.stack_fe_framework.length !== 0) {
-					feLang.value = item.stack_fe_framework.map((obj) => Object.keys(obj)[0])
+				if (item.stack_fe_framework.length > 0) {
+					feLang.value = item.stack_fe_framework.map((obj) => Object.keys(obj)[0]);
 				}
 
 				if (feLang.value.some((key) => key.toLowerCase().includes(term))) {
-					return true
+					return true;
 				}
 
-				return false
-			})
-		}
-		else {
-			return companies.value.data
+				return false;
+			});
+		} else {
+			return companies.value;
 		}
-	})
-
-	return { companies, searchTerm, fetchData, filteredCompanies }
-}
+	});
 
-export default useGetCompanies 
+	return {
+		companies,
+		searchTerm,
+		fetchData,
+		filteredCompanies,
+		paginationCount,
+		currentPage,
+		isLoading,
+	};
+};
+
+export default useGetCompanies;
diff --git a/src/views/HomeComponent.vue b/src/views/HomeComponent.vue
@@ -1,41 +1,74 @@
 <template>
-    <div class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
-        id="layout-navbar">
-        <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
-            <div class="navbar-nav align-items-center w-100" id="nav-container">
-                <div class="d-flex align-items-center w-100" id="nav-body">
-                    <i class="bx bx-search fs-4 lh-0"></i>
-                    <input type="text" class="form-control border-0 shadow-none w-100" v-model="searchTerm"
-                        placeholder="Search..." aria-label="Search..." />
-                </div>
-            </div>
-        </div>
-    </div>
+	<div
+		class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
+		id="layout-navbar"
+	>
+		<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
+			<div class="navbar-nav align-items-center w-100" id="nav-container">
+				<div class="d-flex align-items-center w-100" id="nav-body">
+					<i class="bx bx-search fs-4 lh-0"></i>
+					<input
+						type="text"
+						class="form-control border-0 shadow-none w-100"
+						v-model="searchTerm"
+						placeholder="Search..."
+						aria-label="Search..."
+					/>
+				</div>
+			</div>
+		</div>
+	</div>
 
-    <div class="container-xxl flex-grow-1 container-p-y">
-        <div class="row mb-5">
-            <CompanyListItem v-for="company in filteredCompanies" :key="company.id" :company="company" />
-        </div>
-    </div>
-</template> 
+	<div class="container-xxl flex-grow-1 container-p-y">
+		<div class="row mb-5">
+			<CompanyListItem
+				v-for="company in filteredCompanies"
+				:key="company.id"
+				:company="company"
+			/>
+		</div>
+		<PaginationComponent
+			@pageChange="handlePageChange"
+			:paginationCount="paginationCount"
+			v-show="!isLoading"
+		/>
+	</div>
+</template>
 <script>
-import CompanyListItem from '@/components/home/CompanyListItem.vue';
-import useGetCompanies from '@/composables/getCompanies';
+	import CompanyListItem from "@/components/home/CompanyListItem.vue";
+	import useGetCompanies from "@/composables/getCompanies";
+	import PaginationComponent from "@/components/Pagination.vue";
 
+	export default {
+		name: "HomeComponent",
+		components: {
+			CompanyListItem,
+			PaginationComponent,
+		},
+		setup() {
+			const {
+				companies,
+				searchTerm,
+				filteredCompanies,
+				paginationCount,
+				fetchData,
+				currentPage,
+				isLoading,
+			} = useGetCompanies();
 
-export default {
-    name: 'HomeComponent',
-    components: {
-        CompanyListItem
-    },
+			const handlePageChange = (newPage) => {
+				currentPage.value = newPage;
+				fetchData();
+			};
 
-    setup() {
-
-        const { companies, searchTerm, filteredCompanies } = useGetCompanies();
-
-        return { companies, searchTerm,filteredCompanies };
-    }
-}
+			return {
+				companies,
+				searchTerm,
+				filteredCompanies,
+				paginationCount,
+				handlePageChange,
+				isLoading,
+			};
+		},
+	};
 </script>
-
-