From cbae02cbbb9e4e14809f9017c8dcaf45b502215b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 25 Sep 2023 13:39:08 +0000
Subject: [PATCH] feat: Added config pinia store and integared isMobileMode
 with UI

---
 .../components/dashboard/Sidebar/Header.vue   |  2 +
 packages/nc-gui/components/dashboard/View.vue | 11 +++++
 .../components/smartsheet/Pagination.vue      |  4 +-
 .../nc-gui/components/smartsheet/Toolbar.vue  | 47 ++++++++++++-------
 .../nc-gui/components/smartsheet/Topbar.vue   | 10 ++--
 packages/nc-gui/store/config.ts               | 29 ++++++++++++
 6 files changed, 80 insertions(+), 23 deletions(-)
 create mode 100644 packages/nc-gui/store/config.ts

diff --git a/packages/nc-gui/components/dashboard/Sidebar/Header.vue b/packages/nc-gui/components/dashboard/Sidebar/Header.vue
index f6ff58e904..511d206a35 100644
--- a/packages/nc-gui/components/dashboard/Sidebar/Header.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar/Header.vue
@@ -4,6 +4,8 @@ const workspaceStore = useWorkspace()
 const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())
 
 const { activeWorkspace, isWorkspaceLoading } = storeToRefs(workspaceStore)
+
+const { isMobileMode } = useGlobal()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/dashboard/View.vue b/packages/nc-gui/components/dashboard/View.vue
index cbd75c7ce6..fbff927fbe 100644
--- a/packages/nc-gui/components/dashboard/View.vue
+++ b/packages/nc-gui/components/dashboard/View.vue
@@ -5,6 +5,8 @@ import 'splitpanes/dist/splitpanes.css'
 const router = useRouter()
 const route = router.currentRoute
 
+const { isMobileMode } = storeToRefs(useConfigStore())
+
 const {
   isLeftSidebarOpen,
   leftSidebarWidthPercent,
@@ -89,6 +91,10 @@ watch(route, () => {
     isLeftSidebarOpen.value = true
   }
 })
+
+watch(isMobileMode, () => {
+  isLeftSidebarOpen.value = !isMobileMode.value
+})
 </script>
 
 <template>
@@ -104,6 +110,7 @@ watch(route, () => {
         ref="wrapperRef"
         class="nc-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-32 absolute overflow-visible"
         :class="{
+          'mobile': isMobileMode,
           'minimized-height': !isLeftSidebarOpen,
           'hide-sidebar': ['hiddenStart', 'hiddenEnd', 'peekCloseEnd'].includes(sidebarState),
         }"
@@ -126,6 +133,10 @@ watch(route, () => {
   width: calc(100% + 4px);
 }
 
+.mobile.nc-sidebar-wrapper.minimized-height > * {
+  @apply !h-full;
+}
+
 .nc-sidebar-wrapper > * {
   transition: all 0.2s ease-in-out;
   @apply z-10 absolute;
diff --git a/packages/nc-gui/components/smartsheet/Pagination.vue b/packages/nc-gui/components/smartsheet/Pagination.vue
index fa068724a8..b93e8503fb 100644
--- a/packages/nc-gui/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui/components/smartsheet/Pagination.vue
@@ -23,6 +23,8 @@ const { locale } = useI18n()
 
 const vPaginationData = useVModel(props, 'paginationData', emits)
 
+const { isMobileMode } = useGlobal()
+
 const { alignCountOnRight, customLabel, changePage } = props
 
 const fixedSize = toRef(props, 'fixedSize')
@@ -94,7 +96,7 @@ const isRTLLanguage = computed(() => isRtlLang(locale.value as keyof typeof Lang
         </a-input>
       </div>
     </template>
-    <div class="flex-1 flex justify-end items-center">
+    <div v-if="!isMobileMode" class="flex-1 flex justify-end items-center">
       <GeneralApiTiming v-if="isEeUI && props.showApiTiming" class="m-1" />
       <div class="text-right">
         <span
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index ef3ab0f617..a9f3a4089b 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -22,10 +22,11 @@ const isViewSidebarAvailable = computed(
   <div
     class="nc-table-toolbar h-12 min-h-12 py-1 flex gap-2 items-center border-b border-gray-200 overflow-hidden"
     :class="{
-      'nc-table-toolbar-mobile': isMobileMode,
+      'h-8': isMobileMode,
       'max-h-[var(--topbar-height)] min-h-[var(--topbar-height)]': !isMobileMode,
-      'pl-3 pr-0': isViewSidebarAvailable,
-      'px-3': !isViewSidebarAvailable,
+      'pl-3 pr-0': isViewSidebarAvailable && !isMobileMode,
+      'px-3': !isViewSidebarAvailable && !isMobileMode,
+      'px-1': isMobileMode,
     }"
     style="z-index: 7"
   >
@@ -33,32 +34,42 @@ const isViewSidebarAvailable = computed(
       <a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />
     </template>
     <template v-else>
-      <LazySmartsheetToolbarMappedBy v-if="isMap" />
+      <template v-if="!isMobileMode">
+        <LazySmartsheetToolbarMappedBy v-if="isMap" />
 
-      <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
+        <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
 
-      <LazySmartsheetToolbarStackedBy v-if="isKanban" />
+        <LazySmartsheetToolbarStackedBy v-if="isKanban" />
 
-      <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
+        <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
 
-      <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
+        <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />
 
-      <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
+        <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
 
-      <LazySmartsheetToolbarRowHeight v-if="isGrid" />
+        <LazySmartsheetToolbarRowHeight v-if="isGrid" />
 
-      <LazySmartsheetToolbarQrScannerButton v-if="isMobileMode && (isGrid || isKanban || isGallery)" />
+        <!-- <LazySmartsheetToolbarQrScannerButton v-if="isMobileMode && (isGrid || isKanban || isGallery)" /> -->
 
-      <LazySmartsheetToolbarExport v-if="(!isPublic && !isUIAllowed('dataInsert')) || (isPublic && allowCSVDownload)" />
+        <LazySmartsheetToolbarExport v-if="(!isPublic && !isUIAllowed('dataInsert')) || (isPublic && allowCSVDownload)" />
 
-      <div v-if="!isMobileMode" class="flex-1" />
+        <div class="flex-1" />
+      </template>
 
-      <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery || isKanban) && !isPublic" class="shrink" />
-
-      <LazySmartsheetToolbarViewActions
-        v-if="(isGrid || isGallery || isKanban || isMap) && !isPublic && isUIAllowed('dataInsert')"
-        :show-system-fields="false"
+      <LazySmartsheetToolbarSearchData
+        v-if="(isGrid || isGallery || isKanban) && !isPublic"
+        :class="{
+          'shrink': !isMobileMode,
+          'w-full': isMobileMode,
+        }"
       />
+
+      <template v-if="!isMobileMode">
+        <LazySmartsheetToolbarViewActions
+          v-if="(isGrid || isGallery || isKanban || isMap) && !isPublic && isUIAllowed('dataInsert')"
+          :show-system-fields="false"
+        />
+      </template>
       <LazySmartsheetToolbarOpenViewSidebarBtn v-if="isViewSidebarAvailable" />
     </template>
   </div>
diff --git a/packages/nc-gui/components/smartsheet/Topbar.vue b/packages/nc-gui/components/smartsheet/Topbar.vue
index 012d0576dc..951f50abe0 100644
--- a/packages/nc-gui/components/smartsheet/Topbar.vue
+++ b/packages/nc-gui/components/smartsheet/Topbar.vue
@@ -10,7 +10,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 const { isViewsLoading } = storeToRefs(useViewsStore())
 
-const { isMobileMode } = useGlobal()
+const { isMobileMode } = storeToRefs(useConfigStore())
 
 const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
 </script>
@@ -31,11 +31,13 @@ const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
       <GeneralOpenLeftSidebarBtn />
       <LazySmartsheetToolbarViewInfo v-if="!isPublic" />
 
-      <div v-if="!isMobileMode" class="flex-1" />
+      <div class="flex-1" />
 
-      <div v-if="!isSharedBase" class="absolute mx-auto -left-1/8 right-0 w-47.5"><SmartsheetTopbarSelectMode /></div>
+      <div v-if="!isSharedBase && !isMobileMode" class="absolute mx-auto -left-1/8 right-0 w-47.5">
+        <SmartsheetTopbarSelectMode />
+      </div>
 
-      <GeneralApiLoader />
+      <GeneralApiLoader v-if="!isMobileMode" />
 
       <LazyGeneralShareProject v-if="(isForm || isGrid || isKanban || isGallery || isMap) && !isPublic" is-view-toolbar />
 
diff --git a/packages/nc-gui/store/config.ts b/packages/nc-gui/store/config.ts
new file mode 100644
index 0000000000..a7a478323c
--- /dev/null
+++ b/packages/nc-gui/store/config.ts
@@ -0,0 +1,29 @@
+import { defineStore } from 'pinia'
+
+export const useConfigStore = defineStore('configStore', () => {
+  const { isMobileMode: globalIsMobile } = useGlobal()
+  const isMobileMode = ref(window.innerWidth < 820)
+
+  const isViewPortMobile = () => window.innerWidth < 820
+
+  const onViewPortResize = () => {
+    isMobileMode.value = isViewPortMobile()
+  }
+
+  window.addEventListener('DOMContentLoaded', onViewPortResize)
+  window.addEventListener('resize', onViewPortResize)
+
+  watch(
+    isMobileMode,
+    () => {
+      globalIsMobile.value = isMobileMode.value
+    },
+    {
+      immediate: true,
+    },
+  )
+
+  return {
+    isMobileMode,
+  }
+})