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

add: edit proposal

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-01-23 21:17:53 -06:00
parent 02e554f560
commit aa7aae3532
9 changed files with 333 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CardLoad.vue
View File

@@ -177,7 +177,7 @@
data-target="#proposalsModal"
>#{{ load.no_of_proposals }} Ofertas</button>
</div>
<div class="btn-row" v-if="authStore.user?.permissions.includes('role_carrier')">
<div class="btn-row" v-if="!readOnly && authStore.user?.permissions.includes('role_carrier')">
<button
class="btn-primary-sm bg-dark"
data-toggle="modal"

18
src/components/CardProposal.vue
View File

@@ -2,12 +2,14 @@
import { getDateMonthDay } from '../helpers/date_formats';
import { getStatusLoad } from '../helpers/status';
defineProps({
const props = defineProps({
proposal: {
type: Object,
required: true,
}
})
defineEmits(['set-proposal']);
</script>
<template>
@@ -31,6 +33,8 @@
<p v-if="proposal.load"> Código de carga:
<span
class="code-enruta"
@click="$emit('set-proposal', {proposal: proposal, modal: 'detail'})"
data-toggle="modal" data-target="#loadDetailModal"
>{{proposal.load.shipment_code}}</span></p>
<p v-if="proposal._driver">Operator: {{proposal._driver}}</p>
</div>
@@ -42,7 +46,8 @@
><i class="fa-solid fa-ban"></i> Retirar</button>
<button
class="btn-primary-sm"
data-toggle="modal" data-target="#editcompanymodal"
@click="$emit('set-proposal', {proposal: proposal, modal: 'edit'})"
data-toggle="modal" data-target="#makeProposalModal"
><i class="fa-solid fa-pen-to-square"></i> Editar</button>
<button
class="btn-primary-sm"
@@ -64,6 +69,15 @@
justify-content: space-between;
}
.code-enruta {
cursor: pointer;
color: rgb(107, 107, 227);
}
.code-enruta:hover{
color: rgb(75, 75, 228);
}
.tracking-icon {
cursor: pointer;
color: #f2a23f;

6
src/components/CreateBudgetModal.vue
View File

@@ -268,7 +268,7 @@
<div class="calculator-card">
<div class="calculator-card__title">
<h2>CALCULADOR DE TARIFAS</h2>
<img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
<img src="/images/logo-eta.png" alt="Eta viaporte" width="110">
</div>
<div class="calculator-card__subtitle">
<h4>DATOS DE CARGA</h4>
@@ -572,7 +572,7 @@
.calculator-card__subtitle {
// background-color: #50b1e5;
background-color: #FBBA33;
padding: 10px 20px;
padding: 8px 20px;
color: #FFF;
text-align: center;
font-size: 1.2rem;
@@ -580,7 +580,7 @@
}
.calculator-card__loads_data {
padding: 24px 24px;
padding: 20px 24px;
}
.calculator-card__totals {

188
src/components/LoadDetailModal.vue Normal file
View File

@@ -0,0 +1,188 @@
<script setup>
import { ref, onMounted } from 'vue';
import CardEmpty from './CardEmpty.vue';
import Spiner from './ui/Spiner.vue';
import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map';
import useDirectionsRender from '../composables/useDirectionRender';
import Cardload from './cardload.vue';
import { useLoadsStore } from '../stores/loads';
const zoom = ref(6);
const heightMap = ref(768);
const originCoords = ref(null);
const destinationCoords = ref(null);
const isLoading = ref(false);
const windowWidth = ref(window.innerWidth);
const load = ref(null);
const vehicleLastLocation = ref(null);
const isLoadActive = ref(false);
const { geocodeAddress } = useDirectionsRender()
const props = defineProps({
proposal: {
type: Object,
required: true,
}
})
defineEmits(['reset-proposal'])
const loadStore = useLoadsStore();
onMounted(() => {
window.addEventListener('resize', handleResize);
if(window.innerWidth <= 1024) {
zoom.value = 4;
heightMap.value = 420;
}
initData()
});
const initData = async() => {
isLoading.value = true;
const code = props.proposal.load.shipment_code;
const filter = "?shipment_code[$in]=" + code;
const resp = await loadStore.getLoad(filter);
if(resp.total > 0) {
load.value = resp.data[0];
originCoords.value = await geocodeAddress(load.value.origin_formatted_address);
destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address);
if(load.value.vehicle) {
vehicleLastLocation.value = {
lat: parseFloat(load.value.vehicle.last_location_lat),
lng: parseFloat(load.value.vehicle.last_location_lng)
}
}
switch (load.value.load_status) {
case 'Loading':
isLoadActive.value = true;
break;
case 'Transit':
isLoadActive.value = true;
break;
case 'Downloading':
isLoadActive.value = true;
break;
default:
isLoadActive.value = false;
break;
}
}
isLoading.value = false;
}
const handleResize = () => {
windowWidth.value = window.innerWidth
if(windowWidth.value <= 1024){
zoom.value = 4
heightMap.value = 420;
} else {
zoom.value = 6;
heightMap.value = 768;
}
}
</script>
<template>
<div class="modal fade" id="loadDetailModal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="title mt-2 mb-3">Detalles de carga</h2>
<button
id="btnCloseloadDetailModal"
type="button"
class="close bg-white"
data-dismiss="modal"
aria-label="Close"
@click="$emit('reset-proposal')"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body view-proposals">
<Spiner v-if="isLoading"/>
<div v-else>
<div v-if="load">
<Cardload :load="load" :read-only="true"/>
<GoogleMap
api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
:center="{lat:19.432600, lng:-99.133209}"
:zoom="zoom"
:min-zoom="2"
:max-zoom="12"
:style="{width: 100 + '%', height: heightMap + 'px'}"
:options="{
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
rotateControl: true,
fullscreenControl: true
}"
>
<Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
<Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
<CustomMarker
v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
:options="{position: vehicleLastLocation}"
:clickable="false"
:draggable="false"
>
<div style="text-align: center">
<!-- <img src="/images/freeTruck.png" width="25" height="25" /> -->
<i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
</div>
</CustomMarker>
<!-- <Polyline :options="{
path: polyline,
// geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
}" /> -->
</GoogleMap>
</div>
<CardEmpty v-else text="No hay información disponible"/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-dark"
data-dismiss="modal"
@click="$emit('reset-proposal')"
>Cerrar</button>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.box-form {
width: 90%;
align-items: center;
align-content: center;
justify-content: center;
margin: 0 auto;
}
.custom-selected-field {
display: flex;
flex-direction: column;
margin-bottom: 16px;
}
.box-btns {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
</style>

51
src/components/MakeProposalModal.vue
View File

@@ -1,11 +1,12 @@
<script setup>
import { ref, onMounted, reactive } from 'vue';
import { ref, onMounted, reactive, computed } from 'vue';
import CardEmpty from './CardEmpty.vue';
import Spiner from './ui/Spiner.vue';
import BadgeError from './ui/BadgeError.vue';
import { GoogleMap, Marker } from 'vue3-google-map';
import useDirectionsRender from '../composables/useDirectionRender';
import { useAuthStore } from '../stores/auth';
import { useCompanyStore } from '../stores/company';
import { useVehiclesStore } from '../stores/vehicles';
import { saveProposal } from '../services/vehicles'
import Swal from 'sweetalert2';
@@ -33,9 +34,14 @@
load: {
type: Object,
required: true,
},
proposal: {
type: Object,
}
})
const companyStore = useCompanyStore();
defineEmits(['reset-load'])
@@ -56,6 +62,11 @@
originCoords.value = await geocodeAddress(props.load.origin_formatted_address);
destinationCoords.value = await geocodeAddress(props.load.destination_formatted_address);
isLoading.value = false;
console.log(props.proposal);
if(props.proposal) {
form.vehicle = props.proposal.vehicle._id;
form.comments = props.proposal.comment;
}
}
const handleResize = () => {
@@ -86,6 +97,9 @@
}
msgError.value = '';
let result;
let action;
if(!props.proposal) {
let formData = {
carrier: authStore.user.company,
bidder : authStore.user._id,
@@ -93,23 +107,43 @@
vehicle : form.vehicle,
load : props.load._id
}
loadingSubmit.value = true;
const result = await saveProposal(formData);
if(result !== null) {
action = 'creada';
result = await companyStore.createPropsal(formData);
} else {
let formData = {
comment: form.comments,
vehicle : form.vehicle,
}
const index = vehiclesStore.vehicles.findIndex((prop) => prop._id === form.vehicle);
const vehicleSelected = vehiclesStore.vehicles[index];
console.log(vehicleSelected);
const localData = {
vehicle: vehicleSelected,
_driver: vehicleSelected?.driver.first_name + ' ' + vehicleSelected?.driver.last_name
}
loadingSubmit.value = true;
action = 'actualizada'
result = await companyStore.updatePropsalLoad(props.proposal._id, formData, localData);
}
if(result === 'success') {
document.getElementById('btnClosemakeProposalModal').click();
Swal.fire({
title: '<strong>Oferta creada con éxito!</strong>',
title: `<strong>Oferta ${action} con éxito!</strong>`,
icon: 'success'
})
} else {
Swal.fire({
title: '<strong>Oferta no se pudo crear!</strong>',
title: result,
icon: 'error'
})
}
loadingSubmit.value = false;
}
const title = computed(() => (props.proposal) ? 'Modificar oferta' : 'Realizar oferta');
const btnSubmit = computed(() => (props.proposal) ? 'Guardar' : 'Enviar');
</script>
<template>
@@ -117,7 +151,7 @@
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="title mt-2 mb-3">Realizar oferta</h2>
<h2 class="title mt-2 mb-3">{{ title }}</h2>
<button
id="btnClosemakeProposalModal"
type="button"
@@ -163,11 +197,12 @@
v-else
type="submit"
class="btn-primary-sm"
value="Enviar"
:value="btnSubmit"
/>
</div>
</form>
<GoogleMap
v-if="!proposal"
api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
:center="{lat:19.432600, lng:-99.133209}"
:zoom="zoom"

11
src/services/vehicles.js
View File

@@ -55,3 +55,14 @@ export const saveProposal = async(formData) => {
return null;
}
}
export const updateProposal = async(id, formData) => {
try {
const endpoint = `/proposals/${id}`;
const {data} = await api.patch(endpoint, formData);
return data;
} catch (error) {
console.log(error);
return null;
}
}

29
src/stores/company.js
View File

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
import { ref } from "vue";
import { getBudgets, getCompany, updateBudget, updateCompany, deleteBudget, createBudget, getUsers, updateUser, createUser, deleteUser, getLocations, createLocation, updateLocation, deleteLocation } from "../services/company";
import api from "../lib/axios";
import { saveProposal, updateProposal } from "../services/vehicles";
export const useCompanyStore = defineStore('company', () => {
@@ -123,6 +124,32 @@ export const useCompanyStore = defineStore('company', () => {
}
}
const createPropsal = async(formData) => {
const data = await saveProposal(formData);
console.log(data);
if(data) {
return 'success';
} else {
return 'Algo salio mal, intente más tarde';
}
}
const updatePropsalLoad = async(id, formData, localData) => {
const data = await updateProposal(id, formData);
if(data) {
console.log(data);
const index = proposals.value.findIndex((prop) => prop._id === id);
proposals.value[index] = {
...proposals.value[index],
...data,
...localData
};
return 'success';
} else {
return 'Algo salio mal, intente más tarde';
}
}
const getBudgetsCompany = async(filterQuery, reload = false) => {
let filterArr = Object.values(filterQuery);
@@ -261,6 +288,8 @@ export const useCompanyStore = defineStore('company', () => {
return {
getCompanyData,
getProposalsCompany,
createPropsal,
updatePropsalLoad,
getBudgetsCompany,
getUsersCompany,
createUserCompany,

2
src/views/SearchLoadsView.vue
View File

@@ -168,7 +168,7 @@
v-if="loads.length > 0"
v-for="load in loads"
:load="load"
:read-only="true"
:read-only="false"
@set-load="handleSetCurrentLoad(load)"
/>
<CardEmpty

35
src/views/TrucksPublishedView.vue
View File

@@ -3,9 +3,14 @@
import { useCompanyStore } from '../stores/company';
import Spiner from '../components/ui/Spiner.vue';
import CardProposal from '../components/CardProposal.vue';
import LoadDetailModal from '../components/LoadDetailModal.vue';
import MakeProposalModal from '../components/MakeProposalModal.vue';
const companyStore = useCompanyStore();
const loading = ref(false);
const proposalCurrent = ref(null);
const openModal = ref(false);
const openModalProposal = ref(false);
onMounted(() =>{
getInitData();
@@ -16,17 +21,45 @@
await companyStore.getProposalsCompany();
loading.value = false;
}
const handleSetCurrentProposal = (data) => {
if(data.modal === 'detail') {
openModal.value = true;
} else {
openModalProposal.value = true;
}
proposalCurrent.value = data.proposal;
}
const handleResetCurrentProposal = () => {
openModal.value = false;
openModalProposal.value = false;
proposalCurrent.value = null;
console.log('clear proposal');
}
</script>
<template>
<LoadDetailModal
v-if="openModal"
:proposal="proposalCurrent"
@reset-proposal="handleResetCurrentProposal"
/>
<MakeProposalModal
v-if="openModalProposal"
:proposal="proposalCurrent"
:load="proposalCurrent.load"
@reset-load="handleResetCurrentProposal"
/>
<div>
<h2 class="title mb-5">Mis vehiculos publicadas</h2>
<h2 class="title mb-5">Mis ofertas aceptadas</h2>
<Spiner v-if="loading"/>
<CardProposal
v-else
v-for="proposal in companyStore.proposals"
:key="proposal._id"
:proposal="proposal"
@set-proposal="handleSetCurrentProposal"
/>
</div>
</template>