diff --git a/src/components/CardLoad.vue b/src/components/CardLoad.vue index 6ba2760..d1d467a 100644 --- a/src/components/CardLoad.vue +++ b/src/components/CardLoad.vue @@ -92,8 +92,25 @@
-

Origen: {{ load.origin.company_name }}, {{ load.origin_formatted_address }}

-

Destino: {{ load.destination.company_name }}, {{ load.destination_formatted_address }}

+

+ Origen: + + + + + + +

+

+ Destino: + + + + + + +

+

Status de la publicación: {{ getStatusPublished(load) }}

diff --git a/src/components/FormLoadModal.vue b/src/components/FormLoadModal.vue index f6df9e8..1289d8e 100644 --- a/src/components/FormLoadModal.vue +++ b/src/components/FormLoadModal.vue @@ -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,16 +269,31 @@ load_status: "Published" } - const resp = await updateLoad(loadData); - if(resp === 'success') { - document.getElementById('btnCloseFormLoadModal').click(); - } else { - Swal.fire({ - title: "Error!", - text: "No se pudo publicar carga, intente más tarde", - icon: "error" - }); - } + 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({ + title: "Error!", + text: "No se pudo publicar carga, intente más tarde", + icon: "error" + }); + } + } else { + console.log('Hay errores'); + } + } + }, 200) } @@ -271,7 +315,7 @@
-
+
@@ -279,18 +323,22 @@ + {{ errors.segment }}
+ {{ errors.truckType }}
@@ -314,6 +366,7 @@ + {{ errors.product }}
+ {{ errors.cityOrigin }}
+ {{ errors.stateOrigin }}
+ {{ errors.cityDestination }}
+ {{ errors.stateDestination }}
Guardar
@@ -522,6 +597,12 @@ justify-content: center; } + .error-msg { + color: red; + font-size: 12px; + font-weight: 300; + } + .btns-footer { display: flex; gap: 1rem; diff --git a/src/components/ui/CustomInput.vue b/src/components/ui/CustomInput.vue index 58910d7..40d6805 100644 --- a/src/components/ui/CustomInput.vue +++ b/src/components/ui/CustomInput.vue @@ -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)"> {{ helpText }} + {{ error }}
@@ -58,4 +67,10 @@ font-weight: 300; color: rgb(108, 92, 92); } + + .error-msg { + color: red; + font-size: 12px; + font-weight: 300; + } \ No newline at end of file diff --git a/src/stores/loads.js b/src/stores/loads.js index 65ad6ac..99ff48b 100644 --- a/src/stores/loads.js +++ b/src/stores/loads.js @@ -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);