98 lines
4.5 KiB
Vue
98 lines
4.5 KiB
Vue
<template>
|
|
<Head>
|
|
<Title>d[any] - Modification</Title>
|
|
</Head>
|
|
<div class="flex flex-1 flex-col xl:-mx-12 xl:-my-8 lg:-mx-8 lg:-my-6 -mx-6 -my-3 overflow-hidden">
|
|
<div class="z-30 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
|
|
<div class="flex items-center px-2 gap-4">
|
|
<!-- <CollapsibleTrigger asChild>
|
|
<Button icon class="!bg-transparent group md:hidden">
|
|
<Icon class="group-data-[state=open]:hidden" icon="radix-icons:hamburger-menu" />
|
|
<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
|
|
</Button>
|
|
</CollapsibleTrigger> -->
|
|
<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-opacity-70 m-2 flex items-center gap-4" aria-label="Accueil" :to="{ path: '/', force: true }">
|
|
<Avatar src="/logo.dark.svg" class="dark:block hidden" />
|
|
<Avatar src="/logo.light.svg" class="block dark:hidden" />
|
|
<span class="text-xl max-md:hidden">d[any]</span>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="flex items-center px-2 gap-4">
|
|
<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70" :to="{ name: 'user-login' }">{{ user!.username }}</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-1 flex-row relative h-screen overflow-hidden">
|
|
<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
|
|
<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden" ref="tree"></div>
|
|
<div class="xl:px-12 px-6 pt-4 pb-2 text-center text-xs text-light-60 dark:text-dark-60">
|
|
<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 - 2025</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-1 flex-row max-h-full overflow-hidden" ref="container"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Content, Editor } from '#shared/content.util';
|
|
import { button, loading } from '#shared/components.util';
|
|
import { dom, icon, text } from '#shared/dom.util';
|
|
import { modal, popper } from '#shared/floating.util';
|
|
|
|
definePageMeta({
|
|
rights: ['admin', 'editor'],
|
|
layout: 'null',
|
|
});
|
|
|
|
const toaster = useToast();
|
|
const { user } = useUserSession();
|
|
const tree = useTemplateRef('tree'), container = useTemplateRef('container');
|
|
let editor: Editor;
|
|
|
|
function pull()
|
|
{
|
|
Content.pull().then(e => {
|
|
toaster.add({ type: 'success', content: 'Données mises à jour avec succès.', timer: true, duration: 7500 });
|
|
}).catch(e => {
|
|
toaster.add({ type: 'success', content: 'Une erreur est survenue durant la récupération des données.', timer: true, duration: 7500 });
|
|
console.error(e);
|
|
});
|
|
}
|
|
function push()
|
|
{
|
|
const { close } = modal([dom('div', { class: 'flex flex-col gap-4 justify-center items-center' }, [ dom('div', { class: 'text-xl', text: 'Mise à jour des données' }), loading('large') ])], { priority: false, closeWhenOutside: true, });
|
|
Content.push().then(e => {
|
|
close();
|
|
toaster.add({ type: 'success', content: 'Données mises à jour avec succès.', timer: true, duration: 7500 });
|
|
}).catch(e => {
|
|
close();
|
|
toaster.add({ type: 'success', content: 'Une erreur est survenue durant l\'enregistrement des données.', timer: true, duration: 7500 });
|
|
console.error(e);
|
|
});
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if(tree.value && container.value && await Content.ready)
|
|
{
|
|
const load = loading('normal');
|
|
tree.value.appendChild(load);
|
|
|
|
const content = dom('div', { class: 'flex flex-row justify-start items-center gap-4 p-2' }, [
|
|
popper(button(icon('ph:cloud-arrow-down', { height: 20, width: 20 }), pull, 'p-1'), { placement: 'top', offset: 4, delay: 120, arrow: true, content: [text('Actualiser')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }),
|
|
popper(button(icon('ph:cloud-arrow-up', { height: 20, width: 20 }), push, 'p-1'), { placement: 'top', offset: 4, delay: 120, arrow: true, content: [text('Enregistrer')], class: 'TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50' }),
|
|
])
|
|
|
|
tree.value.insertBefore(content, load);
|
|
|
|
editor = new Editor();
|
|
|
|
tree.value.replaceChild(editor.tree.container, load);
|
|
container.value.appendChild(editor.container);
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
editor?.unmount();
|
|
});
|
|
</script> |