Browse Source

feat(nc-gui): granularity in drag drop

pull/7731/head
DarkPhoenix2704 8 months ago
parent
commit
2f8ceb2931
  1. 57
      packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
  2. 10
      packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
  3. 8
      packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
  4. 118
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

57
packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue

@ -56,7 +56,7 @@ const recordsAcrossAllRange = computed<{
record: Row[] record: Row[]
count: { count: {
[key: string]: { [key: string]: {
id: string id: string[]
overflow: boolean overflow: boolean
overflowCount: number overflowCount: number
} }
@ -167,7 +167,7 @@ const recordsAcrossAllRange = computed<{
style.display = 'none' style.display = 'none'
overlaps[timeKey].overflowCount += 1 overlaps[timeKey].overflowCount += 1
} }
_startDate = _startDate.add(15, 'minutes') _startDate = _startDate.add(1, 'minutes')
} }
// This property is used to determine which side the record should be rounded. It can be top, bottom, both or none // This property is used to determine which side the record should be rounded. It can be top, bottom, both or none
@ -205,16 +205,16 @@ const recordsAcrossAllRange = computed<{
const id = generateRandomNumber() const id = generateRandomNumber()
const startDate = dayjs(record.row[fromCol.title!]) const startDate = dayjs(record.row[fromCol.title!])
const endDate = dayjs(record.row[fromCol.title!]).add(15, 'minutes') const endDate = dayjs(record.row[fromCol.title!]).add(1, 'hour')
const startHour = startDate.hour() const startHour = startDate.hour()
let style: Partial<CSSStyleDeclaration> = {} let style: Partial<CSSStyleDeclaration> = {}
let _startDate = startDate.clone() let _startDate = startDate.clone()
// We loop through every 15 minutes between the start and end date and keep track of the number of records that overlap at a given time // We loop through every minute between the start and end date and keep track of the number of records that overlap at a given time
while (_startDate.isBefore(endDate)) { while (_startDate.isBefore(endDate)) {
const timeKey = _startDate.startOf('hour').format('HH:mm') const timeKey = _startDate.format('HH:mm')
if (!overlaps[timeKey]) { if (!overlaps[timeKey]) {
overlaps[timeKey] = { overlaps[timeKey] = {
@ -234,15 +234,20 @@ const recordsAcrossAllRange = computed<{
display: 'none', display: 'none',
} }
} }
_startDate = _startDate.add(15, 'minutes') _startDate = _startDate.add(1, 'minute')
} }
const topInPixels = (startDate.hour() + startDate.startOf('hour').minute() / 60) * 80 // The top of the record is calculated based on the start hour
// Update such that it is also based on Minutes
const minutes = startDate.minute() + startDate.hour() * 60
const updatedTopInPixels = (minutes * 80) / 60
// A minimum height of 80px is set for each record // A minimum height of 80px is set for each record
const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 80, perRecordHeight) const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 80, perRecordHeight)
const finalTopInPixels = topInPixels + startHour * 2 const finalTopInPixels = updatedTopInPixels + startHour * 2
style = { style = {
...style, ...style,
@ -331,9 +336,10 @@ const calculateNewRow = (event: MouseEvent) => {
// We calculate the hour based on the percentage of the mouse position in the scroll container // We calculate the hour based on the percentage of the mouse position in the scroll container
// It can be between 0 and 23 (inclusive) // It can be between 0 and 23 (inclusive)
const hour = Math.max(Math.floor(percentY * 23), 0) const hour = Math.max(Math.floor(percentY * 23), 0)
const minutes = Math.floor(((percentY * 22 - hour) * 60) / 15) * 15
// We calculate the new startDate by adding the hour to the start of the selected date // We calculate the new startDate by adding the hour to the start of the selected date
const newStartDate = dayjs(selectedDate.value).startOf('day').add(hour, 'hour') const newStartDate = dayjs(selectedDate.value).startOf('day').add(hour, 'hour').add(minutes, 'minute')
if (!newStartDate || !fromCol) return { newRow: null, updateProperty: [] } if (!newStartDate || !fromCol) return { newRow: null, updateProperty: [] }
let endDate let endDate
@ -570,6 +576,35 @@ const dragStart = (event: MouseEvent, record: Row) => {
document.addEventListener('mouseup', onMouseUp) document.addEventListener('mouseup', onMouseUp)
} }
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 hourKey = startOfHour.format('HH:mm')
if (recordsAcrossAllRange.value?.count?.[hourKey]?.overflow) {
isOverflow = true
recordsAcrossAllRange.value?.count?.[hourKey]?.id.forEach((id) => {
if (!ids.includes(id)) {
ids.push(id)
overflowCount += 1
}
})
}
startOfHour = startOfHour.add(1, 'minute')
}
overflowCount = overflowCount > 8 ? overflowCount - 8 : 0
return { isOverflow, overflowCount }
}
const viewMore = (hour: dayjs.Dayjs) => { const viewMore = (hour: dayjs.Dayjs) => {
sideBarFilterOption.value = 'selectedHours' sideBarFilterOption.value = 'selectedHours'
selectedTime.value = hour selectedTime.value = hour
@ -680,7 +715,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
</NcButton> </NcButton>
<NcButton <NcButton
v-if="recordsAcrossAllRange?.count?.[hour.format('HH:mm')]?.overflow" v-if="isOverflowAcrossHourRange(hour).isOverflow"
class="!absolute bottom-2 text-center w-15 mx-auto inset-x-0 z-3 text-gray-500" class="!absolute bottom-2 text-center w-15 mx-auto inset-x-0 z-3 text-gray-500"
size="xxsmall" size="xxsmall"
type="secondary" type="secondary"
@ -688,7 +723,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
> >
<span class="text-xs"> <span class="text-xs">
+ +
{{ recordsAcrossAllRange?.count[hour.format('HH:mm')]?.overflowCount }} {{ isOverflowAcrossHourRange(hour).overflowCount }}
more more
</span> </span>
</NcButton> </NcButton>

10
packages/nc-gui/components/smartsheet/calendar/RecordCard.vue

@ -28,8 +28,8 @@ const emit = defineEmits(['resize-start'])
:class="{ :class="{
'min-h-9': size === 'small', 'min-h-9': size === 'small',
'h-full': size === 'auto', 'h-full': size === 'auto',
'rounded-l-lg ml-1': position === 'leftRounded', 'rounded-l-lg': position === 'leftRounded',
'rounded-r-lg mr-1': position === 'rightRounded', 'rounded-r-lg': position === 'rightRounded',
'rounded-lg mx-1': position === 'rounded', 'rounded-lg mx-1': position === 'rounded',
'rounded-none': position === 'none', 'rounded-none': position === 'none',
'bg-maroon-50': color === 'maroon', 'bg-maroon-50': color === 'maroon',
@ -53,7 +53,7 @@ const emit = defineEmits(['resize-start'])
'bg-pink-500': color === 'pink', 'bg-pink-500': color === 'pink',
'bg-purple-500': color === 'purple', 'bg-purple-500': color === 'purple',
}" }"
class="block h-full min-h-5 w-1 rounded" class="w-1 min-h-5 bg-blue-500 rounded-x rounded-y-sm"
></div> ></div>
<div v-if="(position === 'leftRounded' || position === 'rounded') && resize" class="mt-0.7 h-7.1 absolute -left-4 resize"> <div v-if="(position === 'leftRounded' || position === 'rounded') && resize" class="mt-0.7 h-7.1 absolute -left-4 resize">
@ -70,13 +70,13 @@ const emit = defineEmits(['resize-start'])
</NcButton> </NcButton>
</div> </div>
<div class="overflow-hidden flex w-full ml-2 h-8 absolute"> <div class="overflow-hidden items-center flex w-full ml-2 h-8">
<span v-if="position === 'rightRounded' || position === 'none'" class="mr-1"> .... </span> <span v-if="position === 'rightRounded' || position === 'none'" class="mr-1"> .... </span>
<span <span
:class="{ :class="{
'pr-7': position === 'leftRounded', 'pr-7': position === 'leftRounded',
}" }"
class="text-sm pt-1.5 pr-3 mr-3 break-word space-x-2 whitespace-nowrap gap-2 overflow-hidden text-ellipsis w-full truncate text-gray-800" class="text-sm pr-3 mr-3 break-word space-x-2 whitespace-nowrap gap-2 overflow-hidden text-ellipsis w-full truncate text-gray-800"
> >
<slot /> <slot />
</span> </span>

8
packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue

@ -51,9 +51,9 @@ const emit = defineEmits(['resize-start'])
'group-hover:(border-brand-500)': resize, 'group-hover:(border-brand-500)': resize,
'!border-brand-500 border-1': selected || hover, '!border-brand-500 border-1': selected || hover,
}" }"
class="relative h-full ml-0.25 border-1 border-gray-50" class="relative flex items-center h-full ml-0.25 border-1 border-gray-50"
> >
<div class="h-full absolute py-2"> <div class="h-full py-1">
<div <div
:class="{ :class="{
'bg-maroon-500': color === 'maroon', 'bg-maroon-500': color === 'maroon',
@ -63,14 +63,14 @@ const emit = defineEmits(['resize-start'])
'bg-pink-500': color === 'pink', 'bg-pink-500': color === 'pink',
'bg-purple-500': color === 'purple', 'bg-purple-500': color === 'purple',
}" }"
class="block h-full min-h-5 ml-1 w-1 rounded mr-2" class="block h-full min-h-5 ml-1 w-1 rounded"
></div> ></div>
</div> </div>
<div v-if="position === 'bottomRounded' || position === 'none'" class="ml-3">....</div> <div v-if="position === 'bottomRounded' || position === 'none'" class="ml-3">....</div>
<span <span
class="mt-1.5 pl-4 pr-1 text-sm h-[80%] text-gray-800 leading-7 space-x-2 break-all whitespace-normal truncate w-full overflow-y-hidden absolute" class="pl-1 pr-1 text-sm h-[80%] text-gray-800 leading-7 space-x-2 break-all whitespace-normal truncate w-full overflow-y-hidden"
> >
<slot /> <slot />
</span> </span>

118
packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

@ -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,48 +137,58 @@ 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 const endDate = ogStartDate.clone().add(1, 'hour')
// TODO: Need to work on the granularity of the hour
const dateKey = startDate?.format('YYYY-MM-DD')
const hourKey = startDate?.startOf('hour').format('HH:mm')
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)
} }
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 // 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 // We also keep track of the number of records that overflow
if (overlaps[dateKey][hourKey].id.length > 4) { if (overlaps[dateKey][hourKey].id.length > 4) {
overlaps[dateKey][hourKey].overflow = true overlaps[dateKey][hourKey].overflow = true
style.display = 'none' style.display = 'none'
overlaps[dateKey][hourKey].overflowCount += 1 overlaps[dateKey][hourKey].overflowCount += 1
} }
// TODO: dayIndex is not calculated perfectly
// Should revisit this part in next iteration
let dayIndex = dayjs(dateKey).day() - 1
if (dayIndex === -1) {
dayIndex = 6
}
// TODO: dayIndex is not calculated perfectly startDate = startDate.add(1, 'minute')
// Should revisit this part in next iteration
let dayIndex = dayjs(dateKey).day() - 1
if (dayIndex === -1) {
dayIndex = 6
} }
const dayIndex = ogStartDate.day() - 1
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(
@ -188,10 +198,14 @@ const recordsAcrossAllRange = computed<{
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}px`,
height: `${perHeight - 2}px`, height: `${perHeight - 4}px`,
} }
recordsToDisplay.push({ recordsToDisplay.push({
@ -514,7 +528,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.floor(((percentY * 22 - hour) * 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
@ -678,6 +694,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>
@ -726,7 +772,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 +780,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>

Loading…
Cancel
Save