add: pagination in search loads y companies

src/components/CardLoad.vue

@@ -151,8 +151,8 @@
         </div>
         <div class="btn-row" v-if="!readOnly && authStore.user?.permissions === 'role_shipper'">
             <button
-                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
+                v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by"
-                class="btn-primary-sm bg-dark"
+                class="btn-primary-sm bg-danger"
                 @click="handleDeleteLoad"
             ><i class="fa-solid fa-ban clear-sm"></i> Cancelar</button>
             <button  v-if="load.status !== 'Draft' && load.load_status !== 'Published' && load.load_status !== 'Loading'" 
@@ -165,7 +165,7 @@
                 Evidencias
             </button>
             <button
-                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
+                v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by"
                 class="btn-primary-sm"
                 data-toggle="modal" data-target="#formLoadModal"
                 @click="openEditModal"

src/components/CardVehicle.vue

@@ -10,7 +10,7 @@ import { useAuthStore } from '../stores/auth';
             required: true
         }
     })
-
+    console.log(props.vehicle);
     defineEmits(['set-vehicle']);
 
     const vehicleStore = useVehiclesStore();

src/components/CreateUserModal.vue

@@ -18,6 +18,29 @@
         }
     });
 
+    /*
+        Usuarios: Staff solo puede ver los usuarios. 
+
+        Ubicaciones: Staff puede hacer todas las acciones
+
+        Cargas: Staff: solo puede elimianr y editar sus propias cargas, y puede crear cargas  
+                Gerente: de todos
+                Staff puede aceptar ofertas de las cargas de sus demas compañeros
+
+        Calendario: Gerente, Staff, puede ver sus eventos propios y las de la empresa,
+
+        Vehiculos: Staff: solo puede elimianr y editar sus propias vehiculos, y puede crear vehiculo  
+                Gerente: de todos
+                Staff puede asignar conductores al vehiculo, puede igual cambiar el estado del vehiculo
+
+        Ofertas aceptadas: tiene todos los privilegios de un gerente.
+
+        Calculadora: El staff tiene todo los privigelios
+
+        Empresa: Manager 
+        
+    */
+
     onMounted(() => {
         if(props.user) {
             console.log(props.user)

src/components/CreateVehicleModal.vue

@@ -17,6 +17,8 @@
         }
     });
 
+    console.log(props.vehicle);
+
     defineEmits(['reset-vehicle']);
 
     const initState = {
@@ -85,6 +87,7 @@
 	    	circulation_serial_number: vehicleForm.circulation_serial_number,
 	    	notes: vehicleForm.notes,
 	    	company: authStore.user.company,
+            // posted_by: authStore.user._id,
 	    	categories: vehicleForm.categories.length <= 0 ? null : vehicleForm.categories?.map((e) => e._id),
 	    	destino: vehicleForm.destino,
 	    	available_date: new Date()

src/components/DriverVehicleModal.vue

@@ -115,7 +115,7 @@
                             v-model="driverSelected"
                         >
                             <option disabled value="">-- Seleccionar conductor --</option>
-                            <option v-for="driver in drivers" :value="driver">{{driver.name}}</option>
+                            <option v-for="driver in drivers" :value="driver">{{driver.first_name}} {{ driver.last_name }}</option>
                         </select>
                         <span class="error-msg" v-if="error">{{ error }}</span>
                     </div>

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

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;

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'),
         },

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

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

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"
         />
+
+        <Pagination
+            v-if="!loading"
+            :total="companiesTotal"
+            :limit="limit"
+            :current-page="currentCompaniesPage"
+            @get-elements="getCompaniesByPage"
+        />
     </div>
 </template>
 

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){
+        if(result.msg !== 'success') {
-            localStorage.setItem('id', result.data._id);
+            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({
+        loading.value = false;
-            sesion: 'jssksksksk2skskkskskkskss',
-            token: 'jkdkdkdkeoee00kelldd',
-            user: {
-                first_name: user.name,
-                last_name: user.lastName
-            },
-        })
         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"
                 />
             </div>
-
+            <Spiner v-if="loading" class="mt-5"/>
-            <input type="submit" value="Guardar" class="btn-primary-lg btn-lg-block my-4">
+            <input 
+                v-else 
+                type="submit" 
+                value="Guardar" 
+                class="btn-primary-lg btn-lg-block my-4"
+            />
         </form>
     </div>
 </template>

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 ) { // Registro completo
-                if( resp.data.user.company ) {
                     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('session', resp.data.session_token);
-                    localStorage.setItem('access', resp.data.accessToken);
+                    // localStorage.setItem('access', resp.data.accessToken);
                     router.push({name: 'register-company'});
                 }
             } else {

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.limit = 'elements=' + limit;
-        filterQuery.value.skip = "$skip=0";
+        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.page = "page="+ 0;
-        filterQuery.value.limit = "$limit="+ limit;
+        filterQuery.value.limit = "elements="+ limit;
-        currentPage.value = 1;
+        currentPage.value = 0;
     }
 
     const setFilterUnlimited = () => {
-        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.page = "page="+ 0;
-        filterQuery.value.limit = "$limit="+ 100;
+        filterQuery.value.limit = "elements="+ 100;
     }
 
     const currentLoad = ref(null);

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

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 @@
         <h2 class="title mb-4">Usuarios</h2>
         <div class="btn-row mb-4">
             <button
+                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
                 class="btn-primary-sm"
                 data-toggle="modal" 
                 data-target="#userModal"

src/views/VehiclesView.vue

@@ -21,7 +21,7 @@
     const editStatusVehicle = ref(false);
     const editDriverVehicle = ref(false);
 
-    const limit = 2;
+    const limit = 3;
 
     onMounted(() => {
         getInitData();