From d5aa4382952657fb05a40d33a76658b666a1d49a Mon Sep 17 00:00:00 2001
From: Daniel Spaude <daniel@spaude.de>
Date: Sat, 7 Jan 2023 09:25:00 +0100
Subject: [PATCH] mobile optimisations - work on merging right and left sidebar
 (WIP)

---
 .../nc-gui/components/dashboard/TreeView.vue  |  2 +
 .../components/smartsheet/sidebar/MenuTop.vue | 45 ++++++++++---------
 .../components/smartsheet/sidebar/mobile.vue  | 10 +++++
 .../nc-gui/components/tabs/Smartsheet.vue     |  6 ++-
 .../pages/[projectType]/[projectId]/index.vue | 22 ++++++++-
 .../[projectId]/index/index/index.vue         |  2 +-
 6 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index a36f9a3a85..49ba443b78 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -582,6 +582,7 @@ const setIcon = async (icon: string, table: TableType) => {
                   :key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`"
                   :nc-base="bases[0].id"
                 >
+                MARKER TABLES IN LEFT SIDEBAR
                   <div
                     v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
                     :key="table.id"
@@ -669,6 +670,7 @@ const setIcon = async (icon: string, table: TableType) => {
                       </div>
                     </GeneralTooltip>
                   </div>
+                  MARKER TABLES IN LEFT SIDEBAR END
                 </div>
               </div>
             </div>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index 5fe7476271..ca3f10f2d9 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -234,27 +234,30 @@ const setIcon = async (icon: string, view: ViewType) => {
 </script>
 
 <template>
-  <a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu flex-1" :selected-keys="selected">
-    <!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes -->
-    <SmartsheetSidebarRenameableMenuItem
-      v-for="view of views"
-      :id="view.id"
-      :key="view.id"
-      :view="view"
-      :on-validate="validate"
-      class="nc-view-item transition-all ease-in duration-300"
-      :class="{
-        'bg-gray-100': isMarked === view.id,
-        'active': activeView?.id === view.id,
-        [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
-      }"
-      @change-view="changeView"
-      @open-modal="$emit('openModal', $event)"
-      @delete="openDeleteDialog"
-      @rename="onRename"
-      @select-icon="setIcon($event, view)"
-    />
-  </a-menu>
+  <div>
+    views in menutop: {{ JSON.stringify(views) }}
+    <a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu flex-1" :selected-keys="selected">
+      <!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes -->
+      <SmartsheetSidebarRenameableMenuItem
+        v-for="view of views"
+        :id="view.id"
+        :key="view.id"
+        :view="view"
+        :on-validate="validate"
+        class="nc-view-item transition-all ease-in duration-300"
+        :class="{
+          'bg-gray-100': isMarked === view.id,
+          'active': activeView?.id === view.id,
+          [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
+        }"
+        @change-view="changeView"
+        @open-modal="$emit('openModal', $event)"
+        @delete="openDeleteDialog"
+        @rename="onRename"
+        @select-icon="setIcon($event, view)"
+      />
+    </a-menu>
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue b/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
index 39fcc9b51e..d5d0aed288 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/mobile.vue
@@ -135,11 +135,21 @@ function onOpenModal({
     close(1000)
   }
 }
+
+onMounted(async () => {
+  await loadViews()
+})
+
 </script>
 
 <template>
   <div>
     MOBILE
+    <!-- <br />
+    META: {{ JSON.stringify(meta) }} -->
+    <br />
+    VIEWS: {{ JSON.stringify(views.length) }}
+    <br />
     <a-layout-sider
       ref="sidebar"
       :collapsed="sidebarCollapsed"
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index e138c0694d..a161bdee9c 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -103,13 +103,15 @@ onMounted(() => {
   $globalEventBus.on(FOO)
 })
 
+// SmartsheetSidebarMobile MARKER
 </script>
 
 <template>
   <div class="nc-container flex h-full">
-    <SmartsheetSidebarMobile v-if="meta && isMobileMode" v-show="isMobileRightSidebarOpen" class="nc-left-sidebar-mobile" />
+    <!-- {{  JSON.stringify(metas) }} -->
+    <!-- <SmartsheetSidebarMobile v-if="meta && isMobileMode" v-show="isMobileRightSidebarOpen" class="nc-left-sidebar-mobile" /> -->
     <div class="flex flex-col h-full flex-1 min-w-0" ref="mainArea">
-      <LazySmartsheetToolbar />
+      LazySmartsheetToolbar: <LazySmartsheetToolbar />
 
       <Transition name="layout" mode="out-in">
         <template v-if="meta">
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index 9f3efb8a18..53ae14d86b 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
+import type { TableType } from 'nocodb-sdk'
 import type { GlobalEvents } from '~/lib'
 import {
   TabType,
@@ -41,6 +42,8 @@ const { t } = useI18n()
 
 const { $e, $globalEventBus } = useNuxtApp()
 
+const { activeTab } = useTabs()
+
 const route = useRoute()
 
 const router = useRouter()
@@ -246,6 +249,18 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
     }
   }
 })
+
+// const { bases, tables, loadTables } = useProject()
+const { metas } = useMetas()
+
+// const { tables } = useProject()
+
+// const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.id : null))
+
+const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])
+
+provide(MetaInj, meta)
+
 </script>
 
 <template>
@@ -586,7 +601,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
             :class="{ 'nc-sidebar-left-toggle-icon': !isMobileMode }"
           >
             <!-- <div>OUTER INDEX - isOpen: {{ isOpen }}</div> -->
-            <MdiBackburger
+            FOO<MdiBackburger
               v-e="['c:grid:toggle-navdraw']"
               class="cursor-pointer transform transition-transform duration-500"
               :class="{ 'rotate-180': !isOpen }"
@@ -596,6 +611,11 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
         </div>
 
         <LazyDashboardTreeView @create-base-dlg="toggleDialog(true, 'dataSources')" />
+        <!-- v-show="isMobileRightSidebarOpen" -->
+        SmartsheetSidebarMobile IN INDEX<SmartsheetSidebarMobile
+          v-if="meta && isMobileMode"
+          class="nc-left-sidebar-mobile"
+        />SmartsheetSidebarMobile IN INDEX END
       </a-layout-sider>
     </template>
 
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue
index aa95232f38..8821bbf693 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index/index.vue
@@ -188,7 +188,7 @@ function onDropZoneClick(e: MouseEvent) {
         </div>
 
         <a-button type="primary" ghost class="create-table-btn">
-          <span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">{{ $t('tooltip.addTable') }}</span>
+          TEST<span class="prose text-[1rem] text-primary z-50" @click.stop="openCreateTable">{{ $t('tooltip.addTable') }}</span>
         </a-button>
       </div>
     </div>