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

add: filters locations & offerts

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-10-03 21:32:23 -06:00
parent 0b56a2a223
commit f129acf9e6
9 changed files with 162 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CardLocation.vue
View File

@@ -65,7 +65,7 @@
<div class="card-fixed card-location">
<div>
<p><span>{{ t('directory.name') }}:</span> {{location.branch_name}}</p>
<p><span>{{ t('directory.address') }}:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
<p><span>{{ t('directory.address') }}:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.zipcode">CP. {{location.zipcode}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
<p><span>{{ t('labels.phone') }}:</span> {{location.phone}}</p>
<p><span>{{ t('directory.typeTruckNeed') }}:</span> {{location.truck_type?.map((e) => e).join(', ')}}</p>
<p><span>{{ t('global.segments') }}:</span> {{location.categories?.map((e) => e.name).join(', ')}}</p>

11
src/components/CreateLocationModal.vue
View File

@@ -18,6 +18,8 @@
}
});
console.log(props.location);
defineEmits(['reset-location']);
const authStore = useAuthStore();
@@ -72,7 +74,7 @@
locationForm.zipcode = props.location.zipcode;
locationForm.address = props.location.address;
locationForm.description = props.location.description;
locationForm.zipcode = "";
locationForm.zipcode = props.location.zipcode;
} else {
Object.assign(locationForm, initState);
}
@@ -84,7 +86,7 @@
const saveLocation = async() => {
validations();
if(errors.value.branch_name || errors.value.address || errors.value.city || errors.value.state || errors.value.zipcode) {
if(errors.value.branch_name || errors.value.address || errors.value.city || errors.value.state || errors.value.zipcode || errors.value.location_type) {
return;
} else {
@@ -194,7 +196,7 @@
<span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
</div>
<div class="d-flex flex-column mb-4">
<label class="custom-label" for="role">{{ t('directory.typeDirectory')}}</label>
<label class="custom-label" for="role">{{ t('directory.typeDirectory') + '*'}}</label>
<select
class="custom-input-light"
name="type"
@@ -210,9 +212,10 @@
<span class="error-msg" v-if="errors.location_type">{{ errors.location_type }}</span>
</div>
<CustomInput
:label="t('directory.zipCode')"
:label="t('directory.zipCode') + '*'"
name="zipcode"
type="number"
:step="1"
v-model:field="locationForm.zipcode"
:filled="false"
:error="errors.zipcode"

1
src/composables/useAttachments.js
View File

@@ -11,6 +11,7 @@ export default function useAttachments() {
const getAttachmentLoad = async() => {
try {
loading.value = true;
// const endpoint = "/v1" + "/public-load-attachments/load/" + loadStore.currentLoad._id;
const endpoint = "/v1" + "/load-attachments/load/" + loadStore.currentLoad._id;
const {data} = await api.get(endpoint);
attachments.value = data;

10
src/i18n/en.js
View File

@@ -43,7 +43,13 @@ const en = {
driver: 'Driver',
filters: 'Filters',
location: 'Location',
both: 'Both',
alls: 'All directories',
both: 'Load/Download',
accepted: 'Offers accepted',
notAccepted: 'Offers not accepted',
withdraw: 'Offers withdrawn',
completed: 'Offers completed',
all: 'All offers',
load: 'Load',
download: 'Download',
select: 'Select',
@@ -336,7 +342,7 @@ const en = {
loadingRetired: 'Withdrawing offer',
msgTitleRetire: 'Offer withdrawn!',
title: 'Offers',
title: 'My offers',
retired: 'Retired',
withdraw: 'Withdraw',

11
src/i18n/es.js
View File

@@ -1,3 +1,4 @@
import { all } from "axios";
const es = {
@@ -45,9 +46,15 @@ const es = {
driver: 'Conductor',
filters: 'Filtros',
location: 'Ubicación',
both: 'Ambas',
alls: 'Todos los directorios',
both: 'Carga/Descarga',
load: 'Carga',
download: 'Descarga',
accepted: 'Ofertas aceptadas',
notAccepted: 'Ofertas no aceptadas',
withdraw: 'Ofertas retiradas',
completed: 'Ofertas completadas',
all: 'Todas las ofertas',
select: 'Seleccionar',
additionalInformation: 'Información adicional',
writeHere: 'Escribe aqui',
@@ -342,7 +349,7 @@ const es = {
loadingRetired: 'Retirando oferta',
msgTitleRetire: 'Oferta retirada!',
title: 'Mis ofertas aceptadas',
title: 'Mis ofertas',
retired: 'Retirado',
withdraw: 'Retirar',

4
src/stores/company.js
View File

@@ -7,6 +7,7 @@ import { useI18n } from "vue-i18n";
export const useCompanyStore = defineStore('company', () => {
const { t } = useI18n();
const company = ref(null)
const users = ref([]);
const drivers = ref([]);
@@ -18,12 +19,12 @@ export const useCompanyStore = defineStore('company', () => {
const locations = ref([]);
const locationsLoads = ref([]);
const locationsTotal = ref(0);
const locationType = ref({value: '', label: t('labels.alls')})
const locationsCurrentPage = ref(0);
const proposals = ref([]);
const proposalsTotal = ref(0);
const proposalsCurrentPage = ref(0)
const loading = ref(false);
const { t } = useI18n();
const getCompanyData = async() => {
const companyId = localStorage.getItem('id');
@@ -400,6 +401,7 @@ export const useCompanyStore = defineStore('company', () => {
locationsLoads,
locationsTotal,
locationsCurrentPage,
locationType,
clear,
$reset,
loading,

31
src/views/LocationsView.vue
View File

@@ -17,24 +17,24 @@
const locationCurrent = ref(null);
const openModal = ref(false);
const { t, locale } = useI18n();
const typeDirection = ref({value: 'both', label: t('labels.both')})
const optionsFilter = ref([]);
const openPopup = ref(false);
onMounted(() => {
getInitData();
getInitData(false);
})
const limit = 10;
const getInitData = async() => {
const getInitData = async(reload) => {
loading.value = true;
filterQuery.value.company = "company="+ localStorage.getItem('id');
filterQuery.value.limit = "elements=" + limit;
filterQuery.value.page = "page=" + 0;
await companyStore.getLocationsCompany(filterQuery.value, false)
await companyStore.getLocationsCompany(filterQuery.value, reload)
optionsFilter.value = [
{value: '', label: t('labels.alls')},
{value: 'both',label: t('labels.both')},
{value: 'loading',label: t('labels.load')},
{value: 'unloading',label: t('labels.download')}
@@ -88,8 +88,10 @@
filterQuery.value.search = "";
filterQuery.value.company = "company="+ localStorage.getItem('id');
if(query.value == ''){
getInitData();
filterQuery.value.type = "";
companyStore.locationsCurrentPage = 0;
if(query.value === '' || companyStore.locationType.value !== 'all'){
getInitData(true);
} else {
query.value = '';
}
@@ -98,7 +100,6 @@
const clearRequest = () => {
filterQuery.value.page = "page=" + 0;
filterQuery.value.limit = "elements="+ limit;
companyStore.locationsCurrentPage = 0;
}
const handleSetCurrentLocation = (location) => {
@@ -111,9 +112,15 @@
locationCurrent.value = null;
}
const selectedType = (type) => {
typeDirection.value = type
const selectedType = async(type) => {
companyStore.locationType = type
let value = type.value;
openPopup.value = false
filterQuery.value.limit = "elements=" + limit;
companyStore.locationsCurrentPage = 0;
filterQuery.value.page = "page=" + 0;
filterQuery.value.type = "type=" + value;
await getLocationsWithFilters(filterQuery.value);
}
const closePopup = () => {
@@ -128,7 +135,7 @@
>
<CustomPopup
:options="optionsFilter"
:value="typeDirection"
:value="companyStore.locationType"
@change-value="selectedType"
@close-popup="closePopup"
selected-color="#e3a11e"
@@ -148,8 +155,8 @@
<div class="box-directory"
@click="openPopup = true"
>
<span class="clear-sm" v-if="typeDirection === null">{{ t('directory.directory') }}</span>
<span class="clear-sm" v-else>{{typeDirection.label}}</span>
<span class="clear-sm" v-if="companyStore.locationType === null">{{ t('directory.directory') }}</span>
<span class="clear-sm" v-else>{{companyStore.locationType.label}}</span>
<i class="fa-solid fa-filter"></i>
</div>
<button

7
src/views/TrackingLoadView.vue
View File

@@ -37,6 +37,7 @@
const id = route.params['code'];
await getLoadTracking(id)
if(load.value !== null) {
console.log(load.value);
const addressOrigin = load.value?.origin_geo?.coordinates;
const addressDestination = load.value?.destination_geo?.coordinates;
if(addressOrigin && addressDestination) {
@@ -64,6 +65,9 @@
case 'Downloading':
isLoadActive.value = true;
break;
case 'Delivered':
isLoadActive.value = true;
break;
default:
isLoadActive.value = false;
@@ -110,8 +114,9 @@
>
<Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
<Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
<!-- v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive" -->
<CustomMarker
v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
v-if="vehicleLastLocation && isLoadActive"
:options="{position: vehicleLastLocation}"
:clickable="false"
:draggable="false"

112
src/views/TrucksPublishedView.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { onMounted, ref } from 'vue';
import { onMounted, ref, watch } from 'vue';
import { useCompanyStore } from '../stores/company';
import { useAuthStore } from '../stores/auth';
import { useLoadsStore } from '../stores/loads';
@@ -10,6 +10,7 @@
import Pagination from '../components/Pagination.vue';
import AttachmentsModal from '../components/AttachmentsModal.vue';
import { useI18n } from 'vue-i18n';
import CustomPopup from '../components/CustomPopup.vue';
const companyStore = useCompanyStore();
const authStore = useAuthStore();
@@ -19,17 +20,77 @@
const openModal = ref(false);
const openModalProposal = ref(false);
const limit = 10;
const statusFilters = ref([]);
const openPopup = ref(false);
const filterSelected = ref({})
onMounted(() =>{
getInitData();
})
const { t } = useI18n();
const { t, locale } = useI18n();
const getInitData = async() => {
filterSelected.value = {value: 'all', label: t('labels.all')}
loading.value = true;
const filter = 'elements=' + limit + "&page=0";
await companyStore.getProposalsCompany(filter, false);
statusFilters.value = [
{value: 'all',label: t('labels.all')},
{value: 'accepted',label: t('labels.accepted')},
{value: 'notAccepted',label: t('labels.notAccepted')},
{value: 'withdraw',label: t('labels.withdraw')},
{value: 'completed',label: t('labels.completed')}
]
loading.value = false;
}
watch(locale, () => {
statusFilters.value = [
{value: 'all',label: t('labels.all')},
{value: 'accepted',label: t('labels.accepted')},
{value: 'notAccepted',label: t('labels.notAccepted')},
{value: 'withdraw',label: t('labels.withdraw')},
{value: 'completed',label: t('labels.completed')}
]
})
const closePopup = () => {
openPopup.value = false
}
const selectedType = async(type) => {
filterSelected.value = type
openPopup.value = false
loading.value = true;
let filter = 'elements=' + limit + "&page=0";
const value = type.value;
switch (value) {
case 'accepted':
filter += "&is_accepted=true&is_completed=false";
break;
case 'notAccepted':
filter += "&is_accepted=false";
break;
break;
case 'withdraw':
filter += "&is_withdrawn=true";
break;
case 'completed':
filter += "&is_completed=true";
break;
case 'all':
filter = filter;
break;
default:
filter = filter;
break;
}
// console.log(type.value)
console.log(filter)
await companyStore.getProposalsCompany(filter, true);
console.log(companyStore.proposals)
loading.value = false;
}
@@ -59,6 +120,22 @@
</script>
<template>
<div
v-if="openPopup"
>
<CustomPopup
:options="statusFilters"
:value="filterSelected"
@change-value="selectedType"
@close-popup="closePopup"
selected-color="#e3a11e"
:style="{
right: '50px',
top: '130px',
width: '300px',
}"
/>
</div>
<AttachmentsModal
v-if="loadStore.openAttachmentsModal"
/>
@@ -74,7 +151,16 @@
@reset-load="handleResetCurrentProposal"
/>
<div>
<h2 class="title mb-5">{{ t('proposals.title') }}</h2>
<div class="box-header">
<h2 class="title">{{ t('proposals.title') }}</h2>
<div class="box-filters"
@click="openPopup = true"
>
<span class="clear-sm" v-if="filterSelected === null">{{ t('directory.directory') }}</span>
<span class="clear-sm" v-else>{{filterSelected.label}}</span>
<i class="fa-solid fa-filter"></i>
</div>
</div>
<Spiner v-if="loading"/>
<CardProposal
v-else
@@ -94,5 +180,23 @@
</template>
<style scoped>
.box-header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
}
.box-filters {
padding: 12px 8px;
background-color: #FFF;
border-radius: 5px;
display: flex;
flex-direction: row;
border: 1px rgb(186, 175, 175) solid;
gap: 1rem;
align-items: center;
cursor: pointer;
}
</style>