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

feature notifications

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-09-07 18:44:57 -06:00
parent 84c0595f5b
commit c5f0831a81
23 changed files with 514 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/CardBudget.vue
View File

@@ -2,6 +2,8 @@
import Swal from 'sweetalert2';
import { useCompanyStore } from '../stores/company';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
import { formatCurrency } from '../helpers/format_currency';
const props = defineProps({
budget: {
@@ -9,7 +11,7 @@
required: true
}
})
defineEmits(['set-budget'])
const companyStore = useCompanyStore();
@@ -55,6 +57,12 @@
});
}
const totalPercentage = computed(() => {
const percent = props.budget.total_profit / props.budget.total_before_tax * 100;
const result = isNaN(percent) ? 0.0 : percent;
return parseFloat(result).toFixed(2) + "%";
});
</script>
<template>
@@ -71,12 +79,12 @@
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<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><span>{{ t('calculator.totalcostDiesel') }}:</span> {{ formatCurrency( budget.total_cost_fuel) }}</p>
<p><span>{{ t('calculator.totalBeforeIva') }}:</span> {{ formatCurrency(budget.total_before_tax) }}</p>
<p><span>{{ t('calculator.totalUtityByKm') }}:</span> {{ formatCurrency( budget.total_utility_per_km) }}</p>
<p><span>{{ t('calculator.totalUtity') }}:</span> {{ formatCurrency( budget.total_profit ) }}</p>
<!-- <p>{{ $t('CALCULATOR.PROFIT_PERCENTAGE') }}: {{budget.profit_percentage}}%</p> -->
<p><span>{{ t('calculator.percentUtility') }}:</span> {{parseFloat(budget.profit_percentage).toFixed(2) + "%"}}</p>
<p><span>{{ t('calculator.percentUtility') }}:</span> {{ totalPercentage }}</p>
</div>
</div>

14
src/components/CardUser.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import Swal from 'sweetalert2';
import { getDateMonthDay } from '../helpers/date_formats';
import { getDateOnly } from '../helpers/date_formats';
import { getTypeUser } from '../helpers/type_user';
import { useCompanyStore } from '../stores/company';
import { useAuthStore } from '../stores/auth';
@@ -84,18 +84,18 @@
<p><span>{{ t('labels.locationLoadState') }}: </span>{{user._user_state}}</p>
<p v-if="user.company.truck_type"><span>{{ t('labels.truckUsed') }}: </span> {{user._truck_type}}</p>
<p ><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
<p ><span>{{ t('labels.memberSince') }}: </span>{{getDateMonthDay(user.createdAt)}}</p>
<p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
<p><span>{{ t('labels.userRole') }}: </span>{{user.job_role}}</p>
<p v-if="user.createAt"><span>{{ t('labels.memberSince') }}: </span>{{getDateOnly(user.createAt)}}</p>
<p v-if="readonly && user.company.membership"><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
<!-- <p><span>{{ t('labels.userRole') }}: </span>{{user.job_role}}</p> -->
</div>
<div class="col-lg-6 col-sm-12" v-else>
<p><span>{{ t('global.segments') }}: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
<p><span>{{ t('labels.locationLoadCity') }}: </span>{{user.user_city?.join(', ')}}</p>
<p><span>{{ t('labels.locationLoadState') }}: </span>{{user.user_state?.join(', ')}}</p>
<p v-if="user.truck_type"><span>{{ t('labels.truckUsed') }}: </span> {{user.truck_type?.join(', ')}}</p>
<p ><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
<p ><span>{{ t('labels.memberSince') }}: </span>{{getDateMonthDay(user.createdAt)}}</p>
<p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
<p><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
<p v-if="user.createAt"><span>{{ t('labels.memberSince') }}: </span>{{getDateOnly(user.createAt)}}</p>
<p v-if="readonly && user.company.membership" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
</div>
</div>
<div class="btn-row" v-if="readonly === false && (authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager')">

24
src/components/CreateBudgetModal.vue
View File

@@ -10,7 +10,7 @@
import Cities from './ui/Cities.vue';
import html2pdf from 'html2pdf.js';
import { useI18n } from 'vue-i18n';
import { formatCurrency } from '../helpers/format_currency';
const props = defineProps({
budget: {
@@ -133,29 +133,29 @@
const totalFuelCost = computed(() => {
budgetForm.total_fuel_cost = isNaN(budgetForm.total_fuel * budgetForm.fuel_price_per_liter) ? 0.0 : budgetForm.total_fuel * budgetForm.fuel_price_per_liter;
return "$" + (isNaN(budgetForm.total_fuel_cost) ? '0.0' : parseFloat(budgetForm.total_fuel_cost).toFixed(2));
return isNaN(budgetForm.total_fuel_cost) ? '0.0' : parseFloat(budgetForm.total_fuel_cost);
});
const totalAdminExpenses = computed(() => {
budgetForm.total_administrative_expenses = budgetForm.driver_salary*1 + budgetForm.accomadation_allowance*1 + budgetForm.other_administrative_expenses*1;
budgetForm.total_administrative_expenses = isNaN(budgetForm.total_administrative_expenses) ? 0.0 : budgetForm.total_administrative_expenses;
return "$" + (isNaN(budgetForm.total_administrative_expenses) ? '0.0' : parseFloat(budgetForm.total_administrative_expenses).toFixed(2));
return isNaN(budgetForm.total_administrative_expenses) ? '0.0' : parseFloat(budgetForm.total_administrative_expenses);
});
const totalBeforeTax = computed(() => {
budgetForm.total_before_tax = budgetForm.tonnage * budgetForm.price_per_ton;
budgetForm.total_before_tax = isNaN(budgetForm.total_before_tax) ? 0.0 : budgetForm.total_before_tax;
return "$" + (isNaN(budgetForm.total_before_tax) ? '0.0' : parseFloat(budgetForm.total_before_tax).toFixed(2));
return isNaN(budgetForm.total_before_tax) ? '0.0' : parseFloat(budgetForm.total_before_tax);
});
const totalUtilityPerKm = computed(() => {
budgetForm.total_utility_per_km = isNaN(budgetForm.total_before_tax / budgetForm.total_travel) ? 0.0 : (budgetForm.total_before_tax / budgetForm.total_travel);
return "$" + (isNaN(budgetForm.total_utility_per_km) ? '0.0' : parseFloat(budgetForm.total_utility_per_km).toFixed(2));
budgetForm.total_utility_per_km = isNaN(budgetForm.total_before_tax / budgetForm.total_travel) ? 0.0 : (budgetForm.total_profit / budgetForm.total_travel);
return isNaN(budgetForm.total_utility_per_km) ? '0.0' : parseFloat(budgetForm.total_utility_per_km);
});
const totalProfit = computed(() => {
budgetForm.total_profit = budgetForm.total_before_tax - budgetForm.total_fuel_cost - budgetForm.other_fuel_expenses - budgetForm.driver_salary - budgetForm.accomadation_allowance - budgetForm.other_administrative_expenses;
return "$" + (isNaN(budgetForm.total_profit) ? '0.0' : parseFloat(budgetForm.total_profit).toFixed(2));
return isNaN(budgetForm.total_profit) ? '0.0' : parseFloat(budgetForm.total_profit);
});
const totalPercentage = computed(() => {
@@ -432,7 +432,7 @@
<h6>{{ t('calculator.truckCost4').toLocaleUpperCase() }}</h6>
</div>
<div>
{{ totalFuelCost }}
{{ formatCurrency(totalFuelCost) }}
</div>
</div>
</div>
@@ -471,7 +471,7 @@
<h6>{{ t('calculator.spendsAdminTotal').toUpperCase() }}</h6>
</div>
<div>
{{ totalAdminExpenses }}
{{ formatCurrency(totalAdminExpenses) }}
</div>
</div>
</div>
@@ -486,7 +486,7 @@
<h6>{{ t('calculator.totalBeforeIva').toUpperCase() }}</h6>
</div>
<div>
{{ totalBeforeTax }}
{{ formatCurrency(totalBeforeTax) }}
</div>
</div>
<div class="calculator-card__totals">
@@ -494,7 +494,7 @@
<h6>{{ t('calculator.totalUtityByKm').toUpperCase() }}</h6>
</div>
<div>
{{ totalUtilityPerKm }}
{{ formatCurrency(totalUtilityPerKm) }}
</div>
</div>
<div class="calculator-card__totals">
@@ -502,7 +502,7 @@
<h6>{{ t('calculator.totalUtity').toUpperCase() }}</h6>
</div>
<div>
{{ totalProfit }}
{{ formatCurrency(totalProfit) }}
</div>
</div>
<div class="calculator-card__totals">

8
src/components/CreateLocationModal.vue
View File

@@ -68,6 +68,8 @@
meta_value: e
}
});
locationForm.location_type = props.location.type;
locationForm.zipcode = props.location.zipcode;
locationForm.address = props.location.address;
locationForm.description = props.location.description;
locationForm.zipcode = "";
@@ -96,6 +98,8 @@
truck_type: locationForm.truck_type?.length <= 0 ? null : locationForm.truck_type?.map((e) => e.meta_value),
description: locationForm.description,
company: authStore.user.company,
type: locationForm.location_type,
zipcode: locationForm.zipcode
}
@@ -199,8 +203,8 @@
>
<option disabled value="">-- {{ t('labels.select')}} --</option>
<!-- <option value="owner">Dueño</option> -->
<option value="load">{{ t('labels.load')}}</option>
<option value="download">{{ t('labels.download')}}</option>
<option value="loading">{{ t('labels.load')}}</option>
<option value="unloading">{{ 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>

BIN
src/components/CreateUserModal.vue
View File

Binary file not shown.

2
src/components/FormLoadModal.vue
View File

@@ -16,7 +16,7 @@
import { useCompanyStore } from '../stores/company';
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';
import {getDateTime, getDateOnly } from '../helpers/date_formats';
import {getDateTime } from '../helpers/date_formats';
const loadStore = useLoadsStore();

11
src/components/MakeProposalModal.vue
View File

@@ -47,7 +47,7 @@
const companyStore = useCompanyStore();
defineEmits(['reset-load'])
const emit = defineEmits(['reset-load', 'remove-load'])
const { t } = useI18n()
onMounted(() => {
@@ -62,11 +62,13 @@
const initData = async() => {
isLoading.value = true;
let filterQuery = [];
filterQuery.company = "company="+ authStore.user.company
filterQuery.company = "company="+ authStore.user.company._id
await vehiclesStore.fetchVehicles(filterQuery);
if(!props.proposal) {
vehiclesAvailable.value = vehiclesStore.vehicles.filter((vehicle) => vehicle.is_available);
// vehiclesAvailable.value = vehiclesStore.vehicles.filter((vehicle) => vehicle.is_available);
vehiclesAvailable.value = vehiclesStore.vehicles;
} else {
// vehiclesAvailable.value = vehiclesStore.vehicles.filter((vehicle) => vehicle._id === props.proposal.vehicle._id);
vehiclesAvailable.value = vehiclesStore.vehicles.filter((vehicle) => vehicle.is_available || vehicle._id === props.proposal.vehicle._id);
}
originCoords.value = {lat: Number.parseFloat(props.load.origin.lat), lng: Number.parseFloat(props.load.origin.lng)};
@@ -120,6 +122,9 @@
loadingSubmit.value = true;
action = t('proposals.msgOffertDone');
result = await companyStore.createPropsal(formData);
if(result === 'success') {
emit('remove-load', props.load);
}
} else {
let formData = {
comment: form.comments,

53
src/components/NavBar.vue
View File

@@ -3,9 +3,13 @@
import { useAuthStore } from '../stores/auth';
import { useNotificationsStore } from '../stores/notifications';
import { useI18n } from 'vue-i18n';
import { onMounted, ref } from 'vue';
import { getNotificationsCompany } from '../services/company';
const auth = useAuthStore();
const noty = useNotificationsStore();
const { t } = useI18n()
$(document).ready(function() {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
@@ -13,7 +17,20 @@
});
});
const { t } = useI18n()
onMounted(() => {
getNotifications();
setInterval(() => {
getNotifications();
}, 600000); // 5 minutos
});
const getNotifications = async () => {
const resp = await getNotificationsCompany();
if(resp.data.length > 0) {
noty.newNoty = true;
}
noty.notifications = resp.data;
}
</script>
<template>
@@ -39,10 +56,22 @@
v-if="auth.user?.permissions === 'role_carrier'"
active-class="router-link-active"
class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">{{ t('global.shippers') }}</span></RouterLink>
<div
class="nav-link noty"
@click="noty.toggleNotifications"
>
<i class="fa-regular fa-bell icon"></i>
<div
class="box-badge"
v-if="noty.newNoty"
>
<span class="badge bg-danger custom-badge">{{ noty.notifications.length }}</span>
</div>
</div>
<a
active-class="router-link-active"
@click="noty.toggleProfile"
class="nav-link"><i class="fa-solid fa-user me-1"></i> <span class="clear-xsm">{{ auth?.user?.first_name }}</span></a>
class="nav-link"><i class="fa-regular fa-user"></i></a>
</div>
</div>
</nav>
@@ -76,7 +105,7 @@
.nav-link{
cursor: pointer;
color: #FBBA33;
color: #323030;
font-size: 1.3rem;
margin-right: 1.2rem;
font-weight: 500;
@@ -124,4 +153,22 @@
display: flex;
}
}
.icon {
font-size: 1.5rem;
color: #323030;
}
.noty {
position: relative;
}
.box-badge {
position: absolute;
top: -15px;
right: -15px;
}
.custom-badge {
font-size: 0.7rem;
font-weight: normal;
padding: 0.3rem 0.5rem;
}
</style>

136
src/components/NotificationCard.vue Normal file
View File

@@ -0,0 +1,136 @@
<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import {getDateTime} from '../helpers/date_formats';
import { deleteNotification } from '../services/company';
import { useNotificationsStore } from '../stores/notifications';
import Spiner from './ui/Spiner.vue';
const props = defineProps({
noty: {
type: Object,
required: true,
}
})
const loading = ref(false);
const { t } = useI18n();
const router = useRouter();
const notyStore = useNotificationsStore();
const title = computed(() => {
return props.noty.tag == 'new_proposal' ? t('noty.newProposalTitle') : props.noty.tag == 'accepted_proposal' ? t('noty.acceptedProposalTitle') : t('noty.rejectedProposalTitle');
})
const description = computed(() => {
return props.noty.tag == 'new_proposal'
? t('noty.newProposalDesc')
: props.noty.tag == 'accepted_proposal' ? t('noty.acceptedProposalDesc')
: t('noty.rejectedProposalDesc')
})
const deleteNoty = async() => {
loading.value = true;
const resp = await deleteNotification(props.noty._id);
console.log(resp);
if(resp.msg === 'Done') {
notyStore.removeNoty(props.noty._id);
}
loading.value = false;
}
const openNoty = () => {
notyStore.toggleNotifications();
if(props.noty.tag === 'new_proposal') {
router.push({name: 'published-loads', params: {id: props.noty.proposalId}});
} else {
router.push({name: 'published-trucks', params: {id: props.noty.proposalId}});
}
}
</script>
<template>
<div
class="noty-card"
@click="openNoty"
>
<div
class="noty-icon"
:style="{
background: (noty.tag === 'accepted_proposal') ? '#4CAF50' : (noty.tag === 'new_proposal') ? '#FFC107' : 'red'
}"
>
<i v-if="noty.tag === 'reject_proposal'" class="fa-solid fa-ban"></i>
<i v-if="noty.tag === 'accepted_proposal'" class="fa-solid fa-clipboard-check"></i>
<i v-if="noty.tag === 'new_proposal'" class="fa-solid fa-envelope-open-text"></i>
</div>
<div class="noty-body">
<h3>{{ title }}</h3>
<p>{{ description }} <span class="font-bold">{{props.noty.description.toUpperCase()}}</span></p>
<p class="date">{{ getDateTime(noty.createdAt, 0) }}</p>
</div>
<div class="d-flex">
<p
class="noty-action"
@click="deleteNoty"
v-if="!loading"
>{{ t('buttons.delete') }}</p>
<Spiner v-else/>
</div>
</div>
</template>
<style scoped>
.noty-card {
border-radius: 5px;
padding: 10px;
display: flex;
flex-direction: row;
margin-bottom: 8px;
align-items: center;
cursor: pointer;
}
.noty-icon {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
color: white;
font-size: 1.8rem;
}
.noty-body {
display: flex;
flex-direction: column;
margin-left: 1rem;
flex: 1;
/* width: 220px; */
}
.noty-body h3 {
font-size: 1.1rem;
font-weight: 500;
}
.noty-body p {
font-size: 1rem;
font-weight: normal;
margin: 0;
}
.noty-body .date {
margin: 5px 0px;
font-size: 0.8rem;
font-weight: 300;
color: #7d7d7d;
}
.noty-action {
margin-left: 1rem;
font-size: 0.8rem;
font-weight: 300;
color: #f4505e;
cursor: pointer;
}
</style>

126
src/components/NotificationsPopup.vue Normal file
View File

@@ -0,0 +1,126 @@
<script setup>
import { useNotificationsStore } from '../stores/notifications';
import { useI18n } from 'vue-i18n';
import NotificationCard from './NotificationCard.vue';
const noty = useNotificationsStore();
const { t } = useI18n();
const closePopup = () => {
noty.toggleNotifications()
noty.newNoty = false;
}
</script>
<template>
<div
v-if="noty.openNotifications"
>
<div
class="background"
@click="closePopup()"
>
</div>
<div
class="noty-content"
>
<i class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
<h3 class="ps-1">{{ t('noty.title') }}</h3>
<div class="body">
<NotificationCard
v-if="noty.notifications.length > 0"
v-for="notification in noty.notifications"
:key="notification._id"
:noty="notification"
/>
<div v-else>
<p class="text-center">{{ t('noty.empty') }}</p>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.background {
position: fixed;
z-index: 1000;
width: 100wv;
right: 0px;
top: 0px;
left: 0px;
cursor: pointer;
bottom: 0px;
background-color: #000;
opacity: 0.2;
}
.noty-content {
position: fixed;
right: 10px;
top: 70px;
z-index: 2000;
width: 420px;
background-color: #FFF;
opacity: 1;
border-radius: 13px;
padding: 20px 16px;
display: flex;
flex-direction: column;
/* flex-wrap: nowrap; */
/* overflow: hidden; */
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
}
.body {
overflow-y: auto;
max-height: 500px;
/* padding: 20px 20px; */
}
.section-prefs {
margin-top: 20px !important;
font-size: 1rem !important;
color: grey;
}
.label-item {
font-weight: 900 !important;
font-size: 1.2rem !important;
margin-bottom: 1rem;
}
.noty-content h3 {
margin-top: 20px;
margin-bottom: 20px;
font-size: 1.2rem;
font-weight: 700;
}
.noty-content p {
margin-top: 8px;
font-size: 1rem;
font-weight: 500;
text-overflow: ellipsis;
}
.close-icon {
display: flex;
position: absolute;
right: 20px;
top: 16px;
cursor: pointer;
font-size: 24px;
}
@media (max-width: 568px) {
.noty-content {
right: 5px;
top: 50px;
width: 95%;
padding: 16px 8px;
}
}
</style>

9
src/components/ProfilePopup.vue
View File

@@ -4,14 +4,15 @@
import { useNotificationsStore } from '../stores/notifications';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { onMounted } from 'vue';
import CustomRadioInput from './ui/CustomRadioInput.vue';
import { watch } from 'vue';
import { onMounted } from 'vue';
import CustomRadioInput from './ui/CustomRadioInput.vue';
import { watch } from 'vue';
const lang = ref(null);
const noty = useNotificationsStore();
const auth = useAuthStore();
const router = useRouter();
const lang = ref(null);
const { t, locale } = useI18n();
onMounted(() => {

24
src/components/ui/EditCompanyModal.vue
View File

@@ -4,6 +4,8 @@
import NotificationBadge from './NotificationBadge.vue';
import Segments from './Segments.vue';
import TruckTypes from './TruckTypes.vue';
import Cities from './Cities.vue';
import States from './States.vue';
import Custominput from './CustomInput.vue';
import { useCompanyStore } from '../../stores/company';
import { useNotificationsStore } from '../../stores/notifications';
@@ -60,8 +62,8 @@
company_type: companyStore.company.company_type,
meta_data: companyStore.company.meta_data,
categories: company.segments.map((e) => e),
// company_city: company.cities.map((e) => e.city_name),
// company_state: company.states.map((e) => e.state_name),
company_city: company.cities.map((e) => e.city_name),
company_state: company.states.map((e) => e.state_name),
truck_type: company.truckTypes.map((e) => e.meta_value),
company_description: company.description
};
@@ -88,10 +90,10 @@
const validations = () => {
if(company.segments.length === 0) {
return t('errors.segments');
// }else if(company.states.length === 0) {
// return t('errors.states');
// } else if( company.cities.length === 0) {
// msgError.value = t('errors.cities');
}else if(company.states.length === 0) {
return t('errors.states');
} else if( company.cities.length === 0) {
msgError.value = t('errors.cities');
} else if(company.truckTypes.length === 0){
msgError.value = t('errors.trucks');
} else {
@@ -123,20 +125,20 @@
:multiple="true"
/>
</div>
<!-- <div class="mb-4">
<label class="custom-label">Ubicaciones de carga por estado</label>
<div class="mb-4">
<label class="custom-label">{{ t('labels.locationLoadState') }}</label>
<States
v-model="company.states"
:multiple="true"
/>
</div>
<div class="mb-4">
<label class="custom-label">Ubicaciones de carga por municipio</label>
<Cities
<label class="custom-label">{{ t('labels.locationLoadCity') }}</label>
<Cities
v-model="company.cities"
:multiple="true"
/>
</div> -->
</div>
<div class="mb-4">
<label class="custom-label">{{ t('labels.truckUsed') }}</label>
<TruckTypes