145 lines
4.2 KiB
JavaScript
145 lines
4.2 KiB
JavaScript
|
|
import { computed, ref } from 'vue'
|
||
|
|
|
||
|
|
import {
|
||
|
|
buildWorkbenchDateLabel,
|
||
|
|
canApplyWorkbenchDateSelection,
|
||
|
|
getTodayDateValue,
|
||
|
|
mergeWorkbenchDateLabelIntoDraft,
|
||
|
|
stripWorkbenchDateLabelFromDraft
|
||
|
|
} from '../utils/workbenchComposerDate.js'
|
||
|
|
|
||
|
|
export function useWorkbenchComposerDate({ draft, focusInput } = {}) {
|
||
|
|
const workbenchDatePickerOpen = ref(false)
|
||
|
|
const workbenchDateMode = ref('single')
|
||
|
|
const workbenchSingleDate = ref(getTodayDateValue())
|
||
|
|
const workbenchRangeStartDate = ref(getTodayDateValue())
|
||
|
|
const workbenchRangeEndDate = ref(getTodayDateValue())
|
||
|
|
const workbenchDateTagLabel = ref('')
|
||
|
|
|
||
|
|
const workbenchCanApplyDateSelection = computed(() =>
|
||
|
|
canApplyWorkbenchDateSelection({
|
||
|
|
mode: workbenchDateMode.value,
|
||
|
|
singleDate: workbenchSingleDate.value,
|
||
|
|
rangeStartDate: workbenchRangeStartDate.value,
|
||
|
|
rangeEndDate: workbenchRangeEndDate.value
|
||
|
|
})
|
||
|
|
)
|
||
|
|
|
||
|
|
function clearWorkbenchDateSelection() {
|
||
|
|
const today = getTodayDateValue()
|
||
|
|
workbenchDatePickerOpen.value = false
|
||
|
|
workbenchDateMode.value = 'single'
|
||
|
|
workbenchSingleDate.value = today
|
||
|
|
workbenchRangeStartDate.value = today
|
||
|
|
workbenchRangeEndDate.value = today
|
||
|
|
workbenchDateTagLabel.value = ''
|
||
|
|
}
|
||
|
|
|
||
|
|
function ensureWorkbenchDateDefaults() {
|
||
|
|
const today = getTodayDateValue()
|
||
|
|
workbenchSingleDate.value ||= today
|
||
|
|
workbenchRangeStartDate.value ||= workbenchSingleDate.value || today
|
||
|
|
workbenchRangeEndDate.value ||= workbenchRangeStartDate.value || today
|
||
|
|
}
|
||
|
|
|
||
|
|
function toggleWorkbenchDatePicker() {
|
||
|
|
if (workbenchDatePickerOpen.value) {
|
||
|
|
workbenchDatePickerOpen.value = false
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
ensureWorkbenchDateDefaults()
|
||
|
|
workbenchDatePickerOpen.value = true
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeWorkbenchDatePicker() {
|
||
|
|
workbenchDatePickerOpen.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
function setWorkbenchDateMode(mode) {
|
||
|
|
const today = getTodayDateValue()
|
||
|
|
const nextMode = mode === 'range' ? 'range' : 'single'
|
||
|
|
|
||
|
|
if (nextMode === 'range') {
|
||
|
|
const baseDate = workbenchSingleDate.value || today
|
||
|
|
workbenchRangeStartDate.value ||= baseDate
|
||
|
|
workbenchRangeEndDate.value ||= workbenchRangeStartDate.value
|
||
|
|
} else {
|
||
|
|
workbenchSingleDate.value ||= workbenchRangeStartDate.value || today
|
||
|
|
}
|
||
|
|
|
||
|
|
workbenchDateMode.value = nextMode
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleWorkbenchDatePickerOutside(event) {
|
||
|
|
if (!workbenchDatePickerOpen.value) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (event.target instanceof Element && event.target.closest('.workbench-date-anchor')) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
workbenchDatePickerOpen.value = false
|
||
|
|
}
|
||
|
|
|
||
|
|
function applyWorkbenchDateSelection() {
|
||
|
|
const label = buildWorkbenchDateLabel({
|
||
|
|
mode: workbenchDateMode.value,
|
||
|
|
singleDate: workbenchSingleDate.value,
|
||
|
|
rangeStartDate: workbenchRangeStartDate.value,
|
||
|
|
rangeEndDate: workbenchRangeEndDate.value
|
||
|
|
})
|
||
|
|
if (!label) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
workbenchDateTagLabel.value = label
|
||
|
|
draft.value = stripWorkbenchDateLabelFromDraft(draft.value)
|
||
|
|
workbenchDatePickerOpen.value = false
|
||
|
|
focusInput?.()
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleWorkbenchDateInputChange(part = 'single') {
|
||
|
|
if (workbenchDateMode.value !== 'range' || part === 'single') {
|
||
|
|
applyWorkbenchDateSelection()
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
if (part === 'range-start') {
|
||
|
|
if (!workbenchRangeEndDate.value || workbenchRangeEndDate.value < workbenchRangeStartDate.value) {
|
||
|
|
workbenchRangeEndDate.value = workbenchRangeStartDate.value
|
||
|
|
}
|
||
|
|
return
|
||
|
|
}
|
||
|
|
|
||
|
|
applyWorkbenchDateSelection()
|
||
|
|
}
|
||
|
|
|
||
|
|
function removeWorkbenchDateTag() {
|
||
|
|
workbenchDateTagLabel.value = ''
|
||
|
|
focusInput?.()
|
||
|
|
}
|
||
|
|
|
||
|
|
function buildWorkbenchPromptText(rawText = draft.value) {
|
||
|
|
return mergeWorkbenchDateLabelIntoDraft(rawText, workbenchDateTagLabel.value)
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
workbenchDatePickerOpen,
|
||
|
|
workbenchDateMode,
|
||
|
|
workbenchSingleDate,
|
||
|
|
workbenchRangeStartDate,
|
||
|
|
workbenchRangeEndDate,
|
||
|
|
workbenchDateTagLabel,
|
||
|
|
workbenchCanApplyDateSelection,
|
||
|
|
clearWorkbenchDateSelection,
|
||
|
|
toggleWorkbenchDatePicker,
|
||
|
|
closeWorkbenchDatePicker,
|
||
|
|
setWorkbenchDateMode,
|
||
|
|
handleWorkbenchDatePickerOutside,
|
||
|
|
applyWorkbenchDateSelection,
|
||
|
|
handleWorkbenchDateInputChange,
|
||
|
|
removeWorkbenchDateTag,
|
||
|
|
buildWorkbenchPromptText
|
||
|
|
}
|
||
|
|
}
|