From 0884327f437e0cba5cb584a9c33dfe911006d69a Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Tue, 12 Mar 2024 12:15:24 +0530
Subject: [PATCH] fix: missing calendar optmzin on oss

---
 .../calendar/DayView/DateTimeField.vue        | 91 +++++++++---------
 .../smartsheet/calendar/MonthView.vue         | 93 ++++++++++---------
 .../calendar/WeekView/DateTimeField.vue       | 91 +++++++++---------
 3 files changed, 139 insertions(+), 136 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index db85b39042..412c3c822a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -969,51 +969,52 @@ const newRecord = (hour: dayjs.Dayjs) => {
     </div>
     <div class="absolute inset-0 pointer-events-none">
       <div class="relative !ml-[60px]" data-testid="nc-calendar-day-record-container">
-        <div
-          v-for="(record, rowIndex) in recordsAcrossAllRange.record"
-          :key="rowIndex"
-          :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
-          :data-unique-id="record.rowMeta.id"
-          :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 as string"
-          @dragover.prevent
-        >
-          <LazySmartsheetRow :row="record">
-            <LazySmartsheetCalendarVRecordCard
-              :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
-              :selected="record.rowMeta.id === dragRecord?.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)">
-                <LazySmartsheetCalendarCell
-                  v-if="!isRowEmpty(record, displayField!)"
-                  v-model="record.row[displayField!.title!]"
-                  :bold="getFieldStyle(displayField!).bold"
-                  :column="displayField!"
-                  :italic="getFieldStyle(displayField!).italic"
-                  :underline="getFieldStyle(displayField!).underline"
-                />
-              </template>
-              <template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
-                <LazySmartsheetCalendarCell
-                  v-if="!isRowEmpty(record, field!)"
-                  v-model="record.row[field!.title!]"
-                  :bold="getFieldStyle(field).bold"
-                  :column="field"
-                  :italic="getFieldStyle(field).italic"
-                  :underline="getFieldStyle(field).underline"
-                />
-              </template>
-            </LazySmartsheetCalendarVRecordCard>
-          </LazySmartsheetRow>
-        </div>
+        <template v-for="(record, rowIndex) in recordsAcrossAllRange.record" :key="rowIndex">
+          <div
+            v-if="record.rowMeta.style?.display !== 'none'"
+            :data-testid="`nc-calendar-day-record-${record.row[displayField!.title!]}`"
+            :data-unique-id="record.rowMeta.id"
+            :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 as string"
+            @dragover.prevent
+          >
+            <LazySmartsheetRow :row="record">
+              <LazySmartsheetCalendarVRecordCard
+                :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
+                :selected="record.rowMeta.id === dragRecord?.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)">
+                  <LazySmartsheetCalendarCell
+                    v-if="!isRowEmpty(record, displayField!)"
+                    v-model="record.row[displayField!.title!]"
+                    :bold="getFieldStyle(displayField!).bold"
+                    :column="displayField!"
+                    :italic="getFieldStyle(displayField!).italic"
+                    :underline="getFieldStyle(displayField!).underline"
+                  />
+                </template>
+                <template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
+                  <LazySmartsheetCalendarCell
+                    v-if="!isRowEmpty(record, field!)"
+                    v-model="record.row[field!.title!]"
+                    :bold="getFieldStyle(field).bold"
+                    :column="field"
+                    :italic="getFieldStyle(field).italic"
+                    :underline="getFieldStyle(field).underline"
+                  />
+                </template>
+              </LazySmartsheetCalendarVRecordCard>
+            </LazySmartsheetRow>
+          </div>
+        </template>
       </div>
     </div>
   </div>
diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
index 020f665540..c95915106a 100644
--- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue
@@ -772,52 +772,53 @@ const addRecord = (date: dayjs.Dayjs) => {
       </div>
     </div>
     <div class="absolute inset-0 pointer-events-none mt-8 pb-7.5" data-testid="nc-calendar-month-record-container">
-      <div
-        v-for="(record, recordIndex) in recordsToDisplay.records"
-        :key="recordIndex"
-        :data-testid="`nc-calendar-month-record-${record.row[displayField!.title!]}`"
-        :data-unique-id="record.rowMeta.id"
-        :style="{
-          ...record.rowMeta.style,
-          zIndex: record.rowMeta.id === draggingId ? 100 : 0,
-        }"
-        class="absolute group draggable-record cursor-pointer pointer-events-auto"
-        @mouseleave="hoverRecord = null"
-        @mouseover="hoverRecord = record.rowMeta.id"
-        @mousedown.stop="dragStart($event, record)"
-      >
-        <LazySmartsheetRow :row="record">
-          <LazySmartsheetCalendarRecordCard
-            :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === draggingId"
-            :position="record.rowMeta.position"
-            :record="record"
-            :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
-            :selected="dragRecord?.rowMeta?.id === record.rowMeta.id || resizeRecord?.rowMeta?.id === record.rowMeta.id"
-            @resize-start="onResizeStart"
-            @dblclick.stop="emit('expandRecord', record)"
-          >
-            <template v-if="!isRowEmpty(record, displayField)">
-              <LazySmartsheetCalendarCell
-                v-model="record.row[displayField!.title!]"
-                :bold="getFieldStyle(displayField).bold"
-                :column="displayField"
-                :italic="getFieldStyle(displayField).italic"
-                :underline="getFieldStyle(displayField).underline"
-              />
-            </template>
-            <template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
-              <LazySmartsheetCalendarCell
-                v-if="!isRowEmpty(record, field!)"
-                v-model="record.row[field!.title!]"
-                :bold="getFieldStyle(field).bold"
-                :column="field"
-                :italic="getFieldStyle(field).italic"
-                :underline="getFieldStyle(field).underline"
-              />
-            </template>
-          </LazySmartsheetCalendarRecordCard>
-        </LazySmartsheetRow>
-      </div>
+      <template v-for="(record, recordIndex) in recordsToDisplay.records" :key="recordIndex">
+        <div
+          v-if="record.rowMeta.style?.display !== 'none'"
+          :data-testid="`nc-calendar-month-record-${record.row[displayField!.title!]}`"
+          :data-unique-id="record.rowMeta.id"
+          :style="{
+            ...record.rowMeta.style,
+            zIndex: record.rowMeta.id === draggingId ? 100 : 0,
+          }"
+          class="absolute group draggable-record cursor-pointer pointer-events-auto"
+          @mouseleave="hoverRecord = null"
+          @mouseover="hoverRecord = record.rowMeta.id"
+          @mousedown.stop="dragStart($event, record)"
+        >
+          <LazySmartsheetRow :row="record">
+            <LazySmartsheetCalendarRecordCard
+              :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === draggingId"
+              :position="record.rowMeta.position"
+              :record="record"
+              :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
+              :selected="dragRecord?.rowMeta?.id === record.rowMeta.id || resizeRecord?.rowMeta?.id === record.rowMeta.id"
+              @resize-start="onResizeStart"
+              @dblclick.stop="emit('expandRecord', record)"
+            >
+              <template v-if="!isRowEmpty(record, displayField)">
+                <LazySmartsheetCalendarCell
+                  v-model="record.row[displayField!.title!]"
+                  :bold="getFieldStyle(displayField).bold"
+                  :column="displayField"
+                  :italic="getFieldStyle(displayField).italic"
+                  :underline="getFieldStyle(displayField).underline"
+                />
+              </template>
+              <template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
+                <LazySmartsheetCalendarCell
+                  v-if="!isRowEmpty(record, field!)"
+                  v-model="record.row[field!.title!]"
+                  :bold="getFieldStyle(field).bold"
+                  :column="field"
+                  :italic="getFieldStyle(field).italic"
+                  :underline="getFieldStyle(field).underline"
+                />
+              </template>
+            </LazySmartsheetCalendarRecordCard>
+          </LazySmartsheetRow>
+        </div>
+      </template>
     </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index ec1bb35475..6b9544bca7 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -805,51 +805,52 @@ const addRecord = (date: dayjs.Dayjs) => {
         class="absolute pointer-events-none inset-0 overflow-hidden !mt-[29px]"
         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.stop="dragStart($event, record)"
-          @mouseleave="hoverRecord = null"
-          @mouseover="hoverRecord = record.rowMeta.id"
-          @dragover.prevent
-        >
-          <LazySmartsheetRow :row="record">
-            <LazySmartsheetCalendarVRecordCard
-              :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
-              :position="record.rowMeta!.position"
-              :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
-              :record="record"
-              color="blue"
-              :selected="record.rowMeta!.id === dragRecord?.rowMeta?.id"
-              @resize-start="onResizeStart"
-            >
-              <template v-if="!isRowEmpty(record, displayField)">
-                <LazySmartsheetCalendarCell
-                  v-if="!isRowEmpty(record, displayField!)"
-                  v-model="record.row[displayField!.title!]"
-                  :bold="getFieldStyle(displayField).bold"
-                  :column="displayField"
-                  :italic="getFieldStyle(displayField).italic"
-                  :underline="getFieldStyle(displayField).underline"
-                />
-              </template>
-              <template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
-                <LazySmartsheetCalendarCell
-                  v-if="!isRowEmpty(record, field!)"
-                  v-model="record.row[field!.title!]"
-                  :bold="getFieldStyle(field).bold"
-                  :column="field"
-                  :italic="getFieldStyle(field).italic"
-                  :underline="getFieldStyle(field).underline"
-                />
-              </template>
-            </LazySmartsheetCalendarVRecordCard>
-          </LazySmartsheetRow>
-        </div>
+        <template v-for="(record, rowIndex) in recordsAcrossAllRange.records" :key="rowIndex">
+          <div
+            v-if="record.rowMeta.style?.display !== 'none'"
+            :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.stop="dragStart($event, record)"
+            @mouseleave="hoverRecord = null"
+            @mouseover="hoverRecord = record.rowMeta.id"
+            @dragover.prevent
+          >
+            <LazySmartsheetRow :row="record">
+              <LazySmartsheetCalendarVRecordCard
+                :hover="hoverRecord === record.rowMeta.id || record.rowMeta.id === dragRecord?.rowMeta?.id"
+                :position="record.rowMeta!.position"
+                :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
+                :record="record"
+                color="blue"
+                :selected="record.rowMeta!.id === dragRecord?.rowMeta?.id"
+                @resize-start="onResizeStart"
+              >
+                <template v-if="!isRowEmpty(record, displayField)">
+                  <LazySmartsheetCalendarCell
+                    v-if="!isRowEmpty(record, displayField!)"
+                    v-model="record.row[displayField!.title!]"
+                    :bold="getFieldStyle(displayField).bold"
+                    :column="displayField"
+                    :italic="getFieldStyle(displayField).italic"
+                    :underline="getFieldStyle(displayField).underline"
+                  />
+                </template>
+                <template v-for="(field, id) in fieldsWithoutDisplay" :key="id">
+                  <LazySmartsheetCalendarCell
+                    v-if="!isRowEmpty(record, field!)"
+                    v-model="record.row[field!.title!]"
+                    :bold="getFieldStyle(field).bold"
+                    :column="field"
+                    :italic="getFieldStyle(field).italic"
+                    :underline="getFieldStyle(field).underline"
+                  />
+                </template>
+              </LazySmartsheetCalendarVRecordCard>
+            </LazySmartsheetRow>
+          </div>
+        </template>
       </div>
     </div>
   </div>