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

add: finish translation feature

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-06-08 17:26:02 -06:00
parent b32b2c310c
commit bb30443faa
15 changed files with 269 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/CardProposal.vue
View File

@@ -1,10 +1,11 @@
<script setup>
import Swal from 'sweetalert2';
import { getDateMonthDay } from '../helpers/date_formats';
import { getDateMonthDay } from '../helpers/date_formats';
import { getStatusLoad } from '../helpers/status';
import { useCompanyStore } from '../stores/company';
import { useAuthStore } from '../stores/auth';
import { useAuthStore } from '../stores/auth';
import { useI18n } from 'vue-i18n';
const props = defineProps({
proposal: {
type: Object,
@@ -12,24 +13,27 @@ import { useAuthStore } from '../stores/auth';
}
})
console.log(props.proposal)
const companyStore = useCompanyStore();
const authStore = useAuthStore();
const { t, locale } = useI18n();
const handleWithdrawnProposal = async() => {
Swal.fire({
title: 'Retirar oferta!',
text: '¿Estás seguro de retirar esta oferta?',
title: t('proposals.titleRetireModal'),
text: t('proposals.textRetireModal'),
icon: 'warning',
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonText: 'Si, Retirar',
confirmButtonText: t('proposals.confirmRetire'),
cancelButtonText: 'No',
}).then(async(result) => {
if(result.isConfirmed) {
Swal.fire({
title: 'Por favor espere!',
html: 'Retirando oferta...',// add html attribute if you want or remove
title: t('messages.loading'),
html: t('proposals.loadingRetired') + '...',// add html attribute if you want or remove
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading()
@@ -51,14 +55,14 @@ import { useAuthStore } from '../stores/auth';
if(resp != null) {
Swal.fire({
title: "Oferta retirada!",
text: "Tu oferta ha sido retirada exitosamente.",
title: t('proposals.msgTitleRetire'),
text: t('proposals.msgCancel'),
icon: "success"
});
} else {
Swal.fire({
title: "Oferta no retirada!",
text: "Tu oferta no se pudo retirar, intente más tarde.",
title: "Error",
text: t('proposals.msgNotCancel'),
icon: "error"
});
}
@@ -75,26 +79,26 @@ import { useAuthStore } from '../stores/auth';
<br>
<div class="box-proposal">
<div class="">
<p v-if="proposal.vehicle"><span>Código:</span> {{proposal.vehicle.vehicle_code}}</p>
<p v-if="proposal.vehicle"><span>Segmento:</span> {{proposal._categories}}</p>
<p v-if="proposal.vehicle"><span>Tipo de transporte:</span> {{proposal.vehicle.truck_type}}</p>
<p v-if="proposal.vehicle"><span>Fecha de publicación:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
<p v-if="proposal.vehicle"><span>Fecha dispobible:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
<p v-if="proposal.vehicle"><span>Disponible en:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
<p v-if="proposal.vehicle"><span>Destino:</span> {{proposal.vehicle.destino}}</p>
<p v-if="proposal.vehicle"><span>Placas remolque 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
<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>
<p v-if="proposal.vehicle"><span>{{ t('labels.codeId') }}:</span> {{proposal.vehicle.vehicle_code}}</p>
<p v-if="proposal.vehicle"><span>{{ t('global.segment') }}:</span> {{proposal.load.categories?.map((e) => e.name).join(', ')}}</p>
<p v-if="proposal.vehicle"><span>{{ t('directory.typeTruck') }}:</span> {{proposal.vehicle.truck_type}}</p>
<p v-if="proposal.vehicle"><span>{{ t('labels.datePublished') }}:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
<p v-if="proposal.vehicle"><span>{{ t('labels.dateAvailable') }}:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
<p v-if="proposal.vehicle"><span>{{ t('vehicles.availableIn') }}:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
<p v-if="proposal.vehicle"><span>{{ t('loads.destination') }}:</span> {{proposal.vehicle.destino}}</p>
<p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
<p v-if="proposal.vehicle"><span>{{ t('vehicles.trailerPlates') }} 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
<p v-if="proposal.vehicle" :style="{color: getStatusLoad(proposal.load, locale).color}"><span>{{ t('loads.loadStatus') }}:</span> {{ getStatusLoad(proposal.load, locale).status}}</p>
</div>
<div class="">
<p v-if="proposal.load"> Código de carga:
<p v-if="proposal.load"> {{ t('loads.loadCode') }}:
<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>
<p v-if="proposal._driver">{{ t('labels.operator') }}: {{proposal._driver}}</p>
</div>
</div>
<div class="btn-row">
@@ -104,7 +108,7 @@ import { useAuthStore } from '../stores/auth';
><i class="fa-solid fa-ban"></i> Retirar</button> -->
<div v-if="proposal.is_withdrawn" class="indicator-cancel">
<i class="fa-solid fa-ban"></i>
Retirado
{{ t('proposals.retired') }}
</div>
<button
v-else
@@ -114,14 +118,14 @@ import { useAuthStore } from '../stores/auth';
@click="handleWithdrawnProposal"
>
<i class="fa-solid fa-ban"></i>
Retirar
{{ t('proposals.withdraw') }}
</button>
<button
v-if="authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager'"
class="btn-primary-sm radius-sm"
@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>
><i class="fa-solid fa-pen-to-square"></i> {{ t('buttons.edit') }}</button>
</div>
</div>
</template>

12
src/components/CardVehicle.vue
View File

@@ -21,8 +21,8 @@
const handleDeleteVehicle = async() => {
Swal.fire({
title: `Eliminar vehiculo "${props.vehicle.vehicle_code}""`,
text: '¿Estás seguro de eliminar este vehiculo?',
title: `${t('vehicles.titleDel')} "${props.vehicle.vehicle_code}""`,
text: t('vehicles.textDel'),
icon: 'warning',
showCancelButton: true,
cancelButtonColor: "#d33",
@@ -32,7 +32,7 @@
if(result.isConfirmed) {
Swal.fire({
title: t('messages.loading'),
html: 'Eliminando vehiculo...',// add html attribute if you want or remove
html: t('vehicles.loadingDel') + '...',// add html attribute if you want or remove
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading()
@@ -43,14 +43,14 @@
if(resp != null) {
Swal.fire({
title: "vehiculo eliminado!",
text: "Tu vehiculo ha sido eliminado exitosamente.",
title: t('vehicles.msgTitleDel'),
text: t('vehicles.msgDel'),
icon: "success"
});
} else {
Swal.fire({
title: "Error!",
text: "Tu vehiculo no se pudo eliminar, intente más tarde.",
text: t('vehicles.msgNotDel'),
icon: "error"
});
}

51
src/components/CreateVehicleModal.vue
View File

@@ -9,6 +9,7 @@
import Spiner from './ui/Spiner.vue';
import Swal from 'sweetalert2';
import { useVehiclesStore } from '../stores/vehicles';
import { useI18n } from 'vue-i18n';
const props = defineProps({
vehicle: {
@@ -17,8 +18,6 @@
}
});
console.log(props.vehicle);
defineEmits(['reset-vehicle']);
const initState = {
@@ -70,9 +69,11 @@
const loading = ref(false);
const title = computed(() => {
return (props.vehicle) ? 'Editar vehiculo' : 'Agregar vehiculo';
return (props.vehicle) ? t('vehicles.modalEdit') : t('vehicles.addVehicle');
});
const { t } = useI18n()
const handleSaveVehicle = async() => {
validations();
@@ -94,20 +95,20 @@
};
let localData = {};
let result = 'error';
let action = 'Creado';
let action = t('vehicles.msgVehicleCreated');
loading.value = true;
if(props.vehicle) {
localData = {
categories: vehicleForm.categories,
driver: props.vehicle.driver
};
action = 'actualizado';
action = t('vehicles.msgVehicleUpdate');
result = await vehicleStore.updateVehicleCompany(props.vehicle._id, vehicleData, localData);
} else {
localData = {
categories: vehicleForm.categories
}
action = 'añadido';
action = t('vehicles.msgVehicleCreated');
result = await vehicleStore.createVehicleCompany(vehicleData, localData);
}
@@ -115,7 +116,7 @@
if(result === 'success') {
document.getElementById('btnClosecreateVehicleModal').click();
Swal.fire({
title: `<strong>Vehiculo ${action} con éxito!</strong>`,
title: action,
icon: 'success'
})
} else {
@@ -128,12 +129,12 @@
const validations = () => {
errors.value = {
truck_type: (!vehicleForm.truck_type) ? 'Seleccione tipo de transporte' : null,
categories: (!vehicleForm.categories) ? 'Seleccione al menos un segmento' : null,
vehicle_number: (!vehicleForm.vehicle_number) ? 'Campo es requerido' : null,
state: (!vehicleForm.state) ? 'Seleccione estado' : null,
city: (!vehicleForm.city) ? 'Seleccione municipio' : null,
destino: (!vehicleForm.destino) ? 'Ingrese destino' : null,
truck_type: (!vehicleForm.truck_type) ? t('errors.truck') : null,
categories: (!vehicleForm.categories) ? t('errors.segments') : null,
vehicle_number: (!vehicleForm.vehicle_number) ? t('errors.required') : null,
state: (!vehicleForm.state) ? t('errors.state') : null,
city: (!vehicleForm.city) ? t('errors.city') : null,
destino: (!vehicleForm.destino) ? t('errors.destination') : null,
};
}
</script>
@@ -156,14 +157,14 @@
<form @submit.prevent="handleSaveVehicle" autocomplete="off" class="vehicle-form">
<div class="row mt-4">
<div class="col-lg-6 col-12">
<label class="custom-label">Tipo de Transporte*</label>
<label class="custom-label">{{ t('directory.typeTruck') }}*</label>
<TruckTypes
v-model="vehicleForm.truck_type"
/>
<span class="error-msg" v-if="errors.truck_type">{{ errors.truck_type }}</span>
</div>
<div class="col-lg-6 col-12">
<label class="custom-label">Segmento del transporte*</label>
<label class="custom-label">{{ t('vehicles.segments') }}*</label>
<Segments
v-model="vehicleForm.categories"
:multiple="true"
@@ -174,7 +175,7 @@
<div class="row mt-4">
<div class="col-lg-6 col-12">
<CustomInput
label="Número de Serie*"
:label="t('vehicles.serialNumber') + '*'"
name="vehicle_number"
v-model:field="vehicleForm.vehicle_number"
:filled="false"
@@ -183,7 +184,7 @@
</div>
<div class="col-lg-6 col-12">
<CustomInput
label="Placas Tracto Camión"
:label="t('vehicles.truckPlates')"
name="circulation_serial_number"
v-model:field="vehicleForm.circulation_serial_number"
:filled="false"
@@ -193,7 +194,7 @@
<div class="row">
<div class="col-lg-6 col-12">
<CustomInput
label="Placas Remolque 1"
:label="t('vehicles.trailerPlates') + ' 1'"
name="trailer_plate_1"
v-model:field="vehicleForm.trailer_plate_1"
:filled="false"
@@ -201,7 +202,7 @@
</div>
<div class="col-lg-6 col-12">
<CustomInput
label="Placas Remolque 1"
:label="t('vehicles.trailerPlates') + ' 2'"
name="trailer_plate_2"
v-model:field="vehicleForm.trailer_plate_2"
:filled="false"
@@ -210,14 +211,14 @@
</div>
<div class="row">
<div class="col-lg-6 col-12">
<label class="custom-label">Base de carga por Estado*</label>
<label class="custom-label">{{ t('labels.stateBase') }}*</label>
<States
v-model="vehicleForm.state"
/>
<span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
</div>
<div class="col-lg-6 col-12">
<label class="custom-label">Base de Carga por Municipio*</label>
<label class="custom-label">{{ t('labels.cityBase') }}*</label>
<Cities
v-model="vehicleForm.city"
/>
@@ -226,7 +227,7 @@
</div>
<div class="col-lg-6 col-12 mt-4">
<CustomInput
label="Destino*"
:label="t('loads.destination') + '*'"
type="text"
:filled="false"
name="destino"
@@ -235,12 +236,12 @@
/>
</div>
<div class="d-flex flex-column mt-4">
<label class="custom-label" for="notes">Información Adicional del Transporte:</label>
<label class="custom-label" for="notes">{{ t('vehicles.additionalInfoVehicle') }}:</label>
<textarea
class="custom-input-light"
name="notes"
id="notes"
placeholder="Escribe aqui..."
:placeholder=" t('labels.writeHere') + '...'"
v-model="vehicleForm.notes"
></textarea>
</div>
@@ -248,7 +249,7 @@
<Spiner v-if="loading"/>
<button
v-else
class="btn-primary-sm radius-sm" type="submit">Guardar</button>
class="btn-primary-sm radius-sm" type="submit">{{ t('buttons.save') }}</button>
</div>
</form>
</div>

19
src/components/DriverVehicleModal.vue
View File

@@ -4,6 +4,7 @@
import Spiner from './ui/Spiner.vue';
import { useVehiclesStore } from '../stores/vehicles';
import Swal from 'sweetalert2';
import { useI18n } from 'vue-i18n';
const props = defineProps({
vehicle: {
@@ -17,6 +18,8 @@
const companyStore = useCompanyStore();
const vehicleStore = useVehiclesStore();
const { t } = useI18n()
const driverSelected = ref(null);
const drivers = ref([]);
const error = ref(null)
@@ -32,7 +35,7 @@
const handleSetDriver = async() => {
if(driverSelected.value === null) {
error.value = 'Seleccione un conductor';
error.value = t('errors.driver');
return
}
@@ -63,7 +66,7 @@
if(result2 === 'success' ){
document.getElementById('btnCloseeditDriverVehicle').click();
Swal.fire({
title: `<strong>Driver asignado con éxito!</strong>`,
title: `<strong>${t('vehicles.msgAssigedDriver')}</strong>`,
icon: 'success'
});
} else {
@@ -93,7 +96,7 @@
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="title mt-2 mb-3">Cambiar conductor</h2>
<h2 class="title mt-2 mb-3">{{ t('vehicles.changeDriver') }}</h2>
<button
id="btnCloseeditDriverVehicle"
type="button"
@@ -107,17 +110,17 @@
</div>
<div class="modal-body view-proposals">
<div class="custom-selected-field">
<label class="custom-label my-2" for="driver">Conductor asignado:</label>
<label class="custom-label my-2" for="driver">{{ t('vehicles.assignedDriver') }}:</label>
<select
class="custom-input-light"
name="driver"
id="driver"
v-model="driverSelected"
>
<option disabled value="">-- Seleccionar conductor --</option>
<option disabled value="">-- {{ t('vehicles.selectDriver') }} --</option>
<option v-for="driver in drivers" :value="driver">{{driver.first_name}} {{ driver.last_name }}</option>
</select>
<span class="error-msg" v-if="error">{{ error }}</span>
<span class="error-msg mt-2" v-if="error">{{ error }}</span>
</div>
</div>
<div class="modal-footer">
@@ -128,12 +131,12 @@
class="btn btn-dark radius-sm"
data-dismiss="modal"
@click="$emit('reset-vehicle')"
>Cancelar</button>
>{{ t('buttons.cancel') }}</button>
<button
class="btn-primary-sm radius-sm"
@click="handleSetDriver"
>
<span class="clear-xsm">Guardar</span>
<span class="clear-xsm">{{ t('buttons.save') }}</span>
</button>
</div>
</div>

11
src/components/Header.vue
View File

@@ -79,12 +79,10 @@ const closePopup = () => {
<img src="/images/logo-eta.png" class="logo" alt="Eta Viaporte" >
</RouterLink>
<div class="box-register">
<p class="title-header">Tablero de <span class="title-main">Embarques</span> y <span class="title-main">Transportes</span></p>
<p class="title-header">Tablero de <span class="title-main">Embarques</span> y <span class="title-main">Transportes</span></p>
</div>
<a @click="openPopup = true" class="lang"><i class="fa-solid fa-globe"></i> {{ locale }}</a>
</div>
<a
@click="openPopup = true"
class="lang"><i class="fa-solid fa-globe"></i> {{ locale }}</a>
</div>
</template>
@@ -108,10 +106,13 @@ const closePopup = () => {
display: flex;
align-items: center;
align-content: center;
width: 100%;
/* width: 65%; */
}
.box-register{
margin-left: 24px;
display: flex;
flex: 1;
}
.title-header{
font-size: 1.8rem;
@@ -180,7 +181,7 @@ const closePopup = () => {
}
@media (max-width: 568px) {
.logo{
height: 80px;
height: 60px;
}
.title-header{
font-size: 1rem;

16
src/components/LoadDetailModal.vue
View File

@@ -6,7 +6,8 @@
import useDirectionsRender from '../composables/useDirectionRender';
import Cardload from './CardLoad.vue';
import { useLoadsStore } from '../stores/loads';
import { useNotificationsStore } from '../stores/notifications';
import { useNotificationsStore } from '../stores/notifications';
import { useI18n } from 'vue-i18n';
const mapKey = import.meta.env.VITE_MAP_KEY;
@@ -22,6 +23,7 @@ import { useNotificationsStore } from '../stores/notifications';
const isLoadActive = ref(false);
const { getDirections, geocodeAddress } = useDirectionsRender()
const { t } = useI18n();
const props = defineProps({
proposal: {
@@ -59,7 +61,7 @@ import { useNotificationsStore } from '../stores/notifications';
if(addressOrigin.lat && addressOrigin.lng) {
originCoords.value = {lat: Number.parseFloat(addressOrigin.lat), lng: Number.parseFloat(addressOrigin.lng)};
} else {
console.log('No hay coords origin')
// console.log('No hay coords origin')
let startLocation = addressOrigin.street_address1 + ', ' + addressOrigin.city + ', ' + addressOrigin.state + ', ' + addressOrigin.country + ', ' +addressOrigin.zipcode;
originCoords.value = await geocodeAddress(startLocation);
}
@@ -67,7 +69,7 @@ import { useNotificationsStore } from '../stores/notifications';
if(addressDestination.lat && addressDestination.lng) {
destinationCoords.value = {lat: Number.parseFloat(addressDestination.lat), lng: Number.parseFloat(addressDestination.lng)};
} else {
console.log('No hay coords destinatiom')
// console.log('No hay coords destinatiom')
let endLocation = addressDestination.street_address1 + ', ' + addressDestination.city + ', ' + addressDestination.state + ', ' + addressDestination.country + ', ' +addressDestination.zipcode;
destinationCoords.value = await geocodeAddress(endLocation);
}
@@ -100,7 +102,7 @@ import { useNotificationsStore } from '../stores/notifications';
}
} catch (error) {
notyStore.$patch({
text : 'No se pudo cargar mapa',
text : t('errors.map'),
show : true,
error: true
});
@@ -128,7 +130,7 @@ import { useNotificationsStore } from '../stores/notifications';
<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>
<h2 class="title mt-2 mb-3">{{ t('loads.loadDetails') }}</h2>
<button
id="btnCloseloadDetailModal"
type="button"
@@ -186,7 +188,7 @@ import { useNotificationsStore } from '../stores/notifications';
/>
</GoogleMap>
</div>
<CardEmpty v-else text="No hay información disponible"/>
<CardEmpty v-else :text="t('loads.noInfo')"/>
</div>
</div>
<div class="modal-footer">
@@ -195,7 +197,7 @@ import { useNotificationsStore } from '../stores/notifications';
class="btn btn-dark"
data-dismiss="modal"
@click="$emit('reset-proposal')"
>Cerrar</button>
>{{ t('buttons.close') }}</button>
</div>
</div>
</div>

24
src/components/MakeProposalModal.vue
View File

@@ -10,6 +10,7 @@
import { useVehiclesStore } from '../stores/vehicles';
// import { saveProposal } from '../services/vehicles'
import Swal from 'sweetalert2';
import { useI18n } from 'vue-i18n';
const mapKey = import.meta.env.VITE_MAP_KEY;
@@ -46,6 +47,7 @@
defineEmits(['reset-load'])
const { t } = useI18n()
onMounted(() => {
window.addEventListener('resize', handleResize);
@@ -86,13 +88,13 @@
const handleSumit = async() => {
if(form.vehicle === ""){
msgError.value = 'Selecciona vehiculo para continuar';
msgError.value = t('errors.vehicle');
setTimeout(() => {
msgError.value = '';
}, 5000);
return;
} else if (form.comments.trim().length <= 0) {
msgError.value = 'Agrega un comentario';
msgError.value = t('errors.comment');
setTimeout(() => {
msgError.value = '';
}, 5000);
@@ -111,7 +113,7 @@
load : props.load._id
}
loadingSubmit.value = true;
action = 'creada';
action = t('proposals.msgOffertDone');
result = await companyStore.createPropsal(formData);
} else {
let formData = {
@@ -127,14 +129,14 @@
_driver: vehicleSelected?.driver.first_name + ' ' + vehicleSelected?.driver.last_name
}
loadingSubmit.value = true;
action = 'actualizada'
action = t('proposals.msgOffertUpdate')
result = await companyStore.updatePropsalLoad(props.proposal._id, formData, localData);
}
if(result === 'success') {
document.getElementById('btnClosemakeProposalModal').click();
Swal.fire({
title: `<strong>Oferta ${action} con éxito!</strong>`,
title: `<strong>${action}</strong>`,
icon: 'success'
})
} else {
@@ -146,8 +148,8 @@
loadingSubmit.value = false;
}
const title = computed(() => (props.proposal) ? 'Modificar oferta' : 'Realizar oferta');
const btnSubmit = computed(() => (props.proposal) ? 'Guardar' : 'Enviar');
const title = computed(() => (props.proposal) ? t('proposals.modOffer') : t('proposals.makeOffer'));
const btnSubmit = computed(() => (props.proposal) ? t('buttons.save') : t('buttons.send'));
</script>
<template>
@@ -174,19 +176,19 @@
<form @submit.prevent="handleSumit" class="box-form mb-4">
<BadgeError :msg="msgError"/>
<div class="custom-selected-field">
<label class="custom-label" for="vehicle">Vehiculo:</label>
<label class="custom-label" for="vehicle">{{ t('labels.vehicle') }}:</label>
<select
class="custom-input-light"
name="vehicle"
id="vehicle"
v-model="form.vehicle"
>
<option disabled value="">-- Seleccionar vehículo --</option>
<option disabled value="">-- {{ t('proposals.selectVehicle') }} --</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>
<label class="custom-label" for="comment">{{ t('labels.comment') }}:</label>
<textarea
class="custom-input-light"
name="comment"
@@ -247,7 +249,7 @@
class="btn btn-dark"
data-dismiss="modal"
@click="$emit('reset-load')"
>Cerrar</button>
>{{ t('buttons.close') }}</button>
</div>
</div>
</div>

33
src/components/StatusVehicleModal.vue
View File

@@ -7,6 +7,7 @@
import States from './ui/States.vue';
import Cities from './ui/Cities.vue';
import Swal from 'sweetalert2';
import { useI18n } from 'vue-i18n';
const props = defineProps({
vehicle: {
@@ -28,6 +29,8 @@
defineEmits(['reset-vehicle']);
const { t } = useI18n()
const formAvailiable = reactive({
available_date: new Date(),
destino: '',
@@ -43,9 +46,9 @@
const handleSetStatusVehicle = async() => {
let vehicleData;
console.log(statusSelected.value);
// console.log(statusSelected.value);
if(statusSelected.value === 'Availiable') {
console.log('check validations');
// console.log('check validations');
validations();
if(errors.value.city || errors.value.state || errors.value.destino ) return;
vehicleData = {
@@ -71,7 +74,7 @@
if(result === 'success') {
document.getElementById('btnCloseeditStatusVehicle').click();
Swal.fire({
title: `<strong>Status del vehiculo actualizado con éxito!</strong>`,
title: `<strong>${t('vehicles.msgStatusUpdate')}</strong>`,
icon: 'success'
})
} else {
@@ -84,9 +87,9 @@
const validations = () => {
errors.value = {
state: (!formAvailiable.state) ? 'Seleccione estado' : null,
city: (!formAvailiable.city) ? 'Seleccione municipio' : null,
destino: (!formAvailiable.destino) ? 'Ingrese destino' : null,
state: (!formAvailiable.state) ? t('errors.state') : null,
city: (!formAvailiable.city) ? t('errors.city') : null,
destino: (!formAvailiable.destino) ? t('errors.destination') : null,
};
}
@@ -97,7 +100,7 @@
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="title mt-2 mb-3">Cambiar status vehiculo</h2>
<h2 class="title mt-2 mb-3">{{ t('vehicles.changeStatus') }}</h2>
<button
id="btnCloseeditStatusVehicle"
type="button"
@@ -112,17 +115,17 @@
<div class="modal-body view-proposals">
<form @submit.prevent="handleSetStatusVehicle">
<div class="custom-selected-field">
<h4 class="custom-label my-3">Status del vehiculo</h4>
<h4 class="custom-label my-3">{{ t('vehicles.statusVehicle') }}</h4>
<div class="d-flex">
<CustomRadioInput
value="Booked"
label="Reservado"
:label="t('vehicles.reserved')"
:name="'status-vehicle' + vehicle._id"
v-model:typeselected="statusSelected"
/>
<CustomRadioInput
value="Availiable"
label="Disponible"
:label="t('vehicles.available')"
:name="'status-vehicle' + vehicle._id"
v-model:typeselected="statusSelected"
/>
@@ -130,28 +133,28 @@
</div>
<div v-if="statusSelected === 'Availiable'">
<CustomInput
label="Fecha de carga*"
:label="t('loads.dateLoad') + '*'"
type="date"
:filled="false"
name="date-load"
v-model:field="formAvailiable.available_date"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Base de carga por Estado</label>
<label class="custom-label">{{ t('labels.stateBase') }}</label>
<States
v-model="formAvailiable.state"
/>
<span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Base de Carga por Municipio</label>
<label class="custom-label">{{ t('labels.cityBase') }}</label>
<Cities
v-model="formAvailiable.city"
/>
<span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
</div>
<CustomInput
label="Destino*"
:label="t('loads.destination') + '*'"
type="text"
:filled="false"
name="destino"
@@ -166,7 +169,7 @@
class="btn-primary-sm radius-sm"
type="submit"
>
<span class="clear-xsm">Cuardar</span>
<span class="clear-xsm">{{ t('buttons.save') }}</span>
</button>
</div>
</form>