pagination users, locations, vehicles, loads

src/components/Pagination.vue

@@ -22,8 +22,6 @@ import { onMounted, ref } from 'vue';
     onMounted(() => {
         currentPage.value = props.currentPage;
         totalPage.value = Math.ceil(props.total / props.limit)
-        console.log('pages')
-        console.log(totalPage.value);
     })
     
     const setPage = (p) => {     

src/components/Sidebar.vue

@@ -105,14 +105,14 @@
                         class="nav-link" :to="{name: 'calculator'}">Calculadora</RouterLink>
                 </div>
             </li>
-            <li :class="[route.name === 'reports' ? 'bg-nav-active' : '']">
+            <!-- <li :class="[route.name === 'reports' ? 'bg-nav-active' : '']">
                 <div>
                     <i class="fa-solid fa-chart-simple" :class="[route.name === 'reports' ? 'router-link-active' : '']"></i>
                     <RouterLink 
                         active-class="router-link-active"
                         class="nav-link" :to="{name: 'reports'}">Reportes</RouterLink>
                 </div>
-            </li>
+            </li> -->
         </ul>
         <div class="eta-info">
             <div class="divider"></div>

src/stores/company.js

@@ -12,11 +12,15 @@ export const useCompanyStore = defineStore('company', () => {
     const usersTotal = ref(0);
     const usersCurrentPage = ref(1);
     const budgets = ref([]);
+    const budgetsTotal = ref(0);
+    const budgetsCurrentPage = ref(1);
     const locations = ref([]);
     const locationsLoads = ref([]);
     const locationsTotal = ref(0);
     const locationsCurrentPage = ref(1);
-    const proposals = ref([])
+    const proposals = ref([]);
+    const proposalsTotal = ref(0);
+    const proposalsCurrentPage = ref(1)
     const loading = ref(false);
 
     const getCompanyData = async() => {
@@ -33,7 +37,7 @@ export const useCompanyStore = defineStore('company', () => {
     const getUsersCompany = async(limit = 10, skip = 0, reload = false) => {
         const companyId = localStorage.getItem('id');
         if(users.value.length <= 0 || reload === true) {
-            const filter = `company=${companyId}&&$sort%5BcreatedAt%5D=-1&$limit=${limit}&$skip=${skip}`
+            const filter = `company=${companyId}&$sort%5BcreatedAt%5D=-1&$limit=${limit}&$skip=${skip}`
             const resp = await getUsers(filter);
             if(resp !== null && resp.total > 0) {
                 usersTotal.value = resp.total;
@@ -157,20 +161,26 @@ export const useCompanyStore = defineStore('company', () => {
 
     ///loads?company=64fa70c130d2650011ac4f3a&status[$ne]=Closed,posted_by_name[$regex]=ju&posted_by_name[$options]=i
 
-    const getProposalsCompany = async() => {
+    const getProposalsCompany = async(filter, reload = false) => {
         const companyId = localStorage.getItem('id');
         try {
-            const endpoint = `/proposals?carrier=${companyId}`;
+            if(proposals.value.length <= 0 || reload) {
+                const endpoint = `/proposals?carrier=${companyId}&$sort%5BcreatedAt%5D=-1&${filter}`;
+                console.log(endpoint)
                 const {data} = await api.get(endpoint);
                 proposals.value = data.data;
+                proposalsTotal.value = data.total;
+            }
         } catch (error) {
             proposals.value = [];
+            proposalsTotal.value = 0;
         }
     }
 
     const createPropsal = async(formData) => {
         const data = await saveProposal(formData);
         if(data) {
+            proposalsTotal.value++;
             return 'success';
         } else {
             return 'Algo salio mal, intente más tarde';
@@ -203,10 +213,13 @@ export const useCompanyStore = defineStore('company', () => {
 
         if(budgets.value.length <= 0 || reload === true) {
             try {
-                const data = await getBudgets(filterStr);
+                const data = await getBudgets(filterStr + '&$sort%5BcreatedAt%5D=-1');
+                console.log(data.total);
                 if(data.total > 0) {
                     budgets.value = data.data;
+                    budgetsTotal.value = data.total;
                 } else {
+                    budgetsTotal.value = 0;
                     budgets.value = [];
                 }
             } catch (error) {
@@ -238,6 +251,7 @@ export const useCompanyStore = defineStore('company', () => {
         try {
             const data = await createBudget(formData);
             if(data) {
+                budgetsTotal.value++;
                 budgets.value.push({
                     ...data,
                     ...localData
@@ -255,6 +269,7 @@ export const useCompanyStore = defineStore('company', () => {
         try {
             const data = await deleteBudget(id);
             if(data) {
+                budgetsTotal.value--;
                 budgets.value = budgets.value.filter(budget => budget._id !== id);
                 return data;
             } else {
@@ -387,6 +402,8 @@ export const useCompanyStore = defineStore('company', () => {
        $reset,
        loading,
        proposals,
+       proposalsCurrentPage,
+       proposalsTotal,
        company,
    }
 });

src/stores/loads.js

@@ -6,29 +6,35 @@ export const useLoadsStore = defineStore('load', () => {
     const companyid = localStorage.getItem('id');
     const currentLoad = ref(null);
     const loads = ref([])
+    const loadsTotal = ref(0)
+    const loadsCurrentPage = ref(1)
     const proposalsOfLoads = ref([]);
     const openModalEdit = ref(false);
     const openAttachmentsModal = ref(false);
     const openProposalsModal = ref(false);
 
 
-    const getCompanyLoads = async(filterQuery) => {
+    const getCompanyLoads = async(filterQuery, reload = false) => {
         let filterArr = Object.values(filterQuery);
         let cleanfilterArr =  filterArr.filter(n=>n);
         var filterStr = "";
         if(cleanfilterArr.length >0){
             filterStr = cleanfilterArr.join("&");
         }
-        // console.log(filterStr);
+        if(loads.value.length <= 0 || reload) {
             try {
-            const endpoint = `/loads?company=${companyid}&${filterStr}`;
+                const endpoint = `/loads?company=${companyid}&${filterStr}&$sort%5BcreatedAt%5D=-1`;
+                console.log(endpoint);
                 const {data} = await api.get(endpoint);
                 loads.value = data.data;
+                loadsTotal.value = data.total;
             } catch (error) {
                 loads.value = [];
+                loadsTotal.value = 0;
                 console.log(error);
             }
         }
+    }
 
     const getProposalsOfLoads = async(filterQuery) => {
         try {
@@ -46,6 +52,7 @@ export const useLoadsStore = defineStore('load', () => {
         try {
             const endpoint = `/loads/`;
             const {data} = await api.post(endpoint, load);
+            loadsTotal.value++;
             return data;
         } catch (error) {
             console.log(error);
@@ -94,6 +101,7 @@ export const useLoadsStore = defineStore('load', () => {
             const endpoint = `/loads/${loadId}`;
             console.log(endpoint);
             const {data} = await api.delete(endpoint);
+            loadsTotal.value--;
             return data;
         } catch (error) {
             console.log(error);
@@ -136,6 +144,8 @@ export const useLoadsStore = defineStore('load', () => {
        updateProposal,
        deleteProposal,
        loads,
+       loadsCurrentPage,
+       loadsTotal,
        currentLoad,
        proposalsOfLoads,
    }

src/stores/vehicles.js

@@ -4,6 +4,8 @@ import { createVehicle, deleteVehicle, getVehicles, updateVehicle } from "../ser
 export const useVehiclesStore = defineStore('vehicles', () => {
     
     const vehicles = ref([]);
+    const vehiclesTotal = ref(0);
+    const vehiclesCurrentPage = ref(1)
 
     const fetchVehicles = async(filterQuery, reload = false) => {
         let filterArr = Object.values(filterQuery);
@@ -14,9 +16,10 @@ export const useVehiclesStore = defineStore('vehicles', () => {
             filterStr ="?"+cleanfilterArr.join("&");
         }
         if(vehicles.value.length <= 0 || reload === true) {
-            const resp = await getVehicles(filterStr);
+            const resp = await getVehicles(filterStr + '&$sort%5BcreatedAt%5D=-1');
             console.log(resp.data);
             if(resp !== null) {
+                vehiclesTotal.value = resp.total;
                 vehicles.value = resp.data;
             }
         }
@@ -29,6 +32,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
                 ...data,
                 ...localData
             });
+            vehiclesTotal.value++;
             return 'success';
         } else {
             return 'Algo salio mal, intente más tarde';
@@ -57,6 +61,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
         const data = await deleteVehicle(id);
         if(data) {
             vehicles.value = vehicles.value.filter(vehicle => vehicle._id !== id);
+            vehiclesTotal.value--;
             return 'success';
         } else {
             return 'Algo salio mal, intente más tarde';
@@ -67,6 +72,8 @@ export const useVehiclesStore = defineStore('vehicles', () => {
 
    return {
         vehicles,
+        vehiclesTotal,
+        vehiclesCurrentPage,
         fetchVehicles,
         createVehicleCompany,
         updateVehicleCompany,

src/views/LoadsPublishedView.vue

@@ -7,57 +7,88 @@
     import FormLoadModal from '../components/FormLoadModal.vue';
     import ProposalsModal from '../components/ProposalsModal.vue';
     import CardEmpty from '../components/CardEmpty.vue';
+    import Pagination from '../components/Pagination.vue';
 
     const loadStore = useLoadsStore();
     const loading = ref(false);
     const query = ref('');
     const filterQuery = ref([]);
+    const limit = 3;
 
     onMounted(() =>{
-        getDataLoadsInit();
+        console.log('init')
+        getDataLoadsInit(false);
     })
 
+    ///loads?company=64fa70c130d2650011ac4f3a&$limit=3&$skip=0&status[$ne]=Closed&$sort%5BcreatedAt%5D=-1
+
     watch(query, () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ 100;
         if(query.value.length === 0){
+            console.log('Clear manueal')
+            // console.log(loadStore.loadsTotal)
+            clearRequest();
             filterQuery.value.search = "";
             getLoadWithFilters(filterQuery.value);
         }
     });
 
-    const getDataLoadsInit = async() => {
+    const getDataLoadsInit = async(reload) => {
+        filterQuery.value.limit = '$limit=' + limit;
+        filterQuery.value.skip = "$skip=0"
         filterQuery.value.status = "status[$ne]="+"Closed";
         loading.value = true;
-        await loadStore.getCompanyLoads(filterQuery.value);
+        await loadStore.getCompanyLoads(filterQuery.value, reload);
+        loading.value = false;
+    }
+
+    const getLoadsByPage = async(data) => {
+        console.log(data);
+        loading.value = true;
+        filterQuery.value.skip = "$skip="+ data.skip;
+        loadStore.loadsCurrentPage = data.page
+        await loadStore.getCompanyLoads(filterQuery.value, true)
         loading.value = false;
     }
     
     const getLoadWithFilters = async(filter) => {
         loading.value = true;
-        await loadStore.getCompanyLoads(filter);
+        await loadStore.getCompanyLoads(filter, true);
         loading.value = false;
     }
 
     const search = () => {
+        setTimeout(() => {
             if(query.value.length >= 2){
                 // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
                 filterQuery.value.search = "posted_by_name[$regex]="+query.value+"&posted_by_name[$options]=i";
                 getLoadWithFilters(filterQuery.value);
             } 
+        }, 100)
     
     }
 
     const clearFilter = () => {
+        clearRequest();
         filterQuery.value.search = ""
         filterQuery.value.status = "status[$ne]="+"Closed";
-
+        console.log('click here');
         if(query.value == ''){
-            getDataLoadsInit();
+            getDataLoadsInit(true);
         } else {
             query.value = '';
         }
     }
 
+    const clearRequest = () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ limit;
+        loadStore.loadsCurrentPage = 1;
+    }
+
     const loadHistory = () => {
+        clearRequest();
         filterQuery.value.status = ""
         filterQuery.value.status = "status="+ "Closed";
         getLoadWithFilters(filterQuery.value);
@@ -99,6 +130,12 @@ import CardEmpty from '../components/CardEmpty.vue';
                     :load="load" 
                 />
                 <CardEmpty v-else text="No hay cargas agregadas"/>
+                <Pagination
+                    :limit="limit"
+                    :total="loadStore.loadsTotal"
+                    :current-page="loadStore.loadsCurrentPage"
+                    @get-elements="getLoadsByPage"
+                />
             </div>
         </div>
     </div>

src/views/LocationsView.vue

@@ -23,7 +23,7 @@ import Pagination from '../components/Pagination.vue';
 
     const getInitData = async() => {
         loading.value = true;
-        companyStore.locationsCurrentPage = companyStore.locationsCurrentPage;
+        // companyStore.locationsCurrentPage = companyStore.locationsCurrentPage;
         filterQuery.value.company = "company="+ localStorage.getItem('id');
         await companyStore.getLocationsCompany(filterQuery.value, false)
         loading.value = false;

src/views/TrucksPublishedView.vue

@@ -5,12 +5,14 @@
     import CardProposal from '../components/CardProposal.vue';
     import LoadDetailModal from '../components/LoadDetailModal.vue';
     import MakeProposalModal from '../components/MakeProposalModal.vue';
+    import Pagination from '../components/pagination.vue';
 
     const companyStore = useCompanyStore();
     const loading = ref(false);
     const proposalCurrent = ref(null);
     const openModal = ref(false);
     const openModalProposal = ref(false);
+    const limit = 3;
 
     onMounted(() =>{
         getInitData();
@@ -18,7 +20,17 @@ import MakeProposalModal from '../components/MakeProposalModal.vue';
 
     const getInitData = async() => {
         loading.value = true;
-        await companyStore.getProposalsCompany();
+        const filter = '$limit=' + limit + "&$skip=0";
+        await companyStore.getProposalsCompany(filter, false);
+        loading.value = false;
+    }
+
+    const getProposalsByPage = async(data) => {
+        console.log(data)
+        loading.value = true;
+        const filter = '$limit=' + limit + "&$skip=" + data.skip;
+        companyStore.proposalsCurrentPage = data.page;
+        await companyStore.getProposalsCompany(filter, true);
         loading.value = false;
     }
 
@@ -61,6 +73,13 @@ import MakeProposalModal from '../components/MakeProposalModal.vue';
             :proposal="proposal" 
             @set-proposal="handleSetCurrentProposal"
         />
+        <Pagination
+            v-if="!loading"
+            :limit="limit"
+            :current-page="companyStore.proposalsCurrentPage"
+            :total="companyStore.proposalsTotal"
+            @get-elements="getProposalsByPage"
+        />
     </div>
 </template>
 

src/views/VehiclesView.vue

@@ -8,6 +8,7 @@
     import CreateVehicleModal from '../components/CreateVehicleModal.vue';
     import StatusVehicleModal from '../components/StatusVehicleModal.vue';
     import DriverVehicleModal from '../components/DriverVehicleModal.vue';
+    import Pagination from '../components/pagination.vue';
 
     const companyStore = useCompanyStore();
     const vehicleStore = useVehiclesStore();
@@ -20,12 +21,16 @@
     const editStatusVehicle = ref(false);
     const editDriverVehicle = ref(false);
 
+    const limit = 2;
+
     onMounted(() => {
         getInitData();
     })
 
     const getInitData = async() => {
         loading.value = true;
+        filterQuery.value.limit = '$limit=' + limit;
+        filterQuery.value.skip = "$skip=0"
         filterQuery.value.company = "company="+ localStorage.getItem('id');
         await vehicleStore.fetchVehicles(filterQuery.value, false);
         await companyStore.getDrivers();
@@ -39,7 +44,10 @@
     }
 
     watch(query, () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ 100;
         if(query.value.length === 0){
+            clearRequest()
             filterQuery.value.search = "";
             getVehiclesWithFilters(filterQuery.value);
         }
@@ -55,6 +63,7 @@
     }
 
     const clearFilter = () => {
+        clearRequest()
         filterQuery.value.search = "";
         filterQuery.value.company = "company="+ localStorage.getItem('id');
 
@@ -65,6 +74,12 @@
         }
     }
 
+    const clearRequest = () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ limit;
+        vehicleStore.vehiclesCurrentPage = 1;
+    }
+
     const handleSetCurrentVehicle = (data) => {
         console.log(data);
         if(data.modal === 'form') {
@@ -84,6 +99,15 @@
         vehicleCurrent.value = null;
     }
 
+    const getVehiclesByPage = async(data) => {
+        loading.value = true;
+        filterQuery.value.company = "company="+ localStorage.getItem('id');
+        filterQuery.value.skip = "$skip="+ data.skip;
+        vehicleStore.vehiclesCurrentPage = data.page
+        await vehicleStore.fetchVehicles(filterQuery.value, true);
+        loading.value = false;
+    }
+
 </script>
 
 <template>
@@ -130,6 +154,12 @@
                 @set-vehicle="handleSetCurrentVehicle"
             />
             <CardEmpty v-else text="No hay vehiculos agregados"/>
+            <Pagination
+                :current-page="vehicleStore.vehiclesCurrentPage"
+                :total="vehicleStore.vehiclesTotal"
+                :limit="limit"  
+                @get-elements="getVehiclesByPage"
+            />
         </div>
     </div>
 </template>