add: pagination of users

src/components/CreateUserModal.vue

@@ -208,7 +208,7 @@
                                 <option disabled value="">-- Seleccionar rol --</option>
                                 <option value="owner">Dueño</option>
                                 <option value="manager">Gerente</option>
-                                <option value="driver">Conductor</option>
+                                <option v-if="authStore.user?.permissions.includes('role_carrier')" value="driver">Conductor</option>
                             </select>
                         </div>
                         <div class="mb-4 mt-3">

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

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');
+        // filterQueryVehicles.value.company = "company="+ localStorage.getItem('id');
-        await companyStore.getLocationsCompany(filterQueryVehicles.value, false)
+        await companyStore.getLocationsLoads()
         loadingLocations.value = false;
     }
 
@@ -440,7 +440,7 @@
                                     v-model="locationLoadSelected"
                                 >
                                     <option disabled value="">-- Seleccionar locación --</option>
-                                    <option v-for="loc in companyStore.locations" :value="loc">{{ loc.branch_name }}</option>
+                                    <option v-for="loc in companyStore.locationsLoads" :value="loc">{{ loc.branch_name }}</option>
                                 </select>
                             </div>
                             <Custominput

src/services/company.js

@@ -23,9 +23,9 @@ export const updateCompany = async(companyId, formData) => {
     }
 }
 
-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;

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

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) {
+        if(users.value.length <= 0 || reload === true) {
-            const resp = await getUsers(companyId);
+            const filter = `company=${companyId}&&$sort%5BcreatedAt%5D=-1&$limit=${limit}&$skip=${skip}`
-            console.log(resp);
+            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);
+            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);
+            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,

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,

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;

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)"
             />
+            <Pagination
+                :limit="limit"
+                :total="companyStore.usersTotal"
+                :current-page="companyStore.usersCurrentPage"
+                @get-elements="getUsersByPage"
+            />
         </div>
     </div>
 </template>

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