feat(nc-gui): week view date time partial support

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

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import dayjs from 'dayjs'
 import type { Row } from '~/lib'
-import { ref } from '#imports'
+import { computed, ref } from '#imports'
 
 const emits = defineEmits(['expand-record'])
 
-const { selectedDateRange, formattedData, formattedSideBarData, calendarRange, selectedDate, displayField, updateRowProperty } =
+const { selectedDateRange, formattedData, formattedSideBarData, calendarRange, displayField, selectedTime, updateRowProperty } =
   useCalendarViewStoreOrThrow()
 
 const container = ref<null | HTMLElement>(null)
@@ -16,15 +16,29 @@ const { isUIAllowed } = useRoles()
 
 const meta = inject(MetaInj, ref())
 
-const weekDates = computed(() => {
+const datesHours = computed(() => {
+  const datesHours: Array<Array<dayjs.Dayjs>> = []
   const startOfWeek = new Date(selectedDateRange.value.start!)
   const endOfWeek = new Date(selectedDateRange.value.end!)
-  const datesArray = []
+
   while (startOfWeek.getTime() <= endOfWeek.getTime()) {
-    datesArray.push(new Date(startOfWeek))
+    const hours: Array<dayjs.Dayjs> = []
+    for (let i = 0; i < 24; i++) {
+      hours.push(
+        dayjs()
+          .hour(i)
+          .minute(0)
+          .second(0)
+          .millisecond(0)
+          .year(startOfWeek.getFullYear() || dayjs().year())
+          .month(startOfWeek.getMonth() || dayjs().month())
+          .date(startOfWeek.getDate() || dayjs().date()),
+      )
+    }
+    datesHours.push(hours)
     startOfWeek.setDate(startOfWeek.getDate() + 1)
   }
-  return datesArray
+  return datesHours
 })
 
 function getRandomNumbers() {
@@ -55,146 +69,210 @@ const findFirstSuitableColumn = (recordsInDay: any, startDayIndex: number, spanD
   }
 }
 
-const calendarData = computed(() => {
+const recordsAcrossAllRange = computed<{
-  if (!formattedData.value || !calendarRange.value) return []
+  records: Array<Row>
-  const recordsInDay: {
+  count: {
-    [key: number]: {
+    [key: string]: {
-      [key: number]: boolean
+      [key: string]: {
+        overflow: boolean
+        count: number
+        overflowCount: number
+      }
+    }
+  }
+}>(() => {
+  if (!formattedData.value || !calendarRange.value || !container.value) return []
+
+  const { scrollHeight } = container.value
+
+  const perWidth = containerWidth.value / 7
+  const perHeight = scrollHeight / 24
+
+  const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day')
+  const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day')
+
+  const perRecordHeight = 40
+
+  const spaceBetweenRecords = 5
+
+  const recordsInDayHour: {
+    [key: string]: {
+      [key: string]: {
+        overflow: boolean
+        count: number
+        overflowCount: number
       }
-  } = {
-    0: {},
-    1: {},
-    2: {},
-    3: {},
-    4: {},
-    5: {},
-    6: {},
     }
+  } = {}
+
+  if (!calendarRange.value) return []
 
-  const recordsInRange: Array<Row> = []
+  const recordsToDisplay: Array<Row> = []
-  const perDayWidth = containerWidth.value / 7
 
   calendarRange.value.forEach((range) => {
     const fromCol = range.fk_from_col
     const toCol = range.fk_to_col
+
+    const sortedFormattedData = [...formattedData.value].filter((record) => {
+      const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
+
       if (fromCol && toCol) {
-      for (const record of [...formattedData.value].filter((r) => {
+        const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
-        const startDate = dayjs(r.row[fromCol.title!])
+        const toDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null
-        const endDate = dayjs(r.row[toCol.title!])
-        if (!startDate.isValid() || !endDate.isValid()) return false
-        return !endDate.isBefore(startDate)
-      })) {
-        const id = record.row.id ?? getRandomNumbers()
-        let startDate = dayjs(record.row[fromCol.title!])
-        const ogStartDate = startDate.clone()
-        const endDate = dayjs(record.row[toCol.title!])
 
-        if (startDate.isBefore(selectedDateRange.value.start)) {
+        return fromDate && toDate && !toDate.isBefore(fromDate)
-          startDate = dayjs(selectedDateRange.value.start)
+      } else if (fromCol && !toCol) {
+        return !!fromDate
       }
+      return false
+    })
 
-        const startDaysDiff = startDate.diff(selectedDateRange.value.start, 'day')
+    sortedFormattedData.forEach((record: Row) => {
-
+      if (!toCol && fromCol) {
-        let spanDays = Math.max(Math.min(endDate.diff(startDate, 'day'), 6) + 1, 1)
+        const startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
+        const dateKey = startDate?.format('YYYY-MM-DD')
+        const hourKey = startDate?.format('HH:mm')
 
-        if (endDate.isAfter(startDate, 'month')) {
+        if (dateKey && hourKey) {
-          spanDays = 7 - startDaysDiff
+          if (!recordsInDayHour[dateKey]) {
+            recordsInDayHour[dateKey] = {}
           }
-
+          if (!recordsInDayHour[dateKey][hourKey]) {
-        if (startDaysDiff > 0) {
+            recordsInDayHour[dateKey][hourKey] = {
-          spanDays = Math.min(spanDays, 7 - startDaysDiff)
+              overflow: false,
+              count: 0,
+              overflowCount: 0,
+            }
+          }
+          recordsInDayHour[dateKey][hourKey].count++
         }
-        const widthStyle = `calc(max(${spanDays} * ${perDayWidth}px, ${perDayWidth}px))`
 
-        let suitableColumn = -1
+        const id = record.rowMeta.id ?? getRandomNumbers()
-        for (let i = 0; i < spanDays; i++) {
-          const dayIndex = startDaysDiff + i
 
-          if (!recordsInDay[dayIndex]) {
+        const dayIndex = dayjs(dateKey).day() - 1
-            recordsInDay[dayIndex] = {}
+        const hourIndex = datesHours.value[dayIndex].findIndex((h) => h.format('HH:mm') === hourKey)
-          }
 
-          if (suitableColumn === -1) {
+        const style = {
-            suitableColumn = findFirstSuitableColumn(recordsInDay, dayIndex, spanDays)
+          left: `${dayIndex * perWidth}px`,
-          }
+          top: `${hourIndex * perHeight}px`,
         }
 
-        // Mark the suitable column as occupied for the entire span
+        const recordIndex = recordsInDayHour[dateKey][hourKey].count
-        for (let i = 0; i < spanDays; i++) {
+
-          const dayIndex = startDaysDiff + i
+        const top = hourIndex * perHeight + (recordIndex - 1) * (perRecordHeight + spaceBetweenRecords)
-          recordsInDay[dayIndex][suitableColumn] = true
+
-        }
+        const heightRequired = perRecordHeight * recordIndex + spaceBetweenRecords
-
+
-        let position = 'none'
+        if (heightRequired + 20 > perHeight) {
-
+          style.display = 'none'
-        const isStartInRange =
+          recordsInDayHour[dateKey][hourKey].overflow = true
-          ogStartDate && ogStartDate.isBetween(selectedDateRange.value.start, selectedDateRange.value.end, 'day', '[]')
+          recordsInDayHour[dateKey][hourKey].overflowCount++
-        const isEndInRange = endDate && endDate.isBetween(selectedDateRange.value.start, selectedDateRange.value.end, 'day', '[]')
+        } else {
-
+          style.height = `${perRecordHeight}px`
-        if (isStartInRange && isEndInRange) {
+          style.top = `${top}px`
-          position = 'rounded'
+        }
-        } else if (
+        recordsToDisplay.push({
-          startDate &&
-          endDate &&
-          startDate.isBefore(selectedDateRange.value.start) &&
-          endDate.isAfter(selectedDateRange.value.end)
-        ) {
-          position = 'none'
-        } else if (
-          startDate &&
-          endDate &&
-          (startDate.isAfter(selectedDateRange.value.end) || endDate.isBefore(selectedDateRange.value.start))
-        ) {
-          position = 'none'
-        } else if (isStartInRange) {
-          position = 'leftRounded'
-        } else if (isEndInRange) {
-          position = 'rightRounded'
-        }
-
-        recordsInRange.push({
           ...record,
           rowMeta: {
             ...record.rowMeta,
-            range: range as any,
-            position,
             id,
-            style: {
+            style,
-              width: widthStyle,
+            range,
-              left: `${startDaysDiff * perDayWidth}px`,
-              top: `${suitableColumn * 40}px`,
-            },
           },
         })
+      } else if (fromCol && toCol) {
+        const id = record.rowMeta.id ?? getRandomNumbers()
+
+        let startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
+        let endDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null
+
+        if (!startDate?.isValid() || !endDate?.isValid()) return
+        if (startDate.isBefore(scheduleStart, 'minutes')) {
+          startDate = scheduleStart
         }
-    } else if (fromCol) {
+        if (endDate.isAfter(scheduleEnd, 'minutes')) {
-      for (const record of formattedData.value) {
+          endDate = scheduleEnd
-        const id = record.row.id ?? getRandomNumbers()
+        }
+
+        let currentStartDate: dayjs.Dayjs = startDate.clone()
+
+        while (currentStartDate.isSameOrBefore(endDate!, 'day')) {
+          const currentEndDate = currentStartDate.clone().endOf('day')
+          const recordStart = currentEndDate.isSameOrBefore(startDate, 'day') ? startDate : currentStartDate
+          const recordEnd = currentEndDate.isAfter(endDate, 'day') ? endDate : currentEndDate
+
+          const dateKey = recordStart.format('YYYY-MM-DD')
+
+          let hour = recordStart?.clone().startOf('hour')
+
+          while (hour.isSameOrBefore(recordEnd, 'hour')) {
+            const hourKey = hour.format('HH:mm')
+
+            if (!recordsInDayHour[dateKey]) {
+              recordsInDayHour[dateKey] = {}
+            }
+            if (!recordsInDayHour[dateKey][hourKey]) {
+              recordsInDayHour[dateKey][hourKey] = {
+                overflow: false,
+                count: 0,
+                overflowCount: 0,
+              }
+            }
+            recordsInDayHour[dateKey][hourKey].count++
+            hour = hour.add(1, 'hour')
+          }
+
+          const dayIndex = dayjs(dateKey).day() - 1
+
+          let maxRecordCount = 0
+
+          for (let i = 0; i < (datesHours.value[dayIndex] ?? []).length; i++) {
+            const hourKey = datesHours.value[dayIndex][i].format('HH:mm')
+            if (recordsInDayHour[dateKey]?.[hourKey]?.count > maxRecordCount) {
+              maxRecordCount = recordsInDayHour[dateKey][hourKey].count
+            }
+          }
+
+          const startHourIndex = (datesHours.value[dayIndex] ?? []).findIndex(
+            (h) => h.format('HH:mm') === recordStart.format('HH:mm'),
+          )
 
-        const startDate = dayjs(record.row[fromCol.title!])
+          const endHourIndex = (datesHours.value[dayIndex] ?? []).findIndex(
-        const startDaysDiff = Math.max(startDate.diff(selectedDateRange.value.start, 'day'), 0)
+            (h) => h.format('HH:mm') === recordEnd?.startOf('hour').format('HH:mm'),
-        const suitableColumn = findFirstSuitableColumn(recordsInDay, startDaysDiff, 1)
+          )
-        recordsInDay[startDaysDiff][suitableColumn] = true
 
-        recordsInRange.push({
+          const spanHours = endHourIndex - startHourIndex + 1
+
+          console.log(record.row[displayField.value.title], startHourIndex, endHourIndex)
+
+          const style: Partial<CSSStyleDeclaration> = {
+            left: `${dayIndex * perWidth}px`,
+            top: `${startHourIndex * perHeight}px`,
+            height: `${(endHourIndex - startHourIndex + 1) * perHeight - spanHours - 5}px`,
+          }
+
+          recordsToDisplay.push({
             ...record,
             rowMeta: {
               ...record.rowMeta,
-            range: range as any,
               id,
-            position: 'rounded',
+              style,
-            style: {
+              range,
-              width: `calc(${perDayWidth}px)`,
-              left: `${startDaysDiff * perDayWidth}px`,
-              top: `${suitableColumn * 40}px`,
-            },
             },
           })
+
+          currentStartDate = currentStartDate.add(1, 'day')
         }
       }
     })
 
-  return recordsInRange
+    console.log(recordsInDayHour)
+  })
+
+  return {
+    records: recordsToDisplay,
+    count: recordsInDayHour,
+  }
 })
 
 const dragElement = ref<HTMLElement | null>(null)
@@ -480,56 +558,69 @@ const dropEvent = (event: DragEvent) => {
 </script>
 
 <template>
-  <div class="flex relative flex-col prevent-select" @drop="dropEvent">
+  <div class="w-full relative prevent-select" @drop="dropEvent">
-    <div class="flex">
+    <div class="flex absolute w-full top-0">
       <div
-        v-for="date in weekDates"
+        v-for="date in datesHours"
-        :key="date.toISOString()"
+        :key="date[0].toISOString()"
         class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 border-b-1 border-r-1 bg-gray-50"
       >
-        {{ dayjs(date).format('DD ddd') }}
+        {{ dayjs(date[0]).format('DD ddd') }}
       </div>
     </div>
-    <div ref="container" class="flex h-[calc(100vh-11.6rem)]">
+    <div ref="container" class="h-[calc(100vh-11.7rem)] relative flex w-full mt-7.5 overflow-y-auto nc-scrollbar-md">
+      <div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7">
         <div
-        v-for="date in weekDates"
+          v-for="(hour, hourIndex) in date"
-        :key="date.toISOString()"
+          :key="hourIndex"
           :class="{
-          '!border-2 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
+            'border-2 !border-brand-500': hour.isSame(selectedTime, 'hour'),
           }"
-        class="flex flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center w-1/7"
+          class="text-center relative h-56 text-sm text-gray-500 w-full py-1 border-gray-200 border-1 border-r-white border-t-white last:border-r-white bg-gray-50"
-        @click="selectedDate = date"
+          @click="selectedTime = hour.toDate()"
-      ></div>
+        >
+          <span v-if="date[0].day() === selectedDateRange.start?.getDay()" class="absolute left-1">
+            {{ hour.format('h A') }}
+          </span>
+          <div
+            v-if="
+              recordsAcrossAllRange.count?.[dayjs(hour).format('YYYY-MM-DD')]?.[dayjs(hour).format('HH:mm')]?.overflow &&
+              !draggingId
+            "
+            class="text-xs absolute bottom-2 text-center inset-x-0 !z-[90] text-gray-500"
+          >
+            +
+            {{ recordsAcrossAllRange.count[dayjs(hour).format('YYYY-MM-DD')]?.[dayjs(hour).format('HH:mm')]?.overflowCount }}
+            more
+          </div>
         </div>
-    <div class="absolute nc-scrollbar-md overflow-y-auto mt-9 pointer-events-none inset-0">
+      </div>
+
+      <div class="absolute pointer-events-none inset-0 !mt-[20px]">
         <div
-        v-for="(record, id) in calendarData"
+          v-for="(record, rowIndex) in recordsAcrossAllRange.records"
-        :key="id"
+          :key="rowIndex"
-        :data-unique-id="record.rowMeta.id"
+          :data-unique-id="record.rowMeta!.id"
-        :style="{
+          :style="record.rowMeta!.style"
-          ...record.rowMeta.style,
+          class="absolute draggable-record w-1/7 cursor-pointer pointer-events-auto"
-          boxShadow:
-            record.rowMeta.id === draggingId
-              ? '0px 8px 8px -4px rgba(0, 0, 0, 0.04), 0px 20px 24px -4px rgba(0, 0, 0, 0.10)'
-              : 'none',
-        }"
-        class="absolute group draggable-record pointer-events-auto"
           @mousedown="dragStart($event, record)"
+          @dragover.prevent
         >
           <LazySmartsheetRow :row="record">
             <LazySmartsheetCalendarRecordCard
-            :date="dayjs(record.row[record.rowMeta.range!.fk_from_col.title!]).format('DD-MM-YYYY HH:mm')"
+              :date="dayjs(record.row![record.rowMeta!.range!.fk_from_col.title!]).format('HH:mm')"
-            :name="record.row[displayField!.title!]"
+              :name="record.row![displayField!.title!]"
-            :position="record.rowMeta.position"
+              :position="record.rowMeta!.position"
               :record="record"
-            :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
+              :resize="false"
               color="blue"
-            @dblclick="emits('expand-record', record)"
+              size="auto"
             />
           </LazySmartsheetRow>
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -538,8 +629,8 @@ const dropEvent = (event: DragEvent) => {
   transform: translateX(-9999px);
 }
 .prevent-select {
-  -webkit-user-select: none; /* Safari */
+  -webkit-user-select: none;
-  -ms-user-select: none; /* IE 10 and IE 11 */
+  -ms-user-select: none;
-  user-select: none; /* Standard syntax */
+  user-select: none;
 }
 </style>