From fae41dbdad8d883812c47006909a270c00ac17b9 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 5 Mar 2024 10:10:29 +0000
Subject: [PATCH] fix(nc-gui): dblclick interaction

---
 .../nc-gui/components/nc/ErrorBoundary.vue    |  8 +++---
 .../smartsheet/calendar/DayView/DateField.vue | 13 ++++++++++
 .../calendar/DayView/DateTimeField.vue        | 26 ++++++++++++++-----
 .../smartsheet/calendar/MonthView.vue         | 14 ++++++++++
 .../calendar/WeekView/DateField.vue           | 22 +++++++++++++---
 .../calendar/WeekView/DateTimeField.vue       | 14 ++++++++++
 6 files changed, 84 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/nc/ErrorBoundary.vue b/packages/nc-gui/components/nc/ErrorBoundary.vue
index 25b7df4585..cea9237b77 100644
--- a/packages/nc-gui/components/nc/ErrorBoundary.vue
+++ b/packages/nc-gui/components/nc/ErrorBoundary.vue
@@ -29,7 +29,7 @@ export default {
 
     const copyError = async () => {
       try {
-        if (error.value) await copy(`message: ${error.value.message}\n\n${error.value.stack}`)
+        if (error.value) await copy(`message: ${error.value?.message}\n\n${error.value?.stack}`)
         message.info('Error message copied to clipboard.')
       } catch (e) {
         message.error('Something went wrong while copying to clipboard, please copy from browser console.')
@@ -95,9 +95,9 @@ export default {
         >
           <div class="nc-left-vertical-bar"></div>
           <div class="nc-error-content">
-            <span class="font-weight-bold">Message: {{ error.message }}</span>
+            <span class="font-weight-bold">Message: {{ error?.message }}</span>
             <br />
-            <div class="text-gray-500 mt-2">{{ error.stack }}</div>
+            <div class="text-gray-500 mt-2">{{ error?.stack }}</div>
           </div>
         </div>
         <div class="flex justify-end gap-2">
@@ -107,7 +107,7 @@ export default {
               Copy Error
             </div>
           </NcButton>
-          <NcButton v-if="!prevError || error.message !== prevError.message" size="small" @click="reload">
+          <NcButton v-if="!prevError || error?.message !== prevError?.message" size="small" @click="reload">
             <div class="flex items-center gap-1">
               <GeneralIcon icon="reload" />
               Reload
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
index 7d6e5c8864..82fe9a7977 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue
@@ -183,6 +183,17 @@ const dropEvent = (event: DragEvent) => {
     updateRowProperty(newRow, updateProperty, false)
   }
 }
+
+// TODO: Add Support for multiple ranges when multiple ranges are supported
+const newRecord = () => {
+  if (!isUIAllowed('dataEdit') || !calendarRange.value?.length) return
+  const record = {
+    row: {
+      [calendarRange.value[0].fk_from_col!.title!]: selectedDate.value.format('YYYY-MM-DD HH:mm:ssZ'),
+    },
+  }
+  emit('newRecord', record)
+}
 </script>
 
 <template>
@@ -191,6 +202,7 @@ const dropEvent = (event: DragEvent) => {
     ref="container"
     class="w-full relative h-[calc(100vh-10.8rem)] overflow-y-auto nc-scrollbar-md"
     data-testid="nc-calendar-day-view"
+    @dblclick="newRecord"
     @drop="dropEvent"
   >
     <div
@@ -240,6 +252,7 @@ const dropEvent = (event: DragEvent) => {
     ref="container"
     class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center"
     @drop="dropEvent"
+    @dblclick="newRecord"
   >
     No records in this day
   </div>
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 8f1e6c55e3..3af93de23e 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -108,7 +108,7 @@ const recordsAcrossAllRange = computed<{
     if (fromCol && endCol) {
       for (const record of sortedFormattedData) {
         // We use this id during the drag and drop operation and to keep track of the number of records that overlap at a given time
-        const id = generateRandomNumber()
+        const id = record.rowMeta?.id ?? generateRandomNumber()
         let startDate = dayjs(record.row[fromCol.title!])
         let endDate = dayjs(record.row[endCol.title!])
 
@@ -202,7 +202,7 @@ const recordsAcrossAllRange = computed<{
       }
     } else if (fromCol) {
       for (const record of sortedFormattedData) {
-        const id = generateRandomNumber()
+        const id = record.rowMeta?.id ?? generateRandomNumber()
 
         const startDate = dayjs(record.row[fromCol.title!])
 
@@ -611,11 +611,26 @@ const viewMore = (hour: dayjs.Dayjs) => {
   selectedTime.value = hour
   showSideMenu.value = true
 }
+
+const selectHour = (hour: dayjs.Dayjs) => {
+  selectedTime.value = hour
+  dragRecord.value = null
+}
+
+// TODO: Add Support for multiple ranges when multiple ranges are supported
+const newRecord = (hour: dayjs.Dayjs) => {
+  if (!isUIAllowed('dataEdit') || !calendarRange.value?.length) return
+  const record = {
+    row: {
+      [calendarRange.value[0].fk_from_col!.title!]: hour.format('YYYY-MM-DD HH:mm:ssZ'),
+    },
+  }
+  emit('newRecord', record)
+}
 </script>
 
 <template>
   <div
-    v-if="recordsAcrossAllRange.record.length"
     ref="container"
     class="w-full relative no-selection h-[calc(100vh-10rem)] overflow-y-auto nc-scrollbar-md"
     data-testid="nc-calendar-day-view"
@@ -628,7 +643,8 @@ const viewMore = (hour: dayjs.Dayjs) => {
       }"
       class="flex w-full min-h-20 relative border-1 group hover:bg-gray-50 border-white border-b-gray-100"
       data-testid="nc-calendar-day-hour"
-      @click="selectedTime = hour"
+      @click="selectHour(hour)"
+      @dblclick="newRecord(hour)"
     >
       <div class="pt-2 px-4 text-xs text-gray-500 font-semibold h-20">
         {{ dayjs(hour).format('H A') }}
@@ -778,8 +794,6 @@ const viewMore = (hour: dayjs.Dayjs) => {
       </div>
     </div>
   </div>
-
-  <div v-else class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center">No records in this day</div>
 </template>
 
 <style lang="scss" scoped>
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 6c40b29385..f0bd84bb94 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -620,6 +620,19 @@ const isDateSelected = (date: dayjs.Dayjs) => {
   if (!selectedDate.value) return false
   return dayjs(date).isSame(selectedDate.value, 'day')
 }
+
+// TODO: Add Support for multiple ranges when multiple ranges are supported
+const addRecord = (date: dayjs.Dayjs) => {
+  if (!isUIAllowed('dataEdit') || !calendarRange.value) return
+  const fromCol = calendarRange.value[0].fk_from_col
+  if (!fromCol) return
+  const newRecord = {
+    row: {
+      [fromCol.title!]: date.format('YYYY-MM-DD HH:mm:ssZ'),
+    },
+  }
+  emit('newRecord', newRecord)
+}
 </script>
 
 <template>
@@ -655,6 +668,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
           class="text-right relative group last:border-r-0 text-sm h-full border-r-1 border-b-1 border-gray-100 font-medium hover:bg-gray-50 text-gray-800 bg-white"
           data-testid="nc-calendar-month-day"
           @click="selectDate(day)"
+          @dblclick="addRecord(day)"
         >
           <div v-if="isUIAllowed('dataEdit')" class="flex justify-between p-1">
             <span
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index f8f0242b64..d8d26a6639 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -111,7 +111,7 @@ const calendarData = computed(() => {
         return !endDate.isBefore(startDate)
       })) {
         // Generate a unique id for the record if it doesn't have one
-        const id = record.row.id ?? generateRandomNumber()
+        const id = record.rowMeta.id ?? generateRandomNumber()
         let startDate = dayjs(record.row[fromCol.title!])
         const ogStartDate = startDate.clone()
         const endDate = dayjs(record.row[toCol.title!])
@@ -203,7 +203,7 @@ const calendarData = computed(() => {
       }
     } else if (fromCol) {
       for (const record of formattedData.value) {
-        const id = record.row.id ?? generateRandomNumber()
+        const id = record.rowMeta.id ?? generateRandomNumber()
 
         const startDate = dayjs(record.row[fromCol.title!])
         const startDaysDiff = Math.max(startDate.diff(selectedDateRange.value.start, 'day'), 0)
@@ -518,6 +518,19 @@ const selectDate = (day: dayjs.Dayjs) => {
   selectedDate.value = day
   dragRecord.value = undefined
 }
+
+// TODO: Add Support for multiple ranges when multiple ranges are supported
+const addRecord = (date: dayjs.Dayjs) => {
+  if (!isUIAllowed('dataEdit') || !calendarRange.value) return
+  const fromCol = calendarRange.value[0].fk_from_col
+  if (!fromCol) return
+  const newRecord = {
+    row: {
+      [fromCol.title!]: date.format('YYYY-MM-DD HH:mm:ssZ'),
+    },
+  }
+  emits('newRecord', newRecord)
+}
 </script>
 
 <template>
@@ -544,6 +557,7 @@ const selectDate = (day: dayjs.Dayjs) => {
         class="flex flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center w-1/7"
         data-testid="nc-calendar-week-day"
         @click="selectDate(date)"
+        @dblclick="addRecord(date)"
       ></div>
     </div>
     <div
@@ -568,12 +582,14 @@ const selectDate = (day: dayjs.Dayjs) => {
             :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
             :position="record.rowMeta.position"
             :record="record"
-            :selected="dragRecord?.rowMeta?.id === record.rowMeta.id || resizeRecord?.rowMeta.id === record.rowMeta.id"
+            :selected="dragRecord?.rowMeta?.id === record.rowMeta.id"
             :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
             color="blue"
             @dblclick.stop="emits('expand-record', record)"
             @resize-start="onResizeStart"
           >
+            {{ dragRecord?.rowMeta?.id }}
+            {{ record?.rowMeta?.id }}
             <template v-if="!isRowEmpty(record, displayField)">
               <LazySmartsheetCalendarCell
                 v-model="record.row[displayField!.title!]"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index d959339734..2b3b44828a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -721,6 +721,19 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
 
   return { isOverflow, overflowCount }
 }
+
+// TODO: Add Support for multiple ranges when multiple ranges are supported
+const addRecord = (date: dayjs.Dayjs) => {
+  if (!isUIAllowed('dataEdit') || !calendarRange.value) return
+  const fromCol = calendarRange.value[0].fk_from_col
+  if (!fromCol) return
+  const newRecord = {
+    row: {
+      [fromCol.title!]: date.format('YYYY-MM-DD HH:mm:ssZ'),
+    },
+  }
+  emits('newRecord', newRecord)
+}
 </script>
 
 <template>
@@ -761,6 +774,7 @@ const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
           }"
           class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100"
           data-testid="nc-calendar-week-hour"
+          @dblclick="addRecord(hour)"
           @click="
             () => {
               selectedTime = hour