From c2d028ec798167b70573d742d2f0eb2980278b85 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 14 Jun 2023 18:59:00 +0300
Subject: [PATCH 01/24] feat: vertical fill using handle

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 103 ++++++++-
 .../components/smartsheet/TableDataCell.vue   |   2 +
 .../composables/useMultiSelect/index.ts       | 217 ++++++++++++++----
 3 files changed, 277 insertions(+), 45 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 659fe932e8..24bba4ec2f 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -2,6 +2,7 @@
 import { nextTick } from '@vue/runtime-core'
 import type { ColumnReqType, ColumnType, GridType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
+import type { UseElementBoundingReturn } from '@vueuse/core'
 import {
   ActiveViewInj,
   CellUrlDisableOverlayInj,
@@ -109,6 +110,7 @@ const expandedFormRowState = ref<Record<string, any>>()
 const gridWrapper = ref<HTMLElement>()
 const tableHeadEl = ref<HTMLElement>()
 const tableBodyEl = ref<HTMLElement>()
+const fillHandle = ref<HTMLElement>()
 
 const isAddingColumnAllowed = $computed(() => !readOnly.value && !isLocked.value && isUIAllowed('add-column') && !isSqlView.value)
 
@@ -207,6 +209,7 @@ const {
   resetSelectedRange,
   makeActive,
   selectedRange,
+  isCellInFillRange,
 } = useMultiSelect(
   meta,
   fields,
@@ -348,6 +351,7 @@ const {
     await updateOrSaveRow(rowObj, ctx.updatedColumnTitle || columnObj.title)
   },
   bulkUpdateRows,
+  fillHandle,
 )
 
 function scrollToCell(row?: number | null, col?: number | null) {
@@ -650,9 +654,9 @@ useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
   }
 })
 
-/** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
 
+/** On clicking outside of table reset active cell  */
 onClickOutside(tableBodyEl, (e) => {
   // do nothing if context menu was open
   if (contextMenu.value) return
@@ -666,7 +670,7 @@ onClickOutside(tableBodyEl, (e) => {
   // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year)
   // or single/multi select options
   const activePickerOrDropdownEl = document.querySelector(
-    '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
+    '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active,.nc-fill-handle',
   )
   if (
     e.target &&
@@ -881,10 +885,51 @@ function addEmptyRow(row?: number) {
   nextTick().then(() => {
     clearSelectedRange()
     makeActive(row ?? data.value.length - 1, 0)
+    selectedRange.startRange({ row: activeCell.row!, col: activeCell.col! })
     scrollToCell?.()
   })
   return rowObj
 }
+
+const tableRect = useElementBounding(smartTable)
+const { height: tableHeight, width: tableWidth } = tableRect
+
+const { x: gridX, y: gridY } = useScroll(gridWrapper)
+
+const fillHandleTop = ref()
+const fillHandleLeft = ref()
+
+const cellRefs = ref<{ el: HTMLElement }[]>([])
+let cellRect: UseElementBoundingReturn | null = null
+
+const refreshFillHandle = () => {
+  const cellRef = cellRefs.value.find(
+    (cell) =>
+      cell.el.dataset.rowIndex === String(selectedRange.end.row) && cell.el.dataset.colIndex === String(selectedRange.end.col),
+  )
+  if (cellRef) {
+    cellRect = useElementBounding(cellRef.el)
+    if (!cellRect || !tableRect) return
+    if (selectedRange.end.col === 0) {
+      fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value - 4.5 + gridY.value
+      fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value - 4.5
+      return
+    }
+    fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value - 4.5 + gridY.value
+    fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value - 4.5 + gridX.value
+  }
+}
+
+watch(
+  () => `${selectedRange.end.row}-${selectedRange.end.col}`,
+  (n, o) => {
+    if (n !== o) {
+      if (gridWrapper.value) {
+        refreshFillHandle()
+      }
+    }
+  },
+)
 </script>
 
 <template>
@@ -895,7 +940,17 @@ function addEmptyRow(row?: number) {
       </div>
     </general-overlay>
 
-    <div ref="gridWrapper" class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
+    <div
+      ref="gridWrapper"
+      class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull"
+      :class="{
+        relative:
+          !readOnly &&
+          !isLocked &&
+          (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) &&
+          ((!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)),
+      }"
+    >
       <a-dropdown
         v-model:visible="contextMenu"
         :trigger="isSqlView ? [] : ['contextmenu']"
@@ -1041,6 +1096,7 @@ function addEmptyRow(row?: number) {
                   <SmartsheetTableDataCell
                     v-for="(columnObj, colIndex) of fields"
                     :key="columnObj.id"
+                    ref="cellRefs"
                     class="cell relative nc-grid-cell"
                     :class="{
                       'cursor-pointer': hasEditPermission,
@@ -1048,11 +1104,14 @@ function addEmptyRow(row?: number) {
                       'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
                       'align-middle': !rowHeight || rowHeight === 1,
                       'align-top': rowHeight && rowHeight !== 1,
+                      'filling': isCellInFillRange(rowIndex, colIndex),
                     }"
                     :data-testid="`cell-${columnObj.title}-${rowIndex}`"
                     :data-key="rowIndex + columnObj.id"
                     :data-col="columnObj.id"
                     :data-title="columnObj.title"
+                    :data-row-index="rowIndex"
+                    :data-col-index="colIndex"
                     @mousedown="handleMouseDown($event, rowIndex, colIndex)"
                     @mouseover="handleMouseOver($event, rowIndex, colIndex)"
                     @click="handleCellClick($event, rowIndex, colIndex)"
@@ -1184,6 +1243,28 @@ function addEmptyRow(row?: number) {
           </a-menu>
         </template>
       </a-dropdown>
+      <div
+        class="table-overlay absolute top-0 left-0 pointer-events-none overflow-hidden"
+        :style="{ height: `${tableHeight}px`, width: `${tableWidth}px` }"
+      >
+        <!-- Fill Handle -->
+        <div
+          v-show="
+            !readOnly &&
+            !isLocked &&
+            !editEnabled &&
+            (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null))
+          "
+          ref="fillHandle"
+          class="nc-fill-handle absolute w-[8px] h-[8px] rounded-full bg-red-500 !pointer-events-auto"
+          :class="
+            (!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)
+              ? 'z-3'
+              : 'z-4'
+          "
+          :style="{ top: `${fillHandleTop}px`, left: `${fillHandleLeft}px`, cursor: 'crosshair' }"
+        />
+      </div>
     </div>
 
     <div
@@ -1293,6 +1374,22 @@ function addEmptyRow(row?: number) {
     @apply border-1 border-solid text-primary border-current bg-primary bg-opacity-5;
   }
 
+  td.filling::after {
+    content: '';
+    position: absolute;
+    z-index: 3;
+    height: calc(100% + 2px);
+    width: calc(100% + 2px);
+    left: -1px;
+    top: -1px;
+    pointer-events: none;
+  }
+
+  // todo: replace with css variable
+  td.filling::after {
+    @apply border-1 border-solid text-accent border-current;
+  }
+
   //td.active::before {
   //  content: '';
   //  z-index:4;
diff --git a/packages/nc-gui/components/smartsheet/TableDataCell.vue b/packages/nc-gui/components/smartsheet/TableDataCell.vue
index a78d4751ff..859fd01d93 100644
--- a/packages/nc-gui/components/smartsheet/TableDataCell.vue
+++ b/packages/nc-gui/components/smartsheet/TableDataCell.vue
@@ -8,6 +8,8 @@ const cellClickHook = createEventHook()
 provide(CellClickHookInj, cellClickHook)
 
 provide(CurrentCellInj, el)
+
+defineExpose({ el })
 </script>
 
 <template>
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 2f546073c8..ad4babefae 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -48,6 +48,7 @@ export function useMultiSelect(
   keyEventHandler?: Function,
   syncCellData?: Function,
   bulkUpdateRows?: Function,
+  fillHandle?: MaybeRef<HTMLElement | undefined>,
 ) {
   const meta = ref(_meta)
 
@@ -65,8 +66,12 @@ export function useMultiSelect(
 
   let isMouseDown = $ref(false)
 
+  let fillMode = $ref(false)
+
   const selectedRange = reactive(new CellRange())
 
+  const fillRange = reactive(new CellRange())
+
   const activeCell = reactive<Nullable<Cell>>({ row: null, col: null })
 
   const columnLength = $computed(() => unref(fields)?.length)
@@ -159,23 +164,33 @@ export function useMultiSelect(
     return textToCopy
   }
 
-  const copyTable = async (rows: Row[], cols: ColumnType[]) => {
-    let copyHTML = '<table>'
-    let copyPlainText = ''
+  const serializeRange = (rows: Row[], cols: ColumnType[]) => {
+    let html = '<table>'
+    let text = ''
+    const json: string[][] = []
 
     rows.forEach((row, i) => {
       let copyRow = '<tr>'
+      const jsonRow: string[] = []
       cols.forEach((col, i) => {
         const value = valueToCopy(row, col)
         copyRow += `<td>${value}</td>`
-        copyPlainText = `${copyPlainText}${value}${cols.length - 1 !== i ? '\t' : ''}`
+        text = `${text}${value}${cols.length - 1 !== i ? '\t' : ''}`
+        jsonRow.push(col.uidt === UITypes.LongText ? value.replace(/^"/, '').replace(/"$/, '').replace(/""/g, '"') : value)
       })
-      copyHTML += `${copyRow}</tr>`
+      html += `${copyRow}</tr>`
       if (rows.length - 1 !== i) {
-        copyPlainText = `${copyPlainText}\n`
+        text = `${text}\n`
       }
+      json.push(jsonRow)
     })
-    copyHTML += '</table>'
+    html += '</table>'
+
+    return { html, text, json }
+  }
+
+  const copyTable = async (rows: Row[], cols: ColumnType[]) => {
+    const { html: copyHTML, text: copyPlainText } = serializeRange(rows, cols)
 
     const blobHTML = new Blob([copyHTML], { type: 'text/html' })
     const blobPlainText = new Blob([copyPlainText], { type: 'text/plain' })
@@ -229,7 +244,65 @@ export function useMultiSelect(
     )
   }
 
+  function isCellInFillRange(row: number, col: number) {
+    if (fillRange.start === null || fillRange.end === null) {
+      return false
+    }
+
+    if (
+      col >= selectedRange.start.col &&
+      col <= selectedRange.end.col &&
+      row >= selectedRange.start.row &&
+      row <= selectedRange.end.row
+    ) {
+      return false
+    }
+
+    return col >= fillRange.start.col && col <= fillRange.end.col && row >= fillRange.start.row && row <= fillRange.end.row
+  }
+
+  const isPasteable = (row?: Row, col?: ColumnType, showInfo = false) => {
+    if (!row || !col) {
+      if (showInfo) {
+        message.info('Please select a cell to paste')
+      }
+      return false
+    }
+
+    // skip pasting virtual columns (including LTAR columns for now) and system columns
+    if (isVirtualCol(col) || isSystemColumn(col)) {
+      if (showInfo) {
+        message.info(t('msg.info.pasteNotSupported'))
+      }
+      return false
+    }
+
+    // skip pasting auto increment columns
+    if (col.ai) {
+      if (showInfo) {
+        message.info(t('msg.info.autoIncFieldNotEditable'))
+      }
+      return false
+    }
+
+    // skip pasting primary key columns
+    if (col.pk && !row.rowMeta.new) {
+      if (showInfo) {
+        message.info(t('msg.info.editingPKnotSupported'))
+      }
+      return false
+    }
+
+    return true
+  }
+
   function handleMouseOver(event: MouseEvent, row: number, col: number) {
+    if (fillMode) {
+      fillRange.endRange({ row, col: selectedRange.end.col })
+      scrollToCell?.(row, col)
+      return
+    }
+
     if (!isMouseDown) {
       return
     }
@@ -290,6 +363,82 @@ export function useMultiSelect(
   }
 
   const handleMouseUp = (_event: MouseEvent) => {
+    if (fillMode) {
+      fillMode = false
+
+      if (fillRange._start === null || fillRange._end === null) return
+
+      if (selectedRange.start !== null && selectedRange.end !== null) {
+        const cprows = unref(data).slice(selectedRange.start.row, selectedRange.end.row + 1) // slice the selected rows for copy
+        const cpcols = unref(fields).slice(selectedRange.start.col, selectedRange.end.col + 1) // slice the selected cols for copy
+
+        const rawMatrix = serializeRange(cprows, cpcols).json
+
+        const fillDirection = fillRange._start.row <= fillRange._end.row ? 1 : -1
+
+        let fillIndex = fillDirection === 1 ? 0 : rawMatrix.length - 1
+
+        const rowsToPaste: Row[] = []
+        const propsToPaste: string[] = []
+
+        for (
+          let row = fillRange._start.row;
+          fillDirection === 1 ? row <= fillRange._end.row : row >= fillRange._end.row;
+          row += fillDirection
+        ) {
+          if (isCellSelected(row, selectedRange.start.col)) {
+            continue
+          }
+
+          const rowObj = unref(data)[row]
+
+          let pasteIndex = 0
+
+          for (let col = fillRange.start.col; col <= fillRange.end.col; col++) {
+            const colObj = unref(fields)[col]
+
+            if (!isPasteable(rowObj, colObj)) {
+              pasteIndex++
+              continue
+            }
+
+            propsToPaste.push(colObj.title!)
+
+            const pasteValue = convertCellData(
+              {
+                value: rawMatrix[fillIndex][pasteIndex],
+                to: colObj.uidt as UITypes,
+                column: colObj,
+                appInfo: unref(appInfo),
+              },
+              isMysql(meta.value?.base_id),
+              true,
+            )
+
+            if (pasteValue !== undefined) {
+              rowObj.row[colObj.title!] = pasteValue
+              rowsToPaste.push(rowObj)
+            }
+
+            pasteIndex++
+          }
+
+          if (fillDirection === 1) {
+            fillIndex = fillIndex < rawMatrix.length - 1 ? fillIndex + 1 : 0
+          } else {
+            fillIndex = fillIndex >= 1 ? fillIndex - 1 : rawMatrix.length - 1
+          }
+        }
+
+        bulkUpdateRows?.(rowsToPaste, propsToPaste).then(() => {
+          fillRange.clear()
+        })
+      } else {
+        fillRange.clear()
+      }
+      return
+    }
+
     if (isMouseDown) {
       isMouseDown = false
       // timeout is needed, because we want to set cell as active AFTER all the child's click handler's called
@@ -530,41 +679,6 @@ export function useMultiSelect(
 
   const clearSelectedRange = selectedRange.clear.bind(selectedRange)
 
-  const isPasteable = (row?: Row, col?: ColumnType, showInfo = false) => {
-    if (!row || !col) {
-      if (showInfo) {
-        message.info('Please select a cell to paste')
-      }
-      return false
-    }
-
-    // skip pasting virtual columns (including LTAR columns for now) and system columns
-    if (isVirtualCol(col) || isSystemColumn(col)) {
-      if (showInfo) {
-        message.info(t('msg.info.pasteNotSupported'))
-      }
-      return false
-    }
-
-    // skip pasting auto increment columns
-    if (col.ai) {
-      if (showInfo) {
-        message.info(t('msg.info.autoIncFieldNotEditable'))
-      }
-      return false
-    }
-
-    // skip pasting primary key columns
-    if (col.pk && !row.rowMeta.new) {
-      if (showInfo) {
-        message.info(t('msg.info.editingPKnotSupported'))
-      }
-      return false
-    }
-
-    return true
-  }
-
   const handlePaste = async (e: ClipboardEvent) => {
     if (isDrawerOrModalExist()) {
       return
@@ -751,10 +865,27 @@ export function useMultiSelect(
     }
   }
 
+  function fillHandleMouseDown(event: MouseEvent) {
+    if (event?.button !== MAIN_MOUSE_PRESSED) {
+      return
+    }
+
+    fillMode = true
+
+    if (selectedRange._start && selectedRange._end) {
+      fillRange.startRange({ row: selectedRange._start?.row, col: selectedRange.start.col })
+      fillRange.endRange({ row: selectedRange._end?.row, col: selectedRange.end.col })
+    }
+
+    event.preventDefault()
+  }
+
   useEventListener(document, 'keydown', handleKeyDown)
   useEventListener(document, 'mouseup', handleMouseUp)
   useEventListener(document, 'paste', handlePaste)
 
+  useEventListener(fillHandle, 'mousedown', fillHandleMouseDown)
+
   return {
     isCellActive,
     handleMouseDown,
@@ -767,5 +898,7 @@ export function useMultiSelect(
     resetSelectedRange,
     selectedRange,
     makeActive,
+    fillHandleMouseDown,
+    isCellInFillRange,
   }
 }

From 4dfb182d7f5ccd6d5f0dd60b8550a827ffbd57a0 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 16 Jun 2023 00:43:07 +0300
Subject: [PATCH 02/24] feat: use refs for mouse states

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../composables/useMultiSelect/index.ts       | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index ad4babefae..e7ce30f66a 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -64,9 +64,9 @@ export function useMultiSelect(
 
   const editEnabled = ref(_editEnabled)
 
-  let isMouseDown = $ref(false)
+  const isMouseDown = ref(false)
 
-  let fillMode = $ref(false)
+  const isFillMode = ref(false)
 
   const selectedRange = reactive(new CellRange())
 
@@ -297,13 +297,13 @@ export function useMultiSelect(
   }
 
   function handleMouseOver(event: MouseEvent, row: number, col: number) {
-    if (fillMode) {
+    if (isFillMode.value) {
       fillRange.endRange({ row, col: selectedRange.end.col })
       scrollToCell?.(row, col)
       return
     }
 
-    if (!isMouseDown) {
+    if (!isMouseDown.value) {
       return
     }
 
@@ -325,7 +325,7 @@ export function useMultiSelect(
     }
 
     // if edit is enabled, don't start the selection (some cells shrink after edit mode, which causes the selection to expand if flag is set)
-    if (!editEnabled.value) isMouseDown = true
+    if (!editEnabled.value) isMouseDown.value = true
 
     contextMenu.value = false
 
@@ -363,8 +363,8 @@ export function useMultiSelect(
   }
 
   const handleMouseUp = (_event: MouseEvent) => {
-    if (fillMode) {
-      fillMode = false
+    if (isFillMode.value) {
+      isFillMode.value = false
 
       if (fillRange._start === null || fillRange._end === null) return
 
@@ -439,8 +439,8 @@ export function useMultiSelect(
       return
     }
 
-    if (isMouseDown) {
-      isMouseDown = false
+    if (isMouseDown.value) {
+      isMouseDown.value = false
       // timeout is needed, because we want to set cell as active AFTER all the child's click handler's called
       // this is needed e.g. for date field edit, where two clicks had to be done - one to select cell, and another one to open date dropdown
       setTimeout(() => {
@@ -870,7 +870,7 @@ export function useMultiSelect(
       return
     }
 
-    fillMode = true
+    isFillMode.value = true
 
     if (selectedRange._start && selectedRange._end) {
       fillRange.startRange({ row: selectedRange._start?.row, col: selectedRange.start.col })
@@ -900,5 +900,6 @@ export function useMultiSelect(
     makeActive,
     fillHandleMouseDown,
     isCellInFillRange,
+    isMouseDown,
   }
 }

From 7cb548106fca782faf0490adf8e72a50282201f8 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 16 Jun 2023 00:46:23 +0300
Subject: [PATCH 03/24] refactor: filling range style

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 24bba4ec2f..647dc6e881 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -1387,7 +1387,7 @@ watch(
 
   // todo: replace with css variable
   td.filling::after {
-    @apply border-1 border-solid text-accent border-current;
+    @apply border-1 border-dashed text-primary border-current bg-gray-100 bg-opacity-50;
   }
 
   //td.active::before {

From f05c453728009bf6f3939f0d4753d194f6778a97 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 16 Jun 2023 00:52:55 +0300
Subject: [PATCH 04/24] refactor: fill handle size

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 647dc6e881..c78af55d2e 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -911,12 +911,12 @@ const refreshFillHandle = () => {
     cellRect = useElementBounding(cellRef.el)
     if (!cellRect || !tableRect) return
     if (selectedRange.end.col === 0) {
-      fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value - 4.5 + gridY.value
-      fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value - 4.5
+      fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value + gridY.value
+      fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value
       return
     }
-    fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value - 4.5 + gridY.value
-    fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value - 4.5 + gridX.value
+    fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value + gridY.value
+    fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value + gridX.value
   }
 }
 
@@ -1256,7 +1256,7 @@ watch(
             (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null))
           "
           ref="fillHandle"
-          class="nc-fill-handle absolute w-[8px] h-[8px] rounded-full bg-red-500 !pointer-events-auto"
+          class="nc-fill-handle"
           :class="
             (!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)
               ? 'z-3'
@@ -1489,4 +1489,14 @@ tbody tr:hover {
 .nc-required-cell {
   box-shadow: inset 0 0 2px #f00;
 }
+
+.nc-fill-handle {
+  @apply w-[6px] h-[6px] absolute rounded-full bg-red-500 !pointer-events-auto mt-[-4px] ml-[-4px];
+}
+
+.nc-fill-handle:hover,
+.nc-fill-handle:active,
+.nc-fill-handle:focus {
+  @apply w-[8px] h-[8px] mt-[-5px] ml-[-5px];
+}
 </style>

From f860c909dd0f8a59f58a135216aec144848e738c Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 21 Jun 2023 19:23:54 +0300
Subject: [PATCH 05/24] fix: avoid filling new rows

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/composables/useMultiSelect/index.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index e7ce30f66a..2b1e5f30f8 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -298,6 +298,11 @@ export function useMultiSelect(
 
   function handleMouseOver(event: MouseEvent, row: number, col: number) {
     if (isFillMode.value) {
+      const rw = unref(data)[row]
+
+      // fill is not supported for new rows yet
+      if (rw.rowMeta.new) return
+
       fillRange.endRange({ row, col: selectedRange.end.col })
       scrollToCell?.(row, col)
       return

From c1b5e76a4306cc8f1d1e712af0dd6d6171c462dd Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 24 Jun 2023 09:00:52 +0300
Subject: [PATCH 06/24] fix: snap fill handle

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 498 +++++++++---------
 1 file changed, 237 insertions(+), 261 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index c78af55d2e..a73fc6806e 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -2,7 +2,6 @@
 import { nextTick } from '@vue/runtime-core'
 import type { ColumnReqType, ColumnType, GridType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
-import type { UseElementBoundingReturn } from '@vueuse/core'
 import {
   ActiveViewInj,
   CellUrlDisableOverlayInj,
@@ -112,6 +111,8 @@ const tableHeadEl = ref<HTMLElement>()
 const tableBodyEl = ref<HTMLElement>()
 const fillHandle = ref<HTMLElement>()
 
+const gridRect = useElementBounding(gridWrapper)
+
 const isAddingColumnAllowed = $computed(() => !readOnly.value && !isLocked.value && isUIAllowed('add-column') && !isSqlView.value)
 
 const isAddingEmptyRowAllowed = $computed(() => !isView && !isLocked.value && hasEditPermission && !isSqlView.value)
@@ -891,16 +892,19 @@ function addEmptyRow(row?: number) {
   return rowObj
 }
 
-const tableRect = useElementBounding(smartTable)
-const { height: tableHeight, width: tableWidth } = tableRect
-
-const { x: gridX, y: gridY } = useScroll(gridWrapper)
-
 const fillHandleTop = ref()
 const fillHandleLeft = ref()
 
 const cellRefs = ref<{ el: HTMLElement }[]>([])
-let cellRect: UseElementBoundingReturn | null = null
+
+const showFillHandle = computed(
+  () =>
+    !readOnly.value &&
+    !isLocked.value &&
+    !editEnabled &&
+    (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) &&
+    !data.value[selectedRange.end.row ?? activeCell.row]?.rowMeta?.new,
+)
 
 const refreshFillHandle = () => {
   const cellRef = cellRefs.value.find(
@@ -908,28 +912,22 @@ const refreshFillHandle = () => {
       cell.el.dataset.rowIndex === String(selectedRange.end.row) && cell.el.dataset.colIndex === String(selectedRange.end.col),
   )
   if (cellRef) {
-    cellRect = useElementBounding(cellRef.el)
-    if (!cellRect || !tableRect) return
-    if (selectedRange.end.col === 0) {
-      fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value + gridY.value
-      fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value
-      return
-    }
-    fillHandleTop.value = cellRect.top.value - tableRect.top.value + cellRect.height.value + gridY.value
-    fillHandleLeft.value = cellRect.left.value - tableRect.left.value + cellRect.width.value + gridX.value
+    const cellRect = useElementBounding(cellRef.el)
+    if (!cellRect || !gridWrapper.value) return
+    fillHandleTop.value = cellRect.top.value + cellRect.height.value - gridRect.top.value + gridWrapper.value.scrollTop
+    fillHandleLeft.value = cellRect.left.value + cellRect.width.value - gridRect.left.value + gridWrapper.value.scrollLeft
   }
 }
 
-watch(
-  () => `${selectedRange.end.row}-${selectedRange.end.col}`,
-  (n, o) => {
-    if (n !== o) {
-      if (gridWrapper.value) {
-        refreshFillHandle()
-      }
-    }
-  },
-)
+watch([() => selectedRange.end.row, () => selectedRange.end.col], (n, o) => {
+  if (n !== o) {
+    refreshFillHandle()
+  }
+})
+
+useEventListener(gridWrapper, 'scroll', () => {
+  refreshFillHandle()
+})
 </script>
 
 <template>
@@ -940,233 +938,233 @@ watch(
       </div>
     </general-overlay>
 
-    <div
-      ref="gridWrapper"
-      class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull"
-      :class="{
-        relative:
-          !readOnly &&
-          !isLocked &&
-          (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) &&
-          ((!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)),
-      }"
-    >
+    <div ref="gridWrapper" class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull relative">
       <a-dropdown
         v-model:visible="contextMenu"
         :trigger="isSqlView ? [] : ['contextmenu']"
         overlay-class-name="nc-dropdown-grid-context-menu"
       >
-        <table
-          ref="smartTable"
-          class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
-          @contextmenu="showContextMenu"
-        >
-          <thead ref="tableHeadEl">
-            <tr class="nc-grid-header">
-              <th class="w-[85px] min-w-[85px]" data-testid="grid-id-column">
-                <div class="w-full h-full bg-gray-100 flex pl-5 pr-1 items-center" data-testid="nc-check-all">
-                  <template v-if="!readOnly">
-                    <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
-                    <div
-                      :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
-                      class="nc-check-all w-full items-center"
-                    >
-                      <a-checkbox v-model:checked="selectedAllRecords" />
+        <div class="table-overlay">
+          <table
+            ref="smartTable"
+            class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
+            @contextmenu="showContextMenu"
+          >
+            <thead ref="tableHeadEl">
+              <tr class="nc-grid-header">
+                <th class="w-[85px] min-w-[85px]" data-testid="grid-id-column">
+                  <div class="w-full h-full bg-gray-100 flex pl-5 pr-1 items-center" data-testid="nc-check-all">
+                    <template v-if="!readOnly">
+                      <div class="nc-no-label text-gray-500" :class="{ hidden: selectedAllRecords }">#</div>
+                      <div
+                        :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
+                        class="nc-check-all w-full items-center"
+                      >
+                        <a-checkbox v-model:checked="selectedAllRecords" />
 
-                      <span class="flex-1" />
-                    </div>
-                  </template>
-                  <template v-else>
-                    <div class="text-gray-500">#</div>
-                  </template>
-                </div>
-              </th>
-              <th
-                v-for="col in fields"
-                :key="col.title"
-                v-xc-ver-resize
-                :data-col="col.id"
-                :data-title="col.title"
-                @xcresize="onresize(col.id, $event)"
-                @xcresizing="onXcResizing(col.title, $event)"
-                @xcresized="resizingCol = null"
-              >
-                <div class="w-full h-full bg-gray-100 flex items-center">
-                  <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
-
-                  <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
-                </div>
-              </th>
-              <th
-                v-if="isAddingColumnAllowed"
-                v-e="['c:column:add']"
-                class="cursor-pointer"
-                @click.stop="addColumnDropdown = true"
-              >
-                <a-dropdown
-                  v-model:visible="addColumnDropdown"
-                  :trigger="['click']"
-                  overlay-class-name="nc-dropdown-grid-add-column"
-                >
-                  <div class="h-full w-[60px] flex items-center justify-center">
-                    <component :is="iconMap.plus" class="text-sm nc-column-add" />
+                        <span class="flex-1" />
+                      </div>
+                    </template>
+                    <template v-else>
+                      <div class="text-gray-500">#</div>
+                    </template>
                   </div>
+                </th>
+                <th
+                  v-for="col in fields"
+                  :key="col.title"
+                  v-xc-ver-resize
+                  :data-col="col.id"
+                  :data-title="col.title"
+                  @xcresize="onresize(col.id, $event)"
+                  @xcresizing="onXcResizing(col.title, $event)"
+                  @xcresized="resizingCol = null"
+                >
+                  <div class="w-full h-full bg-gray-100 flex items-center">
+                    <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readOnly" />
 
-                  <template #overlay>
-                    <SmartsheetColumnEditOrAddProvider
-                      v-if="addColumnDropdown"
-                      :preload="preloadColumn"
-                      :column-position="columnOrder"
-                      @submit="closeAddColumnDropdown(true)"
-                      @cancel="closeAddColumnDropdown()"
-                      @click.stop
-                      @keydown.stop
-                    />
-                  </template>
-                </a-dropdown>
-              </th>
-            </tr>
-          </thead>
-          <tbody ref="tableBodyEl">
-            <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
-              <template #default="{ state }">
-                <tr
-                  class="nc-grid-row"
-                  :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
-                  :data-testid="`grid-row-${rowIndex}`"
+                    <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="readOnly" />
+                  </div>
+                </th>
+                <th
+                  v-if="isAddingColumnAllowed"
+                  v-e="['c:column:add']"
+                  class="cursor-pointer"
+                  @click.stop="addColumnDropdown = true"
                 >
-                  <td
-                    key="row-index"
-                    class="caption nc-grid-cell pl-5 pr-1"
-                    :data-testid="`cell-Id-${rowIndex}`"
-                    @contextmenu="contextMenuTarget = null"
+                  <a-dropdown
+                    v-model:visible="addColumnDropdown"
+                    :trigger="['click']"
+                    overlay-class-name="nc-dropdown-grid-add-column"
                   >
-                    <div class="items-center flex gap-1 min-w-[60px]">
-                      <div
-                        v-if="!readOnly || !isLocked"
-                        class="nc-row-no text-xs text-gray-500"
-                        :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
-                      >
-                        {{ ((paginationData.page ?? 1) - 1) * (paginationData.pageSize ?? 25) + rowIndex + 1 }}
-                      </div>
-                      <div
-                        v-if="!readOnly"
-                        :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                        class="nc-row-expand-and-checkbox"
-                      >
-                        <a-checkbox v-model:checked="row.rowMeta.selected" />
-                      </div>
-                      <span class="flex-1" />
+                    <div class="h-full w-[60px] flex items-center justify-center">
+                      <component :is="iconMap.plus" class="text-sm nc-column-add" />
+                    </div>
 
-                      <div
-                        v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)"
-                        class="nc-expand"
-                        :data-testid="`nc-expand-${rowIndex}`"
-                        :class="{ 'nc-comment': row.rowMeta?.commentCount }"
-                      >
-                        <a-spin
-                          v-if="row.rowMeta.saving"
-                          class="!flex items-center"
-                          :data-testid="`row-save-spinner-${rowIndex}`"
-                        />
-                        <template v-else>
-                          <span
-                            v-if="row.rowMeta?.commentCount"
-                            class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
-                            :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
-                            @click="expandForm(row, state)"
-                          >
-                            {{ row.rowMeta.commentCount }}
-                          </span>
-                          <div
-                            v-else
-                            class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
-                          >
-                            <component
-                              :is="iconMap.expand"
-                              v-e="['c:row-expand']"
-                              class="select-none transform hover:(text-accent scale-120) nc-row-expand"
+                    <template #overlay>
+                      <SmartsheetColumnEditOrAddProvider
+                        v-if="addColumnDropdown"
+                        :preload="preloadColumn"
+                        :column-position="columnOrder"
+                        @submit="closeAddColumnDropdown(true)"
+                        @cancel="closeAddColumnDropdown()"
+                        @click.stop
+                        @keydown.stop
+                      />
+                    </template>
+                  </a-dropdown>
+                </th>
+              </tr>
+            </thead>
+            <tbody ref="tableBodyEl">
+              <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
+                <template #default="{ state }">
+                  <tr
+                    class="nc-grid-row"
+                    :style="{ height: rowHeight ? `${rowHeight * 1.8}rem` : `1.8rem` }"
+                    :data-testid="`grid-row-${rowIndex}`"
+                  >
+                    <td key="row-index" class="caption nc-grid-cell pl-5 pr-1" :data-testid="`cell-Id-${rowIndex}`">
+                      <div class="items-center flex gap-1 min-w-[60px]">
+                        <div
+                          v-if="!readOnly || !isLocked"
+                          class="nc-row-no text-xs text-gray-500"
+                          :class="{ toggle: !readOnly, hidden: row.rowMeta.selected }"
+                        >
+                          {{ ((paginationData.page ?? 1) - 1) * (paginationData.pageSize ?? 25) + rowIndex + 1 }}
+                        </div>
+                        <div
+                          v-if="!readOnly"
+                          :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                          class="nc-row-expand-and-checkbox"
+                        >
+                          <a-checkbox v-model:checked="row.rowMeta.selected" />
+                        </div>
+                        <span class="flex-1" />
+
+                        <div
+                          v-if="!readOnly || hasRole('commenter', true) || hasRole('viewer', true)"
+                          class="nc-expand"
+                          :data-testid="`nc-expand-${rowIndex}`"
+                          :class="{ 'nc-comment': row.rowMeta?.commentCount }"
+                        >
+                          <a-spin
+                            v-if="row.rowMeta.saving"
+                            class="!flex items-center"
+                            :data-testid="`row-save-spinner-${rowIndex}`"
+                          />
+                          <template v-else>
+                            <span
+                              v-if="row.rowMeta?.commentCount"
+                              class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
+                              :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                               @click="expandForm(row, state)"
-                            />
-                          </div>
-                        </template>
+                            >
+                              {{ row.rowMeta.commentCount }}
+                            </span>
+                            <div
+                              v-else
+                              class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:(bg-primary bg-opacity-10)"
+                            >
+                              <component
+                                :is="iconMap.expand"
+                                v-e="['c:row-expand']"
+                                class="select-none transform hover:(text-accent scale-120) nc-row-expand"
+                                @click="expandForm(row, state)"
+                              />
+                            </div>
+                          </template>
+                        </div>
                       </div>
-                    </div>
-                  </td>
-                  <SmartsheetTableDataCell
-                    v-for="(columnObj, colIndex) of fields"
-                    :key="columnObj.id"
-                    ref="cellRefs"
-                    class="cell relative nc-grid-cell"
-                    :class="{
-                      'cursor-pointer': hasEditPermission,
-                      'active': hasEditPermission && isCellSelected(rowIndex, colIndex),
-                      'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
-                      'align-middle': !rowHeight || rowHeight === 1,
-                      'align-top': rowHeight && rowHeight !== 1,
-                      'filling': isCellInFillRange(rowIndex, colIndex),
-                    }"
-                    :data-testid="`cell-${columnObj.title}-${rowIndex}`"
-                    :data-key="rowIndex + columnObj.id"
-                    :data-col="columnObj.id"
-                    :data-title="columnObj.title"
-                    :data-row-index="rowIndex"
-                    :data-col-index="colIndex"
-                    @mousedown="handleMouseDown($event, rowIndex, colIndex)"
-                    @mouseover="handleMouseOver($event, rowIndex, colIndex)"
-                    @click="handleCellClick($event, rowIndex, colIndex)"
-                    @dblclick="makeEditable(row, columnObj)"
-                    @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
-                  >
-                    <div v-if="!switchingTab" class="w-full h-full">
-                      <LazySmartsheetVirtualCell
-                        v-if="isVirtualCol(columnObj)"
-                        v-model="row.row[columnObj.title]"
-                        :column="columnObj"
-                        :active="activeCell.col === colIndex && activeCell.row === rowIndex"
-                        :row="row"
-                        :read-only="readOnly"
-                        @navigate="onNavigate"
-                        @save="updateOrSaveRow(row, '', state)"
-                      />
+                    </td>
+                    <SmartsheetTableDataCell
+                      v-for="(columnObj, colIndex) of fields"
+                      :key="columnObj.id"
+                      ref="cellRefs"
+                      class="cell relative nc-grid-cell"
+                      :class="{
+                        'cursor-pointer': hasEditPermission,
+                        'active': hasEditPermission && isCellSelected(rowIndex, colIndex),
+                        'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
+                        'align-middle': !rowHeight || rowHeight === 1,
+                        'align-top': rowHeight && rowHeight !== 1,
+                        'filling': isCellInFillRange(rowIndex, colIndex),
+                      }"
+                      :data-testid="`cell-${columnObj.title}-${rowIndex}`"
+                      :data-key="rowIndex + columnObj.id"
+                      :data-col="columnObj.id"
+                      :data-title="columnObj.title"
+                      :data-row-index="rowIndex"
+                      :data-col-index="colIndex"
+                      @mousedown="handleMouseDown($event, rowIndex, colIndex)"
+                      @mouseover="handleMouseOver($event, rowIndex, colIndex)"
+                      @click="handleCellClick($event, rowIndex, colIndex)"
+                      @dblclick="makeEditable(row, columnObj)"
+                      @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
+                    >
+                      <div v-if="!switchingTab" class="w-full h-full">
+                        <LazySmartsheetVirtualCell
+                          v-if="isVirtualCol(columnObj)"
+                          v-model="row.row[columnObj.title]"
+                          :column="columnObj"
+                          :active="activeCell.col === colIndex && activeCell.row === rowIndex"
+                          :row="row"
+                          :read-only="readOnly"
+                          @navigate="onNavigate"
+                          @save="updateOrSaveRow(row, '', state)"
+                        />
 
-                      <LazySmartsheetCell
-                        v-else
-                        v-model="row.row[columnObj.title]"
-                        :column="columnObj"
-                        :edit-enabled="
-                          !!hasEditPermission && !!editEnabled && activeCell.col === colIndex && activeCell.row === rowIndex
-                        "
-                        :row-index="rowIndex"
-                        :active="activeCell.col === colIndex && activeCell.row === rowIndex"
-                        :read-only="readOnly"
-                        @update:edit-enabled="editEnabled = $event"
-                        @save="updateOrSaveRow(row, columnObj.title, state)"
-                        @navigate="onNavigate"
-                        @cancel="editEnabled = false"
-                      />
-                    </div>
-                  </SmartsheetTableDataCell>
-                </tr>
-              </template>
-            </LazySmartsheetRow>
-
-            <tr
-              v-if="isAddingEmptyRowAllowed"
-              v-e="['c:row:add:grid-bottom']"
-              class="cursor-pointer"
-              @mouseup.stop
-              @click="addEmptyRow()"
-            >
-              <td class="text-left pointer nc-grid-add-new-cell sticky left-0 !z-5 !border-r-0">
-                <div class="px-2 w-full flex items-center text-gray-500">
-                  <component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" />
-                </div>
-              </td>
-              <td :colspan="visibleColLength"></td>
-            </tr>
-          </tbody>
-        </table>
+                        <LazySmartsheetCell
+                          v-else
+                          v-model="row.row[columnObj.title]"
+                          :column="columnObj"
+                          :edit-enabled="
+                            !!hasEditPermission && !!editEnabled && activeCell.col === colIndex && activeCell.row === rowIndex
+                          "
+                          :row-index="rowIndex"
+                          :active="activeCell.col === colIndex && activeCell.row === rowIndex"
+                          :read-only="readOnly"
+                          @update:edit-enabled="editEnabled = $event"
+                          @save="updateOrSaveRow(row, columnObj.title, state)"
+                          @navigate="onNavigate"
+                          @cancel="editEnabled = false"
+                        />
+                      </div>
+                    </SmartsheetTableDataCell>
+                  </tr>
+                </template>
+              </LazySmartsheetRow>
+
+              <tr
+                v-if="isAddingEmptyRowAllowed"
+                v-e="['c:row:add:grid-bottom']"
+                class="cursor-pointer relative z-3"
+                @mouseup.stop
+                @click="addEmptyRow()"
+              >
+                <td class="text-left pointer nc-grid-add-new-cell sticky left-0 !z-5 !border-r-0">
+                  <div class="px-2 w-full flex items-center text-gray-500">
+                    <component :is="iconMap.plus" class="text-pint-500 text-xs ml-2 text-primary" />
+                  </div>
+                </td>
+                <td :colspan="visibleColLength"></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <!-- Fill Handle -->
+          <div
+            v-show="showFillHandle"
+            ref="fillHandle"
+            class="nc-fill-handle"
+            :class="
+              (!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)
+                ? 'z-3'
+                : 'z-4'
+            "
+            :style="{ top: `${fillHandleTop}px`, left: `${fillHandleLeft}px`, cursor: 'crosshair' }"
+          />
+        </div>
 
         <template v-if="!isLocked && hasEditPermission" #overlay>
           <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
@@ -1243,28 +1241,6 @@ watch(
           </a-menu>
         </template>
       </a-dropdown>
-      <div
-        class="table-overlay absolute top-0 left-0 pointer-events-none overflow-hidden"
-        :style="{ height: `${tableHeight}px`, width: `${tableWidth}px` }"
-      >
-        <!-- Fill Handle -->
-        <div
-          v-show="
-            !readOnly &&
-            !isLocked &&
-            !editEnabled &&
-            (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null))
-          "
-          ref="fillHandle"
-          class="nc-fill-handle"
-          :class="
-            (!selectedRange.isEmpty() && selectedRange.end.col !== 0) || (selectedRange.isEmpty() && activeCell.col !== 0)
-              ? 'z-3'
-              : 'z-4'
-          "
-          :style="{ top: `${fillHandleTop}px`, left: `${fillHandleLeft}px`, cursor: 'crosshair' }"
-        />
-      </div>
     </div>
 
     <div

From 9c0daaffe519a2c391b184623e657f280e03207c Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 27 Jun 2023 13:21:26 +0300
Subject: [PATCH 07/24] fix: click outside bug

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue      | 6 +++++-
 packages/nc-gui/composables/useMultiSelect/index.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index a73fc6806e..973eb9c8a0 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -211,6 +211,7 @@ const {
   makeActive,
   selectedRange,
   isCellInFillRange,
+  isFillMode,
 } = useMultiSelect(
   meta,
   fields,
@@ -668,10 +669,13 @@ onClickOutside(tableBodyEl, (e) => {
 
   if (editEnabled && (isVirtualCol(activeCol) || activeCol.uidt === UITypes.JSON)) return
 
+  // skip if fill mode is active
+  if (isFillMode.value) return
+
   // ignore unselecting if clicked inside or on the picker(Date, Time, DateTime, Year)
   // or single/multi select options
   const activePickerOrDropdownEl = document.querySelector(
-    '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active,.nc-fill-handle',
+    '.nc-picker-datetime.active,.nc-dropdown-single-select-cell.active,.nc-dropdown-multi-select-cell.active,.nc-picker-date.active,.nc-picker-year.active,.nc-picker-time.active',
   )
   if (
     e.target &&
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 2b1e5f30f8..c878dbf630 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -903,8 +903,8 @@ export function useMultiSelect(
     resetSelectedRange,
     selectedRange,
     makeActive,
-    fillHandleMouseDown,
     isCellInFillRange,
     isMouseDown,
+    isFillMode,
   }
 }

From 3a41d54d5dbc5b559718e2f3f2be67bc0d5586ea Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 27 Jun 2023 18:00:44 +0300
Subject: [PATCH 08/24] fix: refresh fill handle on active cell change

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/smartsheet/Grid.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 973eb9c8a0..018f533d88 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -907,13 +907,14 @@ const showFillHandle = computed(
     !isLocked.value &&
     !editEnabled &&
     (!selectedRange.isEmpty() || (activeCell.row !== null && activeCell.col !== null)) &&
-    !data.value[selectedRange.end.row ?? activeCell.row]?.rowMeta?.new,
+    !data.value[(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) ?? -1]?.rowMeta?.new,
 )
 
 const refreshFillHandle = () => {
   const cellRef = cellRefs.value.find(
     (cell) =>
-      cell.el.dataset.rowIndex === String(selectedRange.end.row) && cell.el.dataset.colIndex === String(selectedRange.end.col),
+      cell.el.dataset.rowIndex === String(isNaN(selectedRange.end.row) ? activeCell.row : selectedRange.end.row) &&
+      cell.el.dataset.colIndex === String(isNaN(selectedRange.end.col) ? activeCell.col : selectedRange.end.col),
   )
   if (cellRef) {
     const cellRect = useElementBounding(cellRef.el)
@@ -923,11 +924,14 @@ const refreshFillHandle = () => {
   }
 }
 
-watch([() => selectedRange.end.row, () => selectedRange.end.col], (n, o) => {
-  if (n !== o) {
-    refreshFillHandle()
-  }
-})
+watch(
+  [() => selectedRange.end.row, () => selectedRange.end.col, () => activeCell.row, () => activeCell.col],
+  ([sr, sc, ar, ac], [osr, osc, oar, oac]) => {
+    if (sr !== osr || sc !== osc || ar !== oar || ac !== oac) {
+      refreshFillHandle()
+    }
+  },
+)
 
 useEventListener(gridWrapper, 'scroll', () => {
   refreshFillHandle()

From 7ae97d551fb920060c36392e2e5128893b45d7aa Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 27 Jun 2023 18:02:48 +0300
Subject: [PATCH 09/24] feat: avoid click outside event on scrollbar click

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 018f533d88..d1b2c0af8d 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -99,6 +99,8 @@ const contextMenu = computed({
 })
 const contextMenuClosing = ref(false)
 
+const scrolling = ref(false)
+
 const bulkUpdateDlg = ref(false)
 
 const routeQuery = $computed(() => route.query as Record<string, string>)
@@ -660,6 +662,11 @@ const smartTable = ref(null)
 
 /** On clicking outside of table reset active cell  */
 onClickOutside(tableBodyEl, (e) => {
+  // do nothing if mousedown on the scrollbar (scrolling)
+  if (scrolling.value) {
+    return
+  }
+
   // do nothing if context menu was open
   if (contextMenu.value) return
 
@@ -936,6 +943,19 @@ watch(
 useEventListener(gridWrapper, 'scroll', () => {
   refreshFillHandle()
 })
+
+useEventListener(document, 'mousedown', (e) => {
+  if (e.offsetX > (e.target as HTMLElement)?.clientWidth || e.offsetY > (e.target as HTMLElement)?.clientHeight) {
+    scrolling.value = true
+  }
+})
+
+useEventListener(document, 'mouseup', () => {
+  // wait for click event to finish before setting scrolling to false
+  setTimeout(() => {
+    scrolling.value = false
+  }, 100)
+})
 </script>
 
 <template>

From e4536124d87f52b2c4d12812c6298adc28a9058e Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 27 Jun 2023 19:14:56 +0300
Subject: [PATCH 10/24] feat: select after filling

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     |  8 ++++++++
 .../composables/useMultiSelect/index.ts       | 20 +++++++++++++------
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index d1b2c0af8d..82c8cd8c00 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -1113,6 +1113,10 @@ useEventListener(document, 'mouseup', () => {
                       :class="{
                         'cursor-pointer': hasEditPermission,
                         'active': hasEditPermission && isCellSelected(rowIndex, colIndex),
+                        'active-cell':
+                          hasEditPermission &&
+                          ((activeCell.row === rowIndex && activeCell.col === colIndex) ||
+                            (selectedRange._start?.row === rowIndex && selectedRange._start?.col === colIndex)),
                         'nc-required-cell': isColumnRequiredAndNull(columnObj, row.row),
                         'align-middle': !rowHeight || rowHeight === 1,
                         'align-top': rowHeight && rowHeight !== 1,
@@ -1375,6 +1379,10 @@ useEventListener(document, 'mouseup', () => {
 
   // todo: replace with css variable
   td.active::after {
+    @apply text-primary border-current bg-primary bg-opacity-5;
+  }
+
+  td.active-cell::after {
     @apply border-1 border-solid text-primary border-current bg-primary bg-opacity-5;
   }
 
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index c878dbf630..942396cc98 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -232,7 +232,7 @@ export function useMultiSelect(
       return true
     }
 
-    if (selectedRange.start === null || selectedRange.end === null) {
+    if (selectedRange._start === null || selectedRange._end === null) {
       return false
     }
 
@@ -245,7 +245,7 @@ export function useMultiSelect(
   }
 
   function isCellInFillRange(row: number, col: number) {
-    if (fillRange.start === null || fillRange.end === null) {
+    if (fillRange._start === null || fillRange._end === null) {
       return false
     }
 
@@ -300,10 +300,12 @@ export function useMultiSelect(
     if (isFillMode.value) {
       const rw = unref(data)[row]
 
+      if (!selectedRange._start || !selectedRange._end) return
+
       // fill is not supported for new rows yet
       if (rw.rowMeta.new) return
 
-      fillRange.endRange({ row, col: selectedRange.end.col })
+      fillRange.endRange({ row, col: selectedRange._end.col })
       scrollToCell?.(row, col)
       return
     }
@@ -373,7 +375,9 @@ export function useMultiSelect(
 
       if (fillRange._start === null || fillRange._end === null) return
 
-      if (selectedRange.start !== null && selectedRange.end !== null) {
+      if (selectedRange._start !== null && selectedRange._end !== null) {
+        const tempActiveCell = { row: selectedRange._start.row, col: selectedRange._start.col }
+
         const cprows = unref(data).slice(selectedRange.start.row, selectedRange.end.row + 1) // slice the selected rows for copy
         const cpcols = unref(fields).slice(selectedRange.start.col, selectedRange.end.col + 1) // slice the selected cols for copy
 
@@ -436,6 +440,10 @@ export function useMultiSelect(
         }
 
         bulkUpdateRows?.(rowsToPaste, propsToPaste).then(() => {
+          if (fillRange._start === null || fillRange._end === null) return
+          selectedRange.startRange(tempActiveCell)
+          selectedRange.endRange(fillRange._end)
+          makeActive(tempActiveCell.row, tempActiveCell.col)
           fillRange.clear()
         })
       } else {
@@ -878,8 +886,8 @@ export function useMultiSelect(
     isFillMode.value = true
 
     if (selectedRange._start && selectedRange._end) {
-      fillRange.startRange({ row: selectedRange._start?.row, col: selectedRange.start.col })
-      fillRange.endRange({ row: selectedRange._end?.row, col: selectedRange.end.col })
+      fillRange.startRange({ row: selectedRange._start?.row, col: selectedRange._start.col })
+      fillRange.endRange({ row: selectedRange._end?.row, col: selectedRange._end.col })
     }
 
     event.preventDefault()

From cb06938c3657680c5df1a9593ddd2c8caa791491 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 15 Jun 2023 14:51:07 +0530
Subject: [PATCH 11/24] test: attachment cell

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts b/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
index bb0b8ccb1c..6f2a73d29b 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/AttachmentCell.ts
@@ -23,6 +23,7 @@ export class AttachmentCellPageObject extends BasePage {
   //
   async addFile({ index, columnHeader, filePath }: { index?: number; columnHeader: string; filePath: string[] }) {
     await this.get({ index, columnHeader }).scrollIntoViewIfNeeded();
+    await this.get({ index, columnHeader }).click({ position: { x: 1, y: 1 } });
     const attachFileAction = this.get({ index, columnHeader })
       .locator('[data-testid="attachment-cell-file-picker-button"]')
       .click();

From b48b3e332e65cc4d5da346097ee799ebae8d64c3 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 28 Jun 2023 12:55:06 +0530
Subject: [PATCH 12/24] test: fill handle (wip)

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../pages/Dashboard/common/Cell/RatingCell.ts |   1 +
 .../tests/db/verticalFillHandle.spec.ts       | 305 ++++++++++++++++++
 2 files changed, 306 insertions(+)
 create mode 100644 tests/playwright/tests/db/verticalFillHandle.spec.ts

diff --git a/tests/playwright/pages/Dashboard/common/Cell/RatingCell.ts b/tests/playwright/pages/Dashboard/common/Cell/RatingCell.ts
index 0b9b059b13..be0e3af7af 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/RatingCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/RatingCell.ts
@@ -15,6 +15,7 @@ export class RatingCellPageObject extends BasePage {
   }
 
   async select({ index, columnHeader, rating }: { index?: number; columnHeader: string; rating: number }) {
+    await this.get({ index, columnHeader }).scrollIntoViewIfNeeded();
     await this.waitForResponse({
       uiAction: () => this.get({ index, columnHeader }).locator('.ant-rate-star > div').nth(rating).click(),
       httpMethodsToMatch: ['POST', 'PATCH'],
diff --git a/tests/playwright/tests/db/verticalFillHandle.spec.ts b/tests/playwright/tests/db/verticalFillHandle.spec.ts
new file mode 100644
index 0000000000..9fdc1d9a9b
--- /dev/null
+++ b/tests/playwright/tests/db/verticalFillHandle.spec.ts
@@ -0,0 +1,305 @@
+import { expect, test } from '@playwright/test';
+import setup from '../../setup';
+import { DashboardPage } from '../../pages/Dashboard';
+import { Api } from 'nocodb-sdk';
+import { createDemoTable } from '../../setup/demoTable';
+import { BulkUpdatePage } from '../../pages/Dashboard/BulkUpdate';
+
+let dashboard: DashboardPage;
+async function dragDrop({ firstColumn, lastColumn }: { firstColumn: string; lastColumn: string }) {
+  await dashboard.grid.cell.get({ index: 0, columnHeader: firstColumn }).click();
+  await dashboard.rootPage.keyboard.press(
+    (await dashboard.grid.isMacOs()) ? 'Meta+Shift+ArrowRight' : 'Control+Shift+ArrowRight'
+  );
+
+  // get fill handle locator
+  const src = await dashboard.rootPage.locator(`.nc-fill-handle`);
+  const dst = await dashboard.grid.cell.get({ index: 3, columnHeader: lastColumn });
+
+  // drag and drop
+  await src.dragTo(dst);
+}
+
+test.describe.skip('Bulk update', () => {
+  let context: any;
+  let api: Api<any>;
+  let table;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.project);
+
+    api = new Api({
+      baseURL: `http://localhost:8080/`,
+      headers: {
+        'xc-auth': context.token,
+      },
+    });
+
+    table = await createDemoTable({ context, type: 'textBased', recordCnt: 10 });
+    await page.reload();
+
+    await dashboard.treeView.openTable({ title: 'textBased' });
+  });
+
+  test('Text based', async () => {
+    const fields = [
+      { title: 'SingleLineText', value: 'Afghanistan', type: 'text' },
+      { title: 'Email', value: 'jbutt@gmail.com', type: 'text' },
+      { title: 'PhoneNumber', value: '1-541-754-3010', type: 'text' },
+      { title: 'URL', value: 'https://www.google.com', type: 'text' },
+      { title: 'MultiLineText', value: 'Aberdeen, United Kingdom', type: 'longText' },
+    ];
+
+    await dragDrop({ firstColumn: 'SingleLineText', lastColumn: 'URL' });
+
+    // verify data on grid (verifying just two rows)
+    for (let i = 0; i < fields.length; i++) {
+      for (let j = 0; j < 4; j++) {
+        await dashboard.grid.cell.verify({ index: j, columnHeader: fields[i].title, value: fields[i].value });
+      }
+    }
+
+    // verify api response
+    const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 4 })).list;
+    for (let i = 0; i < updatedRecords.length; i++) {
+      for (let j = 0; j < fields.length; j++) {
+        expect(updatedRecords[i][fields[j].title]).toEqual(fields[j].value);
+      }
+    }
+  });
+});
+
+test.describe.skip('Bulk update', () => {
+  let context: any;
+  let api: Api<any>;
+  let table;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.project);
+
+    api = new Api({
+      baseURL: `http://localhost:8080/`,
+      headers: {
+        'xc-auth': context.token,
+      },
+    });
+
+    table = await createDemoTable({ context, type: 'numberBased', recordCnt: 10 });
+    await page.reload();
+
+    await dashboard.treeView.openTable({ title: 'numberBased' });
+  });
+
+  test('Number based', async () => {
+    const fields = [
+      { title: 'Number', value: '33', type: 'text' },
+      { title: 'Decimal', value: '33.3', type: 'text' },
+      { title: 'Currency', value: '33.30', type: 'text' },
+      { title: 'Percent', value: '33', type: 'text' },
+      { title: 'Duration', value: '00:01', type: 'text' },
+      { title: 'Rating', value: '3', type: 'rating' },
+      { title: 'Year', value: '2023', type: 'year' },
+      // { title: 'Time', value: '10:10', type: 'time' },
+    ];
+
+    // set rating for first record
+    await dashboard.grid.cell.rating.select({ index: 0, columnHeader: 'Rating', rating: 2 });
+
+    await dragDrop({ firstColumn: 'Number', lastColumn: 'Year' });
+
+    // verify data on grid
+    for (let i = 0; i < fields.length; i++) {
+      for (let j = 0; j < 4; j++) {
+        if (fields[i].type === 'rating') {
+          await dashboard.grid.cell.rating.verify({
+            index: j,
+            columnHeader: fields[i].title,
+            rating: +fields[i].value,
+          });
+        } else if (fields[i].type === 'year') {
+          await dashboard.grid.cell.year.verify({ index: j, columnHeader: fields[i].title, value: +fields[i].value });
+        } else if (fields[i].type === 'time') {
+          await dashboard.grid.cell.time.verify({ index: j, columnHeader: fields[i].title, value: fields[i].value });
+        } else {
+          await dashboard.grid.cell.verify({ index: j, columnHeader: fields[i].title, value: fields[i].value });
+        }
+      }
+    }
+
+    // verify api response
+    // duration in seconds
+    const APIResponse = [33, 33.3, 33.3, 33, 60, 3, 2023, '10:10:00'];
+    const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 4 })).list;
+    for (let i = 0; i < updatedRecords.length; i++) {
+      for (let j = 0; j < fields.length; j++) {
+        if (fields[j].title === 'Time') {
+          expect(updatedRecords[i][fields[j].title]).toContain(APIResponse[j]);
+        } else {
+          expect(+updatedRecords[i][fields[j].title]).toEqual(APIResponse[j]);
+        }
+      }
+    }
+  });
+});
+
+test.describe.skip('Bulk update', () => {
+  let context: any;
+  let api: Api<any>;
+  let table;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.project);
+
+    api = new Api({
+      baseURL: `http://localhost:8080/`,
+      headers: {
+        'xc-auth': context.token,
+      },
+    });
+
+    table = await createDemoTable({ context, type: 'selectBased', recordCnt: 10 });
+    await page.reload();
+
+    await dashboard.treeView.openTable({ title: 'selectBased' });
+  });
+
+  test('Select based', async () => {
+    const fields = [
+      { title: 'SingleSelect', value: 'jan', type: 'singleSelect' },
+      { title: 'MultiSelect', value: 'jan,feb,mar', type: 'multiSelect' },
+    ];
+
+    await dragDrop({ firstColumn: 'SingleSelect', lastColumn: 'MultiSelect' });
+
+    // verify data on grid
+    const displayOptions = ['jan', 'feb', 'mar'];
+    for (let i = 0; i < fields.length; i++) {
+      for (let j = 0; j < 4; j++) {
+        if (fields[i].type === 'singleSelect') {
+          await dashboard.grid.cell.selectOption.verify({
+            index: j,
+            columnHeader: fields[i].title,
+            option: fields[i].value,
+          });
+        } else {
+          await dashboard.grid.cell.selectOption.verifyOptions({
+            index: j,
+            columnHeader: fields[i].title,
+            options: displayOptions,
+          });
+        }
+      }
+    }
+
+    // verify api response
+    const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 4 })).list;
+    for (let i = 0; i < updatedRecords.length; i++) {
+      for (let j = 0; j < fields.length; j++) {
+        expect(updatedRecords[i][fields[j].title]).toContain(fields[j].value);
+      }
+    }
+  });
+});
+
+test.describe.skip('Bulk update', () => {
+  let context: any;
+  let api: Api<any>;
+  let table;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.project);
+
+    api = new Api({
+      baseURL: `http://localhost:8080/`,
+      headers: {
+        'xc-auth': context.token,
+      },
+    });
+
+    table = await createDemoTable({ context, type: 'miscellaneous', recordCnt: 50 });
+    await page.reload();
+
+    await dashboard.treeView.openTable({ title: 'miscellaneous' });
+  });
+
+  test('Miscellaneous (Checkbox, attachment)', async () => {
+    const fields = [
+      { title: 'Checkbox', value: 'true', type: 'checkbox' },
+      { title: 'Attachment', value: `${process.cwd()}/fixtures/sampleFiles/1.json`, type: 'attachment' },
+    ];
+
+    // verify data on grid
+    for (let i = 0; i < fields.length; i++) {
+      if (fields[i].type === 'checkbox') {
+        await dashboard.grid.cell.checkbox.verifyChecked({
+          index: 5,
+          columnHeader: fields[i].title,
+        });
+      } else {
+        await dashboard.grid.cell.attachment.verifyFileCount({
+          index: 5,
+          columnHeader: fields[i].title,
+          count: 1,
+        });
+      }
+    }
+
+    // verify api response
+    const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 50 })).list;
+    for (let i = 0; i < updatedRecords.length; i++) {
+      for (let j = 0; j < fields.length; j++) {
+        expect(+updatedRecords[i]['Checkbox']).toBe(1);
+        expect(updatedRecords[i]['Attachment'][0].title).toBe('1.json');
+        expect(updatedRecords[i]['Attachment'][0].mimetype).toBe('application/json');
+      }
+    }
+  });
+});
+
+test.describe.skip('Bulk update', () => {
+  let context: any;
+  let api: Api<any>;
+  let table;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page, isEmptyProject: true });
+    dashboard = new DashboardPage(page, context.project);
+
+    api = new Api({
+      baseURL: `http://localhost:8080/`,
+      headers: {
+        'xc-auth': context.token,
+      },
+    });
+
+    table = await createDemoTable({ context, type: 'dateTimeBased', recordCnt: 50 });
+    await page.reload();
+
+    await dashboard.treeView.openTable({ title: 'dateTimeBased' });
+  });
+
+  test('Date Time Based', async () => {
+    const fields = [{ title: 'Date', value: '2024-08-04', type: 'date' }];
+
+    // verify data on grid
+    for (let i = 0; i < fields.length; i++) {
+      await dashboard.grid.cell.date.verify({
+        index: 5,
+        columnHeader: fields[i].title,
+        date: fields[i].value,
+      });
+    }
+
+    // verify api response
+    const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 50 })).list;
+    for (let i = 0; i < updatedRecords.length; i++) {
+      for (let j = 0; j < fields.length; j++) {
+        expect(updatedRecords[i]['Date']).toBe(fields[j].value);
+      }
+    }
+  });
+});

From 98cca2d377eaeb2b4a2ecfdcf00b80790f83a5f7 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 28 Jun 2023 15:37:04 +0530
Subject: [PATCH 13/24] test: code realign (WIP)

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../tests/db/verticalFillHandle.spec.ts       | 126 +++++-------------
 1 file changed, 32 insertions(+), 94 deletions(-)

diff --git a/tests/playwright/tests/db/verticalFillHandle.spec.ts b/tests/playwright/tests/db/verticalFillHandle.spec.ts
index 9fdc1d9a9b..96d135bef1 100644
--- a/tests/playwright/tests/db/verticalFillHandle.spec.ts
+++ b/tests/playwright/tests/db/verticalFillHandle.spec.ts
@@ -6,6 +6,9 @@ import { createDemoTable } from '../../setup/demoTable';
 import { BulkUpdatePage } from '../../pages/Dashboard/BulkUpdate';
 
 let dashboard: DashboardPage;
+let context: any;
+let api: Api<any>;
+let table;
 async function dragDrop({ firstColumn, lastColumn }: { firstColumn: string; lastColumn: string }) {
   await dashboard.grid.cell.get({ index: 0, columnHeader: firstColumn }).click();
   await dashboard.rootPage.keyboard.press(
@@ -19,27 +22,26 @@ async function dragDrop({ firstColumn, lastColumn }: { firstColumn: string; last
   // drag and drop
   await src.dragTo(dst);
 }
+async function beforeEachInit({ page, tableType }: { page: any; tableType: string }) {
+  context = await setup({ page, isEmptyProject: true });
+  dashboard = new DashboardPage(page, context.project);
+
+  api = new Api({
+    baseURL: `http://localhost:8080/`,
+    headers: {
+      'xc-auth': context.token,
+    },
+  });
 
-test.describe.skip('Bulk update', () => {
-  let context: any;
-  let api: Api<any>;
-  let table;
-
-  test.beforeEach(async ({ page }) => {
-    context = await setup({ page, isEmptyProject: true });
-    dashboard = new DashboardPage(page, context.project);
-
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
+  table = await createDemoTable({ context, type: tableType, recordCnt: 10 });
+  await page.reload();
 
-    table = await createDemoTable({ context, type: 'textBased', recordCnt: 10 });
-    await page.reload();
+  await dashboard.treeView.openTable({ title: tableType });
+}
 
-    await dashboard.treeView.openTable({ title: 'textBased' });
+test.describe('Fill Handle', () => {
+  test.beforeEach(async ({ page }) => {
+    await beforeEachInit({ page, tableType: 'textBased' });
   });
 
   test('Text based', async () => {
@@ -70,26 +72,9 @@ test.describe.skip('Bulk update', () => {
   });
 });
 
-test.describe.skip('Bulk update', () => {
-  let context: any;
-  let api: Api<any>;
-  let table;
-
+test.describe('Fill Handle', () => {
   test.beforeEach(async ({ page }) => {
-    context = await setup({ page, isEmptyProject: true });
-    dashboard = new DashboardPage(page, context.project);
-
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
-
-    table = await createDemoTable({ context, type: 'numberBased', recordCnt: 10 });
-    await page.reload();
-
-    await dashboard.treeView.openTable({ title: 'numberBased' });
+    await beforeEachInit({ page, tableType: 'numberBased' });
   });
 
   test('Number based', async () => {
@@ -144,26 +129,9 @@ test.describe.skip('Bulk update', () => {
   });
 });
 
-test.describe.skip('Bulk update', () => {
-  let context: any;
-  let api: Api<any>;
-  let table;
-
+test.describe('Fill Handle', () => {
   test.beforeEach(async ({ page }) => {
-    context = await setup({ page, isEmptyProject: true });
-    dashboard = new DashboardPage(page, context.project);
-
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
-
-    table = await createDemoTable({ context, type: 'selectBased', recordCnt: 10 });
-    await page.reload();
-
-    await dashboard.treeView.openTable({ title: 'selectBased' });
+    await beforeEachInit({ page, tableType: 'selectBased' });
   });
 
   test('Select based', async () => {
@@ -204,26 +172,9 @@ test.describe.skip('Bulk update', () => {
   });
 });
 
-test.describe.skip('Bulk update', () => {
-  let context: any;
-  let api: Api<any>;
-  let table;
-
+test.describe.only('Fill Handle', () => {
   test.beforeEach(async ({ page }) => {
-    context = await setup({ page, isEmptyProject: true });
-    dashboard = new DashboardPage(page, context.project);
-
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
-
-    table = await createDemoTable({ context, type: 'miscellaneous', recordCnt: 50 });
-    await page.reload();
-
-    await dashboard.treeView.openTable({ title: 'miscellaneous' });
+    await beforeEachInit({ page, tableType: 'miscellaneous' });
   });
 
   test('Miscellaneous (Checkbox, attachment)', async () => {
@@ -232,6 +183,8 @@ test.describe.skip('Bulk update', () => {
       { title: 'Attachment', value: `${process.cwd()}/fixtures/sampleFiles/1.json`, type: 'attachment' },
     ];
 
+    await dragDrop({ firstColumn: 'Checkbox', lastColumn: 'Attachment' });
+
     // verify data on grid
     for (let i = 0; i < fields.length; i++) {
       if (fields[i].type === 'checkbox') {
@@ -260,31 +213,16 @@ test.describe.skip('Bulk update', () => {
   });
 });
 
-test.describe.skip('Bulk update', () => {
-  let context: any;
-  let api: Api<any>;
-  let table;
-
+test.describe('Fill Handle', () => {
   test.beforeEach(async ({ page }) => {
-    context = await setup({ page, isEmptyProject: true });
-    dashboard = new DashboardPage(page, context.project);
-
-    api = new Api({
-      baseURL: `http://localhost:8080/`,
-      headers: {
-        'xc-auth': context.token,
-      },
-    });
-
-    table = await createDemoTable({ context, type: 'dateTimeBased', recordCnt: 50 });
-    await page.reload();
-
-    await dashboard.treeView.openTable({ title: 'dateTimeBased' });
+    await beforeEachInit({ page, tableType: 'dateTimeBased' });
   });
 
   test('Date Time Based', async () => {
     const fields = [{ title: 'Date', value: '2024-08-04', type: 'date' }];
 
+    await dragDrop({ firstColumn: 'Date', lastColumn: 'Date' });
+
     // verify data on grid
     for (let i = 0; i < fields.length; i++) {
       await dashboard.grid.cell.date.verify({

From 1b88821545143a3479e186e6eb38d96928cbb9b3 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 28 Jun 2023 19:06:42 +0530
Subject: [PATCH 14/24] test: fill handle for date, checkbox, attachments

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../tests/db/verticalFillHandle.spec.ts       | 52 ++++++++++++-------
 1 file changed, 32 insertions(+), 20 deletions(-)

diff --git a/tests/playwright/tests/db/verticalFillHandle.spec.ts b/tests/playwright/tests/db/verticalFillHandle.spec.ts
index 96d135bef1..30aacfb203 100644
--- a/tests/playwright/tests/db/verticalFillHandle.spec.ts
+++ b/tests/playwright/tests/db/verticalFillHandle.spec.ts
@@ -129,7 +129,7 @@ test.describe('Fill Handle', () => {
   });
 });
 
-test.describe('Fill Handle', () => {
+test.describe.skip('Fill Handle', () => {
   test.beforeEach(async ({ page }) => {
     await beforeEachInit({ page, tableType: 'selectBased' });
   });
@@ -172,7 +172,7 @@ test.describe('Fill Handle', () => {
   });
 });
 
-test.describe.only('Fill Handle', () => {
+test.describe('Fill Handle', () => {
   test.beforeEach(async ({ page }) => {
     await beforeEachInit({ page, tableType: 'miscellaneous' });
   });
@@ -183,26 +183,35 @@ test.describe.only('Fill Handle', () => {
       { title: 'Attachment', value: `${process.cwd()}/fixtures/sampleFiles/1.json`, type: 'attachment' },
     ];
 
+    await dashboard.grid.cell.checkbox.click({ index: 0, columnHeader: 'Checkbox' });
+    const filepath = [`${process.cwd()}/fixtures/sampleFiles/1.json`];
+    await dashboard.grid.cell.attachment.addFile({
+      index: 0,
+      columnHeader: 'Attachment',
+      filePath: filepath,
+    });
     await dragDrop({ firstColumn: 'Checkbox', lastColumn: 'Attachment' });
 
     // verify data on grid
     for (let i = 0; i < fields.length; i++) {
-      if (fields[i].type === 'checkbox') {
-        await dashboard.grid.cell.checkbox.verifyChecked({
-          index: 5,
-          columnHeader: fields[i].title,
-        });
-      } else {
-        await dashboard.grid.cell.attachment.verifyFileCount({
-          index: 5,
-          columnHeader: fields[i].title,
-          count: 1,
-        });
+      for (let j = 0; j < 4; j++) {
+        if (fields[i].type === 'checkbox') {
+          await dashboard.grid.cell.checkbox.verifyChecked({
+            index: j,
+            columnHeader: fields[i].title,
+          });
+        } else {
+          await dashboard.grid.cell.attachment.verifyFileCount({
+            index: j,
+            columnHeader: fields[i].title,
+            count: 1,
+          });
+        }
       }
     }
 
     // verify api response
-    const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 50 })).list;
+    const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 4 })).list;
     for (let i = 0; i < updatedRecords.length; i++) {
       for (let j = 0; j < fields.length; j++) {
         expect(+updatedRecords[i]['Checkbox']).toBe(1);
@@ -219,17 +228,20 @@ test.describe('Fill Handle', () => {
   });
 
   test('Date Time Based', async () => {
-    const fields = [{ title: 'Date', value: '2024-08-04', type: 'date' }];
+    const row0_date = await api.dbTableRow.read('noco', context.project.id, table.id, 1);
+    const fields = [{ title: 'Date', value: row0_date['Date'], type: 'date' }];
 
     await dragDrop({ firstColumn: 'Date', lastColumn: 'Date' });
 
     // verify data on grid
     for (let i = 0; i < fields.length; i++) {
-      await dashboard.grid.cell.date.verify({
-        index: 5,
-        columnHeader: fields[i].title,
-        date: fields[i].value,
-      });
+      for (let j = 0; j < 4; j++) {
+        await dashboard.grid.cell.date.verify({
+          index: j,
+          columnHeader: fields[i].title,
+          date: fields[i].value,
+        });
+      }
     }
 
     // verify api response

From b1b47ea3a4646ca63210271c55af016d826533a3 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 28 Jun 2023 21:02:00 +0530
Subject: [PATCH 15/24] test: dateBased fill handle

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 tests/playwright/tests/db/verticalFillHandle.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/playwright/tests/db/verticalFillHandle.spec.ts b/tests/playwright/tests/db/verticalFillHandle.spec.ts
index 30aacfb203..95eef14543 100644
--- a/tests/playwright/tests/db/verticalFillHandle.spec.ts
+++ b/tests/playwright/tests/db/verticalFillHandle.spec.ts
@@ -245,7 +245,7 @@ test.describe('Fill Handle', () => {
     }
 
     // verify api response
-    const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 50 })).list;
+    const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 4 })).list;
     for (let i = 0; i < updatedRecords.length; i++) {
       for (let j = 0; j < fields.length; j++) {
         expect(updatedRecords[i]['Date']).toBe(fields[j].value);

From cde228ffdb4751f81e97f31b79fd31a81384bc33 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 28 Jun 2023 21:11:53 +0530
Subject: [PATCH 16/24] test: select based fill handle

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../pages/Dashboard/common/Cell/SelectOptionCell.ts           | 4 +++-
 tests/playwright/tests/db/verticalFillHandle.spec.ts          | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
index f4dc982ed1..d564a2d70e 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/SelectOptionCell.ts
@@ -115,7 +115,9 @@ export class SelectOptionCellPageObject extends BasePage {
     const selectCell = this.get({ index, columnHeader });
 
     // check if cell active
-    if (!(await selectCell.getAttribute('class')).includes('active')) {
+    // drag based non-primary cell will have 'active' attribute
+    // primary cell with blue border will have 'active-cell' attribute
+    if (!(await selectCell.getAttribute('class')).includes('active-cell')) {
       await selectCell.click();
     }
 
diff --git a/tests/playwright/tests/db/verticalFillHandle.spec.ts b/tests/playwright/tests/db/verticalFillHandle.spec.ts
index 95eef14543..6109cb6660 100644
--- a/tests/playwright/tests/db/verticalFillHandle.spec.ts
+++ b/tests/playwright/tests/db/verticalFillHandle.spec.ts
@@ -129,7 +129,7 @@ test.describe('Fill Handle', () => {
   });
 });
 
-test.describe.skip('Fill Handle', () => {
+test.describe('Fill Handle', () => {
   test.beforeEach(async ({ page }) => {
     await beforeEachInit({ page, tableType: 'selectBased' });
   });

From 8a2a3846e408f4265dbb59101dbd8e71a7811f1b Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 29 Jun 2023 10:16:02 +0300
Subject: [PATCH 17/24] fix: clear selection if row deleted is included

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/components/smartsheet/Grid.vue     |  9 +++++++++
 .../composables/useMultiSelect/cellRange.ts   | 18 +++++++++++++++++
 .../composables/useMultiSelect/index.ts       | 20 +++----------------
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Grid.vue b/packages/nc-gui/components/smartsheet/Grid.vue
index 82c8cd8c00..5dab01c4f1 100644
--- a/packages/nc-gui/components/smartsheet/Grid.vue
+++ b/packages/nc-gui/components/smartsheet/Grid.vue
@@ -879,6 +879,15 @@ const closeAddColumnDropdown = (scrollToLastCol = false) => {
 const confirmDeleteRow = (row: number) => {
   try {
     deleteRow(row)
+
+    if (selectedRange.isRowInRange(row)) {
+      clearSelectedRange()
+    }
+
+    if (activeCell.row === row) {
+      activeCell.row = null
+      activeCell.col = null
+    }
   } catch (e: any) {
     message.error(e.message)
   }
diff --git a/packages/nc-gui/composables/useMultiSelect/cellRange.ts b/packages/nc-gui/composables/useMultiSelect/cellRange.ts
index b56e415df4..4d7b060fc5 100644
--- a/packages/nc-gui/composables/useMultiSelect/cellRange.ts
+++ b/packages/nc-gui/composables/useMultiSelect/cellRange.ts
@@ -24,6 +24,24 @@ export class CellRange {
     return !this.isEmpty() && this._start?.row === this._end?.row
   }
 
+  isCellInRange(cell: Cell) {
+    return (
+      !this.isEmpty() &&
+      cell.row >= this.start.row &&
+      cell.row <= this.end.row &&
+      cell.col >= this.start.col &&
+      cell.col <= this.end.col
+    )
+  }
+
+  isRowInRange(row: number) {
+    return !this.isEmpty() && row >= this.start.row && row <= this.end.row
+  }
+
+  isColInRange(col: number) {
+    return !this.isEmpty() && col >= this.start.col && col <= this.end.col
+  }
+
   get start(): Cell {
     return {
       row: Math.min(this._start?.row ?? NaN, this._end?.row ?? NaN),
diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 942396cc98..08ae5a1869 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -232,16 +232,7 @@ export function useMultiSelect(
       return true
     }
 
-    if (selectedRange._start === null || selectedRange._end === null) {
-      return false
-    }
-
-    return (
-      col >= selectedRange.start.col &&
-      col <= selectedRange.end.col &&
-      row >= selectedRange.start.row &&
-      row <= selectedRange.end.row
-    )
+    return selectedRange.isCellInRange({ row, col })
   }
 
   function isCellInFillRange(row: number, col: number) {
@@ -249,16 +240,11 @@ export function useMultiSelect(
       return false
     }
 
-    if (
-      col >= selectedRange.start.col &&
-      col <= selectedRange.end.col &&
-      row >= selectedRange.start.row &&
-      row <= selectedRange.end.row
-    ) {
+    if (selectedRange.isCellInRange({ row, col })) {
       return false
     }
 
-    return col >= fillRange.start.col && col <= fillRange.end.col && row >= fillRange.start.row && row <= fillRange.end.row
+    return fillRange.isCellInRange({ row, col })
   }
 
   const isPasteable = (row?: Row, col?: ColumnType, showInfo = false) => {

From e127dfbfd2b050931e5fba9b480f47317272a067 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 29 Jun 2023 11:23:11 +0300
Subject: [PATCH 18/24] fix: time copy issue

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/composables/useMultiSelect/index.ts | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 08ae5a1869..9f356a491a 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -144,6 +144,12 @@ export function useMultiSelect(
         d = dayjs(textToCopy, isMySQL ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ')
       }
 
+      // we check time validity before formatting because ['HH:mm', 'HH:mm:ss'] are not valid dayjs formats
+      if (columnObj.uidt === UITypes.Time && !dayjs(textToCopy).isValid()) {
+        // return empty string for invalid time
+        return ''
+      }
+
       // users can change the datetime format in UI
       // `textToCopy` would be always in YYYY-MM-DD HH:mm:ss(Z / +xx:yy) format
       // therefore, here we reformat to the correct datetime format based on the meta
@@ -151,8 +157,8 @@ export function useMultiSelect(
         columnObj.uidt === UITypes.DateTime ? constructDateTimeFormat(columnObj) : constructTimeFormat(columnObj),
       )
 
-      if (!dayjs(textToCopy).isValid()) {
-        // return empty string for invalid datetime / time
+      if (columnObj.uidt === UITypes.DateTime && !dayjs(textToCopy).isValid()) {
+        // return empty string for invalid datetime
         return ''
       }
     }

From 1bfa60a4dcb388fb1895826eb84da84c01582f1e Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Thu, 29 Jun 2023 14:55:22 +0530
Subject: [PATCH 19/24] test: fix fill handle for time

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 tests/playwright/tests/db/verticalFillHandle.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/tests/playwright/tests/db/verticalFillHandle.spec.ts b/tests/playwright/tests/db/verticalFillHandle.spec.ts
index 6109cb6660..90f57721f9 100644
--- a/tests/playwright/tests/db/verticalFillHandle.spec.ts
+++ b/tests/playwright/tests/db/verticalFillHandle.spec.ts
@@ -86,13 +86,13 @@ test.describe('Fill Handle', () => {
       { title: 'Duration', value: '00:01', type: 'text' },
       { title: 'Rating', value: '3', type: 'rating' },
       { title: 'Year', value: '2023', type: 'year' },
-      // { title: 'Time', value: '10:10', type: 'time' },
+      { title: 'Time', value: '02:02', type: 'time' },
     ];
 
     // set rating for first record
     await dashboard.grid.cell.rating.select({ index: 0, columnHeader: 'Rating', rating: 2 });
 
-    await dragDrop({ firstColumn: 'Number', lastColumn: 'Year' });
+    await dragDrop({ firstColumn: 'Number', lastColumn: 'Time' });
 
     // verify data on grid
     for (let i = 0; i < fields.length; i++) {
@@ -115,7 +115,7 @@ test.describe('Fill Handle', () => {
 
     // verify api response
     // duration in seconds
-    const APIResponse = [33, 33.3, 33.3, 33, 60, 3, 2023, '10:10:00'];
+    const APIResponse = [33, 33.3, 33.3, 33, 60, 3, 2023, '02:02:00'];
     const updatedRecords = (await api.dbTableRow.list('noco', context.project.id, table.id, { limit: 4 })).list;
     for (let i = 0; i < updatedRecords.length; i++) {
       for (let j = 0; j < fields.length; j++) {

From 8c1732a0867c70166bbef804e13f0122ce419b38 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 29 Jun 2023 13:38:41 +0300
Subject: [PATCH 20/24] fix: disable edit mode on closing picker

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui/components/cell/DatePicker.vue     | 2 ++
 packages/nc-gui/components/cell/DateTimePicker.vue | 2 ++
 packages/nc-gui/components/cell/TimePicker.vue     | 2 ++
 packages/nc-gui/components/cell/YearPicker.vue     | 2 ++
 4 files changed, 8 insertions(+)

diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 019eb1e586..5cde5ec01f 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -70,6 +70,8 @@ watch(
   (next) => {
     if (next) {
       onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
+    } else {
+      editable.value = false
     }
   },
   { flush: 'post' },
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 82362faa69..397ceda16f 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -122,6 +122,8 @@ watch(
   (next) => {
     if (next) {
       onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
+    } else {
+      editable.value = false
     }
   },
   { flush: 'post' },
diff --git a/packages/nc-gui/components/cell/TimePicker.vue b/packages/nc-gui/components/cell/TimePicker.vue
index 205b2bed6b..3ea3e8b5a2 100644
--- a/packages/nc-gui/components/cell/TimePicker.vue
+++ b/packages/nc-gui/components/cell/TimePicker.vue
@@ -69,6 +69,8 @@ watch(
   (next) => {
     if (next) {
       onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
+    } else {
+      editable.value = false
     }
   },
   { flush: 'post' },
diff --git a/packages/nc-gui/components/cell/YearPicker.vue b/packages/nc-gui/components/cell/YearPicker.vue
index 3d9f795b40..58312273a6 100644
--- a/packages/nc-gui/components/cell/YearPicker.vue
+++ b/packages/nc-gui/components/cell/YearPicker.vue
@@ -55,6 +55,8 @@ watch(
   (next) => {
     if (next) {
       onClickOutside(document.querySelector(`.${randomClass}`)! as HTMLDivElement, () => (open.value = false))
+    } else {
+      editable.value = false
     }
   },
   { flush: 'post' },

From 081cde520b42c9331c2f1c59990661969b65ff01 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Thu, 29 Jun 2023 15:41:15 +0300
Subject: [PATCH 21/24] fix: copy time for mysql and pg

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../composables/useMultiSelect/index.ts       | 35 ++++++++++++-------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index 9f356a491a..b74d7ceede 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -60,7 +60,7 @@ export function useMultiSelect(
 
   const { appInfo } = useGlobal()
 
-  const { isMysql } = useProject()
+  const { isMysql, isPg } = useProject()
 
   const editEnabled = ref(_editEnabled)
 
@@ -128,7 +128,7 @@ export function useMultiSelect(
       })
     }
 
-    if (columnObj.uidt === UITypes.DateTime || columnObj.uidt === UITypes.Time) {
+    if (columnObj.uidt === UITypes.DateTime) {
       // remove `"`
       // e.g. "2023-05-12T08:03:53.000Z" -> 2023-05-12T08:03:53.000Z
       textToCopy = textToCopy.replace(/["']/g, '')
@@ -144,25 +144,36 @@ export function useMultiSelect(
         d = dayjs(textToCopy, isMySQL ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ')
       }
 
-      // we check time validity before formatting because ['HH:mm', 'HH:mm:ss'] are not valid dayjs formats
-      if (columnObj.uidt === UITypes.Time && !dayjs(textToCopy).isValid()) {
-        // return empty string for invalid time
-        return ''
-      }
-
       // users can change the datetime format in UI
       // `textToCopy` would be always in YYYY-MM-DD HH:mm:ss(Z / +xx:yy) format
       // therefore, here we reformat to the correct datetime format based on the meta
-      textToCopy = d.format(
-        columnObj.uidt === UITypes.DateTime ? constructDateTimeFormat(columnObj) : constructTimeFormat(columnObj),
-      )
+      textToCopy = d.format(constructDateTimeFormat(columnObj))
 
-      if (columnObj.uidt === UITypes.DateTime && !dayjs(textToCopy).isValid()) {
+      if (!dayjs(textToCopy).isValid()) {
         // return empty string for invalid datetime
         return ''
       }
     }
 
+    if (columnObj.uidt === UITypes.Time) {
+      // remove `"`
+      // e.g. "2023-05-12T08:03:53.000Z" -> 2023-05-12T08:03:53.000Z
+      textToCopy = textToCopy.replace(/["']/g, '')
+
+      const isMySQL = isMysql(columnObj.base_id)
+      const isPostgres = isPg(columnObj.base_id)
+
+      // MySQL and Postgres store time in HH:mm:ss format so we need to feed custom parse format
+      const d = isMySQL || isPostgres ? dayjs(textToCopy, 'HH:mm:ss') : dayjs(textToCopy)
+
+      if (!d.isValid()) {
+        // return empty string for invalid time
+        return ''
+      }
+
+      textToCopy = d.format(constructTimeFormat(columnObj))
+    }
+
     if (columnObj.uidt === UITypes.LongText) {
       textToCopy = `"${textToCopy.replace(/\"/g, '""')}"`
     }

From a069474200b02c7d480c5059f6d945b815d5ab79 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 30 Jun 2023 10:53:55 +0300
Subject: [PATCH 22/24] fix: copy time after paste

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui/composables/useMultiSelect/index.ts    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useMultiSelect/index.ts b/packages/nc-gui/composables/useMultiSelect/index.ts
index b74d7ceede..39a717737c 100644
--- a/packages/nc-gui/composables/useMultiSelect/index.ts
+++ b/packages/nc-gui/composables/useMultiSelect/index.ts
@@ -163,8 +163,19 @@ export function useMultiSelect(
       const isMySQL = isMysql(columnObj.base_id)
       const isPostgres = isPg(columnObj.base_id)
 
-      // MySQL and Postgres store time in HH:mm:ss format so we need to feed custom parse format
-      const d = isMySQL || isPostgres ? dayjs(textToCopy, 'HH:mm:ss') : dayjs(textToCopy)
+      let d = dayjs(textToCopy)
+
+      if (!d.isValid()) {
+        // insert a datetime value, copy the value without refreshing
+        // e.g. textToCopy = 2023-05-12T03:49:25.000Z
+        // feed custom parse format
+        d = dayjs(textToCopy, isMySQL ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ')
+      }
+
+      if (!d.isValid()) {
+        // MySQL and Postgres store time in HH:mm:ss format so we need to feed custom parse format
+        d = isMySQL || isPostgres ? dayjs(textToCopy, 'HH:mm:ss') : dayjs(textToCopy)
+      }
 
       if (!d.isValid()) {
         // return empty string for invalid time

From 8f55a6c6579445381883118b1747f6afc8915ee9 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 30 Jun 2023 11:57:58 +0300
Subject: [PATCH 23/24] test: fix mysql time data

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 tests/playwright/setup/xcdb-records.ts | 41 ++++++++++++++++++--------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/tests/playwright/setup/xcdb-records.ts b/tests/playwright/setup/xcdb-records.ts
index 75df0bb2fa..279592ac79 100644
--- a/tests/playwright/setup/xcdb-records.ts
+++ b/tests/playwright/setup/xcdb-records.ts
@@ -48,19 +48,34 @@ const rowMixedValue = (column: ColumnType, index: number, db?: string) => {
   const numbers = [33, null, 456, 333, 267, 34, 8754, 3234, 44, 33, null];
   const decimals = [33.3, 456.34, 333.3, null, 267.5674, 34.0, 8754.0, 3234.547, 44.2647, 33.98, null];
   const duration = [60, 120, 180, 3600, 3660, 3720, null, 3780, 60, 120, null];
-  const time = [
-    `1999-01-01 02:02:00${timezoneOffset}`,
-    `1999-01-01 20:20:20${timezoneOffset}`,
-    `1999-01-01 04:04:00${timezoneOffset}`,
-    `1999-01-01 02:02:00${timezoneOffset}`,
-    `1999-01-01 20:20:20${timezoneOffset}`,
-    `1999-01-01 18:18:18${timezoneOffset}`,
-    null,
-    `1999-01-01 02:02:00${timezoneOffset}`,
-    `1999-01-01 20:20:20${timezoneOffset}`,
-    `1999-01-01 18:18:18${timezoneOffset}`,
-    null,
-  ];
+  const time =
+    db === 'mysql'
+      ? [
+          `02:02:00`,
+          `20:20:20`,
+          `04:04:00`,
+          `02:02:00`,
+          `20:20:20`,
+          `18:18:18`,
+          null,
+          `02:02:00`,
+          `20:20:20`,
+          `18:18:18`,
+          null,
+        ]
+      : [
+          `1999-01-01 02:02:00${timezoneOffset}`,
+          `1999-01-01 20:20:20${timezoneOffset}`,
+          `1999-01-01 04:04:00${timezoneOffset}`,
+          `1999-01-01 02:02:00${timezoneOffset}`,
+          `1999-01-01 20:20:20${timezoneOffset}`,
+          `1999-01-01 18:18:18${timezoneOffset}`,
+          null,
+          `1999-01-01 02:02:00${timezoneOffset}`,
+          `1999-01-01 20:20:20${timezoneOffset}`,
+          `1999-01-01 18:18:18${timezoneOffset}`,
+          null,
+        ];
   const rating = [0, 1, 2, 3, null, 0, 4, 5, 0, 1, null];
   const years = [2023, null, 1956, 2023, 1967, 2024, 1954, 1924, 2044, 1923, null];
 

From 7aceae951ed20789c4a960a934954ed326ae48ab Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 30 Jun 2023 16:28:15 +0530
Subject: [PATCH 24/24] test: hardwire time on first cell

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../pages/Dashboard/common/Cell/TimeCell.ts   | 32 +++++++++++++++
 tests/playwright/setup/xcdb-records.ts        | 41 ++++++-------------
 .../tests/db/verticalFillHandle.spec.ts       |  3 ++
 3 files changed, 48 insertions(+), 28 deletions(-)

diff --git a/tests/playwright/pages/Dashboard/common/Cell/TimeCell.ts b/tests/playwright/pages/Dashboard/common/Cell/TimeCell.ts
index 737d7b3d8d..897fd91a67 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/TimeCell.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/TimeCell.ts
@@ -20,4 +20,36 @@ export class TimeCellPageObject extends BasePage {
     await cell.locator(`input[title="${value}"]`).waitFor({ state: 'visible' });
     await expect(cell.locator(`[title="${value}"]`)).toBeVisible();
   }
+
+  async selectTime({
+    // hour: 0 - 23
+    // minute: 0 - 59
+    // second: 0 - 59
+    hour,
+    minute,
+  }: {
+    hour: number;
+    minute: number;
+  }) {
+    const timePanel = await this.rootPage.locator('.ant-picker-time-panel-column');
+    await timePanel.nth(0).locator('.ant-picker-time-panel-cell').nth(hour).click();
+    await timePanel.nth(1).locator('.ant-picker-time-panel-cell').nth(minute).click();
+    if (hour < 12) {
+      await timePanel.nth(2).locator('.ant-picker-time-panel-cell').nth(0).click();
+    } else {
+      await timePanel.nth(2).locator('.ant-picker-time-panel-cell').nth(1).click();
+    }
+  }
+
+  async save() {
+    await this.rootPage.locator('button:has-text("Ok"):visible').click();
+  }
+
+  async set({ index, columnHeader, value }: { index: number; columnHeader: string; value: string }) {
+    const [hour, minute, _second] = value.split(':');
+    await this.get({ index, columnHeader }).click();
+    await this.get({ index, columnHeader }).click();
+    await this.selectTime({ hour: +hour, minute: +minute });
+    await this.save();
+  }
 }
diff --git a/tests/playwright/setup/xcdb-records.ts b/tests/playwright/setup/xcdb-records.ts
index 279592ac79..75df0bb2fa 100644
--- a/tests/playwright/setup/xcdb-records.ts
+++ b/tests/playwright/setup/xcdb-records.ts
@@ -48,34 +48,19 @@ const rowMixedValue = (column: ColumnType, index: number, db?: string) => {
   const numbers = [33, null, 456, 333, 267, 34, 8754, 3234, 44, 33, null];
   const decimals = [33.3, 456.34, 333.3, null, 267.5674, 34.0, 8754.0, 3234.547, 44.2647, 33.98, null];
   const duration = [60, 120, 180, 3600, 3660, 3720, null, 3780, 60, 120, null];
-  const time =
-    db === 'mysql'
-      ? [
-          `02:02:00`,
-          `20:20:20`,
-          `04:04:00`,
-          `02:02:00`,
-          `20:20:20`,
-          `18:18:18`,
-          null,
-          `02:02:00`,
-          `20:20:20`,
-          `18:18:18`,
-          null,
-        ]
-      : [
-          `1999-01-01 02:02:00${timezoneOffset}`,
-          `1999-01-01 20:20:20${timezoneOffset}`,
-          `1999-01-01 04:04:00${timezoneOffset}`,
-          `1999-01-01 02:02:00${timezoneOffset}`,
-          `1999-01-01 20:20:20${timezoneOffset}`,
-          `1999-01-01 18:18:18${timezoneOffset}`,
-          null,
-          `1999-01-01 02:02:00${timezoneOffset}`,
-          `1999-01-01 20:20:20${timezoneOffset}`,
-          `1999-01-01 18:18:18${timezoneOffset}`,
-          null,
-        ];
+  const time = [
+    `1999-01-01 02:02:00${timezoneOffset}`,
+    `1999-01-01 20:20:20${timezoneOffset}`,
+    `1999-01-01 04:04:00${timezoneOffset}`,
+    `1999-01-01 02:02:00${timezoneOffset}`,
+    `1999-01-01 20:20:20${timezoneOffset}`,
+    `1999-01-01 18:18:18${timezoneOffset}`,
+    null,
+    `1999-01-01 02:02:00${timezoneOffset}`,
+    `1999-01-01 20:20:20${timezoneOffset}`,
+    `1999-01-01 18:18:18${timezoneOffset}`,
+    null,
+  ];
   const rating = [0, 1, 2, 3, null, 0, 4, 5, 0, 1, null];
   const years = [2023, null, 1956, 2023, 1967, 2024, 1954, 1924, 2044, 1923, null];
 
diff --git a/tests/playwright/tests/db/verticalFillHandle.spec.ts b/tests/playwright/tests/db/verticalFillHandle.spec.ts
index 90f57721f9..7d62ea3784 100644
--- a/tests/playwright/tests/db/verticalFillHandle.spec.ts
+++ b/tests/playwright/tests/db/verticalFillHandle.spec.ts
@@ -89,6 +89,9 @@ test.describe('Fill Handle', () => {
       { title: 'Time', value: '02:02', type: 'time' },
     ];
 
+    // kludge: insert time from browser until mysql issue with timezone is fixed
+    await dashboard.grid.cell.time.set({ index: 0, columnHeader: 'Time', value: '02:02' });
+
     // set rating for first record
     await dashboard.grid.cell.rating.select({ index: 0, columnHeader: 'Rating', rating: 2 });