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

fix: height calculation

pull/9831/head
DarkPhoenix2704 2 days ago
parent
7b53ab888d
commit
28a2697d29
3 changed files with 65 additions and 78 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. 18
      packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
  2. 10
      packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
  3. 105
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

18
packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
Unescape View File

@ -16,8 +16,8 @@ const props = withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<div class="border-1 cursor-pointer h-14 border-gray-200 flex gap-2 items-center rounded-lg"> <div class="border-1 cursor-pointer min-h-14 border-gray-200 p-2 flex gap-2 flex-col rounded-lg">
<div class="flex items-center pl-2 gap-2"> <div class="flex items-center gap-2">
<span <span
:class="{ :class="{
'bg-maroon-500': props.color === 'maroon', 'bg-maroon-500': props.color === 'maroon',
@ -40,13 +40,15 @@ const props = withDefaults(defineProps<Props>(), {
</div> </div>
</div> </div>
<div v-if="invalid" class="gap-3 bg-yellow-50 mt-2 border-gray-200 border-1 rounded-lg p-2 flex"> <NcTooltip v-if="invalid">
<component :is="iconMap.warning" class="text-yellow-500 h-4 w-4" /> <div class="gap-3 bg-yellow-50 mt-2 border-gray-200 border-1 rounded-lg p-2 flex">
<div class="flex flex-col gap-1"> <GeneralIcon icon="warning" class="text-yellow-500 !h-5 !w-5" />
<h1 class="text-gray-800 text-bold">Date mismatch</h1> <div class="text-gray-700 text-xs">Selected End date is before Start date.</div>
<p class="text-gray-500">Selected End date is before Start date.</p>
</div>
</div> </div>
<template #title>
Record with end date before the start date won't be displayed in the calendar. Update the end date to display the record.
</template>
</NcTooltip>
</div> </div>
</template> </template>

10
packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
Unescape View File

@ -32,7 +32,7 @@ const emit = defineEmits(['resize-start'])
> >
<div <div
v-if="resize" v-if="resize"
class="absolute w-full h-2 z-20 top-0 !cursor-row-resize" class="absolute w-full h-1 z-20 top-0 !cursor-row-resize"
@mousedown.stop="emit('resize-start', 'left', $event, record)" @mousedown.stop="emit('resize-start', 'left', $event, record)"
></div> ></div>
<div <div
@ -61,10 +61,14 @@ const emit = defineEmits(['resize-start'])
</div> </div>
<div <div
v-if="resize" v-if="resize"
class="absolute !cursor-row-resize w-full bottom-0 w-full h-2" class="absolute !cursor-row-resize w-full bottom-0 w-full h-1"
@mousedown.stop="emit('resize-start', 'right', $event, record)" @mousedown.stop="emit('resize-start', 'right', $event, record)"
></div> ></div>
</div> </div>
</template> </template>
<style lang="scss" scoped></style> <style lang="scss" scoped>
.cursor-row-resize {
cursor: ew-resize;
}
</style>

105
packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
Unescape View File

@ -335,17 +335,14 @@ const recordsAcrossAllRange = computed<{
}) })
const dayIndex = getDayIndex(startDate) const dayIndex = getDayIndex(startDate)
const { startHourIndex, endHourIndex, startMinutes, endMinutes } = calculateHourIndices(dayIndex, startDate, endDate) const { startHourIndex, startMinutes } = calculateHourIndices(dayIndex, startDate, endDate)
console.log(startHourIndex, endHourIndex)
let style: Partial<CSSStyleDeclaration> = {} let style: Partial<CSSStyleDeclaration> = {}
const spanHours = endHourIndex - startHourIndex + 1 const top = (startHourIndex + startMinutes / 60) * perHeight
const top = startHourIndex * perHeight
const height = (endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5 const totalHours = endDate.diff(startDate, 'minute') / 60
const height = totalHours * perHeight
style = { style = {
...style, ...style,
@ -565,85 +562,69 @@ const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[],
const onResize = (event: MouseEvent) => { const onResize = (event: MouseEvent) => {
if (!isUIAllowed('dataEdit') || !container.value || !resizeRecord.value || !scrollContainer.value) return if (!isUIAllowed('dataEdit') || !container.value || !resizeRecord.value || !scrollContainer.value) return
if (resizeRecord.value.rowMeta.range?.is_readonly) return if (resizeRecord.value.rowMeta.range?.is_readonly) return
const { width, left, top, bottom } = container.value.getBoundingClientRect() const { width, left, top, bottom } = container.value.getBoundingClientRect()
const { scrollHeight, scrollTop } = container.value
const { scrollHeight } = container.value
// If the mouse is near the bottom of the container, we scroll down // If the mouse is near the bottom of the container, we scroll down
// If the mouse is near the top of the container, we scroll up // If the mouse is near the top of the container, we scroll up if (event.clientY > bottom - 20) {
if (event.clientY > bottom - 20) { if (event.clientY > bottom - 20) {
container.value.scrollTop += 10 container.value.scrollTop += 10
} else if (event.clientY < top + 20) { } else if (event.clientY < top + 20) {
container.value.scrollTop -= 10 container.value.scrollTop -= 10
} }
// We calculate the percentage of the mouse position in the container
// percentX is used for the day and percentY is used for the hour
const percentX = (event.clientX - left - window.scrollX) / width const percentX = (event.clientX - left - window.scrollX) / width
const percentY = (event.clientY - top + container.value.scrollTop) / scrollHeight const percentY = (event.clientY - top + scrollTop) / scrollHeight
const fromCol = resizeRecord.value.rowMeta.range?.fk_from_col
const toCol = resizeRecord.value.rowMeta.range?.fk_to_col
if (!fromCol || !toCol) return const { range } = resizeRecord.value.rowMeta
const fromCol = range?.fk_from_col
const toCol = range?.fk_to_col
if (!fromCol?.title || !toCol?.title) return
const ogEndDate = dayjs(resizeRecord.value.row[toCol.title!]) const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title])
const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title!]) const ogEndDate = dayjs(resizeRecord.value.row[toCol.title])
const day = Math.floor(percentX * maxVisibleDays.value) const day = Math.floor(percentX * maxVisibleDays.value)
const hour = Math.floor(percentY * 23) const hour = Math.floor(percentY * 23)
const minutes = Math.round((percentY * 24 * 60) % 60) const minutes = Math.round((percentY * 24 * 60) / 15) * 15 // Round to nearest 15 minutes
let updateProperty: string[] = []
let newRow: Row = resizeRecord.value
if (resizeDirection.value === 'right') {
let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
updateProperty = [toCol.title!]
// If the new end date is before the start date, we set the new end date to the start date const baseDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
if (dayjs(newEndDate).isBefore(ogStartDate, 'day')) {
newEndDate = ogStartDate.clone()
}
if (!newEndDate.isValid()) return let newDate: dayjs.Dayjs
let updateProperty: string
let isValid = true
newRow = { if (resizeDirection.value === 'right') {
...resizeRecord.value, newDate = baseDate.isBefore(ogStartDate)
row: { ? ogStartDate.add(Math.ceil(ogStartDate.diff(baseDate, 'minute') / 15) * 15, 'minute')
...resizeRecord.value.row, : baseDate
[toCol.title!]: newEndDate.format(updateFormat.value), updateProperty = toCol.title
},
}
} else if (resizeDirection.value === 'left') { } else if (resizeDirection.value === 'left') {
let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute') newDate = baseDate.isAfter(ogEndDate)
updateProperty = [fromCol.title!] ? ogEndDate.subtract(Math.ceil(baseDate.diff(ogEndDate, 'minute') / 15) * 15, 'minute')
: baseDate
// If the new start date is after the end date, we set the new start date to the end date updateProperty = fromCol.title
if (dayjs(newStartDate).isAfter(ogEndDate)) { } else {
newStartDate = dayjs(dayjs(ogEndDate)).clone() isValid = false
} }
if (!newStartDate) return
newRow = { if (!isValid || !newDate.isValid()) return
const newRow = {
...resizeRecord.value, ...resizeRecord.value,
row: { row: {
...resizeRecord.value.row, ...resizeRecord.value.row,
[fromCol.title!]: dayjs(newStartDate).format(updateFormat.value), [updateProperty]: newDate.format(updateFormat.value),
}, },
} }
}
const newPk = extractPkFromRow(newRow.row, meta.value!.columns!) const newPk = extractPkFromRow(newRow.row, meta.value!.columns!)
formattedData.value = formattedData.value.map((r) => { formattedData.value = formattedData.value.map((r) => (extractPkFromRow(r.row, meta.value!.columns!) === newPk ? newRow : r))
const pk = extractPkFromRow(r.row, meta.value!.columns!)
return pk === newPk ? newRow : r useDebouncedRowUpdate(newRow, [updateProperty], false)
})
useDebouncedRowUpdate(newRow, updateProperty, false)
} }
const onResizeEnd = () => { const onResizeEnd = () => {
@ -710,10 +691,11 @@ const calculateNewRow = (
if (toCol) { if (toCol) {
const fromDate = dragRecord.value.row[fromCol.title!] ? dayjs(dragRecord.value.row[fromCol.title!]) : null const fromDate = dragRecord.value.row[fromCol.title!] ? dayjs(dragRecord.value.row[fromCol.title!]) : null
const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : null const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : fromDate?.clone()
if (fromDate && toDate) { if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day') const newMinutes = Math.round(toDate.diff(fromDate, 'minute') / 15) * 15
endDate = newStartDate.add(newMinutes, 'minute')
} else if (fromDate && !toDate) { } else if (fromDate && !toDate) {
endDate = dayjs(newStartDate).endOf('day') endDate = dayjs(newStartDate).endOf('day')
} else if (!fromDate && toDate) { } else if (!fromDate && toDate) {
@ -722,13 +704,12 @@ const calculateNewRow = (
endDate = newStartDate.clone() endDate = newStartDate.clone()
} }
newRow.row[toCol.title!] = dayjs(endDate).format(updateFormat.value) if (endDate.isBefore(newStartDate)) {
updatedProperty.push(toCol.title!) endDate = newStartDate.clone().add(15, 'minutes')
} }
// 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 newRow.row[toCol.title!] = dayjs(endDate).format(updateFormat.value)
if (dragRecord.value.row[fromCol.title!] === newRow.row[fromCol.title!] && !skipChangeCheck) { updatedProperty.push(toCol.title!)
return { newRow: null, updatedProperty: [] }
} }
if (!newRow) return { newRow: null, updatedProperty: [] } if (!newRow) return { newRow: null, updatedProperty: [] }

Write Preview
Loading…
Cancel
Save