From f8dfe4a3adf2ddd357823cee5fb186c14f1c7c76 Mon Sep 17 00:00:00 2001 From: Alexandro Uc Santos Date: Sat, 16 Mar 2024 18:20:59 -0600 Subject: [PATCH] add: pagination in search loads y companies --- src/components/CardLoad.vue | 6 ++-- src/components/CardVehicle.vue | 2 +- src/components/CreateUserModal.vue | 23 +++++++++++++ src/components/CreateVehicleModal.vue | 3 ++ src/components/DriverVehicleModal.vue | 2 +- src/composables/useDirectory.js | 2 +- src/composables/userSearchLoads.js | 2 +- src/router/index.js | 4 +-- src/services/auth.js | 2 ++ src/stores/vehicles.js | 2 +- src/views/CarriersView.vue | 32 ++++++++++++++++-- src/views/CompleteRegisterView.vue | 48 ++++++++++++++++++--------- src/views/LoginView.vue | 9 +++-- src/views/SearchLoadsView.vue | 19 ++++++----- src/views/ShippersView.vue | 6 ++-- src/views/UsersView.vue | 3 ++ src/views/VehiclesView.vue | 2 +- 17 files changed, 122 insertions(+), 45 deletions(-) diff --git a/src/components/CardLoad.vue b/src/components/CardLoad.vue index 86123ae..b3eae46 100644 --- a/src/components/CardLoad.vue +++ b/src/components/CardLoad.vue @@ -151,8 +151,8 @@
diff --git a/src/composables/useDirectory.js b/src/composables/useDirectory.js index 9c400d1..5e73b78 100644 --- a/src/composables/useDirectory.js +++ b/src/composables/useDirectory.js @@ -6,7 +6,7 @@ export default function useDirectory() { const loading = ref(false); const users = ref([]); const companiesTotal = ref(0); - const currentCompaniesPage = ref(1); + const currentCompaniesPage = ref(0); const getCompaniesData = async(filterQuery) => { diff --git a/src/composables/userSearchLoads.js b/src/composables/userSearchLoads.js index d3984f8..3c00dcc 100644 --- a/src/composables/userSearchLoads.js +++ b/src/composables/userSearchLoads.js @@ -5,7 +5,7 @@ export default function useSearchLoads() { const loads = ref([]); const loading = ref(false); const total = ref(0); - const currentPage = ref(1); + const currentPage = ref(0); const getLoadsPublished = async(filterQuery) => { loading.value = true; diff --git a/src/router/index.js b/src/router/index.js index 6cb36a5..9538606 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -119,12 +119,12 @@ const router = createRouter({ component: () => import('../views/VehiclesView.vue'), }, { - path: 'embarcadores', + path: 'transportistas', name: 'carriers', component: () => import('../views/CarriersView.vue'), }, { - path: 'transportistas', + path: 'embarcadores', name: 'shippers', component: () => import('../views/ShippersView.vue'), }, diff --git a/src/services/auth.js b/src/services/auth.js index ca667d6..8abc9bb 100644 --- a/src/services/auth.js +++ b/src/services/auth.js @@ -6,6 +6,7 @@ export const login = async(body) => { try { const endpoint = "/v1/account/authorize"; const {data} = await apiPublic.post(endpoint, body); + console.log('auth: ', data); if(data.accessToken !== null){ if(data.user.job_role !== 'driver'){ //TODO: Guardar token y datos del usuario @@ -78,6 +79,7 @@ export const regiterConfirm = async(body) => { try { const endpoint = "/v1/account/signup"; const {data} = await apiPublic.patch(endpoint, body); + console.log('register auth: ', data); return { msg: 'success', data diff --git a/src/stores/vehicles.js b/src/stores/vehicles.js index 5290953..1ebd0b5 100644 --- a/src/stores/vehicles.js +++ b/src/stores/vehicles.js @@ -28,7 +28,7 @@ export const useVehiclesStore = defineStore('vehicles', () => { const createVehicleCompany = async(formData, localData = {}) => { const data = await createVehicle(formData); if(data) { - vehicles.value.push({ + vehicles.value.unshift({ ...data, ...localData }); diff --git a/src/views/CarriersView.vue b/src/views/CarriersView.vue index d50e489..f2b3ec7 100644 --- a/src/views/CarriersView.vue +++ b/src/views/CarriersView.vue @@ -7,8 +7,9 @@ import Segments from '../components/ui/Segments.vue'; import States from '../components/ui/States.vue'; import Cities from '../components/ui/Cities.vue'; +import Pagination from '../components/Pagination.vue'; - const {loading, companies, getCompaniesData} = useDirectory(); + const {loading, companies, getCompaniesData, companiesTotal, currentCompaniesPage} = useDirectory(); const query = ref(''); const selectedTruckType = ref([]); const selectedCategory = ref([]); @@ -16,11 +17,24 @@ const selectedCities = ref([]); const filterQuery = ref([]); + const limit = 5; + onMounted(() => { filterQuery.value.company_type = 'carrier'; + filterQuery.value.limit = 'elements=' + limit; + filterQuery.value.page = "page=0"; getCompaniesData(filterQuery.value); }); + const getCompaniesByPage = (data) => { + console.log(data); + // filterQuery.value.company_type = 'shipper'; + filterQuery.value.page = "page="+ data.page; + currentCompaniesPage.value = data.page + getCompaniesData(filterQuery.value); + } + + watch(query, () => { if(query.value.length === 0){ filterQuery.value.search = ""; @@ -66,7 +80,7 @@ } const clearFilter = () => { - + clearRequest(); selectedCities.value = null; selectedCategory.value = null; selectedState.value = null; @@ -86,6 +100,12 @@ } } + const clearRequest = () => { + filterQuery.value.page = "page="+ 0; + filterQuery.value.limit = "elements="+ limit; + currentCompaniesPage.value = 0; + } + const clearState = () => { filterQuery.value.state = ""; getCompaniesData(filterQuery.value); @@ -151,6 +171,14 @@ :key="company._id" :company="company" /> + + diff --git a/src/views/CompleteRegisterView.vue b/src/views/CompleteRegisterView.vue index 5bba134..9ccc7dc 100644 --- a/src/views/CompleteRegisterView.vue +++ b/src/views/CompleteRegisterView.vue @@ -13,6 +13,7 @@ import { useAuthStore } from '../stores/auth'; import { complete_registry } from "../services/auth"; import { updateMyUserProfile } from "../services/company" +import Spiner from '../components/ui/Spiner.vue'; const notifications = useNotificationsStore(); const auth = useAuthStore(); @@ -72,6 +73,7 @@ clearMessages(); return; } + localStorage.setItem('access', auth.token); const companyData = { company_name : company.name, rfc : company.rfc, @@ -82,31 +84,40 @@ company_description : company.description, company_type : typeCompany.typeCompany, }; + loading.value = true; const result = await complete_registry( companyData ); - console.log(result); - if(result.msg === 'success' && result.data !== null){ - localStorage.setItem('id', result.data._id); + + if(result.msg !== 'success') { + msgError.value = result.msg; + localStorage.removeItem('access'); + loading.value = false; + clearMessages(); + return; } + console.log(result); + localStorage.setItem('id', result.data._id); + localStorage.setItem('session', auth.sesion); + // localStorage.setItem('access', auth.token); + const userData = { "first_name" : user.name, "last_name" : user.lastName, "phone" : user.phone1, "phone2" : user.phone2, }; - await updateMyUserProfile( userData ); + let respUser = await updateMyUserProfile( userData ); + console.log('User create: ', respUser); + if(respUser === null) { + auth.user = userData; + } else { + auth.user = respUser; + } /////// Datos debug /////// notifications.show = true; notifications.text = 'Los datos se llenaron correctamente'; - localStorage.setItem('session', 'jssksksksk2skskkskskkskss'); - auth.$patch({ - sesion: 'jssksksksk2skskkskskkskss', - token: 'jkdkdkdkeoee00kelldd', - user: { - first_name: user.name, - last_name: user.lastName - }, - }) + + loading.value = false; router.push({name: 'home'}); /////////////////////////// } @@ -292,6 +303,7 @@ label="Teléfono 1: *" type="number" name="phone1" + :step="1" :filled="false" v-model:field="user.phone1" /> @@ -299,12 +311,18 @@ label="Teléfono 2:" type="number" name="phone2" + :step="1" :filled="false" v-model:field="user.phone2" /> - - + + diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index 8a1eb63..d6f68d2 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -37,8 +37,7 @@ } const resp = await login(data); if(resp.msg === 'success') { - console.log(resp.data.user); - if( resp.data.user.company ) { + if( resp.data.user.company ) { // Registro completo localStorage.setItem('session', resp.data.session_token); localStorage.setItem('access', resp.data.accessToken); localStorage.setItem('id', resp.data.user.company); @@ -49,14 +48,14 @@ token: resp.data.accessToken, user: resp.data.user, }) - } else { + } else { // Completar registro auth.$patch({ sesion: resp.data.session_token, token: resp.data.accessToken, user: resp.data.user, }) - localStorage.setItem('session', resp.data.session_token); - localStorage.setItem('access', resp.data.accessToken); + // localStorage.setItem('session', resp.data.session_token); + // localStorage.setItem('access', resp.data.accessToken); router.push({name: 'register-company'}); } } else { diff --git a/src/views/SearchLoadsView.vue b/src/views/SearchLoadsView.vue index 42c2d36..bb297fb 100644 --- a/src/views/SearchLoadsView.vue +++ b/src/views/SearchLoadsView.vue @@ -10,13 +10,14 @@ 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 limit = 3; + const limit = 1; const isSearch = ref(false); const { getLoadsPublished, loads, loading, currentPage, total } = useSearchLoads(); @@ -121,8 +122,8 @@ } const getInitData = async() => { - filterQuery.value.limit = '$limit=' + limit; - filterQuery.value.skip = "$skip=0"; + filterQuery.value.limit = 'elements=' + limit; + filterQuery.value.page = "page=0"; filterQuery.value.company = ""; filterQuery.value.status = "status=Published", @@ -131,20 +132,20 @@ const getLoadsByPage = (data) => { console.log(data); - filterQuery.value.skip = "$skip="+ data.skip; + filterQuery.value.page = "page="+ data.page; currentPage.value = data.page getLoadsPublished(filterQuery.value); } const clearRequest = () => { - filterQuery.value.skip = "$skip="+ 0; - filterQuery.value.limit = "$limit="+ limit; - currentPage.value = 1; + filterQuery.value.page = "page="+ 0; + filterQuery.value.limit = "elements="+ limit; + currentPage.value = 0; } const setFilterUnlimited = () => { - filterQuery.value.skip = "$skip="+ 0; - filterQuery.value.limit = "$limit="+ 100; + filterQuery.value.page = "page="+ 0; + filterQuery.value.limit = "elements="+ 100; } const currentLoad = ref(null); diff --git a/src/views/ShippersView.vue b/src/views/ShippersView.vue index 0316e68..0844908 100644 --- a/src/views/ShippersView.vue +++ b/src/views/ShippersView.vue @@ -17,7 +17,7 @@ const selectedCities = ref([]); const filterQuery = ref([]); - const limit = 3; + const limit = 5; onMounted(() => { filterQuery.value.company_type = 'shipper'; @@ -102,9 +102,9 @@ } const clearRequest = () => { - filterQuery.value.page = "page="+ 1; + filterQuery.value.page = "page="+ 0; filterQuery.value.limit = "elements="+ limit; - currentPage.value = 1; + currentCompaniesPage.value = 0; } const clearState = () => { diff --git a/src/views/UsersView.vue b/src/views/UsersView.vue index 318ea28..19a80aa 100644 --- a/src/views/UsersView.vue +++ b/src/views/UsersView.vue @@ -5,8 +5,10 @@ import { useCompanyStore } from '../stores/company'; import CreateUserModal from '../components/CreateUserModal.vue'; import Pagination from '../components/Pagination.vue'; +import { useAuthStore } from '../stores/auth'; const companyStore = useCompanyStore(); + const authStore = useAuthStore(); onMounted(() => { getInitData(); @@ -54,6 +56,7 @@

Usuarios