Browse Source

feat(nc-gui): month view support for drag and drop

pull/7611/head
DarkPhoenix2704 9 months ago
parent
commit
13973006f2
  1. 295
      packages/nc-gui/components/smartsheet/calendar/MonthView.vue

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

@ -180,7 +180,7 @@ const recordsToDisplay = computed<{
const endDate = dayjs(record.row[endCol.title])
let currentWeekStart = startDate.startOf('week')
const id = getRandomNumbers()
const id = record.rowMeta.id ?? getRandomNumbers()
while (currentWeekStart.isBefore(endDate)) {
const currentWeekEnd = currentWeekStart.endOf('week')
const recordStart = currentWeekStart.isBefore(startDate) ? startDate : currentWeekStart
@ -298,138 +298,179 @@ const recordsToDisplay = computed<{
const dragElement = ref<HTMLElement | null>(null)
const draggingId = ref<string | null>(null)
const dragStart = (event: DragEvent, record: Row) => {
dragElement.value = event.target as HTMLElement
const resizeInProgress = ref(false)
draggingId.value = record.rowMeta.id
const isDragging = ref(false)
const dragRecord = ref<Row>()
const onDrag = (event: MouseEvent) => {
const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect()
dragElement.value.classList.add('hide')
dragElement.value.style.boxShadow = '0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.10)'
const eventRect = dragElement.value.getBoundingClientRect()
const initialClickOffsetX = event.clientX - eventRect.left
const initialClickOffsetY = event.clientY - eventRect.top
event.dataTransfer?.setData(
'text/plain',
JSON.stringify({
record,
initialClickOffsetY,
initialClickOffsetX,
}),
)
const percentY = (event.clientY - top - window.scrollY) / height
const percentX = (event.clientX - left - window.scrollX) / width
const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
const toCol = dragRecord.value.rowMeta.range?.fk_to_col
const week = Math.floor(percentY * dates.value.length)
const day = Math.floor(percentX * 7)
const newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null
if (!newStartDate) return
let endDate
const newRow = {
...dragRecord.value,
row: {
...dragRecord.value.row,
[fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'),
},
}
if (toCol) {
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
if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
} else if (fromDate && !toDate) {
endDate = dayjs(newStartDate).endOf('day')
} else if (!fromDate && toDate) {
endDate = dayjs(newStartDate).endOf('day')
} else {
endDate = newStartDate.clone()
}
newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD')
}
formattedData.value = formattedData.value.map((r) => {
const pk = extractPkFromRow(r.row, meta.value.columns)
if (pk === extractPkFromRow(newRow.row, meta.value.columns)) {
return newRow
}
return r
})
}
const dragEnter = (event: DragEvent) => {
const stopDrag = (event: MouseEvent) => {
event.preventDefault()
if (!isDragging.value) return
dragElement.value.style.boxShadow = 'none'
const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect()
const percentY = (event.clientY - top - window.scrollY) / height
const percentX = (event.clientX - left - window.scrollX) / width
const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
const toCol = dragRecord.value.rowMeta.range?.fk_to_col
const week = Math.floor(percentY * dates.value.length)
const day = Math.floor(percentX * 7)
if (dragElement.value) {
calendarGridContainer.value.addEventListener('mousemove', onDragMove)
const newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null
if (!newStartDate) return
let endDate
const newRow = {
...dragRecord.value,
row: {
...dragRecord.value.row,
[fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'),
},
}
const currSelectedDate = dayjs(selectedDate.value).startOf('month').add(week, 'week').add(day, 'day')
selectedDate.value = currSelectedDate.toDate()
}
const updateProperty = [fromCol.title]
const dropEvent = (event: DragEvent) => {
event.preventDefault()
const data = event.dataTransfer?.getData('text/plain')
if (data) {
const {
record,
initialClickOffsetY,
initialClickOffsetX,
}: {
record: Row
initialClickOffsetY: number
initialClickOffsetX: number
} = JSON.parse(data)
const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect()
const percentY = (event.clientY - top - window.scrollY) / height
const percentX = (event.clientX - left - window.scrollX) / width
/*
const percentY = (event.clientY - top - initialClickOffsetY - window.scrollY) / height
const percentX = (event.clientX - left - initialClickOffsetX - window.scrollX) / width
*/
const fromCol = record.rowMeta.range?.fk_from_col
const toCol = record.rowMeta.range?.fk_to_col
const week = Math.floor(percentY * dates.value.length)
const day = Math.floor(percentX * 7)
const newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null
if (!newStartDate) return
let endDate
const newRow = {
...record,
row: {
...record.row,
[fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'),
},
if (toCol) {
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
if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
} else if (fromDate && !toDate) {
endDate = dayjs(newStartDate).endOf('day')
} else if (!fromDate && toDate) {
endDate = dayjs(newStartDate).endOf('day')
} else {
endDate = newStartDate.clone()
}
const updateProperty = [fromCol.title]
newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD')
updateProperty.push(toCol.title)
const allRecords = document.querySelectorAll('.draggable-record')
allRecords.forEach((el) => {
el.style.visibility = ''
el.style.opacity = '100%'
})
}
if (toCol) {
const fromDate = record.row[fromCol.title] ? dayjs(record.row[fromCol.title]) : null
const toDate = record.row[toCol.title] ? dayjs(record.row[toCol.title]) : null
if (!newRow) return
if (dragElement.value) {
formattedData.value = formattedData.value.map((r) => {
const pk = extractPkFromRow(r.row, meta.value.columns)
if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
} else if (fromDate && !toDate) {
endDate = dayjs(newStartDate).endOf('day')
} else if (!fromDate && toDate) {
endDate = dayjs(newStartDate).endOf('day')
} else {
endDate = newStartDate.clone()
if (pk === extractPkFromRow(newRow.row, meta.value.columns)) {
return newRow
}
return r
})
} else {
formattedData.value = [...formattedData.value, newRow]
formattedSideBarData.value = formattedSideBarData.value.filter((r) => {
const pk = extractPkFromRow(r.row, meta.value.columns)
return pk !== extractPkFromRow(newRow.row, meta.value.columns)
})
}
newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD')
if (dragElement.value) {
dragElement.value.style.boxShadow = 'none'
dragElement.value.classList.remove('hide')
isDragging.value = false
draggingId.value = null
dragElement.value = null
}
updateProperty.push(toCol.title)
}
updateRowProperty(newRow, updateProperty, false)
if (!newRow) return
document.removeEventListener('mousemove', onDrag)
document.removeEventListener('mouseup', stopDrag)
}
if (dragElement.value) {
formattedData.value = formattedData.value.map((r) => {
const pk = extractPkFromRow(r.row, meta.value.columns)
const dragStart = (event: MouseEvent, record: Row) => {
let target = event.target as HTMLElement
if (pk === extractPkFromRow(newRow.row, meta.value.columns)) {
return newRow
}
return r
})
} else {
formattedData.value = [...formattedData.value, newRow]
formattedSideBarData.value = formattedSideBarData.value.filter((r) => {
const pk = extractPkFromRow(r.row, meta.value.columns)
while (!target.classList.contains('draggable-record')) {
target = target.parentElement as HTMLElement
}
return pk !== extractPkFromRow(newRow.row, meta.value.columns)
})
const allRecords = document.querySelectorAll('.draggable-record')
allRecords.forEach((el) => {
if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id)) {
// el.style.visibility = 'hidden'
el.style.opacity = '30%'
}
})
if (dragElement.value) {
dragElement.value.style.boxShadow = 'none'
dragElement.value.classList.remove('hide')
dragRecord.value = record
dragElement.value = null
}
isDragging.value = true
dragElement.value = target
draggingId.value = record.rowMeta.id
dragRecord.value = record
updateRowProperty(newRow, updateProperty, false)
}
document.addEventListener('mousemove', onDrag)
document.addEventListener('mouseup', stopDrag)
}
const selectDate = (date: Date) => {
@ -443,7 +484,7 @@ const isDateSelected = (date: Date) => {
</script>
<template>
<div v-if="calendarRange" class="h-full relative">
<div v-if="calendarRange" class="h-full prevent-select relative">
<div class="grid grid-cols-7">
<div
v-for="(day, index) in days"
@ -483,7 +524,8 @@ const isDateSelected = (date: Date) => {
}"
class="group-hover:hidden"
></span>
<NcDropdown auto-close>
<NcDropdown v-if="calendarRange.length > 1" auto-close>
<NcButton
:class="{
'!block': isDateSelected(day),
@ -494,7 +536,6 @@ const isDateSelected = (date: Date) => {
type="secondary"
@click="
() => {
if (calendarRange.length !== 1) return
const record = {
row: {
[calendarRange[0].fk_from_col.title]: dayjs(day).format('YYYY-MM-DD'),
@ -532,15 +573,38 @@ const isDateSelected = (date: Date) => {
</NcMenu>
</template>
</NcDropdown>
<NcButton
v-else
:class="{
'!block': isDateSelected(day),
'!hidden': !isDateSelected(day),
}"
class="!group-hover:block"
size="small"
type="secondary"
@click="
() => {
const record = {
row: {
[calendarRange[0].fk_from_col.title]: dayjs(day).format('YYYY-MM-DD'),
},
}
emit('new-record', record)
}
"
>
<component :is="iconMap.plus" class="h-4 w-4" />
</NcButton>
<span class="px-1 py-2">{{ dayjs(day).format('DD') }}</span>
</div>
<div
v-if="
recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')] &&
recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')]?.overflow
recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')]?.overflow &&
!draggingId
"
class="text-xs absolute bottom-1 text-center inset-x-0 text-gray-500"
class="text-xs absolute bottom-1 text-center inset-x-0 z-[90] text-gray-500"
>
+ {{ recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')]?.overflowCount }} more
</div>
@ -551,14 +615,17 @@ const isDateSelected = (date: Date) => {
<div
v-for="(record, recordIndex) in recordsToDisplay.records"
:key="recordIndex"
:data-unique-id="record.rowMeta.id"
:style="{
...record.rowMeta.style,
zIndex: record.rowMeta.id === draggingId ? 100 : 0,
boxShadow:
record.rowMeta.id === draggingId
? '0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.10)'
: 'none',
}"
class="absolute pointer-events-auto"
draggable="true"
@dragstart="dragStart($event, record)"
@dragover.prevent
class="absolute draggable-record cursor-pointer pointer-events-auto"
@mousedown.stop="dragStart($event, record)"
>
<LazySmartsheetRow :row="record">
<LazySmartsheetCalendarRecordCard
@ -583,4 +650,10 @@ const isDateSelected = (date: Date) => {
transition: 0.01s;
transform: translateX(-9999px);
}
.prevent-select {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
</style>

Loading…
Cancel
Save