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,7 +979,15 @@ 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
+              v-for="(range, index) in form.calendar_range"
+              :key="`range-${index}`"
+              :class="{
+                '!gap-2': range.fk_to_column_id === null,
+              }"
+              class="flex flex-col w-full gap-6"
+            >
+              <div class="w-full space-y-2">
                 <div class="text-gray-800">
                   {{ $t('labels.organiseBy') }}
                 </div>
@@ -985,7 +995,7 @@ const getPluralName = (name: string) => {
                   v-model:value="range.fk_from_column_id"
                   :disabled="isMetaLoading"
                   :loading="isMetaLoading"
-                class="nc-select-shadow nc-from-select"
+                  class="nc-select-shadow w-full nc-from-select"
                 >
                   <a-select-option
                     v-for="(option, id) in [...viewSelectFieldOptions!].filter((f) => {
@@ -1017,9 +1027,10 @@ const getPluralName = (name: string) => {
                     </div>
                   </a-select-option>
                 </NcSelect>
-
+              </div>
+              <div class="w-full space-y-2">
                 <NcButton
-                v-if="range.fk_to_column_id === null"
+                  v-if="range.fk_to_column_id === null && isRangeEnabled"
                   size="small"
                   class="!border-none w-28"
                   type="secondary"
@@ -1027,11 +1038,11 @@ const getPluralName = (name: string) => {
                   @click="range.fk_to_column_id = undefined"
                 >
                   <component :is="iconMap.plus" class="h-4 w-4" />
-                {{ $t('activity.addEndDate') }}
+                  {{ $t('activity.endDate') }}
                 </NcButton>
 
-              <template v-else-if="isEeUI">
+                <template v-else-if="isEeUI && isRangeEnabled">
-                <span>
+                  <span class="text-gray-700">
                     {{ $t('activity.withEndDate') }}
                   </span>
 
@@ -1088,6 +1099,7 @@ const getPluralName = (name: string) => {
                   </NcButton>
                 </template>
               </div>
+            </div>
 
             <!--          <NcButton class="mt-2" size="small" type="secondary" @click="addCalendarRange">
             <component :is="iconMap.plus" />

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"
           >
+            <div class="flex gap-2 items-center">
               <component :is="iconMap.plus" class="h-4 w-4" />
-            {{ $t('activity.addEndDate') }}
+              {{ $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",