Browse Source

fix: disable spanning events if no fk_to_column fix: correct hover and drag effect for dragging and resizing

pull/9831/head
DarkPhoenix2704 6 days ago
parent
commit
f4aa6bc22a
  1. 6
      packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
  2. 12
      packages/nc-gui/components/smartsheet/calendar/MonthView.vue
  3. 18
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

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

@ -895,7 +895,11 @@ const expandRecord = (record: Row) => {
<template> <template>
<div class="h-[calc(100vh-5.3rem)] overflow-y-auto nc-scrollbar-md"> <div class="h-[calc(100vh-5.3rem)] overflow-y-auto nc-scrollbar-md">
<SmartsheetCalendarDateTimeSpanningContainer :records="recordsAcrossAllRange.spanningRecords" @expand-record="expandRecord" /> <SmartsheetCalendarDateTimeSpanningContainer
v-if="calendarRange.some((range) => range.fk_to_col !== null && range.fk_to_col !== undefined)"
:records="recordsAcrossAllRange.spanningRecords"
@expand-record="expandRecord"
/>
<div ref="container" class="w-full flex relative no-selection" data-testid="nc-calendar-day-view" @drop="dropEvent"> <div ref="container" class="w-full flex relative no-selection" data-testid="nc-calendar-day-view" @drop="dropEvent">
<div <div
v-if="shouldEnableOverlay" v-if="shouldEnableOverlay"

12
packages/nc-gui/components/smartsheet/calendar/MonthView.vue

@ -872,7 +872,11 @@ const addRecord = (date: dayjs.Dayjs) => {
? ' 0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)' ? ' 0px 12px 16px -4px rgba(0, 0, 0, 0.10), 0px 4px 6px -2px rgba(0, 0, 0, 0.06)'
: 'none', : 'none',
opacity: draggingId === null || record.rowMeta.id === draggingId ? 1 : 0.3, opacity:
(draggingId === null || record.rowMeta.id === draggingId) &&
(resizeRecord === undefined || record.rowMeta.id === resizeRecord?.rowMeta.id)
? 1
: 0.3,
}" }"
:class="{ :class="{
'cursor-pointer': !resizeInProgress, 'cursor-pointer': !resizeInProgress,
@ -884,7 +888,11 @@ const addRecord = (date: dayjs.Dayjs) => {
> >
<LazySmartsheetRow :row="record"> <LazySmartsheetRow :row="record">
<LazySmartsheetCalendarRecordCard <LazySmartsheetCalendarRecordCard
:hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === draggingId" :hover="
hoverRecord === record.rowMeta.id ||
record.rowMeta.id === draggingId ||
record.rowMeta.id === resizeRecord?.rowMeta.id
"
:position="record.rowMeta.position" :position="record.rowMeta.position"
:record="record" :record="record"
:resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')" :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"

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

@ -907,6 +907,10 @@ const spanningRecordsContainer = ref<HTMLElement | null>(null)
const isExpanded = ref(false) const isExpanded = ref(false)
const isRangeEnabled = computed(() =>
calendarRange.value.some((range) => range.fk_to_col !== null && range.fk_to_col !== undefined),
)
watch( watch(
() => spanningRecordsContainer.value?.isSpanningRecordExpanded(), () => spanningRecordsContainer.value?.isSpanningRecordExpanded(),
() => { () => {
@ -926,8 +930,8 @@ watch(
v-if="!isPublic && dayjs().isBetween(selectedDateRange.start, selectedDateRange.end)" v-if="!isPublic && dayjs().isBetween(selectedDateRange.start, selectedDateRange.end)"
class="absolute top-16 ml-16 pointer-events-none z-2" class="absolute top-16 ml-16 pointer-events-none z-2"
:class="{ :class="{
'mt-38.5': isExpanded, 'mt-38.5': isExpanded && isRangeEnabled,
'mt-23': !isExpanded, 'mt-23': !isExpanded && isRangeEnabled,
}" }"
:style="overlayStyle" :style="overlayStyle"
> >
@ -957,8 +961,8 @@ watch(
</div> </div>
<div <div
:class="{ :class="{
'top-16': !isExpanded, 'top-16': !isExpanded && isRangeEnabled,
'top-32': isExpanded, 'top-32': isExpanded && isRangeEnabled,
}" }"
class="absolute bg-white w-16 z-1" class="absolute bg-white w-16 z-1"
> >
@ -970,7 +974,7 @@ watch(
{{ hour.format('hh a') }} {{ hour.format('hh a') }}
</div> </div>
</div> </div>
<div class="sticky top-6 bg-white z-3 inset-x-0 w-full"> <div v-if="isRangeEnabled" class="sticky top-6 bg-white z-3 inset-x-0 w-full">
<SmartsheetCalendarDateTimeSpanningContainer <SmartsheetCalendarDateTimeSpanningContainer
ref="spanningRecordsContainer" ref="spanningRecordsContainer"
:records="recordsAcrossAllRange.spanningRecords" :records="recordsAcrossAllRange.spanningRecords"
@ -980,8 +984,8 @@ watch(
<div <div
ref="container" ref="container"
:class="{ :class="{
'!mt-16 ': !isExpanded, '!mt-16 ': !isExpanded && isRangeEnabled,
'mt-32': isExpanded, 'mt-32': isExpanded && isRangeEnabled,
}" }"
class="absolute ml-16 flex w-[calc(100%-64px)]" class="absolute ml-16 flex w-[calc(100%-64px)]"
> >

Loading…
Cancel
Save