ami/tl-vikunja
1
0
Fork 0
Code

chore: clean up

Browse Source
This commit is contained in:
Dominik Pschenitschni 2022-10-17 23:20:52 +02:00 committed by kolaente
parent eaf777864a
commit 2acb70c562
No known key found for this signature in database
GPG Key ID: F40E70337AB24C9B
9 changed files with 132 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/misc/flatpickr/Flatpickr.vue
View File

@ -9,7 +9,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Flatpickr from 'flatpickr'; import Flatpickr from 'flatpickr'
import 'flatpickr/dist/flatpickr.css' import 'flatpickr/dist/flatpickr.css'
// FIXME: Not sure how to alias these correctly // FIXME: Not sure how to alias these correctly
@ -20,18 +20,22 @@ type Options = Flatpickr.Options.Options
type DateOption = Flatpickr.Options.DateOption type DateOption = Flatpickr.Options.DateOption
function camelToKebab(string: string) { function camelToKebab(string: string) {
return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
};
function arrayify<T extends unknown>(obj: T) {
return obj instanceof Array ? obj : [obj];
} }
function nullify<T extends unknown>(value: T) { function arrayify<T = unknown>(obj: T) {
return (value && (value as unknown[]).length) ? value : null; return obj instanceof Array
? obj
: [obj]
} }
function cloneObject<T extends {}>(obj: T): T { function nullify<T = unknown>(value: T) {
return (value && (value as unknown[]).length)
? value
: null
}
function cloneObject<T = Record<string, unknown>>(obj: T): T {
return Object.assign({}, obj) return Object.assign({}, obj)
} }
@ -56,13 +60,13 @@ const excludedEvents = [
] as HookKey[] ] as HookKey[]
// Keep a copy of all events for later use // Keep a copy of all events for later use
const allEvents = includedEvents.concat(excludedEvents); const allEvents = includedEvents.concat(excludedEvents)
export default {inheritAttrs: false} export default {inheritAttrs: false}
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import {computed, onBeforeUnmount, onMounted, ref, toRefs, useAttrs, watch, watchEffect, type PropType} from 'vue'; import {computed, onBeforeUnmount, onMounted, ref, toRefs, useAttrs, watch, watchEffect, type PropType} from 'vue'
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
@ -85,23 +89,23 @@ const props = defineProps({
type: Object as PropType<Options>, type: Object as PropType<Options>,
default: () => ({ default: () => ({
wrap: false, wrap: false,
defaultDate: null defaultDate: null,
}) }),
}, },
events: { events: {
type: Array as PropType<HookKey[]>, type: Array as PropType<HookKey[]>,
default: () => includedEvents default: () => includedEvents,
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false,
} },
}) })
const emit = defineEmits([ const emit = defineEmits([
'blur', 'blur',
'update:modelValue', 'update:modelValue',
...allEvents.map(camelToKebab) ...allEvents.map(camelToKebab),
]) ])
const {modelValue, config, disabled} = toRefs(props) const {modelValue, config, disabled} = toRefs(props)
@ -110,12 +114,12 @@ const {modelValue, config, disabled} = toRefs(props)
const attrs = useAttrs() const attrs = useAttrs()
const root = ref<HTMLInputElement | null>(null) const root = ref<HTMLInputElement | null>(null)
let fp = ref<Flatpickr.Instance | null>(null) const fp = ref<Flatpickr.Instance | null>(null)
const safeConfig = ref<Options>(cloneObject(props.config)) const safeConfig = ref<Options>(cloneObject(props.config))
onMounted(() => { onMounted(() => {
// Don't mutate original object on parent component // Don't mutate original object on parent component
let newConfig = cloneObject(props.config); const newConfig = cloneObject(props.config)
if ( if (
fp.value || // Return early if flatpickr is already loaded fp.value || // Return early if flatpickr is already loaded
@ -126,7 +130,7 @@ onMounted(() => {
props.events.forEach((hook) => { props.events.forEach((hook) => {
// Respect global callbacks registered via setDefault() method // Respect global callbacks registered via setDefault() method
const globalCallbacks = Flatpickr.defaultConfig[hook] || []; const globalCallbacks = Flatpickr.defaultConfig[hook] || []
// Inject our own method along with user callback // Inject our own method along with user callback
const localCallback: Hook = (...args) => emit(camelToKebab(hook), ...args) const localCallback: Hook = (...args) => emit(camelToKebab(hook), ...args)
@ -134,9 +138,9 @@ onMounted(() => {
// Overwrite with merged array // Overwrite with merged array
newConfig[hook] = arrayify(newConfig[hook] || []).concat( newConfig[hook] = arrayify(newConfig[hook] || []).concat(
globalCallbacks, globalCallbacks,
localCallback localCallback,
); )
}); })
// Watch for value changed by date-picker itself and notify parent component // Watch for value changed by date-picker itself and notify parent component
const onChange: Hook = (dates) => emit('update:modelValue', dates) const onChange: Hook = (dates) => emit('update:modelValue', dates)
@ -147,7 +151,7 @@ onMounted(() => {
// newConfig['onClose'] = arrayify(newConfig['onClose'] || []).concat(onClose) // newConfig['onClose'] = arrayify(newConfig['onClose'] || []).concat(onClose)
// Set initial date without emitting any event // Set initial date without emitting any event
newConfig.defaultDate = props.modelValue || newConfig.defaultDate; newConfig.defaultDate = props.modelValue || newConfig.defaultDate
safeConfig.value = newConfig safeConfig.value = newConfig
@ -156,11 +160,11 @@ onMounted(() => {
* Bind on parent element if wrap is true * Bind on parent element if wrap is true
*/ */
const element = props.config.wrap const element = props.config.wrap
? root.value.parentNode as ParentNode ? root.value.parentNode
: root.value : root.value
// Init flatpickr // Init flatpickr
fp.value = Flatpickr(element, safeConfig.value); fp.value = Flatpickr(element, safeConfig.value)
}) })
onBeforeUnmount(() => fp.value?.destroy()) onBeforeUnmount(() => fp.value?.destroy())
@ -171,9 +175,9 @@ watch(config, () => {
// Notice: we are looping through all events // Notice: we are looping through all events
// This also means that new callbacks can not be passed once component has been initialized // This also means that new callbacks can not be passed once component has been initialized
allEvents.forEach((hook) => { allEvents.forEach((hook) => {
delete safeConfig.value?.[hook]; delete safeConfig.value?.[hook]
}); })
fp.value.set(safeConfig.value); fp.value.set(safeConfig.value)
// Passing these properties in `set()` method will cause flatpickr to trigger some callbacks // Passing these properties in `set()` method will cause flatpickr to trigger some callbacks
const configCallbacks = ['locale', 'showMonths'] as (keyof Options)[] const configCallbacks = ['locale', 'showMonths'] as (keyof Options)[]
@ -181,14 +185,14 @@ watch(config, () => {
// Workaround: Allow to change locale dynamically // Workaround: Allow to change locale dynamically
configCallbacks.forEach(name => { configCallbacks.forEach(name => {
if (typeof safeConfig.value?.[name] !== 'undefined' && fp.value) { if (typeof safeConfig.value?.[name] !== 'undefined' && fp.value) {
fp.value.set(name, safeConfig.value[name]); fp.value.set(name, safeConfig.value[name])
} }
}); })
}, {deep:true}) }, {deep:true})
const fpInput = computed(() => { const fpInput = computed(() => {
if (!fp.value) return if (!fp.value) return
return fp.value.altInput || fp.value.input; return fp.value.altInput || fp.value.input
}) })
/** /**
@ -196,7 +200,7 @@ const fpInput = computed(() => {
* (is required by many validation libraries) * (is required by many validation libraries)
*/ */
function onBlur(event: Event) { function onBlur(event: Event) {
emit('blur', nullify((event.target as HTMLInputElement).value)); emit('blur', nullify((event.target as HTMLInputElement).value))
} }
watchEffect(() => fpInput.value?.addEventListener('blur', onBlur)) watchEffect(() => fpInput.value?.addEventListener('blur', onBlur))
@ -207,9 +211,9 @@ onBeforeUnmount(() => fpInput.value?.removeEventListener('blur', onBlur))
*/ */
watchEffect(() => { watchEffect(() => {
if (disabled.value) { if (disabled.value) {
fpInput.value?.setAttribute('disabled', ''); fpInput.value?.setAttribute('disabled', '')
} else { } else {
fpInput.value?.removeAttribute('disabled'); fpInput.value?.removeAttribute('disabled')
} }
}) })
@ -220,11 +224,11 @@ watch(
modelValue, modelValue,
newValue => { newValue => {
// Prevent updates if v-model value is same as input's current value // Prevent updates if v-model value is same as input's current value
if (!root.value || newValue === nullify(root.value.value)) return; if (!root.value || newValue === nullify(root.value.value)) return
// Make sure we have a flatpickr instanceand // Make sure we have a flatpickr instanceand
// Notify flatpickr instance that there is a change in value // Notify flatpickr instance that there is a change in value
fp.value?.setDate(newValue, true); fp.value?.setDate(newValue, true)
}, },
{deep: true} {deep: true},
) )
</script> </script>

118
src/components/tasks/gantt-chart.vue
View File

@ -41,7 +41,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {computed, ref, watch, watchEffect, shallowReactive, type CSSProperties} from 'vue' import {computed, ref, watch, watchEffect, shallowReactive} from 'vue'
import {useRouter} from 'vue-router' import {useRouter} from 'vue-router'
import {format, parse} from 'date-fns' import {format, parse} from 'date-fns'
import dayjs from 'dayjs' import dayjs from 'dayjs'
@ -51,9 +51,11 @@ import cloneDeep from 'lodash.clonedeep'
import {useDayjsLanguageSync} from '@/i18n' import {useDayjsLanguageSync} from '@/i18n'
import TaskCollectionService from '@/services/taskCollection' import TaskCollectionService from '@/services/taskCollection'
import TaskService from '@/services/task' import TaskService from '@/services/task'
import TaskModel, { getHexColor } from '@/models/task' import TaskModel, {getHexColor} from '@/models/task'
import {colorIsDark} from '@/helpers/color/colorIsDark' import {colorIsDark} from '@/helpers/color/colorIsDark'
import {isoToKebabDate} from '@/helpers/time/isoToKebabDate'
import {parseKebabDate} from '@/helpers/time/parseKebabDate'
import {RIGHTS} from '@/constants/rights' import {RIGHTS} from '@/constants/rights'
import type {ITask} from '@/modelTypes/ITask' import type {ITask} from '@/modelTypes/ITask'
@ -70,14 +72,8 @@ import Loading from '@/components/misc/loading.vue'
import TaskForm from '@/components/tasks/TaskForm.vue' import TaskForm from '@/components/tasks/TaskForm.vue'
import {useBaseStore} from '@/stores/base' import {useBaseStore} from '@/stores/base'
import { error, success } from '@/message' import {error, success} from '@/message'
export type DateRange = {
dateFrom: string,
dateTo: string,
}
// export interface GanttChartProps extends DateRange {
export interface GanttChartProps { export interface GanttChartProps {
listId: IList['id'] listId: IList['id']
showTasksWithoutDates: boolean showTasksWithoutDates: boolean
@ -85,8 +81,6 @@ export interface GanttChartProps {
dateTo: string, dateTo: string,
} }
// export const DATE_FORMAT = 'yyyy-LL-dd HH:mm'
const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD' const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD'
const props = withDefaults(defineProps<GanttChartProps>(), { const props = withDefaults(defineProps<GanttChartProps>(), {
@ -94,8 +88,7 @@ const props = withDefaults(defineProps<GanttChartProps>(), {
}) })
// setup dayjs for vue-ganttastic // setup dayjs for vue-ganttastic
const dayjsLanguageLoading = ref(false) const dayjsLanguageLoading = useDayjsLanguageSync(dayjs)
// const dayjsLanguageLoading = useDayjsLanguageSync(dayjs)
dayjs.extend(isToday) dayjs.extend(isToday)
extendDayjs() extendDayjs()
@ -126,26 +119,18 @@ watch(
ganttBars.value = [] ganttBars.value = []
tasks.value.forEach(t => ganttBars.value.push(transformTaskToGanttBar(t))) tasks.value.forEach(t => ganttBars.value.push(transformTaskToGanttBar(t)))
}, },
{deep: true} {deep: true},
) )
type DateKebab = `${string}-${string}-${string}` const today = new Date(new Date(props.dateFrom).setHours(0,0,0,0))
type DateISO = string const defaultTaskStartDate = new Date(today)
const DATE_FORMAT_KEBAB = 'yyyy-LL-dd' const defaultTaskEndDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7, 23,59,0,0)
function isoToKebabDate(isoDate: DateISO) {
return format(new Date(isoDate), DATE_FORMAT_KEBAB) as DateKebab
}
const now = new Date()
const defaultStartDate = new Date(now)
const defaultEndDate = new Date(now.setDate(now.getDate() + 7))
function transformTaskToGanttBar(t: ITask) { function transformTaskToGanttBar(t: ITask) {
const black = 'var(--grey-800)' const black = 'var(--grey-800)'
console.log(t)
return [{ return [{
startDate: isoToKebabDate(t.startDate ? t.startDate.toISOString() : defaultStartDate.toISOString()), startDate: isoToKebabDate(t.startDate ? t.startDate.toISOString() : defaultTaskStartDate.toISOString()),
endDate: isoToKebabDate(t.endDate ? t.endDate.toISOString() : defaultEndDate.toISOString()), endDate: isoToKebabDate(t.endDate ? t.endDate.toISOString() : defaultTaskEndDate.toISOString()),
ganttBarConfig: { ganttBarConfig: {
id: String(t.id), id: String(t.id),
label: t.title, label: t.title,
@ -162,13 +147,13 @@ function transformTaskToGanttBar(t: ITask) {
// FIXME: unite with other filter params types // FIXME: unite with other filter params types
interface GetAllTasksParams { interface GetAllTasksParams {
sort_by: ('start_date' | 'done' | 'id')[], sort_by: ('start_date' | 'done' | 'id')[],
order_by: ('asc' | 'asc' | 'desc')[], order_by: ('asc' | 'asc' | 'desc')[],
filter_by: 'start_date'[], filter_by: 'start_date'[],
filter_comparator: ('greater_equals' | 'less_equals')[], filter_comparator: ('greater_equals' | 'less_equals')[],
filter_value: [string, string] // [dateFrom, dateTo], filter_value: [string, string] // [dateFrom, dateTo],
filter_concat: 'and', filter_concat: 'and',
filter_include_nulls: boolean, filter_include_nulls: boolean,
} }
async function getAllTasks(params: GetAllTasksParams, page = 1): Promise<ITask[]> { async function getAllTasks(params: GetAllTasksParams, page = 1): Promise<ITask[]> {
@ -202,7 +187,6 @@ async function loadTasks({
} }
const loadedTasks = await getAllTasks(params) const loadedTasks = await getAllTasks(params)
loadedTasks.forEach(t => tasks.value.set(t.id, t)) loadedTasks.forEach(t => tasks.value.set(t.id, t))
} }
@ -216,8 +200,8 @@ async function createTask(title: ITask['title']) {
const newTask = await taskService.create(new TaskModel({ const newTask = await taskService.create(new TaskModel({
title, title,
listId: props.listId, listId: props.listId,
startDate: defaultStartDate, startDate: defaultTaskStartDate.toISOString(),
endDate: defaultEndDate, endDate: defaultTaskEndDate.toISOString(),
})) }))
tasks.value.set(newTask.id, newTask) tasks.value.set(newTask.id, newTask)
@ -233,41 +217,23 @@ async function updateTask(e: {
if (!task) return if (!task) return
const startDate = parse(e.bar.startDate, 'yyyy-MM-dd', new Date())
const endDate = parse(e.bar.endDate, 'yyyy-MM-dd', new Date())
const oldTask = cloneDeep(task) const oldTask = cloneDeep(task)
const newTask: ITask = { const newTask: ITask = {
...task, ...task,
startDate, startDate: new Date(parseKebabDate(e.bar.startDate).setHours(0,0,0,0)),
endDate, endDate: new Date(parseKebabDate(e.bar.endDate).setHours(23,59,0,0)),
} }
const newTaskCopy = cloneDeep(task)
tasks.value.set(newTask.id, newTask) tasks.value.set(newTask.id, newTask)
// try { try {
const updatedTask = await taskService.update(newTask) const updatedTask = await taskService.update(newTask)
// tasks.value.set(updatedTask.id, updatedTask) tasks.value.set(updatedTask.id, updatedTask)
success('Saved') success('Saved')
// } catch(e: any) { } catch(e: any) {
// error('Saved') error('Something went wrong saving the task')
// tasks.value.set(task.id, oldTask) tasks.value.set(task.id, oldTask)
// } }
// for (let [idStr, currentTask] of tasks.value) {
// const id: ITask['id'] = Number(idStr)
// }
// ganttBars.value.map(gantBar => {
// return Number(gantBar[0].ganttBarConfig.id) === task.id
// ? transformTaskToGanttBar(updatedTask)
// : gantBar
// })
} }
function openTask(e: { function openTask(e: {
@ -310,11 +276,11 @@ function dayIsToday(label: string): boolean {
} }
.g-gantt-row-label { .g-gantt-row-label {
display: none; display: none !important;
} }
.g-upper-timeunit, .g-timeunit { .g-upper-timeunit, .g-timeunit {
background: var(--white); background: var(--white) !important;
font-family: $vikunja-font; font-family: $vikunja-font;
} }
@ -326,7 +292,7 @@ function dayIsToday(label: string): boolean {
.g-timeunit .timeunit-wrapper { .g-timeunit .timeunit-wrapper {
padding: 0.5rem 0; padding: 0.5rem 0;
font-size: 1rem; font-size: 1rem !important;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -345,13 +311,13 @@ function dayIsToday(label: string): boolean {
} }
.g-timeaxis { .g-timeaxis {
height: auto; height: auto !important;
box-shadow: none; box-shadow: none !important;
} }
.g-gantt-row > .g-gantt-row-bars-container { .g-gantt-row > .g-gantt-row-bars-container {
border-bottom: none; border-bottom: none !important;
border-top: none; border-top: none !important;
} }
.g-gantt-row:nth-child(odd) { .g-gantt-row:nth-child(odd) {
@ -365,10 +331,10 @@ function dayIsToday(label: string): boolean {
&-handle-left, &-handle-left,
&-handle-right { &-handle-right {
width: 6px; width: 6px !important;
height: 75%; height: 75% !important;
opacity: .75; opacity: .75 !important;
border-radius: $radius; border-radius: $radius !important;
margin-top: 4px; margin-top: 4px;
} }
} }

1
src/constants/date.ts Normal file
View File

@ -0,0 +1 @@
export const DATEFNS_DATE_FORMAT_KEBAB = 'yyyy-LL-dd'

8
src/helpers/time/isoToKebabDate.ts Normal file
View File

@ -0,0 +1,8 @@
import {format} from 'date-fns'
import {DATEFNS_DATE_FORMAT_KEBAB} from '@/constants/date'
import type {DateISO} from '@/types/DateISO'
import type {DateKebab} from '@/types/DateKebab'
export function isoToKebabDate(isoDate: DateISO) {
return format(new Date(isoDate), DATEFNS_DATE_FORMAT_KEBAB) as DateKebab
}

4
src/helpers/time/parseDate.ts
View File

@ -349,9 +349,7 @@ const getMonthFromText = (text: string, date: Date) => {
const getDateFromInterval = (interval: number): Date => { const getDateFromInterval = (interval: number): Date => {
const newDate = new Date() const newDate = new Date()
newDate.setDate(newDate.getDate() + interval) newDate.setDate(newDate.getDate() + interval)
newDate.setHours(calculateNearestHours(newDate)) newDate.setHours(calculateNearestHours(newDate), 0, 0)
newDate.setMinutes(0)
newDate.setSeconds(0)
return newDate return newDate
} }

7
src/helpers/time/parseKebabDate.ts Normal file
View File

@ -0,0 +1,7 @@
import {parse} from 'date-fns'
import {DATEFNS_DATE_FORMAT_KEBAB} from '@/constants/date'
import type {DateKebab} from '@/types/DateKebab'
export function parseKebabDate(date: DateKebab): Date {
return parse(date, DATEFNS_DATE_FORMAT_KEBAB, new Date())
}

7
src/types/DateISO.ts Normal file
View File

@ -0,0 +1,7 @@
/**
* Returns a date as a string value in ISO format.
* same format as `new Date().toISOString()`
*/
export type DateISO = string
new Date().toISOString()

4
src/types/DateKebab.ts Normal file
View File

@ -0,0 +1,4 @@
/**
* Date in Format 2022-12-10
*/
export type DateKebab = `${string}-${string}-${string}`

71
src/views/list/ListGantt.vue
View File

@ -26,14 +26,11 @@
<template #default> <template #default>
<div class="gantt-chart-container"> <div class="gantt-chart-container">
<card :padding="false" class="has-overflow"> <card :padding="false" class="has-overflow">
<pre>{{dateRange}}</pre>
<pre>{{new Date(dateRange.dateFrom).toISOString()}}</pre>
<pre>{{new Date(dateRange.dateTo).toISOString()}}</pre>
<gantt-chart <gantt-chart
:list-id="filters.listId" :list-id="filters.listId"
:date-from="filters.dateFrom" :date-from="filters.dateFrom"
:date-to="filters.dateTo" :date-to="filters.dateTo"
:show-tasks-without-dates="showTasksWithoutDates" :show-tasks-without-dates="filters.showTasksWithoutDates"
/> />
</card> </card>
</div> </div>
@ -42,13 +39,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import {computed, reactive, ref, watch, type PropType} from 'vue' import {computed, reactive, ref, watch} from 'vue'
import Foo from '@/components/misc/flatpickr/Flatpickr.vue' import Foo from '@/components/misc/flatpickr/Flatpickr.vue'
// import type FlatPickr from 'vue-flatpickr-component'
import type Flatpickr from 'flatpickr' import type Flatpickr from 'flatpickr'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
import {format} from 'date-fns' import {useRoute, useRouter, type RouteLocationNormalized, type RouteLocationRaw} from 'vue-router'
import {useRoute, useRouter, type LocationQuery, type RouteLocationNormalized, type RouteLocationRaw} from 'vue-router' import cloneDeep from 'lodash.clonedeep'
import {useAuthStore} from '@/stores/auth' import {useAuthStore} from '@/stores/auth'
@ -56,24 +52,13 @@ import ListWrapper from './ListWrapper.vue'
import Fancycheckbox from '@/components/input/fancycheckbox.vue' import Fancycheckbox from '@/components/input/fancycheckbox.vue'
import {createAsyncComponent} from '@/helpers/createAsyncComponent' import {createAsyncComponent} from '@/helpers/createAsyncComponent'
import GanttChart from '@/components/tasks/gantt-chart.vue' import {isoToKebabDate} from '@/helpers/time/isoToKebabDate'
import type { IList } from '@/modelTypes/IList'
export type DateKebab = `${string}-${string}-${string}` import type {IList} from '@/modelTypes/IList'
export type DateISO = string import type {DateISO} from '@/types/DateISO'
export type DateRange = { import type {DateKebab} from '@/types/DateKebab'
dateFrom: string
dateTo: string
}
export interface GanttParams {
listId: IList['id']
dateFrom: DateKebab
dateTo: DateKebab
showTasksWithoutDates: boolean
route: RouteLocationNormalized,
}
// convenient internal filter object
export interface GanttFilter { export interface GanttFilter {
listId: IList['id'] listId: IList['id']
dateFrom: DateISO dateFrom: DateISO
@ -83,9 +68,9 @@ export interface GanttFilter {
type Options = Flatpickr.Options.Options type Options = Flatpickr.Options.Options
// const GanttChart = createAsyncComponent(() => import('@/components/tasks/gantt-chart.vue')) const GanttChart = createAsyncComponent(() => import('@/components/tasks/gantt-chart.vue'))
const props = defineProps<GanttParams>() const props = defineProps<{route: RouteLocationNormalized}>()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
@ -124,11 +109,6 @@ function parseBooleanProp(booleanProp: string) {
: Boolean(booleanProp) : Boolean(booleanProp)
} }
const DATE_FORMAT_KEBAB = 'yyyy-LL-dd'
function isoToKebabDate(isoDate: DateISO) {
return format(new Date(isoDate), DATE_FORMAT_KEBAB) as DateKebab
}
const DEFAULT_SHOW_TASKS_WITHOUT_DATES = false const DEFAULT_SHOW_TASKS_WITHOUT_DATES = false
const DEFAULT_DATEFROM_DAY_OFFSET = -15 const DEFAULT_DATEFROM_DAY_OFFSET = -15
@ -145,8 +125,6 @@ function getDefaultDateTo() {
} }
function routeToFilter(route: RouteLocationNormalized): GanttFilter { function routeToFilter(route: RouteLocationNormalized): GanttFilter {
console.log('parseDateProp', parseDateProp(route.query.dateTo as DateKebab))
console.log(parseDateProp(route.query.dateTo as DateKebab))
return { return {
listId: Number(route.params.listId as string), listId: Number(route.params.listId as string),
dateFrom: parseDateProp(route.query.dateFrom as DateKebab) || getDefaultDateFrom(), dateFrom: parseDateProp(route.query.dateFrom as DateKebab) || getDefaultDateFrom(),
@ -174,13 +152,13 @@ function filterToRoute(filters: GanttFilter): RouteLocationRaw {
return { return {
name: 'list.gantt', name: 'list.gantt',
params: {listId: filters.listId}, params: {listId: filters.listId},
query query,
} }
} }
const filters: GanttFilter = reactive(routeToFilter(route)) const filters: GanttFilter = reactive(routeToFilter(route))
watch(() => JSON.parse(JSON.stringify(props.route)) as RouteLocationNormalized, (route, oldRoute) => { watch(() => cloneDeep(props.route), (route, oldRoute) => {
if (route.name !== oldRoute.name) { if (route.name !== oldRoute.name) {
return return
} }
@ -200,19 +178,15 @@ watch(
await router.push(newRouteFullPath) await router.push(newRouteFullPath)
} }
}, },
{flush: "post"} // only apply new route after all filters have changed in component cycle
{flush: 'post'},
) )
const dateRange = computed(() => ({ const flatPickerEl = ref<typeof Foo | null>(null)
dateFrom: filters.dateFrom, const flatPickerDateRange = computed<Date[]>({
dateTo: filters.dateTo,
}))
const flatPickerEl = ref<typeof FlatPickr | null>(null)
const flatPickerDateRange = computed({
get: () => ([ get: () => ([
filters.dateFrom, new Date(filters.dateFrom),
filters.dateTo new Date(filters.dateTo),
]), ]),
set(newVal) { set(newVal) {
const [dateFrom, dateTo] = newVal.map((date) => date?.toISOString()) const [dateFrom, dateTo] = newVal.map((date) => date?.toISOString())
@ -221,11 +195,9 @@ const flatPickerDateRange = computed({
if (!dateTo) return if (!dateTo) return
Object.assign(filters, {dateFrom, dateTo}) Object.assign(filters, {dateFrom, dateTo})
} },
}) })
const ISO_DATE_FORMAT = "YYYY-MM-DDTHH:mm:ssZ[Z]"
const initialDateRange = [filters.dateFrom, filters.dateTo] const initialDateRange = [filters.dateFrom, filters.dateTo]
const {t} = useI18n({useScope: 'global'}) const {t} = useI18n({useScope: 'global'})
@ -233,8 +205,6 @@ const authStore = useAuthStore()
const flatPickerConfig = computed<Options>(() => ({ const flatPickerConfig = computed<Options>(() => ({
altFormat: t('date.altFormatShort'), altFormat: t('date.altFormatShort'),
altInput: true, altInput: true,
// dateFornat: ISO_DATE_FORMAT,
// dateFormat: 'Y-m-d',
defaultDate: initialDateRange, defaultDate: initialDateRange,
enableTime: false, enableTime: false,
mode: 'range', mode: 'range',
@ -287,7 +257,6 @@ const flatPickerConfig = computed<Options>(() => ({
.label { .label {
font-size: .9rem; font-size: .9rem;
padding-left: .4rem;
} }
} }
} }