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

Finished project configuration page with reorder

Browse Source
This commit is contained in:
Peaceultime
2024-11-18 17:21:52 +01:00
parent a9363e8c06
commit 1c239f161b
20 changed files with 552 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,8 +11,8 @@
<Tooltip message="Afficher dans le menu de navigation" side="bottom"><Switch label="Navigable" v-model="page.navigable" /></Tooltip>
</div>
<div class="flex gap-4">
<Button @click="() => save()" :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>
<NuxtLink :href="{ name: 'explore-path', params: { path: path } }"><Button>Annuler</Button></NuxtLink>
<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>
<Tooltip message="Ctrl+Shift+Z" side="bottom"><NuxtLink :href="{ name: 'explore-path', params: { path: path } }"><Button>Annuler</Button></NuxtLink></Tooltip>
</div>
</div>
</div>
@@ -20,7 +20,7 @@
<template v-if="page.type === 'markdown'">
<SplitterGroup direction="horizontal" class="flex-1 w-full flex" >
<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }" :defaultSize="50">
<textarea v-model="content" class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }"></textarea>
<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 }">
@@ -48,28 +48,52 @@
<script setup lang="ts">
import FakeA from '~/components/prose/FakeA.vue';
const route = useRouter().currentRoute;
const nuxt = useNuxtApp();
const router = useRouter();
const route = router.currentRoute;
const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
const { user, loggedIn } = useUserSession();
const sessionContent = useSessionStorage<string | undefined>(path.value, undefined);
const toaster = useToast();
const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
const { data: page, status, error } = await useLazyFetch(`/api/file/${encodeURIComponent(path.value)}`, { watch: [ route, path ]});
const content = computed(() => sessionContent.value ?? page.value?.content);
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) => {
if(value && sessionContent.value !== undefined)
{
value.content = sessionContent.value;
}
return value;
}, getCachedData: (key) => {
const value = nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key];
if(value && sessionContent.value !== undefined)
{
value.content = sessionContent.value;
}
return value;
} });
const content = computed(() => page.value?.content);
const debounced = useDebounce(content, 250);
if(!loggedIn || (page.value && page.value.owner !== user.value?.id))
{
useRouter().replace({ name: 'explore-path', params: { path: path.value } });
router.replace({ name: 'explore-path', params: { path: path.value } });
}
watch(debounced, (value) => {
sessionContent.value = value;
});
async function save(): Promise<void>
useShortcuts({
meta_s: { usingInput: true, handler: () => save(false) },
meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: path.value }}) }
})
async function save(redirect: boolean): Promise<void>
{
saveStatus.value = 'pending';
try {
@@ -78,13 +102,15 @@ async function save(): Promise<void>
body: page.value,
});
saveStatus.value = 'success';
sessionContent.value = undefined;
toaster.clear('error');
toaster.add({
type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
});
useRouter().push({ name: 'explore-path', params: { path: path.value } });
if(redirect)
router.push({ name: 'explore-path', params: { path: path.value } });
} catch(e: any) {
toaster.add({
type: 'error', content: e.message, timer: true, duration: 10000

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

@@ -2,9 +2,9 @@
<Head>
<Title>d[any] - Configuration du projet</Title>
</Head>
<div class="flex flex-1 flex-row gap-4 p-6 items-start">
<div class="flex flex-1 flex-row gap-4 p-6 items-start" v-if="navigation">
<DraggableTree class="list-none select-none border border-light-35 dark:border-dark-35 text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm overflow-auto w-[450px] max-h-full"
:items="navigation ?? undefined" :get-key="(item) => item.path" @updateTree="drop">
:items="navigation ?? undefined" :get-key="(item: Partial<ProjectItem>) => item.path ? getPath(item as ProjectItem) : ''" @updateTree="drop">
<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver, item }">
<div class="flex flex-1 px-2" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level - 0.5}em` }">
<span class="py-2 px-2" @click="handleToggle" v-if="item.hasChildren" >
@@ -16,49 +16,75 @@
</div>
</template>
<template #hint="{ instruction }">
<div v-if="instruction" class="absolute h-full w-full top-0 left-0 border-light-50 dark:border-dark-50" :class="{
'!border-b-2': instruction?.type === 'reorder-below',
'!border-t-2': instruction?.type === 'reorder-above',
'!border-2 rounded': instruction?.type === 'make-child',
<div v-if="instruction" class="absolute h-full w-full top-0 right-0 border-light-50 dark:border-dark-50" :style="{
width: `calc(100% - ${instruction.currentLevel - 1}em)`
}" :class="{
'!border-b-4': instruction?.type === 'reorder-below',
'!border-t-4': instruction?.type === 'reorder-above',
'!border-4': instruction?.type === 'make-child',
}"></div>
</template>
</DraggableTree>
<div v-if="selected" class="flex-1 flex justify-start items-start">
<div class="flex flex-col flex-1 justify-start items-start">
<input type="text" v-model="selected.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 ms-6 flex-col justify-start items-start">
<Tooltip message="Consultable uniquement par le propriétaire" side="right"><Switch label="Privé" v-model="selected.private" /></Tooltip>
<Tooltip message="Afficher dans le menu de navigation" side="right"><Switch label="Navigable" v-model="selected.navigable" /></Tooltip>
</div>
</div>
</div>
<div class="flex flex-col flex-1">
<div class="flex self-end gap-4 px-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>
<Tooltip message="Ctrl+Shift+Z" side="bottom"><NuxtLink :href="{ name: 'explore' }"><Button>Annuler</Button></NuxtLink></Tooltip>
</div>
<div v-if="selected" class="flex-1 flex justify-start items-start">
<div class="flex flex-col flex-1 justify-start items-start">
<input type="text" v-model="selected.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" />
<span><pre class="ps-2 inline">{{ selected.parent }}/</pre><input v-model="selected.name" placeholder="Titre" class="font-mono border-b border-light-35 dark:border-dark-35 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 bg-transparent" /></span>
<div class="flex ms-6 flex-col justify-start items-start">
<Tooltip message="Consultable uniquement par le propriétaire" side="right"><Switch label="Privé" v-model="selected.private" /></Tooltip>
<Tooltip message="Afficher dans le menu de navigation" side="right"><Switch label="Navigable" v-model="selected.navigable" /></Tooltip>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import type { NavigationTreeItem } from '~/server/api/navigation.get';
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';
definePageMeta({
rights: ['admin', 'editor'],
})
});
const route = useRouter().currentRoute;
const router = useRouter();
const route = router.currentRoute;
const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
const toaster = useToast();
const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
const { data: navigation } = await useLazyFetch(`/api/navigation`);
const selected = ref<NavigationTreeItem>();
const { data: project } = await useFetch(`/api/project`);
const navigation = computed({
get: () => project.value?.items,
set: (value) => {
const proj = project.value;
if(proj && value)
proj.items = value;
project.value = proj;
}
});
const selected = ref<ProjectItem>();
useShortcuts({
meta_s: { usingInput: true, handler: () => save(false) },
meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: path.value }}) }
})
const tree = {
remove(data: NavigationTreeItem[], id: string): NavigationTreeItem[] {
remove(data: ProjectItem[], id: string): ProjectItem[] {
return data
.filter(item => parsePath(item.title) !== id)
.filter(item => getPath(item) !== id)
.map((item) => {
if (tree.hasChildren(item)) {
return {
@@ -69,9 +95,9 @@ const tree = {
return item;
});
},
insertBefore(data: NavigationTreeItem[], targetId: string, newItem: NavigationTreeItem): NavigationTreeItem[] {
insertBefore(data: ProjectItem[], targetId: string, newItem: ProjectItem): ProjectItem[] {
return data.flatMap((item) => {
if (parsePath(item.title) === targetId)
if (getPath(item) === targetId)
return [newItem, item];
if (tree.hasChildren(item)) {
@@ -83,9 +109,9 @@ const tree = {
return item;
});
},
insertAfter(data: NavigationTreeItem[], targetId: string, newItem: NavigationTreeItem): NavigationTreeItem[] {
insertAfter(data: ProjectItem[], targetId: string, newItem: ProjectItem): ProjectItem[] {
return data.flatMap((item) => {
if (parsePath(item.title) === targetId)
if (getPath(item) === targetId)
return [item, newItem];
if (tree.hasChildren(item)) {
@@ -98,9 +124,9 @@ const tree = {
return item;
});
},
insertChild(data: NavigationTreeItem[], targetId: string, newItem: NavigationTreeItem): NavigationTreeItem[] {
insertChild(data: ProjectItem[], targetId: string, newItem: ProjectItem): ProjectItem[] {
return data.flatMap((item) => {
if (parsePath(item.title) === targetId) {
if (getPath(item) === targetId) {
// already a parent: add as first child
return {
...item,
@@ -119,9 +145,9 @@ const tree = {
};
});
},
find(data: NavigationTreeItem[], itemId: string): NavigationTreeItem | undefined {
find(data: ProjectItem[], itemId: string): ProjectItem | undefined {
for (const item of data) {
if (parsePath(item.title) === itemId)
if (getPath(item) === itemId)
return item;
if (tree.hasChildren(item)) {
@@ -136,33 +162,34 @@ const tree = {
targetId,
parentIds = [],
}: {
current: NavigationTreeItem[]
current: ProjectItem[]
targetId: string
parentIds?: string[]
}): string[] | undefined {
for (const item of current) {
if (parsePath(item.title) === targetId)
if (getPath(item) === targetId)
return parentIds;
const nested = tree.getPathToItem({
current: (item.children ?? []),
targetId,
parentIds: [...parentIds, parsePath(item.title)],
parentIds: [...parentIds, getPath(item)],
});
if (nested)
return nested;
}
},
hasChildren(item: NavigationTreeItem): boolean {
hasChildren(item: ProjectItem): boolean {
return (item.children ?? []).length > 0;
},
}
function updateTree(instruction: Instruction, itemId: string, targetId: string) {
function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectItem[] | undefined {
if(!navigation.value)
return;
const item = tree.find(navigation.value, itemId);
const item = tree.find(navigation.value, itemId);
const target = tree.find(navigation.value, targetId);
if(!item)
return;
@@ -200,8 +227,12 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
}
if (instruction.type === 'make-child') {
if(!target || target.type !== 'folder')
return;
let result = tree.remove(navigation.value, itemId);
result = tree.insertChild(result, targetId, item);
rebuildPath([item], targetId);
return result;
}
@@ -209,16 +240,27 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
}
function drop(instruction: Instruction, itemId: string, targetId: string)
{
navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value;
{
navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value ?? [];
}
async function save(): Promise<void>
function rebuildPath(tree: ProjectItem[] | null | undefined, parentPath: string)
{
debugger;
if(!tree)
return;
tree.forEach(e => {
e.parent = parentPath;
rebuildPath(e.children, getPath(e));
});
}
async function save(redirect: boolean): Promise<void>
{
saveStatus.value = 'pending';
try {
await $fetch(`/api/navigation`, {
await $fetch(`/api/project`, {
method: 'post',
body: navigation.value,
body: project.value,
});
saveStatus.value = 'success';
@@ -227,7 +269,7 @@ async function save(): Promise<void>
type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
});
useRouter().push({ name: 'explore-path', params: { path: path.value } });
if(redirect) router.push({ name: 'explore-path', params: { path: path.value } });
} catch(e: any) {
toaster.add({
type: 'error', content: e.message, timer: true, duration: 10000
@@ -235,4 +277,8 @@ async function save(): Promise<void>
saveStatus.value = 'error';
}
}
function getPath(item: ProjectItem): string
{
return [item.parent, parsePath(item?.name ?? item.title)].filter(e => !!e).join('/');
}
</script>