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

167
src/components/FormLoadModal.vue
View File

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

8
src/components/ProposalsModal.vue
View File

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

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

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

31
src/stores/loads.js
View File

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