add: pagination to loads public & calculator

src/components/Pagination.vue

@@ -78,10 +78,14 @@ import { onMounted, ref } from 'vue';
         background-color: #dab977;
         color: #323030;
         margin: 4px;
+        font-size: 1.1rem;
+        font-weight: 500;
     }
     .page-active {
         width: 33px;
         height: 33px;
+        font-size: 1.2rem;
+        font-weight: 700;
         background-color: #FBBA33;
     }
 </style>

src/composables/userSearchLoads.js

@@ -4,6 +4,8 @@ import api from "../lib/axios";
 export default function useSearchLoads() {
     const loads = ref([]);
     const loading = ref(false);
+    const total = ref(0);
+    const currentPage = ref(1);
 
     const getLoadsPublished = async(filterQuery) => {
         loading.value = true;
@@ -14,12 +16,14 @@ export default function useSearchLoads() {
             filterStr = "?"+cleanfilterArr.join("&");
         }
         try {
-            const endpoint = `/loads/${filterStr}`;
+            const endpoint = `/loads/${filterStr}&$sort%5BcreatedAt%5D=-1`;
             const {data} = await api.get(endpoint);
             console.log(data);
+            total.value = data.total;
             loads.value = data.data;
         } catch (error) {
             loads.value = [];
+            total.value = 0;
             console.log(error);
         }
         loading.value = false;
@@ -28,6 +32,8 @@ export default function useSearchLoads() {
     return {
         getLoadsPublished,
         loading,
-        loads
+        loads, 
+        total,
+        currentPage,
     }
 }

src/stores/company.js

@@ -390,6 +390,8 @@ export const useCompanyStore = defineStore('company', () => {
        updateLocationCompany,
        deleteLocationCompany,
        budgets,
+       budgetsCurrentPage,
+       budgetsTotal,
        users,
        drivers,
        usersTotal,

src/views/CalculatorView.vue

@@ -6,6 +6,7 @@
     import CardBudget from '../components/CardBudget.vue';
     import CardEmpty from '../components/CardEmpty.vue';
     import CreateBudgetModal from '../components/CreateBudgetModal.vue';
+import Pagination from '../components/pagination.vue';
 
     const companyStore = useCompanyStore();
     const authStore = useAuthStore();
@@ -16,6 +17,7 @@
     const currentBudget = ref(null);
     const openModal = ref(false);
     const printOpen = ref(false);
+    const limit = 2;
 
     onMounted(() => {
         getInitData();
@@ -23,6 +25,8 @@
 
     const getInitData = async() => {
         loading.value = true;
+        filterQuery.value.limit = '$limit=' + limit;
+        filterQuery.value.skip = "$skip=0"
         filterQuery.value.company = "company="+ localStorage.getItem('id');
         await companyStore.getBudgetsCompany(filterQuery.value, false)
         loading.value = false;
@@ -35,7 +39,10 @@
     }
 
     watch(query, () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ 100;
         if(query.value.length === 0){
+            clearRequest();
             filterQuery.value.search = "";
             getBudgetsWithFilters(filterQuery.value);
         }
@@ -50,7 +57,15 @@
     
     }
 
+    const getBudgetsByPage = async(data) => {
+        loading.value = true;
+        filterQuery.value.skip = "$skip="+ data.skip;
+        companyStore.budgetsCurrentPage = data.page
+        await getBudgetsWithFilters(filterQuery.value)
+    }
+
     const clearFilter = () => {
+        clearRequest();
         filterQuery.value.search = "";
         filterQuery.value.company = "company="+ localStorage.getItem('id');
 
@@ -61,6 +76,12 @@
         }
     }
 
+    const clearRequest = () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ limit;
+        companyStore.budgetsCurrentPage = 1;
+    }
+
     const handleSetCurrentBudget = (data) => {
         openModal.value = true;
         currentBudget.value = data.budget;
@@ -114,6 +135,12 @@
             v-else 
             text="No hay presupuestos agregados"
         />
+        <Pagination
+            :limit="limit"
+            :current-page="companyStore.budgetsCurrentPage"
+            :total="companyStore.budgetsTotal"
+            @get-elements="getBudgetsByPage"
+        />
     </div>
 </template>
 

src/views/SearchLoadsView.vue

@@ -9,21 +9,30 @@
     import States from '../components/ui/States.vue';
     import Cities from '../components/ui/Cities.vue';
     import MakeProposalModal from '../components/MakeProposalModal.vue';
+    import Pagination from '../components/pagination.vue';
     const filterQuery = ref([]);
     const query = ref('');
     const selectedTruckType = ref([]);
     const selectedCategory = ref([]);
     const selectedState = ref([]);
     const selectedCities = ref([]);
-
+    const limit = 3;
-    const { getLoadsPublished, loads, loading } = useSearchLoads();
+    const isSearch = ref(false);
+    const { getLoadsPublished, loads, loading, currentPage, total } = useSearchLoads();
 
     onMounted(() => {
         getInitData();
     });
 
     watch(query, () => {
+        isSearch.value = true;
+        setFilterUnlimited();
         if(query.value.length === 0){
+            if(selectedCategory.value?.length === 0  && selectedTruckType.value?.length === 0 && selectedCities.value?.length === 0 && selectedState.value?.length === 0 ) {
+                console.log('here');
+                clearRequest();
+                isSearch.value = false;
+            }
             filterQuery.value.search = "";
             getLoadsPublished(filterQuery.value);
         }
@@ -31,6 +40,7 @@
 
     watch(selectedState, () => {
         if(selectedState.value != null){
+            setFilterUnlimited()
             filterQuery.value.state = "origin.state[$in][]="+ selectedState.value.state_name;
             getLoadsPublished(filterQuery.value);
         } 
@@ -38,6 +48,7 @@
 
     watch(selectedCities, () => {
         if(selectedCities.value != null){
+            setFilterUnlimited()
             filterQuery.value.city = "origin.city[$regex]="+ selectedCities.value.city_name;
             getLoadsPublished(filterQuery.value);
         } 
@@ -45,6 +56,7 @@
 
     watch(selectedCategory, () => {
         if(selectedCategory.value != null){
+            setFilterUnlimited()
             filterQuery.value.category = "categories[$in][]=" + selectedCategory.value._id;
             getLoadsPublished(filterQuery.value);
         } 
@@ -52,6 +64,7 @@
 
     watch(selectedTruckType, () => {
         if(selectedTruckType.value != null){
+            setFilterUnlimited()
             filterQuery.value.truck_type = "truck_type[$in][]="+ selectedTruckType.value.meta_value;
             getLoadsPublished(filterQuery.value);
         } 
@@ -67,7 +80,8 @@
     }
 
     const clearFilter = () => {
-    
+        clearRequest();
+        isSearch.value = false;
         selectedCities.value = null;
         selectedCategory.value = null;
         selectedState.value = null;
@@ -108,13 +122,32 @@
     }
 
     const getInitData = async() => {
-        filterQuery.value.limit = "";
+        filterQuery.value.limit = '$limit=' + limit;
-        filterQuery.value.company = "",
+        filterQuery.value.skip = "$skip=0";
+        filterQuery.value.company = "";
 
         filterQuery.value.status = "status=Published",
         await getLoadsPublished(filterQuery.value);
     }
 
+    const getLoadsByPage = (data) => {
+        console.log(data);
+        filterQuery.value.skip = "$skip="+ data.skip;
+        currentPage.value = data.page
+        getLoadsPublished(filterQuery.value);
+    }
+
+    const clearRequest = () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ limit;
+        currentPage.value = 1;
+    }
+
+    const setFilterUnlimited = () => {
+        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.limit = "$limit="+ 100;
+    }
+
     const currentLoad = ref(null);
 
     const handleSetCurrentLoad = (load) => {
@@ -175,6 +208,13 @@
             v-else
             text="No hay cargas publicadas"
         />
+        <Pagination
+            v-if="!isSearch"
+            :limit="limit"
+            :total="total"
+            :current-page="currentPage"
+            @get-elements="getLoadsByPage"
+        />
     </div>
 </template>