Add new files in project config

components/base/DropdownContentRender.vue

@@ -1,13 +1,16 @@
 <template>
     <template v-for="(item, idx) of options">
         <template v-if="item.type === 'item'">
-            <DropdownMenuItem :disabled="item.disabled" :textValue="item.label" @select="item.select" :class="{'pe-1': item.kbd}" class="group cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
+            <DropdownMenuItem :disabled="item.disabled" :textValue="item.label" @select="item.select" :class="{'!pe-1': item.kbd}" class="group cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
                 <Icon v-if="item.icon" :icon="item.icon" class="absolute left-1.5" />
-                <span>{{ item.label }}</span>
+                <div class="flex flex-1 justify-between">
-                <span v-if="item.kbd" class="mx-2 text-xs font-mono text-light-70 dark:text-dark-70 relative top-0.5"> {{ item.kbd }} </span>
+                    <span>{{ item.label }}</span>
+                    <span v-if="item.kbd" class="mx-2 text-xs font-mono text-light-70 dark:text-dark-70 relative top-0.5"> {{ item.kbd }} </span>
+                </div>
             </DropdownMenuItem>
         </template>
         
+        <!-- TODO -->
         <template v-else-if="item.type === 'checkbox'">
             <DropdownMenuCheckboxItem :disabled="item.disabled" :textValue="item.label" @update:checked="item.select">
                 <DropdownMenuItemIndicator>
@@ -18,6 +21,7 @@
             </DropdownMenuCheckboxItem>
         </template>
         
+        <!-- TODO -->
         <template v-if="item.type === 'radio'">
             <DropdownMenuLabel>{{ item.label }}</DropdownMenuLabel>
             <DropdownMenuRadioGroup @update:model-value="item.change">

components/prose/ProseA.vue

@@ -33,7 +33,7 @@ import { parseURL } from 'ufo';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
 const iconByType: Record<string, string> = {
-    'folder': 'circum:folder-on',
+    'folder': 'lucide:folder',
     'canvas': 'ph:graph-light',
     'file': 'radix-icons:file',
 }

pages/explore/edit/index.vue

@@ -3,15 +3,15 @@
 		<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-h-full">
+		<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 ? getPath(item as ProjectItem) : ''" @updateTree="drop">
+			:items="navigation ?? undefined" :get-key="(item: Partial<ProjectItem>) => item.path ? getPath(item as ProjectItem) : ''" @updateTree="drop" @update:model-value="console.log">
-				<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver, item }">
+				<template #default="{ handleToggle, handleSelect, isExpanded, isDragging, 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" >
 							<Icon :icon="isExpanded ? 'lucide:folder-open' : 'lucide:folder'"/>
 						</span>
-						<div class="ps-2 py-1 flex-1 truncate" :class="{'!ps-4 border-s border-light-35 dark:border-dark-35': !item.hasChildren}" :title="item.value.title" @click="() => { handleSelect();  selected = isSelected ? undefined : item.value; }">
+						<div class="ps-2 py-1 flex-1 truncate" :class="{'!ps-4 border-s border-light-35 dark:border-dark-35': !item.hasChildren}" :title="item.value.title" @click="handleSelect">
 							{{ item.value.title }}
 						</div>
 					</div>
@@ -29,7 +29,31 @@
 		</div>
         <div class="flex flex-col flex-1">
             <div class="flex self-end gap-4 px-4">
-				<Tooltip message="Ctrl+N" side="bottom"><Button @click="() => add()">Nouveau</Button></Tooltip>
+				<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="" 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 :href="{ name: 'explore' }"><Button>Annuler</Button></NuxtLink></Tooltip>
@@ -37,7 +61,7 @@
             <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>
+                    <span><pre class="ps-2 inline">/{{ selected.parent ? 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>
@@ -163,6 +187,21 @@ const tree = {
 	  }
 	}
   },
+  search(data: ProjectItem[], prop: keyof ProjectItem, value: string): ProjectItem[] {
+	const arr = [];
+
+	for (const item of data)
+	{
+	  if (item[prop]?.toString()?.includes(value))
+		arr.push(item);
+
+	  if (tree.hasChildren(item)) {
+		arr.push(...tree.search(item.children ?? [], prop, value));
+	  }
+	}
+
+	return arr;
+  },
   getPathToItem({
 	current,
 	targetId,
@@ -197,14 +236,26 @@ function add(type: FileType): void
 		return;
 	}
 
+	const news = [...tree.search(navigation.value, 'name', 'nouveau'), ...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
+	console.log(news);
+
+	const item: ProjectItem = { navigable: true, private: false, parent: '', path: '', title: `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`, type: type, order: 0, name: `nouveau${news.length > 0 ? '-' + news.length : ''}`, children: type === 'folder' ? [] : undefined };
+
 	if(!selected.value)
 	{
-		navigation.value = [...navigation.value, {  }]
+		navigation.value = [...navigation.value, item];
 	}
-	if(selected.value?.children)
+	else if(selected.value?.children)
 	{
-		tree.insertChild(selected.value)
+		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);
+	}
+
+	selected.value = item;
 }
 function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectItem[] | undefined {
 	if(!navigation.value)

server/api/admin/jobs/[id].post.ts

@@ -11,7 +11,7 @@ export default defineEventHandler(async (e) => {
     const id = getRouterParam(e, 'id');
     const payload: Record<string, any> = await readBody(e);
 
-    console.log(payload)
+    console.log(payload);
 
     if(!id)
     {

server/tasks/mail.ts

@@ -18,8 +18,6 @@ const transport = nodemailer.createTransport({
         keySelector: selector,
         privateKey: dkim,
     },
-    logger: true,
-    debug: true,
 });
 
 export default defineTask({