From 3ccad671ccfd161824fe64756af62256bb34f6cb Mon Sep 17 00:00:00 2001
From: DarkPhoenix2704 <anbarasun123@gmail.com>
Date: Wed, 20 Nov 2024 17:43:10 +0000
Subject: [PATCH] feat: enable calendar end date

---
 packages/nc-gui/components/dlg/ViewCreate.vue | 124 +++++++++---------
 .../smartsheet/toolbar/Calendar/Range.vue     |   8 +-
 2 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index d34d373bf2..da86e7a463 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -1017,71 +1017,77 @@ const getPluralName = (name: string) => {
                   </div>
                 </a-select-option>
               </NcSelect>
-              <!--            <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"
-            >
-              <component :is="iconMap.plus" class="h-4 w-4" />
-              {{ $t('activity.addEndDate') }}
-            </div>
-            <template v-else-if="isEeUI">
-              <span>
-                {{ $t('activity.withEndDate') }}
-              </span>
-
-              <div class="flex">
-                <NcSelect
-                  v-model:value="range.fk_to_column_id"
-                  :disabled="isMetaLoading"
-                  :loading="isMetaLoading"
-                  :placeholder="$t('placenc-to-seleholder.notSelected')"
-                  class="!rounded-r-none ct"
-                >
-                  <a-select-option
-                    v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
-                      // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
-                      // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
-
-                      const firstRange = viewSelectFieldOptions.find((f) => f.value === form.calendar_range[0].fk_from_column_id)
-                      return firstRange?.uidt === f.uidt
-                    })"
-                    :key="id"
-                    :value="option.value"
+              <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"
+              >
+                <component :is="iconMap.plus" class="h-4 w-4" />
+                {{ $t('activity.addEndDate') }}
+              </div>
+              <template v-else-if="isEeUI">
+                <span>
+                  {{ $t('activity.withEndDate') }}
+                </span>
+
+                <div class="flex">
+                  <NcSelect
+                    v-model:value="range.fk_to_column_id"
+                    :disabled="isMetaLoading"
+                    :loading="isMetaLoading"
+                    :placeholder="$t('placeholder.notSelected')"
+                    class="!rounded-r-none ct"
                   >
-                    <div class="flex items-center">
-                      <SmartsheetHeaderIcon :column="option" />
-                      <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                        <template #title>{{ option.label }}</template>
-                        {{ option.label }}
-                      </NcTooltip>
-                    </div>
-                  </a-select-option>
-                </NcSelect>
-                <NcButton class="!rounded-l-none !border-l-0" size="small" type="secondary" @click="range.fk_to_column_id = null">
-                  <component :is="iconMap.delete" class="h-4 w-4" />
+                    <a-select-option
+                      v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
+                        // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
+                        // If the fk_from_column_id of first range is DateTime, then all the other ranges should be DateTime
+
+                        const firstRange = viewSelectFieldOptions.find(
+                          (f) => f.value === form.calendar_range[0].fk_from_column_id,
+                        )
+                        return firstRange?.uidt === f.uidt
+                      })"
+                      :key="id"
+                      :value="option.value"
+                    >
+                      <div class="flex items-center">
+                        <SmartsheetHeaderIcon :column="option" />
+                        <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
+                          <template #title>{{ option.label }}</template>
+                          {{ option.label }}
+                        </NcTooltip>
+                      </div>
+                    </a-select-option>
+                  </NcSelect>
+                  <NcButton
+                    class="!rounded-l-none !border-l-0"
+                    size="small"
+                    type="secondary"
+                    @click="range.fk_to_column_id = null"
+                  >
+                    <component :is="iconMap.delete" class="h-4 w-4" />
+                  </NcButton>
+                </div>
+                <NcButton
+                  v-if="index !== 0"
+                  size="small"
+                  type="secondary"
+                  @click="
+                    () => {
+                      form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
+                    }
+                  "
+                >
+                  <component :is="iconMap.close" />
                 </NcButton>
-              </div>
-              <NcButton
-                v-if="index !== 0"
-                size="small"
-                type="secondary"
-                @click="
-                  () => {
-                    form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
-                  }
-                "
-              >
-                <component :is="iconMap.close" />
-              </NcButton>
-            </template>
-          </div> -->
+              </template>
+            </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> -->
-            </div>
 
             <div
               v-if="isCalendarReadonly(form.calendar_range)"
diff --git a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
index 9c6f9e979b..36029db49c 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue
@@ -134,12 +134,11 @@ const saveCalendarRanges = async () => {
   }
 }
 
-/*
 const removeRange = async (id: number) => {
   _calendar_ranges.value = _calendar_ranges.value.filter((_, i) => i !== id)
   await saveCalendarRanges()
 }
-
+/*
 const saveCalendarRange = async (range: CalendarRangeType, value?) => {
   range.fk_to_column_id = value
   await saveCalendarRanges()
@@ -177,7 +176,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
     </NcTooltip>
 
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-98 space-y-6 rounded-2xl p-4" data-testid="nc-calendar-range-menu" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-138 space-y-6 rounded-2xl p-6" data-testid="nc-calendar-range-menu" @click.stop>
         <div
           v-for="(range, id) in _calendar_ranges"
           :key="id"
@@ -223,7 +222,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"
@@ -271,7 +270,6 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           <NcButton v-if="id !== 0" size="small" type="secondary" @click="removeRange(id)">
             <component :is="iconMap.close" />
           </NcButton>
-            -->
         </div>
 
         <div v-if="!isSetup" class="flex items-center gap-2 !mt-2">