Merge branch 'dev' of https://git.peaceultime.com/Peaceultime/obsidian-visualiser into dev

pages/explore/[...path].vue

@@ -42,6 +42,14 @@
 <script setup lang="ts">
 const route = useRouter().currentRoute;
 const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
+
+watch(path, () => {
+    if(path.value === 'index')
+    {
+        useRouter().push({ name: 'explore' });
+    }
+}, { immediate: true });
+
 const { loggedIn, user } = useUserSession();
 
 const { data: page, status, error } = await useFetch(`/api/file/${encodeURIComponent(path.value)}`, { watch: [route, path], });

pages/explore/edit/[...path].vue

@@ -6,9 +6,14 @@
         <div class="flex flex-col xl:flex-row xl:justify-between justify-center items-center w-full px-4 pb-4 border-b border-light-35 dark:border-dark-35 bg-light-0 dark:bg-dark-0">
             <input type="text" v-model="page.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" />
             <div class="flex gap-4 self-end xl:self-auto flex-wrap">
-                <Tooltip message="Consultable uniquement par le propriétaire" side="bottom"><Switch label="Privé" v-model="page.private" /></Tooltip>
-                <Tooltip message="Afficher dans le menu de navigation" side="bottom"><Switch label="Navigable" v-model="page.navigable" /></Tooltip>
-                <Button @click="() => save()" :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>
+                <div class="flex gap-4">
+                    <Tooltip message="Consultable uniquement par le propriétaire" side="bottom"><Switch label="Privé" v-model="page.private" /></Tooltip>
+                    <Tooltip message="Afficher dans le menu de navigation" side="bottom"><Switch label="Navigable" v-model="page.navigable" /></Tooltip>
+                </div>
+                <div class="flex gap-4">
+                    <Button @click="() => save()" :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>
+                    <NuxtLink :href="{ name: 'explore-path', params: { path: path } }"><Button>Annuler</Button></NuxtLink>
+                </div>
             </div>
         </div>
         <div class="my-4 flex-1 w-full max-h-full flex">

pages/explore/edit/index.vue

@@ -0,0 +1,45 @@
+<template>
+    
+</template>
+
+
+<script setup lang="ts">
+const { user, loggedIn } = useUserSession();
+
+const toaster = useToast();
+const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
+
+const { data: page, status, error } = await useLazyFetch(`/api/navigation`);
+
+if(!loggedIn || (page.value && page.value.owner !== user.value?.id))
+{
+    useRouter().replace({ name: 'explore-path', params: { path: path.value } });
+}
+
+async function save(): Promise<void>
+{
+    saveStatus.value = 'pending';
+    try {
+        await $fetch(`/api/file`, {
+            method: 'post',
+            body: page.value,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        saveStatus.value = 'success';
+
+        toaster.clear('error');
+        toaster.add({
+            type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
+        });
+
+        useRouter().push({ name: 'explore-path', params: { path: path.value } });
+    } catch(e: any) {
+        toaster.add({
+            type: 'error', content: e.message, timer: true, duration: 10000
+        })
+        saveStatus.value = 'error';
+    }
+}
+</script>

pages/explore/index.vue

@@ -1,3 +1,42 @@
 <template>
-    Index
-</template>
+    <div v-if="status === 'pending'" class="flex">
+        <Head>
+            <Title>d[any] - Chargement</Title>
+        </Head>
+        <Loading />
+    </div>
+    <div class="flex flex-1 justify-start items-start" v-else-if="page">
+        <Head>
+            <Title>d[any] - Accueil</Title>
+        </Head>
+        <div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
+            <div class="flex flex-1 flex-row justify-between items-center">
+                <ProseH1>{{ page.title }}</ProseH1>
+                <div class="flex gap-4">
+                    <NuxtLink :href="{ name: 'explore-edit-path', params: { path: 'index' } }"><Button v-if="isOwner">Modifier la page</Button></NuxtLink>
+                    <NuxtLink :href="{ name: 'explore-edit' }"><Button v-if="isOwner">Configurer le projet</Button></NuxtLink>
+                </div>
+            </div>
+            <Markdown :content="page.content" />
+        </div>
+    </div>
+    <div v-else-if="status === 'error'">
+        <Head>
+            <Title>d[any] - Erreur</Title>
+        </Head>
+        <span>{{ error?.message }}</span>
+    </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">
+const { loggedIn, user } = useUserSession();
+
+const { data: page, status, error } = await useFetch(`/api/file/index`);
+const isOwner = computed(() => user.value?.id === page.value?.owner);
+</script>