feat: Fixed issue with loading table and view from sidebar, fixed node click for mobile in sidebar

packages/nc-gui/assets/style.scss

@@ -598,7 +598,7 @@ input[type='number'] {
 }
 
 .nc-sidebar-node {
-  @apply !xs:(min-h-8.9 max-h-8.9);
+  @apply !xs:(min-h-8.9 max-h-8.9 hover:bg-gray-50);
 
   .nc-sidebar-node-btn:not(.nc-sidebar-expand) {
     @apply !xs:(hidden)
@@ -611,7 +611,7 @@ input[type='number'] {
 
 
 .nc-button.ant-btn.nc-sidebar-node-btn.nc-sidebar-expand {
-  @apply xs:(opacity-100);
+  @apply xs:(opacity-100 hover:bg-gray-50);
 
   .nc-icon {
     @apply xs:(visible opacity-100 !text-gray-500)

packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue

@@ -43,7 +43,9 @@ function onOpenModal({
 
       refreshCommandPalette()
 
-      await loadViews()
+      await loadViews({
+        force: true,
+      })
 
       navigateToView({
         view,

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -231,7 +231,7 @@ const addNewProjectChildEntity = async () => {
 // todo: temp
 const isSharedBase = ref(false)
 
-const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
+const onTouchStart = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
   if (!project) {
     return
   }
@@ -275,6 +275,12 @@ const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, to
   }
 }
 
+const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
+  if (isMobileMode.value) return
+
+  onTouchStart(project, ignoreNavigation, toggleIsExpanded)
+}
+
 function openErdView(base: BaseType) {
   activeBaseId.value = base.id
   isErdModalOpen.value = !isErdModalOpen.value
@@ -395,6 +401,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
             size="xxsmall"
             class="nc-sidebar-node-btn nc-sidebar-expand ml-0.75 !xs:visible"
             @click="onProjectClick(project, true, true)"
+            @touchstart="onTouchStart(project, true, true)"
           >
             <GeneralIcon
               icon="triangleFill"
@@ -403,7 +410,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
             />
           </NcButton>
 
-          <div class="flex items-center mr-1" @click="onProjectClick(project)">
+          <div class="flex items-center mr-1" @click="onProjectClick(project)" @touchstart="onTouchStart(project)">
             <div class="flex items-center select-none w-6 h-full">
               <a-spin
                 v-if="project.isLoading"
@@ -443,10 +450,15 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
             :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
             :class="{ 'text-black font-semibold': activeProjectId === project.id && projectViewOpen }"
             @click="onProjectClick(project)"
+            @touchstart="onTouchStart(project)"
           >
             {{ project.title }}
           </span>
-          <div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(project)"></div>
+          <div
+            :class="{ 'flex flex-grow h-full': !editMode }"
+            @click="onProjectClick(project)"
+            @touchstart="onTouchStart(project)"
+          ></div>
 
           <NcDropdown v-model:visible="isOptionsOpen" :trigger="['click']">
             <NcButton

packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@@ -20,7 +20,7 @@ const project = toRef(props, 'project')
 const table = toRef(props, 'table')
 const baseIndex = toRef(props, 'baseIndex')
 
-const { openTable } = useTableNew({
+const { openTable: _openTable } = useTableNew({
   projectId: project.value.id!,
 })
 
@@ -28,6 +28,8 @@ const route = useRoute()
 
 const { isUIAllowed } = useRoles()
 
+const { isMobileMode } = useGlobal()
+
 const tabStore = useTabs()
 const { updateTab } = tabStore
 
@@ -85,7 +87,7 @@ const canUserEditEmote = computed(() => {
 const isExpanded = ref(false)
 const isLoading = ref(false)
 
-const onExpand = async () => {
+const onTouchExpand = async () => {
   if (isExpanded.value) {
     isExpanded.value = false
     return
@@ -102,6 +104,30 @@ const onExpand = async () => {
   }
 }
 
+const onExpand = async () => {
+  if (isMobileMode.value) return
+
+  onTouchExpand()
+}
+
+const onTouchOpenTable = async () => {
+  isLoading.value = true
+  try {
+    await _openTable(table.value)
+  } catch (e) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isLoading.value = false
+    isExpanded.value = true
+  }
+}
+
+const onOpenTable = async () => {
+  if (isMobileMode.value) return
+
+  onTouchOpenTable()
+}
+
 watch(
   () => activeView.value?.id,
   () => {
@@ -145,10 +171,17 @@ const isTableOpened = computed(() => {
         class="table-context flex items-center gap-1 h-full"
         :data-testid="`nc-tbl-side-node-${table.title}`"
         @contextmenu="setMenuContext('table', table)"
-        @click="openTable(table)"
+        @click="onOpenTable"
+        @touchstart="onTouchOpenTable"
       >
         <div class="flex flex-row h-full items-center">
-          <NcButton type="text" size="xxsmall" class="nc-sidebar-node-btn nc-sidebar-expand" @click.stop="onExpand">
+          <NcButton
+            type="text"
+            size="xxsmall"
+            class="nc-sidebar-node-btn nc-sidebar-expand"
+            @click.stop="onExpand"
+            @touchstart.stop="onTouchExpand"
+          >
             <GeneralIcon
               icon="triangleFill"
               class="nc-sidebar-base-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"

packages/nc-gui/components/dashboard/TreeView/ViewsList.vue

@@ -268,6 +268,7 @@ function openDeleteDialog(view: ViewType) {
 
       await loadViews({
         tableId: table.value.id!,
+        force: true,
       })
     },
   })

packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@@ -78,6 +78,10 @@ const onClick = useDebounceFn(() => {
   emits('changeView', vModel.value)
 }, 250)
 
+const onTouchClick = () => {
+  emits('changeView', vModel.value)
+}
+
 /** Enable editing view name on dbl click */
 function onDblClick() {
   if (!isUIAllowed('viewCreateOrEdit')) return
@@ -218,6 +222,7 @@ function onRef(el: HTMLElement) {
     :data-testid="`view-sidebar-view-${vModel.alias || vModel.title}`"
     @dblclick.stop="onDblClick"
     @click="onClick"
+    @touchstart="onTouchClick"
   >
     <div
       :ref="onRef"

packages/nc-gui/composables/useTableNew.ts

@@ -54,6 +54,8 @@ export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => v
   const tables = computed(() => projectTables.value.get(param.projectId) || [])
   const project = computed(() => projects.value.get(param.projectId))
 
+  const { loadViews } = useViewsStore()
+
   const openTable = async (table: TableType) => {
     if (!table.project_id) return
 
@@ -78,6 +80,10 @@ export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => v
       projectIdOrBaseId = route.value.params.projectId as string
     }
 
+    await loadViews({
+      tableId: table.id,
+    })
+
     await navigateTo({
       path: `/${workspaceIdOrType}/${projectIdOrBaseId}/${table?.id}`,
       query: route.value.query,

packages/nc-gui/store/views.ts

@@ -81,9 +81,16 @@ export const useViewsStore = defineStore('viewsStore', () => {
   // Used for Grid View Pagination
   const isPaginationLoading = ref(false)
 
-  const loadViews = async ({ tableId, ignoreLoading }: { tableId?: string; ignoreLoading?: boolean } = {}) => {
+  const loadViews = async ({
+    tableId,
+    ignoreLoading,
+    force,
+  }: { tableId?: string; ignoreLoading?: boolean; force?: boolean } = {}) => {
     tableId = tableId ?? tablesStore.activeTableId
+
     if (tableId) {
+      if (!force && viewsByTable.value.get(tableId)) return
+
       if (!ignoreLoading) isViewsLoading.value = true
 
       const response = (await $api.dbView.list(tableId)).list as ViewType[]