Merge pull request #7687 from nocodb/nc-feat/calendar-data-controller

fix(nc-gui): error handling

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

@@ -41,6 +41,7 @@ provide(IsKanbanInj, ref(false))
 provide(IsCalendarInj, ref(true))
 
 const {
+  calendarRange,
   calDataType,
   loadCalendarMeta,
   loadCalendarData,
@@ -256,6 +257,7 @@ const headerText = computed(() => {
           </NcButton>
         </NcTooltip>
       </div>
+      <template v-if="calendarRange">
         <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" />
         <template v-if="!isCalendarDataLoading">
           <LazySmartsheetCalendarMonthView
@@ -284,9 +286,16 @@ const headerText = computed(() => {
             @new-record="newRecord"
           />
         </template>
+
         <div v-if="isCalendarDataLoading && activeCalendarView !== 'year'" class="flex w-full items-center h-full justify-center">
           <GeneralLoader size="xlarge" />
         </div>
+      </template>
+      <template v-else>
+        <div class="flex w-full items-center h-full justify-center">
+          {{ $t('activity.noRange') }}
+        </div>
+      </template>
     </div>
     <LazySmartsheetCalendarSideMenu
       v-if="!isMobileMode"

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -25,7 +25,14 @@ const formatData = (list: Record<string, any>[]) =>
 const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
   (
     meta: Ref<((CalendarType & { id: string }) | TableType) | undefined>,
-    viewMeta: Ref<(ViewType | CalendarType | undefined) & { id: string }> | ComputedRef<(ViewType & { id: string }) | undefined>,
+    viewMeta:
+      | Ref<(ViewType | CalendarType | undefined) & { id: string }>
+      | ComputedRef<
+          | (ViewType & {
+              id: string
+            })
+          | undefined
+        >,
     shared = false,
     where?: ComputedRef<string | undefined>,
   ) => {
@@ -116,6 +123,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     const sideBarFilter = computed(() => {
       let combinedFilters: any = []
 
+      if (!calendarRange.value) return []
+
       if (sideBarFilterOption.value === 'allRecords') {
         combinedFilters = []
       } else if (sideBarFilterOption.value === 'withoutDates') {
@@ -329,6 +338,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
     }
 
     const filterJSON = computed(() => {
+      if (!calendarRange.value) return []
       const combinedFilters: any = {
         is_group: true,
         logical_op: 'and',
@@ -514,6 +524,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       })
 
       if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) return
+
+      try {
         const res = !isPublic.value
           ? await api.dbViewRow.calendarCount('noco', base.value.id!, meta.value!.id!, viewMeta.value.id, {
               ...queryParams.value,
@@ -525,10 +537,11 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
               sortsArr: sorts.value,
               filtersArr: activeDateFilter,
             })
-      if (res) {
         activeDates.value = res.map((dateObj: unknown) => dayjs(dateObj))
-      } else {
+      } catch (e) {
         activeDates.value = []
+        message.error(`${t('msg.error.fetchingActiveDates')} ${await extractSdkResponseErrorMsg(e)}`)
+        console.log(e)
       }
     }
 
@@ -554,22 +567,28 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     async function loadCalendarMeta() {
       if (!viewMeta?.value?.id || !meta?.value?.columns) return
+      try {
         const res = isPublic.value ? (sharedView.value?.view as CalendarType) : await $api.dbView.calendarRead(viewMeta.value.id)
         calendarMetaData.value = res
         const calMeta = typeof res.meta === 'string' ? JSON.parse(res.meta) : res.meta
         activeCalendarView.value = calMeta?.active_view
         if (!activeCalendarView.value) activeCalendarView.value = 'month'
-      calendarRange.value = res?.calendar_range!.map((range: any) => {
+        calendarRange.value = res?.calendar_range?.map((range: any) => {
           return {
-          fk_from_col: meta.value?.columns!.find((col) => col.id === range.fk_from_column_id),
-          fk_to_col: range.fk_to_column_id ? meta.value?.columns!.find((col) => col.id === range.fk_to_column_id) : null,
+            fk_from_col: meta.value?.columns?.find((col) => col.id === range.fk_from_column_id),
+            fk_to_col: range.fk_to_column_id ? meta.value?.columns?.find((col) => col.id === range.fk_to_column_id) : null,
           }
         }) as any
+      } catch (e) {
+        message.error(`Error loading calendar meta ${await extractSdkResponseErrorMsg(e)}`)
+      }
     }
 
     async function loadCalendarData() {
       if ((!base?.value?.id || !meta.value?.id || !viewMeta.value?.id || !filterJSON.value) && !isPublic?.value) return
+      try {
         isCalendarDataLoading.value = true
+
         const res = !isPublic.value
           ? await api.dbViewRow.list(
               'noco',
@@ -591,8 +610,13 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
             )
           : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: filterJSON.value })
         formattedData.value = formatData(res!.list)
+      } catch (e) {
+        message.error(`${t('msg.error.fetchingCalendarData')} ${await extractSdkResponseErrorMsg(e)}`)
+        console.log(e)
+      } finally {
         isCalendarDataLoading.value = false
       }
+    }
 
     async function updateCalendarMeta(updateObj: Partial<CalendarType>) {
       if (!viewMeta?.value?.id || !isUIAllowed('dataEdit') || isPublic.value) return
@@ -662,6 +686,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     const loadSidebarData = async () => {
       if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) return
+      try {
         isSidebarLoading.value = true
         const res = !isPublic.value
           ? await api.dbViewRow.list('noco', base.value.id!, meta.value!.id!, viewMeta.value.id, {
@@ -673,8 +698,13 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
           : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: sideBarFilter.value })
 
         formattedSideBarData.value = formatData(res!.list)
+      } catch (e) {
+        message.error(`${t('msg.error.fetchingCalendarData')} ${await extractSdkResponseErrorMsg(e)}`)
+        console.log(e)
+      } finally {
         isSidebarLoading.value = false
       }
+    }
 
     async function updateRowProperty(toUpdate: Row, property: string[], undo = false) {
       try {

packages/nc-gui/lang/en.json

@@ -692,6 +692,7 @@
     "showFieldOnConditionsMet":"Shows field only when conditions are met"
   },
   "activity": {
+    "noRange": "Calendar view requires a date range",
     "goToToday": "Go to Today",
     "toggleSidebar": "Toggle Sidebar",
     "addEndDate": "Add end date",
@@ -1296,6 +1297,8 @@
       "upgradeToEnterpriseEdition": "Upgrade to Enterprise Edition {extraInfo}"
     },
     "error": {
+      "fetchingCalendarData": "Error fetching calendar data",
+      "fetchingActiveDates": "Error fetching active dates",
       "scopesRequired": "Scopes required",
       "authUrlRequired": "Auth URL is required",
       "userNameAttributeRequired": "Username attribute is required",

packages/nocodb/src/services/datas.service.ts

@@ -221,9 +221,9 @@ export class DatasService {
     if (view.type !== ViewTypes.CALENDAR)
       NcError.badRequest('View is not a calendar view');
 
-    const { ranges } = await CalendarRange.read(view.id);
+    const calendarRange = await CalendarRange.read(view.id);
 
-    if (!ranges.length) NcError.badRequest('No ranges found');
+    if (!calendarRange?.ranges?.length) NcError.badRequest('No ranges found');
 
     const model = await Model.getByIdOrName({
       id: view.fk_model_id,
@@ -239,7 +239,7 @@ export class DatasService {
 
     const dates: Array<string> = [];
 
-    ranges.forEach((range: any) => {
+    calendarRange.ranges.forEach((range: any) => {
       data.list.forEach((date) => {
         const from =
           date[

packages/nocodb/src/services/public-datas.service.ts

@@ -12,7 +12,7 @@ import { nocoExecute } from 'nc-help';
 
 import dayjs from 'dayjs';
 import type { LinkToAnotherRecordColumn } from '~/models';
-import { CalendarRange } from '~/models';
+import { CalendarRange, Column, Model, Source, View } from '~/models';
 import { NcError } from '~/helpers/catchError';
 import getAst from '~/helpers/getAst';
 import NcPluginMgrv2 from '~/helpers/NcPluginMgrv2';
@@ -20,7 +20,6 @@ import { PagedResponseImpl } from '~/helpers/PagedResponse';
 import { getColumnByIdOrName } from '~/modules/datas/helpers';
 import NcConnectionMgrv2 from '~/utils/common/NcConnectionMgrv2';
 import { mimeIcons } from '~/utils/mimeTypes';
-import { Column, Model, Source, View } from '~/models';
 import { utf8ify } from '~/helpers/stringHelpers';
 
 // todo: move to utils
@@ -121,7 +120,10 @@ export class PublicDatasService {
     if (view.type !== ViewTypes.CALENDAR)
       NcError.badRequest('View is not a calendar view');
 
-    const { ranges } = await CalendarRange.read(view.id);
+    const calendarRange = await CalendarRange.read(view.id);
+
+    if (!calendarRange?.ranges?.length)
+      NcError.notFound('Calendar ranges are required in a calendar view');
 
     const model = await Model.getByIdOrName({
       id: view.fk_model_id,
@@ -139,7 +141,7 @@ export class PublicDatasService {
 
     const dates: Array<string> = [];
 
-    ranges.forEach((range: any) => {
+    calendarRange.ranges.forEach((range: any) => {
       data.list.forEach((date) => {
         const from =
           date[columns.find((c) => c.id === range.fk_from_column_id).title];