fix: ui fixes feat: move to engineering beta toggle feature

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

@@ -323,6 +323,8 @@ const addCalendarRange = async () => {
 }
 */
 
+const isRangeEnabled = computed(() => isFeatureEnabled(FEATURE_FLAG.CALENDAR_VIEW_RANGE))
+
 const enableDescription = ref(false)
 
 const removeDescription = () => {
@@ -977,116 +979,126 @@ const getPluralName = (name: string) => {
             />
           </a-form-item>
           <template v-if="form.type === ViewTypes.CALENDAR && !form.copy_from_id">
-            <div v-for="(range, index) in form.calendar_range" :key="`range-${index}`" class="flex flex-col w-full gap-2">
+            <div
-              <div class="text-gray-800">
+              v-for="(range, index) in form.calendar_range"
-                {{ $t('labels.organiseBy') }}
+              :key="`range-${index}`"
-              </div>
+              :class="{
-              <NcSelect
+                '!gap-2': range.fk_to_column_id === null,
-                v-model:value="range.fk_from_column_id"
+              }"
-                :disabled="isMetaLoading"
+              class="flex flex-col w-full gap-6"
-                :loading="isMetaLoading"
+            >
-                class="nc-select-shadow nc-from-select"
+              <div class="w-full space-y-2">
-              >
+                <div class="text-gray-800">
-                <a-select-option
+                  {{ $t('labels.organiseBy') }}
-                  v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
+                </div>
+                <NcSelect
+                  v-model:value="range.fk_from_column_id"
+                  :disabled="isMetaLoading"
+                  :loading="isMetaLoading"
+                  class="nc-select-shadow w-full nc-from-select"
+                >
+                  <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
                   if (index === 0) return true
                   const firstRange = viewSelectFieldOptions!.find((f) => f.value === form.calendar_range[0].fk_from_column_id)
                   return firstRange?.uidt === f.uidt
                 })"
-                  :key="id"
+                    :key="id"
-                  class="w-40"
+                    class="w-40"
-                  :value="option.value"
+                    :value="option.value"
-                >
-                  <div class="flex w-full gap-2 justify-between items-center">
-                    <div class="flex gap-2 items-center">
-                      <SmartsheetHeaderIcon :column="option" class="!ml-0" />
-                      <NcTooltip class="truncate flex-1 max-w-18" placement="top" show-on-truncate-only>
-                        <template #title>{{ option.label }}</template>
-                        {{ option.label }}
-                      </NcTooltip>
-                    </div>
-                    <div class="flex-1" />
-                    <component
-                      :is="iconMap.check"
-                      v-if="option.value === range.fk_from_column_id"
-                      id="nc-selected-item-icon"
-                      class="text-primary min-w-4 h-4"
-                    />
-                  </div>
-                </a-select-option>
-              </NcSelect>
-
-              <NcButton
-                v-if="range.fk_to_column_id === null"
-                size="small"
-                class="!border-none w-28"
-                type="secondary"
-                :disabled="!isEeUI"
-                @click="range.fk_to_column_id = undefined"
-              >
-                <component :is="iconMap.plus" class="h-4 w-4" />
-                {{ $t('activity.addEndDate') }}
-              </NcButton>
-
-              <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="nc-to-select flex-1"
                   >
-                    <a-select-option
+                    <div class="flex w-full gap-2 justify-between items-center">
-                      v-for="(option, id) in [...viewSelectFieldOptions].filter((f) => {
+                      <div class="flex gap-2 items-center">
-                        // If the fk_from_column_id of first range is Date, then all the other ranges should be Date
+                        <SmartsheetHeaderIcon :column="option" class="!ml-0" />
-                        // 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 && f.value !== range.fk_from_column_id
-                      })"
-                      :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>
+                      <div class="flex-1" />
-                  </NcSelect>
+                      <component
-                  <NcButton
+                        :is="iconMap.check"
-                    class="!rounded-l-none !border-l-0"
+                        v-if="option.value === range.fk_from_column_id"
-                    size="small"
+                        id="nc-selected-item-icon"
-                    type="secondary"
+                        class="text-primary min-w-4 h-4"
-                    @click="range.fk_to_column_id = null"
+                      />
-                  >
+                    </div>
-                    <component :is="iconMap.delete" class="h-4 w-4" />
+                  </a-select-option>
-                  </NcButton>
+                </NcSelect>
-                </div>
+              </div>
+              <div class="w-full space-y-2">
                 <NcButton
-                  v-if="index !== 0"
+                  v-if="range.fk_to_column_id === null && isRangeEnabled"
                   size="small"
+                  class="!border-none w-28"
                   type="secondary"
-                  @click="
+                  :disabled="!isEeUI"
-                    () => {
+                  @click="range.fk_to_column_id = undefined"
-                      form.calendar_range = form.calendar_range.filter((_, i) => i !== index)
-                    }
-                  "
                 >
-                  <component :is="iconMap.close" />
+                  <component :is="iconMap.plus" class="h-4 w-4" />
+                  {{ $t('activity.endDate') }}
                 </NcButton>
-              </template>
+
+                <template v-else-if="isEeUI && isRangeEnabled">
+                  <span class="text-gray-700">
+                    {{ $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="nc-to-select flex-1"
+                    >
+                      <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 && f.value !== range.fk_from_column_id
+                        })"
+                        :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>
+                </template>
+              </div>
             </div>
 
             <!--          <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">

packages/nc-gui/components/smartsheet/toolbar/Calendar/Range.vue

@@ -22,14 +22,18 @@ const { loadViewColumns } = useViewColumnsOrThrow()
 const { loadCalendarMeta, loadCalendarData, loadSidebarData, fetchActiveDates, updateCalendarMeta, viewMetaProperties } =
   useCalendarViewStoreOrThrow()
 
+const { isFeatureEnabled } = useBetaFeatureToggle()
+
+const isRangeEnabled = computed(() => isFeatureEnabled(FEATURE_FLAG.CALENDAR_VIEW_RANGE))
+
 const calendarRangeDropdown = ref(false)
 
-const hideWeekends = computed({
+const showWeekends = computed({
-  get: () => viewMetaProperties.value?.hide_weekend ?? false,
+  get: () => !viewMetaProperties.value?.hide_weekend,
   set: (newValue) => {
     updateCalendarMeta({
       meta: {
-        hide_weekend: newValue,
+        hide_weekend: !newValue,
       },
     })
   },
@@ -183,7 +187,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           class="flex flex-col w-full gap-2 mb-2"
           data-testid="nc-calendar-range-option"
         >
-          <span>
+          <span class="text-gray-800">
             {{ $t('labels.organiseBy') }}
           </span>
           <NcSelect
@@ -223,7 +227,7 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
           </NcSelect>
 
           <NcButton
-            v-if="range.fk_to_column_id === null"
+            v-if="range.fk_to_column_id === null && isRangeEnabled"
             size="small"
             data-testid="nc-calendar-range-add-end-date"
             class="!border-none w-28"
@@ -231,10 +235,12 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
             :disabled="!isEeUI"
             @click="range.fk_to_column_id = undefined"
           >
-            <component :is="iconMap.plus" class="h-4 w-4" />
+            <div class="flex gap-2 items-center">
-            {{ $t('activity.addEndDate') }}
+              <component :is="iconMap.plus" class="h-4 w-4" />
+              {{ $t('activity.endDate') }}
+            </div>
           </NcButton>
-          <template v-else-if="isEeUI">
+          <template v-else-if="isEeUI && isRangeEnabled">
             <span>
               {{ $t('activity.withEndDate') }}
             </span>
@@ -281,9 +287,9 @@ const saveCalendarRange = async (range: CalendarRangeType, value?) => {
         </div>
 
         <div>
-          <NcSwitch v-model:checked="hideWeekends" :disabled="isLocked">
+          <NcSwitch v-model:checked="showWeekends" :disabled="isLocked">
-            <span class="text-gray-800">
+            <span class="text-gray-800 font-semibold">
-              {{ $t('activity.hideWeekends') }}
+              {{ $t('activity.showSaturdaysAndSundays') }}
             </span>
           </NcSwitch>
         </div>

packages/nc-gui/composables/useBetaFeatureToggle.ts

@@ -43,6 +43,13 @@ const FEATURES = [
     enabled: false,
     isEngineering: true,
   },
+  {
+    id: 'calendar_view_range',
+    title: 'Allow configuring End Date for Calendar View',
+    description: 'Enables the calendar to display items as date ranges by allowing configuration of both start and end dates. ',
+    enabled: false,
+    isEngineering: true,
+  },
 ]
 
 export const FEATURE_FLAG = Object.fromEntries(FEATURES.map((feature) => [feature.id.toUpperCase(), feature.id])) as Record<

packages/nc-gui/lang/en.json

@@ -1053,7 +1053,7 @@
   "activity": {
     "assignView": "Assign view",
     "webhookDetails": "Webhook Details",
-    "hideWeekends": "Hide weekends",
+    "showSaturdaysAndSundays": "Show Saturdays & Sundays",
     "renameBase": "Rename Base",
     "renameWorkspace": "Rename workspace",
     "deactivate": "De-activate",
@@ -1069,6 +1069,7 @@
     "goToToday": "Go to Today",
     "toggleSidebar": "Toggle Sidebar",
     "addEndDate": "Add end date",
+    "endDate": "End Date",
     "withEndDate": "with end date",
     "calendar": "Calendar",
     "viewSettings": "View settings",