From 3018a95a5960541e8f115f0c3e2e435b48bf10a0 Mon Sep 17 00:00:00 2001 From: Alexandro Uc Santos Date: Thu, 8 Feb 2024 21:28:44 -0600 Subject: [PATCH] pagination users, locations, vehicles, loads --- src/components/Pagination.vue | 2 - src/components/Sidebar.vue | 4 +- src/stores/company.js | 31 +++++++++++---- src/stores/loads.js | 28 +++++++++----- src/stores/vehicles.js | 9 ++++- src/views/LoadsPublishedView.vue | 63 ++++++++++++++++++++++++------- src/views/LocationsView.vue | 4 +- src/views/TrucksPublishedView.vue | 23 ++++++++++- src/views/UsersView.vue | 2 +- src/views/VehiclesView.vue | 30 +++++++++++++++ 10 files changed, 157 insertions(+), 39 deletions(-) diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue index 65077f4..29953da 100644 --- a/src/components/Pagination.vue +++ b/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) => { diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index efb7448..34a7705 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -105,14 +105,14 @@ class="nav-link" :to="{name: 'calculator'}">Calculadora -
  • +
    diff --git a/src/stores/company.js b/src/stores/company.js index 47cd891..1484670 100644 --- a/src/stores/company.js +++ b/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}`; - const {data} = await api.get(endpoint); - proposals.value = data.data; + 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, } }); \ No newline at end of file diff --git a/src/stores/loads.js b/src/stores/loads.js index 6c8097b..1b64970 100644 --- a/src/stores/loads.js +++ b/src/stores/loads.js @@ -6,27 +6,33 @@ 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); - try { - const endpoint = `/loads?company=${companyid}&${filterStr}`; - const {data} = await api.get(endpoint); - loads.value = data.data; - } catch (error) { - loads.value = []; - console.log(error); + if(loads.value.length <= 0 || reload) { + try { + 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); + } } } @@ -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, } diff --git a/src/stores/vehicles.js b/src/stores/vehicles.js index ed71faa..e4901b7 100644 --- a/src/stores/vehicles.js +++ b/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, diff --git a/src/views/LoadsPublishedView.vue b/src/views/LoadsPublishedView.vue index c6fa026..36ad821 100644 --- a/src/views/LoadsPublishedView.vue +++ b/src/views/LoadsPublishedView.vue @@ -5,59 +5,90 @@ import AttachmentsModal from '../components/AttachmentsModal.vue'; import { useLoadsStore } from '../stores/loads'; import FormLoadModal from '../components/FormLoadModal.vue'; -import ProposalsModal from '../components/ProposalsModal.vue'; -import CardEmpty from '../components/CardEmpty.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 = () => { - 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); - } + 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" /> +
    diff --git a/src/views/LocationsView.vue b/src/views/LocationsView.vue index 5e883f3..ab4b085 100644 --- a/src/views/LocationsView.vue +++ b/src/views/LocationsView.vue @@ -5,7 +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'; + import Pagination from '../components/Pagination.vue'; const companyStore = useCompanyStore(); @@ -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; diff --git a/src/views/TrucksPublishedView.vue b/src/views/TrucksPublishedView.vue index 682b84f..21a3760 100644 --- a/src/views/TrucksPublishedView.vue +++ b/src/views/TrucksPublishedView.vue @@ -4,13 +4,15 @@ import Spiner from '../components/ui/Spiner.vue'; import CardProposal from '../components/CardProposal.vue'; import LoadDetailModal from '../components/LoadDetailModal.vue'; -import MakeProposalModal from '../components/MakeProposalModal.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" /> + diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue index 9352e58..ca9a7b1 100644 --- a/src/views/UsersView.vue +++ b/src/views/UsersView.vue @@ -4,7 +4,7 @@ import CardUser from '../components/CardUser.vue'; import { useCompanyStore } from '../stores/company'; import CreateUserModal from '../components/CreateUserModal.vue'; -import Pagination from '../components/Pagination.vue'; + import Pagination from '../components/Pagination.vue'; const companyStore = useCompanyStore(); diff --git a/src/views/VehiclesView.vue b/src/views/VehiclesView.vue index 1fbf87e..cc214f2 100644 --- a/src/views/VehiclesView.vue +++ b/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; + } +