diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView.vue index 790c58a378..26815538ee 100644 --- a/packages/nc-gui/components/smartsheet/calendar/WeekView.vue +++ b/packages/nc-gui/components/smartsheet/calendar/WeekView.vue @@ -33,6 +33,12 @@ const weekDates = computed(() => { return datesArray }) +function getRandomNumbers() { + const typedArray = new Uint8Array(10) + const randomValues = window.crypto.getRandomValues(typedArray) + return randomValues.join('') +} + const findFirstSuitableColumn = (recordsInDay: any, startDayIndex: number, spanDays: number) => { let column = 0 while (true) { @@ -84,6 +90,7 @@ const calendarData = computed(() => { if (!startDate.isValid() || !endDate.isValid()) return false return !endDate.isBefore(startDate) })) { + const id = record.row.id ?? getRandomNumbers() let startDate = dayjs(record.row[fromCol.title]) const ogStartDate = startDate.clone() const endDate = dayjs(record.row[toCol.title]) @@ -157,6 +164,7 @@ const calendarData = computed(() => { ...record.rowMeta, range, position, + id, style: { width: widthStyle, left: `${startDaysDiff * perDayWidth}px`, @@ -167,6 +175,8 @@ const calendarData = computed(() => { } } else if (fromCol) { for (const record of formattedData.value) { + const id = record.row.id ?? getRandomNumbers() + const startDate = dayjs(record.row[fromCol.title]) const startDaysDiff = Math.max(startDate.diff(selectedDateRange.value.start, 'day'), 0) const suitableColumn = findFirstSuitableColumn(recordsInDay, startDaysDiff, 1) @@ -177,6 +187,7 @@ const calendarData = computed(() => { rowMeta: { ...record.rowMeta, range, + id, position: 'rounded', style: { width: `calc(${perDayWidth}px)`, @@ -194,129 +205,275 @@ const calendarData = computed(() => { const dragElement = ref(null) -const dragStart = (event: DragEvent, record: Row) => { - dragElement.value = event.target as HTMLElement +const draggingId = ref(null) - 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 resizeInProgress = ref(false) - const initialClickOffsetX = event.clientX - eventRect.left - const initialClickOffsetY = event.clientY - eventRect.top +const isDragging = ref(false) +const dragRecord = ref() - event.dataTransfer?.setData( - 'text/plain', - JSON.stringify({ - record, - initialClickOffsetY, - initialClickOffsetX, - }), - ) -} +const resizeDirection = ref<'right' | 'left'>() +const resizeRecord = ref() -const dragEnter = (event: DragEvent) => { - event.preventDefault() +const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => { + updateRowProperty(row, updateProperty, isDelete) +}, 500) + +const onResize = (event: MouseEvent) => { const { width, left } = container.value.getBoundingClientRect() const percentX = (event.clientX - left - window.scrollX) / width + const ogEndDate = resizeRecord.value.row[resizeRecord.value.rowMeta.range?.fk_to_col.title] + const ogStartDate = resizeRecord.value.row[resizeRecord.value.rowMeta.range?.fk_from_col.title] + + const fromCol = resizeRecord.value.rowMeta.range?.fk_from_col + const toCol = resizeRecord.value.rowMeta.range?.fk_to_col + const day = Math.floor(percentX * 7) - const currSelectedDate = dayjs(selectedDateRange.value.start).add(day, 'day') - selectedDate.value = currSelectedDate.toDate() -} + if (resizeDirection.value === 'right') { + let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day') -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 } = container.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 day = Math.floor(percentX * 7) - - const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day') - - let endDate + const updateProperty = [toCol.title] + if (dayjs(newEndDate).isBefore(ogStartDate)) { + newEndDate = dayjs(ogStartDate).clone() + } + + if (!newEndDate) return const newRow = { - ...record, + ...resizeRecord.value, row: { - ...record.row, - [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'), + ...resizeRecord.value.row, + [toCol.title]: dayjs(newEndDate).format('YYYY-MM-DD'), }, } - const updateProperty = [fromCol.title] - 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 (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() + 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 + }) + useDebouncedRowUpdate(newRow, updateProperty, false) + } else if (resizeDirection.value === 'left') { + let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day') + const updateProperty = [fromCol.title] - newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD') - updateProperty.push(toCol.title) + if (dayjs(newStartDate).isAfter(ogEndDate)) { + newStartDate = dayjs(ogEndDate).clone() } + if (!newStartDate) return - if (!newRow) return + const newRow = { + ...resizeRecord.value, + row: { + ...resizeRecord.value.row, + [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'), + }, + } - if (dragElement.value) { - formattedData.value = formattedData.value.map((r) => { - const pk = extractPkFromRow(r.row, meta.value.columns) + 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 - }) + if (pk === extractPkFromRow(newRow.row, meta.value.columns)) { + return newRow + } + return r + }) + + useDebouncedRowUpdate(newRow, updateProperty, false) + } +} + +const onResizeEnd = () => { + resizeInProgress.value = false + resizeDirection.value = null + resizeRecord.value = null + document.removeEventListener('mousemove', onResize) + document.removeEventListener('mouseup', onResizeEnd) +} + +const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => { + resizeInProgress.value = true + resizeDirection.value = direction + resizeRecord.value = record + document.addEventListener('mousemove', onResize) + document.addEventListener('mouseup', onResizeEnd) +} + +const onDrag = (event: MouseEvent) => { + const { width, left } = container.value.getBoundingClientRect() + + 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 day = Math.floor(percentX * 7) + + const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day') + 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 { - formattedData.value = [...formattedData.value, newRow] - formattedSideBarData.value = formattedSideBarData.value.filter((r) => { - const pk = extractPkFromRow(r.row, meta.value.columns) + 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) - return pk !== extractPkFromRow(newRow.row, meta.value.columns) - }) + if (pk === extractPkFromRow(newRow.row, meta.value.columns)) { + return newRow } + return r + }) +} + +const stopDrag = (event: MouseEvent) => { + event.preventDefault() + if (!isDragging.value) return - if (dragElement.value) { - dragElement.value.style.boxShadow = 'none' - dragElement.value.classList.remove('hide') + dragElement.value.style.boxShadow = 'none' - dragElement.value = null + const { width, left } = container.value.getBoundingClientRect() + + 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 day = Math.floor(percentX * 7) + + const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day') + if (!newStartDate) return + + let endDate + + const newRow = { + ...dragRecord.value, + row: { + ...dragRecord.value.row, + [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'), + }, + } + + const updateProperty = [fromCol.title] + + 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() } - updateRowProperty(newRow, updateProperty, false) + + newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD') + + updateProperty.push(toCol.title) } + + if (!newRow) return + + if (dragElement.value) { + 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 + }) + } 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) + }) + } + + const allRecords = document.querySelectorAll('.draggable-record') + allRecords.forEach((el) => { + el.style.visibility = '' + el.style.opacity = '100%' + }) + + if (dragElement.value) { + dragElement.value.style.boxShadow = 'none' + dragElement.value.classList.remove('hide') + isDragging.value = false + draggingId.value = null + dragElement.value = null + } + + updateRowProperty(newRow, updateProperty, false) + + document.removeEventListener('mousemove', onDrag) + document.removeEventListener('mouseup', stopDrag) +} + +const dragStart = (event: MouseEvent, record: Row) => { + if (resizeInProgress.value) return + let target = event.target as HTMLElement + + while (!target.classList.contains('draggable-record')) { + target = target.parentElement as HTMLElement + } + + 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%' + } + }) + + dragRecord.value = record + + isDragging.value = true + dragElement.value = target + draggingId.value = record.rowMeta.id + dragRecord.value = record + + document.addEventListener('mousemove', onDrag) + document.addEventListener('mouseup', stopDrag) }