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

add: post load

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-16 19:30:12 -06:00
parent 106349f9a2
commit e6eae48c73
4 changed files with 140 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/CardLoad.vue
View File

@@ -92,8 +92,25 @@
<div class="card-fixed card-load mt-4">
<div class="row">
<div class="col-lg-6 col-sm-12">
<p><span>Origen:</span> {{ load.origin.company_name }}, {{ load.origin_formatted_address }}</p>
<p><span>Destino:</span> {{ load.destination.company_name }}, {{ load.destination_formatted_address }}</p>
<p>
<span>Origen: </span>
<template v-if="load.origin.company_name"> {{ load.origin.company_name }}, </template>
<template v-if="load.origin.street_address1">{{ load.origin.street_address1 }}, </template>
<template v-if="load.origin.city">{{ load.origin.city }}, </template>
<template v-if="load.origin.state">{{ load.origin.state }}, </template>
<template v-if="load.origin.country">{{ load.origin.country }}, </template>
<template v-if="load.origin.zipcode">{{ load.origin.zipcode }} </template>
</p>
<p>
<span>Destino: </span>
<template v-if="load.destination.company_name"> {{ load.destination.company_name }}, </template>
<template v-if="load.destination.street_address1">{{ load.destination.street_address1 }}, </template>
<template v-if="load.destination.city">{{ load.destination.city }}, </template>
<template v-if="load.destination.state">{{ load.destination.state }}, </template>
<template v-if="load.destination.country">{{ load.destination.country }}, </template>
<template v-if="load.destination.zipcode">{{ load.destination.zipcode }} </template>
</p>
</div>
<div class="col-lg-6 col-sm-12">
<p><span>Status de la publicación:</span> <span>{{ getStatusPublished(load) }}</span></p>

111
src/components/FormLoadModal.vue
View File

@@ -12,8 +12,10 @@
import useDirectionsRender from '../composables/useDirectionRender';
import { useAuthStore } from '../stores/auth';
import Swal from 'sweetalert2';
import { useNotificationsStore } from '../stores/notifications';
const loadStore = useLoadsStore();
const notyStore = useNotificationsStore();
const auth = useAuthStore();
const windowWidth = ref(window.innerWidth);
const zoom = ref(6);
@@ -23,7 +25,18 @@
const startLocation = ref(null);
const endLocation = ref(null);
const isLoading = ref(false);
const submited = ref(false);
const { geocodeAddress } = useDirectionsRender();
const formRef = ref(null);
const errors = ref({
segment: null,
product: null,
truckType: null,
cityOrigin: null,
stateOrigin: null,
cityDestination: null,
stateDestination: null,
});
const clearLoad = () => {
@@ -85,12 +98,12 @@
}
watch(origin, async() => {
console.log(origin);
// console.log(origin);
if(origin.address && origin.city && origin.state) {
startLocation.value = origin.address + ', ' + origin.city.city_name + ', ' + origin.state.state_name + ', ' + origin.country + ', ' +origin.postalCode;
originCoords.value = await geocodeAddress(startLocation.value);
console.log('Origin:')
console.log(originCoords.value)
// console.log('Origin:')
// console.log(originCoords.value)
}
})
@@ -98,8 +111,8 @@
if(destination.address && destination.city && destination.state) {
endLocation.value = destination.address + ', ' + destination.city.city_name + ', ' + destination.state.state_name + ', ' + destination.country + ', ' +destination.postalCode;
destinationCoords.value = await geocodeAddress(endLocation.value);
console.log('Destination:')
console.log(destinationCoords.value);
// console.log('Destination:')
// console.log(destinationCoords.value);
}
})
})
@@ -154,7 +167,7 @@
est_unloading_date : formLoad.dateDownload,
notes : formLoad.notes,
weight : formLoad.weight,
product: formLoad.terms || null,
product: formLoad.terms.length <= 0 ? null : formLoad.terms,
categories: formLoad.segment || null,
origin:{
company_name : origin.locationName,
@@ -190,13 +203,12 @@
isLoading.value = true;
if(loadStore.currentLoad){
const resp = await loadStore.updateLoad(loadStore.currentLoad._id, loadData);
console.log({resp});
isLoading.value = false;
if(resp) {
const index = loadStore.loads.findIndex((load) => load._id === resp._id);
loadStore.loads[index] = {
...loadStore.loads[index],
resp
...resp
};
return 'success';
} else {
@@ -206,7 +218,10 @@
const resp = await loadStore.saveLoad(loadData);
isLoading.value = false;
if(resp) {
loadStore.loads.unshift(resp);
loadStore.loads.push({
...resp,
...loadData
});
return 'success';
} else {
return 'error';
@@ -215,12 +230,12 @@
}
const handleSave = async() => {
submited.value = false;
const loadData = setLoadData();
// console.log('loadData: ', loadData);
const resp = await updateLoad(loadData);
if(resp === 'success') {
notyStore.show = 'true';
notyStore.text = 'Carga guardada!'
document.getElementById('btnCloseFormLoadModal').click();
} else {
Swal.fire({
@@ -231,7 +246,21 @@
}
}
const validations = () => {
errors.value = {
segment: formLoad.segment.length <= 0 ? 'Seleccione segmento' : null,
product: formLoad.terms.length <= 0 ? 'Seleccione producto' : null,
truckType: formLoad.truckType.length <= 0 ? 'Seleccione tipo de transporte' : null,
cityOrigin: origin.city.length <= 0 ? 'Seleccione ciudad' : null,
stateOrigin: origin.state.length <= 0 ? 'Seleccione estado' : null,
cityDestination: destination.city.length <= 0 ? 'Seleccione ciudad' : null,
stateDestination: destination.state.length <= 0 ? 'Seleccione estado' : null,
};
}
const handlePostLoad = async() => {
submited.value = true;
let loadData = setLoadData();
loadData = {
@@ -240,8 +269,18 @@
load_status: "Published"
}
setTimeout(async() => {
const formValid = formRef.value.checkValidity();
validations()
console.log(formValid);
if(formValid){
const hasError = Object.values(errors.value).some(val => val != null);
console.log(hasError);
if(!hasError) {
const resp = await updateLoad(loadData);
if(resp === 'success') {
notyStore.show = 'true';
notyStore.text = 'Carga publicada!'
document.getElementById('btnCloseFormLoadModal').click();
} else {
Swal.fire({
@@ -250,6 +289,11 @@
icon: "error"
});
}
} else {
console.log('Hay errores');
}
}
}, 200)
}
</script>
@@ -271,7 +315,7 @@
</button>
</div>
<div class="modal-body">
<form class="form-content">
<form class="form-content" ref="formRef">
<div class="form-box">
<div class="form-section">
<div class="mb-4 mt-3">
@@ -279,18 +323,22 @@
<Segments
v-model="formLoad.segment"
/>
<span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Tipo de transporte*</label>
<TruckTypes
v-model="formLoad.truckType"
/>
<span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span>
</div>
<Custominput
label="Fecha de carga*"
type="date"
:filled="false"
name="date-load"
:required="submited ? true : false"
:error="(submited && !formLoad.dateLoad) ? 'Fecha es requerida' : null"
v-model:field="formLoad.dateLoad"
/>
<Custominput
@@ -298,6 +346,8 @@
type="date"
:filled="false"
name="date-download"
:required="submited ? true : false"
:error="(submited && !formLoad.dateDownload) ? 'Fecha es requerida' : null"
v-model:field="formLoad.dateDownload"
/>
<Custominput
@@ -305,6 +355,8 @@
type="number"
:filled="false"
name="weight"
:required="submited ? true : false"
:error="(submited && !formLoad.weight) ? 'Ingrese peso en KG' : null"
v-model:field="formLoad.weight"
/>
</div>
@@ -314,6 +366,7 @@
<Products
v-model="formLoad.terms"
/>
<span class="error-msg" v-if="submited && errors.product">{{ errors.product }}</span>
</div>
<Custominput
label="Precio*"
@@ -321,6 +374,8 @@
:filled="false"
name="price"
v-model:field="formLoad.price"
:required="submited ? true : false"
:error="(submited && !formLoad.price) ? 'Ingrese precio en MXN' : null"
/>
<Custominput
label="Notas"
@@ -348,6 +403,8 @@
:filled="false"
name="name-location-origin"
v-model:field="origin.locationName"
:required="submited ? true : false"
:error="(submited && !origin.locationName) ? 'Ingrese nombre' : null"
/>
<Custominput
label="Dirección*"
@@ -355,18 +412,22 @@
:filled="false"
name="address-origin"
v-model:field="origin.address"
:required="submited ? true : false"
:error="(submited && !origin.address) ? 'Ingrese dirección' : null"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Ciudad*</label>
<Cities
v-model="origin.city"
/>
<span class="error-msg" v-if="submited && errors.cityOrigin">{{ errors.cityOrigin }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Estado*</label>
<States
v-model="origin.state"
/>
<span class="error-msg" v-if="submited && errors.stateOrigin">{{ errors.stateOrigin }}</span>
</div>
<Custominput
label="País*"
@@ -374,6 +435,8 @@
:filled="false"
name="country-origin"
v-model:field="origin.country"
:required="submited ? true : false"
:error="(submited && !origin.country) ? 'Ingrese país' : null"
/>
<Custominput
label="Código Postal*"
@@ -381,6 +444,8 @@
:filled="false"
name="postalCode-origin"
v-model:field="origin.postalCode"
:required="submited ? true : false"
:error="(submited && !origin.postalCode) ? 'Ingrese Código postal' : null"
/>
<Custominput
label="Punto de referencia"
@@ -398,6 +463,8 @@
:filled="false"
name="name-location-destination"
v-model:field="destination.locationName"
:required="submited ? true : false"
:error="(submited && !destination.locationName) ? 'Ingrese nombre' : null"
/>
<Custominput
label="Dirección"
@@ -405,18 +472,22 @@
:filled="false"
name="address-destination"
v-model:field="destination.address"
:required="submited ? true : false"
:error="(submited && !destination.address) ? 'Ingrese dirección' : null"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Ciudad*</label>
<Cities
v-model="destination.city"
/>
<span class="error-msg" v-if="submited && errors.cityDestination">{{ errors.cityDestination }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Estado*</label>
<States
v-model="destination.state"
/>
<span class="error-msg" v-if="submited && errors.stateDestination">{{ errors.stateDestination }}</span>
</div>
<Custominput
label="País*"
@@ -424,6 +495,8 @@
:filled="false"
name="country-destination"
v-model:field="destination.country"
:required="submited ? true : false"
:error="(submited && !destination.country) ? 'Ingrese país' : null"
/>
<Custominput
label="Código Postal*"
@@ -431,6 +504,8 @@
:filled="false"
name="postalCode-destination"
v-model:field="destination.postalCode"
:required="submited ? true : false"
:error="(submited && !destination.postalCode) ? 'Ingrese código postal' : null"
/>
<Custominput
label="Punto de referencia"
@@ -483,9 +558,9 @@
@click="handleSave"
>Guardar</button>
<button
type="button"
type="submit"
@click.prevent="handlePostLoad"
class="btn-primary-sm radius-sm"
@click="handlePostLoad"
>Publicar</button>
</div>
</div>
@@ -522,6 +597,12 @@
justify-content: center;
}
.error-msg {
color: red;
font-size: 12px;
font-weight: 300;
}
.btns-footer {
display: flex;
gap: 1rem;

15
src/components/ui/CustomInput.vue
View File

@@ -28,6 +28,13 @@
helpText: {
type: String,
default: '',
},
required: {
type: Boolean,
default: false,
},
error: {
type: String,
}
})
@@ -47,8 +54,10 @@
:value="field"
:disabled="readonly"
:readonly="readonly"
:required="required"
@input="$event => $emit('update:field', $event.target.value)">
<span class="help" v-if="helpText.length > 0">{{ helpText }}</span>
<span class="error-msg" v-if="error">{{ error }}</span>
</div>
</template>
@@ -58,4 +67,10 @@
font-weight: 300;
color: rgb(108, 92, 92);
}
.error-msg {
color: red;
font-size: 12px;
font-weight: 300;
}
</style>

4
src/stores/loads.js
View File

@@ -23,7 +23,6 @@ export const useLoadsStore = defineStore('load', () => {
try {
const endpoint = `/loads?company=${companyid}&${filterStr}`;
const {data} = await api.get(endpoint);
// console.log(data);
loads.value = data.data;
} catch (error) {
loads.value = [];
@@ -47,7 +46,6 @@ export const useLoadsStore = defineStore('load', () => {
try {
const endpoint = `/loads/`;
const {data} = await api.post(endpoint, load);
// console.log(data);
return data;
} catch (error) {
console.log(error);
@@ -96,7 +94,6 @@ export const useLoadsStore = defineStore('load', () => {
const endpoint = `/loads/${loadId}`;
console.log(endpoint);
const {data} = await api.delete(endpoint);
console.log(data);
return data;
} catch (error) {
console.log(error);
@@ -108,7 +105,6 @@ export const useLoadsStore = defineStore('load', () => {
try {
const endpoint = `/loads/${filterQuery}`;
const {data} = await api.get(endpoint);
console.log(data);
return data;
} catch (error) {
console.log(error);