feat: add new component for a datepicker with range
This commit is contained in:
parent
7408c37dec
commit
8115563d67
GPG Key ID:
F40E70337AB24C9B
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<div class="datepicker-with-range">
|
||||
<div class="selections">
|
||||
<a @click="setDatesToToday">Today</a>
|
||||
<a @click="setDatesToNextWeek">Next Week</a>
|
||||
<a @click="setDatesToNextMonth">Next Month</a>
|
||||
<a>Custom</a>
|
||||
</div>
|
||||
<div class="flatpickr-container">
|
||||
<flat-pickr
|
||||
:config="flatPickerConfig"
|
||||
v-model="dateRange"
|
||||
/>
|
||||
{{ dateRange }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {store} from '@/store'
|
||||
import {format} from 'date-fns'
|
||||
|
||||
const {t} = useI18n()
|
||||
|
||||
const emit = defineEmits(['dateChanged'])
|
||||
|
||||
const weekStart = computed(() => store.state.auth.settings.weekStart)
|
||||
const flatPickerConfig = computed(() => ({
|
||||
altFormat: t('date.altFormatLong'),
|
||||
altInput: true,
|
||||
dateFormat: 'Y-m-d H:i',
|
||||
enableTime: true,
|
||||
time_24hr: true,
|
||||
inline: true,
|
||||
mode: 'range',
|
||||
locale: {
|
||||
// FIXME: This seems to always contain the default value
|
||||
firstDayOfWeek: weekStart,
|
||||
},
|
||||
}))
|
||||
|
||||
const dateRange = ref('')
|
||||
|
||||
watch(
|
||||
() => dateRange.value,
|
||||
newVal => {
|
||||
const [fromDate, toDate] = newVal.split(' to ')
|
||||
|
||||
if (typeof fromDate === 'undefined' || typeof toDate === 'undefined') {
|
||||
return
|
||||
}
|
||||
|
||||
emit('dateChanged', {
|
||||
dateFrom: new Date(fromDate),
|
||||
dateTo: new Date(toDate),
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
function formatDate(date) {
|
||||
return format(date, 'yyyy-MM-dd HH:mm')
|
||||
}
|
||||
|
||||
function setDatesToToday() {
|
||||
const startDate = new Date()
|
||||
const endDate = new Date((new Date()).setDate((new Date()).getDate() + 1))
|
||||
dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
|
||||
}
|
||||
|
||||
function setDatesToNextWeek() {
|
||||
const startDate = new Date()
|
||||
const endDate = new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000)
|
||||
dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
|
||||
}
|
||||
|
||||
function setDatesToNextMonth() {
|
||||
const startDate = new Date()
|
||||
const endDate = new Date((new Date()).setMonth((new Date()).getMonth() + 1))
|
||||
dateRange.value = `${formatDate(startDate)} to ${formatDate(endDate)}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.datepicker-with-range {
|
||||
border-radius: $radius;
|
||||
border: 1px solid var(--grey-200);
|
||||
background-color: var(--white);
|
||||
box-shadow: $shadow;
|
||||
display: flex;
|
||||
width: 500px;
|
||||
|
||||
:deep(.flatpickr-calendar) {
|
||||
margin: 0 auto 8px;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-container {
|
||||
width: 70%;
|
||||
border-left: 1px solid var(--grey-200);
|
||||
|
||||
:deep(input.input) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.selections {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: .5rem 1rem;
|
||||
transition: $transition;
|
||||
font-size: .9rem;
|
||||
color: var(--text);
|
||||
|
||||
&.active {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
&:hover, &.active {
|
||||
background-color: var(--grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
{{ pageTitle }}
|
||||
</h3>
|
||||
<!-- FIXME: Styling, maybe in combination with the buttons? -->
|
||||
<p class="is-flex" v-if="!showAll">
|
||||
<p v-if="!showAll">
|
||||
{{ $t('task.show.select') }}
|
||||
<flat-pickr
|
||||
:class="{ 'disabled': loading}"
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
@on-close="setDate"
|
||||
v-model="dateRange"
|
||||
/>
|
||||
<datepicker-with-range @dateChanged="setDate"/>
|
||||
</p>
|
||||
<div v-if="!showAll" class="mb-4 mt-2">
|
||||
<x-button type="secondary" @click="showTodaysTasks()" class="mr-2">
|
||||
|
|
@ -62,6 +63,7 @@ import Fancycheckbox from '@/components/input/fancycheckbox'
|
|||
import {LOADING, LOADING_MODULE} from '@/store/mutation-types'
|
||||
|
||||
import LlamaCool from '@/assets/llama-cool.svg?component'
|
||||
import DatepickerWithRange from '@/components/date/datepickerWithRange'
|
||||
|
||||
function formatDate(date) {
|
||||
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}`
|
||||
|
|
@ -70,6 +72,7 @@ function formatDate(date) {
|
|||
export default {
|
||||
name: 'ShowTasks',
|
||||
components: {
|
||||
DatepickerWithRange,
|
||||
Fancycheckbox,
|
||||
SingleTaskInList,
|
||||
flatPickr,
|
||||
|
|
@ -81,6 +84,7 @@ export default {
|
|||
showNulls: true,
|
||||
showOverdue: false,
|
||||
|
||||
// TODO: Set the date range based on the default (to make sure it shows up in the picker) -> maybe also use a computed which depends on dateFrom and dateTo?
|
||||
dateRange: null,
|
||||
|
||||
showNothingToDo: false,
|
||||
|
|
@ -150,18 +154,12 @@ export default {
|
|||
}),
|
||||
},
|
||||
methods: {
|
||||
setDate() {
|
||||
if (this.dateRange === null) {
|
||||
return
|
||||
}
|
||||
|
||||
const [fromDate, toDate] = this.dateRange.split(' to ')
|
||||
|
||||
setDate({dateFrom, dateTo}) {
|
||||
this.$router.push({
|
||||
name: this.$route.name,
|
||||
query: {
|
||||
from: +new Date(fromDate),
|
||||
to: +new Date(toDate),
|
||||
from: +new Date(dateFrom),
|
||||
to: +new Date(dateTo),
|
||||
showOverdue: this.showOverdue,
|
||||
showNulls: this.showNulls,
|
||||
},
|
||||
|
|
|
|||
Reference in New Issue