mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1134 lines
34 KiB
1134 lines
34 KiB
<script lang="ts" setup> |
|
import dayjs from 'dayjs' |
|
import type { Row } from '~/lib/types' |
|
|
|
const emits = defineEmits(['expandRecord', 'newRecord']) |
|
|
|
const { |
|
selectedDateRange, |
|
formattedData, |
|
formattedSideBarData, |
|
calendarRange, |
|
selectedDate, |
|
displayField, |
|
viewMetaProperties, |
|
selectedTime, |
|
updateRowProperty, |
|
sideBarFilterOption, |
|
showSideMenu, |
|
updateFormat, |
|
} = useCalendarViewStoreOrThrow() |
|
|
|
const { $e } = useNuxtApp() |
|
|
|
const container = ref<null | HTMLElement>(null) |
|
|
|
const scrollContainer = ref<null | HTMLElement>(null) |
|
|
|
const { width: containerWidth } = useElementSize(container) |
|
|
|
const isPublic = inject(IsPublicInj, ref(false)) |
|
|
|
const { isUIAllowed } = useRoles() |
|
|
|
const meta = inject(MetaInj, ref()) |
|
|
|
const fields = inject(FieldsInj, ref()) |
|
|
|
const { fields: _fields } = useViewColumnsOrThrow() |
|
|
|
const fieldStyles = computed(() => { |
|
return (_fields.value ?? []).reduce((acc, field) => { |
|
acc[field.fk_column_id!] = { |
|
bold: !!field.bold, |
|
italic: !!field.italic, |
|
underline: !!field.underline, |
|
} |
|
return acc |
|
}, {} as Record<string, { bold?: boolean; italic?: boolean; underline?: boolean }>) |
|
}) |
|
|
|
const getDayIndex = (date: dayjs.Dayjs) => { |
|
let dayIndex = date.day() - 1 |
|
if (dayIndex === -1) { |
|
dayIndex = 6 |
|
} |
|
return dayIndex |
|
} |
|
|
|
const maxVisibleDays = computed(() => { |
|
return viewMetaProperties.value?.hide_weekend ? 5 : 7 |
|
}) |
|
|
|
const currTime = ref(dayjs()) |
|
|
|
const overlayStyle = computed(() => { |
|
if (!containerWidth.value) |
|
return { |
|
top: 0, |
|
left: 0, |
|
} |
|
|
|
const left = (containerWidth.value / maxVisibleDays.value) * getDayIndex(currTime.value) |
|
const minutes = currTime.value.hour() * 60 + currTime.value.minute() |
|
|
|
const top = (52 / 60) * minutes - 12 |
|
|
|
return { |
|
width: `${containerWidth.value / maxVisibleDays.value}px`, |
|
top: `${top}px`, |
|
left: `${left}px`, |
|
} |
|
}) |
|
|
|
onMounted(() => { |
|
const intervalId = setInterval(() => { |
|
currTime.value = dayjs() |
|
}, 10000) // 10000 ms = 10 seconds |
|
|
|
// Clean up the interval when the component is unmounted |
|
onUnmounted(() => { |
|
clearInterval(intervalId) |
|
}) |
|
}) |
|
|
|
const calculateHourIndices = (dayIndex: number, startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => { |
|
// Get the hour component for start and end times |
|
const startHour = startDate.hour() |
|
const endHour = endDate.hour() |
|
|
|
// Find the indices directly based on hours since datesHours uses integer hours |
|
const startHourIndex = Math.max( |
|
(datesHours.value[dayIndex] ?? []).findIndex((h) => h.hour() === startHour), |
|
0, |
|
) |
|
|
|
// For end hour, we need to handle cases where the end time has minutes |
|
let endHourIndex = (datesHours.value[dayIndex] ?? []).findIndex((h) => h.hour() === endHour) |
|
|
|
// If we have minutes in the end time, we should include the next hour |
|
if (endDate.minute() > 0 && endHour < 23) { |
|
endHourIndex++ |
|
} |
|
|
|
endHourIndex = Math.max(endHourIndex, 0) |
|
|
|
return { |
|
startHourIndex, |
|
endHourIndex, |
|
startMinutes: startDate.minute(), |
|
endMinutes: endDate.minute(), |
|
} |
|
} |
|
|
|
const calculateNewDates = useMemoize( |
|
({ |
|
startDate, |
|
endDate, |
|
scheduleStart, |
|
scheduleEnd, |
|
}: { |
|
startDate: dayjs.Dayjs |
|
endDate: dayjs.Dayjs |
|
scheduleStart: dayjs.Dayjs |
|
scheduleEnd: dayjs.Dayjs |
|
}) => { |
|
// If the end date is not valid, we set it to 15 minutes after the start date |
|
if (!endDate?.isValid()) { |
|
endDate = startDate.clone().add(15, 'minutes') |
|
} |
|
|
|
if (endDate.diff(startDate, 'minute') <= 60) { |
|
endDate = startDate.clone().add(59, 'minutes') |
|
} |
|
|
|
// If the start date is before the start of the schedule, we set it to the start of the schedule |
|
// If the end date is after the end of the schedule, we set it to the end of the schedule |
|
// This is to ensure that the records are within the bounds of the schedule and do not overflow |
|
if (startDate.isBefore(scheduleStart, 'minutes')) { |
|
startDate = scheduleStart.clone() |
|
} |
|
if (endDate.isAfter(scheduleEnd, 'minutes')) { |
|
endDate = scheduleEnd.clone() |
|
} |
|
|
|
return { startDate, endDate } |
|
}, |
|
) |
|
// Since it is a datetime Week view, we need to create a 2D array of dayjs objects to represent the hours in a day for each day in the week |
|
const datesHours = computed(() => { |
|
const start = dayjs(selectedDateRange.value.start).startOf('week') |
|
return Array.from({ length: maxVisibleDays.value }, (_, i) => |
|
Array.from({ length: 24 }, (_, h) => start.add(i, 'day').hour(h).minute(0).second(0)), |
|
) |
|
}) |
|
|
|
const getGridTime = (date: dayjs.Dayjs, round = false) => { |
|
const minutes = date.hour() * 60 + date.minute() |
|
return round ? Math.ceil(minutes) : Math.floor(minutes) |
|
} |
|
|
|
const getGridTimeSlots = (from: dayjs.Dayjs, to: dayjs.Dayjs) => ({ |
|
from: getGridTime(from), |
|
to: getGridTime(to, true) - 1, |
|
dayIndex: getDayIndex(from), |
|
}) |
|
|
|
const hasSlotForRecord = ( |
|
columnArray: Row[], |
|
dates: { |
|
fromDate: dayjs.Dayjs |
|
toDate: dayjs.Dayjs |
|
}, |
|
) => { |
|
const { fromDate, toDate } = dates |
|
|
|
if (!fromDate || !toDate) return false |
|
|
|
for (const column of columnArray) { |
|
const columnFromCol = column.rowMeta.range?.fk_from_col |
|
const columnToCol = column.rowMeta.range?.fk_to_col |
|
|
|
if (!columnFromCol) return false |
|
|
|
const { startDate: columnFromDate, endDate: columnToDate } = calculateNewDates({ |
|
startDate: dayjs(column.row[columnFromCol.title!]), |
|
endDate: columnToCol |
|
? dayjs(column.row[columnToCol.title!]) |
|
: dayjs(column.row[columnFromCol.title!]).add(1, 'hour').subtract(1, 'minute'), |
|
scheduleStart: dayjs(selectedDateRange.value.start).startOf('day'), |
|
scheduleEnd: dayjs(selectedDateRange.value.end).endOf('day'), |
|
}) |
|
|
|
if ( |
|
fromDate.isBetween(columnFromDate, columnToDate, null, '[]') || |
|
toDate.isBetween(columnFromDate, columnToDate, null, '[]') |
|
) { |
|
return false |
|
} |
|
} |
|
return true |
|
} |
|
|
|
const getMaxOverlaps = ({ |
|
row, |
|
columnArray, |
|
graph, |
|
}: { |
|
row: Row |
|
columnArray: Array<Array<Array<Row>>> |
|
graph: Map<string, Set<string>> |
|
}) => { |
|
const id = row.rowMeta.id as string |
|
|
|
const visited: Set<string> = new Set() |
|
|
|
const dayIndex = row.rowMeta.dayIndex |
|
const overlapIndex = columnArray[dayIndex].findIndex((column) => column.findIndex((r) => r.rowMeta.id === id) !== -1) + 1 |
|
const dfs = (id: string): number => { |
|
visited.add(id) |
|
let maxOverlaps = 1 |
|
const neighbors = graph.get(id) |
|
if (neighbors) { |
|
for (const neighbor of neighbors) { |
|
if (maxOverlaps >= columnArray[dayIndex].length) return maxOverlaps |
|
if (!visited.has(neighbor)) { |
|
maxOverlaps = Math.min(Math.max(maxOverlaps, dfs(neighbor) + 1), columnArray[dayIndex].length) |
|
} |
|
} |
|
} |
|
|
|
return maxOverlaps |
|
} |
|
|
|
let maxOverlaps = 1 |
|
if (graph.has(id)) { |
|
dfs(id) |
|
} |
|
const overlapIterations: Array<number> = [] |
|
|
|
columnArray[dayIndex] |
|
.flat() |
|
.filter((record) => visited.has(record.rowMeta.id!)) |
|
.forEach((record) => { |
|
overlapIterations.push(record.rowMeta.overLapIteration!) |
|
}) |
|
|
|
maxOverlaps = overlapIterations?.length > 0 ? Math.max(...overlapIterations) : 1 |
|
|
|
return { maxOverlaps, dayIndex, overlapIndex } |
|
} |
|
|
|
const resizeInProgress = ref(false) |
|
|
|
const dragTimeout = ref<ReturnType<typeof setTimeout>>() |
|
|
|
const hoverRecord = ref<string | null>() |
|
|
|
const resizeDirection = ref<'right' | 'left' | null>() |
|
|
|
const resizeRecord = ref<Row | null>(null) |
|
|
|
const isDragging = ref(false) |
|
|
|
const dragRecord = ref<Row | null>(null) |
|
|
|
const recordsAcrossAllRange = computed<{ |
|
records: Array<Row> |
|
gridTimeMap: Map< |
|
number, |
|
Map< |
|
number, |
|
{ |
|
count: number |
|
id: string[] |
|
} |
|
> |
|
> |
|
spanningRecords: Row[] |
|
}>(() => { |
|
if (!formattedData.value || !calendarRange.value || !container.value || !scrollContainer.value) |
|
return { |
|
records: [], |
|
gridTimeMap: new Map(), |
|
spanningRecords: [], |
|
} |
|
const perWidth = containerWidth.value / maxVisibleDays.value |
|
const perHeight = 52 |
|
|
|
const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day') |
|
let scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day') |
|
|
|
if (maxVisibleDays.value === 5) { |
|
scheduleEnd = scheduleEnd.subtract(2, 'day') |
|
} |
|
|
|
const columnArray: Array<Array<Array<Row>>> = [[[]]] |
|
const gridTimeMap = new Map< |
|
number, |
|
Map< |
|
number, |
|
{ |
|
count: number |
|
id: string[] |
|
} |
|
> |
|
>() |
|
const recordsToDisplay: Array<Row> = [] |
|
const recordSpanningDays: Array<Row> = [] |
|
|
|
calendarRange.value.forEach((range) => { |
|
const fromCol = range.fk_from_col |
|
const toCol = range.fk_to_col |
|
|
|
// We fetch all the records that match the calendar ranges in a single time. |
|
// But not all fetched records are valid for the certain range, so we filter them out & sort them |
|
const sortedFormattedData = [...formattedData.value] |
|
.filter((record) => { |
|
if (fromCol && toCol) { |
|
const fromDate = dayjs(record.row[fromCol.title!]) |
|
const toDate = dayjs(record.row[toCol.title!]) |
|
|
|
if (fromDate.isValid() && toDate.isValid()) { |
|
const isMultiDay = !fromDate.isSame(toDate, 'day') |
|
if (isMultiDay) { |
|
recordSpanningDays.push(record) |
|
return false |
|
} |
|
return true |
|
} |
|
} |
|
return fromCol && !!record.row[fromCol.title!] |
|
}) |
|
.sort((a, b) => (dayjs(a.row[fromCol!.title!]).isBefore(dayjs(b.row[fromCol!.title!])) ? 1 : -1)) |
|
|
|
for (const record of sortedFormattedData) { |
|
const id = record.rowMeta.id ?? generateRandomNumber() |
|
|
|
if (fromCol && toCol) { |
|
const { startDate, endDate } = calculateNewDates({ |
|
startDate: dayjs(record.row[fromCol.title!]), |
|
endDate: dayjs(record.row[toCol.title!]), |
|
scheduleStart, |
|
scheduleEnd, |
|
}) |
|
const dayIndex = getDayIndex(startDate) |
|
|
|
const { startHourIndex, startMinutes } = calculateHourIndices(dayIndex, startDate, endDate) |
|
|
|
let style: Partial<CSSStyleDeclaration> = {} |
|
|
|
const top = (startHourIndex + startMinutes / 60) * perHeight |
|
|
|
const totalHours = endDate.diff(startDate, 'minute') / 60 |
|
const height = totalHours * perHeight |
|
|
|
style = { |
|
...style, |
|
top: `${top}px`, |
|
height: `${height}px`, |
|
} |
|
|
|
recordsToDisplay.push({ |
|
...record, |
|
rowMeta: { |
|
...record.rowMeta, |
|
id, |
|
style, |
|
range, |
|
position: 'rounded', |
|
dayIndex, |
|
}, |
|
}) |
|
} else if (fromCol) { |
|
// If there is no toColumn chosen in the range |
|
const { startDate } = calculateNewDates({ |
|
startDate: dayjs(record.row[fromCol.title!]), |
|
endDate: dayjs(record.row[fromCol.title!]).add(1, 'hour').subtract(1, 'minute'), |
|
scheduleStart, |
|
scheduleEnd, |
|
}) |
|
|
|
let style: Partial<CSSStyleDeclaration> = {} |
|
|
|
const dayIndex = getDayIndex(startDate) |
|
|
|
const minutes = (startDate.minute() / 60 + startDate.hour()) * perHeight |
|
|
|
style = { |
|
...style, |
|
top: `${minutes + 1}px`, |
|
height: `${perHeight - 2}px`, |
|
} |
|
|
|
recordsToDisplay.push({ |
|
...record, |
|
rowMeta: { |
|
...record.rowMeta, |
|
id, |
|
position: 'rounded', |
|
style, |
|
range, |
|
dayIndex, |
|
}, |
|
}) |
|
} |
|
} |
|
|
|
recordsToDisplay.sort((a, b) => { |
|
const fromColA = a.rowMeta.range?.fk_from_col |
|
const fromColB = b.rowMeta.range?.fk_from_col |
|
if (!fromColA || !fromColB) return 0 |
|
return dayjs(a.row[fromColA.title!]).isBefore(dayjs(b.row[fromColB.title!])) ? -1 : 1 |
|
}) |
|
|
|
for (const record of recordsToDisplay) { |
|
const fromCol = record.rowMeta.range?.fk_from_col |
|
const toCol = record.rowMeta.range?.fk_to_col |
|
|
|
if (!fromCol) continue |
|
const { startDate, endDate } = calculateNewDates({ |
|
startDate: dayjs(record.row[fromCol.title!]), |
|
endDate: toCol ? dayjs(record.row[toCol.title!]) : dayjs(record.row[fromCol.title!]).add(1, 'hour').subtract(1, 'minute'), |
|
scheduleStart, |
|
scheduleEnd, |
|
}) |
|
|
|
const gridTimes = getGridTimeSlots(startDate, endDate) |
|
|
|
const dayIndex = record.rowMeta.dayIndex ?? gridTimes.dayIndex |
|
|
|
for (let gridCounter = gridTimes.from; gridCounter <= gridTimes.to; gridCounter++) { |
|
if (!gridTimeMap.has(dayIndex)) { |
|
gridTimeMap.set( |
|
dayIndex, |
|
new Map< |
|
number, |
|
{ |
|
count: number |
|
id: string[] |
|
} |
|
>(), |
|
) |
|
} |
|
|
|
if (!gridTimeMap.get(dayIndex)?.has(gridCounter)) { |
|
gridTimeMap.set(dayIndex, (gridTimeMap.get(dayIndex) ?? new Map()).set(gridCounter, { count: 0, id: [] })) |
|
} |
|
|
|
const idArray = gridTimeMap.get(dayIndex)!.get(gridCounter)!.id |
|
idArray.push(record.rowMeta.id!) |
|
const count = gridTimeMap.get(dayIndex)!.get(gridCounter)!.count + 1 |
|
|
|
gridTimeMap.set(dayIndex, (gridTimeMap.get(dayIndex) ?? new Map()).set(gridCounter, { count, id: idArray })) |
|
} |
|
|
|
let foundAColumn = false |
|
|
|
if (!columnArray[dayIndex]) { |
|
columnArray[dayIndex] = [] |
|
} |
|
|
|
for (const column in columnArray[dayIndex]) { |
|
if (hasSlotForRecord(columnArray[dayIndex][column], { fromDate: startDate, toDate: endDate })) { |
|
columnArray[dayIndex][column].push(record) |
|
foundAColumn = true |
|
break |
|
} |
|
} |
|
|
|
if (!foundAColumn) { |
|
columnArray[dayIndex].push([record]) |
|
} |
|
} |
|
|
|
const graph: Map<number, Map<string, Set<string>>> = new Map() |
|
|
|
for (const dayIndex of gridTimeMap.keys()) { |
|
if (!graph.has(dayIndex)) { |
|
graph.set(dayIndex, new Map()) |
|
} |
|
for (const [_gridTime, { id: ids }] of gridTimeMap.get(dayIndex)) { |
|
for (const id1 of ids) { |
|
if (!graph.get(dayIndex).has(id1)) { |
|
graph.get(dayIndex).set(id1, new Set()) |
|
} |
|
for (const id2 of ids) { |
|
if (id1 !== id2) { |
|
if (!graph.get(dayIndex).get(id1).has(id2)) { |
|
graph.get(dayIndex).get(id1).add(id2) |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
for (const dayIndex in columnArray) { |
|
for (const columnIndex in columnArray[dayIndex]) { |
|
for (const record of columnArray[dayIndex][columnIndex]) { |
|
record.rowMeta.overLapIteration = parseInt(columnIndex) + 1 |
|
} |
|
} |
|
} |
|
for (const record of recordsToDisplay) { |
|
const { |
|
maxOverlaps, |
|
overlapIndex, |
|
dayIndex: tDayIndex, |
|
} = getMaxOverlaps({ |
|
row: record, |
|
columnArray, |
|
graph: graph.get(record.rowMeta.dayIndex!) ?? new Map(), |
|
}) |
|
|
|
const dayIndex = record.rowMeta.dayIndex ?? tDayIndex |
|
|
|
let display = 'block' |
|
|
|
if (maxVisibleDays.value === 5) { |
|
if (dayIndex === 5 || dayIndex === 6) { |
|
display = 'none' |
|
} |
|
} |
|
|
|
record.rowMeta.numberOfOverlaps = maxOverlaps |
|
|
|
let width = 0 |
|
let left = 100 |
|
|
|
const majorLeft = dayIndex * perWidth |
|
|
|
const isRecordDraggingOrResizeState = |
|
record.rowMeta.id === dragRecord.value?.rowMeta.id || record.rowMeta.id === resizeRecord.value?.rowMeta.id |
|
|
|
if (!isRecordDraggingOrResizeState) { |
|
if (record.rowMeta.overLapIteration! - 1 > 2) { |
|
display = 'none' |
|
} else { |
|
width = 100 / Math.min(maxOverlaps, 3) / maxVisibleDays.value |
|
|
|
left = width * (overlapIndex - 1) |
|
|
|
width = Math.max((width / 100) * containerWidth.value + 1, 72) - 3 |
|
|
|
left = majorLeft + (left / 100) * containerWidth.value + 1.5 |
|
|
|
if (majorLeft + perWidth < left + width) { |
|
left = majorLeft + (perWidth - width) - 4.5 * overlapIndex |
|
} |
|
} |
|
} else { |
|
left = majorLeft + 1.5 |
|
width = perWidth - 3 |
|
} |
|
|
|
record.rowMeta.style = { |
|
...record.rowMeta.style, |
|
left: `${left}px`, |
|
width: `${width}px`, |
|
minWidth: '72px', |
|
display, |
|
} |
|
} |
|
}) |
|
|
|
return { |
|
records: recordsToDisplay, |
|
gridTimeMap, |
|
spanningRecords: recordSpanningDays, |
|
} |
|
}) |
|
|
|
const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => { |
|
updateRowProperty(row, updateProperty, isDelete) |
|
}, 500) |
|
|
|
const onResize = (event: MouseEvent) => { |
|
if (!isUIAllowed('dataEdit') || !container.value || !resizeRecord.value || !scrollContainer.value) return |
|
if (resizeRecord.value.rowMeta.range?.is_readonly) return |
|
|
|
const { width, left, top, bottom } = container.value.getBoundingClientRect() |
|
const { scrollHeight, scrollTop } = container.value |
|
|
|
// If the mouse is near the bottom of the container, we scroll down |
|
// If the mouse is near the top of the container, we scroll up if (event.clientY > bottom - 20) { |
|
if (event.clientY > bottom - 20) { |
|
container.value.scrollTop += 10 |
|
} else if (event.clientY < top + 20) { |
|
container.value.scrollTop -= 10 |
|
} |
|
|
|
const percentX = (event.clientX - left - window.scrollX) / width |
|
const percentY = (event.clientY - top + scrollTop) / scrollHeight |
|
|
|
const { range } = resizeRecord.value.rowMeta |
|
const fromCol = range?.fk_from_col |
|
const toCol = range?.fk_to_col |
|
if (!fromCol?.title || !toCol?.title) return |
|
|
|
const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title]) |
|
const ogEndDate = dayjs(resizeRecord.value.row[toCol.title]) |
|
|
|
const day = Math.floor(percentX * maxVisibleDays.value) |
|
const minutes = Math.round((percentY * 24 * 60) / 15) * 15 // Round to nearest 15 minutes |
|
|
|
const baseDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(minutes, 'minute') |
|
|
|
let newDate: dayjs.Dayjs |
|
let updateProperty: string |
|
let isValid = true |
|
|
|
if (resizeDirection.value === 'right') { |
|
const minEndDate = ogStartDate.add(1, 'hour') |
|
newDate = baseDate.isBefore(ogStartDate) |
|
? ogStartDate.add(Math.ceil(ogStartDate.diff(baseDate, 'minute') / 15) * 15, 'minute') |
|
: baseDate |
|
|
|
if (newDate.isBefore(minEndDate)) { |
|
newDate = minEndDate |
|
} |
|
updateProperty = toCol.title |
|
} else if (resizeDirection.value === 'left') { |
|
const minStartDate = ogEndDate.subtract(1, 'hour') |
|
newDate = baseDate.isAfter(ogEndDate) |
|
? ogEndDate.subtract(Math.ceil(baseDate.diff(ogEndDate, 'minute') / 15) * 15, 'minute') |
|
: baseDate |
|
|
|
if (newDate.isAfter(minStartDate)) { |
|
newDate = minStartDate |
|
} |
|
updateProperty = fromCol.title |
|
} else { |
|
isValid = false |
|
} |
|
|
|
if (!isValid || !newDate.isValid()) return |
|
|
|
const newRow = { |
|
...resizeRecord.value, |
|
row: { |
|
...resizeRecord.value.row, |
|
[updateProperty]: newDate.format(updateFormat.value), |
|
}, |
|
} |
|
|
|
const newPk = extractPkFromRow(newRow.row, meta.value!.columns!) |
|
|
|
formattedData.value = formattedData.value.map((r) => (extractPkFromRow(r.row, meta.value!.columns!) === newPk ? newRow : r)) |
|
|
|
useDebouncedRowUpdate(newRow, [updateProperty], false) |
|
} |
|
|
|
const onResizeEnd = () => { |
|
resizeInProgress.value = false |
|
resizeDirection.value = null |
|
resizeRecord.value = null |
|
document.removeEventListener('mousemove', onResize) |
|
document.removeEventListener('mouseup', onResizeEnd) |
|
} |
|
|
|
const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => { |
|
if (!isUIAllowed('dataEdit')) return |
|
|
|
if (record.rowMeta.range?.is_readonly) return |
|
|
|
resizeInProgress.value = true |
|
resizeDirection.value = direction |
|
resizeRecord.value = record |
|
document.addEventListener('mousemove', onResize) |
|
document.addEventListener('mouseup', onResizeEnd) |
|
} |
|
|
|
// We calculate the new row based on the mouse position and update the record |
|
// We also update the sidebar data if the dropped from the sidebar |
|
const calculateNewRow = ( |
|
event: MouseEvent, |
|
updateSideBar?: boolean, |
|
): { |
|
newRow: Row | null |
|
updatedProperty: string[] |
|
skipChangeCheck?: boolean |
|
} => { |
|
if (!container.value) return { newRow: null, updatedProperty: [] } |
|
const { width, left, top } = container.value.getBoundingClientRect() |
|
|
|
const { scrollHeight, scrollTop } = container.value |
|
|
|
const percentX = (event.clientX - left - window.scrollX) / width |
|
const percentY = (event.clientY - top + scrollTop - 36.8) / scrollHeight |
|
|
|
const fromCol = dragRecord.value.rowMeta.range?.fk_from_col |
|
const toCol = dragRecord.value.rowMeta.range?.fk_to_col |
|
|
|
if (!fromCol) return { newRow: null, updatedProperty: [] } |
|
|
|
const day = Math.max(0, Math.min(6, Math.floor(percentX * maxVisibleDays.value))) |
|
const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24))) |
|
|
|
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: [] } |
|
|
|
let endDate |
|
const updatedProperty = [fromCol.title!] |
|
|
|
const newRow = { |
|
...dragRecord.value, |
|
row: { |
|
...dragRecord.value.row, |
|
[fromCol.title!]: dayjs(newStartDate).format(updateFormat.value), |
|
}, |
|
} |
|
|
|
if (toCol) { |
|
const fromDate = dragRecord.value.row[fromCol.title!] ? dayjs(dragRecord.value.row[fromCol.title!]) : null |
|
const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : fromDate?.clone() |
|
|
|
if (fromDate && toDate) { |
|
const newMinutes = Math.round(toDate.diff(fromDate, 'minute') / 15) * 15 |
|
endDate = newStartDate.add(newMinutes, 'minute') |
|
} else if (fromDate && !toDate) { |
|
endDate = dayjs(newStartDate).endOf('day') |
|
} else if (!fromDate && toDate) { |
|
endDate = dayjs(newStartDate).endOf('day') |
|
} else { |
|
endDate = newStartDate.clone() |
|
} |
|
|
|
if (endDate.isBefore(newStartDate)) { |
|
endDate = newStartDate.clone().add(15, 'minutes') |
|
} |
|
|
|
newRow.row[toCol.title!] = dayjs(endDate).format(updateFormat.value) |
|
updatedProperty.push(toCol.title!) |
|
} |
|
|
|
if (!newRow) return { newRow: null, updatedProperty: [] } |
|
|
|
const newPk = extractPkFromRow(newRow.row, meta.value!.columns!) |
|
|
|
if (updateSideBar) { |
|
formattedData.value = [...formattedData.value, newRow] |
|
formattedSideBarData.value = formattedSideBarData.value.filter((r) => { |
|
const pk = extractPkFromRow(r.row, meta.value!.columns!) |
|
return pk !== newPk |
|
}) |
|
} else { |
|
formattedData.value = formattedData.value.map((r) => { |
|
const pk = extractPkFromRow(r.row, meta.value!.columns!) |
|
return pk === newPk ? newRow : r |
|
}) |
|
dragRecord.value = { |
|
...dragRecord.value, |
|
row: newRow.row, |
|
} |
|
} |
|
|
|
return { newRow, updatedProperty } |
|
} |
|
|
|
const onDrag = (event: MouseEvent) => { |
|
if (!isUIAllowed('dataEdit') || !scrollContainer.value || !dragRecord.value) return |
|
|
|
const containerRect = scrollContainer.value.getBoundingClientRect() |
|
const scrollBottomThreshold = 20 |
|
|
|
if (event.clientY > containerRect.bottom - scrollBottomThreshold) { |
|
scrollContainer.value.scrollTop += 20 |
|
} else if (event.clientY < containerRect.top + scrollBottomThreshold) { |
|
scrollContainer.value.scrollTop -= 20 |
|
} |
|
|
|
calculateNewRow(event) |
|
} |
|
|
|
const stopDrag = (event: MouseEvent) => { |
|
if (!isUIAllowed('dataEdit') || !isDragging.value || !container.value || !dragRecord.value) return |
|
|
|
event.preventDefault() |
|
clearTimeout(dragTimeout.value!) |
|
|
|
const { newRow, updatedProperty } = calculateNewRow(event, false, true) |
|
|
|
if (newRow) { |
|
updateRowProperty(newRow, updatedProperty, false) |
|
} |
|
|
|
dragRecord.value = null |
|
|
|
$e('c:calendar:week:drag-record') |
|
|
|
document.removeEventListener('mousemove', onDrag) |
|
document.removeEventListener('mouseup', stopDrag) |
|
} |
|
|
|
const dragStart = (event: MouseEvent, record: Row) => { |
|
if (resizeInProgress.value) return |
|
let target = event.target as HTMLElement |
|
|
|
isDragging.value = false |
|
|
|
dragTimeout.value = setTimeout(() => { |
|
if (!isUIAllowed('dataEdit')) return |
|
if (record.rowMeta.range?.is_readonly) return |
|
|
|
isDragging.value = true |
|
while (!target.classList.contains('draggable-record')) { |
|
target = target.parentElement as HTMLElement |
|
} |
|
|
|
isDragging.value = true |
|
dragRecord.value = record |
|
|
|
document.addEventListener('mousemove', onDrag) |
|
document.addEventListener('mouseup', stopDrag) |
|
}, 200) |
|
|
|
const onMouseUp = () => { |
|
clearTimeout(dragTimeout.value!) |
|
document.removeEventListener('mouseup', onMouseUp) |
|
if (!isDragging.value) { |
|
emits('expandRecord', record) |
|
} |
|
} |
|
|
|
document.addEventListener('mouseup', onMouseUp) |
|
} |
|
|
|
const dropEvent = (event: DragEvent) => { |
|
if (!isUIAllowed('dataEdit') || !container.value) return |
|
event.preventDefault() |
|
|
|
const data = event.dataTransfer?.getData('text/plain') |
|
if (data) { |
|
const { |
|
record, |
|
}: { |
|
record: Row |
|
} = JSON.parse(data) |
|
|
|
if (record.rowMeta.range?.is_readonly) return |
|
|
|
dragRecord.value = record |
|
|
|
const { newRow, updatedProperty } = calculateNewRow(event, true) |
|
|
|
if (newRow) { |
|
updateRowProperty(newRow, updatedProperty, false) |
|
$e('c:calendar:day:drag-record') |
|
} |
|
} |
|
} |
|
|
|
const viewMore = (hour: dayjs.Dayjs) => { |
|
sideBarFilterOption.value = 'selectedHours' |
|
selectedTime.value = hour |
|
showSideMenu.value = true |
|
} |
|
|
|
const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => { |
|
if (!recordsAcrossAllRange.value || !recordsAcrossAllRange.value.gridTimeMap) return { isOverflow: false, overflowCount: 0 } |
|
const { gridTimeMap } = recordsAcrossAllRange.value |
|
const dayIndex = getDayIndex(hour) |
|
const startMinute = hour.hour() * 60 + hour.minute() |
|
const endMinute = hour.hour() * 60 + hour.minute() + 59 |
|
let overflowCount = 0 |
|
|
|
for (let minute = startMinute; minute <= endMinute; minute++) { |
|
const recordCount = gridTimeMap.get(dayIndex)?.get(minute)?.count ?? 0 |
|
overflowCount = Math.max(overflowCount, recordCount) |
|
} |
|
|
|
return { isOverflow: overflowCount - 3 > 0, overflowCount: overflowCount - 3 } |
|
} |
|
|
|
// TODO: Add Support for multiple ranges when multiple ranges are supported |
|
const addRecord = (date: dayjs.Dayjs) => { |
|
if (!isUIAllowed('dataEdit') || !calendarRange.value) return |
|
const fromCol = calendarRange.value[0].fk_from_col |
|
if (!fromCol) return |
|
const newRecord = { |
|
row: { |
|
[fromCol.title!]: date.format(updateFormat.value), |
|
}, |
|
} |
|
emits('newRecord', newRecord) |
|
} |
|
|
|
watch( |
|
() => recordsAcrossAllRange.value, |
|
() => { |
|
if (dragRecord.value) return |
|
const records = document.querySelectorAll('.draggable-record') |
|
if (records.length) records.item(0)?.scrollIntoView({ behavior: 'smooth', block: 'center' }) |
|
else document.querySelectorAll('.nc-calendar-day-hour').item(9)?.scrollIntoView({ behavior: 'smooth', block: 'center' }) |
|
}, |
|
{ immediate: true }, |
|
) |
|
|
|
const expandRecord = (record: Row) => { |
|
emits('expandRecord', record) |
|
} |
|
|
|
const spanningRecordsContainer = ref<HTMLElement | null>(null) |
|
|
|
const isExpanded = ref(false) |
|
|
|
const isRangeEnabled = computed(() => |
|
calendarRange.value.some((range) => range.fk_to_col !== null && range.fk_to_col !== undefined), |
|
) |
|
|
|
watch( |
|
() => spanningRecordsContainer.value?.isSpanningRecordExpanded(), |
|
() => { |
|
isExpanded.value = spanningRecordsContainer.value?.isSpanningRecordExpanded() |
|
}, |
|
) |
|
</script> |
|
|
|
<template> |
|
<div |
|
ref="scrollContainer" |
|
class="prevent-select h-[calc(100vh-5.4rem)] overflow-y-auto nc-scrollbar-md relative flex flex-col w-full" |
|
data-testid="nc-calendar-week-view" |
|
@drop="dropEvent" |
|
> |
|
<div |
|
v-if="!isPublic && dayjs().isBetween(selectedDateRange.start, selectedDateRange.end)" |
|
class="absolute top-16 ml-16 pointer-events-none z-2" |
|
:class="{ |
|
'!mt-38.5': isExpanded && isRangeEnabled, |
|
'mt-27': !isExpanded && isRangeEnabled, |
|
'!mt-6': !recordsAcrossAllRange.spanningRecords?.length, |
|
}" |
|
:style="overlayStyle" |
|
> |
|
<div class="flex w-full items-center"> |
|
<span |
|
class="text-brand-500 rounded-md text-xs border-1 pointer-events-auto px-0.5 border-brand-200 cursor-pointer bg-brand-50" |
|
@click="addRecord(dayjs())" |
|
> |
|
{{ currTime.format('hh:mm A') }} |
|
</span> |
|
<div class="flex-1 border-b-1 border-brand-500"></div> |
|
</div> |
|
</div> |
|
<div class="flex sticky h-6 z-4 top-0 pl-16 bg-gray-50 w-full"> |
|
<div |
|
v-for="date in datesHours" |
|
:key="date[0].toISOString()" |
|
:class="{ |
|
'text-brand-500': date[0].isSame(dayjs(), 'date'), |
|
'w-1/5': maxVisibleDays === 5, |
|
'w-1/7': maxVisibleDays === 7, |
|
}" |
|
class="text-center text-[10px] font-semibold leading-4 flex items-center justify-center uppercase text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-l-1 border-r-0 bg-gray-50" |
|
> |
|
{{ dayjs(date[0]).format('DD ddd') }} |
|
</div> |
|
</div> |
|
<div |
|
:class="{ |
|
'top-20.5': !isExpanded && isRangeEnabled, |
|
'top-32': isExpanded && isRangeEnabled, |
|
'!top-0': !recordsAcrossAllRange.spanningRecords?.length, |
|
}" |
|
class="absolute bg-white w-16 z-1" |
|
> |
|
<div |
|
v-for="(hour, index) in datesHours[0]" |
|
:key="index" |
|
class="h-13 first:mt-0 pt-7.1 nc-calendar-day-hour text-right pr-2 font-semibold text-xs text-gray-500 py-1" |
|
> |
|
{{ hour.format('hh a') }} |
|
</div> |
|
</div> |
|
<div |
|
v-if="isRangeEnabled && recordsAcrossAllRange.spanningRecords?.length" |
|
class="sticky top-6 bg-white z-4 inset-x-0 w-full" |
|
> |
|
<SmartsheetCalendarDateTimeSpanningContainer |
|
ref="spanningRecordsContainer" |
|
:records="recordsAcrossAllRange.spanningRecords" |
|
@expand-record="expandRecord" |
|
/> |
|
</div> |
|
<div |
|
ref="container" |
|
:class="{ |
|
'mt-20.5 ': !isExpanded && isRangeEnabled, |
|
'mt-32': isExpanded && isRangeEnabled, |
|
'!mt-0': !recordsAcrossAllRange.spanningRecords?.length, |
|
}" |
|
class="absolute ml-16 flex w-[calc(100%-64px)]" |
|
> |
|
<div |
|
v-for="(date, index) in datesHours" |
|
:key="index" |
|
:class="{ |
|
'w-1/5': maxVisibleDays === 5, |
|
'w-1/7': maxVisibleDays === 7, |
|
}" |
|
class="h-full mt-5.95" |
|
data-testid="nc-calendar-week-day" |
|
> |
|
<div |
|
v-for="(hour, hourIndex) in date" |
|
:key="hourIndex" |
|
:class="{ |
|
'border-1 !border-brand-500 !bg-gray-100': |
|
hour.isSame(selectedTime, 'hour') && (hour.get('day') === 6 || hour.get('day') === 0), |
|
'selected-hour': hour.isSame(selectedTime, 'hour'), |
|
'bg-gray-50 hover:bg-gray-100': hour.get('day') === 0 || hour.get('day') === 6, |
|
'hover:bg-gray-50': hour.get('day') !== 0 && hour.get('day') !== 6, |
|
}" |
|
class="text-center relative transition h-13 text-sm text-gray-500 w-full py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100 border-l-gray-200" |
|
data-testid="nc-calendar-week-hour" |
|
@dblclick="addRecord(hour)" |
|
@click=" |
|
() => { |
|
selectedDate = hour |
|
selectedTime = hour |
|
dragRecord = null |
|
} |
|
" |
|
> |
|
<NcButton |
|
v-if="isOverflowAcrossHourRange(hour).isOverflow" |
|
v-e="`['c:calendar:week-view-more']`" |
|
class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-3 text-gray-500" |
|
size="xxsmall" |
|
type="secondary" |
|
@click="viewMore(hour)" |
|
> |
|
<span class="text-xs"> |
|
+ |
|
{{ isOverflowAcrossHourRange(hour).overflowCount }} |
|
more |
|
</span> |
|
</NcButton> |
|
</div> |
|
</div> |
|
|
|
<div |
|
class="absolute pointer-events-none z-2 inset-0 overflow-hidden !mt-5.95" |
|
data-testid="nc-calendar-week-record-container" |
|
> |
|
<template v-for="record in recordsAcrossAllRange.records" :key="record.rowMeta.id"> |
|
<div |
|
v-if="record.rowMeta.style?.display !== 'none'" |
|
:data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`" |
|
:data-unique-id="record.rowMeta!.id" |
|
:style="{ |
|
...record.rowMeta.style, |
|
lineHeight: '18px', |
|
opacity: |
|
(dragRecord === null || record.rowMeta.id === dragRecord?.rowMeta.id) && |
|
(resizeRecord === null || record.rowMeta.id === resizeRecord?.rowMeta.id) |
|
? 1 |
|
: 0.3, |
|
}" |
|
:class="{ |
|
'w-1/5': maxVisibleDays === 5, |
|
'w-1/7': maxVisibleDays === 7, |
|
}" |
|
class="absolute transition draggable-record group cursor-pointer pointer-events-auto" |
|
@mousedown.stop="dragStart($event, record)" |
|
@mouseleave="hoverRecord = null" |
|
@mouseover="hoverRecord = record.rowMeta.id" |
|
@dragover.prevent |
|
> |
|
<LazySmartsheetRow :row="record"> |
|
<LazySmartsheetCalendarVRecordCard |
|
:hover="hoverRecord === record.rowMeta.id" |
|
:position="record.rowMeta!.position" |
|
:dragging="record.rowMeta.id === dragRecord?.rowMeta?.id || resizeRecord?.rowMeta.id === record.rowMeta.id" |
|
:resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')" |
|
:record="record" |
|
:selected="record.rowMeta!.id === dragRecord?.rowMeta?.id" |
|
@resize-start="onResizeStart" |
|
> |
|
<template v-for="(field, id) in fields" :key="id"> |
|
<LazySmartsheetPlainCell |
|
v-if="!isRowEmpty(record, field!)" |
|
v-model="record.row[field!.title!]" |
|
class="text-xs" |
|
:column="field" |
|
:bold="!!fieldStyles[field.id]?.bold" |
|
:italic="!!fieldStyles[field.id]?.italic" |
|
:underline="!!fieldStyles[field.id]?.underline" |
|
/> |
|
</template> |
|
<template #time> |
|
<div class="text-xs font-medium text-gray-400"> |
|
{{ dayjs(record.row[record.rowMeta.range?.fk_from_col!.title!]).format('h:mm a') }} |
|
</div> |
|
</template> |
|
</LazySmartsheetCalendarVRecordCard> |
|
</LazySmartsheetRow> |
|
</div> |
|
</template> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.prevent-select { |
|
-webkit-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
} |
|
|
|
.selected-hour { |
|
@apply relative; |
|
&:after { |
|
@apply rounded-sm pointer-events-none absolute inset-0 w-full h-full; |
|
content: ''; |
|
z-index: 1; |
|
box-shadow: 0 0 0 2px #3366ff !important; |
|
} |
|
} |
|
</style>
|
|
|