|
|
|
@ -99,7 +99,7 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day') |
|
|
|
const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day') |
|
|
|
const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day') |
|
|
|
const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day') |
|
|
|
|
|
|
|
|
|
|
|
// We need to keep track of the overlaps for each day and hour in the week to calculate the width and left position of each record |
|
|
|
// We need to keep track of the overlaps for each day and hour, minute in the week to calculate the width and left position of each record |
|
|
|
// The first key is the date, the second key is the hour, and the value is an object containing the ids of the records that overlap |
|
|
|
// The first key is the date, the second key is the hour, and the value is an object containing the ids of the records that overlap |
|
|
|
// The key is in the format YYYY-MM-DD and the hour is in the format HH:mm |
|
|
|
// The key is in the format YYYY-MM-DD and the hour is in the format HH:mm |
|
|
|
const overlaps: { |
|
|
|
const overlaps: { |
|
|
|
@ -137,61 +137,83 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
sortedFormattedData.forEach((record: Row) => { |
|
|
|
sortedFormattedData.forEach((record: Row) => { |
|
|
|
if (!toCol && fromCol) { |
|
|
|
if (!toCol && fromCol) { |
|
|
|
// If there is no toColumn chosen in the range |
|
|
|
// If there is no toColumn chosen in the range |
|
|
|
const startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
const ogStartDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
if (!startDate) return |
|
|
|
if (!ogStartDate) return |
|
|
|
|
|
|
|
|
|
|
|
// Hour Key currently is set as start of the hour |
|
|
|
let endDate = ogStartDate.clone().add(1, 'hour') |
|
|
|
// TODO: Need to work on the granularity of the hour |
|
|
|
|
|
|
|
const dateKey = startDate?.format('YYYY-MM-DD') |
|
|
|
if (endDate.isAfter(scheduleEnd, 'minutes')) { |
|
|
|
const hourKey = startDate?.startOf('hour').format('HH:mm') |
|
|
|
endDate = scheduleEnd |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const id = record.rowMeta.id ?? generateRandomNumber() |
|
|
|
const id = record.rowMeta.id ?? generateRandomNumber() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let startDate = ogStartDate.clone() |
|
|
|
|
|
|
|
|
|
|
|
let style: Partial<CSSStyleDeclaration> = {} |
|
|
|
let style: Partial<CSSStyleDeclaration> = {} |
|
|
|
|
|
|
|
|
|
|
|
// If the dateKey and hourKey are valid, we add the id to the overlaps object |
|
|
|
while (startDate.isBefore(endDate, 'minutes')) { |
|
|
|
if (dateKey && hourKey) { |
|
|
|
const dateKey = startDate?.format('YYYY-MM-DD') |
|
|
|
if (!overlaps[dateKey]) { |
|
|
|
const hourKey = startDate?.format('HH:mm') |
|
|
|
overlaps[dateKey] = {} |
|
|
|
|
|
|
|
} |
|
|
|
// If the dateKey and hourKey are valid, we add the id to the overlaps object |
|
|
|
if (!overlaps[dateKey][hourKey]) { |
|
|
|
if (dateKey && hourKey) { |
|
|
|
overlaps[dateKey][hourKey] = { |
|
|
|
if (!overlaps[dateKey]) { |
|
|
|
id: [], |
|
|
|
overlaps[dateKey] = {} |
|
|
|
overflow: false, |
|
|
|
} |
|
|
|
overflowCount: 0, |
|
|
|
if (!overlaps[dateKey][hourKey]) { |
|
|
|
|
|
|
|
overlaps[dateKey][hourKey] = { |
|
|
|
|
|
|
|
id: [], |
|
|
|
|
|
|
|
overflow: false, |
|
|
|
|
|
|
|
overflowCount: 0, |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
overlaps[dateKey][hourKey].id.push(id) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// If the number of records that overlap in a single hour is more than 4, we hide the record and set the overflow flag to true |
|
|
|
|
|
|
|
// We also keep track of the number of records that overflow |
|
|
|
|
|
|
|
if (overlaps[dateKey][hourKey].id.length > 4) { |
|
|
|
|
|
|
|
overlaps[dateKey][hourKey].overflow = true |
|
|
|
|
|
|
|
style.display = 'none' |
|
|
|
|
|
|
|
overlaps[dateKey][hourKey].overflowCount += 1 |
|
|
|
} |
|
|
|
} |
|
|
|
overlaps[dateKey][hourKey].id.push(id) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// If the number of records that overlap in a single hour is more than 4, we hide the record and set the overflow flag to true |
|
|
|
// TODO: dayIndex is not calculated perfectly |
|
|
|
// We also keep track of the number of records that overflow |
|
|
|
// Should revisit this part in next iteration |
|
|
|
if (overlaps[dateKey][hourKey].id.length > 4) { |
|
|
|
let dayIndex = dayjs(dateKey).day() - 1 |
|
|
|
overlaps[dateKey][hourKey].overflow = true |
|
|
|
if (dayIndex === -1) { |
|
|
|
style.display = 'none' |
|
|
|
dayIndex = 6 |
|
|
|
overlaps[dateKey][hourKey].overflowCount += 1 |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
startDate = startDate.add(1, 'minute') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// TODO: dayIndex is not calculated perfectly |
|
|
|
let dayIndex = ogStartDate.day() - 1 |
|
|
|
// Should revisit this part in next iteration |
|
|
|
|
|
|
|
let dayIndex = dayjs(dateKey).day() - 1 |
|
|
|
|
|
|
|
if (dayIndex === -1) { |
|
|
|
if (dayIndex === -1) { |
|
|
|
dayIndex = 6 |
|
|
|
dayIndex = 6 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const hourKey = ogStartDate.format('HH:mm') |
|
|
|
|
|
|
|
|
|
|
|
// We calculate the index of the hour in the day and set the top and height of the record |
|
|
|
// We calculate the index of the hour in the day and set the top and height of the record |
|
|
|
const hourIndex = Math.min( |
|
|
|
const hourIndex = Math.min( |
|
|
|
Math.max( |
|
|
|
Math.max( |
|
|
|
datesHours.value[dayIndex].findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey), |
|
|
|
datesHours.value[dayIndex]?.findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey), |
|
|
|
0, |
|
|
|
0, |
|
|
|
), |
|
|
|
), |
|
|
|
23, |
|
|
|
23, |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const minutes = ogStartDate.minute() + ogStartDate.hour() * 60 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const topPx = (minutes * perHeight) / 60 |
|
|
|
|
|
|
|
|
|
|
|
style = { |
|
|
|
style = { |
|
|
|
...style, |
|
|
|
...style, |
|
|
|
top: `${hourIndex * perHeight - hourIndex - hourIndex * 0.15}px`, |
|
|
|
top: `${topPx - hourIndex - hourIndex * 0.15 + 0.7}px`, |
|
|
|
height: `${perHeight - 2}px`, |
|
|
|
height: `${perHeight - 4}px`, |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
recordsToDisplay.push({ |
|
|
|
recordsToDisplay.push({ |
|
|
|
@ -353,14 +375,14 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
overlapIndex = Math.max(overlapIndex, overlaps[dateKey][hours].id.indexOf(record.rowMeta.id!)) |
|
|
|
overlapIndex = Math.max(overlapIndex, overlaps[dateKey][hours].id.indexOf(record.rowMeta.id!)) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
const spacing = 1 |
|
|
|
const spacing = 0.1 |
|
|
|
const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps / 7 |
|
|
|
const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps / 7 |
|
|
|
const leftPerRecord = widthPerRecord * overlapIndex |
|
|
|
const leftPerRecord = widthPerRecord * overlapIndex |
|
|
|
|
|
|
|
|
|
|
|
record.rowMeta.style = { |
|
|
|
record.rowMeta.style = { |
|
|
|
...record.rowMeta.style, |
|
|
|
...record.rowMeta.style, |
|
|
|
left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}%)`, |
|
|
|
left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}% )`, |
|
|
|
width: `calc(${widthPerRecord}%)`, |
|
|
|
width: `calc(${widthPerRecord - 0.1}%)`, |
|
|
|
} |
|
|
|
} |
|
|
|
return record |
|
|
|
return record |
|
|
|
}) |
|
|
|
}) |
|
|
|
@ -504,7 +526,7 @@ const calculateNewRow = ( |
|
|
|
const { scrollHeight } = container.value |
|
|
|
const { scrollHeight } = container.value |
|
|
|
|
|
|
|
|
|
|
|
const percentX = (event.clientX - left - window.scrollX) / width |
|
|
|
const percentX = (event.clientX - left - window.scrollX) / width |
|
|
|
const percentY = (event.clientY - top + container.value.scrollTop) / scrollHeight |
|
|
|
const percentY = (event.clientY - top + container.value.scrollTop - 36.8) / scrollHeight |
|
|
|
|
|
|
|
|
|
|
|
const fromCol = dragRecord.value.rowMeta.range?.fk_from_col |
|
|
|
const fromCol = dragRecord.value.rowMeta.range?.fk_from_col |
|
|
|
const toCol = dragRecord.value.rowMeta.range?.fk_to_col |
|
|
|
const toCol = dragRecord.value.rowMeta.range?.fk_to_col |
|
|
|
@ -514,7 +536,9 @@ const calculateNewRow = ( |
|
|
|
const day = Math.max(0, Math.min(6, Math.floor(percentX * 7))) |
|
|
|
const day = Math.max(0, Math.min(6, Math.floor(percentX * 7))) |
|
|
|
const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24))) |
|
|
|
const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24))) |
|
|
|
|
|
|
|
|
|
|
|
const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour') |
|
|
|
const minutes = Math.round(((percentY * 24 * 60) % 60) / 15) * 15 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute') |
|
|
|
if (!newStartDate) return { newRow: null, updatedProperty: [] } |
|
|
|
if (!newStartDate) return { newRow: null, updatedProperty: [] } |
|
|
|
|
|
|
|
|
|
|
|
let endDate |
|
|
|
let endDate |
|
|
|
@ -573,9 +597,9 @@ const onDrag = (event: MouseEvent) => { |
|
|
|
const scrollBottomThreshold = 20 |
|
|
|
const scrollBottomThreshold = 20 |
|
|
|
|
|
|
|
|
|
|
|
if (event.clientY > containerRect.bottom - scrollBottomThreshold) { |
|
|
|
if (event.clientY > containerRect.bottom - scrollBottomThreshold) { |
|
|
|
scrollContainer.value.scrollTop += 10 |
|
|
|
scrollContainer.value.scrollTop += 20 |
|
|
|
} else if (event.clientY < containerRect.top + scrollBottomThreshold) { |
|
|
|
} else if (event.clientY < containerRect.top + scrollBottomThreshold) { |
|
|
|
scrollContainer.value.scrollTop -= 10 |
|
|
|
scrollContainer.value.scrollTop -= 20 |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
calculateNewRow(event) |
|
|
|
calculateNewRow(event) |
|
|
|
@ -678,6 +702,36 @@ const viewMore = (hour: dayjs.Dayjs) => { |
|
|
|
selectedTime.value = hour |
|
|
|
selectedTime.value = hour |
|
|
|
showSideMenu.value = true |
|
|
|
showSideMenu.value = true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => { |
|
|
|
|
|
|
|
let startOfHour = hour.startOf('hour') |
|
|
|
|
|
|
|
const endOfHour = hour.endOf('hour') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const ids: Array<string> = [] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let isOverflow = false |
|
|
|
|
|
|
|
let overflowCount = 0 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
while (startOfHour.isBefore(endOfHour, 'minute')) { |
|
|
|
|
|
|
|
const dateKey = startOfHour.format('YYYY-MM-DD') |
|
|
|
|
|
|
|
const hourKey = startOfHour.format('HH:mm') |
|
|
|
|
|
|
|
if (recordsAcrossAllRange.value?.count?.[dateKey]?.[hourKey]?.overflow) { |
|
|
|
|
|
|
|
isOverflow = true |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
recordsAcrossAllRange.value?.count?.[dateKey]?.[hourKey]?.id.forEach((id) => { |
|
|
|
|
|
|
|
if (!ids.includes(id)) { |
|
|
|
|
|
|
|
ids.push(id) |
|
|
|
|
|
|
|
overflowCount += 1 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
startOfHour = startOfHour.add(1, 'minute') |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
overflowCount = overflowCount > 4 ? overflowCount - 4 : 0 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return { isOverflow, overflowCount } |
|
|
|
|
|
|
|
} |
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
|
@ -694,7 +748,7 @@ const viewMore = (hour: dayjs.Dayjs) => { |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
'text-brand-500': date[0].isSame(dayjs(), 'date'), |
|
|
|
'text-brand-500': date[0].isSame(dayjs(), 'date'), |
|
|
|
}" |
|
|
|
}" |
|
|
|
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50" |
|
|
|
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-100 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50" |
|
|
|
> |
|
|
|
> |
|
|
|
{{ dayjs(date[0]).format('DD ddd') }} |
|
|
|
{{ dayjs(date[0]).format('DD ddd') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -709,14 +763,14 @@ const viewMore = (hour: dayjs.Dayjs) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div ref="container" class="absolute ml-16 flex w-[calc(100%-64px)]"> |
|
|
|
<div ref="container" class="absolute ml-16 flex w-[calc(100%-64px)]"> |
|
|
|
<div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7" data-testid="nc-calendar-week-day"> |
|
|
|
<div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7 mt-7.1" data-testid="nc-calendar-week-day"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-for="(hour, hourIndex) in date" |
|
|
|
v-for="(hour, hourIndex) in date" |
|
|
|
:key="hourIndex" |
|
|
|
:key="hourIndex" |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'), |
|
|
|
'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'), |
|
|
|
}" |
|
|
|
}" |
|
|
|
class="text-center relative first:mt-7.1 h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-200 border-t-gray-200" |
|
|
|
class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100" |
|
|
|
data-testid="nc-calendar-week-hour" |
|
|
|
data-testid="nc-calendar-week-hour" |
|
|
|
@click=" |
|
|
|
@click=" |
|
|
|
() => { |
|
|
|
() => { |
|
|
|
@ -726,7 +780,7 @@ const viewMore = (hour: dayjs.Dayjs) => { |
|
|
|
" |
|
|
|
" |
|
|
|
> |
|
|
|
> |
|
|
|
<NcButton |
|
|
|
<NcButton |
|
|
|
v-if="recordsAcrossAllRange?.count?.[hour.format('YYYY-MM-DD')]?.[hour.format('HH:mm')]?.overflow" |
|
|
|
v-if="isOverflowAcrossHourRange(hour).isOverflow" |
|
|
|
class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-3 text-gray-500" |
|
|
|
class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-3 text-gray-500" |
|
|
|
size="xxsmall" |
|
|
|
size="xxsmall" |
|
|
|
type="secondary" |
|
|
|
type="secondary" |
|
|
|
@ -734,7 +788,7 @@ const viewMore = (hour: dayjs.Dayjs) => { |
|
|
|
> |
|
|
|
> |
|
|
|
<span class="text-xs"> |
|
|
|
<span class="text-xs"> |
|
|
|
+ |
|
|
|
+ |
|
|
|
{{ recordsAcrossAllRange?.count[hour.format('YYYY-MM-DD')][hour.format('HH:mm')]?.overflowCount }} |
|
|
|
{{ isOverflowAcrossHourRange(hour).overflowCount }} |
|
|
|
more |
|
|
|
more |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
</NcButton> |
|
|
|
</NcButton> |
|
|
|
|
Raju Udava
9 months ago
committed by
GitHub