add: pagination to locations

src/components/Pagination.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+    const props = defineProps({
+        total: {
+            type: Number,
+            required: true,
+        },
+        limit: {
+            type: Number,
+            default: 10
+        },
+        currentPage: {
+            type: Number,
+            default: 1
+        }
+    })
+
+    const emits = defineEmits(['get-elements'])
+    const currentPage = ref(1);
+    const totalPage = ref(0)
+    onMounted(() => {
+        currentPage.value = props.currentPage;
+        totalPage.value = Math.ceil(props.total / props.limit)
+        console.log('pages')
+        console.log(totalPage.value);
+    })
+    
+    const setPage = (p) => {     
+        currentPage.value = p
+        const skip = (p - 1) * props.limit;
+        emits('get-elements', {skip: skip, page: p});
+     }
+</script>
+
+<template>
+    <div class="pagination" v-if="totalPage > 1">
+        <h4>Paginación</h4>
+        <div class="box-pages" v-if="totalPage > 1">
+            <div 
+                v-for="p in totalPage"
+                :class="[currentPage === p ? 'page page-active' : 'page']"
+                @click="setPage(p)"
+            >   
+                {{ p }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .pagination {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-top: 2rem;
+    }
+
+    .pagination h4 {
+        font-size: 1.2rem;
+        font-weight: 900;
+    }
+    .box-pages {
+        /* left: 50%; */
+        display: flex;
+        /* flex-direction: column; */
+        justify-content: center;
+    }
+
+    .page {
+        cursor: pointer;
+        display: flex;
+        width: 30px;
+        height: 30px;
+        border-radius: 100%;
+        align-items: center;
+        justify-content: center;
+        align-content: center;
+        background-color: #dab977;
+        color: #323030;
+        margin: 4px;
+    }
+    .page-active {
+        width: 33px;
+        height: 33px;
+        background-color: #FBBA33;
+    }
+</style>

src/services/company.js

@@ -115,7 +115,8 @@ export const deleteBudget = async(id) => {
 
 export const getLocations = async(filter) => {
     try {
-        const endpoint = `/branches/${filter}`;
+        const endpoint = `/branches/${filter}&$limit=10&$sort%5BcreatedAt%5D=-1`;
+        console.log(endpoint);
         const {data} = await api.get(endpoint);
         return data;
     } catch (error) {

src/stores/company.js

@@ -10,6 +10,8 @@ export const useCompanyStore = defineStore('company', () => {
     const users = ref([]);
     const budgets = ref([]);
     const locations = ref([]);
+    const locationsTotal = ref(0);
+    const locationsCurrentPage = ref(1);
     const proposals = ref([])
     const loading = ref(false);
 
@@ -239,6 +241,7 @@ export const useCompanyStore = defineStore('company', () => {
             console.log(resp);
             if(resp !== null && resp.total > 0) {
                 locations.value = resp.data;
+                locationsTotal.value = resp.total;
             } else {
                 locations.value = [];
             }
@@ -248,10 +251,11 @@ export const useCompanyStore = defineStore('company', () => {
     const createLocationCompany = async(formData, localData) => {
         const data = await createLocation(formData);
         if(data) {
-            locations.value.push({
+            locations.value.unshift({
                 ...data,
                 ...localData
             });
+            locationsTotal.value++;
             return 'success';
         } else {
             return 'Algo salio mal, intente más tarde';
@@ -306,6 +310,8 @@ export const useCompanyStore = defineStore('company', () => {
        budgets,
        users,
        locations,
+       locationsTotal,
+       locationsCurrentPage,
        clear,
        $reset,
        loading,

src/views/LocationsView.vue

@@ -5,6 +5,7 @@
     import CardEmpty from '../components/CardEmpty.vue';
     import CreateLocationModal from '../components/CreateLocationModal.vue';
     import CardLocation from '../components/CardLocation.vue';
+import Pagination from '../components/Pagination.vue';
 
     const companyStore = useCompanyStore();
 
@@ -18,13 +19,25 @@
         getInitData();
     })
 
+    const limit = 10;
+
     const getInitData = async() => {
         loading.value = true;
+        companyStore.locationsCurrentPage = companyStore.locationsCurrentPage;
         filterQuery.value.company = "company="+ localStorage.getItem('id');
         await companyStore.getLocationsCompany(filterQuery.value, false)
         loading.value = false;
     }
 
+    const getLocationsByPage = async(data) => {
+        loading.value = true;
+        filterQuery.value.company = "company="+ localStorage.getItem('id');
+        filterQuery.value.skip = "$skip="+ data.skip;
+        companyStore.locationsCurrentPage = data.page
+        await companyStore.getLocationsCompany(filterQuery.value, true)
+        loading.value = false;
+    }
+
     const getLocationsWithFilters = async(filter) => {
         loading.value = true;
         await companyStore.getLocationsCompany(filter, true);
@@ -32,8 +45,12 @@
     }
 
     watch(query, () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ 100;
         if(query.value.length === 0){
+            clearRequest();
             filterQuery.value.search = "";
+            // filterQuery.value.page = 1
             getLocationsWithFilters(filterQuery.value);
         }
     });
@@ -48,9 +65,10 @@
     }
 
     const clearFilter = () => {
+        clearRequest();
+
         filterQuery.value.search = "";
         filterQuery.value.company = "company="+ localStorage.getItem('id');
-
         if(query.value == ''){
             getInitData();
         } else {
@@ -58,6 +76,12 @@
         }
     }
 
+    const clearRequest = () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ limit;
+        companyStore.locationsCurrentPage = 1;
+    }
+
     const handleSetCurrentLocation = (location) => {
         openModal.value = true;
         locationCurrent.value = location;
@@ -66,7 +90,6 @@
     const handleResetCurrentBudget = () => {
         openModal.value = false;
         locationCurrent.value = null;
-        console.log('clear location');
     }
 
 </script>
@@ -94,7 +117,9 @@
                 @click="handleSetCurrentLocation(null)"
             ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Agregar</span><span class="clear-md"> locación</span></button>
         </div>
-        <Spiner v-if="loading"/>
+        <div v-if="loading" class="spiner-box">
+            <Spiner/>
+        </div>
         <div v-else>
             <CardLocation
                 v-if="companyStore.locations.length > 0"
@@ -104,11 +129,17 @@
                 @set-location="handleSetCurrentLocation(location)"
             />
             <CardEmpty v-else text="No hay ubicaciones agregadas"/>
+            <Pagination
+                :limit="limit"
+                :total="companyStore.locationsTotal"
+                :current-page="companyStore.locationsCurrentPage"
+                @get-elements="getLocationsByPage"
+            />
         </div>
     </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
     .box-filters {
         display: flex;
         flex-direction: row;
@@ -117,6 +148,12 @@
         margin: 1.5rem 0px;
     }
 
+    // .spiner-box {
+    //     display: flex;
+    //     justify-content: center;
+    //     height: calc(100vh - 400px)
+    // }
+
     .box-search {
         width: 60%;
     }