From d70abe749b37a14a86672b49bd790f9303993bd6 Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 20 Feb 2024 07:16:07 +0000
Subject: [PATCH] fix(nc-gui): bug fixes

---
 .../smartsheet/calendar/DayView.vue           |  1 +
 .../smartsheet/calendar/MonthView.vue         | 25 ++++++++++++++-----
 .../smartsheet/calendar/RecordCard.vue        | 10 ++++----
 .../smartsheet/calendar/SideMenu.vue          |  4 +--
 .../smartsheet/calendar/WeekView.vue          |  2 +-
 .../components/smartsheet/calendar/index.vue  |  1 +
 .../composables/useCalendarViewStore.ts       | 11 +++++++-
 7 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView.vue b/packages/nc-gui/components/smartsheet/calendar/DayView.vue
index 2690964dc6..3295ef0574 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView.vue
@@ -269,6 +269,7 @@ const dropEvent = (event: DragEvent) => {
           :name="record.row[displayField.title]"
           :position="record.rowMeta.position"
           :record="record"
+          :resize="false"
           color="blue"
           size="small"
           @click="emit('expand-record', record)"
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index ecaecaae6b..4bb6f45df5 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -245,7 +245,7 @@ const recordsToDisplay = computed<{
             position = 'none'
           }
 
-          if (heightRequired > perHeight) {
+          if (heightRequired + 15 > perHeight) {
             style.display = 'none'
             for (let i = startDayIndex; i <= endDayIndex; i++) {
               const week = dates.value[weekIndex]
@@ -289,6 +289,10 @@ const resizeInProgress = ref(false)
 const isDragging = ref(false)
 const dragRecord = ref<Row>()
 
+const selectedRecord = ref<Row>()
+
+const dragTimeout = ref(null)
+
 const onDrag = (event: MouseEvent) => {
   const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect()
 
@@ -564,6 +568,14 @@ const isDateSelected = (date: Date) => {
   if (!selectedDate.value) return false
   return dayjs(date).isSame(selectedDate.value, 'day')
 }
+
+onMounted(() => {
+  document.addEventListener('mouseup', stopDrag)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mouseup', stopDrag)
+})
 </script>
 
 <template>
@@ -572,7 +584,7 @@ const isDateSelected = (date: Date) => {
       <div
         v-for="(day, index) in days"
         :key="index"
-        class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-200 font-semibold text-gray-800"
+        class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-200 font-semibold text-gray-500"
       >
         {{ day }}
       </div>
@@ -593,10 +605,10 @@ const isDateSelected = (date: Date) => {
           v-for="(day, dateIndex) in week"
           :key="`${weekIndex}-${dateIndex}`"
           :class="{
-            'border-brand-500 border-2': isDateSelected(day),
+            'border-brand-500 border-2 border-r-2 border-b-2': isDateSelected(day),
             '!text-gray-400': !isDayInPagedMonth(day),
           }"
-          class="text-right relative group text-sm h-full border-1 bg-white border-gray-200 font-semibold hover:bg-gray-50 text-gray-800"
+          class="text-right relative group text-sm h-full border-r-1 border-b-1 border-gray-200 font-semibold hover:bg-gray-50 text-gray-800 bg-white"
           @click="selectDate(day)"
         >
           <div class="flex justify-between p-1">
@@ -697,7 +709,7 @@ const isDateSelected = (date: Date) => {
               ? '0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.10)'
               : 'none',
         }"
-        class="absolute draggable-record cursor-pointer pointer-events-auto"
+        class="absolute group draggable-record cursor-pointer pointer-events-auto"
         @mousedown.stop="dragStart($event, record)"
       >
         <LazySmartsheetRow :row="record">
@@ -711,7 +723,8 @@ const isDateSelected = (date: Date) => {
             :position="record.rowMeta.position"
             :record="record"
             :resize="!!record.rowMeta.range?.fk_to_col"
-            @click="emit('expand-record', record)"
+            @click="selectedRecord = record"
+            @dblclick="emit('expand-record', record)"
             @resize-start="onResizeStart"
           />
         </LazySmartsheetRow>
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
index 258c62adeb..0390a47f7a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
@@ -59,31 +59,31 @@ const emit = defineEmits(['resize-start'])
     </div>
 
     <div
-      v-if="position === 'leftRounded' || position === 'rounded'"
+      v-if="position === 'leftRounded' || (position === 'rounded' && resize)"
       :class="{
         '!group-hover:(border-brand-500 block border-2 rounded-lg)': resize,
       }"
       class="absolute mt-0.6 h-7.1 hidden -left-3 resize"
     >
-      <NcButton v-if="resize" size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'left', $event, record)">
+      <NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'left', $event, record)">
         <component :is="iconMap.drag" class="text-gray-400"></component>
       </NcButton>
     </div>
 
     <div class="ml-3 mt-2 text-ellipsis overflow-hidden w-full h-6 absolute">
       <span v-if="position === 'rightRounded' || position === 'none'"> .... </span>
-      <span class="text-sm font-bold text-gray-800">{{ name }}</span>
+      <span class="text-sm text-gray-800">{{ name }}</span>
       <span v-if="showDate" class="text-xs ml-1 text-gray-600">{{ date }}</span>
       <span v-if="position === 'leftRounded' || position === 'none'" class="absolute my-0 right-5"> .... </span>
     </div>
     <div
-      v-if="position === 'rightRounded' || position === 'rounded'"
+      v-if="position === 'rightRounded' || (position === 'rounded' && resize)"
       :class="{
         '!group-hover:(border-brand-500 border-2 block rounded-lg)': resize,
       }"
       class="absolute mt-0.6 hidden h-7.1 -right-3 border-1 resize"
     >
-      <NcButton v-if="resize" size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'right', $event, record)">
+      <NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'right', $event, record)">
         <component :is="iconMap.drag" class="text-gray-400"></component>
       </NcButton>
     </div>
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index d52c2af4ee..f233b4fe7c 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -263,8 +263,8 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
     />
 
     <div class="px-4 relative flex flex-col gap-y-6 pt-4">
-      <div class="flex items-center gap-3">
-        <a-input v-model:value="searchQuery.value" class="!rounded-lg !border-gray-200 !px-4 !py-2" placeholder="Search records">
+      <div class="flex items-center gap-2">
+        <a-input v-model:value="searchQuery.value" class="!rounded-lg !h-8 !border-gray-200 !px-4" placeholder="Search records">
           <template #prefix>
             <component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500" />
           </template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView.vue
index 26815538ee..621d3e99ea 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView.vue
@@ -506,7 +506,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
               ? '0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.10)'
               : 'none',
         }"
-        class="absolute draggable-record pointer-events-auto"
+        class="absolute group draggable-record pointer-events-auto"
         @mousedown.stop="dragStart($event, record)"
       >
         <LazySmartsheetRow :row="record">
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index 4d3bf6725a..023ff20e37 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -204,6 +204,7 @@ const headerText = computed(() => {
               () => {
                 selectedDate = new Date()
                 pageDate = new Date()
+                selectedMonth = new Date()
                 selectedDateRange = {
                   start: dayjs(new Date()).startOf('week').toDate(),
                   end: dayjs(new Date()).endOf('week').toDate(),
diff --git a/packages/nc-gui/composables/useCalendarViewStore.ts b/packages/nc-gui/composables/useCalendarViewStore.ts
index 1cc1d5cf1d..8f388d54d6 100644
--- a/packages/nc-gui/composables/useCalendarViewStore.ts
+++ b/packages/nc-gui/composables/useCalendarViewStore.ts
@@ -529,7 +529,16 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     async function updateCalendarMeta(updateObj: Partial<CalendarType>) {
       if (!viewMeta?.value?.id || !isUIAllowed('dataEdit')) return
-      await $api.dbView.calendarUpdate(viewMeta.value.id, updateObj)
+      try {
+        await $api.dbView.calendarUpdate(viewMeta.value.id, updateObj)
+        calendarMetaData.value = {
+          ...calendarMetaData.value,
+          ...updateObj,
+        }
+      } catch (e) {
+        message.error('Error updating changes')
+        console.log(e)
+      }
     }
 
     const paginateCalendarView = async (action: 'next' | 'prev') => {