From ed3af712036c36a97457bfd5cbe76070a96ef011 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:08 +0000
Subject: [PATCH] feat(nc-gui): bring back drag drop from sidebar

---
 .../smartsheet/calendar/DayView.vue           |  2 +-
 .../smartsheet/calendar/MonthView.vue         | 86 ++++++++++++++++++-
 .../smartsheet/calendar/WeekView.vue          | 84 +++++++++++++++++-
 3 files changed, 169 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView.vue b/packages/nc-gui/components/smartsheet/calendar/DayView.vue
index 88d46616c5..bc56dce703 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView.vue
@@ -132,7 +132,7 @@ const dragStart = (event: DragEvent, record: Row) => {
 }
 
 const dropEvent = (event: DragEvent) => {
-  if (isUIAllowed('dataEdit')) return
+  if (!isUIAllowed('dataEdit')) return
   event.preventDefault()
   const data = event.dataTransfer?.getData('text/plain')
   if (data) {
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index d28593529c..5ff5af066d 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -579,6 +579,91 @@ const dragStart = (event: MouseEvent, record: Row) => {
   }, 500)
 }
 
+const dropEvent = (event: DragEvent) => {
+  if (!isUIAllowed('dataEdit')) return
+  event.preventDefault()
+  const data = event.dataTransfer?.getData('text/plain')
+  if (data) {
+    const {
+      record,
+    }: {
+      record: Row
+    } = JSON.parse(data)
+    const { width, left, top, height } = calendarGridContainer.value.getBoundingClientRect()
+
+    const percentY = (event.clientY - top - window.scrollY) / height
+    const percentX = (event.clientX - left - window.scrollX) / width
+
+    const fromCol = record.rowMeta.range?.fk_from_col
+    const toCol = record.rowMeta.range?.fk_to_col
+
+    if (!fromCol) return
+
+    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'),
+      },
+    }
+
+    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()
+      }
+      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!)
+      })
+    }
+
+    if (dragElement.value) {
+      dragElement.value.style.boxShadow = 'none'
+      dragElement.value.classList.remove('hide')
+
+      dragElement.value = null
+    }
+    updateRowProperty(newRow, updateProperty, false)
+  }
+}
+
 const selectDate = (date: Date) => {
   selectedDate.value = date
 }
@@ -617,7 +702,6 @@ onBeforeUnmount(() => {
       }"
       class="grid h-full pb-7.5"
       @drop="dropEvent"
-      @dragenter.prevent="dragEnter"
     >
       <div v-for="(week, weekIndex) in dates" :key="weekIndex" class="grid grid-cols-7 grow">
         <div
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView.vue
index 590ecfa56f..304d343bfb 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView.vue
@@ -479,10 +479,92 @@ const dragStart = (event: MouseEvent, record: Row) => {
   document.addEventListener('mousemove', onDrag)
   document.addEventListener('mouseup', stopDrag)
 }
+
+const dropEvent = (event: DragEvent) => {
+  if (!isUIAllowed('dataEdit')) return
+  event.preventDefault()
+  const data = event.dataTransfer?.getData('text/plain')
+  if (data) {
+    const {
+      record,
+    }: {
+      record: Row
+    } = JSON.parse(data)
+    const { width, left } = container.value.getBoundingClientRect()
+
+    const percentX = (event.clientX - left - window.scrollX) / width
+
+    const fromCol = record.rowMeta.range?.fk_from_col
+    const toCol = record.rowMeta.range?.fk_to_col
+
+    if (!fromCol) return
+
+    const day = Math.floor(percentX * 7)
+
+    const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
+
+    let endDate
+
+    const newRow = {
+      ...record,
+      row: {
+        ...record.row,
+        [fromCol.title!]: dayjs(newStartDate).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()
+      }
+      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!)
+      })
+    }
+
+    if (dragElement.value) {
+      dragElement.value.style.boxShadow = 'none'
+      dragElement.value.classList.remove('hide')
+
+      dragElement.value = null
+    }
+    updateRowProperty(newRow, updateProperty, false)
+  }
+}
 </script>
 
 <template>
-  <div class="flex relative flex-col prevent-select">
+  <div class="flex relative flex-col prevent-select" @drop="dropEvent">
     <div class="flex">
       <div
         v-for="date in weekDates"