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

Rework file access and link archiving

Browse Source
This commit is contained in:
Peaceultime
2024-12-01 23:25:33 +01:00
parent f7094f7ce1
commit 602b0af212
14 changed files with 186 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,35 +1,46 @@
<template>
<div v-if="status === 'pending'" class="flex">
<div v-if="overviewStatus === 'pending'" class="flex">
<Head>
<Title>d[any] - Chargement</Title>
</Head>
<Loading />
</div>
<div class="flex flex-1 justify-start items-start" v-else-if="page">
<div class="flex flex-1 justify-start items-start" v-else-if="overview">
<Head>
<Title>d[any] - {{ page.title }}</Title>
<Title>d[any] - {{ overview.title }}</Title>
</Head>
<template v-if="page.type === 'markdown'">
<template v-if="overview.type === 'markdown'">
<div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
<div class="flex flex-1 flex-row justify-between items-center">
<ProseH1>{{ page.title }}</ProseH1>
<NuxtLink :href="{ name: 'explore-edit-path', params: { path: path } }"><Button v-if="isOwner">Modifier</Button></NuxtLink>
<ProseH1>{{ overview.title }}</ProseH1>
<div class="flex gap-4">
<NuxtLink :href="{ name: 'explore-edit-path', params: { path: path } }" v-if="isOwner"><Button>Modifier</Button></NuxtLink>
<NuxtLink :href="{ name: 'explore-edit' }" v-if="isOwner && path === 'index'"><Button>Configurer le projet</Button></NuxtLink>
</div>
</div>
<Markdown :content="page.content" />
<Markdown v-if="content" :content="content.content" />
<Loading v-else />
</div>
</template>
<template v-else-if="page.type === 'canvas'">
<Canvas :canvas="JSON.parse(page.content)" />
<template v-else-if="overview.type === 'canvas'">
<Canvas v-if="content" :canvas="JSON.parse(content.content)" />
<Loading v-else />
</template>
<template v-else>
<ProseH2 class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
</template>
</div>
<div v-else-if="status === 'error'">
<div v-else-if="overviewStatus === 'error'">
<Head>
<Title>d[any] - Erreur</Title>
</Head>
<span>{{ error?.message }}</span>
<span>{{ overviewError?.message }}</span>
</div>
<div v-else-if="contentStatus === 'error'">
<Head>
<Title>d[any] - Erreur</Title>
</Head>
<span>{{ contentError?.message }}</span>
</div>
<div v-else>
<Head>
@@ -43,15 +54,9 @@
const route = useRouter().currentRoute;
const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
watch(path, () => {
if(path.value === 'index')
{
useRouter().replace({ name: 'explore' });
}
}, { immediate: true });
const { user } = useUserSession();
const { loggedIn, user } = useUserSession();
const { data: page, status, error } = await useFetch(`/api/file/${encodeURIComponent(path.value)}`, { watch: [route, path], });
const isOwner = computed(() => user.value?.id === page.value?.owner);
const { data: overview, status: overviewStatus, error: overviewError } = await useFetch(`/api/file/overview/${encodeURIComponent(path.value)}`, { watch: [route, path], });
const { data: content, status: contentStatus, error: contentError } = await useFetch(`/api/file/content/${encodeURIComponent(path.value)}`, { watch: [route, path], });
const isOwner = computed(() => user.value?.id === overview.value?.owner);
</script>

33
pages/explore/edit/[...path].vue
View File

@@ -1,14 +1,14 @@
<template>
<div v-if="page" class="xl:p-12 lg:p-8 py-4 flex flex-1 flex-col items-start justify-start max-h-full">
<div v-if="overview" class="xl:p-12 lg:p-8 py-4 flex flex-1 flex-col items-start justify-start max-h-full">
<Head>
<Title>d[any] - Modification de {{ page.title }}</Title>
<Title>d[any] - Modification de {{ overview.title }}</Title>
</Head>
<div class="flex flex-col xl:flex-row xl:justify-between justify-center items-center w-full px-4 pb-4 border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0">
<input type="text" v-model="page.title" placeholder="Titre" class="flex-1 mx-4 h-16 w-full caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none px-3 py-1 text-5xl font-thin bg-transparent" />
<input type="text" v-model="overview.title" placeholder="Titre" class="flex-1 mx-4 h-16 w-full caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none px-3 py-1 text-5xl font-thin bg-transparent" />
<div class="flex gap-4 self-end xl:self-auto flex-wrap">
<div class="flex gap-4">
<Tooltip message="Consultable uniquement par le propriétaire" side="bottom"><Switch label="Privé" v-model="page.private" /></Tooltip>
<Tooltip message="Afficher dans le menu de navigation" side="bottom"><Switch label="Navigable" v-model="page.navigable" /></Tooltip>
<Tooltip message="Consultable uniquement par le propriétaire" side="bottom"><Switch label="Privé" v-model="overview.private" /></Tooltip>
<Tooltip message="Afficher dans le menu de navigation" side="bottom"><Switch label="Navigable" v-model="overview.navigable" /></Tooltip>
</div>
<div class="flex gap-4">
<Tooltip message="Ctrl+S" side="bottom"><Button @click="() => save(true)" :loading="saveStatus === 'pending'" class="border-light-blue dark:border-dark-blue hover:border-light-blue dark:hover:border-dark-blue focus:shadow-light-blue dark:focus:shadow-dark-blue">Enregistrer</Button></Tooltip>
@@ -17,10 +17,12 @@
</div>
</div>
<div class="my-4 flex-1 w-full max-h-full flex">
<template v-if="page.type === 'markdown'">
<SplitterGroup direction="horizontal" class="flex-1 w-full flex" >
<template v-if="overview.type === 'markdown'">
<Loading v-if="contentStatus === 'pending'" />
<span v-else-if="contentError">{{ contentError.message }}</span>
<SplitterGroup direction="horizontal" class="flex-1 w-full flex" v-else >
<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }" :defaultSize="50">
<Editor v-model="page.content" class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }" />
<Editor v-model="page!.content" class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }" />
</SplitterPanel>
<SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
@@ -28,21 +30,21 @@
</SplitterPanel>
</SplitterGroup>
</template>
<template v-else-if="page.type === 'canvas'">
<template v-else-if="overview.type === 'canvas'">
<span class="flex-1 items-center"><ProseH1>Editeur de graphe en cours de développement</ProseH1></span>
</template>
<template v-else-if="page.type === 'file'">
<template v-else-if="overview.type === 'file'">
<span>Modifier le contenu :</span><input type="file" @change="(e) => console.log(e)" />
</template>
</div>
</div>
<div v-else-if="status === 'pending'" class="flex">
<div v-else-if="overviewStatus === 'pending'" class="flex">
<Head>
<Title>d[any] - Chargement</Title>
</Head>
<Loading />
</div>
<div v-else-if="status === 'error'">{{ error?.message }}</div>
<div v-else-if="overviewStatus === 'error'">{{ overviewError?.message }}</div>
</template>
<script setup lang="ts">
@@ -59,7 +61,8 @@ const toaster = useToast();
const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
const sessionContent = useSessionStorage<string | undefined>(path.value, undefined);
const { data: page, status, error } = await useFetch(`/api/file/${encodeURIComponent(path.value)}`, { watch: [ route, path ], transform: (value) => {
const { data: overview, status: overviewStatus, error: overviewError } = await useFetch(`/api/file/overview/${encodeURIComponent(path.value)}`, { watch: [ route, path ] });
const { data: page, status: contentStatus, error: contentError } = await useFetch(`/api/file/content/${encodeURIComponent(path.value)}`, { watch: [ route, path ], transform: (value) => {
if(value && sessionContent.value !== undefined)
{
value.content = sessionContent.value;
@@ -79,7 +82,7 @@ const { data: page, status, error } = await useFetch(`/api/file/${encodeURICompo
const content = computed(() => page.value?.content);
const debounced = useDebounce(content, 250);
if(!loggedIn || (page.value && page.value.owner !== user.value?.id))
if(!loggedIn || (overview.value && overview.value.owner !== user.value?.id))
{
router.replace({ name: 'explore-path', params: { path: path.value } });
}
@@ -99,7 +102,7 @@ async function save(redirect: boolean): Promise<void>
try {
await $fetch(`/api/file`, {
method: 'post',
body: page.value,
body: { ...page.value, ...overview.value },
});
saveStatus.value = 'success';
sessionContent.value = undefined;

42
pages/explore/index.vue
View File

@@ -1,42 +0,0 @@
<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="page">
<Head>
<Title>d[any] - Accueil</Title>
</Head>
<div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
<div class="flex flex-1 flex-row justify-between items-center">
<ProseH1>{{ page.title }}</ProseH1>
<div class="flex gap-4">
<NuxtLink :href="{ name: 'explore-edit-path', params: { path: 'index' } }"><Button v-if="isOwner">Modifier la page</Button></NuxtLink>
<NuxtLink :href="{ name: 'explore-edit' }"><Button v-if="isOwner">Configurer le projet</Button></NuxtLink>
</div>
</div>
<Markdown :content="page.content" />
</div>
</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>
</Head>
<div><ProseH2>Impossible d'afficher le contenu demandé</ProseH2></div>
</div>
</template>
<script setup lang="ts">
const { loggedIn, user } = useUserSession();
const { data: page, status, error } = await useFetch(`/api/file/index`);
const isOwner = computed(() => user.value?.id === page.value?.owner);
</script>