feat: datepicker script setup (#2456)
Co-authored-by: Dominik Pschenitschni <mail@celement.de> Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/2456 Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni
konrad
parent
63fb8a1962
commit
ff1968aa36
2 changed files with 131 additions and 139 deletions
|
|
@ -88,12 +88,10 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue'
|
||||
|
||||
<script setup lang="ts">
|
||||
import {ref, onMounted, onBeforeUnmount, toRef, watch, computed, type PropType} from 'vue'
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
import 'flatpickr/dist/flatpickr.css'
|
||||
import {i18n} from '@/i18n'
|
||||
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
|
|
@ -102,146 +100,140 @@ import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
|
|||
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
|
||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||
import {createDateFromString} from '@/helpers/time/createDateFromString'
|
||||
import {mapState} from 'pinia'
|
||||
import {useAuthStore} from '@/stores/auth'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'datepicker',
|
||||
data() {
|
||||
return {
|
||||
date: null,
|
||||
show: false,
|
||||
changed: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
flatPickr,
|
||||
BaseButton,
|
||||
},
|
||||
props: {
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: [Date, null, String] as PropType<Date | null | string>,
|
||||
validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
|
||||
default: null,
|
||||
},
|
||||
chooseDateLabel: {
|
||||
type: String,
|
||||
default() {
|
||||
return i18n.global.t('input.datepicker.chooseDate')
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
return t('input.datepicker.chooseDate')
|
||||
},
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['update:modelValue', 'close', 'close-on-change'],
|
||||
mounted() {
|
||||
document.addEventListener('click', this.hideDatePopup)
|
||||
},
|
||||
beforeUnmount() {
|
||||
document.removeEventListener('click', this.hideDatePopup)
|
||||
},
|
||||
watch: {
|
||||
modelValue: {
|
||||
handler: 'setDateValue',
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAuthStore, {
|
||||
weekStart: (state) => state.settings.weekStart,
|
||||
}),
|
||||
flatPickerConfig() {
|
||||
return {
|
||||
altFormat: this.$t('date.altFormatLong'),
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
|
||||
|
||||
const {t} = useI18n({useScope: 'global'})
|
||||
|
||||
const date = ref<Date | null>()
|
||||
const show = ref(false)
|
||||
const changed = ref(false)
|
||||
|
||||
onMounted(() => document.addEventListener('click', hideDatePopup))
|
||||
onBeforeUnmount(() =>document.removeEventListener('click', hideDatePopup))
|
||||
|
||||
const modelValue = toRef(props, 'modelValue')
|
||||
watch(
|
||||
modelValue,
|
||||
setDateValue,
|
||||
{immediate: true},
|
||||
)
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const weekStart = computed(() => authStore.settings.weekStart)
|
||||
const flatPickerConfig = computed(() => ({
|
||||
altFormat: t('date.altFormatLong'),
|
||||
altInput: true,
|
||||
dateFormat: 'Y-m-d H:i',
|
||||
enableTime: true,
|
||||
time_24hr: true,
|
||||
inline: true,
|
||||
locale: {
|
||||
firstDayOfWeek: this.weekStart,
|
||||
},
|
||||
}
|
||||
firstDayOfWeek: weekStart.value,
|
||||
},
|
||||
}))
|
||||
|
||||
// Since flatpickr dates are strings, we need to convert them to native date objects.
|
||||
// To make that work, we need a separate variable since flatpickr does not have a change event.
|
||||
flatPickrDate: {
|
||||
set(newValue) {
|
||||
this.date = createDateFromString(newValue)
|
||||
this.updateData()
|
||||
const flatPickrDate = computed({
|
||||
set(newValue: string | Date) {
|
||||
date.value = createDateFromString(newValue)
|
||||
updateData()
|
||||
},
|
||||
get() {
|
||||
if (!this.date) {
|
||||
if (!date.value) {
|
||||
return ''
|
||||
}
|
||||
|
||||
return formatDate(this.date, 'yyy-LL-dd H:mm')
|
||||
return formatDate(date.value, 'yyy-LL-dd H:mm')
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
formatDateShort,
|
||||
setDateValue(newVal) {
|
||||
if (newVal === null) {
|
||||
this.date = null
|
||||
})
|
||||
|
||||
|
||||
function setDateValue(dateString: string | Date | null) {
|
||||
if (dateString === null) {
|
||||
date.value = null
|
||||
return
|
||||
}
|
||||
this.date = createDateFromString(newVal)
|
||||
},
|
||||
updateData() {
|
||||
this.changed = true
|
||||
this.$emit('update:modelValue', this.date)
|
||||
},
|
||||
toggleDatePopup() {
|
||||
if (this.disabled) {
|
||||
date.value = createDateFromString(dateString)
|
||||
}
|
||||
|
||||
function updateData() {
|
||||
changed.value = true
|
||||
emit('update:modelValue', date.value)
|
||||
}
|
||||
|
||||
function toggleDatePopup() {
|
||||
if (props.disabled) {
|
||||
return
|
||||
}
|
||||
|
||||
this.show = !this.show
|
||||
},
|
||||
hideDatePopup(e) {
|
||||
if (this.show) {
|
||||
closeWhenClickedOutside(e, this.$refs.datepickerPopup, this.close)
|
||||
show.value = !show.value
|
||||
}
|
||||
},
|
||||
close() {
|
||||
|
||||
const datepickerPopup = ref<HTMLElement | null>(null)
|
||||
function hideDatePopup(e) {
|
||||
if (show.value) {
|
||||
closeWhenClickedOutside(e, datepickerPopup.value, close)
|
||||
}
|
||||
}
|
||||
|
||||
function close() {
|
||||
// Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
|
||||
// having to click on another input field before it is actually used.
|
||||
setTimeout(() => {
|
||||
this.show = false
|
||||
this.$emit('close', this.changed)
|
||||
if (this.changed) {
|
||||
this.changed = false
|
||||
this.$emit('close-on-change', this.changed)
|
||||
show.value = false
|
||||
emit('close', changed.value)
|
||||
if (changed.value) {
|
||||
changed.value = false
|
||||
emit('close-on-change', changed.value)
|
||||
}
|
||||
}, 200)
|
||||
},
|
||||
setDate(date) {
|
||||
if (this.date === null) {
|
||||
this.date = new Date()
|
||||
}
|
||||
|
||||
const interval = calculateDayInterval(date)
|
||||
function setDate(dateString: string) {
|
||||
if (date.value === null) {
|
||||
date.value = new Date()
|
||||
}
|
||||
|
||||
const interval = calculateDayInterval(dateString)
|
||||
const newDate = new Date()
|
||||
newDate.setDate(newDate.getDate() + interval)
|
||||
newDate.setHours(calculateNearestHours(newDate))
|
||||
newDate.setMinutes(0)
|
||||
newDate.setSeconds(0)
|
||||
this.date = newDate
|
||||
this.flatPickrDate = newDate
|
||||
this.updateData()
|
||||
},
|
||||
getDayIntervalFromString(date) {
|
||||
return calculateDayInterval(date)
|
||||
},
|
||||
getWeekdayFromStringInterval(date) {
|
||||
const interval = calculateDayInterval(date)
|
||||
date.value = newDate
|
||||
flatPickrDate.value = newDate
|
||||
updateData()
|
||||
}
|
||||
|
||||
function getWeekdayFromStringInterval(dateString: string) {
|
||||
const interval = calculateDayInterval(dateString)
|
||||
const newDate = new Date()
|
||||
newDate.setDate(newDate.getDate() + interval)
|
||||
return formatDate(newDate, 'E')
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
export function calculateDayInterval(date, currentDay = (new Date().getDay())) {
|
||||
switch (date) {
|
||||
export function calculateDayInterval(dateString: string, currentDay = (new Date().getDay())) {
|
||||
switch (dateString) {
|
||||
case 'today':
|
||||
return 0
|
||||
case 'tomorrow':
|
||||
|
|
|
|||
Loading…
Reference in a new issue