ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pagination users, locations, vehicles, loads

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-02-08 21:28:44 -06:00
parent 2df3bcfcfb
commit 3018a95a59
10 changed files with 157 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Pagination.vue
View File

@@ -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) => {

4
src/components/Sidebar.vue
View File

@@ -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>

31
src/stores/company.js
View File

@@ -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,
}
});

28
src/stores/loads.js
View File

@@ -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,
}

9
src/stores/vehicles.js
View File

@@ -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,

63
src/views/LoadsPublishedView.vue
View File

@@ -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"
/>
<CardEmpty v-else text="No hay cargas agregadas"/>
<Pagination
:limit="limit"
:total="loadStore.loadsTotal"
:current-page="loadStore.loadsCurrentPage"
@get-elements="getLoadsByPage"
/>
</div>
</div>
</div>

4
src/views/LocationsView.vue
View File

@@ -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;

23
src/views/TrucksPublishedView.vue
View File

@@ -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"
/>
<Pagination
v-if="!loading"
:limit="limit"
:current-page="companyStore.proposalsCurrentPage"
:total="companyStore.proposalsTotal"
@get-elements="getProposalsByPage"
/>
</div>
</template>

2
src/views/UsersView.vue
View File

@@ -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();

30
src/views/VehiclesView.vue
View File

@@ -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>