fix(nc-gui): disable ranges

packages/nc-gui/components/dlg/ViewCreate.vue

@@ -217,12 +217,14 @@ async function onSubmit() {
   }
 }
 
+/*
 const addCalendarRange = async () => {
   form.calendar_range.push({
     fk_from_column_id: viewSelectFieldOptions.value[0].value as string,
     fk_to_column_id: null,
   })
 }
+*/
 
 const isMetaLoading = ref(false)
 
@@ -450,7 +452,7 @@ onMounted(async () => {
                 </div>
               </a-select-option>
             </NcSelect>
-            <div
+            <!--            <div
               v-if="range.fk_to_column_id === null && isEeUI"
               class="cursor-pointer flex items-center text-gray-800 gap-1"
               @click="range.fk_to_column_id = undefined"
@@ -508,12 +510,13 @@ onMounted(async () => {
                 <component :is="iconMap.close" />
               </NcButton>
             </template>
-          </div>
+          </div> -->
 
-          <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
+            <!--          <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
             <component :is="iconMap.plus" />
             Add another date field
-          </NcButton>
+          </NcButton> -->
+          </div>
         </template>
       </a-form>
       <div v-else-if="!isNecessaryColumnsPresent" class="flex flex-row p-4 border-gray-200 border-1 gap-x-4 rounded-lg w-full">

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

@@ -83,7 +83,7 @@ const calculateNewDates = ({
   return { endDate, startDate }
 }
 
-const getGridTime = (date: dayjs.Dayjs, round = false) => {
+/* const getGridTime = (date: dayjs.Dayjs, round = false) => {
   const gridCalc = date.hour() * 60 + date.minute()
   if (round) {
     return Math.ceil(gridCalc)
@@ -97,9 +97,9 @@ const getGridTimeSlots = (from: dayjs.Dayjs, to: dayjs.Dayjs) => {
     from: getGridTime(from, false),
     to: getGridTime(to, true) - 1,
   }
-}
+} */
 
-const hasSlotForRecord = (
+/* const hasSlotForRecord = (
   record: Row,
   columnArray: Row[],
   dates: {
@@ -132,9 +132,9 @@ const hasSlotForRecord = (
     }
   }
   return true
-}
+} */
 
-const getMaxOfGrid = (
+/* const getMaxOfGrid = (
   {
     fromDate,
     toDate,
@@ -153,8 +153,8 @@ const getMaxOfGrid = (
     }
   }
   return max
-}
-const isOverlaps = (row1: Row, row2: Row) => {
+} */
+/* const isOverlaps = (row1: Row, row2: Row) => {
   const fromCol1 = row1.rowMeta.range?.fk_from_col
   const toCol1 = row1.rowMeta.range?.fk_to_col
   const fromCol2 = row2.rowMeta.range?.fk_from_col
@@ -177,9 +177,9 @@ const isOverlaps = (row1: Row, row2: Row) => {
   })
 
   return startDate1.isBetween(startDate2, endDate2, null, '[]') || endDate1.isBetween(startDate2, endDate2, null, '[]')
-}
+} */
 
-const getMaxOverlaps = ({ row, rowArray }: { row: Row; rowArray: Row[] }) => {
+/* const getMaxOverlaps = ({ row, rowArray }: { row: Row; rowArray: Row[] }) => {
   let maxOverlaps = row.rowMeta.numberOfOverlaps
   for (const record of rowArray) {
     if (isOverlaps(row, record)) {
@@ -190,7 +190,7 @@ const getMaxOverlaps = ({ row, rowArray }: { row: Row; rowArray: Row[] }) => {
     }
   }
   return maxOverlaps
-}
+} */
 
 const recordsAcrossAllRange = computed<{
   record: Row[]
@@ -222,10 +222,10 @@ const recordsAcrossAllRange = computed<{
 
   const perRecordHeight = 80
 
-  const columnArray: Array<Array<Row>> = [[]]
-  const gridTimeMap = new Map()
+  /*  const columnArray: Array<Array<Row>> = [[]]
+  const gridTimeMap = new Map() */
 
-  const recordsByRange: Array<Row> = []
+  let recordsByRange: Array<Row> = []
 
   calendarRange.value.forEach((range) => {
     const fromCol = range.fk_from_col
@@ -254,7 +254,7 @@ const recordsAcrossAllRange = computed<{
       })
 
     for (const record of sortedFormattedData) {
-      const id = generateRandomNumber()
+      const id = record.rowMeta.id ?? generateRandomNumber()
 
       if (fromCol && endCol) {
         const { endDate, startDate } = calculateNewDates({
@@ -399,15 +399,41 @@ const recordsAcrossAllRange = computed<{
       }
     }
   })
-
+  /*
   recordsByRange.sort((a, b) => {
     const fromColA = a.rowMeta.range?.fk_from_col
     const fromColB = b.rowMeta.range?.fk_from_col
     if (!fromColA || !fromColB) return 0
     return dayjs(a.row[fromColA.title!]).isBefore(dayjs(b.row[fromColB.title!])) ? -1 : 1
+  }) */
+
+  // We can't calculate the width & left of the records without knowing the number of records that overlap at a given time
+  // So we loop through the records again and calculate the width & left of the records based on the number of records that overlap at a given time
+  recordsByRange = recordsByRange.map((record) => {
+    // MaxOverlaps is the number of records that overlap at a given time
+    // overlapIndex is the index of the record in the list of records that overlap at a given time
+    let maxOverlaps = 1
+    let overlapIndex = 0
+    for (const minutes in overlaps) {
+      if (overlaps[minutes].id.includes(record.rowMeta.id!)) {
+        maxOverlaps = Math.max(maxOverlaps, overlaps[minutes].id.length - overlaps[minutes].overflowCount)
+        overlapIndex = Math.max(overlaps[minutes].id.indexOf(record.rowMeta.id!), overlapIndex)
+      }
+    }
+    const spacing = 0.25
+    const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps
+    const leftPerRecord = (widthPerRecord + spacing) * overlapIndex
+    record.rowMeta.style = {
+      ...record.rowMeta.style,
+      left: `${leftPerRecord - 0.08}%`,
+      width: `calc(${widthPerRecord}%)`,
+    }
+    return record
   })
 
-  for (const record of recordsByRange) {
+  // TODO: Rewrite the calculations for the style of the records
+
+  /* for (const record of recordsByRange) {
     const fromCol = record.rowMeta.range?.fk_from_col
     const toCol = record.rowMeta.range?.fk_to_col
 
@@ -449,7 +475,6 @@ const recordsAcrossAllRange = computed<{
       columnArray.push([record])
     }
   }
-
  for (const columnIndex in columnArray) {
     for (const record of columnArray[columnIndex]) {
       const recordRange = record.rowMeta.range
@@ -476,7 +501,6 @@ const recordsAcrossAllRange = computed<{
       record.rowMeta.overLapIteration = parseInt(columnIndex) + 1
     }
   }
-
   for (const record of recordsByRange) {
     record.rowMeta.numberOfOverlaps = getMaxOverlaps({
       row: record,
@@ -491,9 +515,7 @@ const recordsAcrossAllRange = computed<{
       width: `${width.toFixed(2)}%`,
       left: `${left}%`,
     }
-  }
-
-  console.log(columnArray)
+  } */
 
   return {
     count: overlaps,

packages/nc-gui/components/smartsheet/toolbar/CalendarRange.vue

@@ -93,7 +93,7 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
   )
 })
 
-const addCalendarRange = async () => {
+/* const addCalendarRange = async () => {
   _calendar_ranges.value.push({
     fk_from_column_id: dateFieldOptions.value![0].value as string,
     fk_to_column_id: null,
@@ -109,7 +109,7 @@ const removeRange = async (id: number) => {
 const saveCalendarRange = async (range: CalendarRangeType, value?) => {
   range.fk_to_column_id = value
   await saveCalendarRanges()
-}
+} */
 </script>
 
 <template>
@@ -130,7 +130,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
       </a-button>
     </div>
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-full p-6 w-[36rem]" data-testid="nc-calendar-range-menu" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-full p-6 w-[25rem]" data-testid="nc-calendar-range-menu" @click.stop>
         <div
           v-for="(range, id) in _calendar_ranges"
           :key="id"
@@ -165,7 +165,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             </a-select-option>
           </NcSelect>
 
-          <div
+          <!--          <div
             v-if="range.fk_to_column_id === null && isEeUI"
             class="flex cursor-pointer flex text-gray-800 items-center gap-1"
             data-testid="nc-calendar-range-add-end-date"
@@ -209,14 +209,16 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
               </NcButton>
             </div>
           </template>
+
           <NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)">
             <component :is="iconMap.close" />
           </NcButton>
+            -->
         </div>
-        <NcButton class="mt-2" data-testid="nc-calendar-range-add-btn" size="small" type="secondary" @click="addCalendarRange">
+        <!--        <NcButton class="mt-2" data-testid="nc-calendar-range-add-btn" size="small" type="secondary" @click="addCalendarRange">
           <component :is="iconMap.plus" />
           Add another date field
-        </NcButton>
+        </NcButton> -->
       </div>
     </template>
   </NcDropdown>