Initial work
Some checks failed
continuous-integration/drone/pr Build is failing

This commit is contained in:
Giacomo Rossetto 2023-10-03 22:18:25 +00:00
parent d7cbade64e
commit 9b912af873
5 changed files with 49 additions and 14 deletions

View File

@ -6,9 +6,9 @@
<div ref="ganttContainer" class="gantt-container" v-else>
<GGanttChart
:date-format="DAYJS_ISO_DATE_FORMAT"
:chart-start="isoToKebabDate(filters.dateFrom)"
:chart-end="isoToKebabDate(filters.dateTo)"
precision="day"
:chart-start="isoToKebabTime(filters.dateFrom)"
:chart-end="isoToKebabTime(filters.dateTo)"
:precision="ganttChartPrecision"
bar-start="startDate"
bar-end="endDate"
:grid="true"
@ -44,8 +44,8 @@ import {useRouter} from 'vue-router'
import {getHexColor} from '@/models/task'
import {colorIsDark} from '@/helpers/color/colorIsDark'
import {isoToKebabDate} from '@/helpers/time/isoToKebabDate'
import {parseKebabDate} from '@/helpers/time/parseKebabDate'
import {isoToKebabDate, isoToKebabTime} from '@/helpers/time/isoToKebabDate'
import {parseKebabDate, parseKebabDateTime} from '@/helpers/time/parseKebabDate'
import type {ITask, ITaskPartialWithId} from '@/modelTypes/ITask'
import type {DateISO} from '@/types/DateISO'
@ -70,7 +70,7 @@ export interface GanttChartProps {
defaultTaskEndDate: DateISO
}
const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD'
const DAYJS_ISO_DATE_FORMAT = 'YYYY-MM-DD HH:mm'
const props = defineProps<GanttChartProps>()
@ -93,16 +93,28 @@ const dateFromDate = computed(() => new Date(new Date(filters.value.dateFrom).se
const dateToDate = computed(() => new Date(new Date(filters.value.dateTo).setHours(23,59,0,0)))
const DAY_WIDTH_PIXELS = 30
const DAY_HOUR_PRECISION_THRESHOLD = 5
const ganttChartWidth = computed(() => {
const ganttContainerReference = ganttContainer?.value
const ganttContainerWidth = ganttContainerReference ? (ganttContainerReference['clientWidth'] ?? 0) : 0
const dateDiff = Math.floor((dateToDate.value.valueOf() - dateFromDate.value.valueOf()) / MILLISECONDS_A_DAY)
const calculatedWidth = dateDiff * DAY_WIDTH_PIXELS
let calculatedWidth = dateDiff * DAY_WIDTH_PIXELS
if(dateDiff < DAY_HOUR_PRECISION_THRESHOLD) {
calculatedWidth *= 24
}
return (calculatedWidth > ganttContainerWidth) ? calculatedWidth + 'px' : '100%'
})
const ganttChartPrecision = computed(() => {
const dateDiff = Math.floor((dateToDate.value.valueOf() - dateFromDate.value.valueOf()) / MILLISECONDS_A_DAY)
return dateDiff < DAY_HOUR_PRECISION_THRESHOLD ? 'hour' : 'day'
})
const ganttBars = ref<GanttBarObject[][]>([])
@ -121,9 +133,10 @@ watch(
function transformTaskToGanttBar(t: ITask) {
const black = 'var(--grey-800)'
return [{
startDate: isoToKebabDate(t.startDate ? t.startDate.toISOString() : props.defaultTaskStartDate),
endDate: isoToKebabDate(t.endDate ? t.endDate.toISOString() : props.defaultTaskEndDate),
startDate: isoToKebabTime(t.startDate ? t.startDate.toISOString() : props.defaultTaskStartDate),
endDate: isoToKebabTime(t.endDate ? t.endDate.toISOString() : props.defaultTaskEndDate),
ganttBarConfig: {
id: String(t.id),
label: t.title,
@ -145,8 +158,8 @@ async function updateGanttTask(e: {
}) {
emit('update:task', {
id: Number(e.bar.ganttBarConfig.id),
startDate: new Date(parseKebabDate(e.bar.startDate).setHours(0,0,0,0)),
endDate: new Date(parseKebabDate(e.bar.endDate).setHours(23,59,0,0)),
startDate: new Date(parseKebabDateTime(e.bar.startDate)),
endDate: new Date(parseKebabDateTime(e.bar.endDate)),
})
}

View File

@ -1,4 +1,5 @@
export const DATEFNS_DATE_FORMAT_KEBAB = 'yyyy-LL-dd'
export const DATEFNS_DATETIME_FORMAT_KEBAB = 'yyyy-LL-dd HH:mm'
export const SECONDS_A_MINUTE = 60
export const SECONDS_A_HOUR = SECONDS_A_MINUTE * 60

View File

@ -1,5 +1,5 @@
import type {DateISO} from '@/types/DateISO'
import type {DateKebab} from '@/types/DateKebab'
import type {DateKebab, TimeKebab} from '@/types/DateKebab'
// ✅ Format a date to YYYY-MM-DD (or any other format)
function padTo2Digits(num: number) {
@ -13,4 +13,16 @@ export function isoToKebabDate(isoDate: DateISO) {
padTo2Digits(date.getMonth() + 1), // January is 0, but we want it to be 1
padTo2Digits(date.getDate()),
].join('-') as DateKebab
}
export function isoToKebabTime(isoDate: DateISO) {
const date = new Date(isoDate)
return [
date.getFullYear(),
padTo2Digits(date.getMonth() + 1), // January is 0, but we want it to be 1
padTo2Digits(date.getDate()),
].join('-') + ' ' + [
padTo2Digits(date.getHours()), // January is 0, but we want it to be 1
padTo2Digits(date.getMinutes()),
].join(':') as TimeKebab
}

View File

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

View File

@ -2,3 +2,8 @@
* Date in Format 2022-12-10
*/
export type DateKebab = `${string}-${string}-${string}`
/**
* Date in Format 2022-12-10 00:00
*/
export type TimeKebab = `${string}-${string}-${string} ${string}:${string}`