From e648c2ff53be0bc3d53b8b02df33cf44de4ca94a Mon Sep 17 00:00:00 2001 From: Alexandro Uc Santos Date: Fri, 9 Feb 2024 21:32:57 -0600 Subject: [PATCH] add: pagination to loads public & calculator --- src/components/Pagination.vue | 4 +++ src/composables/userSearchLoads.js | 10 ++++-- src/stores/company.js | 2 ++ src/views/CalculatorView.vue | 27 ++++++++++++++++ src/views/SearchLoadsView.vue | 50 +++++++++++++++++++++++++++--- 5 files changed, 86 insertions(+), 7 deletions(-) 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" /> +