|
|
|
|
@ -1,8 +1,8 @@
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import dayjs from 'dayjs' |
|
|
|
|
import { type ColumnType } from 'nocodb-sdk' |
|
|
|
|
import type { ColumnType } from 'nocodb-sdk' |
|
|
|
|
import type { Row } from '~/lib' |
|
|
|
|
import { computed, ref, useViewColumnsOrThrow } from '#imports' |
|
|
|
|
import { computed, ref, useMemoize, useViewColumnsOrThrow } from '#imports' |
|
|
|
|
import { generateRandomNumber, isRowEmpty } from '~/utils' |
|
|
|
|
|
|
|
|
|
const emits = defineEmits(['expandRecord', 'newRecord']) |
|
|
|
|
@ -14,7 +14,6 @@ const {
|
|
|
|
|
calendarRange, |
|
|
|
|
displayField, |
|
|
|
|
selectedTime, |
|
|
|
|
selectedDate, |
|
|
|
|
updateRowProperty, |
|
|
|
|
sideBarFilterOption, |
|
|
|
|
showSideMenu, |
|
|
|
|
@ -34,17 +33,54 @@ const fields = inject(FieldsInj, ref())
|
|
|
|
|
|
|
|
|
|
const { fields: _fields } = useViewColumnsOrThrow() |
|
|
|
|
|
|
|
|
|
const getFieldStyle = (field: ColumnType | undefined) => { |
|
|
|
|
if (!field) return { underline: false, bold: false, italic: false } |
|
|
|
|
const fi = _fields.value?.find((f) => f.title === field.title) |
|
|
|
|
const fieldStyles = computed(() => { |
|
|
|
|
if (!_fields.value) return new Map() |
|
|
|
|
return new Map( |
|
|
|
|
_fields.value.map((field) => [ |
|
|
|
|
field.fk_column_id, |
|
|
|
|
{ |
|
|
|
|
underline: field.underline, |
|
|
|
|
bold: field.bold, |
|
|
|
|
italic: field.italic, |
|
|
|
|
}, |
|
|
|
|
]), |
|
|
|
|
) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
underline: fi?.underline, |
|
|
|
|
bold: fi?.bold, |
|
|
|
|
italic: fi?.italic, |
|
|
|
|
const getFieldStyle = (field: ColumnType) => { |
|
|
|
|
return fieldStyles.value.get(field.id) |
|
|
|
|
} |
|
|
|
|
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 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 datesHours: Array<Array<dayjs.Dayjs>> = [] |
|
|
|
|
@ -71,167 +107,178 @@ const datesHours = computed(() => {
|
|
|
|
|
return datesHours |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const recordsAcrossAllRange = computed<{ |
|
|
|
|
records: Array<Row> |
|
|
|
|
count: { |
|
|
|
|
[key: string]: { |
|
|
|
|
[key: string]: { |
|
|
|
|
id: Array<string> |
|
|
|
|
overflow: boolean |
|
|
|
|
overflowCount: number |
|
|
|
|
const getDayIndex = (date: dayjs.Dayjs) => { |
|
|
|
|
let dayIndex = date.day() - 1 |
|
|
|
|
if (dayIndex === -1) { |
|
|
|
|
dayIndex = 6 |
|
|
|
|
} |
|
|
|
|
return dayIndex |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const getGridTime = (date: dayjs.Dayjs, round = false) => { |
|
|
|
|
const gridCalc = date.hour() * 60 + date.minute() |
|
|
|
|
if (round) { |
|
|
|
|
return Math.ceil(gridCalc) |
|
|
|
|
} else { |
|
|
|
|
return Math.floor(gridCalc) |
|
|
|
|
} |
|
|
|
|
}>(() => { |
|
|
|
|
if (!formattedData.value || !calendarRange.value || !container.value || !scrollContainer.value) |
|
|
|
|
return { |
|
|
|
|
records: [], |
|
|
|
|
count: {}, |
|
|
|
|
} |
|
|
|
|
const perWidth = containerWidth.value / 7 |
|
|
|
|
const perHeight = 52 |
|
|
|
|
|
|
|
|
|
const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day') |
|
|
|
|
const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day') |
|
|
|
|
|
|
|
|
|
// 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 key is in the format YYYY-MM-DD and the hour is in the format HH:mm |
|
|
|
|
const overlaps: { |
|
|
|
|
[key: string]: { |
|
|
|
|
[key: string]: { |
|
|
|
|
id: Array<string> |
|
|
|
|
overflow: boolean |
|
|
|
|
overflowCount: number |
|
|
|
|
const getGridTimeSlots = (from: dayjs.Dayjs, to: dayjs.Dayjs) => { |
|
|
|
|
return { |
|
|
|
|
from: getGridTime(from, false), |
|
|
|
|
to: getGridTime(to, true) - 1, |
|
|
|
|
dayIndex: getDayIndex(from), |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} = {} |
|
|
|
|
|
|
|
|
|
let recordsToDisplay: Array<Row> = [] |
|
|
|
|
const hasSlotForRecord = ( |
|
|
|
|
columnArray: Row[], |
|
|
|
|
dates: { |
|
|
|
|
fromDate: dayjs.Dayjs |
|
|
|
|
toDate: dayjs.Dayjs |
|
|
|
|
}, |
|
|
|
|
) => { |
|
|
|
|
const { fromDate, toDate } = dates |
|
|
|
|
|
|
|
|
|
calendarRange.value.forEach((range) => { |
|
|
|
|
const fromCol = range.fk_from_col |
|
|
|
|
const toCol = range.fk_to_col |
|
|
|
|
if (!fromDate || !toDate) return false |
|
|
|
|
|
|
|
|
|
// 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) => { |
|
|
|
|
const fromDate = record.row[fromCol!.title!] ? dayjs(record.row[fromCol!.title!]) : null |
|
|
|
|
for (const column of columnArray) { |
|
|
|
|
const columnFromCol = column.rowMeta.range?.fk_from_col |
|
|
|
|
const columnToCol = column.rowMeta.range?.fk_to_col |
|
|
|
|
|
|
|
|
|
if (fromCol && toCol) { |
|
|
|
|
const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
|
const toDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null |
|
|
|
|
if (!columnFromCol) return false |
|
|
|
|
|
|
|
|
|
return fromDate && toDate && !toDate.isBefore(fromDate) |
|
|
|
|
} else if (fromCol && !toCol) { |
|
|
|
|
return !!fromDate |
|
|
|
|
} |
|
|
|
|
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'), |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
sortedFormattedData.forEach((record: Row) => { |
|
|
|
|
if (!toCol && fromCol) { |
|
|
|
|
// If there is no toColumn chosen in the range |
|
|
|
|
const ogStartDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
|
if (!ogStartDate) return |
|
|
|
|
|
|
|
|
|
let endDate = ogStartDate.clone().add(1, 'hour') |
|
|
|
|
|
|
|
|
|
if (endDate.isAfter(scheduleEnd, 'minutes')) { |
|
|
|
|
endDate = scheduleEnd |
|
|
|
|
if ( |
|
|
|
|
fromDate.isBetween(columnFromDate, columnToDate, null, '[]') || |
|
|
|
|
toDate.isBetween(columnFromDate, columnToDate, null, '[]') |
|
|
|
|
) { |
|
|
|
|
return false |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return true |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const id = record.rowMeta.id ?? generateRandomNumber() |
|
|
|
|
|
|
|
|
|
let startDate = ogStartDate.clone() |
|
|
|
|
const getMaxOverlaps = ({ |
|
|
|
|
row, |
|
|
|
|
columnArray, |
|
|
|
|
graph, |
|
|
|
|
}: { |
|
|
|
|
row: Row |
|
|
|
|
columnArray: Array<Array<Array<Row>>> |
|
|
|
|
graph: Map<string, Set<string>> |
|
|
|
|
}) => { |
|
|
|
|
const id = row.rowMeta.id as string |
|
|
|
|
|
|
|
|
|
let style: Partial<CSSStyleDeclaration> = {} |
|
|
|
|
const visited: Set<string> = new Set() |
|
|
|
|
|
|
|
|
|
while (startDate.isBefore(endDate, 'minutes')) { |
|
|
|
|
const dateKey = startDate?.format('YYYY-MM-DD') |
|
|
|
|
const hourKey = startDate?.format('HH:mm') |
|
|
|
|
const dayIndex = row.rowMeta.dayIndex |
|
|
|
|
const overlapIndex = columnArray[dayIndex].findIndex((column) => column.findIndex((r) => r.rowMeta.id === id) !== -1) + 1 |
|
|
|
|
|
|
|
|
|
// If the dateKey and hourKey are valid, we add the id to the overlaps object |
|
|
|
|
if (dateKey && hourKey) { |
|
|
|
|
if (!overlaps[dateKey]) { |
|
|
|
|
overlaps[dateKey] = {} |
|
|
|
|
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) |
|
|
|
|
} |
|
|
|
|
if (!overlaps[dateKey][hourKey]) { |
|
|
|
|
overlaps[dateKey][hourKey] = { |
|
|
|
|
id: [], |
|
|
|
|
overflow: false, |
|
|
|
|
overflowCount: 0, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
overlaps[dateKey][hourKey].id.push(id) |
|
|
|
|
return maxOverlaps |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 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 |
|
|
|
|
let maxOverlaps = 1 |
|
|
|
|
if (graph.has(id)) { |
|
|
|
|
maxOverlaps = dfs(id) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// TODO: dayIndex is not calculated perfectly |
|
|
|
|
// Should revisit this part in next iteration |
|
|
|
|
let dayIndex = dayjs(dateKey).day() - 1 |
|
|
|
|
if (dayIndex === -1) { |
|
|
|
|
dayIndex = 6 |
|
|
|
|
return { maxOverlaps, dayIndex, overlapIndex } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
startDate = startDate.add(1, 'minute') |
|
|
|
|
const recordsAcrossAllRange = computed<{ |
|
|
|
|
records: Array<Row> |
|
|
|
|
gridTimeMap: Map< |
|
|
|
|
number, |
|
|
|
|
Map< |
|
|
|
|
number, |
|
|
|
|
{ |
|
|
|
|
count: number |
|
|
|
|
id: string[] |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let dayIndex = ogStartDate.day() - 1 |
|
|
|
|
|
|
|
|
|
if (dayIndex === -1) { |
|
|
|
|
dayIndex = 6 |
|
|
|
|
> |
|
|
|
|
> |
|
|
|
|
}>(() => { |
|
|
|
|
if (!formattedData.value || !calendarRange.value || !container.value || !scrollContainer.value) |
|
|
|
|
return { |
|
|
|
|
records: [], |
|
|
|
|
gridTimeMap: new Map(), |
|
|
|
|
} |
|
|
|
|
const perWidth = containerWidth.value / 7 |
|
|
|
|
const perHeight = 52 |
|
|
|
|
|
|
|
|
|
const minutes = (ogStartDate.minute() / 60 + ogStartDate.hour()) * 52 |
|
|
|
|
const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day') |
|
|
|
|
const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day') |
|
|
|
|
|
|
|
|
|
style = { |
|
|
|
|
...style, |
|
|
|
|
top: `${minutes + 1}px`, |
|
|
|
|
height: `${perHeight - 2}px`, |
|
|
|
|
const columnArray: Array<Array<Array<Row>>> = [[[]]] |
|
|
|
|
const gridTimeMap = new Map< |
|
|
|
|
number, |
|
|
|
|
Map< |
|
|
|
|
number, |
|
|
|
|
{ |
|
|
|
|
count: number |
|
|
|
|
id: string[] |
|
|
|
|
} |
|
|
|
|
> |
|
|
|
|
>() |
|
|
|
|
const recordsToDisplay: Array<Row> = [] |
|
|
|
|
|
|
|
|
|
recordsToDisplay.push({ |
|
|
|
|
...record, |
|
|
|
|
rowMeta: { |
|
|
|
|
...record.rowMeta, |
|
|
|
|
id, |
|
|
|
|
position: 'rounded', |
|
|
|
|
style, |
|
|
|
|
range, |
|
|
|
|
dayIndex, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
} else if (fromCol && toCol) { |
|
|
|
|
const id = record.rowMeta.id ?? generateRandomNumber() |
|
|
|
|
calendarRange.value.forEach((range) => { |
|
|
|
|
const fromCol = range.fk_from_col |
|
|
|
|
const toCol = range.fk_to_col |
|
|
|
|
|
|
|
|
|
let startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
|
let endDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null |
|
|
|
|
// 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) => { |
|
|
|
|
const fromDate = record.row[fromCol!.title!] ? dayjs(record.row[fromCol!.title!]) : null |
|
|
|
|
|
|
|
|
|
// If the start date is not valid, we skip the record |
|
|
|
|
if (!startDate?.isValid()) return |
|
|
|
|
if (fromCol && toCol) { |
|
|
|
|
const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
|
const toDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null |
|
|
|
|
|
|
|
|
|
// If the end date is not valid, we set it to 30 minutes after the start date |
|
|
|
|
if (!endDate?.isValid()) { |
|
|
|
|
endDate = startDate.clone().add(30, 'minutes') |
|
|
|
|
return fromDate && toDate && !toDate.isBefore(fromDate) |
|
|
|
|
} else if (fromCol && !toCol) { |
|
|
|
|
return !!fromDate |
|
|
|
|
} |
|
|
|
|
return false |
|
|
|
|
}) |
|
|
|
|
.sort((a, b) => { |
|
|
|
|
const aDate = dayjs(a.row[fromCol!.title!]) |
|
|
|
|
const bDate = dayjs(b.row[fromCol!.title!]) |
|
|
|
|
return aDate.isBefore(bDate) ? 1 : -1 |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 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 |
|
|
|
|
} |
|
|
|
|
if (endDate.isAfter(scheduleEnd, 'minutes')) { |
|
|
|
|
endDate = scheduleEnd |
|
|
|
|
} |
|
|
|
|
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, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// Setting the current start date to the start date of the record |
|
|
|
|
let currentStartDate: dayjs.Dayjs = startDate.clone() |
|
|
|
|
@ -242,14 +289,7 @@ const recordsAcrossAllRange = computed<{
|
|
|
|
|
const recordStart: dayjs.Dayjs = currentEndDate.isSame(startDate, 'day') ? startDate : currentStartDate |
|
|
|
|
const recordEnd = currentEndDate.isSame(endDate, 'day') ? endDate : currentEndDate |
|
|
|
|
|
|
|
|
|
const dateKey = recordStart.format('YYYY-MM-DD') |
|
|
|
|
|
|
|
|
|
// TODO: dayIndex is not calculated perfectly |
|
|
|
|
// Should revisit this part in next iteration |
|
|
|
|
let dayIndex = recordStart.day() - 1 |
|
|
|
|
if (dayIndex === -1) { |
|
|
|
|
dayIndex = 6 |
|
|
|
|
} |
|
|
|
|
const dayIndex = getDayIndex(recordStart) |
|
|
|
|
|
|
|
|
|
// We calculate the index of the start and end hour in the day |
|
|
|
|
const startHourIndex = Math.max( |
|
|
|
|
@ -278,36 +318,8 @@ const recordsAcrossAllRange = computed<{
|
|
|
|
|
position = 'none' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
let _startHourIndex = startHourIndex |
|
|
|
|
|
|
|
|
|
let style: Partial<CSSStyleDeclaration> = {} |
|
|
|
|
|
|
|
|
|
// We loop through the start hour index to the end hour index and add the id to the overlaps object |
|
|
|
|
while (_startHourIndex <= endHourIndex) { |
|
|
|
|
const hourKey = datesHours.value[dayIndex][_startHourIndex].format('HH:mm') |
|
|
|
|
if (!overlaps[dateKey]) { |
|
|
|
|
overlaps[dateKey] = {} |
|
|
|
|
} |
|
|
|
|
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 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
_startHourIndex++ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const spanHours = endHourIndex - startHourIndex + 1 |
|
|
|
|
|
|
|
|
|
const top = startHourIndex * perHeight |
|
|
|
|
@ -334,45 +346,170 @@ const recordsAcrossAllRange = computed<{
|
|
|
|
|
// We set the current start date to the next day |
|
|
|
|
currentStartDate = currentStartDate.add(1, 'day').hour(0).minute(0) |
|
|
|
|
} |
|
|
|
|
} 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 |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// With can't find the left and width of the record without knowing the overlaps |
|
|
|
|
// Hence the first iteration is to find the overlaps, top, height and then the second iteration is to find the left and width |
|
|
|
|
// This is because the left and width of the record depends on the overlaps |
|
|
|
|
for (const record of recordsToDisplay) { |
|
|
|
|
const fromCol = record.rowMeta.range?.fk_from_col |
|
|
|
|
const toCol = record.rowMeta.range?.fk_to_col |
|
|
|
|
|
|
|
|
|
recordsToDisplay = recordsToDisplay.map((record) => { |
|
|
|
|
// maxOverlaps is the maximum number of records that overlap in a single hour |
|
|
|
|
// overlapIndex is the index of the record in the overlaps object |
|
|
|
|
let maxOverlaps = 1 |
|
|
|
|
let overlapIndex = 0 |
|
|
|
|
const dayIndex = record.rowMeta.dayIndex as number |
|
|
|
|
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) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const dateKey = dayjs(selectedDateRange.value.start).add(dayIndex, 'day').format('YYYY-MM-DD') |
|
|
|
|
for (const hours in overlaps[dateKey]) { |
|
|
|
|
// We are checking if the overlaps object contains the id of the record |
|
|
|
|
// If it does, we set the maxOverlaps and overlapIndex |
|
|
|
|
if (overlaps[dateKey][hours].id.includes(record.rowMeta.id!)) { |
|
|
|
|
maxOverlaps = Math.max(maxOverlaps, overlaps[dateKey][hours].id.length - overlaps[dateKey][hours].overflowCount) |
|
|
|
|
overlapIndex = Math.max(overlapIndex, overlaps[dateKey][hours].id.indexOf(record.rowMeta.id!)) |
|
|
|
|
for (const dayIndex in columnArray) { |
|
|
|
|
for (const columnIndex in columnArray[dayIndex]) { |
|
|
|
|
for (const record of columnArray[dayIndex][columnIndex]) { |
|
|
|
|
record.rowMeta.overLapIteration = parseInt(columnIndex) + 1 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
const spacing = 0.1 |
|
|
|
|
const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps / 7 |
|
|
|
|
const leftPerRecord = widthPerRecord * overlapIndex |
|
|
|
|
} |
|
|
|
|
for (const record of recordsToDisplay) { |
|
|
|
|
const { maxOverlaps, overlapIndex } = getMaxOverlaps({ |
|
|
|
|
row: record, |
|
|
|
|
columnArray, |
|
|
|
|
graph: graph.get(record.rowMeta.dayIndex!) ?? new Map(), |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const dayIndex = record.rowMeta.dayIndex ?? tDayIndex |
|
|
|
|
record.rowMeta.numberOfOverlaps = maxOverlaps |
|
|
|
|
|
|
|
|
|
let width = 0 |
|
|
|
|
let left = 100 |
|
|
|
|
const majorLeft = dayIndex * perWidth |
|
|
|
|
let display = 'block' |
|
|
|
|
|
|
|
|
|
if (record.rowMeta.overLapIteration! - 1 > 2) { |
|
|
|
|
display = 'none' |
|
|
|
|
} else { |
|
|
|
|
width = 100 / Math.min(maxOverlaps, 3) / 7 |
|
|
|
|
left = width * (overlapIndex - 1) |
|
|
|
|
} |
|
|
|
|
record.rowMeta.style = { |
|
|
|
|
...record.rowMeta.style, |
|
|
|
|
left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}% )`, |
|
|
|
|
width: `calc(${widthPerRecord - 0.1}%)`, |
|
|
|
|
left: `calc(${majorLeft}px + ${left}%)`, |
|
|
|
|
width: `calc(${width}%)`, |
|
|
|
|
display, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return record |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
records: recordsToDisplay, |
|
|
|
|
count: overlaps, |
|
|
|
|
gridTimeMap, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
@ -497,9 +634,11 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
|
|
|
|
|
const calculateNewRow = ( |
|
|
|
|
event: MouseEvent, |
|
|
|
|
updateSideBar?: boolean, |
|
|
|
|
skipChangeCheck?: boolean, |
|
|
|
|
): { |
|
|
|
|
newRow: Row | null |
|
|
|
|
updatedProperty: string[] |
|
|
|
|
skipChangeCheck?: boolean |
|
|
|
|
} => { |
|
|
|
|
const { width, left, top } = container.value.getBoundingClientRect() |
|
|
|
|
|
|
|
|
|
@ -528,7 +667,7 @@ const calculateNewRow = (
|
|
|
|
|
...dragRecord.value, |
|
|
|
|
row: { |
|
|
|
|
...dragRecord.value.row, |
|
|
|
|
[fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD HH:mm:ssZ'), |
|
|
|
|
[fromCol.title!]: dayjs(newStartDate).utc().format('YYYY-MM-DD HH:mm:ssZ'), |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -546,11 +685,16 @@ const calculateNewRow = (
|
|
|
|
|
endDate = newStartDate.clone() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD HH:mm:ssZ') |
|
|
|
|
newRow.row[toCol.title!] = dayjs(endDate).utc().format('YYYY-MM-DD HH:mm:ssZ') |
|
|
|
|
updatedProperty.push(toCol.title!) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (!newRow) return { newRow: null, updatedProperty } |
|
|
|
|
// If from and to columns of the dragRecord and the newRow are the same, we don't manipulate the formattedRecords and formattedSideBarData. This removes unwanted computation |
|
|
|
|
if (dragRecord.value.row[fromCol.title!] === newRow.row[fromCol.title!] && !skipChangeCheck) { |
|
|
|
|
return { newRow: null, updatedProperty: [] } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (!newRow) return { newRow: null, updatedProperty: [] } |
|
|
|
|
|
|
|
|
|
const newPk = extractPkFromRow(newRow.row, meta.value!.columns!) |
|
|
|
|
|
|
|
|
|
@ -565,6 +709,10 @@ const calculateNewRow = (
|
|
|
|
|
const pk = extractPkFromRow(r.row, meta.value!.columns!) |
|
|
|
|
return pk === newPk ? newRow : r |
|
|
|
|
}) |
|
|
|
|
dragRecord.value = { |
|
|
|
|
...dragRecord.value, |
|
|
|
|
row: newRow.row, |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return { newRow, updatedProperty } |
|
|
|
|
@ -591,7 +739,7 @@ const stopDrag = (event: MouseEvent) => {
|
|
|
|
|
event.preventDefault() |
|
|
|
|
clearTimeout(dragTimeout.value!) |
|
|
|
|
|
|
|
|
|
const { newRow, updatedProperty } = calculateNewRow(event, false) |
|
|
|
|
const { newRow, updatedProperty } = calculateNewRow(event, false, true) |
|
|
|
|
|
|
|
|
|
// We set the visibility and opacity of the records back to normal |
|
|
|
|
const allRecords = document.querySelectorAll('.draggable-record') |
|
|
|
|
@ -676,33 +824,19 @@ const viewMore = (hour: dayjs.Dayjs) => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => { |
|
|
|
|
let startOfHour = hour.startOf('hour') |
|
|
|
|
const endOfHour = hour.endOf('hour') |
|
|
|
|
|
|
|
|
|
const ids: Array<string> = [] |
|
|
|
|
|
|
|
|
|
let isOverflow = false |
|
|
|
|
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 |
|
|
|
|
|
|
|
|
|
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') |
|
|
|
|
for (let minute = startMinute; minute <= endMinute; minute++) { |
|
|
|
|
const recordCount = gridTimeMap.get(dayIndex)?.get(minute)?.count ?? 0 |
|
|
|
|
overflowCount = Math.max(overflowCount, recordCount) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
overflowCount = overflowCount > 4 ? overflowCount - 4 : 0 |
|
|
|
|
|
|
|
|
|
return { isOverflow, overflowCount } |
|
|
|
|
return { isOverflow: overflowCount - 3 > 0, overflowCount: overflowCount - 3 } |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// TODO: Add Support for multiple ranges when multiple ranges are supported |
|
|
|
|
@ -773,7 +907,6 @@ watch(
|
|
|
|
|
@click=" |
|
|
|
|
() => { |
|
|
|
|
selectedTime = hour |
|
|
|
|
selectedDate = hour |
|
|
|
|
dragRecord = undefined |
|
|
|
|
} |
|
|
|
|
" |
|
|
|
|
|
Raju Udava
7 months ago
