From 6a076ce363bde6fc8658980d3c67605407163271 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 8 Aug 2022 19:19:25 +0200
Subject: [PATCH] feat(gui-v2): add `base` layout

---
 packages/nc-gui-v2/app.vue                    | 215 +----------------
 packages/nc-gui-v2/components.d.ts            |   2 +-
 .../nc-gui-v2/composables/useSidebar/index.ts |   4 +-
 packages/nc-gui-v2/layouts/base.vue           | 223 ++++++++++++++++++
 packages/nc-gui-v2/layouts/default.vue        |  12 +-
 packages/nc-gui-v2/plugins/state.ts           |   3 +-
 6 files changed, 237 insertions(+), 222 deletions(-)
 create mode 100644 packages/nc-gui-v2/layouts/base.vue

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 99e040cdb0..facbf09cbd 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -1,218 +1,7 @@
 <script lang="ts" setup>
-import { breakpointsTailwind } from '@vueuse/core'
-import { navigateTo } from '#app'
-import { computed, ref, useBreakpoints, useGlobal, useProject, useRoute, useRouter, useSidebar } from '#imports'
-
-/** get current breakpoints (for enabling sidebar) */
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
-const { signOut, signedIn, isLoading, user } = useGlobal()
-
-const { isOpen } = useSidebar({ isOpen: signedIn.value && breakpoints.isGreater('md') })
-
-const { project } = useProject()
-
-const router = useRouter()
-
-const route = useRoute()
-
-const sidebar = ref<HTMLDivElement>()
-
-const globalSearch = ref('')
-
-const email = computed(() => user.value?.email ?? '---')
-
-const logout = () => {
-  signOut()
-  navigateTo('/signin')
-}
+//
 </script>
 
 <template>
-  <a-layout id="app-layout">
-    <a-layout-sider
-      :collapsed="true"
-      width="50"
-      collapsed-width="0"
-      class="nc-sidebar-left !bg-primary h-full"
-      :trigger="null"
-      collapsible
-      theme="light"
-    >
-      <a-dropdown placement="bottom" :trigger="['click']">
-        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105">
-          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-        </div>
-
-        <template v-if="signedIn" #overlay>
-          <a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded">
-            <a-menu-item-group title="User Settings">
-              <a-menu-item key="email" class="!rounded-t">
-                <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
-                  <MdiAt class="mt-1 group-hover:text-success" />
-                  &nbsp;
-                  <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
-                </nuxt-link>
-              </a-menu-item>
-
-              <a-menu-divider class="!m-0" />
-
-              <a-menu-item key="signout" class="!rounded-b">
-                <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
-                  <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
-                  <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
-                    {{ $t('general.signOut') }}
-                  </span>
-                </div>
-              </a-menu-item>
-            </a-menu-item-group>
-          </a-menu>
-        </template>
-      </a-dropdown>
-
-      <div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
-        <a-dropdown :trigger="['contextmenu']" placement="right">
-          <div :class="[route.name === 'index' ? 'active' : '']" class="nc-sidebar-left-item" @click="navigateTo('/')">
-            <MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
-          </div>
-
-          <template #overlay>
-            <a-menu class="mt-6 select-none !py-0 min-w-32 leading-8 !rounded">
-              <a-menu-item-group>
-                <template #title>
-                  <span class="cursor-pointer prose-sm text-gray-500 hover:text-primary" @click="navigateTo('/')">
-                    {{ $t('objects.projects') }}
-                  </span>
-                </template>
-
-                <a-menu-item class="active:(ring ring-pink-500)">
-                  <div
-                    v-t="['c:project:create:xcdb']"
-                    class="group flex items-center gap-2 py-2 hover:text-primary"
-                    @click="navigateTo('/project/create')"
-                  >
-                    <MdiPlus class="text-lg group-hover:text-pink-500" />
-                    {{ $t('activity.createProject') }}
-                  </div>
-                </a-menu-item>
-
-                <a-menu-item class="rounded-b active:(ring ring-pink-500)">
-                  <div
-                    v-t="['c:project:create:extdb']"
-                    class="group flex items-center gap-2 py-2 hover:text-primary"
-                    @click="navigateTo('/project/create-external')"
-                  >
-                    <MdiDatabaseOutline class="text-lg group-hover:text-pink-500" />
-                    <div v-html="$t('activity.createProjectExtended.extDB')" />
-                  </div>
-                </a-menu-item>
-              </a-menu-item-group>
-            </a-menu>
-          </template>
-        </a-dropdown>
-
-        <a-tooltip placement="right">
-          <template v-if="project" #title>{{ project.title }}</template>
-
-          <div
-            :class="[route.name.includes('nc-projectId') ? 'active' : 'pointer-events-none !text-gray-400']"
-            class="nc-sidebar-left-item"
-            @click="navigateTo(`/nc/${route.params.projectId}`)"
-          >
-            <MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
-          </div>
-        </a-tooltip>
-      </div>
-    </a-layout-sider>
-
-    <a-layout class="!flex-col">
-      <a-layout-header class="flex !bg-primary items-center text-white !px-[1px] shadow-lg">
-        <div id="header-start" class="w-[250px] flex items-center px-1 h-full" />
-
-        <div class="hidden flex justify-center">
-          <div v-show="isLoading" class="flex items-center gap-2 ml-3">
-            {{ $t('general.loading') }}
-            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
-          </div>
-        </div>
-
-        <div class="flex-1" />
-
-        <div v-if="signedIn" class="text-white">
-          <div class="flex items-center px-4 gap-4">
-            <a-tooltip placement="bottom">
-              <template #title> Go back </template>
-
-              <MaterialSymbolsArrowBackRounded
-                class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl"
-                @click="router.go(-1)"
-              />
-            </a-tooltip>
-
-            <a-tooltip placement="bottom">
-              <template #title>Go forward</template>
-
-              <MaterialSymbolsArrowForwardRounded
-                class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl"
-                @click="router.go(+1)"
-              />
-            </a-tooltip>
-
-            <a-input
-              v-model:value="globalSearch"
-              class="nc-global-search group hover:ring active:ring-pink-500 focus:ring-pink-500 flex"
-              size="small"
-              placeholder="CMD + K"
-            >
-              <template #prefix>
-                <MdiMagnify class="transform text-gray-400 group-hover:(scale-105 text-pink-500)" />
-              </template>
-            </a-input>
-          </div>
-        </div>
-
-        <div class="flex-1" />
-
-        <a-tooltip placement="right">
-          <template #title> Switch language </template>
-
-          <div class="flex pr-4 items-center">
-            <GeneralLanguage class="cursor-pointer text-2xl" />
-          </div>
-        </a-tooltip>
-      </a-layout-header>
-
-      <div class="w-full h-full">
-        <NuxtPage />
-      </div>
-    </a-layout>
-  </a-layout>
+  <NuxtPage />
 </template>
-
-<style lang="scss" scoped>
-.nc-sidebar-left {
-  :deep(.ant-layout-sider-children) {
-    @apply flex flex-col items-center;
-  }
-
-  .nc-sidebar-left-item {
-    @apply flex w-full justify-center items-center h-12 group p-2;
-
-    &.active {
-      @apply bg-pink-500 border-t-1 border-b-1;
-    }
-  }
-}
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-.nc-global-search {
-  @apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
-}
-</style>
diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 7d19ae3f5b..fc634de551 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -90,9 +90,9 @@ declare module '@vue/runtime-core' {
     MdiPlusIcon: typeof import('~icons/mdi/plus-icon')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
-    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
+    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     MdiTableBorder: typeof import('~icons/mdi/table-border')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
diff --git a/packages/nc-gui-v2/composables/useSidebar/index.ts b/packages/nc-gui-v2/composables/useSidebar/index.ts
index e56904168c..bcfa661452 100644
--- a/packages/nc-gui-v2/composables/useSidebar/index.ts
+++ b/packages/nc-gui-v2/composables/useSidebar/index.ts
@@ -8,8 +8,10 @@ interface UseSidebarProps {
 /**
  * Injection state for sidebars
  *
- * Use `provideSidebar` to provide the injection state on current component level (will affect all childrens injection)
+ * Use `provideSidebar` to provide the injection state on current component level (will affect all children injections)
  * Use `useSidebar` to use the injection state on current component level
+ *
+ * If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no injection state can be found
  */
 const [setup, use] = useInjectionState((props: UseSidebarProps = {}) => {
   const [isOpen, toggle] = useToggle(props.isOpen ?? false)
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
new file mode 100644
index 0000000000..3e42028c9c
--- /dev/null
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -0,0 +1,223 @@
+<script lang="ts" setup>
+import { breakpointsTailwind } from '@vueuse/core'
+import { navigateTo } from '#app'
+import { computed, ref, useBreakpoints, useGlobal, useProject, useRoute, useRouter, useSidebar } from '#imports'
+
+/** get current breakpoints (for enabling sidebar) */
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
+const { signOut, signedIn, isLoading, user } = useGlobal()
+
+const { isOpen } = useSidebar({ isOpen: signedIn.value && breakpoints.isGreater('md') })
+
+const { project } = useProject()
+
+const router = useRouter()
+
+const route = useRoute()
+
+const sidebar = ref<HTMLDivElement>()
+
+const globalSearch = ref('')
+
+const email = computed(() => user.value?.email ?? '---')
+
+const logout = () => {
+  signOut()
+  navigateTo('/signin')
+}
+</script>
+
+<template>
+  <a-layout id="app-layout">
+    <!-- todo: mini sidebar on the left with navigational icons, disabled currently -->
+    <a-layout-sider
+      :collapsed="true"
+      width="50"
+      collapsed-width="0"
+      class="nc-sidebar-left !bg-primary h-full"
+      :trigger="null"
+      collapsible
+      theme="light"
+    >
+      <a-dropdown placement="bottom" :trigger="['click']">
+        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105">
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+        </div>
+
+        <template v-if="signedIn" #overlay>
+          <a-menu class="ml-2 !py-0 min-w-32 leading-8 !rounded">
+            <a-menu-item-group title="User Settings">
+              <a-menu-item key="email" class="!rounded-t">
+                <nuxt-link v-t="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
+                  <MdiAt class="mt-1 group-hover:text-success" />
+                  &nbsp;
+                  <span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
+                </nuxt-link>
+              </a-menu-item>
+
+              <a-menu-divider class="!m-0" />
+
+              <a-menu-item key="signout" class="!rounded-b">
+                <div v-t="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
+                  <MdiLogout class="dark:text-white group-hover:(!text-red-500)" />&nbsp;
+                  <span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
+                    {{ $t('general.signOut') }}
+                  </span>
+                </div>
+              </a-menu-item>
+            </a-menu-item-group>
+          </a-menu>
+        </template>
+      </a-dropdown>
+
+      <div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
+        <a-dropdown :trigger="['contextmenu']" placement="right">
+          <div :class="[route.name === 'index' ? 'active' : '']" class="nc-sidebar-left-item" @click="navigateTo('/')">
+            <MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
+          </div>
+
+          <template #overlay>
+            <a-menu class="mt-6 select-none !py-0 min-w-32 leading-8 !rounded">
+              <a-menu-item-group>
+                <template #title>
+                  <span class="cursor-pointer prose-sm text-gray-500 hover:text-primary" @click="navigateTo('/')">
+                    {{ $t('objects.projects') }}
+                  </span>
+                </template>
+
+                <a-menu-item class="active:(ring ring-pink-500)">
+                  <div
+                    v-t="['c:project:create:xcdb']"
+                    class="group flex items-center gap-2 py-2 hover:text-primary"
+                    @click="navigateTo('/project/create')"
+                  >
+                    <MdiPlus class="text-lg group-hover:text-pink-500" />
+                    {{ $t('activity.createProject') }}
+                  </div>
+                </a-menu-item>
+
+                <a-menu-item class="rounded-b active:(ring ring-pink-500)">
+                  <div
+                    v-t="['c:project:create:extdb']"
+                    class="group flex items-center gap-2 py-2 hover:text-primary"
+                    @click="navigateTo('/project/create-external')"
+                  >
+                    <MdiDatabaseOutline class="text-lg group-hover:text-pink-500" />
+                    <div v-html="$t('activity.createProjectExtended.extDB')" />
+                  </div>
+                </a-menu-item>
+              </a-menu-item-group>
+            </a-menu>
+          </template>
+        </a-dropdown>
+
+        <a-tooltip placement="right">
+          <template v-if="project" #title>{{ project.title }}</template>
+
+          <div
+            :class="[route.name.includes('nc-projectId') ? 'active' : 'pointer-events-none !text-gray-400']"
+            class="nc-sidebar-left-item"
+            @click="navigateTo(`/nc/${route.params.projectId}`)"
+          >
+            <MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
+          </div>
+        </a-tooltip>
+      </div>
+    </a-layout-sider>
+
+    <slot name="sidebar" />
+
+    <a-layout class="!flex-col">
+      <a-layout-header class="flex !bg-primary items-center text-white !px-[1px] shadow-lg">
+        <slot name="header-start" />
+
+        <div id="header-start" class="w-[250px] flex items-center px-1 h-full" />
+
+        <div class="hidden flex justify-center">
+          <div v-show="isLoading" class="flex items-center gap-2 ml-3">
+            {{ $t('general.loading') }}
+            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
+          </div>
+        </div>
+
+        <div class="flex-1" />
+
+        <div v-if="signedIn" class="text-white">
+          <div class="flex items-center px-4 gap-4">
+            <a-tooltip placement="bottom">
+              <template #title> Go back </template>
+
+              <MaterialSymbolsArrowBackRounded
+                class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl"
+                @click="router.go(-1)"
+              />
+            </a-tooltip>
+
+            <a-tooltip placement="bottom">
+              <template #title>Go forward</template>
+
+              <MaterialSymbolsArrowForwardRounded
+                class="cursor-pointer transform hover:(scale-115 text-pink-500) text-xl"
+                @click="router.go(+1)"
+              />
+            </a-tooltip>
+
+            <a-input
+              v-model:value="globalSearch"
+              class="nc-global-search group hover:ring active:ring-pink-500 focus:ring-pink-500 flex"
+              size="small"
+              placeholder="CMD + K"
+            >
+              <template #prefix>
+                <MdiMagnify class="transform text-gray-400 group-hover:(scale-105 text-pink-500)" />
+              </template>
+            </a-input>
+          </div>
+        </div>
+
+        <div class="flex-1" />
+
+        <a-tooltip placement="right">
+          <template #title> Switch language </template>
+
+          <div class="flex pr-4 items-center">
+            <GeneralLanguage class="cursor-pointer text-2xl" />
+          </div>
+        </a-tooltip>
+      </a-layout-header>
+
+      <div class="w-full h-full">
+        <slot />
+      </div>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+.nc-sidebar-left {
+  :deep(.ant-layout-sider-children) {
+    @apply flex flex-col items-center;
+  }
+
+  .nc-sidebar-left-item {
+    @apply flex w-full justify-center items-center h-12 group p-2;
+
+    &.active {
+      @apply bg-pink-500 border-t-1 border-b-1;
+    }
+  }
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+
+.nc-global-search {
+  @apply dark:(bg-gray-700 !text-white) !appearance-none my-1 border-1 border-solid border-primary/50 rounded;
+}
+</style>
diff --git a/packages/nc-gui-v2/layouts/default.vue b/packages/nc-gui-v2/layouts/default.vue
index 77634f91c7..a82dd3a880 100644
--- a/packages/nc-gui-v2/layouts/default.vue
+++ b/packages/nc-gui-v2/layouts/default.vue
@@ -18,11 +18,13 @@ export default {
 </script>
 
 <template>
-  <a-layout-content>
-    <teleport v-if="$slots.sidebar" to="#sidebar">
+  <NuxtLayout name="base">
+    <template #sidebar>
       <slot name="sidebar" />
-    </teleport>
+    </template>
 
-    <slot />
-  </a-layout-content>
+    <a-layout-content>
+      <slot />
+    </a-layout-content>
+  </NuxtLayout>
 </template>
diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts
index ea826f0f85..21220bf6da 100644
--- a/packages/nc-gui-v2/plugins/state.ts
+++ b/packages/nc-gui-v2/plugins/state.ts
@@ -1,6 +1,5 @@
-import { breakpointsTailwind } from '@vueuse/core'
 import { defineNuxtPlugin } from '#app'
-import { useBreakpoints, useDark, useGlobal, useSidebar, watch } from '#imports'
+import { useDark, useGlobal, watch } from '#imports'
 
 /**
  * Initialize global state and watches for changes