Small UI improvements and fixes to project edition

pages/explore/edit/index.vue

@@ -5,16 +5,26 @@
 	<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<ProjectItem>) => item.path !== undefined ? getPath(item as ProjectItem) : ''" @updateTree="drop">
+			: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; }" />
+						<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 }">
@@ -61,11 +71,35 @@
             </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-6 inline">/{{ selected.path === '' ? getPath(selected) : selected.path }}</pre></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>
+                    <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>
@@ -73,7 +107,6 @@
 	</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';
@@ -82,19 +115,34 @@ 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 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: project } = await useFetch(`/api/project`);
-const navigation = computed<ProjectItem[] | undefined>({ 
+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;
@@ -105,16 +153,17 @@ const navigation = computed<ProjectItem[] | undefined>({
         project.value = proj;
     }
 });
-const selected = ref<ProjectItem>();
+const selected = ref<ProjectExtendedItem>();
 
 useShortcuts({
     meta_s: { usingInput: true, handler: () => save(false) },
     meta_n: { usingInput: true, handler: () => add('markdown') },
-    meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: path.value }}) }
+    meta_shift_n: { usingInput: true, handler: () => add('folder') },
+    meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore' }) }
 })
 
 const tree = {
-  remove(data: ProjectItem[], id: string): ProjectItem[] {
+  remove(data: ProjectExtendedItem[], id: string): ProjectExtendedItem[] {
 	return data
 	  .filter(item => getPath(item) !== id)
 	  .map((item) => {
@@ -127,7 +176,7 @@ const tree = {
 		return item;
 	  });
   },
-  insertBefore(data: ProjectItem[], targetId: string, newItem: ProjectItem): ProjectItem[] {
+  insertBefore(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
 	return data.flatMap((item) => {
 	  if (getPath(item) === targetId)
 		return [newItem, item];
@@ -141,7 +190,7 @@ const tree = {
 	  return item;
 	});
   },
-  insertAfter(data: ProjectItem[], targetId: string, newItem: ProjectItem): ProjectItem[] {
+  insertAfter(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
 	return data.flatMap((item) => {
 	  if (getPath(item) === targetId)
 		return [item, newItem];
@@ -156,7 +205,7 @@ const tree = {
 	  return item;
 	});
   },
-  insertChild(data: ProjectItem[], targetId: string, newItem: ProjectItem): ProjectItem[] {
+  insertChild(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
 	return data.flatMap((item) => {
 	  if (getPath(item) === targetId) {
 		// already a parent: add as first child
@@ -177,7 +226,7 @@ const tree = {
 	  };
 	});
   },
-  find(data: ProjectItem[], itemId: string): ProjectItem | undefined {
+  find(data: ProjectExtendedItem[], itemId: string): ProjectExtendedItem | undefined {
 	for (const item of data) {
 	  if (getPath(item) === itemId)
 		return item;
@@ -189,7 +238,7 @@ const tree = {
 	  }
 	}
   },
-  search(data: ProjectItem[], prop: keyof ProjectItem, value: string): ProjectItem[] {
+  search(data: ProjectExtendedItem[], prop: keyof ProjectExtendedItem, value: string): ProjectExtendedItem[] {
 	const arr = [];
 
 	for (const item of data)
@@ -209,7 +258,7 @@ const tree = {
 	targetId,
 	parentIds = [],
   }: {
-	current: ProjectItem[]
+	current: ProjectExtendedItem[]
 	targetId: string
 	parentIds?: string[]
   }): string[] | undefined {
@@ -226,7 +275,7 @@ const tree = {
 		return nested;
 	}
   },
-  hasChildren(item: ProjectItem): boolean {
+  hasChildren(item: ProjectExtendedItem): boolean {
 	return (item.children ?? []).length > 0;
   },
 }
@@ -239,7 +288,8 @@ function add(type: FileType): void
 	}
 
 	const news = [...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
-	const item: ProjectItem = { navigable: true, private: false, parent: '', path: '', title: `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`, type: type, order: 0, children: type === 'folder' ? [] : undefined };
+	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)
 	{
@@ -255,7 +305,7 @@ function add(type: FileType): void
 		navigation.value = tree.insertAfter(navigation.value, getPath(selected.value), item);
 	}
 }
-function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectItem[] | undefined {
+function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectExtendedItem[] | undefined {
 	if(!navigation.value)
 		return;
 
@@ -309,12 +359,15 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
 
   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: ProjectItem[] | null | undefined, parentPath: string)
+function rebuildPath(tree: ProjectExtendedItem[] | null | undefined, parentPath: string)
 {
     if(!tree)
         return;
@@ -339,7 +392,7 @@ async function save(redirect: boolean): Promise<void>
 			type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
 		});
 
-		if(redirect) router.push({ name: 'explore-path', params: { path: path.value } });
+		if(redirect) router.push({ name: 'explore' });
 	} catch(e: any) {
 		toaster.add({
 			type: 'error', content: e.message, timer: true, duration: 10000
@@ -347,8 +400,8 @@ async function save(redirect: boolean): Promise<void>
 		saveStatus.value = 'error';
 	}
 }
-function getPath(item: ProjectItem): string
+function getPath(item: ProjectExtendedItem): string
 {
-    return [item.parent, parsePath(item.title)].filter(e => !!e).join('/');
+    return [item.parent, parsePath(item.customPath ? item.name : item.title)].filter(e => !!e).join('/');
 }
 </script>