From 2df3bcfcfb0c2ab9120c54e9adee1ddf720b1e96 Mon Sep 17 00:00:00 2001 From: Alexandro Uc Santos Date: Mon, 5 Feb 2024 21:26:57 -0600 Subject: [PATCH] add: pagination of users --- src/components/CreateUserModal.vue | 2 +- src/components/DriverVehicleModal.vue | 2 +- src/components/FormLoadModal.vue | 8 +- src/services/company.js | 6 +- src/stores/auth.js | 3 + src/stores/company.js | 125 ++++++++++++++++++++------ src/stores/loads.js | 10 +++ src/views/LocationsView.vue | 2 +- src/views/UsersView.vue | 18 +++- src/views/VehiclesView.vue | 2 +- 10 files changed, 139 insertions(+), 39 deletions(-) diff --git a/src/components/CreateUserModal.vue b/src/components/CreateUserModal.vue index 10a23d7..044e2e6 100644 --- a/src/components/CreateUserModal.vue +++ b/src/components/CreateUserModal.vue @@ -208,7 +208,7 @@ - +
diff --git a/src/components/DriverVehicleModal.vue b/src/components/DriverVehicleModal.vue index 5106fed..4660911 100644 --- a/src/components/DriverVehicleModal.vue +++ b/src/components/DriverVehicleModal.vue @@ -23,7 +23,7 @@ const loading = ref(false); onMounted(() => { - drivers.value = companyStore.users?.filter((u) => u.job_role == 'driver'); + drivers.value = companyStore.drivers; if(props?.vehicle?.driver) { const index = drivers.value.findIndex((d) => d._id === props.vehicle.driver?._id); driverSelected.value = drivers.value[index]; diff --git a/src/components/FormLoadModal.vue b/src/components/FormLoadModal.vue index 02d913a..cc0bfd4 100644 --- a/src/components/FormLoadModal.vue +++ b/src/components/FormLoadModal.vue @@ -70,7 +70,7 @@ zoom.value = 4; heightMap.value = 420; } - if(companyStore.locations.length <= 0) { + if(companyStore.locationsLoads.length <= 0) { getLocations(); } formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name; @@ -144,8 +144,8 @@ const getLocations = async() => { loadingLocations.value = true; - filterQueryVehicles.value.company = "company="+ localStorage.getItem('id'); - await companyStore.getLocationsCompany(filterQueryVehicles.value, false) + // filterQueryVehicles.value.company = "company="+ localStorage.getItem('id'); + await companyStore.getLocationsLoads() loadingLocations.value = false; } @@ -440,7 +440,7 @@ v-model="locationLoadSelected" > - +
{ } } -export const getUsers = async(companyId) => { +export const getUsers = async(filter) => { try { - const endpoint = `/users?company=${companyId}`; + const endpoint = `/users?${filter}`; const {data} = await api.get(endpoint); return data; } catch (error) { @@ -115,7 +115,7 @@ export const deleteBudget = async(id) => { export const getLocations = async(filter) => { try { - const endpoint = `/branches/${filter}&$limit=10&$sort%5BcreatedAt%5D=-1`; + const endpoint = `/branches/${filter}&$limit=3&$sort%5BcreatedAt%5D=-1`; console.log(endpoint); const {data} = await api.get(endpoint); return data; diff --git a/src/stores/auth.js b/src/stores/auth.js index 6b3ae09..40c8cbb 100644 --- a/src/stores/auth.js +++ b/src/stores/auth.js @@ -4,12 +4,14 @@ import { useRouter } from 'vue-router'; import { renewToken } from '../services/auth'; import {useNotificationsStore} from './notifications'; import {useCompanyStore} from './company'; +import { useLoadsStore } from "./loads"; export const useAuthStore = defineStore('auth', () => { const router = useRouter(); const noty = useNotificationsStore(); const company = useCompanyStore(); + const loadStore = useLoadsStore(); const sesion = ref('') const checking = ref(false); const authStatus = ref('checking'); @@ -56,6 +58,7 @@ export const useAuthStore = defineStore('auth', () => { sesion.value = ''; token.value = ''; company.clear(); + localStorage.clear(); user.value = null; console.log(company.company); localStorage.removeItem('access'); diff --git a/src/stores/company.js b/src/stores/company.js index 91b31a2..47cd891 100644 --- a/src/stores/company.js +++ b/src/stores/company.js @@ -8,8 +8,12 @@ export const useCompanyStore = defineStore('company', () => { const company = ref(null) const users = ref([]); + const drivers = ref([]); + const usersTotal = ref(0); + const usersCurrentPage = ref(1); const budgets = ref([]); const locations = ref([]); + const locationsLoads = ref([]); const locationsTotal = ref(0); const locationsCurrentPage = ref(1); const proposals = ref([]) @@ -21,19 +25,18 @@ export const useCompanyStore = defineStore('company', () => { if(!company.value) { loading.value = true; const resp = await getCompany(companyId); - console.log(resp); company.value = resp; } - console.log(company.value); loading.value = false; } - const getUsersCompany = async() => { + const getUsersCompany = async(limit = 10, skip = 0, reload = false) => { const companyId = localStorage.getItem('id'); - if(users.value.length <= 0) { - const resp = await getUsers(companyId); - console.log(resp); + if(users.value.length <= 0 || reload === true) { + 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; users.value = resp.data; } else { users.value = []; @@ -41,14 +44,34 @@ export const useCompanyStore = defineStore('company', () => { } } + const getDrivers = async() => { + const companyId = localStorage.getItem('id'); + if(drivers.value.length <= 0) { + const filter = `company=${companyId}&$sort%5BcreatedAt%5D=-1&$limit=100&$skip=0&job_role=driver` + const resp = await getUsers(filter); + if(resp !== null && resp.total > 0) { + drivers.value = resp.data; + } else { + drivers.value = []; + } + } + } + const createUserCompany = async(formData, localData) => { const data = await createUser(formData); if(data) { - users.value.push({ + users.value.unshift({ ...data, ...localData }); + usersTotal.value++; + if(data.job_role === 'driver' && drivers.value.length > 0) { + drivers.value.unshift({ + ...data, + ...localData + }) + } return 'success'; } else { return 'Algo salio mal, intente más tarde'; @@ -59,11 +82,23 @@ export const useCompanyStore = defineStore('company', () => { const data = await updateUser(id, formData); if(data) { const index = users.value.findIndex((user) => user._id === id); - users.value[index] = { - ...users.value[index], - ...data, - ...localData - }; + if(index !== -1) { + users.value[index] = { + ...users.value[index], + ...data, + ...localData + }; + if(data.job_role === 'driver' && drivers.value.length > 0) { // Actualizamos en la lista drivers + const indexd = drivers.value.findIndex((user) => user._id === id); + if(indexd !== -1) { + drivers.value[indexd] = { + ...drivers.value[index], + ...data, + ...localData + }; + } + } + } return 'success'; } else { return 'Algo salio mal, intente más tarde'; @@ -74,7 +109,9 @@ export const useCompanyStore = defineStore('company', () => { const data = await deleteUser(id); if(data) { users.value = users.value.filter(user => user._id !== id); - + if(data.job_role === 'driver' && drivers.value.length > 0) { + drivers.value = drivers.value.filter(user => user._id !== id); + } return 'success'; } else { return 'Algo salio mal, intente más tarde'; @@ -95,11 +132,18 @@ export const useCompanyStore = defineStore('company', () => { } } - const clear = () => { + const clear = () => { //Cuando se cierra la sesion company.value = null; users.value = []; + usersTotal.value = 0; + usersCurrentPage.value = 1; + drivers.value = []; budgets.value = []; proposals.value = []; + locations.value = []; + locationsLoads.value = []; + locationsTotal.value = 0; + locationsCurrentPage.value = 1; // companyid = null; loading.value = false; } @@ -119,16 +163,13 @@ export const useCompanyStore = defineStore('company', () => { const endpoint = `/proposals?carrier=${companyId}`; const {data} = await api.get(endpoint); proposals.value = data.data; - console.log(data); } catch (error) { proposals.value = []; - console.log(error); } } const createPropsal = async(formData) => { const data = await saveProposal(formData); - console.log(data); if(data) { return 'success'; } else { @@ -139,7 +180,6 @@ export const useCompanyStore = defineStore('company', () => { const updatePropsalLoad = async(id, formData, localData) => { const data = await updateProposal(id, formData); if(data) { - console.log(data); const index = proposals.value.findIndex((prop) => prop._id === id); proposals.value[index] = { ...proposals.value[index], @@ -156,7 +196,6 @@ export const useCompanyStore = defineStore('company', () => { let filterArr = Object.values(filterQuery); let cleanfilterArr = filterArr.filter(n=>n); - // console.log(cleanfilterArr); var filterStr = ""; if(cleanfilterArr.length >0){ filterStr ="?"+cleanfilterArr.join("&"); @@ -179,7 +218,6 @@ export const useCompanyStore = defineStore('company', () => { const updateBudgetCompany = async(id, formData, localData) => { try { const data = await updateBudget(id, formData); - console.log(localData); if(data) { const index = budgets.value.findIndex((budget) => budget._id === id); budgets.value[index] = { @@ -216,7 +254,6 @@ export const useCompanyStore = defineStore('company', () => { const deleteBudgetCompany = async(id) => { try { const data = await deleteBudget(id); - console.log(data); if(data) { budgets.value = budgets.value.filter(budget => budget._id !== id); return data; @@ -238,7 +275,6 @@ export const useCompanyStore = defineStore('company', () => { } if(locations.value.length <= 0 || reload === true) { const resp = await getLocations(filterStr); - console.log(resp); if(resp !== null && resp.total > 0) { locations.value = resp.data; locationsTotal.value = resp.total; @@ -248,6 +284,18 @@ export const useCompanyStore = defineStore('company', () => { } } + const getLocationsLoads = async() => { + if(locationsLoads.value.length <= 0) { + const filterStr = "?company="+ localStorage.getItem('id') + '&$limit=100' + const resp = await getLocations(filterStr); + if(resp !== null && resp.total > 0) { + locationsLoads.value = resp.data; + } else { + locationsLoads.value = []; + } + } + } + const createLocationCompany = async(formData, localData) => { const data = await createLocation(formData); if(data) { @@ -256,6 +304,10 @@ export const useCompanyStore = defineStore('company', () => { ...localData }); locationsTotal.value++; + locationsLoads.value.unshift({ + ...data, + ...localData + }) return 'success'; } else { return 'Algo salio mal, intente más tarde'; @@ -266,11 +318,21 @@ export const useCompanyStore = defineStore('company', () => { const data = await updateLocation(id, formData); if(data) { const index = locations.value.findIndex((loc) => loc._id === id); - locations.value[index] = { - ...locations.value[index], - ...data, - ...localData - }; + if(index !== -1) { + locations.value[index] = { + ...locations.value[index], + ...data, + ...localData + }; + if(locationsLoads.value.length > 0) { + const indexl = locationsLoads.value.findIndex((loc) => loc._id === id); + locationsLoads.value[indexl] = { + ...locationsLoads.value[index], + ...data, + ...localData + }; + } + } return 'success'; } else { return 'Algo salio mal, intente más tarde'; @@ -281,6 +343,9 @@ export const useCompanyStore = defineStore('company', () => { const data = await deleteLocation(id); if(data) { locations.value = locations.value.filter(loc => loc._id !== id); + if(locationsLoads.value.length > 0) { + locationsLoads.value = locationsLoads.value.filter(loc => loc._id !== id); + } return 'success'; } else { @@ -296,6 +361,7 @@ export const useCompanyStore = defineStore('company', () => { updatePropsalLoad, getBudgetsCompany, getUsersCompany, + getDrivers, createUserCompany, updateUserCompany, deleteUserCompany, @@ -304,12 +370,17 @@ export const useCompanyStore = defineStore('company', () => { createBudgetCompany, deleteBudgetCompany, getLocationsCompany, + getLocationsLoads, createLocationCompany, updateLocationCompany, deleteLocationCompany, budgets, users, + drivers, + usersTotal, + usersCurrentPage, locations, + locationsLoads, locationsTotal, locationsCurrentPage, clear, diff --git a/src/stores/loads.js b/src/stores/loads.js index 99ff48b..6c8097b 100644 --- a/src/stores/loads.js +++ b/src/stores/loads.js @@ -112,8 +112,18 @@ export const useLoadsStore = defineStore('load', () => { } } + const clear = () => { + currentLoad.value = null; + loads.value = []; + proposalsOfLoads.value = []; + openModalEdit.value = false; + openAttachmentsModal.value = false; + openProposalsModal.value = false; + } + return { + clear, openModalEdit, openProposalsModal, openAttachmentsModal, diff --git a/src/views/LocationsView.vue b/src/views/LocationsView.vue index 9aabaef..5e883f3 100644 --- a/src/views/LocationsView.vue +++ b/src/views/LocationsView.vue @@ -19,7 +19,7 @@ import Pagination from '../components/Pagination.vue'; getInitData(); }) - const limit = 10; + const limit = 3; const getInitData = async() => { loading.value = true; diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue index ca2dfea..9352e58 100644 --- a/src/views/UsersView.vue +++ b/src/views/UsersView.vue @@ -4,6 +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'; const companyStore = useCompanyStore(); @@ -13,11 +14,20 @@ const currentUser = ref(null); const openModal = ref(false); + const limit = 3; const getInitData = async() => { console.log('callll') loading.value = true; - await companyStore.getUsersCompany(); + await companyStore.getUsersCompany(limit); + loading.value = false; + } + + const getUsersByPage = async(data) => { + console.log(data) + loading.value = true; + companyStore.usersCurrentPage = data.page + await companyStore.getUsersCompany(limit, data.skip, true); loading.value = false; } @@ -61,6 +71,12 @@ :readonly="false" @set-user="handleSetCurrentUser(user)" /> + diff --git a/src/views/VehiclesView.vue b/src/views/VehiclesView.vue index 6a96b69..1fbf87e 100644 --- a/src/views/VehiclesView.vue +++ b/src/views/VehiclesView.vue @@ -28,7 +28,7 @@ loading.value = true; filterQuery.value.company = "company="+ localStorage.getItem('id'); await vehicleStore.fetchVehicles(filterQuery.value, false); - await companyStore.getUsersCompany(); + await companyStore.getDrivers(); loading.value = false; }