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"

20
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>
@@ -26,11 +28,13 @@
<p v-if="proposal.vehicle"><span>Placas remolque 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
<p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load).color}"><span>Status de la carga:</span> {{ getStatusLoad(proposal.load).status }}</p>
</div>
<div class="">
<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>

63
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,30 +97,53 @@
}
msgError.value = '';
let formData = {
carrier: authStore.user.company,
bidder : authStore.user._id,
comment: form.comments,
vehicle : form.vehicle,
load : props.load._id
let result;
let action;
if(!props.proposal) {
let formData = {
carrier: authStore.user.company,
bidder : authStore.user._id,
comment: form.comments,
vehicle : form.vehicle,
load : props.load._id
}
loadingSubmit.value = true;
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);
}
loadingSubmit.value = true;
const result = await saveProposal(formData);
if(result !== null) {
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"