ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: pagination of users

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-02-05 21:26:57 -06:00
parent 1933603692
commit 2df3bcfcfb
10 changed files with 139 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CreateUserModal.vue
View File

@@ -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">

2
src/components/DriverVehicleModal.vue
View File

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

8
src/components/FormLoadModal.vue
View File

@@ -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"
>
<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

6
src/services/company.js
View File

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

3
src/stores/auth.js
View File

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

125
src/stores/company.js
View File

@@ -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,

10
src/stores/loads.js
View File

@@ -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,

2
src/views/LocationsView.vue
View File

@@ -19,7 +19,7 @@ import Pagination from '../components/Pagination.vue';
getInitData();
})
const limit = 10;
const limit = 3;
const getInitData = async() => {
loading.value = true;

18
src/views/UsersView.vue
View File

@@ -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>

2
src/views/VehiclesView.vue
View File

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