Peaceultime/obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New useContent composable to store global navigation state. Fixes for Markdown and Canvas

Browse Source
This commit is contained in:
Peaceultime
2024-12-30 20:46:24 +01:00
parent 031a51c2fe
commit 9515132659
31 changed files with 320 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
pages/explore/[...path].vue
View File

@@ -1,24 +1,12 @@
<template>
<div v-if="status === 'pending'" class="flex">
<Head>
<Title>d[any] - Chargement</Title>
</Head>
<Loading />
</div>
<div class="flex flex-1 justify-start items-start" v-else-if="overview">
<div class="flex flex-1 justify-start items-start" v-if="overview">
<Head>
<Title>d[any] - {{ overview.title }}</Title>
</Head>
<Markdown v-if="overview.type === 'markdown'" :overview="overview" />
<Canvas v-else-if="overview.type === 'canvas'" :overview="overview" />
<Markdown v-if="overview.type === 'markdown'" :path="path" />
<Canvas v-else-if="overview.type === 'canvas'" :path="path" />
<ProseH2 v-else class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
</div>
<div v-else-if="status === 'error'">
<Head>
<Title>d[any] - Erreur</Title>
</Head>
<span>{{ error?.message }}</span>
</div>
<div v-else>
<Head>
<Title>d[any] - Erreur</Title>
@@ -31,5 +19,6 @@
const route = useRouter().currentRoute;
const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
const { data: overview, status, error } = await useFetch(`/api/file/overview/${encodeURIComponent(path.value)}`, { watch: [route, path], });
const { content } = useContent();
const overview = computed(() => content.value.find(e => e.path === path.value));
</script>

87
pages/explore/edit/index.vue
View File

@@ -83,7 +83,7 @@
</div>
</div>
<DraggableTree class="ps-4 pe-2 xl:text-base text-sm"
:items="navigation ?? undefined" :get-key="(item: Partial<ProjectExtendedItem>) => item.path !== undefined ? getPath(item as ProjectExtendedItem) : ''" @updateTree="drop"
:items="navigation ?? undefined" :get-key="(item: Partial<TreeItemEditable>) => item.path !== undefined ? getPath(item as TreeItemEditable) : ''" @updateTree="drop"
v-model="selected" :defaultExpanded="defaultExpanded" >
<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, item }">
<div class="flex flex-1 items-center px-2 max-w-full pe-4" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level - 0.5}em` }">
@@ -175,20 +175,16 @@
import { Icon } from '@iconify/vue/dist/iconify.js';
import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
import { parsePath } from '#shared/general.utils';
import type { ProjectItem } from '~/schemas/project';
import type { FileType } from '~/schemas/file';
import type { FileType, TreeItem } from '~/types/content';
import { iconByType } from '#shared/general.utils';
import FakeA from '~/components/prose/FakeA.vue';
interface ProjectExtendedItem extends ProjectItem
export interface TreeItemEditable extends TreeItem
{
customPath: boolean
content?: string
children?: ProjectExtendedItem[]
}
interface ProjectExtended
{
items: ProjectExtendedItem[]
parent: string;
name: string;
customPath: boolean;
children?: TreeItemEditable[];
}
definePageMeta({
@@ -202,27 +198,9 @@ const open = ref(true);
const toaster = useToast();
const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
const { data: project } = await useFetch(`/api/project`, {
transform: (project) => {
if(project)
(project as ProjectExtended).items = transform(project.items)!;
return project as ProjectExtended;
}
});
const navigation = computed<ProjectExtendedItem[] | undefined>({
get: () => project.value?.items,
set: (value) => {
const proj = project.value;
edited.value = true;
if(proj && value)
proj.items = value;
project.value = proj;
}
});
const selected = ref<ProjectExtendedItem>(), edited = ref(false);
const { content: complete, tree: project } = useContent();
const navigation = ref<TreeItemEditable[]>(transform(JSON.parse(JSON.stringify(project.value)))!);
const selected = ref<TreeItemEditable>(), edited = ref(false);
const contentStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), contentError = ref<string>();
watch(selected, async (value, old) => {
@@ -242,7 +220,7 @@ watch(selected, async (value, old) => {
}
else
{
selected.value.content = (await $fetch(`/api/file/content/${encodeURIComponent(selected.value.path)}`, { query: { type: 'editing'} }))?.content;
selected.value.content = (await $fetch(`/api/file/content/${encodeURIComponent(selected.value.path)}`, { query: { type: 'editing'} }));
contentStatus.value = 'success';
}
@@ -282,7 +260,7 @@ useShortcuts({
})
const tree = {
remove(data: ProjectExtendedItem[], id: string): ProjectExtendedItem[] {
remove(data: TreeItemEditable[], id: string): TreeItemEditable[] {
return data
.filter(item => getPath(item) !== id)
.map((item) => {
@@ -295,7 +273,7 @@ const tree = {
return item;
});
},
insertBefore(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
insertBefore(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
return data.flatMap((item) => {
if (getPath(item) === targetId)
return [newItem, item];
@@ -309,7 +287,7 @@ const tree = {
return item;
});
},
insertAfter(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
insertAfter(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
return data.flatMap((item) => {
if (getPath(item) === targetId)
return [item, newItem];
@@ -324,7 +302,7 @@ const tree = {
return item;
});
},
insertChild(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
insertChild(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
return data.flatMap((item) => {
if (getPath(item) === targetId) {
// already a parent: add as first child
@@ -345,7 +323,7 @@ const tree = {
};
});
},
find(data: ProjectExtendedItem[], itemId: string): ProjectExtendedItem | undefined {
find(data: TreeItemEditable[], itemId: string): TreeItemEditable | undefined {
for (const item of data) {
if (getPath(item) === itemId)
return item;
@@ -357,7 +335,7 @@ const tree = {
}
}
},
search(data: ProjectExtendedItem[], prop: keyof ProjectExtendedItem, value: string): ProjectExtendedItem[] {
search(data: TreeItemEditable[], prop: keyof TreeItemEditable, value: string): TreeItemEditable[] {
const arr = [];
for (const item of data)
@@ -377,7 +355,7 @@ const tree = {
targetId,
parentIds = [],
}: {
current: ProjectExtendedItem[]
current: TreeItemEditable[]
targetId: string
parentIds?: string[]
}): string[] | undefined {
@@ -394,7 +372,7 @@ const tree = {
return nested;
}
},
hasChildren(item: ProjectExtendedItem): boolean {
hasChildren(item: TreeItemEditable): boolean {
return (item.children ?? []).length > 0;
},
}
@@ -408,7 +386,7 @@ function add(type: FileType): void
const news = [...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
const title = `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`;
const item: ProjectExtendedItem = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: type === 'folder' ? [] : undefined, customPath: false, content: type === 'markdown' ? '' : undefined };
const item: TreeItemEditable = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: type === 'folder' ? [] : undefined, customPath: false, content: type === 'markdown' ? '' : undefined, owner: -1, timestamp: new Date(), visit: 0 };
if(!selected.value)
{
@@ -424,7 +402,7 @@ function add(type: FileType): void
navigation.value = tree.insertAfter(navigation.value, getPath(selected.value), item);
}
}
function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectExtendedItem[] | undefined {
function updateTree(instruction: Instruction, itemId: string, targetId: string) : TreeItemEditable[] | undefined {
if(!navigation.value)
return;
@@ -478,15 +456,25 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
return navigation.value;
}
function transform(items: ProjectItem[] | undefined): ProjectExtendedItem[] | undefined
function transform(items: TreeItem[] | undefined): TreeItemEditable[] | undefined
{
return items?.map(e => ({...e, customPath: e.name !== parsePath(e.title), children: transform(e.children)}));
return items?.map(e => ({
...e,
parent: e.path.substring(0, e.path.lastIndexOf('/')),
name: e.path.substring(e.path.lastIndexOf('/') + 1),
customPath: e.path.substring(e.path.lastIndexOf('/') + 1) !== parsePath(e.title),
children: transform(e.children)
})) as TreeItemEditable[] | undefined;
}
function flatten(items: TreeItemEditable[] | undefined): TreeItemEditable[]
{
return items?.flatMap(e => [e, ...flatten(e.children)]) ?? [];
}
function drop(instruction: Instruction, itemId: string, targetId: string)
{
navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value ?? [];
}
function rebuildPath(tree: ProjectExtendedItem[] | null | undefined, parentPath: string)
function rebuildPath(tree: TreeItemEditable[] | null | undefined, parentPath: string)
{
if(!tree)
return;
@@ -500,9 +488,9 @@ async function save(redirect: boolean): Promise<void>
{
saveStatus.value = 'pending';
try {
await $fetch(`/api/project`, {
const result = await $fetch(`/api/project`, {
method: 'post',
body: project.value,
body: navigation.value,
});
saveStatus.value = 'success';
edited.value = false;
@@ -513,6 +501,7 @@ async function save(redirect: boolean): Promise<void>
type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
});
complete.value = result;
if(redirect) router.go(-1);
} catch(e: any) {
toaster.add({
@@ -521,7 +510,7 @@ async function save(redirect: boolean): Promise<void>
saveStatus.value = 'error';
}
}
function getPath(item: ProjectExtendedItem): string
function getPath(item: TreeItemEditable): string
{
return [item.parent, parsePath(item.customPath ? item.name : item.title)].filter(e => !!e).join('/');
}