|
|
@ -130,6 +130,7 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
sortedFormattedData.forEach((record: Row) => { |
|
|
|
sortedFormattedData.forEach((record: Row) => { |
|
|
|
if (!toCol && fromCol) { |
|
|
|
if (!toCol && fromCol) { |
|
|
|
const startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
const startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null |
|
|
|
|
|
|
|
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') |
|
|
|
|
|
|
|
|
|
|
@ -152,7 +153,7 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
const dayIndex = dayjs(dateKey).day() - 1 |
|
|
|
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 = { |
|
|
|
const style: Partial<CSSStyleDeclaration> = { |
|
|
|
left: `${dayIndex * perWidth}px`, |
|
|
|
left: `${dayIndex * perWidth}px`, |
|
|
|
top: `${hourIndex * perHeight}px`, |
|
|
|
top: `${hourIndex * perHeight}px`, |
|
|
|
} |
|
|
|
} |
|
|
@ -187,6 +188,7 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
let endDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null |
|
|
|
let endDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null |
|
|
|
|
|
|
|
|
|
|
|
if (!startDate?.isValid() || !endDate?.isValid()) return |
|
|
|
if (!startDate?.isValid() || !endDate?.isValid()) return |
|
|
|
|
|
|
|
|
|
|
|
if (startDate.isBefore(scheduleStart, 'minutes')) { |
|
|
|
if (startDate.isBefore(scheduleStart, 'minutes')) { |
|
|
|
startDate = scheduleStart |
|
|
|
startDate = scheduleStart |
|
|
|
} |
|
|
|
} |
|
|
@ -198,15 +200,9 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
|
|
|
|
|
|
|
|
while (currentStartDate.isSameOrBefore(endDate!, 'day')) { |
|
|
|
while (currentStartDate.isSameOrBefore(endDate!, 'day')) { |
|
|
|
const currentEndDate = currentStartDate.clone().endOf('day') |
|
|
|
const currentEndDate = currentStartDate.clone().endOf('day') |
|
|
|
const recordStart = currentEndDate.isSame(startDate, 'day') ? startDate : currentStartDate |
|
|
|
const recordStart: dayjs.Dayjs = currentEndDate.isSame(startDate, 'day') ? startDate : currentStartDate |
|
|
|
const recordEnd = currentEndDate.isSame(endDate, 'day') ? endDate : currentEndDate |
|
|
|
const recordEnd = currentEndDate.isSame(endDate, 'day') ? endDate : currentEndDate |
|
|
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
record.row[displayField.value.title], |
|
|
|
|
|
|
|
recordStart.format('YYYY-MM-DD HH:mm'), |
|
|
|
|
|
|
|
recordEnd.format('YYYY-MM-DD HH:mm'), |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const dateKey = recordStart.format('YYYY-MM-DD') |
|
|
|
const dateKey = recordStart.format('YYYY-MM-DD') |
|
|
|
|
|
|
|
|
|
|
|
let hour = recordStart?.clone().startOf('hour') |
|
|
|
let hour = recordStart?.clone().startOf('hour') |
|
|
@ -228,36 +224,53 @@ const recordsAcrossAllRange = computed<{ |
|
|
|
hour = hour.add(1, 'hour') |
|
|
|
hour = hour.add(1, 'hour') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const dayIndex = dayjs(dateKey).day() |
|
|
|
let dayIndex = recordStart.day() |
|
|
|
console.log('dayIndex', record.row[displayField.value.title], dayIndex) |
|
|
|
|
|
|
|
|
|
|
|
if (dayIndex === -1) { |
|
|
|
|
|
|
|
dayIndex = 7 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
let maxRecordCount = 0 |
|
|
|
let maxRecordCount = 0 |
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < (datesHours.value[dayIndex] ?? []).length; i++) { |
|
|
|
for (let i = 0; i < (datesHours.value[dayIndex - 1] ?? []).length; i++) { |
|
|
|
const hourKey = datesHours.value[dayIndex][i].format('HH:mm') |
|
|
|
const hourKey = datesHours.value[dayIndex - 1][i].format('HH:mm') |
|
|
|
if (recordsInDayHour[dateKey]?.[hourKey]?.count > maxRecordCount) { |
|
|
|
if (recordsInDayHour[dateKey]?.[hourKey]?.count > maxRecordCount) { |
|
|
|
maxRecordCount = recordsInDayHour[dateKey][hourKey].count |
|
|
|
maxRecordCount = recordsInDayHour[dateKey][hourKey].count |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const startHourIndex = Math.max( |
|
|
|
const startHourIndex = Math.max( |
|
|
|
(datesHours.value[dayIndex] ?? []).findIndex((h) => h.format('HH:mm') === recordStart.format('HH:mm')), |
|
|
|
(datesHours.value[dayIndex - 1] ?? []).findIndex((h) => h.format('HH:mm') === recordStart.format('HH:mm')), |
|
|
|
0, |
|
|
|
0, |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
const endHourIndex = Math.max( |
|
|
|
const endHourIndex = Math.max( |
|
|
|
(datesHours.value[dayIndex] ?? []).findIndex((h) => h.format('HH:mm') === recordEnd?.startOf('hour').format('HH:mm')), |
|
|
|
(datesHours.value[dayIndex - 1] ?? []).findIndex( |
|
|
|
|
|
|
|
(h) => h.format('HH:mm') === recordEnd?.startOf('hour').format('HH:mm'), |
|
|
|
|
|
|
|
), |
|
|
|
0, |
|
|
|
0, |
|
|
|
) |
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log( |
|
|
|
|
|
|
|
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 |
|
|
|
const spanHours = endHourIndex - startHourIndex + 1 |
|
|
|
|
|
|
|
|
|
|
|
console.log(record.row[displayField.value.title], dayIndex) |
|
|
|
const left = (dayIndex - 1) * perWidth |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const top = startHourIndex * perRecordHeight |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const height = (endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5 |
|
|
|
|
|
|
|
|
|
|
|
const style: Partial<CSSStyleDeclaration> = { |
|
|
|
const style: Partial<CSSStyleDeclaration> = { |
|
|
|
left: `${(dayIndex - 1) * perWidth}px`, |
|
|
|
left: `${left}px`, |
|
|
|
top: `${startHourIndex * perHeight}px`, |
|
|
|
top: `${top}px`, |
|
|
|
height: `${(endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5}px`, |
|
|
|
height: `${height}px`, |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
recordsToDisplay.push({ |
|
|
|
recordsToDisplay.push({ |
|
|
@ -592,10 +605,7 @@ const dropEvent = (event: DragEvent) => { |
|
|
|
{{ hour.format('h A') }} |
|
|
|
{{ hour.format('h A') }} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-if=" |
|
|
|
v-if="recordsAcrossAllRange.count?.[dayjs(hour).format('YYYY-MM-DD')]?.[dayjs(hour).format('HH:mm')]?.overflow" |
|
|
|
recordsAcrossAllRange.count?.[dayjs(hour).format('YYYY-MM-DD')]?.[dayjs(hour).format('HH:mm')]?.overflow && |
|
|
|
|
|
|
|
!draggingId |
|
|
|
|
|
|
|
" |
|
|
|
|
|
|
|
class="text-xs absolute bottom-2 text-center inset-x-0 !z-[90] text-gray-500" |
|
|
|
class="text-xs absolute bottom-2 text-center inset-x-0 !z-[90] text-gray-500" |
|
|
|
> |
|
|
|
> |
|
|
|
+ |
|
|
|
+ |
|
|
|