add: translation budgets

This commit is contained in:
Alexandro Uc Santos
2024-07-20 14:45:51 -06:00
parent 9cf51b9650
commit 69e0848a03
5 changed files with 179 additions and 75 deletions

View File

@@ -1,6 +1,7 @@
<script setup>
import Swal from 'sweetalert2';
import { useCompanyStore } from '../stores/company';
import { useI18n } from 'vue-i18n';
const props = defineProps({
budget: {
@@ -13,20 +14,22 @@
const companyStore = useCompanyStore();
const { t } = useI18n();
const handleDeleteBudget = async() => {
Swal.fire({
title: 'Eliminar Presupuesto!',
text: '¿Estás seguro de eliminar este presupuesto?',
title: t('calculator.titleDel'),
text: t('calculator.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 presupuesto...',// add html attribute if you want or remove
title: t('messages.loading'),
html: t('calculator.loadingDel'),// add html attribute if you want or remove
allowOutsideClick: false,
didOpen: () => {
Swal.showLoading()
@@ -36,14 +39,14 @@
Swal.close();
if(resp !== null) {
Swal.fire({
title: "Presupuesto eliminado!",
text: "Tu presupuesto ha sido eliminado exitosamente.",
title: t('calculator.msgTitleDel'),
text: t('calculator.msgDel'),
icon: "success"
});
} else {
Swal.fire({
title: "No eliminado!",
text: "Tu presupuesto no se pudo eliminar, intente más tarde.",
title: t('calculator.msgTitleNotDel'),
text: t('calculator.msgNotDel'),
icon: "error"
});
}
@@ -59,21 +62,21 @@
<div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<p><span>Cliente:</span> {{budget.client}}</p>
<p v-if="budget.material"><span>Material:</span> {{budget.material.name}}</p>
<p><span>Origen:</span> {{budget.origin}}</p>
<p><span>Destino:</span> {{budget.destination}}</p>
<p><span>Tipo de camión:</span> {{budget.truck_type}}</p>
<p><span>Total KM recorridos:</span> {{budget.total_km_travel}}</p>
<p><span>{{ t('calculator.client') }}:</span> {{budget.client}}</p>
<p v-if="budget.material"><span>{{ t('loads.product') }}:</span> {{budget.material.name}}</p>
<p><span>{{ t('loads.origin') }}:</span> {{budget.origin}}</p>
<p><span>{{ t('loads.destination') }}:</span> {{budget.destination}}</p>
<p><span>{{ t('loads.truckType') }}:</span> {{budget.truck_type}}</p>
<p><span>{{ t('calculator.totalkm') }}:</span> {{budget.total_km_travel}}</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<p><span>Total Litros De Diesel Consumidos: </span> {{parseFloat( budget.total_fuel_consumed).toFixed(2)}}</p>
<p><span>Total Costo Del Diesel:</span> {{"$" + parseFloat( budget.total_cost_fuel).toFixed(2)}}</p>
<p><span>Total Antes De Iva:</span> ${{budget.total_before_tax}}</p>
<p><span>Total Utilidad Por Kilometro:</span> {{"$" + parseFloat( budget.total_utility_per_km).toFixed(2)}}</p>
<p><span>Total Utilidad:</span> {{"$" + parseFloat( budget.total_profit).toFixed(2)}}</p>
<p><span>{{ t('calculator.totallt') }}: </span> {{parseFloat( budget.total_fuel_consumed).toFixed(2)}}</p>
<p><span>{{ t('calculator.totalcostDiesel') }}:</span> {{"$" + parseFloat( budget.total_cost_fuel).toFixed(2)}}</p>
<p><span>{{ t('calculator.totalBeforeIva') }}:</span> ${{budget.total_before_tax}}</p>
<p><span>{{ t('calculator.totalUtityByKm') }}:</span> {{"$" + parseFloat( budget.total_utility_per_km).toFixed(2)}}</p>
<p><span>{{ t('calculator.totalUtity') }}:</span> {{"$" + parseFloat( budget.total_profit).toFixed(2)}}</p>
<!-- <p>{{ $t('CALCULATOR.PROFIT_PERCENTAGE') }}: {{budget.profit_percentage}}%</p> -->
<p><span>Porcentaje De Utilidad:</span> {{parseFloat(budget.profit_percentage).toFixed(2) + "%"}}</p>
<p><span>{{ t('calculator.percentUtility') }}:</span> {{parseFloat(budget.profit_percentage).toFixed(2) + "%"}}</p>
</div>
</div>
@@ -83,14 +86,14 @@
class="btn btn-danger radius-sm"
@click="handleDeleteBudget"
>
<i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
<i class="fa-solid fa-trash" /> <span class="clear-xsm">{{ t('buttons.delete') }}</span>
</button>
<button
class="btn-primary-sm radius-sm"
@click="$emit('set-budget', {budget: budget, print: false})"
data-toggle="modal" data-target="#budgetModal"
>
<i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
<i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">{{ t('buttons.edit') }}</span>
</button>
<button
type="button"
@@ -98,7 +101,7 @@
@click="$emit('set-budget', {budget: budget, print: true})"
data-toggle="modal" data-target="#budgetModal"
>
<i class="fa-solid fa-print" /> <span class="clear-xsm">Imprimir</span>
<i class="fa-solid fa-print" /> <span class="clear-xsm">{{ t('calculator.print') }}</span>
</button>
</div>
</div>

View File

@@ -9,6 +9,8 @@
import Spiner from './ui/Spiner.vue';
import Cities from './ui/Cities.vue';
import html2pdf from 'html2pdf.js';
import { useI18n } from 'vue-i18n';
const props = defineProps({
budget: {
@@ -27,6 +29,8 @@
const loading = ref(false);
const { t } = useI18n();
onMounted(() => {
console.log(props.budget);
if(props.budget) {
@@ -197,7 +201,7 @@
}
let result = 'error';
let action = 'Creado';
let action = t('calculator.msgCreate');
loading.value = true;
const localData = {
@@ -206,17 +210,17 @@
if(props.budget !== null) { // update
result = await companyStore.updateBudgetCompany(props.budget._id, budgetData, localData);
action = 'actualizado';
action = t('calculator.msgUpdate');
} else { // create
result = await companyStore.createBudgetCompany(budgetData);
action = 'agregado';
action = t('calculator.msgCreate');
}
loading.value = false;
if(result === 'success') {
document.getElementById('btnClosebudgetModal').click();
Swal.fire({
title: `<strong>Presupuesto ${action} con éxito!</strong>`,
title: action,
icon: 'success'
})
} else {
@@ -229,7 +233,7 @@
const validations = () => {
errors.value = {
client: budgetForm.client?.length < 2 ? 'Ingrese nombre del cliente' : null,
client: budgetForm.client?.length < 2 ? t('errors.customer') : null,
};
}
@@ -253,7 +257,8 @@
<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">Calculadora</h2>
<!-- <h2 class="title mt-2 mb-3">Calculadora</h2> -->
<div></div>
<button
id="btnClosebudgetModal"
type="button"
@@ -267,16 +272,16 @@
<form action="" @submit.prevent="saveBudget" autocomplete="off" method="post" ref="pdfContent">
<div class="calculator-card">
<div class="calculator-card__title">
<h2>CALCULADOR DE TARIFAS</h2>
<h2>{{ t('calculator.titleDoc') }}</h2>
<img src="/images/logo-eta.png" alt="Eta viaporte" width="110">
</div>
<div class="calculator-card__subtitle">
<h4>DATOS DE CARGA</h4>
<h4>{{ t('calculator.loadData') }}</h4>
</div>
<div class="calculator-card__body">
<div class="calculator-card__loads_data">
<CustomInput
label="CLIENTE*"
:label="t('calculator.client') + '*'"
type="text"
:filled="false"
name="client"
@@ -285,35 +290,35 @@
:readonly="isPrint"
/>
<div class="mb-4 mt-3">
<label class="custom-label">MATERIAL</label>
<label class="custom-label">{{ t('loads.product') }}</label>
<Products
v-model="budgetForm.budgetproduct"
:disabled="isPrint"
/>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">ORIGEN</label>
<label class="custom-label">{{ t('loads.origin') }}</label>
<Cities
v-model="budgetForm.origin"
:disabled="isPrint"
/>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">DESTINO</label>
<label class="custom-label">{{ t('loads.destination') }}</label>
<Cities
v-model="budgetForm.destination"
:disabled="isPrint"
/>
</div>
<div class="mb-4 mt-3">
<label class="custom-label">TIPO DE CAMIÓN</label>
<label class="custom-label">{{ t('loads.truckType') }}</label>
<TruckTypes
v-model="budgetForm.budgetTrucktypes"
:disabled="isPrint"
/>
</div>
<CustomInput
label="TONELADAS"
:label="t('labels.tons')"
type="number"
:filled="false"
name="num_tons"
@@ -321,7 +326,7 @@
:readonly="isPrint"
/>
<CustomInput
label="PRECIO POR TONELADA"
:label="t('labels.priceTons')"
type="number"
:filled="false"
name="price_per_ton"
@@ -331,12 +336,12 @@
</div>
</div>
<div class="calculator-card__subtitle">
<h4>TARIFA / KILOMETRAJE</h4>
<h4>{{ t('calculator.ratekm') }}</h4>
</div>
<div class="calculator-card__body">
<div class="calculator-card__loads_data">
<CustomInput
label="TONELAJE APROXIMADO DE CARGA"
:label="t('labels.tonLoad')"
type="number"
:filled="false"
name="tonnage"
@@ -344,7 +349,7 @@
:readonly="isPrint"
/>
<CustomInput
label="PRECIO POR TONELADA"
:label="t('labels.priceTons')"
type="number"
:filled="false"
name="price_per_ton"
@@ -352,7 +357,7 @@
:readonly="isPrint"
/>
<CustomInput
label="ORIGEN DEL CAMION AL ORIGEN DE CARGA(KM)"
:label="t('labels.originTruckKm1')"
type="number"
:filled="false"
name="pickup_distance"
@@ -360,7 +365,7 @@
:readonly="isPrint"
/>
<CustomInput
label="ORIGEN DE CARGA A DESTINO DE DESCARGA(KM)"
:label="t('labels.originTruckKm2')"
type="number"
:filled="false"
name="delivery_distance"
@@ -368,7 +373,7 @@
:readonly="isPrint"
/>
<CustomInput
label="DESTINO DE DESCARGA AL PATIO-BASE (KM)"
:label="t('labels.destinationTruck1')"
type="number"
:filled="false"
name="warehouse_distance"
@@ -377,7 +382,7 @@
/>
<div class="calculator-card__totals">
<div>
<h6>TOTAL KM RECORRIDOS</h6>
<h6>{{ t('calculator.totalkm').toUpperCase() }}</h6>
</div>
<div>
{{ totalTravel }}
@@ -386,12 +391,12 @@
</div>
</div>
<div class="calculator-card__subtitle">
<h4>COSTOS DIRECTOS CAMION</h4>
<h4>{{ t('calculator.costTruck') }}</h4>
</div>
<div class="calculator-card__body">
<div class="calculator-card__loads_data">
<CustomInput
label="RENDIMIENTO CAMION - LITROS POR KILOMETRO RECORRIDO"
:label="t('calculator.truckCost1')"
type="number"
:filled="false"
name="cost_per_liter"
@@ -399,7 +404,7 @@
:readonly="isPrint"
/>
<CustomInput
label="PRECIO DEL DIESEL POR LITRO"
:label="t('calculator.truckCost2')"
type="number"
:filled="false"
name="fuel_price_per_liter"
@@ -407,7 +412,7 @@
:readonly="isPrint"
/>
<CustomInput
label="OTROS GASTOS"
:label="t('calculator.otherSpends')"
type="number"
:filled="false"
name="other_fuel_expenses"
@@ -416,7 +421,7 @@
/>
<div class="calculator-card__totals">
<div>
<h6>TOTAL LITROS DE DIESEL CONSUMIDOS</h6>
<h6>{{ t('calculator.totallt').toLocaleUpperCase() }}</h6>
</div>
<div>
{{ totalFuel }}
@@ -424,7 +429,7 @@
</div>
<div class="calculator-card__totals">
<div>
<h6>TOTAL COSTO DEL DIESEL</h6>
<h6>{{ t('calculator.truckCost4').toLocaleUpperCase() }}</h6>
</div>
<div>
{{ totalFuelCost }}
@@ -433,12 +438,12 @@
</div>
</div>
<div class="calculator-card__subtitle">
<h4>SUELDO OPERADOR</h4>
<h4>{{ t('calculator.operatorSalary') }}</h4>
</div>
<div class="calculator-card__body">
<div class="calculator-card__loads_data">
<CustomInput
label="GASTOS ADMINISTRATIVOS"
:label="t('calculator.salaryAdmin')"
type="number"
:filled="false"
name="driver_salary"
@@ -446,7 +451,7 @@
:readonly="isPrint"
/>
<CustomInput
label="CASETAS"
:label="t('calculator.stands')"
type="number"
:filled="false"
name="accomadation_allowance"
@@ -454,7 +459,7 @@
:readonly="isPrint"
/>
<CustomInput
label="OTROS GASTOS"
:label="t('calculator.otherSpends')"
type="number"
:filled="false"
name="other_administrative_expenses"
@@ -463,7 +468,7 @@
/>
<div class="calculator-card__totals">
<div>
<h6>GASTOS ADMINISTRATIVOS TOTALES</h6>
<h6>{{ t('calculator.spendsAdminTotal').toUpperCase() }}</h6>
</div>
<div>
{{ totalAdminExpenses }}
@@ -472,13 +477,13 @@
</div>
</div>
<div class="calculator-card__subtitle">
<h4>UTILIDAD / PERDIDA</h4>
<h4>{{ t('calculator.utilityLoss') }}</h4>
</div>
<div class="calculator-card__body">
<div class="calculator-card__loads_data">
<div class="calculator-card__totals">
<div>
<h6>TOTAL ANTES DE IVA</h6>
<h6>{{ t('calculator.totalBeforeIva').toUpperCase() }}</h6>
</div>
<div>
{{ totalBeforeTax }}
@@ -486,7 +491,7 @@
</div>
<div class="calculator-card__totals">
<div>
<h6>TOTAL UTILIDAD POR KILOMETRO</h6>
<h6>{{ t('calculator.totalUtityByKm').toUpperCase() }}</h6>
</div>
<div>
{{ totalUtilityPerKm }}
@@ -494,7 +499,7 @@
</div>
<div class="calculator-card__totals">
<div>
<h6>TOTAL UTILIDAD</h6>
<h6>{{ t('calculator.totalUtity').toUpperCase() }}</h6>
</div>
<div>
{{ totalProfit }}
@@ -502,7 +507,7 @@
</div>
<div class="calculator-card__totals">
<div>
<h6>PORCENTAJE DE UTILIDAD</h6>
<h6>{{ t('calculator.percentUtility').toUpperCase() }}</h6>
</div>
<div>
{{ totalPercentage }}
@@ -513,7 +518,7 @@
</div>
<div class="mt-4 text-center" v-if="!isPrint">
<Spiner v-if="loading"/>
<button v-else class="btn-primary-sm radius-sm" type="submit">Guardar</button>
<button v-else class="btn-primary-sm radius-sm" type="submit">{{ t('buttons.save') }}</button>
</div>
</form>
<div class="mt-4 text-center" v-if="isPrint">
@@ -521,7 +526,7 @@
class="btn-primary-sm radius-sm"
@click="downloadPdf"
type="button">
Descargar
{{ t('buttons.download') }}
</button>
</div>
</div>

View File

@@ -58,6 +58,12 @@ const en = {
operator: 'Operator',
vehicle: 'Vehicle',
comment: 'Comment',
tons: "Tons",
priceTons: "Price per ton",
tonLoad: "Approximate load tonnage",
originTruckKm1: "Truck origin to load origin(KM)",
originTruckKm2: "Loading origin to unloading destination(KM)",
destinationTruck1: "Unloading destination to base-yard(KM)",
},
buttons: {
enter: "Enter here",
@@ -84,7 +90,8 @@ const en = {
confirm: 'Confirm',
search: 'Search',
profile: 'View profile',
send: 'Send'
send: 'Send',
download: 'Download'
},
errors: {
required: 'Field is required',
@@ -120,6 +127,7 @@ const en = {
map: 'Could not be loaded',
vehicle: 'Select a vehicle',
comment: 'Add comment',
customer: 'Enter customer name'
},
messages: {
sendCode: 'We send you a code to the email, entered!',
@@ -396,6 +404,45 @@ const en = {
searchShipper: "Search by shipper",
empty: 'No uploads published'
},
calculator: {
title: 'Budget calculator',
querySearch: 'Search by customer',
empty: 'There are no records',
create: '<i class="fa-solid fa-plus"></i> <span class="clear-sm"> Create</span><span class="clear-md"> budget</span>',
client: 'Customer',
totalkm: 'Total km traveled',
totallt: 'Total liters of diesel consumed',
totalcostDiesel: 'Total diesel cost',
totalBeforeIva: 'Total before VAT',
totalUtityByKm: 'Total utility per km',
totalUtity: 'Total Utility',
percentUtility: 'Utility Percentage',
print: 'Print',
titleDoc: 'RATE CALCULATOR',
loadData: 'LOAD DATA',
ratekm: 'RATE / MILEAGE',
costTruck: 'DIRECT TRUCK COSTS',
operatorSalary: 'OPERATOR SALARY',
utilityLoss: 'UTILITY / LOSS',
titleDel: 'Delete Budget!',
textDel: 'Are you sure you want to delete this budget?',
loadingDel: 'Deleting budget...',
msgTitleDel: 'Budget Deleted!',
msgDel: 'Your budget has been successfully deleted.',
msgTitleNotDel: 'Not Deleted!',
msgNotDel: 'Your budget could not be deleted, please try again later.',
truckCost1: "Truck performance - Liters per kilometer traveled",
truckCost2: "Diesel price per liter",
otherSpends: "Other expenses",
truckCost4: "Total diesel cost",
salaryAdmin: "Administrative expenses",
stands: "Toll booths",
spendsAdminTotal: "Total administrative expenses",
msgUpdate: "<strong>Budget successfully updated!</strong>",
msgCreate: "<strong>Budget successfully created!</strong>",
},
calendar: {
title: 'Calendar',
helpText: 'Load status indicators',

View File

@@ -60,6 +60,12 @@ const es = {
operator: 'Operador',
vehicle: 'Vehiculo',
comment: 'Comentario',
tons: "Toneladas",
priceTons: "Precio por toneladas",
tonLoad: "Tonelaje aproximado de carga",
originTruckKm1: "Origen del camión al origin de carga(KM)",
originTruckKm2: "Origen de carga a destino de descarga(KM)",
destinationTruck1: "Destino de descarga al patio-base(KM)"
},
buttons: {
enter: "Ingresa aqui",
@@ -87,6 +93,7 @@ const es = {
search: 'Buscar',
profile: 'Ver perfil',
send: 'Enviar',
download: 'Descargar'
},
errors: {
required: 'Campo es requerido',
@@ -122,6 +129,7 @@ const es = {
map: "No se pudo cargar mapa",
vehicle: 'Selecciona un vehiculo',
comment: 'Agrega comentario',
customer: 'Ingrese nombre del cliente'
},
messages: {
sendCode: 'Te enviamos un código al correo, ingresado!',
@@ -397,12 +405,52 @@ const es = {
carriers: {
title: 'Directorio de <span class="title-main">Transportistas</span>',
searchByCarrier: 'Buscar por transportista',
empty: 'No hay registros'
empty: 'No hay registros',
},
shippers: {
searchShipper: "Buscar por embarcador",
empty: 'No hay cargas publicadas'
},
calculator: {
title: 'Calculator de presupuesto',
querySearch: 'Buscar por cliente',
empty: 'No hay registros',
create: '<i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> presupuesto</span>',
client: 'Cliente',
totalkm: 'Total km recorridos',
totallt: 'Total litros de diesel consumidos',
totalcostDiesel: 'Costo total del diesel',
totalBeforeIva: 'Total antes de IVA',
totalUtityByKm: 'Utilidad total por km',
totalUtity: 'Utilidad total',
percentUtility: 'Porcentaje de utilidad',
print: 'Imprimir',
titleDoc: 'CALCULADORA DE TARIFAS',
loadData: 'DATOS DE CARGA',
ratekm: 'TARIFA / KILOMETRAJE',
costTruck: 'COSTOS DIRECTOS CAMION',
operatorSalary: 'SUELDO OPERADOR',
utilityLoss: 'UTILIDAD / PERDIDA',
titleDel: '¡Eliminar Presupuesto!',
textDel: '¿Estás seguro de eliminar este presupuesto?',
loadingDel: 'Eliminando presupuesto...',
msgTitleDel: 'Presupuesto eliminada!',
msgDel: 'Tu presupuesto ha sido eliminado exitosamente.',
msgTitleNotDel: 'No eliminado!',
msgNotDel: 'Tu presupuesto no se pudo eliminar, intente más tarde.',
truckCost1: "Rendimiento camión - Litros por kilometro recorrido",
truckCost2: "Precio del diesel por litro",
otherSpends: "Otros gastos",
truckCost4: "Total costo del diesel",
salaryAdmin: "Gastas administrativos",
stands: "Casetas",
spendsAdminTotal: "Gastos administrativos totales",
msgUpdate: "<strong>Presupuesto actualizado con éxito!</strong>",
msgCreate: "<strong>Presupuesto creado con éxito!</strong>",
},
calendar: {
title: 'Calendario',
helpText: 'Indicadores de estado de la carga',

View File

@@ -7,6 +7,7 @@
import CardEmpty from '../components/CardEmpty.vue';
import CreateBudgetModal from '../components/CreateBudgetModal.vue';
import Pagination from '../components/Pagination.vue';
import { useI18n } from 'vue-i18n';
const companyStore = useCompanyStore();
const authStore = useAuthStore();
@@ -19,6 +20,8 @@
const printOpen = ref(false);
const limit = 10;
const { t } = useI18n();
onMounted(() => {
getInitData();
})
@@ -107,22 +110,23 @@
@reset-budget="handleResetCurrentBudget"
/>
<div>
<h2 class="title my-2">Calculadora</h2>
<h2 class="title my-2">{{t('calculator.title')}}</h2>
</div>
<div class="box-filters">
<div class="box-search">
<input class="form-control custom-search" type="search" name="" placeholder="Buscar por cliente" id="" @:input="search()" v-model="query" aria-label="Search">
<input class="form-control custom-search" type="search" name="" :placeholder="t('calculator.querySearch')" id="" @:input="search()" v-model="query" aria-label="Search">
</div>
<button
class="btn btn-danger bg-dark" type="button" @click="clearFilter">
<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') }}</span>
</button>
<button
class="btn-primary-sm radius-sm"
data-toggle="modal" data-target="#budgetModal"
@click="handleSetCurrentBudget({budget: null, print: false})"
><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> presupuesto</span></button>
v-html="t('calculator.create')"
></button>
</div>
<Spiner v-if="loading"/>
<div v-else>
@@ -155,7 +159,7 @@
}
.box-search {
width: 60%;
flex: 1;
}
.custom-search {
width: 100%;
@@ -163,9 +167,6 @@
}
@media (max-width: 1024px) {
.box-search {
width: 60%;
}
.box-filters {
gap: .4rem;
}