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

add: modal set proposals

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-19 21:17:34 -06:00
parent bc49895b01
commit 2bea640d49
8 changed files with 240 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/CardLoad.vue
View File

@@ -23,6 +23,7 @@
}
});
defineEmits(['set-load'])
const openAttachmentsModal = () => {
@@ -179,8 +180,9 @@
<div class="btn-row" v-if="authStore.user?.permissions.includes('role_carrier')">
<button
class="btn-primary-sm bg-dark"
data-toggle="modal" data-target="#formLoadModal"
@click=""
data-toggle="modal"
data-target="#makeProposalModal"
@click="event => $emit('set-load')"
>Hacer oferta</button>
<button
class="btn-primary-sm"

177
src/components/MakeProposalModal.vue Normal file
View File

@@ -0,0 +1,177 @@
<script setup>
import { ref, onMounted } from 'vue';
import CardEmpty from './CardEmpty.vue';
import Spiner from './ui/Spiner.vue';
import { GoogleMap, Marker } from 'vue3-google-map';
import useDirectionsRender from '../composables/useDirectionRender';
import { useAuthStore } from '../stores/auth';
import { useVehiclesStore } from '../stores/vehicles';
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 authStore = useAuthStore();
const vehiclesStore = useVehiclesStore();
const vehicle = ref(null);
const comments = ref('');
const { geocodeAddress } = useDirectionsRender()
const props = defineProps({
load: {
type: Object,
required: true,
}
})
defineEmits(['reset-load'])
onMounted(() => {
window.addEventListener('resize', handleResize);
if(window.innerWidth <= 1024) {
zoom.value = 4;
heightMap.value = 420;
}
initData();
});
const initData = async() => {
isLoading.value = true;
await vehiclesStore.fetchVehicles("?company="+ authStore.user.company);
originCoords.value = await geocodeAddress(props.load.origin_formatted_address);
destinationCoords.value = await geocodeAddress(props.load.destination_formatted_address);
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="makeProposalModal" 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">Ofertas</h2>
<button
id="btnClosemakeProposalModal"
type="button"
class="close bg-white"
data-dismiss="modal"
aria-label="Close"
@click="$emit('reset-load')"
>
<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">
<form class="box-form mb-4">
<div class="custom-selected-field">
<label class="custom-label" for="vehicle">Vehiculo:</label>
<select
class="custom-input-light"
name="vehicle"
id="vehicle"
:value="vehicle"
@input="$event => $emit('update:vehicle', $event.target.value)"
>
<option disabled value="">-- Seleccionar vehículo --</option>
<option v-for="vehicle in vehiclesStore.vehicles" :value="vehicle._id">{{vehicle.vehicle_code}}</option>
</select>
</div>
<div class="custom-selected-field">
<label class="custom-label" for="comment">Comentario:</label>
<textarea
class="custom-input-light"
name="comment"
id="comment"
placeholder="Escribe aqui..."
:value="comments"
@input="$event => $emit('update:comments', $event.target.value)"
></textarea>
</div>
<div class="box-btns">
<input
type="submit"
class="btn-primary-sm"
value="Enviar"
/>
</div>
</form>
<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'}" />
<!-- <Polyline :options="{
path: polyline,
// geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
}" /> -->
</GoogleMap>
</div>
<CardEmpty v-else text="No hay coincidencia"/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-dark"
data-dismiss="modal">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>

1
src/services/company.js
View File

@@ -23,6 +23,7 @@ export const editCompany = async(companyId, formData) => {
}
}
// export const editCompany = async(companyId, formData) => {
// try {
// const endpoint = `/companies/${companyId}`;

13
src/services/vehicles.js Normal file
View File

@@ -0,0 +1,13 @@
import api from "../lib/axios";
export const getVehicles = async(filter) => {
try {
const endpoint = `/vehicles/${filter}`;
const {data} = await api.get(endpoint);
return data;
} catch (error) {
console.log(error);
return null;
}
}

22
src/stores/vehicles.js Normal file
View File

@@ -0,0 +1,22 @@
import { defineStore } from "pinia";
import { ref } from "vue";
import { getVehicles } from "../services/vehicles";
export const useVehiclesStore = defineStore('vehicles', () => {
const vehicles = ref([]);
const fetchVehicles = async(filter) => {
if(vehicles.value.length <= 0) {
const resp = await getVehicles(filter);
console.log(resp.data);
if(resp !== null) {
vehicles.value = resp.data;
}
}
}
return {
fetchVehicles,
vehicles
}
});

2
src/views/PublicUsersCompanyView.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { onMounted } from 'vue';
import { onMounted, ref } from 'vue';
import Spiner from '../components/ui/Spiner.vue';
import { useRoute } from 'vue-router';
import { getDateMonthDay } from '../helpers/date_formats';

20
src/views/SearchLoadsView.vue
View File

@@ -8,6 +8,7 @@
import Segments from '../components/ui/Segments.vue';
import States from '../components/ui/States.vue';
import Cities from '../components/ui/Cities.vue';
import MakeProposalModal from '../components/MakeProposalModal.vue';
const filterQuery = ref([]);
const query = ref('');
const selectedTruckType = ref([]);
@@ -113,10 +114,28 @@
filterQuery.value.status = "status=Published",
await getLoadsPublished(filterQuery.value);
}
const currentLoad = ref(null);
const handleSetCurrentLoad = (load) => {
console.log(load);
currentLoad.value = load
}
const handleResetCurrentLoad = () => {
console.log('se resear');
currentLoad.value = null
}
</script>
<template>
<h2 class="title mb-5">Buscar cargas</h2>
<MakeProposalModal
v-if="currentLoad"
:load="currentLoad"
@reset-load="handleResetCurrentLoad"
/>
<div class="card-filters">
<div class="d-flex mb-2">
<input class="form-control me-2" type="search" name="" placeholder="Buscar embarcador" id="" @:input="search()" v-model="query" aria-label="Search">
@@ -150,6 +169,7 @@
v-for="load in loads"
:load="load"
:read-only="true"
@set-load="handleSetCurrentLoad(load)"
/>
<CardEmpty
v-else

3
src/views/TrackingLoadView.vue
View File

@@ -6,7 +6,7 @@
import CardLoad from '../components/CardLoad.vue';
import useDirectionsRender from '../composables/useDirectionRender';
import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map';
import CardEmpty from '../components/CardEmpty.vue';
import CardEmpty from '../components/CardEmpty.vue';
const isLoading = ref(true);
const loadStore = useLoadsStore();
@@ -19,6 +19,7 @@ import CardEmpty from '../components/CardEmpty.vue';
const originCoords = ref(null);
const destinationCoords = ref(null);
const isLoadActive = ref(false);
const windowWidth = ref(window.innerWidth);
onMounted(() => {
window.addEventListener('resize', handleResize);