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

add: pagination to loads public & calculator

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-02-09 21:32:57 -06:00
parent 3018a95a59
commit e648c2ff53
5 changed files with 86 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Pagination.vue
View File

@@ -78,10 +78,14 @@ import { onMounted, ref } from 'vue';
background-color: #dab977;
color: #323030;
margin: 4px;
font-size: 1.1rem;
font-weight: 500;
}
.page-active {
width: 33px;
height: 33px;
font-size: 1.2rem;
font-weight: 700;
background-color: #FBBA33;
}
</style>

10
src/composables/userSearchLoads.js
View File

@@ -4,6 +4,8 @@ import api from "../lib/axios";
export default function useSearchLoads() {
const loads = ref([]);
const loading = ref(false);
const total = ref(0);
const currentPage = ref(1);
const getLoadsPublished = async(filterQuery) => {
loading.value = true;
@@ -14,12 +16,14 @@ export default function useSearchLoads() {
filterStr = "?"+cleanfilterArr.join("&");
}
try {
const endpoint = `/loads/${filterStr}`;
const endpoint = `/loads/${filterStr}&$sort%5BcreatedAt%5D=-1`;
const {data} = await api.get(endpoint);
console.log(data);
total.value = data.total;
loads.value = data.data;
} catch (error) {
loads.value = [];
total.value = 0;
console.log(error);
}
loading.value = false;
@@ -28,6 +32,8 @@ export default function useSearchLoads() {
return {
getLoadsPublished,
loading,
loads
loads,
total,
currentPage,
}
}

2
src/stores/company.js
View File

@@ -390,6 +390,8 @@ export const useCompanyStore = defineStore('company', () => {
updateLocationCompany,
deleteLocationCompany,
budgets,
budgetsCurrentPage,
budgetsTotal,
users,
drivers,
usersTotal,

27
src/views/CalculatorView.vue
View File

@@ -6,6 +6,7 @@
import CardBudget from '../components/CardBudget.vue';
import CardEmpty from '../components/CardEmpty.vue';
import CreateBudgetModal from '../components/CreateBudgetModal.vue';
import Pagination from '../components/pagination.vue';
const companyStore = useCompanyStore();
const authStore = useAuthStore();
@@ -16,6 +17,7 @@
const currentBudget = ref(null);
const openModal = ref(false);
const printOpen = ref(false);
const limit = 2;
onMounted(() => {
getInitData();
@@ -23,6 +25,8 @@
const getInitData = async() => {
loading.value = true;
filterQuery.value.limit = '$limit=' + limit;
filterQuery.value.skip = "$skip=0"
filterQuery.value.company = "company="+ localStorage.getItem('id');
await companyStore.getBudgetsCompany(filterQuery.value, false)
loading.value = false;
@@ -35,7 +39,10 @@
}
watch(query, () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ 100;
if(query.value.length === 0){
clearRequest();
filterQuery.value.search = "";
getBudgetsWithFilters(filterQuery.value);
}
@@ -50,7 +57,15 @@
}
const getBudgetsByPage = async(data) => {
loading.value = true;
filterQuery.value.skip = "$skip="+ data.skip;
companyStore.budgetsCurrentPage = data.page
await getBudgetsWithFilters(filterQuery.value)
}
const clearFilter = () => {
clearRequest();
filterQuery.value.search = "";
filterQuery.value.company = "company="+ localStorage.getItem('id');
@@ -61,6 +76,12 @@
}
}
const clearRequest = () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ limit;
companyStore.budgetsCurrentPage = 1;
}
const handleSetCurrentBudget = (data) => {
openModal.value = true;
currentBudget.value = data.budget;
@@ -114,6 +135,12 @@
v-else
text="No hay presupuestos agregados"
/>
<Pagination
:limit="limit"
:current-page="companyStore.budgetsCurrentPage"
:total="companyStore.budgetsTotal"
@get-elements="getBudgetsByPage"
/>
</div>
</template>

50
src/views/SearchLoadsView.vue
View File

@@ -9,21 +9,30 @@
import States from '../components/ui/States.vue';
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 { getLoadsPublished, loads, loading } = useSearchLoads();
const limit = 3;
const isSearch = ref(false);
const { getLoadsPublished, loads, loading, currentPage, total } = useSearchLoads();
onMounted(() => {
getInitData();
});
watch(query, () => {
isSearch.value = true;
setFilterUnlimited();
if(query.value.length === 0){
if(selectedCategory.value?.length === 0 && selectedTruckType.value?.length === 0 && selectedCities.value?.length === 0 && selectedState.value?.length === 0 ) {
console.log('here');
clearRequest();
isSearch.value = false;
}
filterQuery.value.search = "";
getLoadsPublished(filterQuery.value);
}
@@ -31,6 +40,7 @@
watch(selectedState, () => {
if(selectedState.value != null){
setFilterUnlimited()
filterQuery.value.state = "origin.state[$in][]="+ selectedState.value.state_name;
getLoadsPublished(filterQuery.value);
}
@@ -38,6 +48,7 @@
watch(selectedCities, () => {
if(selectedCities.value != null){
setFilterUnlimited()
filterQuery.value.city = "origin.city[$regex]="+ selectedCities.value.city_name;
getLoadsPublished(filterQuery.value);
}
@@ -45,6 +56,7 @@
watch(selectedCategory, () => {
if(selectedCategory.value != null){
setFilterUnlimited()
filterQuery.value.category = "categories[$in][]=" + selectedCategory.value._id;
getLoadsPublished(filterQuery.value);
}
@@ -52,6 +64,7 @@
watch(selectedTruckType, () => {
if(selectedTruckType.value != null){
setFilterUnlimited()
filterQuery.value.truck_type = "truck_type[$in][]="+ selectedTruckType.value.meta_value;
getLoadsPublished(filterQuery.value);
}
@@ -67,7 +80,8 @@
}
const clearFilter = () => {
clearRequest();
isSearch.value = false;
selectedCities.value = null;
selectedCategory.value = null;
selectedState.value = null;
@@ -108,13 +122,32 @@
}
const getInitData = async() => {
filterQuery.value.limit = "";
filterQuery.value.company = "",
filterQuery.value.limit = '$limit=' + limit;
filterQuery.value.skip = "$skip=0";
filterQuery.value.company = "";
filterQuery.value.status = "status=Published",
await getLoadsPublished(filterQuery.value);
}
const getLoadsByPage = (data) => {
console.log(data);
filterQuery.value.skip = "$skip="+ data.skip;
currentPage.value = data.page
getLoadsPublished(filterQuery.value);
}
const clearRequest = () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ limit;
currentPage.value = 1;
}
const setFilterUnlimited = () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ 100;
}
const currentLoad = ref(null);
const handleSetCurrentLoad = (load) => {
@@ -175,6 +208,13 @@
v-else
text="No hay cargas publicadas"
/>
<Pagination
v-if="!isSearch"
:limit="limit"
:total="total"
:current-page="currentPage"
@get-elements="getLoadsByPage"
/>
</div>
</template>