fix(nc-gui): new week view design

10 months ago · 8dd8c2a2ef
2 changed files with 131 additions and 111 deletions
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@ -474,9 +474,7 @@ const onResizeStart = (direction: 'right' | 'left', _event: MouseEvent, record:
 }

 const onDrag = (event: MouseEvent) => {
-  if (!isUIAllowed('dataEdit')) return
-  if (!container.value || !dragRecord.value) return
-
+  if (!isUIAllowed('dataEdit') || !container.value || !dragRecord.value) return
  const { top, bottom } = container.value.getBoundingClientRect()

  if (event.clientY > bottom - 20) {
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@ -22,6 +22,8 @@ const {

 const container = ref<null | HTMLElement>(null)

+const scrollContainer = ref<null | HTMLElement>(null)
+
 const { width: containerWidth } = useElementSize(container)

 const { isUIAllowed } = useRoles()
@ -68,7 +70,7 @@ const recordsAcrossAllRange = computed<{
 }>(() => {
  if (!formattedData.value || !calendarRange.value || !container.value) return { records: [], count: {} }

-  const { scrollHeight } = container.value
+  const { scrollHeight } = scrollContainer.value

  const perWidth = containerWidth.value / 7
  const perHeight = scrollHeight / 24
@ -164,8 +166,8 @@ const recordsAcrossAllRange = computed<{

        style = {
          ...style,
-          top: `${hourIndex * perHeight}px`,
-          height: `${perHeight / 1.5}px`,
+          top: `${hourIndex * perHeight - hourIndex + 3}px`,
+          height: `${perHeight - 4}px`,
        }

        recordsToDisplay.push({
@ -367,7 +369,7 @@ const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[],
 }, 500)

 const onResize = (event: MouseEvent) => {
-  if (!isUIAllowed('dataEdit') || !container.value || !resizeRecord.value) return
+  if (!isUIAllowed('dataEdit') || !container.value || !resizeRecord.value || !scrollContainer.value) return

  const { width, left, top, bottom } = container.value.getBoundingClientRect()

@ -398,7 +400,7 @@ const onResize = (event: MouseEvent) => {
  const hour = Math.floor(percentY * 23)

  let updateProperty: string[] = []
-  let newRow: Row
+  let newRow: Row = resizeRecord.value

  if (resizeDirection.value === 'right') {
    let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour')
@ -464,7 +466,14 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R

 // We calculate the new row based on the mouse position and update the record
 // We also update the sidebar data if the dropped from the sidebar
-const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean) => {
+const calculateNewRow = (
+  event: MouseEvent,
+  updateSideBar?: boolean,
+): {
+  newRow: Row | null
+  updatedProperty: string[]
+} => {
+  if (!isUIAllowed('dataEdit') || !container.value || !dragRecord.value) return { newRow: null, updatedProperty: [] }
  const { width, left, top } = container.value.getBoundingClientRect()

  const { scrollHeight } = container.value
@ -475,13 +484,15 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean) => {
  const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
  const toCol = dragRecord.value.rowMeta.range?.fk_to_col

-  if (!fromCol) return
+  if (!fromCol) return { newRow: null, updatedProperty: [] }

-  const day = Math.floor(percentX * 7)
-  const hour = Math.floor(percentY * 23)
+  const day = Math.max(0, Math.min(6, Math.floor(percentX * 7)))
+  const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24)))
+
+  console.log('day', day, 'hour', hour)

  const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour')
-  if (!newStartDate) return
+  if (!newStartDate) return { newRow: null, updatedProperty: [] }

  let endDate
  const updatedProperty = [fromCol.title!]
@ -533,15 +544,15 @@ const calculateNewRow = (event: MouseEvent, updateSideBar?: boolean) => {
 }

 const onDrag = (event: MouseEvent) => {
-  if (!isUIAllowed('dataEdit') || !container.value || !dragRecord.value) return
-  const { top, bottom } = container.value.getBoundingClientRect()
+  if (!isUIAllowed('dataEdit') || !scrollContainer.value || !dragRecord.value) return

-  // If the mouse is near the bottom of the container, we scroll down
-  // If the mouse is near the top of the container, we scroll up
-  if (event.clientY > bottom - 20) {
-    container.value.scrollTop += 10
-  } else if (event.clientY < top + 20) {
-    container.value.scrollTop -= 10
+  const containerRect = scrollContainer.value.getBoundingClientRect()
+  const scrollBottomThreshold = 20
+
+  if (event.clientY > containerRect.bottom - scrollBottomThreshold) {
+    scrollContainer.value.scrollTop += 10
+  } else if (event.clientY < containerRect.top + scrollBottomThreshold) {
+    scrollContainer.value.scrollTop -= 10
  }

  calculateNewRow(event)
@ -567,7 +578,9 @@ const stopDrag = (event: MouseEvent) => {
    dragElement.value = null
  }

-  updateRowProperty(newRow, updatedProperty, false)
+  if (newRow) {
+    updateRowProperty(newRow, updatedProperty, false)
+  }

  document.removeEventListener('mousemove', onDrag)
  document.removeEventListener('mouseup', stopDrag)
@ -631,7 +644,9 @@ const dropEvent = (event: DragEvent) => {

    const { newRow, updatedProperty } = calculateNewRow(event, true)

-    updateRowProperty(newRow, updatedProperty, false)
+    if (newRow) {
+      updateRowProperty(newRow, updatedProperty, false)
+    }
  }
 }

@ -644,103 +659,110 @@ const viewMore = (hour: dayjs.Dayjs) => {

 <template>
  <div class="w-full relative prevent-select" data-testid="nc-calendar-week-view" @drop="dropEvent">
-    <div class="flex absolute bg-gray-50 w-full top-0">
-      <div
-        v-for="date in datesHours"
-        :key="date[0].toISOString()"
-        :class="{
-          'text-brand-500': date[0].isSame(dayjs(), 'date'),
-          'last:mr-2.75': getScrollbarWidth() > 0,
-        }"
-        class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-l-1 bg-gray-50"
-      >
-        {{ dayjs(date[0]).format('DD ddd') }}
-      </div>
-    </div>
-    <div ref="container" class="h-[calc(100vh-11.7rem)] relative flex w-full mt-7.1 overflow-y-auto nc-scrollbar-md">
-      <div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7" data-testid="nc-calendar-week-day">
+    <div ref="scrollContainer" class="h-[calc(100vh-9.9rem)] relative flex w-full overflow-y-auto nc-scrollbar-md">
+      <div class="flex sticky h-7.1 z-1 top-0 pl-16 bg-gray-50 w-full top-0">
        <div
-          v-for="(hour, hourIndex) in date"
-          :key="hourIndex"
+          v-for="date in datesHours"
+          :key="date[0].toISOString()"
          :class="{
-            'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'),
-            '!border-l-0': date[0].day() === selectedDateRange.start?.day(),
+            'text-brand-500': date[0].isSame(dayjs(), 'date'),
+            'last:mr-2.75': getScrollbarWidth() > 0,
          }"
-          class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-gray-200 first:border-l-none border-1 border-r-gray-50 border-t-gray-50"
-          data-testid="nc-calendar-week-hour"
-          @click="
-            () => {
-              selectedTime = hour
-              selectedDate = hour
-            }
-          "
+          class="w-1/7 text-center text-sm text-gray-500 z-1 w-full py-1 border-gray-200 last:border-r-0 border-b-1 border-l-1 bg-gray-50"
        >
-          <span v-if="date[0].day() === selectedDateRange.start?.day()" class="absolute text-xs left-1">
-            {{ hour.format('h A') }}
-          </span>
-          <NcButton
-            v-if="recordsAcrossAllRange?.count?.[hour.format('YYYY-MM-DD')]?.[hour.format('HH:mm')]?.overflow"
-            class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-3 text-gray-500"
-            size="xxsmall"
-            type="secondary"
-            @click="viewMore(hour)"
-          >
-            <span class="text-xs">
-              +
-              {{ recordsAcrossAllRange?.count[hour.format('YYYY-MM-DD')][hour.format('HH:mm')]?.overflowCount }}
-              more
-            </span>
-          </NcButton>
+          {{ dayjs(date[0]).format('DD ddd') }}
        </div>
      </div>
-
-      <div class="absolute pointer-events-none inset-0 !mt-[25px]" data-testid="nc-calendar-week-record-container">
+      <div class="absolute bg-white w-16 z-1">
        <div
-          v-for="(record, rowIndex) in recordsAcrossAllRange.records"
-          :key="rowIndex"
-          :data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`"
-          :data-unique-id="record.rowMeta!.id"
-          :style="record.rowMeta!.style"
-          class="absolute draggable-record w-1/7 group cursor-pointer pointer-events-auto"
-          @mousedown="dragStart($event, record)"
-          @mouseleave="hoverRecord = null"
-          @mouseover="hoverRecord = record.rowMeta.id"
-          @dragover.prevent
+          v-for="(hour, index) in datesHours[0]"
+          :key="index"
+          class="h-20 first:mt-0 first:pt-0 pt-7.1 text-center text-sm text-gray-500 py-1"
        >
-          <LazySmartsheetRow :row="record">
-            <LazySmartsheetCalendarVRecordCard
-              :hover="hoverRecord === record.rowMeta.id"
-              :position="record.rowMeta!.position"
-              :record="record"
-              :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
-              color="blue"
-              @resize-start="onResizeStart"
+          {{ hour.format('HH:mm') }}
+        </div>
+      </div>
+      <div ref="container" class="absolute ml-16 flex w-[calc(100%-64px)]">
+        <div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7" data-testid="nc-calendar-week-day">
+          <div
+            v-for="(hour, hourIndex) in date"
+            :key="hourIndex"
+            :class="{
+              'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'),
+            }"
+            class="text-center relative first:mt-7.1 h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-gray-200 first:border-l-none border-1 border-r-gray-50 border-t-gray-50"
+            data-testid="nc-calendar-week-hour"
+            @click="
+              () => {
+                selectedTime = hour
+                selectedDate = hour
+              }
+            "
+          >
+            <NcButton
+              v-if="recordsAcrossAllRange?.count?.[hour.format('YYYY-MM-DD')]?.[hour.format('HH:mm')]?.overflow"
+              class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-3 text-gray-500"
+              size="xxsmall"
+              type="secondary"
+              @click="viewMore(hour)"
            >
-              <template v-if="!isRowEmpty(record, displayField)">
-                <div
-                  :class="{
-                    '!mt-2': displayField.uidt === UITypes.SingleLineText,
-                    '!mt-1': displayField.uidt === UITypes.MultiSelect || displayField.uidt === UITypes.SingleSelect,
-                  }"
-                >
-                  <LazySmartsheetVirtualCell
-                    v-if="isVirtualCol(displayField)"
-                    v-model="record.row[displayField.title]"
-                    :column="displayField"
-                    :row="record"
-                  />
-
-                  <LazySmartsheetCell
-                    v-else
-                    v-model="record.row[displayField.title]"
-                    :column="displayField"
-                    :edit-enabled="false"
-                    :read-only="true"
-                  />
-                </div>
-              </template>
-            </LazySmartsheetCalendarVRecordCard>
-          </LazySmartsheetRow>
+              <span class="text-xs">
+                +
+                {{ recordsAcrossAllRange?.count[hour.format('YYYY-MM-DD')][hour.format('HH:mm')]?.overflowCount }}
+                more
+              </span>
+            </NcButton>
+          </div>
+        </div>
+
+        <div class="absolute pointer-events-none inset-0 !mt-[25px]" data-testid="nc-calendar-week-record-container">
+          <div
+            v-for="(record, rowIndex) in recordsAcrossAllRange.records"
+            :key="rowIndex"
+            :data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`"
+            :data-unique-id="record.rowMeta!.id"
+            :style="record.rowMeta!.style "
+            class="absolute draggable-record w-1/7 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')"
+                color="blue"
+                @resize-start="onResizeStart"
+              >
+                <template v-if="!isRowEmpty(record, displayField)">
+                  <div
+                    :class="{
+                      '!mt-2': displayField!.uidt === UITypes.SingleLineText,
+                      '!mt-1': displayField!.uidt === UITypes.MultiSelect || displayField!.uidt === UITypes.SingleSelect,
+                    }"
+                  >
+                    <LazySmartsheetVirtualCell
+                      v-if="isVirtualCol(displayField!)"
+                      v-model="record.row[displayField!.title!]"
+                      :column="displayField"
+                      :row="record"
+                    />
+
+                    <LazySmartsheetCell
+                      v-else
+                      v-model="record.row[displayField!.title!]"
+                      :column="displayField"
+                      :edit-enabled="false"
+                      :read-only="true"
+                    />
+                  </div>
+                </template>
+              </LazySmartsheetCalendarVRecordCard>
+            </LazySmartsheetRow>
+          </div>
        </div>
      </div>
    </div>