Nc staing/issues (#8681)

* fix: disable calendar for mobile view fix: disable loading state for notifications polling

* fix: unwanted mutation

---------

Co-authored-by: DarkPhoenix2704 <anbarasun123@gmail.com>

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -102,7 +102,6 @@ const attachments = (record: any): Attachment[] => {
 
 const expandForm = (row: RowType, state?: Record<string, any>) => {
   const rowId = extractPkFromRow(row.row, meta.value!.columns!)
-  expandedFormRow.value = row
   expandedFormRowState.value = state
 
   if (rowId && !isPublic.value) {
@@ -113,6 +112,7 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
       },
     })
   } else {
+    expandedFormRow.value = row
     expandedFormDlg.value = true
   }
 }

packages/nc-gui/components/smartsheet/Kanban.vue

@@ -139,7 +139,6 @@ reloadViewMetaHook?.on(async () => {
 
 const expandForm = (row: RowType, state?: Record<string, any>) => {
   const rowId = extractPkFromRow(row.row, meta.value!.columns!)
-  expandedFormRow.value = row
   expandedFormRowState.value = state
   if (rowId && !isPublic.value) {
     router.push({
@@ -149,6 +148,7 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
       },
     })
   } else {
+    expandedFormRow.value = row
     expandedFormDlg.value = true
   }
 }

packages/nc-gui/components/smartsheet/Map.vue

@@ -51,9 +51,8 @@ const getMapCenterLocalStorageKey = (viewId: string) => `mapView.${viewId}.cente
 
 const expandForm = (row: Row, state?: Record<string, any>) => {
   const rowId = extractPkFromRow(row.row, meta.value!.columns!)
-  expandedFormRow.value = row
 
-  if (rowId) {
+  if (rowId && !isPublic.value) {
     router.push({
       query: {
         ...route.query,
@@ -61,6 +60,7 @@ const expandForm = (row: Row, state?: Record<string, any>) => {
       },
     })
   } else {
+    expandedFormRow.value = row
     expandedFormRowState.value = state
     expandedFormDlg.value = true
   }

packages/nc-gui/components/smartsheet/Toolbar.vue

@@ -18,7 +18,7 @@ const isTab = computed(() => {
 
 <template>
   <div
-    v-if="!isMobileMode || isCalendar"
+    v-if="!isMobileMode"
     ref="containerRef"
     :class="{
       'px-4': isMobileMode,

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

@@ -8,6 +8,8 @@ const meta = inject(MetaInj, ref())
 
 const view = inject(ActiveViewInj, ref())
 
+const { isMobileMode } = useGlobal()
+
 const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
@@ -66,7 +68,6 @@ const expandedFormRowState = ref<Record<string, any>>()
 const expandRecord = (row: RowType, state?: Record<string, any>) => {
   const rowId = extractPkFromRow(row.row, meta.value!.columns!)
 
-  expandedFormRow.value = row
   expandedFormRowState.value = state
 
   if (rowId && !isPublic.value) {
@@ -77,6 +78,7 @@ const expandRecord = (row: RowType, state?: Record<string, any>) => {
       },
     })
   } else {
+    expandedFormRow.value = row
     expandedFormDlg.value = true
   }
 }
@@ -118,82 +120,97 @@ reloadViewDataHook?.on(async (params: void | { shouldShowLoading?: boolean }) =>
 </script>
 
 <template>
-  <div class="flex h-full relative flex-row" data-testid="nc-calendar-wrapper">
+  <template v-if="isMobileMode">
-    <div class="flex flex-col w-full">
+    <div class="pl-6 pr-[120px] py-6 bg-white flex-col justify-start items-start gap-2.5 inline-flex">
-      <template v-if="calendarRange?.length && !isCalendarMetaLoading">
+      <div class="text-gray-500 text-5xl font-semibold leading-16">
-        <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" />
+        {{ $t('general.available') }}<br />{{ $t('title.inDesktop') }}
-        <template v-if="!isCalendarDataLoading">
+      </div>
-          <LazySmartsheetCalendarMonthView
+      <div class="text-gray-500 text-base font-medium leading-normal">
-            v-if="activeCalendarView === 'month'"
+        {{ $t('msg.calendarViewNotSupportedOnMobile') }}
-            @expand-record="expandRecord"
+      </div>
-            @new-record="newRecord"
+    </div>
-          />
+  </template>
-          <LazySmartsheetCalendarWeekViewDateField
+  <template v-else>
-            v-else-if="activeCalendarView === 'week' && calDataType === UITypes.Date"
+    <div class="flex h-full relative flex-row" data-testid="nc-calendar-wrapper">
-            @expand-record="expandRecord"
+      <div class="flex flex-col w-full">
-            @new-record="newRecord"
+        <template v-if="calendarRange?.length && !isCalendarMetaLoading">
-          />
+          <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" />
-          <LazySmartsheetCalendarWeekViewDateTimeField
+          <template v-if="!isCalendarDataLoading">
-            v-else-if="activeCalendarView === 'week' && calDataType === UITypes.DateTime"
+            <LazySmartsheetCalendarMonthView
-            @expand-record="expandRecord"
+              v-if="activeCalendarView === 'month'"
-            @new-record="newRecord"
+              @expand-record="expandRecord"
-          />
+              @new-record="newRecord"
-          <LazySmartsheetCalendarDayViewDateField
+            />
-            v-else-if="activeCalendarView === 'day' && calDataType === UITypes.Date"
+            <LazySmartsheetCalendarWeekViewDateField
-            @expand-record="expandRecord"
+              v-else-if="activeCalendarView === 'week' && calDataType === UITypes.Date"
-            @new-record="newRecord"
+              @expand-record="expandRecord"
-          />
+              @new-record="newRecord"
-          <LazySmartsheetCalendarDayViewDateTimeField
+            />
-            v-else-if="activeCalendarView === 'day' && calDataType === UITypes.DateTime"
+            <LazySmartsheetCalendarWeekViewDateTimeField
-            @expand-record="expandRecord"
+              v-else-if="activeCalendarView === 'week' && calDataType === UITypes.DateTime"
-            @new-record="newRecord"
+              @expand-record="expandRecord"
-          />
+              @new-record="newRecord"
+            />
+            <LazySmartsheetCalendarDayViewDateField
+              v-else-if="activeCalendarView === 'day' && calDataType === UITypes.Date"
+              @expand-record="expandRecord"
+              @new-record="newRecord"
+            />
+            <LazySmartsheetCalendarDayViewDateTimeField
+              v-else-if="activeCalendarView === 'day' && calDataType === UITypes.DateTime"
+              @expand-record="expandRecord"
+              @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-if="isCalendarMetaLoading">
-        <div v-if="isCalendarDataLoading && activeCalendarView !== 'year'" class="flex w-full items-center h-full justify-center">
+          <div class="flex w-full items-center h-full justify-center">
-          <GeneralLoader size="xlarge" />
+            <GeneralLoader size="xlarge" />
-        </div>
+          </div>
-      </template>
+        </template>
-      <template v-else-if="isCalendarMetaLoading">
+        <template v-else>
-        <div class="flex w-full items-center h-full justify-center">
+          <div class="flex w-full items-center h-full justify-center">
-          <GeneralLoader size="xlarge" />
+            {{ $t('activity.noRange') }}
-        </div>
+          </div>
-      </template>
+        </template>
-      <template v-else>
+      </div>
-        <div class="flex w-full items-center h-full justify-center">
+      <LazySmartsheetCalendarSideMenu :visible="showSideMenu" @expand-record="expandRecord" @new-record="newRecord" />
-          {{ $t('activity.noRange') }}
-        </div>
-      </template>
     </div>
-    <LazySmartsheetCalendarSideMenu :visible="showSideMenu" @expand-record="expandRecord" @new-record="newRecord" />
-  </div>
 
-  <Suspense>
+    <Suspense>
+      <LazySmartsheetExpandedForm
+        v-if="expandedFormRow && expandedFormDlg"
+        v-model="expandedFormDlg"
+        :row="expandedFormRow"
+        :load-row="!isPublic"
+        :state="expandedFormRowState"
+        :meta="meta"
+        :view="view"
+      />
+    </Suspense>
+
     <LazySmartsheetExpandedForm
-      v-if="expandedFormRow && expandedFormDlg"
+      v-if="expandedFormOnRowIdDlg && meta?.id"
-      v-model="expandedFormDlg"
+      v-model="expandedFormOnRowIdDlg"
-      :row="expandedFormRow"
+      close-after-save
       :load-row="!isPublic"
-      :state="expandedFormRowState"
       :meta="meta"
+      :state="expandedFormRowState"
+      :row="{
+        row: {},
+        oldRow: {},
+        rowMeta: {},
+      }"
+      :row-id="route.query.rowId"
+      :expand-form="expandRecord"
       :view="view"
     />
-  </Suspense>
+  </template>
-
-  <LazySmartsheetExpandedForm
-    v-if="expandedFormOnRowIdDlg && meta?.id"
-    v-model="expandedFormOnRowIdDlg"
-    close-after-save
-    :load-row="!isPublic"
-    :meta="meta"
-    :state="expandedFormRowState"
-    :row="{
-      row: {},
-      oldRow: {},
-      rowMeta: {},
-    }"
-    :row-id="route.query.rowId"
-    :expand-form="expandRecord"
-    :view="view"
-  />
 </template>

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

@@ -88,7 +88,6 @@ const skipRowRemovalOnCancel = ref(false)
 
 function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false) {
   const rowId = extractPkFromRow(row.row, meta.value?.columns as ColumnType[])
-  expandedFormRow.value = row
   expandedFormRowState.value = state
   if (rowId && !isPublic.value) {
     router.push({
@@ -98,6 +97,7 @@ function expandForm(row: Row, state?: Record<string, any>, fromToolbar = false)
       },
     })
   } else {
+    expandedFormRow.value = row
     expandedFormDlg.value = true
     skipRowRemovalOnCancel.value = !fromToolbar
   }

packages/nc-gui/composables/useApi/index.ts

@@ -61,14 +61,18 @@ export function useApi<Data = any, RequestConfig = any>({
   const api = useGlobalInstance && !!nuxtApp.$api ? nuxtApp.$api : createApiInstance(apiOptions)
 
   /** set loading to true and increment local and global request counter */
-  function onRequestStart() {
+  // Long Polling causes the loading spinner to never stop
-    isLoading.value = true
+  // hence we are excluding the polling request from the loading spinner
+  function onRequestStart(config) {
+    if (config.url !== '/api/v1/notifications/poll') {
+      isLoading.value = true
 
-    /** local count */
+      /** local count */
-    inc()
+      inc()
 
-    /** global count */
+      /** global count */
-    nuxtApp.$state.runningRequests.inc()
+      nuxtApp.$state.runningRequests.inc()
+    }
   }
 
   /** decrement local and global request counter and check if we can stop loading */
@@ -99,7 +103,7 @@ export function useApi<Data = any, RequestConfig = any>({
     (config) => {
       reset()
 
-      onRequestStart()
+      onRequestStart(config)
 
       return {
         ...config,

packages/nc-gui/composables/useViewData.ts

@@ -347,9 +347,8 @@ export function useViewData(
 
     // extract the row id of the sibling row
     const rowId = extractPkFromRow(formattedData.value[siblingRowIndex].row, meta.value?.columns as ColumnType[])
-
     if (rowId) {
-      router.push({
+      await router.push({
         query: {
           ...routeQuery.value,
           rowId,

packages/nc-gui/lang/en.json

@@ -1133,6 +1133,7 @@
     "thisSharedViewIsProtected": "This shared view is protected",
     "successfullySubmittedFormData": "Successfully submitted form data",
     "formViewNotSupportedOnMobile": "Form view is not supported on mobile",
+    "calendarViewNotSupportedOnMobile": "Calendar view is not supported on mobile",
     "newFormWillBeLoaded": "New form will be loaded after {seconds} seconds",
     "optimizedQueryDisabled": "Optimized query is disabled",
     "optimizedQueryEnabled": "Optimized query is enabled",