From e37d05b74470561dd0dba092c4c7fca27449779b Mon Sep 17 00:00:00 2001
From: mnenie <121057011+mneniee@users.noreply.github.com>
Date: Sat, 3 Aug 2024 12:22:32 +0300
Subject: [PATCH] feat: change layout system

---
 src/app/App.vue                               |  7 +-
 src/app/providers/router/index.ts             | 20 ++---
 src/app/providers/router/middleware/index.ts  |  1 +
 .../router/middleware/layoutResolver.ts       | 10 +++
 src/app/providers/router/types.ts             |  4 +-
 src/layouts/index.ts                          |  5 +-
 src/layouts/model/index.ts                    |  1 +
 src/layouts/model/types.ts                    | 11 +++
 src/layouts/ui/AppLayout.vue                  |  5 ++
 src/layouts/ui/DefaultLayout.vue              | 81 ++++++++++++++++-
 src/layouts/ui/SidebarLayout.vue              | 87 -------------------
 11 files changed, 125 insertions(+), 107 deletions(-)
 create mode 100644 src/app/providers/router/middleware/index.ts
 create mode 100644 src/app/providers/router/middleware/layoutResolver.ts
 create mode 100644 src/layouts/model/index.ts
 create mode 100644 src/layouts/model/types.ts
 create mode 100644 src/layouts/ui/AppLayout.vue
 delete mode 100644 src/layouts/ui/SidebarLayout.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index ea199a11..d439b271 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useColorMode, useDark } from '@vueuse/core';
 import { computed } from 'vue';
+import { useColorMode, useDark } from '@vueuse/core';
 import { Toaster } from 'vue-sonner';
+import { AppLayout } from '@/layouts';
 
 type ToasterTheme = 'dark' | 'light';
 
@@ -14,12 +15,12 @@ const toasterTheme = computed<ToasterTheme>(() => {
 </script>
 
 <template>
-  <component :is="$route.meta.layout">
+  <AppLayout>
     <RouterView v-slot="{ Component }">
       <KeepAlive :include="['Login', 'Registration']">
         <component :is="Component" />
       </KeepAlive>
     </RouterView>
-  </component>
+  </AppLayout>
   <Toaster :theme="toasterTheme" position="bottom-right" />
 </template>
diff --git a/src/app/providers/router/index.ts b/src/app/providers/router/index.ts
index accfb0a9..da4545b7 100644
--- a/src/app/providers/router/index.ts
+++ b/src/app/providers/router/index.ts
@@ -1,7 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import type { RouterRecord } from './types';
-import { AuthLayout, SidebarLayout } from '@/layouts';
 import { RouteNames } from '@/shared/config/consts';
+import { LayoutsEnum } from '@/layouts/model';
+import { layoutResolverMiddleware } from './middleware';
 
 const routes = [
   {
@@ -9,7 +10,6 @@ const routes = [
     path: '/',
     component: () => import('@/pages/Boards.vue'),
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -18,7 +18,6 @@ const routes = [
     path: '/templates',
     component: () => import('@/pages/Templates.vue'),
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -27,7 +26,6 @@ const routes = [
     path: '/settings',
     component: () => import('@/pages/Settings.vue'),
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -49,7 +47,6 @@ const routes = [
       }
     ],
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -58,7 +55,6 @@ const routes = [
     path: '/board/:id',
     component: () => import('@/pages/Kanban.vue'),
     meta: {
-      layout: SidebarLayout,
       requiresAuth: true
     }
   },
@@ -67,7 +63,7 @@ const routes = [
     path: '/user/login',
     component: () => import('@/pages/Login.vue'),
     meta: {
-      layout: AuthLayout,
+      layout: LayoutsEnum.auth,
       requiresAuth: false
     }
   },
@@ -76,7 +72,7 @@ const routes = [
     path: '/user/registration',
     component: () => import('@/pages/Registration.vue'),
     meta: {
-      layout: AuthLayout,
+      layout: LayoutsEnum.auth,
       requiresAuth: false
     }
   }
@@ -90,7 +86,9 @@ export const router = createRouter({
 router.beforeEach((to, from) => {
   // TODO(@mnenie): Add guards logic
   // Needs to add guard auth logic in router
-  if (to.meta.requiresAuth === true) {
-    return router.push({ name: RouteNames.login });
-  }
+  // if (to.meta.requiresAuth === true) {
+  //   return router.push({ name: RouteNames.login });
+  // }
 });
+
+router.beforeEach(layoutResolverMiddleware);
diff --git a/src/app/providers/router/middleware/index.ts b/src/app/providers/router/middleware/index.ts
new file mode 100644
index 00000000..9ceb0883
--- /dev/null
+++ b/src/app/providers/router/middleware/index.ts
@@ -0,0 +1 @@
+export * from './layoutResolver';
diff --git a/src/app/providers/router/middleware/layoutResolver.ts b/src/app/providers/router/middleware/layoutResolver.ts
new file mode 100644
index 00000000..5997d05b
--- /dev/null
+++ b/src/app/providers/router/middleware/layoutResolver.ts
@@ -0,0 +1,10 @@
+import type { RouteLocationNormalized } from 'vue-router';
+import { LayoutsEnum, LayoutToFileMap } from '@/layouts/model';
+
+export async function layoutResolverMiddleware(route: RouteLocationNormalized) {
+  const { layout } = route.meta;
+  const normalizedLayoutName = layout || LayoutsEnum.default;
+  const fileName = LayoutToFileMap[normalizedLayoutName].split('.vue')[0];
+  const component = await import(`@/layouts/ui/${fileName}.vue`);
+  route.meta.layoutComponent = component.default;
+}
diff --git a/src/app/providers/router/types.ts b/src/app/providers/router/types.ts
index 04b06654..9497598a 100644
--- a/src/app/providers/router/types.ts
+++ b/src/app/providers/router/types.ts
@@ -1,10 +1,12 @@
 import 'vue-router';
 import type { Component } from 'vue';
 import type { RouteRecordRaw } from 'vue-router';
+import type { LayoutsEnum } from '@/layouts/model';
 
 declare module 'vue-router' {
   interface RouteMeta {
-    layout: Component;
+    layout?: LayoutsEnum;
+    layoutComponent?: Component;
     requiresAuth?: boolean;
   }
 }
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 515b25f8..353c0eb5 100644
--- a/src/layouts/index.ts
+++ b/src/layouts/index.ts
@@ -1,5 +1,6 @@
+import AppLayout from './ui/AppLayout.vue';
 import DefaultLayout from './ui/DefaultLayout.vue';
-import SidebarLayout from './ui/SidebarLayout.vue';
+import WelcomeLayout from './ui/WelcomeLayout.vue';
 import AuthLayout from './ui/AuthLayout.vue';
 
-export { DefaultLayout, SidebarLayout, AuthLayout };
+export { AppLayout, DefaultLayout, WelcomeLayout, AuthLayout };
diff --git a/src/layouts/model/index.ts b/src/layouts/model/index.ts
new file mode 100644
index 00000000..fcb073fe
--- /dev/null
+++ b/src/layouts/model/index.ts
@@ -0,0 +1 @@
+export * from './types';
diff --git a/src/layouts/model/types.ts b/src/layouts/model/types.ts
new file mode 100644
index 00000000..dfff1cf0
--- /dev/null
+++ b/src/layouts/model/types.ts
@@ -0,0 +1,11 @@
+export enum LayoutsEnum {
+  default = 'default',
+  auth = 'auth',
+  welcome = 'welcome'
+}
+
+export const LayoutToFileMap: Record<LayoutsEnum, string> = {
+  default: 'DefaultLayout.vue',
+  auth: 'AuthLayout.vue',
+  welcome: 'WelcomeLayout.vue'
+};
diff --git a/src/layouts/ui/AppLayout.vue b/src/layouts/ui/AppLayout.vue
new file mode 100644
index 00000000..a42cef41
--- /dev/null
+++ b/src/layouts/ui/AppLayout.vue
@@ -0,0 +1,5 @@
+<template>
+  <component :is="$route.meta.layoutComponent">
+    <slot />
+  </component>
+</template>
diff --git a/src/layouts/ui/DefaultLayout.vue b/src/layouts/ui/DefaultLayout.vue
index 81b546eb..b52aed0b 100644
--- a/src/layouts/ui/DefaultLayout.vue
+++ b/src/layouts/ui/DefaultLayout.vue
@@ -1,12 +1,87 @@
+<script setup lang="ts">
+// @ts-expect-error missing type
+import { Splitpanes, Pane } from 'splitpanes';
+import 'splitpanes/dist/splitpanes.css';
+import { computed, ref } from 'vue';
+import { Sidebar, HeaderMain } from '@/widgets/layout';
+import { useLocalStorage } from '@vueuse/core';
+import { RouteNames } from '@/shared/config/consts';
+
+const isExpanded = useLocalStorage('isExpanded', true);
+const transitionFl = ref(false);
+
+const widthSidebar = computed(() => {
+  return isExpanded.value ? '22%' : '4%';
+});
+const widthMainContainer = computed(() => {
+  return `calc(100% - ${widthSidebar.value})`;
+});
+const onToggleArea = () => {
+  isExpanded.value = !isExpanded.value;
+  transitionFl.value = true;
+};
+</script>
+
 <template>
-  <div :class="$style.default_layout">
-    <slot />
-  </div>
+  <Splitpanes :class="$style.default_layout">
+    <Pane
+      min-size="4"
+      max-size="22"
+      :size="widthSidebar"
+      :style="{ transition: transitionFl && 'width .2s ease-out' }"
+    >
+      <Sidebar :is-expanded @on-toggle="onToggleArea" />
+    </Pane>
+    <Pane :size="widthMainContainer">
+      <div :class="$style.main_part">
+        <HeaderMain />
+        <div :class="$style.slot" :style="{ padding: $route.name !== RouteNames.board ? '30px 45px' : '0' }">
+          <slot />
+        </div>
+      </div>
+    </Pane>
+  </Splitpanes>
 </template>
 
 <style module lang="scss">
 .default_layout {
+  display: flex;
+  flex-direction: row;
+  flex: 1 1 0%;
+  width: 100%;
   height: 100dvh;
+
+  .main_part {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .slot {
+      background-color: var(--zinc-50);
+      position: relative;
+      padding: 30px 45px;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+
+.new_header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 15px;
   width: 100%;
+  background-color: var(--zinc-50);
+}
+
+:global(.dark) {
+  .default_layout {
+    .main_part {
+      .slot {
+        background-color: var(--zinc-700);
+      }
+    }
+  }
 }
 </style>
diff --git a/src/layouts/ui/SidebarLayout.vue b/src/layouts/ui/SidebarLayout.vue
deleted file mode 100644
index 162f0cd0..00000000
--- a/src/layouts/ui/SidebarLayout.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<script setup lang="ts">
-// @ts-expect-error missing type
-import { Splitpanes, Pane } from 'splitpanes';
-import 'splitpanes/dist/splitpanes.css';
-import { computed, ref } from 'vue';
-import { Sidebar, HeaderMain } from '@/widgets/layout';
-import { useLocalStorage } from '@vueuse/core';
-import { RouteNames } from '@/shared/config/consts';
-
-const isExpanded = useLocalStorage('isExpanded', true);
-const transitionFl = ref(false);
-
-const widthSidebar = computed(() => {
-  return isExpanded.value ? '22%' : '4%';
-});
-const widthMainContainer = computed(() => {
-  return `calc(100% - ${widthSidebar.value})`;
-});
-const onToggleArea = () => {
-  isExpanded.value = !isExpanded.value;
-  transitionFl.value = true;
-};
-</script>
-
-<template>
-  <Splitpanes :class="$style.sidebar_layout">
-    <Pane
-      min-size="4"
-      max-size="22"
-      :size="widthSidebar"
-      :style="{ transition: transitionFl && 'width .2s ease-out' }"
-    >
-      <Sidebar :is-expanded @on-toggle="onToggleArea" />
-    </Pane>
-    <Pane :size="widthMainContainer">
-      <div :class="$style.main_part">
-        <HeaderMain />
-        <div :class="$style.slot" :style="{ padding: $route.name !== RouteNames.board ? '30px 45px' : '0' }">
-          <slot />
-        </div>
-      </div>
-    </Pane>
-  </Splitpanes>
-</template>
-
-<style module lang="scss">
-.sidebar_layout {
-  display: flex;
-  flex-direction: row;
-  flex: 1 1 0%;
-  width: 100%;
-  height: 100dvh;
-
-  .main_part {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    .slot {
-      background-color: var(--zinc-50);
-      position: relative;
-      padding: 30px 45px;
-      height: 100%;
-      width: 100%;
-    }
-  }
-}
-
-.new_header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 15px;
-  width: 100%;
-  background-color: var(--zinc-50);
-}
-
-:global(.dark) {
-  .sidebar_layout {
-    .main_part {
-      .slot {
-        background-color: var(--zinc-700);
-      }
-    }
-  }
-}
-</style>