63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
// @ts-ignore
|
|
import dashboardData from '~/dashboard.yml';
|
|
|
|
const route = useRoute();
|
|
const slugPath = Array.isArray(route.params.slug) ? route.params.slug.filter(Boolean) : (route.params.slug ? route.params.slug.split('/').filter(Boolean) : []);
|
|
|
|
// The imported data is an array of items
|
|
const allItems = computed(() => dashboardData || []);
|
|
|
|
let currentFolderId: string | null = null;
|
|
let currentFolder: any = null;
|
|
|
|
// Resolve current folder based on the slug path
|
|
for (const part of slugPath) {
|
|
const folder = allItems.value.find((item: any) => item.type === 'folder' && item.slug === part && item.parentId === currentFolderId);
|
|
if (folder) {
|
|
currentFolder = folder;
|
|
currentFolderId = folder.id;
|
|
}
|
|
}
|
|
|
|
// Get children of the current folder
|
|
const items = computed(() => {
|
|
return allItems.value
|
|
.filter((item: any) => item.parentId === currentFolderId)
|
|
.sort((a: any, b: any) => (a.order || 0) - (b.order || 0));
|
|
});
|
|
|
|
const breadcrumbs = computed(() => {
|
|
let path = '';
|
|
const crumbs = [{ label: 'Desktop', to: '/' }];
|
|
|
|
slugPath.forEach(part => {
|
|
path += `/${part}`;
|
|
crumbs.push({ label: part, to: path });
|
|
});
|
|
|
|
return crumbs;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-full flex flex-col p-6">
|
|
<div class="flex items-center justify-between mb-8">
|
|
<UBreadcrumb :items="breadcrumbs" class="text-xl" />
|
|
</div>
|
|
|
|
<!-- Grid -->
|
|
<div class="flex-1 overflow-auto">
|
|
<div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-6">
|
|
<DesktopItem v-for="item in items" :key="item.id" :item="item" />
|
|
</div>
|
|
|
|
<div v-if="items.length === 0" class="text-white/50 flex items-center justify-center h-64 text-lg">
|
|
This folder is empty.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|