122 lines
3.7 KiB
Vue
122 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { LazyLinkModal, LazyConfirmModal } from "#components";
|
|
|
|
definePageMeta({ middleware: "auth" });
|
|
|
|
const toast = useToast();
|
|
const overlay = useOverlay();
|
|
|
|
const { fetch: fetchSession } = useUserSession();
|
|
|
|
const signOut = async () => {
|
|
await $fetch("/api/auth/sign-out", { method: "POST" });
|
|
await fetchSession();
|
|
await navigateTo("/auth/sign-in");
|
|
};
|
|
|
|
const { data: links, status, refresh } = useLazyFetch("/api/links", { key: "links", server: false, });
|
|
|
|
const route = useRoute();
|
|
const category = computed(() => {
|
|
if (route.query.filter === "active") return "active";
|
|
if (route.query.filter === "disabled") return "disabled";
|
|
return "all";
|
|
});
|
|
|
|
const categoryTitle = computed(() => {
|
|
if (category.value === "active") return "Active links";
|
|
if (category.value === "disabled") return "Disabled links";
|
|
return "All links";
|
|
});
|
|
useHead({ title: categoryTitle });
|
|
|
|
const filteredLinks = computed(() => {
|
|
if (!links.value) return [];
|
|
if (category.value === "active") return links.value.filter((l) => !l.disabled);
|
|
if (category.value === "disabled") return links.value.filter((l) => l.disabled);
|
|
return links.value;
|
|
});
|
|
|
|
const openModal = async (link: Link | null) => {
|
|
const modal = overlay.create(LazyLinkModal, { destroyOnClose: true });
|
|
const instance = modal.open({ link });
|
|
if (await instance.result) await refresh();
|
|
}
|
|
|
|
const deleteLink = async (link: Link) => {
|
|
const modal = overlay.create(LazyConfirmModal, { destroyOnClose: true });
|
|
const instance = modal.open({ title: "Delete link", description: `Are you sure you want to delete "${link.name}"?` });
|
|
if (!await instance.result) return;
|
|
|
|
try {
|
|
await $fetch(`/api/links/${link.id}`, { method: "DELETE" });
|
|
toast.add({ title: "Link deleted", color: "success" });
|
|
await refresh();
|
|
} catch (error) {
|
|
toast.add({ title: getApiError(error), color: "error" });
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardGroup>
|
|
<UDashboardSidebar :toggle="false" :ui="{ header: 'border-b border-default' }">
|
|
<template #header>
|
|
<span class="font-semibold text-highlighted text-lg">pihka.al</span>
|
|
</template>
|
|
|
|
<UNavigationMenu
|
|
orientation="vertical"
|
|
highlight
|
|
:items="[
|
|
{
|
|
label: 'All',
|
|
icon: 'i-lucide-link',
|
|
badge: links?.length ?? 0,
|
|
to: '/dashboard',
|
|
active: category === 'all',
|
|
},
|
|
{
|
|
label: 'Active',
|
|
icon: 'i-lucide-link-2',
|
|
badge: links?.filter((l) => !l.disabled).length ?? 0,
|
|
to: '/dashboard?filter=active',
|
|
active: category === 'active',
|
|
},
|
|
{
|
|
label: 'Disabled',
|
|
icon: 'i-lucide-link-2-off',
|
|
badge: links?.filter((l) => l.disabled).length ?? 0,
|
|
to: '/dashboard?filter=disabled',
|
|
active: category === 'disabled',
|
|
},
|
|
]"
|
|
class="px-2"
|
|
/>
|
|
<template #footer>
|
|
<UButton variant="link" icon="i-lucide-log-out" block @click="signOut">Sign out</UButton>
|
|
</template>
|
|
</UDashboardSidebar>
|
|
|
|
<UDashboardPanel>
|
|
<template #header>
|
|
<UDashboardNavbar :title="category === 'all' ? 'All links' : category === 'active' ? 'Active links' : 'Disabled links'">
|
|
<template #right>
|
|
<UButton icon="i-lucide-plus" variant="subtle" @click="openModal(null)">New link</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
</template>
|
|
|
|
<template #body>
|
|
<LinksTable
|
|
:data="filteredLinks"
|
|
:status="status"
|
|
@edit="openModal"
|
|
@delete="deleteLink"
|
|
/>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</UDashboardGroup>
|
|
</template>
|