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,6 +120,17 @@ reloadViewDataHook?.on(async (params: void | { shouldShowLoading?: boolean }) =>
 </script>
 
 <template>
+  <template v-if="isMobileMode">
+    <div class="pl-6 pr-[120px] py-6 bg-white flex-col justify-start items-start gap-2.5 inline-flex">
+      <div class="text-gray-500 text-5xl font-semibold leading-16">
+        {{ $t('general.available') }}<br />{{ $t('title.inDesktop') }}
+      </div>
+      <div class="text-gray-500 text-base font-medium leading-normal">
+        {{ $t('msg.calendarViewNotSupportedOnMobile') }}
+      </div>
+    </div>
+  </template>
+  <template v-else>
     <div class="flex h-full relative flex-row" data-testid="nc-calendar-wrapper">
       <div class="flex flex-col w-full">
         <template v-if="calendarRange?.length && !isCalendarMetaLoading">
@@ -150,7 +163,10 @@ reloadViewDataHook?.on(async (params: void | { shouldShowLoading?: boolean }) =>
             />
           </template>
 
-        <div v-if="isCalendarDataLoading && activeCalendarView !== 'year'" class="flex w-full items-center h-full justify-center">
+          <div
+            v-if="isCalendarDataLoading && activeCalendarView !== 'year'"
+            class="flex w-full items-center h-full justify-center"
+          >
             <GeneralLoader size="xlarge" />
           </div>
         </template>
@@ -196,4 +212,5 @@ reloadViewDataHook?.on(async (params: void | { shouldShowLoading?: boolean }) =>
       :expand-form="expandRecord"
       :view="view"
     />
+  </template>
 </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,7 +61,10 @@ 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
+  // 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 */
@@ -70,6 +73,7 @@ export function useApi<Data = any, RequestConfig = any>({
       /** global count */
       nuxtApp.$state.runningRequests.inc()
     }
+  }
 
   /** decrement local and global request counter and check if we can stop loading */
   function onRequestFinish() {
@@ -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",