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

add: update & create load

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-12 19:04:12 -06:00
parent 1ffc3d8ed8
commit 292d125216
4 changed files with 150 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/components/FormLoadModal.vue
View File

@@ -9,9 +9,12 @@
import Products from './ui/Products.vue';
import { GoogleMap, Marker, Polyline } from "vue3-google-map";
import useDirectionsRender from '../composables/useDirectionRender';
import { useAuthStore } from '../stores/auth';
import { useRouter } from 'vue-router';
const router = useRouter()
const loadStore = useLoadsStore();
const auth = useAuthStore();
const windowWidth = ref(window.innerWidth);
const zoom = ref(6);
const heightMap = ref(768);
@@ -21,6 +24,7 @@
const endLocation = ref(null);
const { geocodeAddress } = useDirectionsRender();
const clearLoad = () => {
loadStore.currentLoad = null;
loadStore.openModalEdit = false;
@@ -44,15 +48,16 @@
zoom.value = 4;
heightMap.value = 420;
}
formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
//origin_formatted_address
if(loadStore.currentLoad){
formLoad.price = loadStore.currentLoad.actual_cost;
formLoad.segment = loadStore.currentLoad.categories.map(m =>{
return { name: m.name };
return m;
});
startLocation.value = loadStore.currentLoad.origin_formatted_address;
endLocation.value = loadStore.currentLoad.destination_formatted_address;
formLoad.terms = {name: loadStore.currentLoad.product.name};
formLoad.terms = loadStore.currentLoad.product;
formLoad.owner = loadStore.currentLoad.posted_by_name;
formLoad.notes = loadStore.currentLoad.notes;
formLoad.weight = loadStore.currentLoad.weight;
@@ -60,40 +65,42 @@
formLoad.dateDownload = loadStore.currentLoad.est_unloading_date.substring(0, 10);
formLoad.truckType = {meta_value: loadStore.currentLoad.truck_type};
origin.locationNameOrigin = loadStore.currentLoad.origin.company_name;
origin.addressOrigin = loadStore.currentLoad.origin.street_address1;
origin.stateOrigin = { state_name: loadStore.currentLoad.origin.state };
origin.cityOrigin = { city_name: loadStore.currentLoad.origin.city };
origin.countryOrigin = loadStore.currentLoad.origin.country;
origin.postalCodeOrigin = loadStore.currentLoad.origin.zipcode;
origin.refOrigin = loadStore.currentLoad.origin.landmark;
origin.locationName = loadStore.currentLoad.origin.company_name;
origin.address = loadStore.currentLoad.origin.street_address1;
origin.state = { state_name: loadStore.currentLoad.origin.state };
origin.city = { city_name: loadStore.currentLoad.origin.city };
origin.country = loadStore.currentLoad.origin.country;
origin.postalCode = loadStore.currentLoad.origin.zipcode;
origin.ref = loadStore.currentLoad.origin.landmark;
destination.locationNameDestination = loadStore.currentLoad.destination.company_name;
destination.addressDestination = loadStore.currentLoad.destination.street_address1;
destination.stateDestination = { state_name: loadStore.currentLoad.destination.state };
destination.cityDestination = { city_name: loadStore.currentLoad.destination.city };
destination.countryDestination = loadStore.currentLoad.destination.country;
destination.postalCodeDestination = loadStore.currentLoad.destination.zipcode;
destination.refDestination = loadStore.currentLoad.destination.landmark;
destination.locationName = loadStore.currentLoad.destination.company_name;
destination.address = loadStore.currentLoad.destination.street_address1;
destination.state = { state_name: loadStore.currentLoad.destination.state };
destination.city = { city_name: loadStore.currentLoad.destination.city };
destination.country = loadStore.currentLoad.destination.country;
destination.postalCode = loadStore.currentLoad.destination.zipcode;
destination.ref = loadStore.currentLoad.destination.landmark;
getCoordsMap();
}
watch(origin, async() => {
startLocation.value = origin.addressOrigin + ', ' + origin.cityOrigin.city_name + ', ' + origin.stateOrigin.state_name + ', ' + origin.countryOrigin + ', ' +origin.postalCodeOrigin;
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)
}
})
watch(destination, async() => {
endLocation.value = destination.addressDestination + ', ' + destination.cityDestination.city_name + ', ' + destination.stateDestination.state_name + ', ' + destination.countryDestination + ', ' +destination.postalCodeDestination;
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);
})
}
})
})
const getCoordsMap = async() => {
originCoords.value = await geocodeAddress(loadStore.currentLoad.origin_formatted_address);
@@ -114,29 +121,72 @@
});
const origin = reactive({
locationNameOrigin: '',
addressOrigin: '',
stateOrigin: '',
cityOrigin: '',
countryOrigin: '',
postalCodeOrigin: '',
refOrigin: '',
locationName: '',
address: '',
state: '',
city: '',
country: '',
postalCode: '',
ref: '',
});
const destination = reactive({
locationNameDestination: '',
addressDestination: '',
stateDestination: '',
cityDestination: '',
countryDestination: '',
postalCodeDestination: '',
refDestination: '',
locationName: '',
address: '',
state: '',
city: '',
country: '',
postalCode: '',
ref: '',
});
const handleSave = () => {
console.log(formLoad);
console.log(origin)
console.log(destination)
const handleSave = async() => {
let loadData = {
actual_cost: formLoad.price,
truck_type: formLoad.truckType.meta_value || null,
est_loading_date : formLoad.dateLoad,
est_unloading_date : formLoad.dateDownload,
notes : formLoad.notes,
weight : formLoad.weight,
product: formLoad.terms || null,
categories: formLoad.segment || null,
origin:{
company_name : origin.locationName,
street_address1 : origin.address,
state : origin.state.state_name,
city : origin.city.city_name,
country : origin.country,
landmark : origin.ref,
zipcode : origin.postalCode,
lat : originCoords.value.lat,
lng : originCoords.value.lng
},
destination:{
company_name : destination.locationName,
street_address1 : destination.address,
state : destination.state.state_name,
city : destination.city.city_name,
country : destination.country,
landmark : destination.ref,
zipcode : destination.postalCode,
lat : destinationCoords.value.lat,
lng : destinationCoords.value.lng
},
company: auth.user.company,
posted_by: auth.user._id,
posted_by_name: formLoad.owner
};
console.log('loadData: ', loadData);
if(loadStore.currentLoad){
const resp = await loadStore.updateLoad(loadStore.currentLoad._id, loadData);
const index = loadStore.loads.findIndex((load) => load._id === resp._id);
loadStore.loads[index] = resp;
document.getElementById('btnCloseFormLoadModal').click();
} else{
const resp = await loadStore.saveLoad(loadData);
loadStore.loads.push(resp);
}
}
</script>
@@ -219,6 +269,7 @@
label="Publicación hecha por*"
type="text"
:filled="false"
:readonly="true"
name="owner"
v-model:field="formLoad.owner"
/>
@@ -232,25 +283,25 @@
type="text"
:filled="false"
name="name-location-origin"
v-model:field="origin.locationNameOrigin"
v-model:field="origin.locationName"
/>
<Custominput
label="Dirección*"
type="text"
:filled="false"
name="address-origin"
v-model:field="origin.addressOrigin"
v-model:field="origin.address"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Ciudad*</label>
<Cities
v-model="origin.cityOrigin"
v-model="origin.city"
/>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Estado*</label>
<States
v-model="origin.stateOrigin"
v-model="origin.state"
/>
</div>
<Custominput
@@ -258,21 +309,21 @@
type="text"
:filled="false"
name="country-origin"
v-model:field="origin.countryOrigin"
v-model:field="origin.country"
/>
<Custominput
label="Código Postal*"
type="text"
:filled="false"
name="postalCode-origin"
v-model:field="origin.postalCodeOrigin"
v-model:field="origin.postalCode"
/>
<Custominput
label="Punto de referencia"
type="text"
:filled="false"
name="ref-origin"
v-model:field="origin.refOrigin"
v-model:field="origin.ref"
/>
</div>
<div class="form-section">
@@ -282,25 +333,25 @@
type="text"
:filled="false"
name="name-location-destination"
v-model:field="destination.locationNameDestination"
v-model:field="destination.locationName"
/>
<Custominput
label="Dirección"
type="text"
:filled="false"
name="address-destination"
v-model:field="destination.addressDestination"
v-model:field="destination.address"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Ciudad*</label>
<Cities
v-model="destination.cityDestination"
v-model="destination.city"
/>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Estado*</label>
<States
v-model="destination.stateDestination"
v-model="destination.state"
/>
</div>
<Custominput
@@ -308,21 +359,21 @@
type="text"
:filled="false"
name="country-destination"
v-model:field="destination.countryDestination"
v-model:field="destination.country"
/>
<Custominput
label="Código Postal*"
type="text"
:filled="false"
name="postalCode-destination"
v-model:field="destination.postalCodeDestination"
v-model:field="destination.postalCode"
/>
<Custominput
label="Punto de referencia"
type="text"
:filled="false"
name="ref-destination"
v-model:field="destination.refDestination"
v-model:field="destination.ref"
/>
</div>
</div>

8
src/components/ProposalsModal.vue
View File

@@ -1,9 +1,9 @@
<script setup>
import { onMounted, ref } from 'vue';
import { useLoadsStore } from '../stores/loads';
import Spiner from './ui/Spiner.vue';
import { getDateMonthDay } from '../helpers/date_formats';
import VehicleInfo from './VehicleInfo.vue';
import Spiner from './ui/Spiner.vue';
import { getDateMonthDay } from '../helpers/date_formats';
import VehicleInfo from './VehicleInfo.vue';
const loadsStore = useLoadsStore();
const isLoading = ref(false);
@@ -34,7 +34,7 @@ import VehicleInfo from './VehicleInfo.vue';
const handleCancelProposal = (proposal) => {
const index = loadsStore.proposalsOfLoads.findIndex((p) => p._id === proposal._id);
console.log(loadsStore.proposalsOfLoads[index])
// console.log(loadsStore.proposalsOfLoads[index])
loadsStore.proposalsOfLoads[index] = {
...proposal,
is_accepted: false

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

@@ -12,6 +12,11 @@
required: false,
default: true,
},
readonly: {
type: Boolean,
required: false,
default: false,
},
name: {
type: String,
required: true,
@@ -40,6 +45,8 @@
:id="name"
:name="name"
:value="field"
:disabled="readonly"
:readonly="readonly"
@input="$event => $emit('update:field', $event.target.value)">
<span class="help" v-if="helpText.length > 0">{{ helpText }}</span>
</div>

31
src/stores/loads.js
View File

@@ -19,10 +19,11 @@ export const useLoadsStore = defineStore('load', () => {
if(cleanfilterArr.length >0){
filterStr = cleanfilterArr.join("&");
}
console.log(filterStr);
// console.log(filterStr);
try {
const endpoint = `/loads?company=${companyid}&${filterStr}`;
const {data} = await api.get(endpoint);
console.log(data);
loads.value = data.data;
} catch (error) {
loads.value = [];
@@ -43,6 +44,32 @@ export const useLoadsStore = defineStore('load', () => {
}
}
const saveLoad = async(load) => {
try {
const endpoint = `/loads/`;
console.log(endpoint);
const {data} = await api.post(endpoint, load);
console.log(data);
return data;
} catch (error) {
console.log(error);
return null;
}
}
const updateLoad = async(loadId, load) => {
try {
const endpoint = `/loads/${loadId}`;
console.log(endpoint);
const {data} = await api.patch(endpoint, load);
console.log(data);
return data;
} catch (error) {
console.log(error);
return null;
}
}
return {
openModalEdit,
@@ -50,6 +77,8 @@ export const useLoadsStore = defineStore('load', () => {
openAttachmentsModal,
getProposalsOfLoads,
getCompanyLoads,
saveLoad,
updateLoad,
loads,
currentLoad,
proposalsOfLoads,