fix(nc-gui): style day records based on range

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

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { UITypes } from 'nocodb-sdk'
+import dayjs from 'dayjs'
 import { type Row, computed, ref } from '#imports'
 
 interface Props {
@@ -22,6 +23,29 @@ const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fie
 
 const { pageDate, selectedDate, calDataType, formattedData, calendarRange } = useCalendarViewStoreOrThrow()
 
+const getRecordPosition = (record: Row) => {
+  if (!calendarRange.value || !calendarRange.value[0]) return ''
+  const startCol = calendarRange.value[0].fk_from_col
+  const endCol = calendarRange.value[0].fk_to_col
+
+  if (!endCol && startCol) {
+    const startDate = dayjs(record.row[startCol.title])
+    return startDate.isSame(selectedDate.value, 'day') ? 'rounded' : ''
+  } else if (endCol && startCol) {
+    const startDate = dayjs(record.row[startCol.title])
+    const endDate = dayjs(record.row[endCol.title])
+    if (startDate.isSame(selectedDate.value, 'day') || endDate.isSame(selectedDate.value, 'day')) {
+      return 'rounded'
+    } else if (startDate.isBefore(selectedDate.value, 'day') && endDate.isAfter(selectedDate.value, 'day')) {
+      return 'none'
+    } else if (startDate.isSame(selectedDate.value, 'day') && endDate.isAfter(selectedDate.value, 'day')) {
+      return 'leftRounded'
+    } else if (startDate.isBefore(selectedDate.value, 'day') && endDate.isSame(selectedDate.value, 'day')) {
+      return 'rightRounded'
+    }
+  }
+}
+
 const hours = computed(() => {
   const hours = []
   for (let i = 0; i < 24; i++) {
@@ -46,13 +70,14 @@ const renderData = computed(() => {
         'h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md': !props.isEmbed,
         'border-r-1 h-full border-gray-200 hover:bg-gray-50 ': props.isEmbed,
       }"
-      class="flex flex-col pt-3 gap-2 h-full w-full px-1"
+      class="flex flex-col pt-3 gap-2 h-full w-full"
     >
       <LazySmartsheetRow v-for="(record, rowIndex) in renderData" :key="rowIndex" :row="record">
         <LazySmartsheetCalendarRecordCard
           :key="rowIndex"
           :date="record.row[calendarRange[0].fk_from_col.title]"
           :name="record.row[displayField.title]"
+          :position="getRecordPosition(record)"
           color="blue"
           size="small"
           @click="emit('expand-record', record)"

packages/nc-gui/components/smartsheet/calendar/RecordCard.vue

@@ -1,10 +1,11 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 interface Props {
   name: string
   date?: string
   color?: string
   size?: 'small' | 'medium' | 'large'
   showDate?: boolean
+  position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none'
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -13,40 +14,54 @@ const props = withDefaults(defineProps<Props>(), {
   color: 'blue',
   size: 'small',
   showDate: true,
+  position: 'rounded',
 })
 </script>
 
 <template>
   <div
     :class="{
-      'bg-maroon-50': props.color === 'maroon',
-      'bg-blue-50': props.color === 'blue',
-      'bg-green-50': props.color === 'green',
-      'bg-yellow-50': props.color === 'yellow',
-      'bg-pink-50': props.color === 'pink',
-      'bg-purple-50': props.color === 'purple',
       'h-12': props.size === 'medium',
       'h-16': props.size === 'large',
       'h-8': props.size === 'small',
+      'pr-2': props.position === 'leftRounded',
+      'pl-2': props.position === 'rightRounded',
+      'px-2': props.position === 'rounded',
     }"
-    class="flex items-center w-full border-1 cursor-pointer border-gray-200 gap-2 items-center px-2 py-3 rounded-lg"
+    class="w-full gap-2"
   >
-    <span
+    <div
       :class="{
-        'bg-maroon-500': props.color === 'maroon',
-        'bg-blue-500': props.color === 'blue',
-        'bg-green-500': props.color === 'green',
-        'bg-yellow-500': props.color === 'yellow',
-        'bg-pink-500': props.color === 'pink',
-        'bg-purple-500': props.color === 'purple',
+        'bg-maroon-50': props.color === 'maroon',
+        'bg-blue-50': props.color === 'blue',
+        'bg-green-50': props.color === 'green',
+        'bg-yellow-50': props.color === 'yellow',
+        'bg-pink-50': props.color === 'pink',
+        'bg-purple-50': props.color === 'purple',
+        'rounded-l-lg': props.position === 'leftRounded',
+        'rounded-r-lg': props.position === 'rightRounded',
+        'rounded-lg': props.position === 'rounded',
+        'rounded-none': props.position === 'none',
       }"
-      class="block h-5 w-1 rounded"
-    ></span>
-    <div class="flex flex-row items-baseline gap-2">
-      <span class="text-sm font-bold text-gray-800">{{ name }}</span>
-      <span v-if="showDate" class="text-xs text-gray-600">{{ date }}</span>
+      class="flex items-center border-1 px-2 cursor-pointer border-gray-200 py-2"
+    >
+      <span
+        :class="{
+          'bg-maroon-500': props.color === 'maroon',
+          'bg-blue-500': props.color === 'blue',
+          'bg-green-500': props.color === 'green',
+          'bg-yellow-500': props.color === 'yellow',
+          'bg-pink-500': props.color === 'pink',
+          'bg-purple-500': props.color === 'purple',
+        }"
+        class="block h-5 w-1 rounded mr-2"
+      ></span>
+      <div class="flex flex-row items-baseline gap-2">
+        <span class="text-sm font-bold text-gray-800">{{ name }}</span>
+        <span v-if="showDate" class="text-xs text-gray-600">{{ date }}</span>
+      </div>
     </div>
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>