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

52
src/components/CreateLocationModal.vue
View File

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

101
src/components/FormLoadModal.vue
View File

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

2
src/components/Pagination.vue
View File

@@ -34,7 +34,7 @@ import { onMounted, ref } from 'vue';
<template> <template>
<div class="pagination" v-if="totalPage > 1"> <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 class="box-pages" v-if="totalPage > 1">
<div <div
v-for="p in totalPage" v-for="p in totalPage"

75
src/i18n/en.js
View File

@@ -48,6 +48,7 @@ const en = {
select: 'Select', select: 'Select',
additionalInformation: 'Additional information', additionalInformation: 'Additional information',
writeHere: 'Write here', writeHere: 'Write here',
create: 'Create',
}, },
buttons: { buttons: {
enter: "Enter here", enter: "Enter here",
@@ -66,7 +67,8 @@ const en = {
edit: "Edit", edit: "Edit",
delete: "Delete", delete: "Delete",
cancel: "Cancel", cancel: "Cancel",
add: 'Add' add: 'Add',
post: 'Post'
}, },
errors: { errors: {
requireds: "All fields required", requireds: "All fields required",
@@ -80,11 +82,19 @@ const en = {
states: 'Select at least one state', states: 'Select at least one state',
cities: 'Select at least one city', cities: 'Select at least one city',
trucks: 'Select at least one type of transport', trucks: 'Select at least one type of transport',
truck: 'Select type of transport',
segment: 'Select segment',
name: 'Enter valid name(s)', name: 'Enter valid name(s)',
lastname: 'Enter valid last name(s)', lastname: 'Enter valid last name(s)',
phone: 'Enter valid phone number', phone: 'Enter valid phone number',
generic: "Something went wrong, try again later", generic: "Something went wrong, try again later",
msgTitleNotDel: 'Not removed!' msgTitleNotDel: 'Not removed!',
nameRequired: 'Enter name',
address: 'Enter valid address',
city: 'Select municipality',
state: 'Select state',
directoryType: 'select directory type',
zipcode: 'Enter valid zip code',
}, },
messages: { messages: {
sendCode: 'We send you a code to the email, entered!', sendCode: 'We send you a code to the email, entered!',
@@ -128,8 +138,14 @@ const en = {
calculator: 'Calculator', calculator: 'Calculator',
cities: 'Cities', cities: 'Cities',
states: 'States', states: 'States',
city: 'City',
state: 'State',
ref: 'Reference point',
country: 'Country',
segments: 'Segments', segments: 'Segments',
notification: "Notification" segment: 'Segment',
notification: "Notification",
pagination: 'Pagination'
}, },
login: { login: {
title: 'Sign in', title: 'Sign in',
@@ -178,7 +194,7 @@ const en = {
name: 'Location name', name: 'Location name',
address: 'Address', address: 'Address',
state: 'State of the location', state: 'State of the location',
city: 'Municipality of the location', city: 'City of the location',
typeDirectory: 'Type of directory', typeDirectory: 'Type of directory',
zipCode: 'Zip Code', zipCode: 'Zip Code',
typeTruck: 'Type of transport', typeTruck: 'Type of transport',
@@ -190,7 +206,56 @@ const en = {
loadingDel: 'Deleting location', loadingDel: 'Deleting location',
msgTitleDel: 'Location deleted!', msgTitleDel: 'Location deleted!',
msgDel: 'Your location has been successfully deleted.', msgDel: 'Your location has been successfully deleted.',
msgNotDel: 'Your location could not be deleted, try again later.' msgNotDel: 'Your location could not be deleted, try again later.',
msgEmpty: 'No locations added',
msgLocationUpdate: 'Location updated successfully!',
msgLocationCreated: 'Location created successfully!'
},
loads: {
title: 'My published loads',
history: 'History',
querySearch: 'Name of person who posted',
empty: 'No loads added',
origin: 'Origin',
destination: 'Destination',
postStatus: 'Post status',
loadStatus: 'Load status',
truckType: 'Truck type',
weight: 'Weight',
dateLoad: 'Load date',
dateDownload: 'Download date',
product: 'Product',
cost: 'Actual cost',
loadCode: 'Load code',
postBy: 'Post made by',
editLoad: 'Edit load',
offers: 'Offers',
makeOffer: 'Make offer',
note: 'Additional notes',
create: 'Create new load',
edit: 'Edit load',
labelPrice: 'Price in MXN',
labelWeight: 'Weight of the load in Kg',
notes: 'Notes',
addressOrigin: 'Origin address',
addressDestination: 'Destination address',
checkAddress: 'Use registered locations',
addressNameLoad: 'Load location name',
addressNameDownload: 'Download location name',
locationsRegistered: 'Registered locations',
selectedLocation: 'Select location',
titleDel: 'Delete load!',
textDel: 'Are you sure to delete this load?',
loadingDel: 'Removing load',
msgTitleDel: 'Load removed!',
msgDel: 'Your load has been successfully deleted.',
msgNotDel: '"Your load could not be deleted, please try later.',
msgSave: 'Load saved!',
msgNotSave: '"Could not save upload, try later',
msgPost: 'Load posted!',
msgNotPost: 'Could not post load, please try later'
} }
}; };

71
src/i18n/es.js
View File

@@ -50,6 +50,7 @@ const es = {
select: 'Seleccionar', select: 'Seleccionar',
additionalInformation: 'Información adicional', additionalInformation: 'Información adicional',
writeHere: 'Escribe aqui', writeHere: 'Escribe aqui',
create: 'Crear',
}, },
buttons: { buttons: {
enter: "Ingresa aqui", enter: "Ingresa aqui",
@@ -68,7 +69,8 @@ const es = {
edit: "Editar", edit: "Editar",
delete: "Eliminar", delete: "Eliminar",
cancel: "Cancelar", cancel: "Cancelar",
add: 'Agregar' add: 'Agregar',
post: 'Publicar'
}, },
errors: { errors: {
requireds: 'Todos los campos con obligatorios', requireds: 'Todos los campos con obligatorios',
@@ -82,11 +84,20 @@ const es = {
states: 'Selecciona al menos un estado', states: 'Selecciona al menos un estado',
cities: 'Selecciona al menos un municipio', cities: 'Selecciona al menos un municipio',
trucks: 'Selecciona al menos un tipo de transporte', trucks: 'Selecciona al menos un tipo de transporte',
truck: 'Seleccione tipo de transporte',
segment: 'Seleccione segmento',
name: 'Ingresa nombre(s) valido', name: 'Ingresa nombre(s) valido',
lastname: 'Ingresa apellido(s) valido', lastname: 'Ingresa apellido(s) valido',
phone: 'Ingresa teléfono valido', phone: 'Ingresa teléfono valido',
generic: "Algo salio mal, intente más tarde", generic: "Algo salio mal, intente más tarde",
msgTitleNotDel: 'No eliminado!', msgTitleNotDel: 'No eliminado!',
nameRequired: 'Ingrese nombre',
address: 'Ingrese dirección valida',
city: 'Seleccione ciudad',
state: 'Seleccione estado',
directoryType: 'seleccione el tipo de directorio',
zipcode: 'Ingrese código postal valido',
}, },
messages: { messages: {
sendCode: 'Te enviamos un código al correo, ingresado!', sendCode: 'Te enviamos un código al correo, ingresado!',
@@ -130,8 +141,14 @@ const es = {
calculator: 'Calculadora', calculator: 'Calculadora',
cities: 'Ciudades', cities: 'Ciudades',
states: 'Estados', states: 'Estados',
city: 'Ciudad',
state: 'Estado',
ref: 'Punto de referencia',
country: 'País',
segments: 'Segmentos', segments: 'Segmentos',
segment: 'Segmento',
notification: "Notificación", notification: "Notificación",
pagination: 'Paginación',
}, },
login: { login: {
title: 'Iniciar sesión', title: 'Iniciar sesión',
@@ -186,13 +203,63 @@ const es = {
typeTruck: 'Tipo de transporte', typeTruck: 'Tipo de transporte',
typeTruckNeed: 'Tipos de camiones que se necesitan', typeTruckNeed: 'Tipos de camiones que se necesitan',
additionalInfoLocation: 'Información adicional de la locación', additionalInfoLocation: 'Información adicional de la locación',
labelPrice: 'Precio en MXN',
labelWeight: 'Peso de la carga en Kg',
notes: 'Notas',
titleDel: 'Eliminar Locación!', titleDel: 'Eliminar Locación!',
textDel: '¿Estás seguro de eliminar este locación?', textDel: '¿Estás seguro de eliminar este locación?',
loadingDel: 'Eliminando locación', loadingDel: 'Eliminando locación',
msgTitleDel: 'Locación eliminado!', msgTitleDel: 'Locación eliminado!',
msgDel: 'Tu locación ha sido eliminado exitosamente.', msgDel: 'Tu locación ha sido eliminado exitosamente.',
msgNotDel: 'Tu locación no se pudo eliminar, intente más tarde.' msgNotDel: 'Tu locación no se pudo eliminar, intente más tarde.',
msgEmpty: 'No hay ubicaciones agregadas',
msgLocationUpdate: 'Locación actualizada con éxito!',
msgLocationCreated: 'Locación creada con éxito!'
},
loads: {
title: 'Mis cargas publicadas',
history: 'Historial',
querySearch: 'Nombre de la persona quien publica',
empty: 'No hay cargas agregadas',
origin: 'Origen',
destination: 'Destino',
postStatus: 'Status de la publicación',
loadStatus: 'Status de la carga',
truckType: 'Tipo de camión',
weight: 'Peso',
dateLoad: 'Fecha de carga',
dateDownload: 'Fecha de descarga',
product: 'Producto',
cost: 'Costo real',
loadCode: 'Código de carga',
postBy: 'Publicación hecha por',
editLoad: 'Editar carga',
offers: 'Ofertas',
makeOffer: 'Hacer oferta',
note: 'Notas adicionales',
create: 'Crear nueva carga',
edit: 'Editar carga',
addressOrigin: 'Dirección de origen',
addressDestination: 'Dirección de destino',
checkAddress: 'Usar locaciones registradas',
addressNameLoad: 'Nombre locación de carga',
addressNameDownload: 'Nombre locación de descarga',
locationsRegistered: 'Locaciones registradas',
selectedLocation: 'Seleccionar locación',
titleDel: 'Eliminar carga!',
textDel: '¿Estás seguro de eliminar esta carga?',
loadingDel: 'Eliminando carga',
msgTitleDel: 'Carga eliminada!',
msgDel: 'Tu carga ha sido eliminada exitosamente.',
msgNotDel: '"Tu carga no se pudo eliminar, intente más tarde.',
msgSave: 'Carga guardada!',
msgNotSave: '"No se pudo guardar carga, intente más tarde',
msgPost: 'Carga publicada!',
msgNotPost: 'No se pudo publicar carga, intente más tarde'
} }
}; };

4
src/views/HomeView.vue
View File

@@ -38,6 +38,7 @@
const getData = async() => { const getData = async() => {
loading.value = true; loading.value = true;
try {
if(user.value?.permissions === "role_carrier") { if(user.value?.permissions === "role_carrier") {
await loads.getProposalCompanyAll(); await loads.getProposalCompanyAll();
} else { } else {
@@ -45,6 +46,9 @@
} }
dataMap(); dataMap();
loading.value = false; loading.value = false;
} catch (error) {
loading.value = false;
}
} }

19
src/views/LoadsPublishedView.vue
View File

@@ -8,6 +8,7 @@
import ProposalsModal from '../components/ProposalsModal.vue'; import ProposalsModal from '../components/ProposalsModal.vue';
import CardEmpty from '../components/CardEmpty.vue'; import CardEmpty from '../components/CardEmpty.vue';
import Pagination from '../components/Pagination.vue'; import Pagination from '../components/Pagination.vue';
import { useI18n } from 'vue-i18n';
const loadStore = useLoadsStore(); const loadStore = useLoadsStore();
const loading = ref(false); const loading = ref(false);
@@ -22,6 +23,8 @@
///loads?company=64fa70c130d2650011ac4f3a&elements=3&page=0&status[$ne]=Closed&$sort%5BcreatedAt%5D=-1 ///loads?company=64fa70c130d2650011ac4f3a&elements=3&page=0&status[$ne]=Closed&$sort%5BcreatedAt%5D=-1
const { t } = useI18n();
watch(query, () => { watch(query, () => {
filterQuery.value.page = "page="+ 0; filterQuery.value.page = "page="+ 0;
filterQuery.value.limit = "elements="+ 100; filterQuery.value.limit = "elements="+ 100;
@@ -100,26 +103,26 @@
<FormLoadModal v-if="loadStore.openModalEdit"/> <FormLoadModal v-if="loadStore.openModalEdit"/>
<ProposalsModal v-if="loadStore.openProposalsModal"/> <ProposalsModal v-if="loadStore.openProposalsModal"/>
<div> <div>
<h2 class="title mb-5">Mis cargas publicadas</h2> <h2 class="title mb-5">{{ t('loads.title') }}</h2>
<div> <div>
<div class="box-filters"> <div class="box-filters">
<div class="box-search"> <div class="box-search">
<input class="form-control custom-search" type="search" name="" placeholder="Nombre de la persona que publica" id="" @:input="search()" v-model="query" aria-label="Search"> <input class="form-control custom-search" type="search" name="" :placeholder="t('loads.querySearch')" id="" @:input="search()" v-model="query" aria-label="Search">
</div> </div>
<button <button
class="btn btn-danger bg-dark" type="button" @click="clearFilter"> class="btn btn-danger bg-dark" type="button" @click="clearFilter">
<i class="fa-solid fa-arrow-rotate-right"></i> <i class="fa-solid fa-arrow-rotate-right"></i>
<span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span> <span class="clear-sm"> Reset </span><span class="clear-md"> {{ t('labels.filters').toLowerCase() }}</span>
</button> </button>
<button <button
@click="loadHistory" @click="loadHistory"
class="btn-primary-sm radius-sm" class="btn-primary-sm radius-sm"
><i class="fa-solid fa-clock-rotate-left"></i><span class="clear-sm"> Historial</span><span class="clear-md"> de cargas</span></button> ><i class="fa-solid fa-clock-rotate-left"></i> <span class="clear-sm"> {{ t('loads.history') }}</span></button>
<button <button
class="btn-primary-sm radius-sm" class="btn-primary-sm radius-sm"
data-toggle="modal" data-target="#formLoadModal" data-toggle="modal" data-target="#formLoadModal"
@click="loadStore.openModalEdit = true" @click="loadStore.openModalEdit = true"
><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> carga</span></button> ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> {{ t('labels.create') }}</span> <span class="clear-md"> {{ t('labels.load').toLowerCase() }}</span></button>
</div> </div>
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<div v-else> <div v-else>
@@ -129,7 +132,7 @@
:key="load._id" :key="load._id"
:load="load" :load="load"
/> />
<CardEmpty v-else text="No hay cargas agregadas"/> <CardEmpty v-else :text="t('loads.empty')"/>
<Pagination <Pagination
:limit="limit" :limit="limit"
:total="loadStore.loadsTotal" :total="loadStore.loadsTotal"
@@ -150,7 +153,9 @@
} }
.box-search { .box-search {
width: 40%; /* width: 40%; */
display: flex;
flex: 1;
} }
.radius-sm{ .radius-sm{

24
src/views/LocationsView.vue
View File

@@ -16,9 +16,10 @@
const query = ref(''); const query = ref('');
const locationCurrent = ref(null); const locationCurrent = ref(null);
const openModal = ref(false); const openModal = ref(false);
const { t } = useI18n(); const { t, locale } = useI18n();
// const typeDirection = ref(null) // const typeDirection = ref(null)
const typeDirection = ref({value: 'both', label: t('labels.both')}) const typeDirection = ref({value: 'both', label: t('labels.both')})
const optionsFilter = ref([]);
const openPopup = ref(false); const openPopup = ref(false);
@@ -35,9 +36,22 @@
filterQuery.value.limit = "elements=" + limit; filterQuery.value.limit = "elements=" + limit;
filterQuery.value.page = "page=" + 0; filterQuery.value.page = "page=" + 0;
await companyStore.getLocationsCompany(filterQuery.value, false) await companyStore.getLocationsCompany(filterQuery.value, false)
optionsFilter.value = [
{value: 'both',label: t('labels.both')},
{value: 'load',label: t('labels.load')},
{value: 'download',label: t('labels.download')}
]
loading.value = false; loading.value = false;
} }
watch(locale, () => {
optionsFilter.value = [
{value: 'both',label: t('labels.both')},
{value: 'load',label: t('labels.load')},
{value: 'download',label: t('labels.download')}
]
})
const getLocationsByPage = async(data) => { const getLocationsByPage = async(data) => {
loading.value = true; loading.value = true;
filterQuery.value.company = "company="+ localStorage.getItem('id'); filterQuery.value.company = "company="+ localStorage.getItem('id');
@@ -107,12 +121,6 @@
openPopup.value = false openPopup.value = false
} }
const optionsFilter = [
{value: 'both',label: t('labels.both')},
{value: 'load',label: t('labels.load')},
{value: 'download',label: t('labels.download')}
]
const closePopup = () => { const closePopup = () => {
openPopup.value = false openPopup.value = false
} }
@@ -171,7 +179,7 @@
:location="location" :location="location"
@set-location="handleSetCurrentLocation(location)" @set-location="handleSetCurrentLocation(location)"
/> />
<CardEmpty v-else text="No hay ubicaciones agregadas"/> <CardEmpty v-else :text="t('directory.msgEmpty')"/>
<Pagination <Pagination
:limit="limit" :limit="limit"
:total="companyStore.locationsTotal" :total="companyStore.locationsTotal"