feat(nc-gui): enable ranges

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

@@ -217,15 +217,12 @@ async function onSubmit() {
   }
 }
 
-/*
-TODO: Add support for end date and multiple range in future
 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)
 
@@ -453,21 +450,18 @@ 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"
->
-<component :is="iconMap.plus" class="h-4 w-4" />
-{{ $t('activity.addEndDate') }}
-</div>
-<template v-else-if="isEeUI">
-<span>
+              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>
-
-             TODO: Add support for end date and multiple range in future
+              </span>
 
               <div class="flex">
                 <NcSelect
@@ -499,10 +493,9 @@ class="cursor-pointer flex items-center text-gray-800 gap-1"
                 </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> -->
+                </NcButton>
               </div>
-        </template>
-        <!--            <NcButton
+              <NcButton
                 v-if="index !== 0"
                 size="small"
                 type="secondary"
@@ -514,12 +507,14 @@ class="cursor-pointer flex items-center text-gray-800 gap-1"
               >
                 <component :is="iconMap.close" />
               </NcButton>
+            </template>
           </div>
+
           <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
             <component :is="iconMap.plus" />
             Add another date field
           </NcButton>
-                 -->
+        </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">
         <GeneralIcon class="!text-5xl text-orange-500" icon="warning" />

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

@@ -93,9 +93,7 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
   )
 })
 
-// TODO: Add support for end date in future
-// To add new calendar range
-/* 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,
@@ -111,7 +109,7 @@ const removeRange = async (id: number) => {
 const saveCalendarRange = async (range: CalendarRangeType, value?) => {
   range.fk_to_column_id = value
   await saveCalendarRanges()
-} */
+}
 </script>
 
 <template>
@@ -132,7 +130,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
       </a-button>
     </div>
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="w-full p-6 w-[22rem]" data-testid="nc-calendar-range-menu" @click.stop>
+      <div v-if="calendarRangeDropdown" class="w-full p-6 w-[36rem]" data-testid="nc-calendar-range-menu" @click.stop>
         <div
           v-for="(range, id) in _calendar_ranges"
           :key="id"
@@ -167,8 +165,6 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             </a-select-option>
           </NcSelect>
 
-          <!--
-            TODO: Add support for end date and multiple range in future
           <div
             v-if="range.fk_to_column_id === null && isEeUI"
             class="flex cursor-pointer flex text-gray-800 items-center gap-1"
@@ -178,7 +174,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             <component :is="iconMap.plus" class="h-4 w-4" />
             {{ $t('activity.addEndDate') }}
           </div>
-                    <template v-else-if="isEeUI && false">
+          <template v-else-if="isEeUI">
             <span>
               {{ $t('activity.withEndDate') }}
             </span>
@@ -217,19 +213,10 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             <component :is="iconMap.close" />
           </NcButton>
         </div>
-                  <NcButton
-                    v-if="false"
-                    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>
-                  -->
-        </div>
       </div>
     </template>
   </NcDropdown>