fixes: pagination & users permissions

src/components/CardLoad.vue

@@ -151,6 +151,7 @@
         </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'"
                 class="btn-primary-sm bg-dark"
                 @click="handleDeleteLoad"
             ><i class="fa-solid fa-ban clear-sm"></i> Cancelar</button>
@@ -164,6 +165,7 @@
                 Evidencias
             </button>
             <button
+                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
                 class="btn-primary-sm"
                 data-toggle="modal" data-target="#formLoadModal"
                 @click="openEditModal"

src/components/CardLocation.vue

@@ -1,6 +1,7 @@
 <script setup>
     import Swal from 'sweetalert2';
     import { useCompanyStore } from '../stores/company';
+import { useAuthStore } from '../stores/auth';
 
     const props = defineProps({
         location: {
@@ -12,6 +13,7 @@
     defineEmits(['set-location'])
     
     const companyStore = useCompanyStore();
+    const authStore = useAuthStore();
 
     const handleDeleteLocation = async() => {
         Swal.fire({
@@ -70,7 +72,7 @@
                 {{ location.description }}
             </div>
         </div>
-        <div class="card-footer">
+        <div class="card-footer" v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'">
             <button 
                 class="btn btn-dark radius-sm"
                 @click="handleDeleteLocation"

src/components/CardProposal.vue

@@ -3,6 +3,7 @@
 import { getDateMonthDay } from '../helpers/date_formats';
     import { getStatusLoad } from '../helpers/status';
     import { useCompanyStore } from '../stores/company';
+import { useAuthStore } from '../stores/auth';
 
     const props = defineProps({
         proposal: {
@@ -12,6 +13,7 @@ import { getDateMonthDay } from '../helpers/date_formats';
     })
 
     const companyStore = useCompanyStore();
+    const authStore = useAuthStore();
 
     const handleWithdrawnProposal = async() => {
 
@@ -104,7 +106,9 @@ import { getDateMonthDay } from '../helpers/date_formats';
                 <i class="fa-solid fa-ban"></i>
                 Retirado
             </div>
-            <button  v-else
+            <button  
+                v-else
+                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
                 type="button" 
                 class="btn btn-danger radius-sm" 
                 @click="handleWithdrawnProposal"
@@ -113,6 +117,7 @@ import { getDateMonthDay } from '../helpers/date_formats';
                 Retirar
             </button>
             <button
+                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
                 class="btn-primary-sm radius-sm"
                 @click="$emit('set-proposal', {proposal: proposal, modal: 'edit'})"
                 data-toggle="modal" data-target="#makeProposalModal"

src/components/CardUser.vue

@@ -2,6 +2,7 @@
     import Swal from 'sweetalert2';
     import { getDateMonthDay } from '../helpers/date_formats';
     import { useCompanyStore } from '../stores/company';
+import { useAuthStore } from '../stores/auth';
 
     const props = defineProps({
         user: {
@@ -19,6 +20,7 @@
     defineEmits(['set-user'])
 
     const companyStore = useCompanyStore();
+    const authStore = useAuthStore();
 
     const handleDelete = async() => {
         Swal.fire({
@@ -66,7 +68,7 @@
     <div class="card-fixed flex-column">
         <div class="row">
             <div class="col-lg-6 col-sm-12">
-                <p><span>Nombre de usuario:</span> {{user.name}}</p>
+                <p><span>Nombre de usuario:</span>  {{user.first_name}} {{user.last_name}}</p>
                 <p v-if="user.employee_id"><span class="font-weight-bold mr-1">Número de registro:</span> {{user.employee_id}}</p>
                 <p><span>Teléfono 1: </span>{{user.phone}}</p>
                 <p><span>Teléfono 2: </span>{{user.phone2}}</p>
@@ -93,14 +95,14 @@
                 <p><span>Rol del usuario: </span>{{user.job_role}}</p>
             </div>
         </div>
-        <div class="btn-row" v-if="readonly === false">
+        <div class="btn-row" v-if="readonly === false && (authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager')">
             <button
                 class="btn-primary-sm radius-sm"
                 data-toggle="modal" 
                 data-target="#userModal"
                 @click="$emit('set-user')"
-            ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
+                ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
-            <button
+                <button
                 class="btn btn-dark radius-sm"
                 @click="handleDelete"
             ><i class="fa-solid fa-trash"></i> Eliminar</button>

src/components/CardVehicle.vue

@@ -2,6 +2,7 @@
     import Swal from 'sweetalert2';
     import { getDateMonthDayEs } from '../helpers/date_formats';
     import { useVehiclesStore } from '../stores/vehicles';
+import { useAuthStore } from '../stores/auth';
 
     const props = defineProps({
         vehicle: {
@@ -13,6 +14,7 @@
     defineEmits(['set-vehicle']);
 
     const vehicleStore = useVehiclesStore();
+    const authStore = useAuthStore();
 
     const handleDeleteVehicle = async() => {
         Swal.fire({
@@ -102,12 +104,14 @@
         </div>
         <div class="card-footer">
             <button 
+                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
                 class="btn btn-dark radius-sm"
                 @click="handleDeleteVehicle"
             >
                 <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
             </button>
             <button 
+                v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
                 class="btn-primary-sm radius-sm"
                 @click="$emit('set-vehicle', {vehicle: vehicle, modal: 'form'})"
                 data-toggle="modal" 

src/components/CreateUserModal.vue

@@ -94,13 +94,15 @@
 				job_role: userForm.job_role,
 				permissions: authStore.user.permissions,
 				company: authStore.user.company,
-				categories: userForm.categories.length <= 0 ? null : userForm.categories?.map((e) => e._id),
+				categories: userForm.categories?.length <= 0 ? null : userForm.categories?.map((e) => e._id),
 				user_city: userForm.user_city?.length <= 0 ? null : userForm.user_city?.map((e) => e.city_name),
 				user_state: userForm.user_state?.length <= 0 ? null : userForm.user_state?.map((e) => e.state_name),
 				truck_type: userForm.truck_type?.length <= 0 ? null : userForm.truck_type?.map((e) => e.meta_value),
 				user_description: userForm.user_description
 			}
 
+            console.log(userData);
+
             const dataUpdate = {
                 categories: userForm.categories,
                 name: userForm.name + ' ' + userForm.last_name
@@ -180,6 +182,8 @@
                             type="number"
                             v-model:field="userForm.phone"
                             :filled="false"
+                            :step="1"
+
                             :error="errors.phone"
                         />
                         <CustomInput
@@ -187,6 +191,7 @@
                             name="phone2"
                             type="number"
                             v-model:field="userForm.phone2"
+                            :step="1"
                             :filled="false"
                         />
                         <CustomInput
@@ -194,6 +199,7 @@
                             name="email"
                             type="email"
                             v-model:field="userForm.email"
+                            :readonly="(props.user) ? true : false"
                             :filled="false"
                             :error="errors.email"
                         />
@@ -206,8 +212,9 @@
                                 v-model="userForm.job_role"
                             >
                                 <option disabled value="">-- Seleccionar rol --</option>
-                                <option value="owner">Dueño</option>
+                                <!-- <option value="owner">Dueño</option> -->
                                 <option value="manager">Gerente</option>
+                                <option value="staff">Personal</option>
                                 <option v-if="authStore.user?.permissions === 'role_carrier'" value="driver">Conductor</option>
                             </select>
                         </div>

src/components/Pagination.vue

@@ -12,12 +12,12 @@ import { onMounted, ref } from 'vue';
         },
         currentPage: {
             type: Number,
-            default: 1
+            default: 0
         }
     })
 
     const emits = defineEmits(['get-elements'])
-    const currentPage = ref(1);
+    const currentPage = ref(0);
     const totalPage = ref(0)
     onMounted(() => {
         currentPage.value = props.currentPage;
@@ -25,6 +25,7 @@ import { onMounted, ref } from 'vue';
     })
     
     const setPage = (p) => { 
+        console.log('Page:', p);    
         currentPage.value = p
         const skip = (p - 1) * props.limit;
         emits('get-elements', {skip: skip, page: p});
@@ -37,8 +38,8 @@ import { onMounted, ref } from 'vue';
         <div class="box-pages" v-if="totalPage > 1">
             <div 
                 v-for="p in totalPage"
-                :class="[currentPage === p ? 'page page-active' : 'page']"
+                :class="[currentPage === (p - 1) ? 'page page-active' : 'page']"
-                @click="setPage(p)"
+                @click="setPage(p - 1)"
             >   
                 {{ p }}
             </div>

src/components/ui/CustomInput.vue

@@ -35,6 +35,10 @@
         },
         error: {
             type: String,
+        },
+        step: {
+            type: Number,
+            default: 0.1
         }
     })
 
@@ -52,7 +56,7 @@
             :id="name"
             :name="name" 
             :min="0"
-            :step="0.1"
+            :step="step"
             :value="field"
             :disabled="readonly"
             :readonly="readonly"

src/services/company.js

@@ -25,7 +25,7 @@ export const updateCompany = async(formData) => {
 
 export const getUsers = async(filter) => {
     try {
-        const endpoint = `/v1/users/find?${filter}`;
+        const endpoint = `/v1/users/find?${filter}&$sort%5BcreatedAt%5D=-1`;
         const {data} = await api.get(endpoint);
         return data;
     } catch (error) {
@@ -126,7 +126,7 @@ export const deleteBudget = async(id) => {
 
 export const getLocations = async(filter) => {
     try {
-        const endpoint = `/v1/branches/find${filter}&$limit=3&$sort%5BcreatedAt%5D=-1`;
+        const endpoint = `/v1/branches/find${filter}&$sort%5BcreatedAt%5D=-1`;
         console.log(endpoint);
         const {data} = await api.get(endpoint);
         return data;

src/stores/company.js

@@ -10,17 +10,17 @@ export const useCompanyStore = defineStore('company', () => {
     const users = ref([]);
     const drivers = ref([]);
     const usersTotal = ref(0);
-    const usersCurrentPage = ref(1);
+    const usersCurrentPage = ref(0);
     const budgets = ref([]);
     const budgetsTotal = ref(0);
-    const budgetsCurrentPage = ref(1);
+    const budgetsCurrentPage = ref(0);
     const locations = ref([]);
     const locationsLoads = ref([]);
     const locationsTotal = ref(0);
-    const locationsCurrentPage = ref(1);
+    const locationsCurrentPage = ref(0);
     const proposals = ref([]);
     const proposalsTotal = ref(0);
-    const proposalsCurrentPage = ref(1)
+    const proposalsCurrentPage = ref(0)
     const loading = ref(false);
 
     const getCompanyData = async() => {
@@ -35,10 +35,11 @@ export const useCompanyStore = defineStore('company', () => {
         loading.value = false;
     }
 
-    const getUsersCompany = async(limit = 10, skip = 0, reload = false) => {
+    const getUsersCompany = async(limit = 1, page = 0, reload = false) => {
         const companyId = localStorage.getItem('id');
         if(users.value.length <= 0 || reload === true) {
-            const filter = `company=${companyId}`;
+            // const filter = `company=${companyId}`;
+            const filter = `company=${companyId}&elements=${limit}&page=${page}`;
             const resp = await getUsers(filter);
             if(resp !== null && resp.total > 0) {
                 usersTotal.value = resp.total;
@@ -142,17 +143,17 @@ export const useCompanyStore = defineStore('company', () => {
         users.value = [];
         drivers.value = [];
         usersTotal.value = 0;
-        usersCurrentPage.value = 1;
+        usersCurrentPage.value = 0;
         budgets.value = [];
         budgetsTotal.value = 0;
-        budgetsCurrentPage.value = 1;
+        budgetsCurrentPage.value = 0;
         locations.value = [];
         locationsLoads.value = [];
         locationsTotal.value = 0;
-        locationsCurrentPage.value = 1;
+        locationsCurrentPage.value = 0;
         proposals.value = [];
         proposalsTotal.value = 0;
-        proposalsCurrentPage.value = 1;
+        proposalsCurrentPage.value = 0;
         // companyid = null;
         loading.value = false;
     }
@@ -170,7 +171,7 @@ export const useCompanyStore = defineStore('company', () => {
         const companyId = localStorage.getItem('id');
         try {
             if(proposals.value.length <= 0 || reload) {
-                const endpoint = `/v1/proposals/find?carrier=${companyId}&$sort%5BcreatedAt%5D=-1&${filter}`;
+                const endpoint = `/v1/proposals/find?carrier=${companyId}&${filter}&$sort%5BcreatedAt%5D=-1`;
                 console.log(endpoint)
                 const {data} = await api.get(endpoint);
                 proposals.value = data.data;

src/stores/loads.js

@@ -8,7 +8,7 @@ export const useLoadsStore = defineStore('load', () => {
     const loads = ref([])
     const loadsDashboard = ref([]);
     const loadsTotal = ref(0)
-    const loadsCurrentPage = ref(1)
+    const loadsCurrentPage = ref(0)
     const proposalsOfLoads = ref([]);
     const openModalEdit = ref(false);
     const openAttachmentsModal = ref(false);
@@ -152,7 +152,7 @@ export const useLoadsStore = defineStore('load', () => {
         loads.value = [];
         loadsDashboard.value = [];
         loadsTotal.value = 0;
-        loadsCurrentPage.value = 1;
+        loadsCurrentPage.value = 0;
         proposalsOfLoads.value = [];
         openModalEdit.value = false;
         openAttachmentsModal.value = false;

src/stores/vehicles.js

@@ -5,7 +5,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
     
     const vehicles = ref([]);
     const vehiclesTotal = ref(0);
-    const vehiclesCurrentPage = ref(1)
+    const vehiclesCurrentPage = ref(0)
 
     const fetchVehicles = async(filterQuery, reload = false) => {
         let filterArr = Object.values(filterQuery);
@@ -17,7 +17,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
         }
         if(vehicles.value.length <= 0 || reload === true) {
             const resp = await getVehicles(filterStr + '&$sort%5BcreatedAt%5D=-1');
-            console.log(resp.data);
+            console.log(resp);
             if(resp !== null) {
                 vehiclesTotal.value = resp.total;
                 vehicles.value = resp.data;
@@ -71,7 +71,7 @@ export const useVehiclesStore = defineStore('vehicles', () => {
     const clear = () => {
         vehicles.value = [];
         vehiclesTotal.value = 0;
-        vehiclesCurrentPage.value = 1;
+        vehiclesCurrentPage.value = 0;
     }
 
 

src/views/LoadsPublishedView.vue

@@ -13,18 +13,18 @@
     const loading = ref(false);
     const query = ref('');
     const filterQuery = ref([]);
-    const limit = 3;
+    const limit = 5;
 
     onMounted(() =>{
         console.log('init')
         getDataLoadsInit(false);
     })
 
-    ///loads?company=64fa70c130d2650011ac4f3a&$limit=3&$skip=0&status[$ne]=Closed&$sort%5BcreatedAt%5D=-1
+    ///loads?company=64fa70c130d2650011ac4f3a&elements=3&page=0&status[$ne]=Closed&$sort%5BcreatedAt%5D=-1
 
     watch(query, () => {
-        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.page = "page="+ 0;
-        filterQuery.value.limit = "$limit="+ 100;
+        filterQuery.value.limit = "elements="+ 100;
         if(query.value.length === 0){
             console.log('Clear manueal')
             // console.log(loadStore.loadsTotal)
@@ -35,8 +35,8 @@
     });
 
     const getDataLoadsInit = async(reload) => {
-        filterQuery.value.limit = '$limit=' + limit;
+        filterQuery.value.limit = 'elements=' + limit;
-        filterQuery.value.skip = "$skip=0"
+        filterQuery.value.page = "page=0"
         filterQuery.value.status = "status[$ne]="+"Closed";
         loading.value = true;
         await loadStore.getCompanyLoads(filterQuery.value, reload);
@@ -46,7 +46,7 @@
     const getLoadsByPage = async(data) => {
         console.log(data);
         loading.value = true;
-        filterQuery.value.skip = "$skip="+ data.skip;
+        filterQuery.value.page = "page="+ data.page;
         loadStore.loadsCurrentPage = data.page
         await loadStore.getCompanyLoads(filterQuery.value, true)
         loading.value = false;
@@ -82,9 +82,9 @@
     }
 
     const clearRequest = () => {
-        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.page = "page="+ 0;
-        filterQuery.value.limit = "$limit="+ limit;
+        filterQuery.value.limit = "elements="+ limit;
-        loadStore.loadsCurrentPage = 1;
+        loadStore.loadsCurrentPage = 0;
     }
 
     const loadHistory = () => {

src/views/LocationsView.vue

@@ -19,12 +19,14 @@
         getInitData();
     })
 
-    const limit = 3;
+    const limit = 5;
 
     const getInitData = async() => {
         loading.value = true;
         // companyStore.locationsCurrentPage = companyStore.locationsCurrentPage;
         filterQuery.value.company = "company="+ localStorage.getItem('id');
+        filterQuery.value.limit = "elements=" + limit;
+        filterQuery.value.page = "page=" + 0;
         await companyStore.getLocationsCompany(filterQuery.value, false)
         loading.value = false;
     }
@@ -32,7 +34,7 @@
     const getLocationsByPage = async(data) => {
         loading.value = true;
         filterQuery.value.company = "company="+ localStorage.getItem('id');
-        filterQuery.value.skip = "$skip="+ data.skip;
+        filterQuery.value.page = "page=" + data.page;
         companyStore.locationsCurrentPage = data.page
         await companyStore.getLocationsCompany(filterQuery.value, true)
         loading.value = false;
@@ -45,8 +47,8 @@
     }
 
     watch(query, () => {
-        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.page = "page=" + 0;
-        filterQuery.value.limit = "$limit="+ 100;
+        filterQuery.value.limit = "elements=" + 100;
         if(query.value.length === 0){
             clearRequest();
             filterQuery.value.search = "";
@@ -77,9 +79,9 @@
     }
 
     const clearRequest = () => {
-        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.page = "page=" + 0;
-        filterQuery.value.limit = "$limit="+ limit;
+        filterQuery.value.limit = "elements="+ limit;
-        companyStore.locationsCurrentPage = 1;
+        companyStore.locationsCurrentPage = 0;
     }
 
     const handleSetCurrentLocation = (location) => {

src/views/MyCompanyView.vue

@@ -44,6 +44,7 @@ import { storeToRefs } from 'pinia';
                 <div class="header-info">
                     <h2>{{ company.company?.company_name }}</h2>
                     <button
+                        v-if="auth.user?.job_role === 'owner'"
                         class="btn-primary-sm"
                         data-toggle="modal" data-target="#editcompanymodal"
                     ><i class="fa-solid fa-pen-to-square"></i> Editar empresa</button>

src/views/TrucksPublishedView.vue

@@ -12,7 +12,7 @@
     const proposalCurrent = ref(null);
     const openModal = ref(false);
     const openModalProposal = ref(false);
-    const limit = 3;
+    const limit = 5;
 
     onMounted(() =>{
         getInitData();
@@ -20,15 +20,14 @@
 
     const getInitData = async() => {
         loading.value = true;
-        const filter = '$limit=' + limit + "&$skip=0";
+        const filter = 'elements=' + limit + "&page=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;
+        const filter = 'elements=' + limit + "&page=" + data.page;
         companyStore.proposalsCurrentPage = data.page;
         await companyStore.getProposalsCompany(filter, true);
         loading.value = false;

src/views/UsersView.vue

@@ -24,10 +24,9 @@
     }
 
     const getUsersByPage = async(data) => {
-        console.log(data)
         loading.value = true;
         companyStore.usersCurrentPage = data.page
-        await companyStore.getUsersCompany(limit, data.skip, true);
+        await companyStore.getUsersCompany(limit, companyStore.usersCurrentPage, true);
         loading.value = false;
     }
 

src/views/VehiclesView.vue

@@ -29,8 +29,8 @@
 
     const getInitData = async() => {
         loading.value = true;
-        filterQuery.value.limit = '$limit=' + limit;
+        filterQuery.value.limit = 'elements=' + limit;
-        filterQuery.value.skip = "$skip=0"
+        filterQuery.value.page = "page=0"
         filterQuery.value.company = "company="+ localStorage.getItem('id');
         await vehicleStore.fetchVehicles(filterQuery.value, false);
         await companyStore.getDrivers();
@@ -44,8 +44,8 @@
     }
 
     watch(query, () => {
-        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.page = "page="+ 0;
-        filterQuery.value.limit = "$limit="+ 100;
+        filterQuery.value.limit = "elements="+ 100;
         if(query.value.length === 0){
             clearRequest()
             filterQuery.value.search = "";
@@ -75,9 +75,9 @@
     }
 
     const clearRequest = () => {
-        filterQuery.value.skip = "$skip="+ 0;
+        filterQuery.value.page = "page="+ 0;
-        filterQuery.value.limit = "$limit="+ limit;
+        filterQuery.value.limit = "elements="+ limit;
-        vehicleStore.vehiclesCurrentPage = 1;
+        vehicleStore.vehiclesCurrentPage = 0;
     }
 
     const handleSetCurrentVehicle = (data) => {
@@ -102,7 +102,7 @@
     const getVehiclesByPage = async(data) => {
         loading.value = true;
         filterQuery.value.company = "company="+ localStorage.getItem('id');
-        filterQuery.value.skip = "$skip="+ data.skip;
+        filterQuery.value.page = "page="+ data.page;
         vehicleStore.vehiclesCurrentPage = data.page
         await vehicleStore.fetchVehicles(filterQuery.value, true);
         loading.value = false;