fix: create component StorageFileBrowser

bo/src/components/customer/StorageFileBrowser.vue

@@ -0,0 +1,159 @@
+<template>
+    <component :is="Default || 'div'">
+        <div class="p-4">
+            <div v-if="loading" class="flex justify-center py-8">
+                <ULoader />
+            </div>
+            <div v-else-if="error" class="text-red-500">
+                {{ error }}
+            </div>
+            <UTree v-else :items="treeItems" :expanded="expandedFolders">
+                <template #item-wrapper="{ item }">
+                    <div class="flex items-start cursor-pointer" @click="onItemClick(item)">
+                        <div class="flex items-center gap-1">
+                            <UIcon :name="item.icon" :size="30" />
+                            <div class="flex gap-1 items-center">
+                                <span class="text-[15px] font-medium">{{ item.label }}</span>
+                                <UButton v-if="!item.isFolder && item.fileName" size="xxs" color="neutral"
+                                    variant="outline" icon="i-lucide-download"
+                                    @click.stop="downloadFile(item.path, item.fileName)" :ui="{ base: 'ring-0!' }" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </UTree>
+        </div>
+    </component>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useFetchJson } from '@/composable/useFetchJson'
+import Default from '@/layouts/default.vue'
+
+interface FileItemRaw {
+    Name: string
+    IsFolder: boolean
+}
+
+interface FileItem {
+    name: string
+    type: 'file' | 'folder'
+}
+
+interface TreeItem {
+    label: string
+    icon: string
+    children?: TreeItem[]
+    isFolder: boolean
+    path: string
+    value: string
+    fileName?: string
+}
+
+const props = defineProps<{ initialPath?: string }>()
+
+const currentPath = ref(props.initialPath || '')
+const allData = ref<Map<string, FileItem[]>>(new Map())
+const expandedFolders = ref<string[]>([])
+const loading = ref(false)
+const error = ref<string | null>(null)
+
+
+async function fetchFolderContents(path: string): Promise<FileItem[]> {
+    const url = `/api/v1/restricted/storage/list-content/${path}`
+    const data = await useFetchJson<FileItemRaw[]>(url)
+    return (data.items || []).map(i => ({
+        name: i.Name,
+        type: i.IsFolder ? 'folder' : 'file'
+    }))
+}
+
+
+async function loadFolder(path: string) {
+    if (allData.value.has(path)) return
+    loading.value = true
+    error.value = null
+    try {
+        const items = await fetchFolderContents(path)
+        allData.value.set(path, items)
+    } catch (e) {
+        error.value = e instanceof Error ? e.message : 'Failed to load folder contents'
+    } finally {
+        loading.value = false
+    }
+}
+
+
+async function toggleFolder(item: TreeItem) {
+    if (!item.isFolder) return
+
+    if (!expandedFolders.value.includes(item.value)) {
+        expandedFolders.value.push(item.value)
+        await loadFolder(item.value)
+    } else {
+        expandedFolders.value = expandedFolders.value.filter(v => v !== item.value)
+    }
+}
+
+function onItemClick(item: TreeItem) {
+    if (item.isFolder) {
+        toggleFolder(item)
+    }
+}
+
+
+function buildTreeItems(items: FileItem[], path: string): TreeItem[] {
+    return items.map(item => {
+        const itemPath = path ? `${path}/${item.name}` : item.name
+        const isFolder = item.type === 'folder'
+
+        const children = isFolder
+            ? buildTreeItems(allData.value.get(itemPath) || [], itemPath)
+            : undefined
+
+        return {
+            label: item.name,
+
+            icon: isFolder ? 'fxemoji:folder' : 'flat-color-icons:file',
+            isFolder,
+            path: isFolder ? itemPath : path,
+            value: itemPath,
+            fileName: isFolder ? undefined : item.name,
+            children
+        }
+    })
+}
+
+async function downloadFile(path: string, fileName: string) {
+    try {
+        const response = await fetch(`/api/v1/restricted/storage/download-file/${path}/${fileName}`)
+        if (!response.ok) throw new Error('Failed to download file')
+
+        const blob = await response.blob()
+        const url = window.URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = fileName
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+        window.URL.revokeObjectURL(url)
+    } catch (e) {
+        console.error('Download error:', e)
+        alert('Failed to download file')
+    }
+}
+
+const treeItems = computed<TreeItem[]>(() => {
+    const items = allData.value.get(currentPath.value) || []
+    return buildTreeItems(items, currentPath.value)
+})
+
+loadFolder(currentPath.value).then(() => {
+    const rootItems = treeItems.value
+    if (rootItems.length > 0 && rootItems[0].isFolder) {
+        toggleFolder(rootItems[0])
+    }
+})
+</script>