mobile optimisations - work on merging right and left sidebar (WIP)

packages/nc-gui/components/smartsheet/sidebar/mobile.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import type { ViewType, ViewTypes } from 'nocodb-sdk'
+import {
+  ActiveViewInj,
+  MetaInj,
+  computed,
+  inject,
+  ref,
+  resolveComponent,
+  useDialog,
+  useNuxtApp,
+  useRoute,
+  useRouter,
+  useSidebar,
+  useUIPermission,
+  useViews,
+  watch,
+} from '#imports'
+
+const meta = inject(MetaInj, ref())
+
+const activeView = inject(ActiveViewInj, ref())
+
+const { activeTab } = useTabs()
+
+const { views, loadViews, isLoading } = useViews(meta)
+
+const { lastOpenedViewMap } = useProject()
+
+const setLastOpenedViewId = (viewId?: string) => {
+  if (viewId && activeTab.value?.id) {
+    lastOpenedViewMap.value[activeTab.value?.id] = viewId
+  }
+}
+
+const { isUIAllowed } = useUIPermission()
+
+const { isMobileMode } = useGlobal()
+
+const router = useRouter()
+
+const route = useRoute()
+
+const { $e } = useNuxtApp()
+
+/** Sidebar visible */
+const { isOpen } = useSidebar('nc-right-sidebar')
+
+const sidebarCollapsed = computed(() => !isOpen.value || isMobileMode.value)
+
+/** Sidebar ref */
+const sidebar = ref()
+
+/** Watch route param and change active view based on `viewTitle` */
+watch(
+  [views, () => route.params.viewTitle],
+  ([nextViews, viewTitle]) => {
+    const lastOpenedViewId = activeTab.value?.id && lastOpenedViewMap.value[activeTab.value?.id]
+    const lastOpenedView = nextViews.find((v) => v.id === lastOpenedViewId)
+
+    if (viewTitle) {
+      let view = nextViews.find((v) => v.title === viewTitle)
+      if (view) {
+        activeView.value = view
+        setLastOpenedViewId(activeView.value?.id)
+      } else {
+        /** search with view id and if found replace with title */
+        view = nextViews.find((v) => v.id === viewTitle)
+        if (view) {
+          router.replace({
+            params: {
+              viewTitle: view.title,
+            },
+          })
+        }
+      }
+    } else if (lastOpenedView) {
+      /** if active view is not found, set it to last opened view */
+      router.replace({
+        params: {
+          viewTitle: lastOpenedView.title,
+        },
+      })
+    } else {
+      if (nextViews?.length && activeView.value !== nextViews[0]) {
+        activeView.value = nextViews[0]
+      }
+    }
+
+    /** if active view is not found, set it to first view */
+    if (nextViews?.length && (!activeView.value || !nextViews.includes(activeView.value))) {
+      activeView.value = nextViews[0]
+    }
+  },
+  { immediate: true },
+)
+
+/** Open delete modal */
+function onOpenModal({
+  title = '',
+  type,
+  copyViewId,
+  groupingFieldColumnId,
+}: {
+  title?: string
+  type: ViewTypes
+  copyViewId?: string
+  groupingFieldColumnId?: string
+}) {
+  const isOpen = ref(true)
+
+  const { close } = useDialog(resolveComponent('DlgViewCreate'), {
+    'modelValue': isOpen,
+    title,
+    type,
+    meta,
+    'selectedViewId': copyViewId,
+    groupingFieldColumnId,
+    'views': views,
+    'onUpdate:modelValue': closeDialog,
+    'onCreated': async (view: ViewType) => {
+      closeDialog()
+
+      await loadViews()
+
+      router.push({ params: { viewTitle: view.title || '' } })
+
+      $e('a:view:create', { view: view.type })
+    },
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
+</script>
+
+<template>
+  <div>
+    FOO MOBILE
+    <a-layout-sider
+      ref="sidebar"
+      :collapsed="sidebarCollapsed"
+      collapsiple
+      collapsed-width="0"
+      width="0"
+      class="nc-view-sidebar relative shadow h-full w-full !flex-1 !min-w-0 !max-w-[150px] !w-[150px] lg:(!max-w-[250px] !w-[250px])"
+      theme="light"
+    >
+      <LazySmartsheetSidebarToolbar
+        class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
+      />
+
+      <div class="flex-1 flex flex-col min-h-0">
+        <GeneralOverlay v-if="!views.length" :model-value="isLoading" inline class="bg-gray-300/50">
+          <div class="w-full h-full flex items-center justify-center">
+            <a-spin />
+          </div>
+        </GeneralOverlay>
+
+        <LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
+
+        <template v-if="isUIAllowed('virtualViewsCreateOrEdit')">
+          <div class="!my-3 w-full border-b-1" />
+
+          <LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" />
+        </template>
+      </div>
+    </a-layout-sider>
+  </div>
+</template>
+
+<style scoped>
+:deep(.ant-menu-title-content) {
+  @apply w-full;
+}
+
+:deep(.ant-layout-sider-children) {
+  @apply flex flex-col;
+}
+</style>

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -69,6 +69,7 @@ provide(
 
 <template>
   <div class="nc-container flex h-full">
+    <SmartsheetSidebarMobile v-if="meta && isMobileMode" class="nc-left-sidebar-mobile" />
     <div class="flex flex-col h-full flex-1 min-w-0">
       <LazySmartsheetToolbar />
 
@@ -92,7 +93,7 @@ provide(
     <LazySmartsheetExpandedFormDetached />
 
     <!-- Lazy loading the sidebar causes issues when deleting elements, i.e. it appears as if multiple elements are removed when they are not -->
-    <SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
+    <SmartsheetSidebar v-if="meta && !isMobileMode" class="nc-right-sidebar" />
   </div>
 </template>