Visual edits and fixes, navigation sorting fix

layouts/default.vue

@@ -78,19 +78,19 @@
 						</NuxtLink>
 						<Tree v-if="pages" v-model="pages" :getKey="(item) => item.path">
 							<template #default="{ item, isExpanded }">
-								<NuxtLink :href="item.value.path && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.path } } : undefined" no-prefetch class="group flex flex-1 items-center hover:border-accent-blue" :class="{ 'font-medium': item.hasChildren }" active-class="text-accent-blue" :data-private="item.value.private">
-									<Icon v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute group-[:hover]:text-accent-purple" :style="{ 'left': `${item.level - 1}em` }" />
-									<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="group-[:hover]:text-accent-purple" />
+								<NuxtLink :href="item.value.path && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.path } } : undefined" no-prefetch class="flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple" :class="{ 'font-medium': item.hasChildren }" active-class="text-accent-blue" :data-private="item.value.private">
+									<Icon 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 - 1}em` }" />
+									<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="w-5 h-5" />
 									<div class="pl-3 py-1 flex-1 truncate">
 										{{ item.value.title }}
 									</div>
+									<Tooltip message="Privé" side="right"><Icon v-show="item.value.private" icon="radix-icons:lock-closed" /></Tooltip>
 								</NuxtLink>
 							</template>
 						</Tree>
 					</div>
 					<div class="xl:px-12 px-6 text-start text-xs text-light-60 dark:text-dark-60 relative top-4">
-						<NuxtLink class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - 
-						<NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
+						<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 - 2024</p>
 					</div>
 				</div>

pages/admin/index.vue

@@ -1,27 +1,50 @@
+<script lang="ts">
+const mailSchema = z.object({
+    to: z.string().email(),
+    message: z.string(),
+    subject: z.string(),
+});
+
+const schemaList: Record<string, z.ZodObject<any> | null> = {
+    'pull': null,
+    'push': null,
+    'mail': mailSchema,
+}
+</script>
+
 <script setup lang="ts">
+import { z } from 'zod';
+
 definePageMeta({
     rights: ['admin'],
 })
 const job = ref<string>('');
 
 const toaster = useToast();
-const data = ref(), status = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), success = ref(false), err = ref(false), error = ref();
+const payload = reactive<Record<string, any>>({});
+const data = ref(), status = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), success = ref(false), error = ref<Error | null>();
 async function fetch()
 {
     status.value = 'pending';
     data.value = null;
     error.value = null;
-    err.value = false;
     success.value = false;
 
     try
     {
+        const schema = schemaList[job.value];
+
+        if(schema)
+        {
+            const parsedPayload = schema.parse(payload);
+        }
+
         data.value = await $fetch(`/api/admin/jobs/${job.value}`, {
             method: 'POST',
+            body: payload,
         });
         status.value = 'success';
         error.value = null;
-        err.value = false;
         success.value = true;
 
         toaster.add({ duration: 10000, content: data.value ?? 'Job executé avec succès', type: 'success', timer: true, });
@@ -29,11 +52,10 @@ async function fetch()
     catch(e)
     {
         status.value = 'error';
-        error.value = e;
-        err.value = true;
+        error.value = e as Error;
         success.value = false;
 
-        toaster.add({ duration: 10000, content: error.value, type: 'error', timer: true, });
+        toaster.add({ duration: 10000, content: error.value.message, type: 'error', timer: true, });
     }
 }
 </script>
@@ -42,13 +64,18 @@ async function fetch()
     <Head>
         <Title>d[any] - Administration</Title>
     </Head>
-    <div class="flex flex-col justify-start">
+    <div class="flex flex-col justify-start items-center">
         <ProseH2>Administration</ProseH2>
-        <Select label="Job" v-model="job">
+        <Select label="Job" v-model="job" @update:model-value="payload = {}">
             <SelectItem label="Récupérer les données d'Obsidian" value="pull" />
             <SelectItem label="Envoyer les données dans Obsidian" value="push" disabled />
             <SelectItem label="Envoyer un mail de test" value="mail" />
         </Select>
+        <div v-if="job === 'mail'" class="flex justify-center items-center flex-col">
+            <TextInput label="Destinataire" class="w-full" v-model="payload.to" />
+            <TextInput label="Objet" class="w-full" v-model="payload.subject" />
+            <TextInput label="Message" class="w-full" v-model="payload.message" />
+        </div>
         <Button class="self-center" @click="() => !!job && fetch()" :loading="status === 'pending'">
             <span>Executer</span>
         </Button>

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

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

server/api/navigation.get.ts

@@ -15,7 +15,11 @@ export default defineEventHandler(async (e) => {
         navigable: explorerContentTable.navigable, 
         private: explorerContentTable.private, 
         order: explorerContentTable.order,
-    }).from(explorerContentTable).prepare().all();
+    }).from(explorerContentTable).all();
+
+    content.sort((a, b) => {
+        return a.path.split('/').length - b.path.split('/').length;
+    });
 
     if(content.length > 0)
     {

server/tasks/mail.ts

@@ -27,11 +27,12 @@ export default defineTask({
     },
     async run(e) {
         try {
+            const payload: { to: string[], message: string, subject: string } = e.payload;
             const status = await transport.sendMail({
                 from: 'Message automatique d[any] <no-reply@peaceultime.com>',
-                to: ['peaceultime@peaceultime.com', 'clem31470@gmail.com'],
-                text: 'Ceci est un texte de mail.',
-                subject: 'Test',
+                to: payload.to,
+                text: payload.message,
+                subject: payload.subject,
             });
 
             if(status.rejected.length > 0)