feat: implement entry provider

Author: zzhenryquezz

packages/app/src/components/IsAppDrawerMini.vue

@@ -14,7 +14,7 @@ const links = [
     {
         to: '/app-pages/directory',
         icon: 'mdi:folder',
-        label: 'Explorer'
+        label: 'fileExplorer'
     },
     {
         to: '/workspace-selector',

packages/app/src/composables/defineEntryMiddleware.ts

@@ -1,14 +1,12 @@
 import type { DriveEntry } from "./useDrive";
-import type { RouteRecordRaw, Router  } from 'vue-router'
+import type { RouteLocationRaw, Router  } from 'vue-router'
 
 export interface EntryMiddlewareContext {
     entry: DriveEntry
-    route: RouteRecordRaw
-    router: Router
 }
 
 export interface EntryMiddleware {
-    (context: EntryMiddlewareContext): Promise<any>
+    (context: EntryMiddlewareContext): Promise<RouteLocationRaw | null> | RouteLocationRaw | null
 }
 
 export function defineEntryMiddleware(middleware: EntryMiddleware) {

packages/app/src/composables/useDrive.ts

@@ -5,6 +5,7 @@ export interface DriveEntry {
 }
 
 export interface Drive {
+    get: (path: string) => Promise<DriveEntry | null>
     list: (path: string) => Promise<DriveEntry[]>
     read: (path: string) => Promise<string>
     write: (path: string, content: any) => Promise<void>

packages/app/src/composables/useDriveFileSystemApi.ts

@@ -2,6 +2,12 @@ import type { Drive, DriveEntry } from "./useDrive";
 
 export function useDriveFileSystemApi(handle: FileSystemDirectoryHandle): Drive {
 
+    const dirname = (path: string) => {
+        const args = path.split('/').slice(0, -1).join('/')
+
+        return args === '' ? '/' : args
+    }
+
     const list: Drive['list'] = async (path) => {
 
         const result = [] as DriveEntry[]
@@ -35,6 +41,24 @@ export function useDriveFileSystemApi(handle: FileSystemDirectoryHandle): Drive
         return result
     }
 
+    const get: Drive['get'] = async (path) => {
+
+        if (path === '/') {
+            return {
+                path: '/',
+                type: 'directory'
+            }
+        }
+
+        const directory = dirname(path)
+
+        const allParent = await list(dirname(path))
+
+        const entry = allParent.find(e => e.path === path.split('/').pop())
+
+        return entry || null
+    }
+
     const read: Drive['read'] = async (path) => {
         throw new Error('Not implemented')
     }
@@ -43,5 +67,5 @@ export function useDriveFileSystemApi(handle: FileSystemDirectoryHandle): Drive
         throw new Error('Not implemented')
     }
 
-    return { list, read, write }
+    return { list, get, read, write }
 }

packages/app/src/pages/AppPage/AppPage.vue

@@ -1,21 +1,18 @@
 <script lang="ts" setup>
 
 import type { AppPage } from '@/composables/defineAppPage'
-import Directory from './AppPageDirectory.vue';
+import AppPageDirectory from './AppPageDirectory.vue';
+import AppPageFile from './AppPageFile.vue';
 
 const name = defineProp('name', {
     type: String,
     required: true
 })
 
-const pages = shallowRef<AppPage[]>([])
-
-const directoryPage = defineAppPage({
-    name: 'directory',
-    component: Directory,
-})
-
-pages.value.push(directoryPage)
+const pages = shallowRef<AppPage[]>([
+    defineAppPage({ name: 'directory', component: AppPageDirectory }),
+    defineAppPage({ name: 'file', component: AppPageFile }),
+])
 
 const current = computed(() => pages.value.find(p => p.name === name.value))
 

packages/app/src/pages/AppPage/AppPageFile.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+const route = useRoute()
+
+const path = computed(() => {
+    return route.query.path as string
+})
+</script>
+
+<template>
+    <div>
+        File {{ path }}
+    </div>
+</template>

packages/app/src/pages/EntryProvider/EntryProvider.vue

@@ -1,12 +1,78 @@
 <script lang="ts" setup>
-
-import type { AppPage } from '@/composables/defineAppPage'
 import type { EntryMiddleware } from '@/composables/defineEntryMiddleware'
+import type { RouteLocationRaw } from 'vue-router';
+
+// general
+
+const router = useRouter()
+const { drive } = useDrive()
 
+// middlewares
 const middlewares = ref<EntryMiddleware[]>([])
 
+const main = defineEntryMiddleware((ctx) => {
+    if (ctx.entry.type !== 'directory') {
+        return {
+            path: '/app-pages/file',
+            query: {
+                path: ctx.entry.path
+            }
+        }
+    }
+    
+    return {
+        path: '/app-pages/directory',
+        query: {
+            path: ctx.entry.path
+        }
+    }
+})
+
+middlewares.value.push(main)
+
+// load
+
+const path = defineProp<string | string[]>('path', {
+    type: [String, Array],
+    default: '/'
+})
+
+async function load(){
+
+    const args = Array.isArray(path.value) ? path.value : [path.value]
+
+    const filename = `/${args.join('/')}`
+
+    const entry = await drive.value.get(filename)
+
+    if (!entry) {
+        alert('Entry not found')
+        return
+    }
+
+    let result: RouteLocationRaw | undefined
+
+    for await (const middleware of middlewares.value) {
+        const middlewareResult = await middleware({ entry })
+
+        if (middlewareResult) {
+            result = middlewareResult
+        }
+    }
+
+    if (!result) {
+        alert('Route not found')
+        return
+    }
+
+    router.replace(result)
+}
+
+onMounted(load)
+
+
 </script>
 
 <template>
-    <div>file provider</div>
+    <div />
 </template>

packages/app/src/pages/EntryProvider/middlewares/directory.ts

@@ -43,7 +43,9 @@ async function select(workspace: Workspace){
 
     setDrive(workspaceDrive)
 
-    router.push('/app-pages/directory')
+    setTimeout(() => {
+        router.push('/entries')
+    }, 100)
 }
 
 </script>