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

add: translation in direction & loads

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-05-30 20:59:46 -06:00
parent 8f33177dad
commit 2de6b5b4fd
9 changed files with 290 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/CardLoad.vue
View File

@@ -1,13 +1,12 @@
<script setup>
import { RouterLink, useRouter } from 'vue-router';
import { getDateMonthDay } from '../helpers/date_formats';
import { getStatusPublished } from '../helpers/status';
import { getStatusLoad } from '../helpers/status';
import { useLoadsStore } from '../stores/loads';
import Swal from 'sweetalert2'
import { useAuthStore } from '../stores/auth';
import { useI18n } from 'vue-i18n';
const router = useRouter();
const loadsStore = useLoadsStore();
const authStore = useAuthStore();
@@ -23,8 +22,7 @@
}
});
console.log(props.load)
const { t } = useI18n()
defineEmits(['set-load'])
@@ -35,18 +33,18 @@
const handleDeleteLoad = async() => {
Swal.fire({
title: 'Eliminar carga!',
text: '¿Estás seguro de eliminar esta carga?',
title: t('loads.titleDel'),
text: t('loads.textDel'),
icon: 'warning',
showCancelButton: true,
cancelButtonColor: "#d33",
confirmButtonText: 'Eliminar',
cancelButtonText: 'Cancelar',
confirmButtonText: t('buttons.delete'),
cancelButtonText: t('buttons.cancel'),
}).then(async(result) => {
if(result.isConfirmed) {
Swal.fire({
title: 'Por favor espere!',
html: 'Eliminando carga...',// add html attribute if you want or remove
title: t('messages.loading'),
html: t('loads.loadingDel') + '...',// add html attribute if you want or remove
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading()
@@ -56,14 +54,14 @@
if(resp != null) {
loadsStore.loads = loadsStore.loads.filter(load => load._id !== props.load._id);
Swal.fire({
title: "Carga eliminada!",
text: "Tu carga ha sido eliminada exitosamente.",
title: t('loads.msgTitleDel'),
text: t('loads.msgDel'),
icon: "success"
});
} else {
Swal.fire({
title: "No eliminado!",
text: "Tu carga no se pudo eliminar, intente más tarde.",
title: t('errors.msgTitleNotDel'),
text: t('loads.msgNotDel'),
icon: "error"
});
}
@@ -111,7 +109,7 @@
<div class="row">
<div class="col-lg-6 col-sm-12">
<p>
<span>Origen: </span>
<span>{{t('loads.origin')}}: </span>
<template v-if="load.origin.company_name"> {{ load.origin.company_name }}, </template>
<template v-if="load.origin.street_address1">{{ load.origin.street_address1 }}, </template>
<template v-if="load.origin.city">{{ load.origin.city }}, </template>
@@ -120,7 +118,7 @@
<template v-if="load.origin.zipcode">{{ load.origin.zipcode }} </template>
</p>
<p>
<span>Destino: </span>
<span>{{t('loads.destination')}}: </span>
<template v-if="load.destination.company_name"> {{ load.destination.company_name }}, </template>
<template v-if="load.destination.street_address1">{{ load.destination.street_address1 }}, </template>
<template v-if="load.destination.city">{{ load.destination.city }}, </template>
@@ -131,26 +129,26 @@
</div>
<div class="col-lg-6 col-sm-12" v-if="authStore.user?.permissions === 'role_shipper'">
<p><span>Status de la publicación:</span> <span>{{ getStatusPublished(load) }}</span></p>
<p :style="{color: getStatusLoad(load).color}"><span>Status de la carga:</span> <span>{{ getStatusLoad(load).status }}</span></p>
<p><span>{{t('loads.postStatus')}}:</span> <span>{{ getStatusPublished(load) }}</span></p>
<p :style="{color: getStatusLoad(load).color}"><span>{{t('loads.loadStatus')}}:</span> <span>{{ getStatusLoad(load).status }}</span></p>
</div>
</div>
<div class="divider"></div>
<br>
<div class="row">
<div class="col-lg-4 col-sm-12">
<p><span>Tipo de camión: </span> {{ load.truck_type }}</p>
<p><span>Peso: </span> {{ load.weight }} KG</p>
<p><span>Fecha de carga: </span> {{ getDateMonthDay(load.est_loading_date) }}</p>
<p><span>{{t('loads.truckType')}}: </span> {{ load.truck_type }}</p>
<p><span>{{t('loads.weight')}}: </span> {{ load.weight }} KG</p>
<p><span>{{t('loads.dateLoad')}}: </span> {{ getDateMonthDay(load.est_loading_date) }}</p>
</div>
<div class="col-lg-4 col-sm-12">
<p><span>Producto: </span> {{ load?.product?.name }}</p>
<p><span>Costo real: </span> {{ load.actual_cost }}</p>
<p><span>Fecha de descarga: </span> {{getDateMonthDay(load.est_unloading_date) }}</p>
<p><span>{{t('loads.product')}}: </span> {{ load?.product?.name }}</p>
<p><span>{{t('loads.cost')}}: </span> {{ load.actual_cost }}</p>
<p><span>{{t('loads.dateDownload')}}: </span> {{getDateMonthDay(load.est_unloading_date) }}</p>
</div>
<div class="col-lg-4 col-sm-12">
<p><span>Segmento: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
<p><span>Código de carga: </span> {{ load.shipment_code }}
<p><span>{{t('global.segment')}}: </span> {{ load.categories?.map((e) => e.name).join(', ') }}</p>
<p><span>{{t('loads.loadCode')}}: </span> {{ load.shipment_code }}
<!-- <RouterLink
v-if="load.load_status !== 'Draft' && !readOnly"
class="tracking-icon"
@@ -166,10 +164,10 @@
</svg>
</span>
</p>
<p><span>Publicación hecha por: </span> {{ load.posted_by_name }}</p>
<p><span>{{t('loads.postBy')}}: </span> {{ load.posted_by_name }}</p>
</div>
</div>
<p v-if="load.notes"><span>Notas adicionales:</span></p>
<p v-if="load.notes"><span>{{ t('loads.note') }}:</span></p>
<div v-if="load.notes" class="box-note">
{{ load.notes }}
</div>
@@ -178,7 +176,7 @@
v-if="(authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager') || authStore.user._id === props.load.posted_by"
class="btn-primary-sm bg-danger"
@click="handleDeleteLoad"
><i class="fa-solid fa-ban clear-sm"></i> Cancelar</button>
><i class="fa-solid fa-ban clear-sm"></i> {{ t('buttons.cancel') }}</button>
<button v-if="load.status !== 'Draft' && load.load_status !== 'Published' && load.load_status !== 'Loading'"
type="button"
data-toggle="modal" data-target="#attachmentModal"
@@ -193,14 +191,14 @@
class="btn-primary-sm"
data-toggle="modal" data-target="#formLoadModal"
@click="openEditModal"
><i class="fa-solid fa-pen-to-square clear-sm"></i> Editar carga</button>
><i class="fa-solid fa-pen-to-square clear-sm"></i> {{t('loads.editLoad')}}</button>
<button
v-if="load.status !== 'Draft'"
class="btn-primary-sm"
@click="openProposalsModal"
data-toggle="modal"
data-target="#proposalsModal"
>#{{ load.no_of_proposals }} Ofertas</button>
>#{{ load.no_of_proposals }} {{t('loads.offers')}}</button>
</div>
<div class="btn-row" v-if="!readOnly && authStore.user?.permissions === 'role_carrier'">
<button
@@ -208,7 +206,7 @@
data-toggle="modal"
data-target="#makeProposalModal"
@click="event => $emit('set-load')"
>Hacer oferta</button>
>{{t('loads.makeOffer')}}</button>
<!-- <button
class="btn-primary-sm"
@click="makeCall('+529889662382')"

52
src/components/CreateLocationModal.vue
View File

@@ -100,7 +100,7 @@
}
let result = 'error';
let action = 'Creado';
let action = t('directory.msgLocationCreated');
loading.value = true;
const localData = {
@@ -110,18 +110,18 @@
if(props.location !== null) {
// Se actualiza
result = await companyStore.updateLocationCompany(props.location._id, branchData, localData);
action = 'actualizada';
action = t('directory.msgLocationUpdate');
} else {
// Se crea
result = await companyStore.createLocationCompany(branchData, localData);
action = 'creada';
action = t('directory.msgLocationCreated');
}
loading.value = false;
if(result === 'success') {
document.getElementById('btnCloseLocationFormModal').click();
Swal.fire({
title: `<strong>Locación ${action} con éxito!</strong>`,
title: `<strong>${action}</strong>`,
icon: 'success'
})
} else {
@@ -135,12 +135,12 @@
const validations = () => {
errors.value = {
branch_name: locationForm.branch_name.length < 2 ? 'Ingrese nombre' : null,
address: locationForm.address.length <= 4 ? 'Ingrese dirección valida' : null,
city: locationForm.city.length <= 0 ? 'Seleccione municipio' : null,
state: locationForm.state.length < 0 ? 'Seleccione estado' : null,
location_type: locationForm.location_type.length <= 0 ? 'Seleccione el tipo de directorio' : null,
zipcode: locationForm.zipcode.length < 5 ? 'Ingrese código postal valido' : null,
branch_name: locationForm.branch_name.length < 2 ? t('errors.nameRequired') : null,
address: locationForm.address.length <= 4 ? t('errors.address') : null,
city: locationForm.city.length <= 0 ? t('errors.city') : null,
state: locationForm.state.length <= 0 ? t('errors.state') : null,
location_type: locationForm.location_type.length <= 0 ? t('errors.directoryType') : null,
zipcode: locationForm.zipcode.length < 5 ? t('errors.zipcode') : null,
};
}
</script>
@@ -162,51 +162,51 @@
<div class="modal-body form-content px-5">
<form @submit.prevent="saveLocation" autocomplete="off" method="post" ref="formRef">
<CustomInput
label="Nombre de la locación*"
:label="t('directory.name') + '*'"
name="name"
v-model:field="locationForm.branch_name"
:filled="false"
:error="errors.branch_name"
/>
<CustomInput
label="Dirección*"
:label="t('directory.address') + '*'"
name="address"
v-model:field="locationForm.address"
:filled="false"
:error="errors.address"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Estado de la locación*</label>
<label class="custom-label">{{ t('directory.state')}}*</label>
<States
v-model="locationForm.state"
/>
<span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Municipio de la locación*</label>
<label class="custom-label">{{ t('directory.city')}}*</label>
<Cities
v-model="locationForm.city"
/>
<span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
</div>
<div class="d-flex flex-column mb-4">
<label class="custom-label" for="role">Tipo de directorio:</label>
<label class="custom-label" for="role">{{ t('directory.typeDirectory')}}</label>
<select
class="custom-input-light"
name="type"
id="type"
v-model="locationForm.location_type"
>
<option disabled value="">-- Seleccionar --</option>
<option disabled value="">-- {{ t('labels.select')}} --</option>
<!-- <option value="owner">Dueño</option> -->
<option value="load">Carga</option>
<option value="download">Descarga</option>
<option value="both">Ambas</option>
<option value="load">{{ t('labels.load')}}</option>
<option value="download">{{ t('labels.download')}}</option>
<option value="both">{{ t('labels.both')}}</option>
</select>
<span class="error-msg" v-if="errors.location_type">{{ errors.location_type }}</span>
</div>
<CustomInput
label="Código postal"
:label="t('directory.zipCode')"
name="zipcode"
type="number"
v-model:field="locationForm.zipcode"
@@ -214,28 +214,28 @@
:error="errors.zipcode"
/>
<CustomInput
label="Teléfono"
:label="t('labels.phone')"
name="phone"
type="number"
v-model:field="locationForm.phone"
:filled="false"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Segmento</label>
<label class="custom-label">{{ t('global.segments') }}</label>
<Segments
v-model="locationForm.categories"
:multiple="true"
/>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Tipo de transporte</label>
<label class="custom-label">{{ t('directory.typeTruck') }}</label>
<TruckTypes
v-model="locationForm.truck_type"
:multiple="true"
/>
</div>
<div class="d-flex flex-column">
<label class="custom-label" for="description">Información adicional:</label>
<label class="custom-label" for="description">{{ t('directory.additionalInfoLocation') }}</label>
<textarea
class="custom-input-light"
name="description"
@@ -248,7 +248,7 @@
<Spiner v-if="loading"/>
<button
v-else
class="btn btn-dark" type="submit">Guardar</button>
class="btn btn-dark" type="submit">{{ t('buttons.save') }}</button>
</div>
</form>
</div>
@@ -257,7 +257,7 @@
type="button"
class="btn btn-dark"
@click="$emit('reset-location')"
data-dismiss="modal">Cerrar</button>
data-dismiss="modal">{{ t('buttons.close') }}</button>
</div>
</div>
</div>

101
src/components/FormLoadModal.vue
View File

@@ -14,6 +14,8 @@
import Swal from 'sweetalert2';
import { useNotificationsStore } from '../stores/notifications';
import { useCompanyStore } from '../stores/company';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
const loadStore = useLoadsStore();
const notyStore = useNotificationsStore();
@@ -37,6 +39,8 @@
const checkLocationDownload = ref(false);
const locationLoadSelected = ref(null)
const locationDownloadSelected = ref(null)
const originRef = ref('')
const destinationRef = ref('')
const errors = ref({
segment: null,
@@ -48,6 +52,7 @@
});
const mapKey = import.meta.env.VITE_MAP_KEY;
const { t } = useI18n()
const clearLoad = () => {
@@ -120,6 +125,7 @@
originCoords.value = await geocodeAddress(startLocation.value);
}
})
watch(destination, async() => {
if(destination.city && destination.state) {
@@ -294,12 +300,12 @@
const resp = await updateLoad(loadData);
if(resp === 'success') {
notyStore.show = 'true';
notyStore.text = 'Carga guardada!'
notyStore.text = t('loads.msgSave');
document.getElementById('btnCloseFormLoadModal').click();
} else {
Swal.fire({
title: "Error!",
text: "No se pudo guardar carga, intente más tarde",
text: t('loads.msgNotSave'),
icon: "error"
});
}
@@ -307,12 +313,12 @@
const validations = () => {
errors.value = {
segment: (!formLoad.segment || formLoad.segment?.length <= 0) ? 'Seleccione segmento' : null,
truckType: formLoad.truckType ? null : 'Seleccione tipo de transporte',
cityOrigin: origin.city ? null : 'Seleccione ciudad',
stateOrigin: origin.state ? null : 'Seleccione estado',
cityDestination: destination.city ? null : 'Seleccione ciudad',
stateDestination: destination.state ? null : 'Seleccione estado',
segment: (!formLoad.segment || formLoad.segment?.length <= 0) ? t('errors.segment') : null,
truckType: formLoad.truckType ? null : t('errors.truck'),
cityOrigin: origin.city ? null : t('errors.city'),
stateOrigin: origin.state ? null : t('errors.state'),
cityDestination: destination.city ? null : t('errors.city'),
stateDestination: destination.state ? null : t('errors.state'),
};
}
@@ -335,12 +341,12 @@
const resp = await updateLoad(loadData);
if(resp === 'success') {
notyStore.show = 'true';
notyStore.text = 'Carga publicada!'
notyStore.text = t('loads.msgPost')
document.getElementById('btnCloseFormLoadModal').click();
} else {
Swal.fire({
title: "Error!",
text: "No se pudo publicar carga, intente más tarde",
text: t('loads.msgNotPost'),
icon: "error"
});
}
@@ -349,6 +355,11 @@
}, 200)
}
const title = computed(() => loadStore.currentLoad == null
? t('loads.create')
: t('loads.edit')
)
</script>
<template>
@@ -356,7 +367,7 @@
<div class="modal-dialog modal-fullscreen modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="title mt-2 mb-3">Crear nueva carga</h2>
<h2 class="title mt-2 mb-3">{{ title }}</h2>
<button
id="btnCloseFormLoadModal"
type="button"
@@ -372,21 +383,21 @@
<div class="form-box">
<div class="form-section">
<div class="mb-4 mt-3">
<label class="custom-label">Segmento*</label>
<label class="custom-label">{{ t('global.segment') }}*</label>
<Segments
v-model="formLoad.segment"
/>
<span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Tipo de transporte*</label>
<label class="custom-label">{{ t('directory.typeTruck') }}*</label>
<TruckTypes
v-model="formLoad.truckType"
/>
<span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span>
</div>
<Custominput
label="Fecha de carga*"
:label="t('loads.dateLoad') + '*'"
type="date"
:filled="false"
name="date-load"
@@ -395,7 +406,7 @@
v-model:field="formLoad.dateLoad"
/>
<Custominput
label="Fecha de descarga*"
:label="t('loads.dateDownload') + '*'"
type="date"
:filled="false"
name="date-download"
@@ -404,7 +415,7 @@
v-model:field="formLoad.dateDownload"
/>
<Custominput
label="Peso de la carga en Kg*"
:label="t('loads.labelWeight') + '*'"
type="number"
:filled="false"
name="weight"
@@ -415,27 +426,27 @@
</div>
<div class="form-section">
<div class="mb-4 mt-3">
<label class="custom-label">Productos</label>
<label class="custom-label">{{ t('loads.product') }}</label>
<Products
v-model="formLoad.terms"
/>
</div>
<Custominput
label="Precio en MXN"
:label="t('loads.labelPrice')"
type="Number"
:filled="false"
name="price"
v-model:field="formLoad.price"
/>
<Custominput
label="Notas"
:label="t('loads.notes')"
type="text"
:filled="false"
name="notes"
v-model:field="formLoad.notes"
/>
<Custominput
label="Publicación hecha por"
:label="t('loads.postBy')"
type="text"
:filled="false"
:readonly="true"
@@ -446,70 +457,70 @@
</div>
<div class="form-box">
<div class="form-section">
<h2>Dirección de origen</h2>
<h2>{{ t('loads.addressOrigin') }}</h2>
<div class="form-check my-4" v-if="loadingLocations === false">
<input class="form-check-input chekmark" type="checkbox" id="directoryOrigin" v-model="checkLocationLoad">
<label class="form-check-label custom-label" for="directoryOrigin">
Usar locaciones registradas
{{ t('loads.checkAddress') }}
</label>
</div>
<div class="d-flex flex-column mb-4" v-if="checkLocationLoad">
<label class="custom-label mb-2" for="locationLoad">Locaciones registradas:</label>
<label class="custom-label mb-2" for="locationLoad">{{ t('loads.locationsRegistered') }}:</label>
<select
class="custom-input-light"
name="locationLoad"
id="locationLoad"
v-model="locationLoadSelected"
>
<option disabled value="">-- Seleccionar locación --</option>
<option disabled value="">-- {{ t('loads.selectedLocation') }} --</option>
<option v-for="loc in companyStore.locationsLoads" :value="loc">{{ loc.branch_name }}</option>
</select>
</div>
<Custominput
label="Nombre locación de carga"
:label="t('loads.addressNameLoad')"
type="text"
:filled="false"
name="name-location-origin"
v-model:field="origin.locationName"
/>
<Custominput
label="Dirección"
:label="t('directory.address')"
type="text"
:filled="false"
name="address-origin"
v-model:field="origin.address"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Ciudad*</label>
<label class="custom-label">{{ t('global.city') }}*</label>
<Cities
v-model="origin.city"
/>
<span class="error-msg" v-if="submited && errors.cityOrigin">{{ errors.cityOrigin }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Estado*</label>
<label class="custom-label">{{ t('global.state') }}*</label>
<States
v-model="origin.state"
/>
<span class="error-msg" v-if="submited && errors.stateOrigin">{{ errors.stateOrigin }}</span>
</div>
<Custominput
label="País"
:label="t('global.country')"
type="text"
:filled="false"
name="country-origin"
v-model:field="origin.country"
/>
<Custominput
label="Código Postal"
:label="t('directory.zipCode')"
type="text"
:filled="false"
name="postalCode-origin"
v-model:field="origin.postalCode"
/>
<Custominput
label="Punto de referencia"
:label="t('global.ref')"
type="text"
:filled="false"
name="ref-origin"
@@ -517,69 +528,69 @@
/>
</div>
<div class="form-section">
<h2>Dirección de destino</h2>
<h2>{{ t('loads.addressDestination') }}</h2>
<div class="form-check my-4" v-if="loadingLocations === false">
<input class="form-check-input chekmark" type="checkbox" id="directoryDestination" v-model="checkLocationDownload">
<label class="form-check-label custom-label" for="directoryDestination">
Usar locaciones registradas
{{ t('loads.checkAddress') }}
</label>
</div>
<div class="d-flex flex-column mb-4" v-if="checkLocationDownload">
<label class="custom-label mb-2" for="locationDownload">Locaciones registradas:</label>
<label class="custom-label mb-2" for="locationDownload">{{ t('loads.locationsRegistered') }}:</label>
<select
class="custom-input-light"
name="locationDownload"
id="locationDownload"
v-model="locationDownloadSelected"
>
<option disabled value="">-- Seleccionar locación --</option>
<option disabled value="">-- {{ t('loads.selectedLocation') }} --</option>
<option v-for="loc in companyStore.locationsLoads" :value="loc">{{ loc.branch_name }}</option>
</select>
</div>
<Custominput
label="Nombre locación de descarga"
:label="t('loads.addressNameDownload')"
type="text"
:filled="false"
name="name-location-destination"
v-model:field="destination.locationName"
/>
<Custominput
label="Dirección"
:label="t('directory.address')"
type="text"
:filled="false"
name="address-destination"
v-model:field="destination.address"
/>
<div class="mb-4 mt-3">
<label class="custom-label">Ciudad*</label>
<label class="custom-label">{{t('global.city')}}*</label>
<Cities
v-model="destination.city"
/>
<span class="error-msg" v-if="submited && errors.cityDestination">{{ errors.cityDestination }}</span>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">Estado*</label>
<label class="custom-label">{{t('global.state')}}*</label>
<States
v-model="destination.state"
/>
<span class="error-msg" v-if="submited && errors.stateDestination">{{ errors.stateDestination }}</span>
</div>
<Custominput
label="País"
:label="t('global.country')"
type="text"
:filled="false"
name="country-destination"
v-model:field="destination.country"
/>
<Custominput
label="Código Postal"
:label="t('directory.zipCode')"
type="text"
:filled="false"
name="postalCode-destination"
v-model:field="destination.postalCode"
/>
<Custominput
label="Punto de referencia"
:label="t('global.ref')"
type="text"
:filled="false"
name="ref-destination"
@@ -627,17 +638,17 @@
type="button"
class="btn btn-dark"
@click="clearLoad"
data-dismiss="modal">Cerrar</button>
data-dismiss="modal">{{ t('buttons.close') }}</button>
<button
type="button"
class="btn btn-dark"
@click="handleSave"
>Guardar</button>
>{{ t('buttons.save') }}</button>
<button
type="submit"
@click.prevent="handlePostLoad"
class="btn-primary-sm radius-sm"
>Publicar</button>
>{{ t('buttons.post') }}</button>
</div>
</div>
</div>

2
src/components/Pagination.vue
View File

@@ -34,7 +34,7 @@ import { onMounted, ref } from 'vue';
<template>
<div class="pagination" v-if="totalPage > 1">
<h4>Paginación</h4>
<h4>{{$t('global.pagination')}}</h4>
<div class="box-pages" v-if="totalPage > 1">
<div
v-for="p in totalPage"