feat(drawer): adds item drawer view

Author: dvcol

src/components/AppComponent.vue

@@ -6,11 +6,10 @@ import { RouterView, useRouter } from 'vue-router';
 import { NavbarComponent } from '~/components/common';
 import GridBackground from '~/components/common/background/GridBackground.vue';
 import PageLoading from '~/components/common/loading/PageLoading.vue';
-import DrawerHeader from '~/components/views/drawer/DrawerHeader.vue';
 import { useAuthSettingsStoreRefs } from '~/stores/settings/auth.store';
 
 const { isAuthenticated } = useAuthSettingsStoreRefs();
-const { currentRoute, push } = useRouter();
+const { currentRoute, push, getRoutes } = useRouter();
 
 const origin = ref();
 const drawer = ref(false);
@@ -20,6 +19,7 @@ watch(
   (_next, _prev) => {
     const isDrawer = !!_next.meta?.drawer;
     drawer.value = isDrawer;
+    if (origin.value && isDrawer) return;
     origin.value = isDrawer ? _prev : undefined;
   },
   {
@@ -29,11 +29,15 @@ watch(
 
 const asideRef = ref();
 
-const onClose = () => {
+const onAfterLeave = () => {
   if (!origin.value) return;
   push(origin.value);
   origin.value = undefined;
 };
+
+const onClose = () => {
+  drawer.value = false;
+};
 </script>
 
 <template>
@@ -66,16 +70,13 @@ const onClose = () => {
           :to="asideRef"
           width="100%"
           close-on-esc
-          :on-after-leave="onClose"
+          :on-after-leave="onAfterLeave"
           auto-focus
         >
-          <NDrawerContent closable>
-            <template #header> <DrawerHeader /> </template>
-            <template #default>
-              <KeepAlive>
-                <component :is="DrawerComponent" />
-              </KeepAlive>
-            </template>
+          <NDrawerContent>
+            <KeepAlive>
+              <component :is="DrawerComponent" @close="onClose" />
+            </KeepAlive>
           </NDrawerContent>
         </NDrawer>
       </RouterView>

src/components/views/drawer/ListItemDrawer.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { NButton } from 'naive-ui';
+import { onActivated } from 'vue';
+
+const props = defineProps({
+  movieId: {
+    type: String,
+    required: false,
+  },
+  personId: {
+    type: String,
+    required: false,
+  },
+  showId: {
+    type: String,
+    required: false,
+  },
+  seasonId: {
+    type: String,
+    required: false,
+  },
+  episodeId: {
+    type: String,
+    required: false,
+  },
+});
+
+const emit = defineEmits<{
+  (event: 'close'): void;
+}>();
+
+onActivated(() => {
+  console.info('MovieDrawer activated', JSON.stringify(props, null, 2));
+});
+</script>
+
+<template>
+  <NButton quaternary @click="emit('close')"> Default </NButton>
+  <div>Movie Drawer</div>
+  <div>movie {{ movieId }}</div>
+  <div>person {{ personId }}</div>
+  <div>show {{ showId }}</div>
+  <div>season {{ seasonId }}</div>
+  <div>episode {{ episodeId }}</div>
+</template>

src/router/create-router.ts

@@ -62,7 +62,7 @@ export const createRouter = ({ baseName = '', baseUrl = import.meta.env.BASE_URL
   });
 
   restoreLastRoute().then(async _route => {
-    await router.push(_route?.name && _route?.name !== Route.Login ? _route : { name: Route.Progress });
+    await router.push(_route?.name !== Route.Login ? _route : { name: Route.Progress });
   });
 
   return router;

src/router/routes.ts

@@ -10,46 +10,34 @@ export enum Route {
   Login = 'login',
 }
 
+const listItemDrawerRoute = {
+  component: () => import('../components/views/drawer/ListItemDrawer.vue'),
+  props: true,
+  meta: { drawer: true },
+};
+
 const drawerRoutes: RouteRecordRaw[] = [
   {
+    ...listItemDrawerRoute,
     path: 'movie/:movieId',
-    component: () => import('../components/views/drawer/MovieDrawer.vue'),
-    props: true,
-    meta: {
-      drawer: true,
-    },
   },
   {
+    ...listItemDrawerRoute,
     path: 'person/:personId',
-    component: () => import('../components/views/drawer/MovieDrawer.vue'),
-    props: true,
-    meta: {
-      drawer: true,
-    },
   },
   {
+    ...listItemDrawerRoute,
     path: 'show/:showId',
-    component: () => import('../components/views/drawer/MovieDrawer.vue'),
-    props: true,
-    meta: {
-      drawer: true,
-    },
-  },
-  {
-    path: 'show/:showId/season/:seasonId',
-    component: () => import('../components/views/drawer/MovieDrawer.vue'),
-    props: true,
-    meta: {
-      drawer: true,
-    },
-  },
-  {
-    path: 'show/:showId/episode/:episodeId',
-    component: () => import('../components/views/drawer/MovieDrawer.vue'),
-    props: true,
-    meta: {
-      drawer: true,
-    },
+    children: [
+      {
+        ...listItemDrawerRoute,
+        path: 'season/:seasonId',
+      },
+      {
+        ...listItemDrawerRoute,
+        path: 'episode/:episodeId',
+      },
+    ],
   },
 ];
 
@@ -76,6 +64,7 @@ export const routes: RouteRecordRaw[] = [
       default: () => import('../components/views/calendar/CalendarComponent.vue'),
       navbar: () => import('../components/views/calendar/CalendarNavbar.vue'),
     },
+    meta: { navbar: true },
     children: drawerRoutes,
   },
   {
@@ -85,6 +74,7 @@ export const routes: RouteRecordRaw[] = [
       default: () => import('../components/views/history/HistoryComponent.vue'),
       navbar: () => import('../components/views/history/HistoryNavbar.vue'),
     },
+    meta: { navbar: true },
     children: drawerRoutes,
   },
   {
@@ -94,6 +84,7 @@ export const routes: RouteRecordRaw[] = [
       default: () => import('../components/views/watchlist/WatchlistComponent.vue'),
       navbar: () => import('../components/views/watchlist/WatchlistNavbar.vue'),
     },
+    meta: { navbar: true },
     children: drawerRoutes,
   },
   {
@@ -103,6 +94,7 @@ export const routes: RouteRecordRaw[] = [
       default: () => import('../components/views/search/SearchComponent.vue'),
       navbar: () => import('../components/views/search/SearchNavbar.vue'),
     },
+    meta: { navbar: true },
     children: drawerRoutes,
   },
   {

src/stores/router.store.ts

@@ -50,4 +50,4 @@ export const useRouterStore = defineStore('router', () => {
   return { baseName, setBaseName, baseUrl, setBaseUrl, initialLocation, routeParam, setRouteParam, lastRoute, setLastRoute, restoreLastRoute };
 });
 
-export const useRouterStoreRefs = () => storeToRefs(useRouterStore());
+export const useRouterStoreRefs: () => ReturnType<typeof storeToRefs<ReturnType<typeof useRouterStore>>> = () => storeToRefs(useRouterStore());