407 lines
14 KiB
Vue
407 lines
14 KiB
Vue
<template>
|
|
<Head>
|
|
<Title>d[any] - Configuration du projet</Title>
|
|
</Head>
|
|
<div class="flex flex-1 flex-row gap-4 p-6 items-start" v-if="navigation">
|
|
<div class="flex flex-1 flex-col w-[450px] max-w-[450px] max-h-full">
|
|
<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"
|
|
:items="navigation ?? undefined" :get-key="(item: Partial<ProjectExtendedItem>) => item.path !== undefined ? getPath(item as ProjectExtendedItem) : ''" @updateTree="drop">
|
|
<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, item }">
|
|
<div class="flex flex-1 items-center 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" >
|
|
<Icon :icon="isExpanded ? 'lucide:folder-open' : 'lucide:folder'"/>
|
|
</span>
|
|
<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="group-[:hover]:text-accent-purple mx-2" @click="() => { handleSelect(); selected = isSelected ? undefined : item.value; }" />
|
|
<div class="pl-3 py-1 flex-1 truncate" :title="item.value.title" @click="() => { handleSelect(); selected = isSelected ? undefined : item.value; }">
|
|
{{ item.value.title }}
|
|
</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 - 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>
|
|
<div class="flex flex-col flex-1">
|
|
<div class="flex self-end gap-4 px-4">
|
|
<DropdownMenu align="center" side="bottom" :options="[{
|
|
type: 'item',
|
|
label: 'Markdown',
|
|
kbd: 'Ctrl+N',
|
|
icon: 'radix-icons:file',
|
|
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: 'Fichier',
|
|
icon: 'radix-icons:file-text',
|
|
select: () => add('file'),
|
|
}]">
|
|
<Button>Nouveau</Button>
|
|
</DropdownMenu>
|
|
<Button @click="navigation = tree.remove(navigation, getPath(selected))" v-if="selected" class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Supprimer</Button>
|
|
<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 no-prefetch :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" @change="(e) => {
|
|
if(selected && !selected.customPath)
|
|
{
|
|
selected.name = parsePath(selected.title);
|
|
rebuildPath(selected.children, getPath(selected));
|
|
}
|
|
}" 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 gap-2">
|
|
<div class="flex flex-col justify-start items-start">
|
|
<Switch label="Chemin personnalisé" v-model="selected.customPath" />
|
|
<span>
|
|
<pre v-if="selected.customPath" class="flex items-center">/{{ selected.parent !== '' ? selected.parent + '/' : '' }}<TextInput v-model="selected.name" @input="(e) => {
|
|
if(selected && selected.customPath)
|
|
{
|
|
selected.name = parsePath(selected.name);
|
|
rebuildPath(selected.children, getPath(selected));
|
|
}
|
|
}" class="mx-0"/></pre>
|
|
<pre v-else>/{{ getPath(selected) }}</pre>
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<HoverCard class="!py-2 !px-4"><Icon icon="radix-icons:question-mark-circled" /><template #content><span class="text-sm italic text-light-60 dark:text-dark-60">Un fichier privé n'est consultable que par le propriétaire du projet. Rendre un dossier privé cache automatiquement son contenu sans avoir à chaque fichier un par un.</span></template></HoverCard>
|
|
<Switch label="Privé" v-model="selected.private" />
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<HoverCard class="!py-2 !px-4"><Icon icon="radix-icons:question-mark-circled" /><template #content><span class="text-sm italic text-light-60 dark:text-dark-60">Un fichier navigable est disponible dans le menu de navigation à gauche. Les fichiers non navigable peuvent toujours être utilisés dans des liens.</span></template></HoverCard>
|
|
<Switch label="Navigable" v-model="selected.navigable" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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 { parsePath } from '#shared/general.utils';
|
|
import type { ProjectItem } from '~/schemas/project';
|
|
import type { FileType } from '~/schemas/file';
|
|
import { iconByType } from '#shared/general.utils';
|
|
|
|
interface ProjectExtendedItem extends ProjectItem
|
|
{
|
|
customPath: boolean
|
|
children?: ProjectExtendedItem[]
|
|
}
|
|
interface ProjectExtended
|
|
{
|
|
items: ProjectExtendedItem[]
|
|
}
|
|
|
|
definePageMeta({
|
|
rights: ['admin', 'editor'],
|
|
});
|
|
|
|
const router = useRouter();
|
|
|
|
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;
|
|
|
|
if(proj && value)
|
|
proj.items = value;
|
|
|
|
project.value = proj;
|
|
}
|
|
});
|
|
const selected = ref<ProjectExtendedItem>();
|
|
|
|
useShortcuts({
|
|
meta_s: { usingInput: true, handler: () => save(false) },
|
|
meta_n: { usingInput: true, handler: () => add('markdown') },
|
|
meta_shift_n: { usingInput: true, handler: () => add('folder') },
|
|
meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore' }) }
|
|
})
|
|
|
|
const tree = {
|
|
remove(data: ProjectExtendedItem[], id: string): ProjectExtendedItem[] {
|
|
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: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
|
|
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: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
|
|
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: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
|
|
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: ProjectExtendedItem[], itemId: string): ProjectExtendedItem | 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: ProjectExtendedItem[], prop: keyof ProjectExtendedItem, value: string): ProjectExtendedItem[] {
|
|
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: ProjectExtendedItem[]
|
|
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: ProjectExtendedItem): boolean {
|
|
return (item.children ?? []).length > 0;
|
|
},
|
|
}
|
|
|
|
function add(type: FileType): void
|
|
{
|
|
if(!navigation.value)
|
|
{
|
|
return;
|
|
}
|
|
|
|
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 };
|
|
|
|
if(!selected.value)
|
|
{
|
|
navigation.value = [...navigation.value, item];
|
|
}
|
|
else if(selected.value?.children)
|
|
{
|
|
item.parent = getPath(selected.value);
|
|
navigation.value = tree.insertChild(navigation.value, item.parent, item);
|
|
}
|
|
else
|
|
{
|
|
navigation.value = tree.insertAfter(navigation.value, getPath(selected.value), item);
|
|
}
|
|
}
|
|
function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectExtendedItem[] | undefined {
|
|
if(!navigation.value)
|
|
return;
|
|
|
|
const item = tree.find(navigation.value, itemId);
|
|
const target = tree.find(navigation.value, targetId);
|
|
|
|
if(!item)
|
|
return;
|
|
|
|
if (instruction.type === 'reparent') {
|
|
const path = tree.getPathToItem({
|
|
current: navigation.value,
|
|
targetId: targetId,
|
|
});
|
|
if (!path) {
|
|
console.error(`missing ${path}`);
|
|
return;
|
|
}
|
|
|
|
const desiredId = path[instruction.desiredLevel];
|
|
let result = tree.remove(navigation.value, 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;
|
|
|
|
if (instruction.type === 'reorder-above') {
|
|
let result = tree.remove(navigation.value, itemId);
|
|
result = tree.insertBefore(result, targetId, item);
|
|
return result;
|
|
}
|
|
|
|
if (instruction.type === 'reorder-below') {
|
|
let result = tree.remove(navigation.value, itemId);
|
|
result = tree.insertAfter(result, targetId, item);
|
|
return result;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
return navigation.value;
|
|
}
|
|
function transform(items: ProjectItem[] | undefined): ProjectExtendedItem[] | undefined
|
|
{
|
|
return items?.map(e => ({...e, customPath: e.name !== parsePath(e.title), children: transform(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)
|
|
{
|
|
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/project`, {
|
|
method: 'post',
|
|
body: project.value,
|
|
});
|
|
saveStatus.value = 'success';
|
|
|
|
toaster.clear('error');
|
|
toaster.add({
|
|
type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
|
|
});
|
|
|
|
if(redirect) router.push({ name: 'explore' });
|
|
} catch(e: any) {
|
|
toaster.add({
|
|
type: 'error', content: e.message, timer: true, duration: 10000
|
|
})
|
|
saveStatus.value = 'error';
|
|
}
|
|
}
|
|
function getPath(item: ProjectExtendedItem): string
|
|
{
|
|
return [item.parent, parsePath(item.customPath ? item.name : item.title)].filter(e => !!e).join('/');
|
|
}
|
|
</script> |