Peaceultime
/
obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Finish Dropdown menu and start project config page

This commit is contained in:
Peaceultime 2024-11-14 17:32:13 +01:00
parent 0c17dbf7bc
commit d708e9ceb6
15 changed files with 71 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

16
components/base/DropdownContentRender.vue
View File

@ -1,10 +1,10 @@
<template>
<template v-for="(item, idx) of options">
<template v-if="item.type === 'item'">
<DropdownMenuItem :disabled="item.disabled" :textValue="item.label" @select="item.select">
<Icon v-if="item.icon" :icon="item.icon" />
<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>
<span v-if="item.kbd"> {{ item.kbd }} </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>
</DropdownMenuItem>
</template>
@ -34,13 +34,13 @@
<template v-if="item.type === 'submenu'">
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<DropdownMenuSubTrigger class="group cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 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" />
<span>{{ item.label }}</span>
<Icon icon="radix-icons:chevron-right" />
<Icon icon="radix-icons:chevron-right" class="absolute right-1" />
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuSubContent class="z-50 outline-none bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade border border-light-35 dark:border-dark-35">
<DropdownContentRender :options="item.items" />
</DropdownMenuSubContent>
</DropdownMenuPortal>
@ -48,8 +48,8 @@
</template>
<template v-if="item.type === 'group'">
<DropdownMenuLabel>{{ item.label }}</DropdownMenuLabel>
<DropdownContetnRender :options="item.items" />
<DropdownMenuLabel class="text-light-70 dark:text-dark-70 text-sm text-center pt-1">{{ item.label }}</DropdownMenuLabel>
<DropdownContentRender :options="item.items" />
<DropdownMenuSeparator v-if="idx !== options.length - 1" />
</template>

5
components/base/DropdownMenu.vue
View File

@ -3,11 +3,10 @@
<DropdownMenuTrigger :disabled="disabled" ><slot /></DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent :align="align" :side="side">
<DropdownMenuContent :align="align" :side="side" class="z-50 outline-none bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade border border-light-35 dark:border-dark-35">
<DropdownContentRender :options="options" />
<DropdownMenuSeparator />
<DropdownMenuArrow />
<DropdownMenuArrow class="fill-light-35 dark:fill-dark-35" />
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenuRoot>

BIN
db.sqlite
View File

Binary file not shown.

BIN
db.sqlite-shm
View File

Binary file not shown.

BIN
db.sqlite-wal
View File

Binary file not shown.

25
layouts/default.vue
View File

@ -19,17 +19,16 @@
</Tooltip>
<Tooltip v-else :message="'Mon profil'" side="right">
<DropdownMenu :options="[{
type: 'group',
items: [{
type: 'item',
label: 'Mon profil',
click: () => useRouter().push({ name: 'user-profile' }),
icon: 'radix-icons:avatar',
select: () => useRouter().push({ name: 'user-profile' }),
}, {
type: 'item',
label: 'Deconnexion',
click: () => clear(),
}]
}]">
icon: 'radix-icons:close',
select: () => clear(),
}]" side="right" align="start">
<div class="hover:border-opacity-70 flex">
<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
</div>
@ -57,17 +56,14 @@
</Tooltip>
<Tooltip v-else :message="'Mon profil'" side="right">
<DropdownMenu :options="[{
type: 'group',
items: [{
type: 'item',
label: 'Mon profil',
click: () => useRouter().push({ name: 'user-profile' }),
select: () => useRouter().push({ name: 'user-profile' }),
}, {
type: 'item',
label: 'Deconnexion',
click: () => clear(),
}]
}]">
select: () => clear(),
}]" side="right" align="start">
<div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
</div>
@ -95,6 +91,7 @@
<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
import type { NavigationTreeItem } from '~/server/api/navigation.get';
const open = ref(false);
const { loggedIn, clear } = useUserSession();
@ -111,8 +108,8 @@ const { data: pages } = await useLazyFetch('/api/navigation', {
watch: [useRouter().currentRoute]
});
function transform(list: any[]): any[]
function transform(list: NavigationTreeItem[]): any[]
{
return list?.map(e => ({ label: e.title, children: transform(e.children), link: e.path, tag: e.private ? 'private' : e.type, open: path.value?.startsWith(e.path)}))
return list?.map(e => ({ label: e.title, children: transform(e?.children ?? []), link: e.path, tag: e.private ? 'private' : e.type, open: path.value?.startsWith(e.path)}))
}
</script>

1
package.json
View File

@ -7,6 +7,7 @@
"dev": "bunx --bun nuxi dev"
},
"dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
"@iconify/vue": "^4.1.2",
"@nuxtjs/color-mode": "^3.5.2",
"@nuxtjs/tailwindcss": "^6.12.2",

2
pages/explore/[...path].vue
View File

@ -46,7 +46,7 @@ const path = computed(() => Array.isArray(route.value.params.path) ? route.value
watch(path, () => {
if(path.value === 'index')
{
useRouter().push({ name: 'explore' });
useRouter().replace({ name: 'explore' });
}
}, { immediate: true });

3
pages/explore/edit/[...path].vue
View File

@ -71,9 +71,6 @@ async function save(): Promise<void>
await $fetch(`/api/file`, {
method: 'post',
body: page.value,
headers: {
'Content-Type': 'application/json',
},
});
saveStatus.value = 'success';

51
pages/explore/edit/index.vue
View File

@ -1,31 +1,60 @@
<template>
<Head>
<Title>d[any] - Configuration du projet</Title>
</Head>
<div class="flex flex-1 flex-row gap-4 p-6">
<TreeRoot v-slot="{ flattenItems }" 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 w-[450px]" :items="navigation ?? undefined" :get-key="(item) => item.path" :defaultExpanded="flatten(navigation ?? [])">
<TreeItem v-for="item in flattenItems" v-slot="{ handleToggle, handleSelect, isExpanded, isSelected }" :key="item._id" :style="{ 'padding-left': `${item.level - 0.5}em` }" v-bind="item.bind" class="flex items-center px-2 outline-none relative cursor-pointer hover:bg-light-20 dark:hover:bg-dark-20 data-[selected]:bg-light-35 dark:data-[selected]:bg-dark-35" @select.prevent @toggle.prevent>
<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; }">
{{ item.value.title }}
</div>
</TreeItem>
</TreeRoot>
<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" />
<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>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const { user, loggedIn } = useUserSession();
import type { NavigationTreeItem } from '~/server/api/navigation.get';
import { Icon } from '@iconify/vue/dist/iconify.js';
definePageMeta({
rights: ['admin', 'editor'],
})
const route = useRouter().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: page, status, error } = await useLazyFetch(`/api/navigation`);
const { data: navigation, status, error } = await useLazyFetch(`/api/navigation`);
const selected = ref<NavigationTreeItem>();
if(!loggedIn || (page.value && page.value.owner !== user.value?.id))
function flatten(arr: NavigationTreeItem[]): string[]
{
useRouter().replace({ name: 'explore-path', params: { path: path.value } });
return arr.flatMap(e => [e.path, ...flatten(e.children ?? [])]);
}
async function save(): Promise<void>
{
saveStatus.value = 'pending';
try {
await $fetch(`/api/file`, {
await $fetch(`/api/navigation`, {
method: 'post',
body: page.value,
headers: {
'Content-Type': 'application/json',
},
body: navigation.value,
});
saveStatus.value = 'success';

9
server/api/navigation.get.ts
View File

@ -1,7 +1,8 @@
import useDatabase from '~/composables/useDatabase';
import { explorerContentTable } from '~/db/schema';
import type { Navigation, NavigationItem } from '~/schemas/navigation';
import type { NavigationItem } from '~/schemas/navigation';
export type NavigationTreeItem = NavigationItem & { children?: NavigationItem[] };
export default defineEventHandler(async (e) => {
const { user } = await getUserSession(e);
@ -23,7 +24,7 @@ export default defineEventHandler(async (e) => {
if(content.length > 0)
{
const navigation: Navigation = [];
const navigation: NavigationTreeItem[] = [];
for(const idx in content)
{
@ -53,7 +54,7 @@ export default defineEventHandler(async (e) => {
setResponseStatus(e, 404);
});
function addChild(arr: Navigation, e: NavigationItem): void
function addChild(arr: NavigationTreeItem[], e: NavigationItem): void
{
const parent = arr.find(f => e.path.startsWith(f.path));
@ -66,7 +67,7 @@ function addChild(arr: Navigation, e: NavigationItem): void
}
else
{
arr.push({ title: e.title, path: e.path, type: e.type, order: e.order, private: e.private });
arr.push({ ...e });
arr.sort((a, b) => {
if(a.order && b.order)
return a.order - b.order;

4
server/api/navigation.post.ts
View File

@ -1,7 +1,7 @@
import { hasPermissions } from "#shared/auth.util";
import useDatabase from '~/composables/useDatabase';
import { explorerContentTable } from '~/db/schema';
import { schema } from '~/schemas/navigation';
import { table } from '~/schemas/navigation';
export default defineEventHandler(async (e) => {
const { user } = await getUserSession(e);
@ -11,7 +11,7 @@ export default defineEventHandler(async (e) => {
throw createError({ statusCode: 401, statusText: 'Unauthorized' });
}
const body = await readValidatedBody(e, schema.safeParse);
const body = await readValidatedBody(e, table.safeParse);
if(!body.success)
{

2
server/tasks/pull.ts
View File

@ -28,8 +28,6 @@ export default defineTask({
const db = useDatabase();
const files = db.select().from(explorerContentTable).where(ne(explorerContentTable.type, 'folder')).all();
useStorage('cache').clear();
return { result: true };
}

2
server/tasks/push.ts
View File

@ -41,7 +41,7 @@ export default defineTask({
content: null,
owner: '1',
navigable: true,
private: e.path.startsWith('98.Privé')
private: e.path.startsWith('98.Privé'),
}
}