feat(nc-gui): completed week view drag & drop + resize

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,81 +205,189 @@ const calendarData = computed(() => {
 
 const dragElement = ref<HTMLElement | null>(null)
 
-const dragStart = (event: DragEvent, record: Row) => {
+const draggingId = ref<string | null>(null)
-  dragElement.value = event.target as HTMLElement
+
+const resizeInProgress = ref(false)
 
-  dragElement.value.classList.add('hide')
+const isDragging = ref(false)
-  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 dragRecord = ref<Row>()
-  const eventRect = dragElement.value.getBoundingClientRect()
 
-  const initialClickOffsetX = event.clientX - eventRect.left
+const resizeDirection = ref<'right' | 'left'>()
-  const initialClickOffsetY = event.clientY - eventRect.top
+const resizeRecord = ref<Row>()
 
-  event.dataTransfer?.setData(
+const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
-    'text/plain',
+  updateRowProperty(row, updateProperty, isDelete)
-    JSON.stringify({
+}, 500)
-      record,
+
-      initialClickOffsetY,
+const onResize = (event: MouseEvent) => {
-      initialClickOffsetX,
+  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)
+
+  if (resizeDirection.value === 'right') {
+    let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day')
+
+    const updateProperty = [toCol.title]
+    if (dayjs(newEndDate).isBefore(ogStartDate)) {
+      newEndDate = dayjs(ogStartDate).clone()
     }
 
-const dragEnter = (event: DragEvent) => {
+    if (!newEndDate) return
-  event.preventDefault()
+
+    const newRow = {
+      ...resizeRecord.value,
+      row: {
+        ...resizeRecord.value.row,
+        [toCol.title]: dayjs(newEndDate).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
+    })
+    useDebouncedRowUpdate(newRow, updateProperty, false)
+  } else if (resizeDirection.value === 'left') {
+    let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
+    const updateProperty = [fromCol.title]
+
+    if (dayjs(newStartDate).isAfter(ogEndDate)) {
+      newStartDate = dayjs(ogEndDate).clone()
+    }
+    if (!newStartDate) return
+
+    const newRow = {
+      ...resizeRecord.value,
+      row: {
+        ...resizeRecord.value.row,
+        [fromCol.title]: dayjs(newStartDate).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
+    })
+
+    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 currSelectedDate = dayjs(selectedDateRange.value.start).add(day, 'day')
+  const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
-  selectedDate.value = currSelectedDate.toDate()
+  if (!newStartDate) return
+
+  let endDate
+
+  const newRow = {
+    ...dragRecord.value,
+    row: {
+      ...dragRecord.value.row,
+      [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'),
+    },
   }
 
-const dropEvent = (event: DragEvent) => {
+  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 stopDrag = (event: MouseEvent) => {
   event.preventDefault()
-  const data = event.dataTransfer?.getData('text/plain')
+  if (!isDragging.value) return
-  if (data) {
+
-    const {
+  dragElement.value.style.boxShadow = 'none'
-      record,
+
-      initialClickOffsetY,
+  const { width, left } = container.value.getBoundingClientRect()
-      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 fromCol = dragRecord.value.rowMeta.range?.fk_from_col
-    const toCol = record.rowMeta.range?.fk_to_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 = {
-      ...record,
+    ...dragRecord.value,
     row: {
-        ...record.row,
+      ...dragRecord.value.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 fromDate = dragRecord.value.row[fromCol.title] ? dayjs(dragRecord.value.row[fromCol.title]) : null
-      const toDate = record.row[toCol.title] ? dayjs(record.row[toCol.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')
@@ -281,6 +400,7 @@ const dropEvent = (event: DragEvent) => {
     }
 
     newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD')
+
     updateProperty.push(toCol.title)
   }
 
@@ -304,19 +424,56 @@ const dropEvent = (event: DragEvent) => {
     })
   }
 
+  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)
 }
 </script>
 
 <template>
-  <div class="flex relative flex-col">
+  <div class="flex relative flex-col prevent-select">
     <div class="flex">
       <div
         v-for="date in weekDates"
@@ -326,7 +483,7 @@ const dropEvent = (event: DragEvent) => {
         {{ dayjs(date).format('DD ddd') }}
       </div>
     </div>
-    <div ref="container" class="flex h-[calc(100vh-11.6rem)]" @dragenter="dragEnter" @drop="dropEvent($event)">
+    <div ref="container" class="flex h-[calc(100vh-11.6rem)]">
       <div
         v-for="date in weekDates"
         :key="date.toISOString()"
@@ -341,10 +498,16 @@ const dropEvent = (event: DragEvent) => {
       <div
         v-for="(record, id) in calendarData"
         :key="id"
-        :style="record.rowMeta.style"
+        :data-unique-id="record.rowMeta.id"
-        class="absolute pointer-events-auto"
+        :style="{
-        draggable="true"
+          ...record.rowMeta.style,
-        @dragstart="dragStart($event, record)"
+          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 draggable-record pointer-events-auto"
+        @mousedown.stop="dragStart($event, record)"
       >
         <LazySmartsheetRow :row="record">
           <LazySmartsheetCalendarRecordCard
@@ -356,8 +519,10 @@ const dropEvent = (event: DragEvent) => {
             :name="record.row[displayField.title]"
             :position="record.rowMeta.position"
             :record="record"
+            :resize="!!record.rowMeta.range?.fk_to_col"
             color="blue"
             @click="emits('expand-record', record)"
+            @resize-start="onResizeStart"
           />
         </LazySmartsheetRow>
       </div>
@@ -370,4 +535,9 @@ const dropEvent = (event: DragEvent) => {
   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>