diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue
index 29953da..f9de790 100644
--- a/src/components/Pagination.vue
+++ b/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;
}
\ No newline at end of file
diff --git a/src/composables/userSearchLoads.js b/src/composables/userSearchLoads.js
index 76add1e..dba1bce 100644
--- a/src/composables/userSearchLoads.js
+++ b/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,
}
}
\ No newline at end of file
diff --git a/src/stores/company.js b/src/stores/company.js
index 1484670..ee85732 100644
--- a/src/stores/company.js
+++ b/src/stores/company.js
@@ -390,6 +390,8 @@ export const useCompanyStore = defineStore('company', () => {
updateLocationCompany,
deleteLocationCompany,
budgets,
+ budgetsCurrentPage,
+ budgetsTotal,
users,
drivers,
usersTotal,
diff --git a/src/views/CalculatorView.vue b/src/views/CalculatorView.vue
index 9be3968..21993e9 100644
--- a/src/views/CalculatorView.vue
+++ b/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"
/>
+
diff --git a/src/views/SearchLoadsView.vue b/src/views/SearchLoadsView.vue
index a0baf23..7085fbd 100644
--- a/src/views/SearchLoadsView.vue
+++ b/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 { getLoadsPublished, loads, loading } = useSearchLoads();
+ const limit = 3;
+ 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.company = "",
+ filterQuery.value.limit = '$limit=' + limit;
+ 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"
/>
+