You've already forked obsidian-visualiser
Big rework to include OPFS API for local edits. Big components rework in vanilla JS to optimize. Unfinished, DO NOT SHIP YET !
This commit is contained in:
@@ -31,7 +31,8 @@
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { format, iconByType } from '~/shared/general.util';
|
||||
import { format } from '~/shared/general.util';
|
||||
import { iconByType } from '~/shared/content.util';
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
|
||||
interface File
|
||||
|
||||
@@ -1,24 +1,23 @@
|
||||
<template>
|
||||
<div class="flex flex-1 justify-start items-start" v-if="overview">
|
||||
<div class="flex flex-1 justify-start items-start" ref="element">
|
||||
<Head>
|
||||
<Title>d[any] - {{ overview.title }}</Title>
|
||||
<Title>d[any] - {{ overview?.title ?? "Erreur" }}</Title>
|
||||
</Head>
|
||||
<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>
|
||||
<Head>
|
||||
<Title>d[any] - Erreur</Title>
|
||||
</Head>
|
||||
<div><ProseH2>Impossible d'afficher le contenu demandé</ProseH2></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Content } from '~/shared/content.util';
|
||||
|
||||
const element = useTemplateRef('element'), overview = ref();
|
||||
const route = useRouter().currentRoute;
|
||||
const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
|
||||
|
||||
const { content } = useContent();
|
||||
const overview = computed(() => content.value.find(e => e.path === path.value));
|
||||
onMounted(async () => {
|
||||
if(element.value && path.value)
|
||||
{
|
||||
await Content.init()
|
||||
overview.value = Content.render(element.value, path.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -2,228 +2,81 @@
|
||||
<Head>
|
||||
<Title>d[any] - Modification</Title>
|
||||
</Head>
|
||||
<ClientOnly>
|
||||
<CollapsibleRoot asChild class="flex flex-1 flex-col xl:-mx-12 xl:-my-8 lg:-mx-8 lg:-my-6 -mx-6 -my-3 overflow-hidden" v-model="open">
|
||||
<div>
|
||||
<div class="z-50 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
|
||||
<div class="flex items-center px-2 gap-4">
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button icon class="!bg-transparent group md:hidden">
|
||||
<Icon class="group-data-[state=open]:hidden" icon="radix-icons:hamburger-menu" />
|
||||
<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-opacity-70 m-2 flex items-center gap-4" aria-label="Accueil" :to="{ path: '/', force: true }">
|
||||
<Avatar src="/logo.dark.svg" class="dark:block hidden" />
|
||||
<Avatar src="/logo.light.svg" class="block dark:hidden" />
|
||||
<span class="text-xl max-md:hidden">d[any]</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="flex items-center px-2 gap-4">
|
||||
<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70" :to="{ name: 'user-login' }">{{ user!.username }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-row relative overflow-hidden">
|
||||
<CollapsibleContent asChild forceMount>
|
||||
<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
|
||||
<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
|
||||
<div class="flex flex-row justify-between items-center pt-2 pb-4 mb-2 px-2 gap-4 border-b border-light-35 dark:border-dark-35">
|
||||
<Button @click="router.push({ name: 'explore-path', params: { path: selected ? getPath(selected) : 'index' } })">Quitter</Button>
|
||||
<Button @click="save(true);">Enregistrer</Button>
|
||||
<Tooltip side="top" message="Nouveau">
|
||||
<DropdownMenu align="end" side="bottom" :options="[{
|
||||
type: 'item',
|
||||
label: 'Markdown',
|
||||
kbd: 'Ctrl+N',
|
||||
icon: 'radix-icons:file-text',
|
||||
select: () => add('markdown'),
|
||||
}, {
|
||||
type: 'item',
|
||||
label: 'Dossier',
|
||||
kbd: 'Ctrl+Shift+N',
|
||||
icon: 'lucide:folder',
|
||||
select: () => add('folder'),
|
||||
}, {
|
||||
type: 'item',
|
||||
label: 'Canvas',
|
||||
icon: 'ph:graph-light',
|
||||
select: () => add('canvas'),
|
||||
}, {
|
||||
type: 'item',
|
||||
label: 'Carte',
|
||||
icon: 'lucide:map',
|
||||
select: () => add('map'),
|
||||
}, {
|
||||
type: 'item',
|
||||
label: 'Fichier',
|
||||
icon: 'radix-icons:file',
|
||||
select: () => add('file'),
|
||||
}]">
|
||||
<Button icon><Icon class="w-5 h-5" icon="radix-icons:plus" /></Button>
|
||||
</DropdownMenu>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<DraggableTree class="ps-4 text-sm" :items="navigation ?? undefined" :get-key="(item: Partial<TreeItemEditable>) => item.path !== undefined ? getPath(item as TreeItemEditable) : ''" @updateTree="drop"
|
||||
v-model="selected" :defaultExpanded="defaultExpanded" :get-children="(item: Partial<TreeItemEditable>) => item.type === 'folder' ? item.children : undefined" >
|
||||
<template #default="{ handleToggle, handleSelect, isExpanded, isDragging, item }">
|
||||
<div class="flex flex-1 items-center overflow-hidden" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level / 2 - 0.5}em` }">
|
||||
<div class="flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple group-data-[selected]:text-accent-blue">
|
||||
<Icon @click="handleToggle" v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute" :style="{ 'left': `${item.level / 2 - 1.5}em` }" />
|
||||
<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="w-5 h-5" @click="handleSelect" />
|
||||
<div class="pl-1.5 py-1.5 flex-1 truncate" :title="item.value.title" @click="handleSelect" :class="{ 'font-semibold': item.hasChildren }">
|
||||
{{ item.value.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<span @click="item.value.private = !item.value.private">
|
||||
<Icon v-if="item.value.private" icon="radix-icons:lock-closed" />
|
||||
<Icon v-else class="text-light-50 dark:text-dark-50" icon="radix-icons:lock-open-2" />
|
||||
</span>
|
||||
<span @click="item.value.navigable = !item.value.navigable">
|
||||
<Icon v-if="item.value.navigable" icon="radix-icons:eye-open" />
|
||||
<Icon v-else class="text-light-50 dark:text-dark-50" icon="radix-icons:eye-none" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #hint="{ instruction }">
|
||||
<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 / 2 - 1.5}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>
|
||||
<div class="xl:px-12 px-6 pt-4 pb-2 text-center text-xs text-light-60 dark:text-dark-60">
|
||||
<NuxtLink class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - <NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
|
||||
<p>Copyright Peaceultime - 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
<div class="flex flex-1 flex-row max-h-full overflow-hidden">
|
||||
<div v-if="selected" class="flex flex-1 flex-col items-start justify-start max-h-full relative">
|
||||
<Head>
|
||||
<Title>d[any] - Modification de {{ selected.title }}</Title>
|
||||
</Head>
|
||||
<CollapsibleRoot v-model:open="topOpen" class="group data-[state=open]:mt-4 w-full relative">
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button class="absolute left-1/2 -translate-x-1/2 group-data-[state=open]:-bottom-3 group-data-[state=closed]:-bottom-6 z-30" icon>
|
||||
<Icon v-if="topOpen" icon="radix-icons:caret-up" class="h-4 w-4" />
|
||||
<Icon v-else icon="radix-icons:caret-down" class="h-4 w-4" />
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent class="xl:px-12 lg:px-8 px-6">
|
||||
<div class="pb-2 grid lg:grid-cols-2 grid-cols-1 lg:items-center justify-between gap-x-4 flex-1 border-b border-light-35 dark:border-dark-35">
|
||||
<input type="text" v-model="selected.title" @input="() => {
|
||||
if(selected && !selected.customPath)
|
||||
{
|
||||
selected.name = parsePath(selected.title);
|
||||
rebuildPath(selected.children, getPath(selected));
|
||||
}
|
||||
}" placeholder="Titre" style="line-height: normal;" class="flex-1 md:text-5xl text-4xl md:h-14 h-12 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 pb-3 font-thin bg-transparent"/>
|
||||
<div class="flex flex-row justify-between items-center gap-x-4">
|
||||
<div v-if="selected.customPath" class="flex lg:items-center truncate">
|
||||
<pre class="md:text-base text-sm truncate" style="direction: rtl">/{{ selected.parent !== '' ? selected.parent + '/' : '' }}</pre>
|
||||
<TextInput v-model="selected.name" @input="(e: Event) => {
|
||||
if(selected && selected.customPath)
|
||||
{
|
||||
selected.name = parsePath(selected.name);
|
||||
rebuildPath(selected.children, getPath(selected));
|
||||
}
|
||||
}" class="mx-0 font-mono"/>
|
||||
</div>
|
||||
<pre v-else class="md:text-base text-sm truncate" style="direction: rtl">{{ getPath(selected) }}/</pre>
|
||||
<div class="flex gap-4">
|
||||
<Dialog :title="`Supprimer '${selected.title}'${selected.children?.length ?? 0 > 0 ? ' et ses enfants' : ''}`">
|
||||
<template #trigger><Button icon class="bg-light-red dark:bg-dark-red !bg-opacity-40 border-light-red dark:border-dark-red hover:bg-light-red dark:hover:bg-dark-red hover:!bg-opacity-70 hover:border-light-red dark:hover:border-dark-red"><Icon icon="radix-icons:trash" /></Button></template>
|
||||
<template #default>
|
||||
<div class="flex gap-4">
|
||||
<DialogClose><Button @click="navigation = tree.remove(navigation, getPath(selected)); selected = undefined;" class="bg-light-red dark:bg-dark-red !bg-opacity-40 border-light-red dark:border-dark-red hover:bg-light-red dark:hover:bg-dark-red hover:!bg-opacity-70 hover:border-light-red dark:hover:border-dark-red">Oui</Button></DialogClose>
|
||||
<DialogClose><Button>Non</Button></DialogClose>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
<Dialog title="Préférences Markdown" v-if="selected.type === 'markdown'">
|
||||
<template #trigger><Button icon><Icon icon="radix-icons:gear" /></Button></template>
|
||||
<template #default>
|
||||
<Select label="Editeur de markdown" :modelValue="preferences.markdown.editing" @update:model-value="v => preferences.markdown.editing = (v as 'reading' | 'editing' | 'split')">
|
||||
<SelectItem label="Mode lecture" value="reading" />
|
||||
<SelectItem label="Mode edition" value="editing" />
|
||||
<SelectItem label="Ecran partagé" value="split" />
|
||||
</Select>
|
||||
</template>
|
||||
</Dialog>
|
||||
<DropdownMenu align="end" :options="[{
|
||||
type: 'checkbox',
|
||||
label: 'URL custom',
|
||||
select: (state: boolean) => { selected!.customPath = state; if(!state) selected!.name = parsePath(selected!.title) },
|
||||
checked: selected.customPath
|
||||
}]">
|
||||
<Button icon><Icon icon="radix-icons:dots-vertical"/></Button>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleContent>
|
||||
</CollapsibleRoot>
|
||||
<div class="py-4 flex-1 w-full max-h-full flex overflow-hidden xl:px-12 lg:px-8 px-6 relative">
|
||||
<template v-if="selected.type === 'markdown'">
|
||||
<div v-if="contentStatus === 'pending'" class="flex flex-1 justify-center items-center">
|
||||
<Loading />
|
||||
</div>
|
||||
<span v-else-if="contentError">{{ contentError }}</span>
|
||||
<template v-else-if="preferences.markdown.editing === 'editing'">
|
||||
<Editor v-model="selected.content" autofocus class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto lg:mx-16 xl:mx-32 2xl:mx-64" />
|
||||
</template>
|
||||
<template v-else-if="preferences.markdown.editing === 'reading'">
|
||||
<div class="flex-1 max-h-full !overflow-y-auto px-4 xl:px-32 2xl:px-64"><MarkdownRenderer :content="(debounced as string)" :proses="{ 'a': FakeA }" /></div>
|
||||
</template>
|
||||
<template v-else-if="preferences.markdown.editing === 'split'">
|
||||
<SplitterGroup direction="horizontal" class="flex-1 w-full flex">
|
||||
<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }" :defaultSize="50">
|
||||
<Editor v-model="selected.content" autofocus 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 }">
|
||||
<div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><MarkdownRenderer :content="(debounced as string)" :proses="{ 'a': FakeA }" /></div>
|
||||
</SplitterPanel>
|
||||
</SplitterGroup>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else-if="selected.type === 'canvas'">
|
||||
<CanvasEditor v-if="selected.content" :modelValue="selected.content" :path="getPath(selected)" />
|
||||
</template>
|
||||
<template v-else-if="selected.type === 'map'">
|
||||
<span class="flex flex-1 justify-center items-center"><ProseH3>Editeur de carte en cours de développement</ProseH3></span>
|
||||
</template>
|
||||
<template v-else-if="selected.type === 'file'">
|
||||
<span>Modifier le contenu :</span><input type="file" @change="(e: Event) => console.log((e.target as HTMLInputElement).files?.length)" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col xl:-mx-12 xl:-my-8 lg:-mx-8 lg:-my-6 -mx-6 -my-3 overflow-hidden">
|
||||
<div class="z-50 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
|
||||
<div class="flex items-center px-2 gap-4">
|
||||
<!-- <CollapsibleTrigger asChild>
|
||||
<Button icon class="!bg-transparent group md:hidden">
|
||||
<Icon class="group-data-[state=open]:hidden" icon="radix-icons:hamburger-menu" />
|
||||
<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
|
||||
</Button>
|
||||
</CollapsibleTrigger> -->
|
||||
<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-opacity-70 m-2 flex items-center gap-4" aria-label="Accueil" :to="{ path: '/', force: true }">
|
||||
<Avatar src="/logo.dark.svg" class="dark:block hidden" />
|
||||
<Avatar src="/logo.light.svg" class="block dark:hidden" />
|
||||
<span class="text-xl max-md:hidden">d[any]</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="flex items-center px-2 gap-4">
|
||||
<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70" :to="{ name: 'user-login' }">{{ user!.username }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 flex-row relative h-screen overflow-hidden">
|
||||
<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
|
||||
<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden" ref="tree"></div>
|
||||
<div class="xl:px-12 px-6 pt-4 pb-2 text-center text-xs text-light-60 dark:text-dark-60">
|
||||
<NuxtLink class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - <NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
|
||||
<p>Copyright Peaceultime - 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</CollapsibleRoot>
|
||||
</ClientOnly>
|
||||
<div class="flex flex-1 flex-row max-h-full overflow-hidden" ref="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
|
||||
import { iconByType, convertContentFromText, convertContentToText, DEFAULT_CONTENT,parsePath } from '#shared/general.util';
|
||||
import type { ExploreContent, FileType, TreeItem } from '~/types/content';
|
||||
import FakeA from '~/components/prose/FakeA.vue';
|
||||
import type { Preferences } from '~/types/general';
|
||||
import { Content, Editor } from '#shared/content.util';
|
||||
import { loading } from '#shared/proses';
|
||||
|
||||
definePageMeta({
|
||||
rights: ['admin', 'editor'],
|
||||
layout: 'null',
|
||||
});
|
||||
|
||||
export type TreeItemEditable = TreeItem &
|
||||
const { user } = useUserSession();
|
||||
const tree = useTemplateRef('tree'), container = useTemplateRef('container');
|
||||
let editor: Editor;
|
||||
|
||||
onMounted(async () => {
|
||||
if(tree.value && container.value && await Content.ready)
|
||||
{
|
||||
const load = loading('normal');
|
||||
tree.value.appendChild(load);
|
||||
|
||||
editor = new Editor();
|
||||
|
||||
tree.value.replaceChild(editor.tree.container, load);
|
||||
container.value.appendChild(editor.container);
|
||||
}
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
editor?.unmount();
|
||||
})
|
||||
/* import { Icon } from '@iconify/vue/dist/iconify.js';
|
||||
import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
|
||||
import type { FileType, LocalContent, TreeItem } from '#shared/content.util';
|
||||
import { DEFAULT_CONTENT, iconByType, Content, getPath } from '#shared/content.util';
|
||||
import type { Preferences } from '~/types/general';
|
||||
import { fakeA as proseA } from '#shared/proses';
|
||||
import { parsePath } from '~/shared/general.util';
|
||||
import type { CanvasContent } from '~/types/canvas';
|
||||
|
||||
export type TreeItemEditable = LocalContent &
|
||||
{
|
||||
parent: string;
|
||||
name: string;
|
||||
customPath: boolean;
|
||||
parent?: string;
|
||||
name?: string;
|
||||
customPath?: boolean;
|
||||
children?: TreeItemEditable[];
|
||||
}
|
||||
|
||||
@@ -240,225 +93,73 @@ const open = ref(true), topOpen = ref(true);
|
||||
const toaster = useToast();
|
||||
const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
|
||||
|
||||
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>();
|
||||
let navigation = Content.tree as TreeItemEditable[];
|
||||
const selected = ref<TreeItemEditable>();
|
||||
|
||||
const preferences = useCookie<Preferences>('preferences', { default: () => ({ markdown: { editing: 'split' }, canvas: { snap: true, size: 32 } }), watch: true, maxAge: 60*60*24*31 });
|
||||
const preferences = useCookie<Preferences>('preferences', { default: () => ({ markdown: { editing: 'split' }, canvas: { gridSnap: true, neighborSnap: true, spacing: 32 } }), watch: true, maxAge: 60*60*24*31 });
|
||||
|
||||
watch(selected, async (value, old) => {
|
||||
if(selected.value)
|
||||
{
|
||||
if(!selected.value.content && selected.value.path)
|
||||
{
|
||||
contentStatus.value = 'pending';
|
||||
try
|
||||
{
|
||||
const storedEdit = sessionStorage.getItem(`editing:${encodeURIComponent(selected.value.path)}`);
|
||||
selected.value = await Content.content(selected.value.path);
|
||||
}
|
||||
|
||||
if(storedEdit)
|
||||
{
|
||||
selected.value.content = convertContentFromText(selected.value.type, storedEdit);
|
||||
contentStatus.value = 'success';
|
||||
}
|
||||
else
|
||||
{
|
||||
selected.value.content = (await $fetch(`/api/file/content/${encodeURIComponent(selected.value.path)}`, { query: { type: 'editing'} }));
|
||||
contentStatus.value = 'success';
|
||||
}
|
||||
|
||||
//@ts-ignore
|
||||
debounced.value = selected.value.content ?? '';
|
||||
}
|
||||
catch(e)
|
||||
{
|
||||
contentError.value = (e as Error).message;
|
||||
contentStatus.value = 'error';
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
//@ts-ignore
|
||||
debounced.value = selected.value.content ?? '';
|
||||
}
|
||||
router.replace({ hash: '#' + encodeURIComponent(selected.value.path || getPath(selected.value)) });
|
||||
router.replace({ hash: '#' + encodeURIComponent(selected.value!.path || getPath(selected.value!)) });
|
||||
}
|
||||
else
|
||||
{
|
||||
router.replace({ hash: '' });
|
||||
}
|
||||
})
|
||||
const content = computed(() => selected.value?.content ?? '');
|
||||
const debounced = useDebounce(content, 250, { maxWait: 500 });
|
||||
const debouncedSave = useDebounceFn(save, 60000, { maxWait: 180000 });
|
||||
|
||||
watch(debounced, () => {
|
||||
if(selected.value && debounced.value)
|
||||
sessionStorage.setItem(`editing:${encodeURIComponent(selected.value.path)}`, typeof debounced.value === 'string' ? debounced.value : JSON.stringify(debounced.value));
|
||||
});
|
||||
useShortcuts({
|
||||
meta_s: { usingInput: true, handler: () => save(false), prevent: true },
|
||||
//meta_s: { usingInput: true, handler: () => save(), prevent: true },
|
||||
meta_n: { usingInput: true, handler: () => add('markdown'), prevent: true },
|
||||
meta_shift_n: { usingInput: true, handler: () => add('folder'), prevent: true },
|
||||
meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: 'index' } }), prevent: true }
|
||||
})
|
||||
|
||||
const tree = {
|
||||
remove(data: TreeItemEditable[], id: string): TreeItemEditable[] {
|
||||
return data
|
||||
.filter(item => getPath(item) !== id)
|
||||
.map((item) => {
|
||||
if (tree.hasChildren(item)) {
|
||||
return {
|
||||
...item,
|
||||
children: tree.remove(item.children ?? [], id),
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
},
|
||||
insertBefore(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
|
||||
return data.flatMap((item) => {
|
||||
if (getPath(item) === targetId)
|
||||
return [newItem, item];
|
||||
|
||||
if (tree.hasChildren(item)) {
|
||||
return {
|
||||
...item,
|
||||
children: tree.insertBefore(item.children ?? [], targetId, newItem),
|
||||
};
|
||||
}
|
||||
return item;
|
||||
});
|
||||
},
|
||||
insertAfter(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
|
||||
return data.flatMap((item) => {
|
||||
if (getPath(item) === targetId)
|
||||
return [item, newItem];
|
||||
|
||||
if (tree.hasChildren(item)) {
|
||||
return {
|
||||
...item,
|
||||
children: tree.insertAfter(item.children ?? [], targetId, newItem),
|
||||
};
|
||||
}
|
||||
|
||||
return item;
|
||||
});
|
||||
},
|
||||
insertChild(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
|
||||
return data.flatMap((item) => {
|
||||
if (getPath(item) === targetId) {
|
||||
// already a parent: add as first child
|
||||
return {
|
||||
...item,
|
||||
// opening item so you can see where item landed
|
||||
isOpen: true,
|
||||
children: [newItem, ...item.children ?? []],
|
||||
};
|
||||
}
|
||||
|
||||
if (!tree.hasChildren(item))
|
||||
return item;
|
||||
|
||||
return {
|
||||
...item,
|
||||
children: tree.insertChild(item.children ?? [], targetId, newItem),
|
||||
};
|
||||
});
|
||||
},
|
||||
find(data: TreeItemEditable[], itemId: string): TreeItemEditable | undefined {
|
||||
for (const item of data) {
|
||||
if (getPath(item) === itemId)
|
||||
return item;
|
||||
|
||||
if (tree.hasChildren(item)) {
|
||||
const result = tree.find(item.children ?? [], itemId);
|
||||
if (result)
|
||||
return result;
|
||||
}
|
||||
}
|
||||
},
|
||||
search(data: TreeItemEditable[], prop: keyof TreeItemEditable, value: string): TreeItemEditable[] {
|
||||
const arr = [];
|
||||
|
||||
for (const item of data)
|
||||
{
|
||||
if (item[prop]?.toString().toLowerCase()?.startsWith(value.toLowerCase()))
|
||||
arr.push(item);
|
||||
|
||||
if (tree.hasChildren(item)) {
|
||||
arr.push(...tree.search(item.children ?? [], prop, value));
|
||||
}
|
||||
}
|
||||
|
||||
return arr;
|
||||
},
|
||||
getPathToItem({
|
||||
current,
|
||||
targetId,
|
||||
parentIds = [],
|
||||
}: {
|
||||
current: TreeItemEditable[]
|
||||
targetId: string
|
||||
parentIds?: string[]
|
||||
}): string[] | undefined {
|
||||
for (const item of current) {
|
||||
if (getPath(item) === targetId)
|
||||
return parentIds;
|
||||
|
||||
const nested = tree.getPathToItem({
|
||||
current: (item.children ?? []),
|
||||
targetId,
|
||||
parentIds: [...parentIds, getPath(item)],
|
||||
});
|
||||
if (nested)
|
||||
return nested;
|
||||
}
|
||||
},
|
||||
hasChildren(item: TreeItemEditable): boolean {
|
||||
return (item.children ?? []).length > 0;
|
||||
},
|
||||
}
|
||||
|
||||
function add(type: FileType): void
|
||||
{
|
||||
if(!navigation.value)
|
||||
if(!navigation)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
const news = [...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
|
||||
const news = [...tree.search(navigation, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
|
||||
const title = `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`;
|
||||
const item: TreeItemEditable = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: [], customPath: false, content: DEFAULT_CONTENT[type], owner: -1, timestamp: new Date(), visit: 0 };
|
||||
|
||||
if(!selected.value)
|
||||
{
|
||||
navigation.value = [...navigation.value, item];
|
||||
navigation = [...navigation, item];
|
||||
}
|
||||
else if(selected.value?.children)
|
||||
{
|
||||
item.parent = getPath(selected.value);
|
||||
navigation.value = tree.insertChild(navigation.value, item.parent, item);
|
||||
navigation = tree.insertChild(navigation, item.parent, item);
|
||||
}
|
||||
else
|
||||
{
|
||||
navigation.value = tree.insertAfter(navigation.value, getPath(selected.value), item);
|
||||
navigation = tree.insertAfter(navigation, getPath(selected.value), item);
|
||||
}
|
||||
}
|
||||
function updateTree(instruction: Instruction, itemId: string, targetId: string) : TreeItemEditable[] | undefined {
|
||||
if(!navigation.value)
|
||||
if(!navigation)
|
||||
return;
|
||||
|
||||
const item = tree.find(navigation.value, itemId);
|
||||
const target = tree.find(navigation.value, targetId);
|
||||
const item = tree.find(navigation, itemId);
|
||||
const target = tree.find(navigation, targetId);
|
||||
|
||||
if(!item)
|
||||
return;
|
||||
|
||||
if (instruction.type === 'reparent') {
|
||||
const path = tree.getPathToItem({
|
||||
current: navigation.value,
|
||||
current: navigation,
|
||||
targetId: targetId,
|
||||
});
|
||||
if (!path) {
|
||||
@@ -467,23 +168,23 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
|
||||
}
|
||||
|
||||
const desiredId = path[instruction.desiredLevel];
|
||||
let result = tree.remove(navigation.value, itemId);
|
||||
let result = tree.remove(navigation, itemId);
|
||||
result = tree.insertAfter(result, desiredId, item);
|
||||
return result;
|
||||
}
|
||||
|
||||
// the rest of the actions require you to drop on something else
|
||||
if (itemId === targetId)
|
||||
return navigation.value;
|
||||
return navigation;
|
||||
|
||||
if (instruction.type === 'reorder-above') {
|
||||
let result = tree.remove(navigation.value, itemId);
|
||||
let result = tree.remove(navigation, itemId);
|
||||
result = tree.insertBefore(result, targetId, item);
|
||||
return result;
|
||||
}
|
||||
|
||||
if (instruction.type === 'reorder-below') {
|
||||
let result = tree.remove(navigation.value, itemId);
|
||||
let result = tree.remove(navigation, itemId);
|
||||
result = tree.insertAfter(result, targetId, item);
|
||||
return result;
|
||||
}
|
||||
@@ -492,13 +193,13 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
|
||||
if(!target || target.type !== 'folder')
|
||||
return;
|
||||
|
||||
let result = tree.remove(navigation.value, itemId);
|
||||
let result = tree.remove(navigation, itemId);
|
||||
result = tree.insertChild(result, targetId, item);
|
||||
rebuildPath([item], targetId);
|
||||
return result;
|
||||
}
|
||||
|
||||
return navigation.value;
|
||||
return navigation;
|
||||
}
|
||||
function transform(items: TreeItem[] | undefined): TreeItemEditable[] | undefined
|
||||
{
|
||||
@@ -516,7 +217,7 @@ function flatten(items: TreeItemEditable[] | undefined): TreeItemEditable[]
|
||||
}
|
||||
function drop(instruction: Instruction, itemId: string, targetId: string)
|
||||
{
|
||||
navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value ?? [];
|
||||
navigation = updateTree(instruction, itemId, targetId) ?? navigation ?? [];
|
||||
}
|
||||
function rebuildPath(tree: TreeItemEditable[] | null | undefined, parentPath: string)
|
||||
{
|
||||
@@ -528,38 +229,14 @@ function rebuildPath(tree: TreeItemEditable[] | null | undefined, parentPath: st
|
||||
rebuildPath(e.children, getPath(e));
|
||||
});
|
||||
}
|
||||
async function save(redirect: boolean): Promise<void>
|
||||
function save()
|
||||
{
|
||||
//@ts-ignore
|
||||
const map = (e: TreeItemEditable[]): TreeItemEditable[] => e.map(f => ({ ...f, content: f.content ? convertContentToText(f.type, f.content) : undefined, children: f.children ? map(f.children) : undefined }));
|
||||
saveStatus.value = 'pending';
|
||||
try {
|
||||
const result = await $fetch(`/api/project`, {
|
||||
method: 'post',
|
||||
body: map(navigation.value),
|
||||
});
|
||||
saveStatus.value = 'success';
|
||||
edited.value = false;
|
||||
sessionStorage.clear();
|
||||
|
||||
toaster.clear('error');
|
||||
toaster.add({ type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000 });
|
||||
|
||||
//@ts-ignore
|
||||
complete.value = result as ExploreContent[];
|
||||
if(redirect) router.go(-1);
|
||||
} catch(e: any) {
|
||||
toaster.add({
|
||||
type: 'error', content: e.message, timer: true, duration: 10000
|
||||
})
|
||||
console.error(e);
|
||||
saveStatus.value = 'error';
|
||||
if(selected.value && selected.value.content)
|
||||
{
|
||||
selected.value.path = getPath(selected.value);
|
||||
Content.save(selected.value);
|
||||
}
|
||||
}
|
||||
function getPath(item: TreeItemEditable): string
|
||||
{
|
||||
return [item.parent, parsePath(item.customPath ? item.name : item.title)].filter(e => !!e).join('/');
|
||||
}
|
||||
|
||||
const defaultExpanded = computed(() => {
|
||||
if(router.currentRoute.value.hash)
|
||||
@@ -568,11 +245,11 @@ const defaultExpanded = computed(() => {
|
||||
split.forEach((e, i) => { if(i !== 0) split[i] = split[i - 1] + '/' + e });
|
||||
return split;
|
||||
}
|
||||
})
|
||||
});
|
||||
watch(router.currentRoute, (value) => {
|
||||
if(value && value.hash && navigation.value)
|
||||
selected.value = tree.find(navigation.value, decodeURIComponent(value.hash.substring(1)));
|
||||
if(value && value.hash && navigation)
|
||||
selected.value = tree.find(navigation, decodeURIComponent(value.hash.substring(1)));
|
||||
else
|
||||
selected.value = undefined;
|
||||
}, { immediate: true });
|
||||
}, { immediate: true }); */
|
||||
</script>
|
||||
Reference in New Issue
Block a user