fix(nc-gui): enable multiple range creation

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

@@ -225,6 +225,13 @@ async function onSubmit() {
   }
 }
 
+const addCalendarRange = async () => {
+  form.calendarRange.push({
+    fk_from_column_id: viewSelectFieldOptions.value[0],
+    fk_to_column_id: null,
+  })
+}
+
 const isMetaLoading = ref(false)
 
 onMounted(async () => {
@@ -424,7 +431,7 @@ onMounted(async () => {
           />
         </a-form-item>
         <template v-if="form.type === ViewTypes.CALENDAR">
-          <div v-for="(range, index) in form.calendarRange" :key="`range-${index}`" class="flex w-full items-center gap-2">
+          <div v-for="(range, index) in form.calendarRange" :key="`range-${index}`" class="flex w-full mb-2 items-center gap-2">
             <span>
               {{ $t('labels.organiseBy') }}
             </span>
@@ -474,7 +481,23 @@ onMounted(async () => {
                 </NcButton>
               </div>
             </template>
+            <NcButton
+              v-if="index !== 0"
+              size="small"
+              type="secondary"
+              @click="
+                () => {
+                  form.calendarRange = form.calendarRange.filter((_, i) => i !== index)
+                }
+              "
+            >
+              <component :is="iconMap.close" />
+            </NcButton>
           </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">

packages/nc-gui/components/smartsheet/calendar/index.vue

@@ -57,6 +57,8 @@ const {
 
 const showSideMenu = ref(true)
 
+const calendarRangeDropdown = ref(false)
+
 const router = useRouter()
 const route = useRoute()
 
@@ -152,7 +154,7 @@ const headerText = computed(() => {
             </NcButton>
           </NcTooltip>
 
-          <NcDropdown :auto-close="false">
+          <NcDropdown v-model:visible="calendarRangeDropdown" :auto-close="false" :trigger="['click']">
             <NcButton size="small" type="secondary">
               <div class="flex gap-2 items-center">
                 <span class="font-bold text-center text-brand-500">{{ headerText }}</span>
@@ -161,7 +163,7 @@ const headerText = computed(() => {
             </NcButton>
 
             <template #overlay>
-              <div class="min-w-[22.1rem]">
+              <div v-if="calendarRangeDropdown" class="min-w-[22.1rem]" @click.stop>
                 <NcDateWeekSelector
                   v-if="activeCalendarView === ('day' as const)"
                   v-model:active-dates="activeDates"

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

@@ -79,14 +79,6 @@ const saveCalendarRanges = async () => {
   }
 }
 
-// To add new calendar range
-const addCalendarRange = async () => {
-  _calendar_ranges.value.push({
-    fk_from_column_id: '',
-    fk_to_column_id: undefined,
-  })
-}
-
 const dateFieldOptions = computed<SelectProps['options']>(() => {
   return (
     meta.value?.columns
@@ -98,6 +90,20 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
       })) ?? []
   )
 })
+
+// To add new calendar range
+const addCalendarRange = async () => {
+  _calendar_ranges.value.push({
+    fk_from_column_id: dateFieldOptions.value[0],
+    fk_to_column_id: null,
+  })
+}
+
+const removeRange = async (id: number) => {
+  _calendar_ranges.value = _calendar_ranges.value.filter((_, i) => i !== id)
+
+  await saveCalendarRanges()
+}
 </script>
 
 <template>
@@ -113,8 +119,8 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
       </a-button>
     </div>
     <template #overlay>
-      <div v-if="calendarRangeDropdown" class="flex flex-col w-full p-6 w-[35rem]" @click.stop>
-        <div v-for="(range, id) in _calendar_ranges" :key="id" class="flex w-full gap-2 items-center">
+      <div v-if="calendarRangeDropdown" class="w-full p-6 w-[35rem]" @click.stop>
+        <div v-for="(range, id) in _calendar_ranges" :key="id" class="flex w-full gap-2 mb-2 items-center">
           <span>
             {{ $t('labels.organiseBy') }}
           </span>
@@ -184,7 +190,14 @@ const dateFieldOptions = computed<SelectProps['options']>(() => {
               </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" size="small" type="secondary" @click="addCalendarRange">
+          <component :is="iconMap.plus" />
+          Add another date field
+        </NcButton>
       </div>
     </template>
   </NcDropdown>