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

calendar done

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-07-13 20:03:44 -06:00
parent a0032b26c1
commit 9cf51b9650
16 changed files with 255 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/views/CalculatorView.vue
View File

@@ -17,7 +17,7 @@
const currentBudget = ref(null);
const openModal = ref(false);
const printOpen = ref(false);
const limit = 2;
const limit = 10;
onMounted(() => {
getInitData();
@@ -25,8 +25,8 @@
const getInitData = async() => {
loading.value = true;
filterQuery.value.limit = '$limit=' + limit;
filterQuery.value.skip = "$skip=0"
filterQuery.value.limit = "elements=" + limit;
filterQuery.value.page = "page=" + 0;
filterQuery.value.company = "company="+ localStorage.getItem('id');
await companyStore.getBudgetsCompany(filterQuery.value, false)
loading.value = false;
@@ -39,8 +39,8 @@
}
watch(query, () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ 100;
filterQuery.value.page = "page=" + 0;
filterQuery.value.limit = "elements=" + 100;
if(query.value.length === 0){
clearRequest();
filterQuery.value.search = "";
@@ -59,9 +59,10 @@
const getBudgetsByPage = async(data) => {
loading.value = true;
filterQuery.value.skip = "$skip="+ data.skip;
filterQuery.value.page = "page="+ data.page;
companyStore.budgetsCurrentPage = data.page
await getBudgetsWithFilters(filterQuery.value)
loading.value = false;
}
const clearFilter = () => {
@@ -77,8 +78,8 @@
}
const clearRequest = () => {
filterQuery.value.skip = "$skip="+ 0;
filterQuery.value.limit = "$limit="+ limit;
filterQuery.value.page = "page=" + 0;
filterQuery.value.limit = "elements="+ limit;
companyStore.budgetsCurrentPage = 1;
}
@@ -137,8 +138,8 @@
/>
<Pagination
:limit="limit"
:current-page="companyStore.budgetsCurrentPage"
:total="companyStore.budgetsTotal"
:current-page="companyStore.budgetsCurrentPage"
@get-elements="getBudgetsByPage"
/>
</div>

171
src/views/CalendarView.vue
View File

@@ -1,15 +1,22 @@
<script setup>
import { Qalendar } from 'qalendar';
import data from '../data/events.json';
import {eventStatusLoad} from '../helpers/status';
import {getDateTime} from '../helpers/date_formats';
import {getDateTime, formatOnlyDate} from '../helpers/date_formats';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import useCalendar from '../composables/useCalendar';
import CustomPopup from '../components/CustomPopup.vue';
import { watch } from 'vue';
const events = ref([]);
const router = useRouter();
const { t } = useI18n()
const { t, locale } = useI18n()
const { getCalendarDate, loading, loads } = useCalendar()
const filter = ref({value: 'general', label: t('calendar.general')})
const optionsFilter = ref([])
const openPopup = ref(false);
const config = {
week: {
@@ -44,18 +51,65 @@
// showCurrentTime: true, // Display a line indicating the current time
}
onMounted(() => {
data.forEach((e, i) => {
const indicator = eventStatusLoad(e.status);
const dateStart = getDateTime(e.date, 0);
const dateEnd = getDateTime(e.date, 1);
onMounted( async() => {
const currentDate = new Date();
const year = currentDate.getFullYear();
const month = currentDate.getMonth();
const startDate = new Date(year, month, 1);
const endDate = new Date(year, month + 1, 0);
await getCalendarDate(formatOnlyDate(startDate), formatOnlyDate(endDate));
// console.log(loads.value)
optionsFilter.value = [
{value: 'general',label: t('calendar.general')},
{value: 'my',label: t('calendar.my')},
]
mapLoadsToEvents()
});
const redirectToTracking = (id) => {
window.open('/publico/tracking/' + id, '_blank');
}
watch(locale, () => {
optionsFilter.value = [
{value: 'general',label: t('calendar.general')},
{value: 'my',label: t('calendar.my')},
]
})
const handleUpdateMode = (ev) => {
console.log(ev)
console.log('clic en el calendario');
}
const handleClickDate = (ev) => {
console.log(ev);
console.log('clic en la fecha');
}
const handleUpdatedPeriod = async(ev) => {
console.log(ev);
const start = formatOnlyDate(ev.start)
const end = formatOnlyDate(ev.end)
await getCalendarDate(start, end);
console.log('LOADS: ', loads.value)
mapLoadsToEvents()
}
const mapLoadsToEvents = () => {
events.value = [];
loads.value.forEach((e) => {
const indicator = eventStatusLoad(e.load_status);
const dateStart = getDateTime(e.load_status_updated, 0);
const dateEnd = getDateTime(e.load_status_updated, 1);
// console.log('dateStart', dateStart)
// console.log('dateEnd', dateEnd)
events.value.push({
id: i,
id: e._id,
title: e.shipment_code,
// isEditable: true,
// isCustom: true,
with: indicator.status,
description: indicator.status,
description: indicator.load_status,
color: indicator.color,
time: {
start: dateStart,
@@ -63,28 +117,51 @@
}
})
});
});
const redirectToTracking = (code) => {
router.push({
name: 'tracking-load',
params: {code}
});
}
const closePopup = () => {
openPopup.value = false
}
const selectedFilter = (type) => {
filter.value = type
openPopup.value = false
}
</script>
<template>
<div
v-if="openPopup"
>
<CustomPopup
:options="optionsFilter"
:value="filter"
@change-value="selectedFilter"
@close-popup="closePopup"
selected-color="#e3a11e"
/>
</div>
<div>
<h2 class="title mb-4">{{ t('calendar.title') }}</h2>
<div class="box-indicators">
<h2>{{ t('calendar.helpText') }}</h2>
<div class="indicators">
<i class="fa-solid fa-circle" style="color: yellow"></i> {{ t('global.published') }}
<i class="fa-solid fa-circle" style="color: green"></i> {{ t('global.loading') }}
<i class="fa-solid fa-circle" style="color: red"></i> {{ t('global.transit') }}
<i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.downloading') }}
<i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.delivered') }}
<div class="header">
<div class="indicators">
<span><i class="fa-solid fa-circle" style="color: yellow"></i> {{ t('global.published') }}</span>
<span><i class="fa-solid fa-circle" style="color: green"></i> {{ t('global.loading') }}</span>
<span><i class="fa-solid fa-circle" style="color: red"></i> {{ t('global.transit') }}</span>
<span><i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.downloading') }}</span>
<span><i class="fa-solid fa-circle" style="color: blue"></i> {{ t('global.delivered') }}</span>
</div>
<div class="box-filter"
@click="openPopup = true"
>
<span class="clear-sm" v-if="filter === null">{{ t('directory.directory') }}</span>
<span class="clear-sm" v-else>{{filter.label}}</span>
<i class="fa-solid fa-filter"></i>
</div>
</div>
</div>
<div class="calendar">
@@ -92,6 +169,10 @@
<Qalendar
:events="events"
:config="config"
@updated-mode="handleUpdateMode"
@updated-period="handleUpdatedPeriod"
@datetime-was-clicked="handleClickDate"
:is-loading="loading"
>
<template #eventDialog="props">
<div v-if="props.eventDialogData && props.eventDialogData.title" class="event-modal">
@@ -103,7 +184,7 @@
<span
class="tracking-icon"
:style="{color: props.eventDialogData.color}"
@click="redirectToTracking(props.eventDialogData.title)">
@click="redirectToTracking(props.eventDialogData.id)">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
</svg>
@@ -175,17 +256,49 @@
.box-indicators h2 {
display: flex;
justify-content: end;
justify-content: start;
font-weight: 600;
font-size: 1.2rem;
}
.header {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
gap: 1rem;
align-items: center;
// flex-wrap: wrap;
}
.box-filter {
padding: 12px 8px;
background-color: #FFF;
border-radius: 5px;
display: flex;
flex-direction: row;
border: 1px rgb(186, 175, 175) solid;
gap: 1rem;
align-items: center;
cursor: pointer;
}
.filters {
display: flex;
flex-direction: row;
align-items: center;
// flex-wrap: wrap;
flex: 1;
justify-content: end;
}
.indicators {
display: flex;
// flex: 1;
justify-content: end;
flex-direction: row;
align-items: center;
gap: 1rem;
gap: 0.7rem;
flex-wrap: wrap;
}
@@ -193,6 +306,10 @@
.calendar {
height: calc(100vh - 280px);
}
.header {
align-items: start;
}
}
</style>

3
src/views/LoadsPublishedView.vue
View File

@@ -57,6 +57,7 @@
const getLoadWithFilters = async(filter) => {
loading.value = true;
console.log(filter);
await loadStore.getCompanyLoads(filter, true);
loading.value = false;
}
@@ -64,7 +65,7 @@
const search = () => {
setTimeout(() => {
if(query.value.length >= 2){
// filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
// filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
filterQuery.value.search = "posted_by_name[$regex]="+query.value+"&posted_by_name[$options]=i";
getLoadWithFilters(filterQuery.value);
}

1
src/views/LocationsView.vue
View File

@@ -116,7 +116,6 @@
}
const selectedType = (type) => {
console.log(type)
typeDirection.value = type
openPopup.value = false
}

4
src/views/SearchLoadsView.vue
View File

@@ -75,8 +75,8 @@
const search = () => {
if(query.value.length >= 2){
// filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
filterQuery.value.search = "company.company_name[$regex]=" + query.value + "&company.company_name[$options]=i";
filterQuery.value.search = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
// filterQuery.value.search = "company.company_name[$regex]=" + query.value + "&company.company_name[$options]=i";
getLoadsPublished(filterQuery.value);
}