|
|
@ -30,9 +30,9 @@ const datesHours = computed(() => { |
|
|
|
.minute(0) |
|
|
|
.minute(0) |
|
|
|
.second(0) |
|
|
|
.second(0) |
|
|
|
.millisecond(0) |
|
|
|
.millisecond(0) |
|
|
|
.year(startOfWeek.getFullYear() || dayjs().year()) |
|
|
|
.year(startOfWeek.getFullYear()) |
|
|
|
.month(startOfWeek.getMonth() || dayjs().month()) |
|
|
|
.month(startOfWeek.getMonth()) |
|
|
|
.date(startOfWeek.getDate() || dayjs().date()), |
|
|
|
.date(startOfWeek.getDate()), |
|
|
|
) |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
datesHours.push(hours) |
|
|
|
datesHours.push(hours) |
|
|
@ -47,40 +47,7 @@ function getRandomNumbers() { |
|
|
|
return randomValues.join('') |
|
|
|
return randomValues.join('') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const findFirstSuitableColumn = (recordsInDay: any, startDayIndex: number, spanDays: number) => { |
|
|
|
const recordsAcrossAllRange = computed(() => { |
|
|
|
let column = 0 |
|
|
|
|
|
|
|
while (true) { |
|
|
|
|
|
|
|
let isColumnSuitable = true |
|
|
|
|
|
|
|
for (let i = 0; i < spanDays; i++) { |
|
|
|
|
|
|
|
const dayIndex = startDayIndex + i |
|
|
|
|
|
|
|
if (!recordsInDay[dayIndex]) { |
|
|
|
|
|
|
|
recordsInDay[dayIndex] = {} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (recordsInDay[dayIndex][column]) { |
|
|
|
|
|
|
|
isColumnSuitable = false |
|
|
|
|
|
|
|
break |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (isColumnSuitable) { |
|
|
|
|
|
|
|
return column |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
column++ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const recordsAcrossAllRange = computed<{ |
|
|
|
|
|
|
|
records: Array<Row> |
|
|
|
|
|
|
|
count: { |
|
|
|
|
|
|
|
[key: string]: { |
|
|
|
|
|
|
|
[key: string]: { |
|
|
|
|
|
|
|
overflow: boolean |
|
|
|
|
|
|
|
count: number |
|
|
|
|
|
|
|
overflowCount: number |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}>(() => { |
|
|
|
|
|
|
|
if (!formattedData.value || !calendarRange.value || !container.value) return [] |
|
|
|
if (!formattedData.value || !calendarRange.value || !container.value) return [] |
|
|
|
|
|
|
|
|
|
|
|
const { scrollHeight } = container.value |
|
|
|
const { scrollHeight } = container.value |
|
|
@ -93,28 +60,22 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
|
|
|
|
|
|
|
|
const perRecordHeight = 40 |
|
|
|
const perRecordHeight = 40 |
|
|
|
|
|
|
|
|
|
|
|
const spaceBetweenRecords = 5 |
|
|
|
const overlaps: { |
|
|
|
|
|
|
|
|
|
|
|
const recordsInDayHour: { |
|
|
|
|
|
|
|
[key: string]: { |
|
|
|
[key: string]: { |
|
|
|
[key: string]: { |
|
|
|
[key: string]: Array<string> |
|
|
|
overflow: boolean |
|
|
|
|
|
|
|
count: number |
|
|
|
|
|
|
|
overflowCount: number |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} = {} |
|
|
|
} = {} |
|
|
|
|
|
|
|
|
|
|
|
if (!calendarRange.value) return [] |
|
|
|
if (!calendarRange.value) return [] |
|
|
|
|
|
|
|
|
|
|
|
const recordsToDisplay: Array<Row> = [] |
|
|
|
let recordsToDisplay: Array<Row> = [] |
|
|
|
|
|
|
|
|
|
|
|
calendarRange.value.forEach((range) => { |
|
|
|
calendarRange.value.forEach((range) => { |
|
|
|
const fromCol = range.fk_from_col |
|
|
|
const fromCol = range.fk_from_col |
|
|
|
const toCol = range.fk_to_col |
|
|
|
const toCol = range.fk_to_col |
|
|
|
|
|
|
|
|
|
|
|
const sortedFormattedData = [...formattedData.value].filter((record) => { |
|
|
|
const sortedFormattedData = [...formattedData.value].filter((record) => { |
|
|
|
const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
const fromDate = record.row[fromCol!.title!] ? dayjs(record.row[fromCol!.title!]) : null |
|
|
|
|
|
|
|
|
|
|
|
if (fromCol && toCol) { |
|
|
|
if (fromCol && toCol) { |
|
|
|
const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
@ -133,45 +94,31 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
if (!startDate) return |
|
|
|
if (!startDate) return |
|
|
|
const dateKey = startDate?.format('YYYY-MM-DD') |
|
|
|
const dateKey = startDate?.format('YYYY-MM-DD') |
|
|
|
const hourKey = startDate?.format('HH:mm') |
|
|
|
const hourKey = startDate?.format('HH:mm') |
|
|
|
|
|
|
|
const id = record.rowMeta.id ?? getRandomNumbers() |
|
|
|
|
|
|
|
|
|
|
|
if (dateKey && hourKey) { |
|
|
|
if (dateKey && hourKey) { |
|
|
|
if (!recordsInDayHour[dateKey]) { |
|
|
|
if (!overlaps[dateKey]) { |
|
|
|
recordsInDayHour[dateKey] = {} |
|
|
|
overlaps[dateKey] = {} |
|
|
|
} |
|
|
|
} |
|
|
|
if (!recordsInDayHour[dateKey][hourKey]) { |
|
|
|
if (!overlaps[dateKey][hourKey]) { |
|
|
|
recordsInDayHour[dateKey][hourKey] = { |
|
|
|
overlaps[dateKey][hourKey] = [] |
|
|
|
overflow: false, |
|
|
|
|
|
|
|
count: 0, |
|
|
|
|
|
|
|
overflowCount: 0, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
recordsInDayHour[dateKey][hourKey].count++ |
|
|
|
overlaps[dateKey][hourKey].push(id) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const id = record.rowMeta.id ?? getRandomNumbers() |
|
|
|
let dayIndex = dayjs(dateKey).day() - 1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (dayIndex === -1) { |
|
|
|
|
|
|
|
dayIndex = 6 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const dayIndex = dayjs(dateKey).day() - 1 |
|
|
|
|
|
|
|
const hourIndex = datesHours.value[dayIndex].findIndex((h) => h.format('HH:mm') === hourKey) |
|
|
|
const hourIndex = datesHours.value[dayIndex].findIndex((h) => h.format('HH:mm') === hourKey) |
|
|
|
|
|
|
|
|
|
|
|
const style: Partial<CSSStyleDeclaration> = { |
|
|
|
const style: Partial<CSSStyleDeclaration> = { |
|
|
|
left: `${dayIndex * perWidth}px`, |
|
|
|
|
|
|
|
top: `${hourIndex * perHeight}px`, |
|
|
|
top: `${hourIndex * perHeight}px`, |
|
|
|
|
|
|
|
height: `${perHeight - 30}px`, |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const recordIndex = recordsInDayHour[dateKey][hourKey].count |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const top = hourIndex * perHeight + (recordIndex - 1) * (perRecordHeight + spaceBetweenRecords) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const heightRequired = perRecordHeight * recordIndex + spaceBetweenRecords |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (heightRequired + 20 > perHeight) { |
|
|
|
|
|
|
|
style.display = 'none' |
|
|
|
|
|
|
|
recordsInDayHour[dateKey][hourKey].overflow = true |
|
|
|
|
|
|
|
recordsInDayHour[dateKey][hourKey].overflowCount++ |
|
|
|
|
|
|
|
} else { |
|
|
|
|
|
|
|
style.height = `${perRecordHeight}px` |
|
|
|
|
|
|
|
style.top = `${top}px` |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
recordsToDisplay.push({ |
|
|
|
recordsToDisplay.push({ |
|
|
|
...record, |
|
|
|
...record, |
|
|
|
rowMeta: { |
|
|
|
rowMeta: { |
|
|
@ -210,65 +157,52 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
while (hour.isSameOrBefore(recordEnd, 'hour')) { |
|
|
|
while (hour.isSameOrBefore(recordEnd, 'hour')) { |
|
|
|
const hourKey = hour.format('HH:mm') |
|
|
|
const hourKey = hour.format('HH:mm') |
|
|
|
|
|
|
|
|
|
|
|
if (!recordsInDayHour[dateKey]) { |
|
|
|
if (!overlaps[dateKey]) { |
|
|
|
recordsInDayHour[dateKey] = {} |
|
|
|
overlaps[dateKey] = {} |
|
|
|
} |
|
|
|
} |
|
|
|
if (!recordsInDayHour[dateKey][hourKey]) { |
|
|
|
if (!overlaps[dateKey][hourKey]) { |
|
|
|
recordsInDayHour[dateKey][hourKey] = { |
|
|
|
overlaps[dateKey][hourKey] = [] |
|
|
|
overflow: false, |
|
|
|
|
|
|
|
count: 0, |
|
|
|
|
|
|
|
overflowCount: 0, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
recordsInDayHour[dateKey][hourKey].count++ |
|
|
|
overlaps[dateKey][hourKey].push(id) |
|
|
|
hour = hour.add(1, 'hour') |
|
|
|
hour = hour.add(1, 'hour') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let dayIndex = recordStart.day() |
|
|
|
let dayIndex = recordStart.day() - 1 |
|
|
|
|
|
|
|
|
|
|
|
if (dayIndex === -1) { |
|
|
|
if (dayIndex === -1) { |
|
|
|
dayIndex = 7 |
|
|
|
dayIndex = 6 |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let maxRecordCount = 0 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < (datesHours.value[dayIndex - 1] ?? []).length; i++) { |
|
|
|
|
|
|
|
const hourKey = datesHours.value[dayIndex - 1][i].format('HH:mm') |
|
|
|
|
|
|
|
if (recordsInDayHour[dateKey]?.[hourKey]?.count > maxRecordCount) { |
|
|
|
|
|
|
|
maxRecordCount = recordsInDayHour[dateKey][hourKey].count |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const startHourIndex = Math.max( |
|
|
|
const startHourIndex = Math.max( |
|
|
|
(datesHours.value[dayIndex - 1] ?? []).findIndex((h) => h.format('HH:mm') === recordStart.format('HH:mm')), |
|
|
|
(datesHours.value[dayIndex] ?? []).findIndex((h) => h.format('HH:mm') === recordStart.format('HH:mm')), |
|
|
|
0, |
|
|
|
0, |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
const endHourIndex = Math.max( |
|
|
|
const endHourIndex = Math.max( |
|
|
|
(datesHours.value[dayIndex - 1] ?? []).findIndex( |
|
|
|
(datesHours.value[dayIndex] ?? []).findIndex((h) => h.format('HH:mm') === recordEnd?.startOf('hour').format('HH:mm')), |
|
|
|
(h) => h.format('HH:mm') === recordEnd?.startOf('hour').format('HH:mm'), |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
0, |
|
|
|
0, |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
let _startHourIndex = startHourIndex |
|
|
|
record.row[displayField.value.title], |
|
|
|
|
|
|
|
recordEnd?.startOf('hour').format('HH:mm'), |
|
|
|
|
|
|
|
(datesHours.value[dayIndex - 1] ?? []).findIndex( |
|
|
|
|
|
|
|
(h) => h.format('HH:mm') === recordEnd?.startOf('hour').format('HH:mm'), |
|
|
|
|
|
|
|
), |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const spanHours = endHourIndex - startHourIndex + 1 |
|
|
|
while (_startHourIndex <= endHourIndex) { |
|
|
|
|
|
|
|
const hourKey = datesHours.value[dayIndex][_startHourIndex].format('HH:mm') |
|
|
|
|
|
|
|
if (!overlaps[dateKey]) { |
|
|
|
|
|
|
|
overlaps[dateKey] = {} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (!overlaps[dateKey][hourKey]) { |
|
|
|
|
|
|
|
overlaps[dateKey][hourKey] = [] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
overlaps[dateKey][hourKey].push(id) |
|
|
|
|
|
|
|
_startHourIndex++ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const left = (dayIndex - 1) * perWidth |
|
|
|
const spanHours = endHourIndex - startHourIndex + 1 |
|
|
|
|
|
|
|
|
|
|
|
const top = startHourIndex * perRecordHeight |
|
|
|
const top = startHourIndex * perRecordHeight |
|
|
|
|
|
|
|
|
|
|
|
const height = (endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5 |
|
|
|
const height = (endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5 |
|
|
|
|
|
|
|
|
|
|
|
const style: Partial<CSSStyleDeclaration> = { |
|
|
|
const style: Partial<CSSStyleDeclaration> = { |
|
|
|
left: `${left}px`, |
|
|
|
|
|
|
|
top: `${top}px`, |
|
|
|
top: `${top}px`, |
|
|
|
height: `${height}px`, |
|
|
|
height: `${height}px`, |
|
|
|
} |
|
|
|
} |
|
|
@ -288,13 +222,40 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
console.log(recordsInDayHour) |
|
|
|
recordsToDisplay = recordsToDisplay.map((record) => { |
|
|
|
|
|
|
|
let maxOverlaps = 1 |
|
|
|
|
|
|
|
let overlapIndex = 0 |
|
|
|
|
|
|
|
for (const days in overlaps) { |
|
|
|
|
|
|
|
for (const hours in overlaps[days]) { |
|
|
|
|
|
|
|
if (overlaps[days][hours].includes(record.rowMeta.id!)) { |
|
|
|
|
|
|
|
maxOverlaps = Math.max(maxOverlaps, overlaps[days][hours].length) |
|
|
|
|
|
|
|
overlapIndex = Math.max(overlaps[days][hours].indexOf(record.rowMeta.id!), overlapIndex) |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let dayIndex = dayjs(record.row![record.rowMeta!.range!.fk_from_col.title!]).day() - 1 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (dayIndex === -1) { |
|
|
|
|
|
|
|
dayIndex = 6 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const spacing = 1 |
|
|
|
|
|
|
|
const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps / 7 |
|
|
|
|
|
|
|
const leftPerRecord = (widthPerRecord + spacing) * overlapIndex |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
record.rowMeta.style = { |
|
|
|
|
|
|
|
...record.rowMeta.style, |
|
|
|
|
|
|
|
left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}%)`, |
|
|
|
|
|
|
|
width: `calc(${widthPerRecord}%)`, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
return record |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log(overlaps) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
|
return recordsToDisplay |
|
|
|
records: recordsToDisplay, |
|
|
|
|
|
|
|
count: recordsInDayHour, |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const dragElement = ref<HTMLElement | null>(null) |
|
|
|
const dragElement = ref<HTMLElement | null>(null) |
|
|
@ -604,34 +565,26 @@ const dropEvent = (event: DragEvent) => { |
|
|
|
<span v-if="date[0].day() === selectedDateRange.start?.getDay()" class="absolute left-1"> |
|
|
|
<span v-if="date[0].day() === selectedDateRange.start?.getDay()" class="absolute left-1"> |
|
|
|
{{ hour.format('h A') }} |
|
|
|
{{ hour.format('h A') }} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<div |
|
|
|
|
|
|
|
v-if="recordsAcrossAllRange.count?.[dayjs(hour).format('YYYY-MM-DD')]?.[dayjs(hour).format('HH:mm')]?.overflow" |
|
|
|
|
|
|
|
class="text-xs absolute bottom-2 text-center inset-x-0 !z-[90] text-gray-500" |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
+ |
|
|
|
|
|
|
|
{{ recordsAcrossAllRange.count[dayjs(hour).format('YYYY-MM-DD')]?.[dayjs(hour).format('HH:mm')]?.overflowCount }} |
|
|
|
|
|
|
|
more |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="absolute pointer-events-none inset-0 !mt-[20px]"> |
|
|
|
<div class="absolute pointer-events-none inset-0 !mt-[20px]"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-for="(record, rowIndex) in recordsAcrossAllRange.records" |
|
|
|
v-for="(record, rowIndex) in recordsAcrossAllRange" |
|
|
|
:key="rowIndex" |
|
|
|
:key="rowIndex" |
|
|
|
:data-unique-id="record.rowMeta!.id" |
|
|
|
:data-unique-id="record.rowMeta!.id" |
|
|
|
:style="record.rowMeta!.style" |
|
|
|
:style="record.rowMeta!.style" |
|
|
|
class="absolute draggable-record w-1/7 cursor-pointer pointer-events-auto" |
|
|
|
class="absolute draggable-record w-1/7 group cursor-pointer pointer-events-auto" |
|
|
|
@mousedown="dragStart($event, record)" |
|
|
|
@mousedown="dragStart($event, record)" |
|
|
|
@dragover.prevent |
|
|
|
@dragover.prevent |
|
|
|
> |
|
|
|
> |
|
|
|
<LazySmartsheetRow :row="record"> |
|
|
|
<LazySmartsheetRow :row="record"> |
|
|
|
<LazySmartsheetCalendarRecordCard |
|
|
|
<LazySmartsheetCalendarVRecordCard |
|
|
|
:date="dayjs(record.row![record.rowMeta!.range!.fk_from_col.title!]).format('HH:mm')" |
|
|
|
:date="dayjs(record.row![record.rowMeta!.range!.fk_from_col.title!]).format('HH:mm')" |
|
|
|
:name="record.row![displayField!.title!]" |
|
|
|
:name="record.row![displayField!.title!]" |
|
|
|
:position="record.rowMeta!.position" |
|
|
|
:position="record.rowMeta!.position" |
|
|
|
:record="record" |
|
|
|
:record="record" |
|
|
|
:resize="false" |
|
|
|
:resize="true" |
|
|
|
color="blue" |
|
|
|
color="blue" |
|
|
|
size="auto" |
|
|
|
size="auto" |
|
|
|
/> |
|
|
|
/> |
|
|
|