github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(nc-gui): granularity in drag drop

pull/7731/head
DarkPhoenix2704 7 months ago
parent
870790b71f
commit
2f8ceb2931
4 changed files with 137 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save