add: calendar view & calculator view
This commit is contained in:
Alexandro Uc Santos
@@ -1,13 +1,129 @@
|
||||
<script setup>
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { useCompanyStore } from '../stores/company';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import Spiner from '../components/ui/Spiner.vue';
|
||||
import CardBudget from '../components/CardBudget.vue';
|
||||
import CardEmpty from '../components/CardEmpty.vue';
|
||||
|
||||
const companyStore = useCompanyStore();
|
||||
const authStore = useAuthStore();
|
||||
|
||||
const loading = ref(false);
|
||||
const filterQuery = ref([]);
|
||||
const query = ref('');
|
||||
|
||||
onMounted(() => {
|
||||
getInitData();
|
||||
})
|
||||
|
||||
const getInitData = async() => {
|
||||
loading.value = true;
|
||||
filterQuery.value.company = "company="+ localStorage.getItem('id');
|
||||
await companyStore.getBudgetsCompany(filterQuery.value, false)
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const getBudgetsWithFilters = async(filter) => {
|
||||
loading.value = true;
|
||||
await companyStore.getBudgetsCompany(filter, true);
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
watch(query, () => {
|
||||
if(query.value.length === 0){
|
||||
filterQuery.value.search = "";
|
||||
getBudgetsWithFilters(filterQuery.value);
|
||||
}
|
||||
});
|
||||
|
||||
const search = () => {
|
||||
if(query.value.length >= 2){
|
||||
// filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
|
||||
filterQuery.value.search = "client[$regex]="+query.value+"&client[$options]=i";
|
||||
getBudgetsWithFilters(filterQuery.value);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const clearFilter = () => {
|
||||
filterQuery.value.search = "";
|
||||
filterQuery.value.company = "company="+ localStorage.getItem('id');
|
||||
|
||||
if(query.value == ''){
|
||||
getInitData();
|
||||
} else {
|
||||
query.value = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="title">Calculadora</h2>
|
||||
<h2 class="title my-2">Calculadora</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">
|
||||
</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>
|
||||
</button>
|
||||
<button
|
||||
class="btn-primary-sm radius-sm"
|
||||
data-toggle="modal" data-target="#formLoadModal"
|
||||
@click=""
|
||||
><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> presupuesto</span></button>
|
||||
</div>
|
||||
<Spiner v-if="loading"/>
|
||||
<div v-else>
|
||||
<CardBudget
|
||||
v-if="companyStore.budgets.length > 0"
|
||||
v-for="budget in companyStore.budgets"
|
||||
:budget="budget"
|
||||
/>
|
||||
<CardEmpty
|
||||
v-else
|
||||
text="No hay presupuestos agregados"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.box-filters {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
gap: 1rem;
|
||||
margin: 1.5rem 0px;
|
||||
}
|
||||
|
||||
.box-search {
|
||||
width: 60%;
|
||||
}
|
||||
.custom-search {
|
||||
width: 100%;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.box-search {
|
||||
width: 60%;
|
||||
}
|
||||
.box-filters {
|
||||
gap: .4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.box-search {
|
||||
width: 100%;
|
||||
}
|
||||
.box-filters {
|
||||
gap: .3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,13 +1,155 @@
|
||||
<script setup>
|
||||
import { Qalendar } from 'qalendar';
|
||||
import data from '../data/events.json';
|
||||
import {eventStatusLoad} from '../helpers/status';
|
||||
import {getDateTime} from '../helpers/date_formats';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const events = ref([]);
|
||||
const router = useRouter();
|
||||
const config = {
|
||||
week: {
|
||||
startsOn: 'monday',
|
||||
// Takes the values 5 or 7.
|
||||
nDays: 7,
|
||||
// Scroll to a certain hour on mounting a week. Takes any value from 0 to 23.
|
||||
// This option is not compatible with the 'dayBoundaries'-option, and will simply be ignored if custom day boundaries are set.
|
||||
scrollToHour: 0,
|
||||
},
|
||||
month: {
|
||||
showTrailingAndLeadingDates: false
|
||||
},
|
||||
style: {
|
||||
fontFamily: 'Nunito',
|
||||
colorSchemes: {
|
||||
meetings: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#131313",
|
||||
},
|
||||
sports: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#ff4081",
|
||||
},
|
||||
},
|
||||
},
|
||||
eventDialog:{
|
||||
isCustom: true
|
||||
},
|
||||
defaultMode: 'month',
|
||||
isSilent: true,
|
||||
// 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);
|
||||
events.value.push({
|
||||
id: i,
|
||||
title: e.shipment_code,
|
||||
// isEditable: true,
|
||||
// isCustom: true,
|
||||
with: indicator.status,
|
||||
description: indicator.status,
|
||||
color: indicator.color,
|
||||
time: {
|
||||
start: dateStart,
|
||||
end: dateEnd
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
const redirectToTracking = (code) => {
|
||||
router.push({
|
||||
name: 'tracking-load',
|
||||
params: {code}
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="title">Calendario</h2>
|
||||
<div class="calendar">
|
||||
<!-- <div class="calendar is-light-mode"> -->
|
||||
<Qalendar
|
||||
:events="events"
|
||||
:config="config"
|
||||
>
|
||||
<template #eventDialog="props">
|
||||
<div v-if="props.eventDialogData && props.eventDialogData.title" class="event-modal">
|
||||
<h2>Información del status de la carga</h2>
|
||||
<!-- <p>Código de carga: <span :style="{color: props.eventDialogData.color}">{{props.eventDialogData.title}}</span></p> -->
|
||||
<p>
|
||||
Código de carga:
|
||||
<span> {{props.eventDialogData.title}}</span>
|
||||
<span
|
||||
class="tracking-icon"
|
||||
:style="{color: props.eventDialogData.color}"
|
||||
@click="redirectToTracking(props.eventDialogData.title)">
|
||||
<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>
|
||||
</span>
|
||||
</p>
|
||||
<p>Estatus de la carga: <i :style="{color: props.eventDialogData.color}" class="fa-solid fa-circle"></i> <span>{{props.eventDialogData.with}}</span></p>
|
||||
|
||||
<button class="btn btn-dark" @click="props.closeEventDialog">
|
||||
Cerrar
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Qalendar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
<style src="qalendar/dist/style.css"></style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.calendar {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
.tracking-icon {
|
||||
cursor: pointer;
|
||||
color: #f2a23f;
|
||||
}
|
||||
|
||||
.tracking-icon svg{
|
||||
height: 30px;
|
||||
}
|
||||
.tracking-icon:hover {
|
||||
color: #ddb380;;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.tracking-icon svg:hover{
|
||||
height: 33px;
|
||||
}
|
||||
|
||||
.event-modal {
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.event-modal h2 {
|
||||
color: rgb(208, 182, 182);
|
||||
font-family: sans-serif;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 900;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.event-modal p {
|
||||
color: rgb(208, 182, 182);
|
||||
font-family: sans-serif;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user