Merge pull request #1 from oa-netigo/feature/pagination

Feature/pagination

Author: oa-netigo

src/App.vue

@@ -1,46 +1,69 @@
 <script setup>
-import { ref } from 'vue';
+import { ref } from 'vue'
 import SearchQuery from '@/components/SearchQuery.vue'
 import SearchFilter from '@/components/SearchFilter.vue'
 import ResultList from '@/components/ResultList.vue'
-
+import ResultPagination from '@/components/ResultPagination.vue'
 import { useItems } from '@/composables/useItems';
-
+import { useFilteredItems } from '@/composables/useFilteredItems';
 const { items, isLoading, hasError } = useItems();
 
 const updateQuery = (newQuery) => {
   searchQuery.value = newQuery;
+  paginationOptions.value.currentPage = 1;
 };
 
 const updateFilter = (newFilter) => {
   searchFilter.value = newFilter;
+  paginationOptions.value.currentPage = 1;
 };
 
 // @TODO: uncheck radio button when reset
 const resetFilter = () => {
   searchQuery.value = '';
   searchFilter.value = '';
+  paginationOptions.value.currentPage = 1;
+};
+
+const updatePage = (newPage) => {
+  paginationOptions.value.currentPage = newPage;
 };
 
 const searchQuery = ref('');
 const searchFilter = ref('');
 const searchOptions = ref({
   keys: ['title', 'description'],
 });
+const paginationOptions = ref({
+  itemsPerPage: 4,
+  currentPage: 1,
+});
+
+const filteredItems = useFilteredItems(items, searchQuery, searchFilter, searchOptions);
+
 </script>
 
 <template>
   <div v-if="!isLoading && !hasError">
-    <SearchQuery @onSearch="updateQuery" @onReset="resetFilter"/>
+    <SearchQuery
+      @on-search="updateQuery"
+      @on-reset="resetFilter"/>
     <SearchFilter
       :items="items"
-      @filter="updateFilter"/>
+      @on-filter="updateFilter"/>
     <ResultList
       :items="items"
-      :searchOptions="searchOptions"
-      :searchQuery="searchQuery"
-      :searchFilter="searchFilter"
+      :filtered-items="filteredItems"
+      :search-options="searchOptions"
+      :search-query="searchQuery"
+      :search-filter="searchFilter"
+      :pagination-options="paginationOptions"
     />
+    <ResultPagination
+      :items="items"
+      :filtered-items="filteredItems"
+      :pagination-options="paginationOptions"
+      @on-page-change="updatePage"/>
   </div>
   <div class="list-error"
        v-if="hasError">

src/components/ResultList.vue

@@ -3,25 +3,24 @@ import { computed, defineProps } from 'vue'
 
 const props = defineProps({
   items: Array,
+  filteredItems: Array,
   isLoading: Boolean,
   hasError: Boolean,
   searchOptions: Object,
   searchQuery: String,
-  searchFilter: String
+  searchFilter: String,
+  paginationOptions: Object
 });
 
-const filteredItems = computed(() => {
-  return props.items.filter(item => {
-    const matchesQuery = props.searchOptions.keys.some(key => {
-      return item[key].toLowerCase().includes(props.searchQuery.toLowerCase());
-    });
-    const matchesFilter = props.searchFilter ? item.category === props.searchFilter : true;
-    return matchesQuery && matchesFilter;
-  })
+const showedItems = computed(() => {
+  const start = (props.paginationOptions.currentPage - 1) * props.paginationOptions.itemsPerPage;
+  const end = start + props.paginationOptions.itemsPerPage;
+
+  return props.filteredItems.slice(start, end);
 })
 
 const noResult = computed(() => {
-  return filteredItems.value.length === 0;
+  return props.filteredItems.length === 0;
 })
 
 </script>
@@ -30,7 +29,7 @@ const noResult = computed(() => {
   <div class="result-list py-4">
     <ul class="list-group">
       <li class="list-group-item d-flex justify-content-between align-items-start"
-          v-for="(item, index) in filteredItems" :key="index">
+          v-for="(item, index) in showedItems" :key="index">
         <div class="ms-2 me-auto">
           <div class="fw-bold">{{ item.title }}</div>
           {{ item.description }}

src/components/ResultPagination.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { ref, defineProps, defineEmits, computed } from 'vue'
+
+const props = defineProps({
+  items: Array,
+  filteredItems: Array,
+  paginationOptions: Object,
+});
+
+const totalPages = computed(() => {
+  return Math.ceil(props.filteredItems.length / props.paginationOptions.itemsPerPage);
+});
+
+const emit = defineEmits(['onPageChange']);
+
+const onPageChange = (page) => {
+  if (page < 1 || page > totalPages.value) {
+    return;
+  }
+  emit('onPageChange', page);
+};
+</script>
+
+<template>
+  <nav aria-label="Page navigation example">
+    <ul class="pagination justify-content-center">
+      <li class="page-item"
+          :class="{ disabled: props.paginationOptions.currentPage === 1 }">
+        <a class="page-link" href="#" aria-label="Previous"
+           @click.prevent="onPageChange(props.paginationOptions.currentPage - 1)">
+          <span aria-hidden="true">&laquo;</span>
+        </a>
+      </li>
+      <li class="page-item"
+          v-for="(page, index) in totalPages" :key="index">
+        <a class="page-link" href="#"
+           :class="{active: index + 1 === props.paginationOptions.currentPage}"
+           @click.prevent="onPageChange(index + 1)">{{ index + 1}}</a></li>
+      <li class="page-item"
+          :id="props.paginationOptions.currentPage"
+        :class="{disabled: props.paginationOptions.currentPage === totalPages}">
+        <a class="page-link" href="#" aria-label="Next"
+           @click.prevent="onPageChange(props.paginationOptions.currentPage + 1)">
+          <span aria-hidden="true">&raquo;</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>

src/components/SearchFilter.vue

@@ -6,9 +6,9 @@ const props = defineProps({
 });
 
 const searchFilter = ref('');
-const emit = defineEmits(['filter']);
-const filter = () => {
-  emit('filter', searchFilter.value);
+const emit = defineEmits(['onFilter']);
+const onFilter = () => {
+  emit('onFilter', searchFilter.value);
 };
 
 const uniqueCategories = ref([]);
@@ -27,7 +27,7 @@ props.items.forEach(item => {
     <div class="btn-group btn-group-sm" role="group" aria-label="Basic radio toggle button group">
       <template v-for="(item, index) in uniqueCategories" :key="index">
         <input type="radio" class="btn-check" name="filter-category" :id="'filter-' + index" autocomplete="off" :value="item.category"
-               v-model="searchFilter" @change="filter">
+               v-model="searchFilter" @change="onFilter">
         <label class="btn btn-outline-primary" :for="'filter-' + index">{{ item.category }}</label>
       </template>
     </div>

src/components/SearchQuery.vue

@@ -2,7 +2,6 @@
 import { ref, computed } from 'vue';
 
 const searchQuery = ref('');
-// const searchQueryHelper = useTemplateRef('search-query-info');
 
 const emit = defineEmits(['onSearch', 'onReset']);
 const search = () => {

src/composables/useFilteredItems.js

@@ -0,0 +1,14 @@
+import { computed } from 'vue';
+
+export function useFilteredItems(items, searchQuery, searchFilter, searchOptions) {
+  return computed(() => {
+    return items.value.filter(item => {
+      const matchesQuery = searchOptions.value.keys.some(key => {
+        return item[key].toLowerCase().includes(searchQuery.value.toLowerCase());
+      });
+
+      const matchesFilter = searchFilter.value ? item.category === searchFilter.value : true;
+      return matchesQuery && matchesFilter;
+    });
+  });
+}

src/composables/useItems.js

@@ -9,7 +9,7 @@ export function useItems() {
   const fetchItems = async () => {
     try {
       // Simulate a sleep via timeout
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      // await new Promise(resolve => setTimeout(resolve, 1000));
 
       const data = await itemService.getItems();
       items.value = data;

src/services/itemService.js

@@ -1,20 +1,23 @@
 const apiClient = {
   get: async (url) => {
-    const response = await fetch(`/${url}`, {
-      method: 'GET',
-      headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json',
-      },
-    });
+    try {
+      const response = await fetch(`/${url}`, {
+        method: 'GET',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+        },
+      });
 
-    // Check if the response is ok (status 200-299)
-    if (!response.ok) {
-      throw new Error(`Error: ${response.statusText}`);
-    }
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
 
-    // Parse JSON response
-    return await response.json();
+      return await response.json();
+    } catch (error) {
+      console.error('Fetch error:', error);
+      throw new Error('Failed to fetch data');
+    }
   },
 };