fix(nocodb): some ui fixes

packages/nc-gui/components/dlg/share-and-collaborate/SharePage.vue

@@ -327,7 +327,8 @@ const isPublicShared = computed(() => {
               (activeView.type === ViewTypes.GRID ||
                 activeView.type === ViewTypes.KANBAN ||
                 activeView.type === ViewTypes.GALLERY ||
-                activeView.type === ViewTypes.MAP)
+                activeView.type === ViewTypes.MAP ||
+                activeView.type === ViewTypes.CALENDAR)
             "
             class="flex flex-row justify-between"
           >

packages/nc-gui/components/smartsheet/calendar/DayView/DateField.vue

@@ -88,6 +88,8 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
 
 const dragElement = ref<HTMLElement | null>(null)
 
+const hoverRecord = ref<string | null>(null)
+
 const dropEvent = (event: DragEvent) => {
   if (!isUIAllowed('dataEdit')) return
   event.preventDefault()
@@ -175,7 +177,14 @@ const dropEvent = (event: DragEvent) => {
     class="w-full relative h-[calc(100vh-10.8rem)] overflow-y-auto nc-scrollbar-md"
     @drop="dropEvent"
   >
-    <div v-for="(record, rowIndex) in recordsAcrossAllRange" :key="rowIndex" :style="record.rowMeta.style" class="absolute mt-2">
+    <div
+      v-for="(record, rowIndex) in recordsAcrossAllRange"
+      :key="rowIndex"
+      :style="record.rowMeta.style"
+      class="absolute mt-2"
+      @mouseleave="hoverRecord = null"
+      @mouseover="hoverRecord = record.rowMeta.id"
+    >
       <LazySmartsheetRow :row="record">
         <LazySmartsheetCalendarRecordCard
           :position="record.rowMeta.position"

packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue

@@ -199,8 +199,8 @@ const recordsAcrossAllRange = computed<{
 
         style = {
           ...style,
-          top: `${finalTopInPixels}px`,
-          height: `${heightInPixels}px`,
+          top: `${finalTopInPixels + 2}px`,
+          height: `${heightInPixels - 2}px`,
         }
 
         recordsByRange.push({
@@ -233,7 +233,7 @@ const recordsAcrossAllRange = computed<{
 
     record.rowMeta.style = {
       ...record.rowMeta.style,
-      left: `${leftPerRecord}%`,
+      left: `${leftPerRecord - 0.08}%`,
       width: `calc(${widthPerRecord}%)`,
     }
     return record
@@ -256,6 +256,8 @@ const resizeRecord = ref<Row | null>()
 
 const dragTimeout = ref<ReturnType<typeof setTimeout>>()
 
+const hoverRecord = ref<string | null>(null)
+
 const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
   updateRowProperty(row, updateProperty, isDelete)
 }, 500)
@@ -683,10 +685,13 @@ const viewMore = (hour: dayjs.Dayjs) => {
           :style="record.rowMeta.style"
           class="absolute draggable-record group cursor-pointer pointer-events-auto"
           @mousedown="dragStart($event, record)"
+          @mouseleave="hoverRecord = null"
+          @mouseover="hoverRecord = record.rowMeta.id"
           @dragover.prevent
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarVRecordCard
+              :hover="hoverRecord === record.rowMeta.id"
               :position="record.rowMeta!.position"
               :record="record"
               :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"

tests/playwright/pages/Dashboard/Calendar/CalendarTopBar.ts

@@ -1,11 +1,9 @@
 import { Locator } from '@playwright/test';
-import BasePage from '../../../Base';
-import { TopbarSharePage } from './Share';
+import BasePage from '../../Base';
 import { CalendarPage } from './index';
 
 export class CalendarTopbarPage extends BasePage {
   readonly parent: CalendarPage;
-  readonly share: TopbarSharePage;
 
   readonly today_btn: Locator;
   readonly prev_btn: Locator;

tests/playwright/pages/Dashboard/common/Toolbar/CalendarRange.ts

@@ -9,19 +9,21 @@ export class ToolbarCalendarRangePage extends BasePage {
     this.toolbar = toolbar;
   }
 
-  async get() {
+  get() {
     return this.rootPage.getByTestId('nc-calendar-range-menu');
   }
 
   async click({ title }: { title: string }) {
-    await (await this.get()).getByTestId('nc-calendar-range-from-field-select').click();
+    await this.get().getByTestId('nc-calendar-range-from-field-select').click();
     await this.rootPage.locator('.ant-select-dropdown:visible').locator(`div[title="${title}"]`).click();
   }
 
-  async newCalendarRange({ fromTitle, toTitle }: { fromTitle: string; toTitle: string }) {
-    await this.get().locator(`.nc-calendar-range-from`).click();
+  async newCalendarRange({ fromTitle, toTitle }: { fromTitle: string; toTitle?: string }) {
+    await this.get().getByTestId(`nc-calendar-range-from-field-selec`).click();
     await this.rootPage.locator('.ant-picker-cell-in-view').locator(`:text("${fromTitle}")`).click();
-    await this.get().locator(`.nc-calendar-range-to`).click();
-    await this.rootPage.locator('.ant-picker-cell-in-view').locator(`:text("${toTitle}")`).click();
+    if (toTitle) {
+      await this.get().getByTestId(`nc-calendar-range-to-field-select`).click();
+      await this.rootPage.locator('.ant-picker-cell-in-view').locator(`:text("${toTitle}")`).click();
+    }
   }
 }

tests/playwright/pages/Dashboard/common/Toolbar/index.ts

@@ -18,9 +18,10 @@ import { MapPage } from '../../Map';
 import { getTextExcludeIconText } from '../../../../tests/utils/general';
 import { ToolbarGroupByPage } from './Groupby';
 import { ToolbarCalendarViewModePage } from './CalendarViewMode';
+import { CalendarPage } from '../../Calendar';
 
 export class ToolbarPage extends BasePage {
-  readonly parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage;
+  readonly parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage | CalendarPage;
   readonly fields: ToolbarFieldsPage;
   readonly sort: ToolbarSortPage;
   readonly filter: ToolbarFilterPage;
@@ -39,7 +40,7 @@ export class ToolbarPage extends BasePage {
   readonly btn_rowHeight: Locator;
   readonly btn_groupBy: Locator;
 
-  constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage) {
+  constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage | CalendarPage) {
     super(parent.rootPage);
     this.parent = parent;
     this.fields = new ToolbarFieldsPage(this);

tests/playwright/pages/Dashboard/common/Topbar/index.ts

@@ -6,16 +6,17 @@ import { KanbanPage } from '../../Kanban';
 import { FormPage } from '../../Form';
 import { MapPage } from '../../Map';
 import { TopbarSharePage } from './Share';
+import { CalendarPage } from '../../Calendar';
 
 export class TopbarPage extends BasePage {
-  readonly parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage;
+  readonly parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage | CalendarPage;
   readonly share: TopbarSharePage;
 
   readonly btn_share: Locator;
   readonly btn_data: Locator;
   readonly btn_details: Locator;
 
-  constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage) {
+  constructor(parent: GridPage | GalleryPage | FormPage | KanbanPage | MapPage | CalendarPage) {
     super(parent.rootPage);
     this.parent = parent;
     this.share = new TopbarSharePage(this);