feat: dashboard interface
This commit is contained in:
@@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<UApp>
|
||||
<UMain>
|
||||
<NuxtPage />
|
||||
</UMain>
|
||||
<NuxtPage />
|
||||
</UApp>
|
||||
</template>
|
||||
|
||||
81
app/components/LinkModal.vue
Normal file
81
app/components/LinkModal.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { z } from "zod";
|
||||
import type { FormSubmitEvent } from "@nuxt/ui";
|
||||
|
||||
const props = defineProps<{
|
||||
link: Link | null;
|
||||
}>();
|
||||
|
||||
const schema = z.object({
|
||||
name: z.string({ error: "Required" }),
|
||||
path: z.string({ error: "Required" }),
|
||||
url: z.url({ error: (err) => err.code === "invalid_type" ? "Required" : "Invalid format", }),
|
||||
disabled: z.boolean().optional(),
|
||||
});
|
||||
|
||||
type Schema = z.output<typeof schema>;
|
||||
|
||||
const emit = defineEmits<{ close: [value: boolean] }>();
|
||||
|
||||
const toast = useToast();
|
||||
const submitting = ref(false);
|
||||
|
||||
const state = reactive<Partial<Schema>>({
|
||||
name: props.link?.name,
|
||||
path: props.link?.path,
|
||||
url: props.link?.url,
|
||||
disabled: props.link?.disabled ?? false,
|
||||
});
|
||||
|
||||
const onSubmit = async (event: FormSubmitEvent<Schema>) => {
|
||||
submitting.value = true;
|
||||
try {
|
||||
if (props.link) {
|
||||
await $fetch(`/api/links/${props.link.id}`, { method: "PATCH", body: event.data, });
|
||||
toast.add({ title: "Link updated", color: "success" });
|
||||
} else {
|
||||
await $fetch("/api/links", { method: "POST", body: event.data });
|
||||
toast.add({ title: "Link created", color: "success" });
|
||||
}
|
||||
emit("close", true);
|
||||
} catch {
|
||||
toast.add({ title: "Something went wrong", color: "error" });
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UModal :title="link ? 'Edit link' : 'New link'">
|
||||
<template #body>
|
||||
<UForm
|
||||
:schema="schema"
|
||||
:state="state"
|
||||
class="space-y-4"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<UFormField label="Name" name="name">
|
||||
<UInput v-model="state.name" placeholder="my-link" class="w-full" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Path" name="path">
|
||||
<UInput v-model="state.path" placeholder="/go/somewhere" class="w-full" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="URL" name="url">
|
||||
<UInput v-model="state.url" placeholder="https://example.com" class="w-full" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField name="disabled">
|
||||
<UCheckbox v-model="state.disabled" label="Disabled" />
|
||||
</UFormField>
|
||||
|
||||
<div class="flex justify-end gap-2 pt-2">
|
||||
<UButton variant="ghost" @click="emit('close', false)">Cancel</UButton>
|
||||
<UButton type="submit" :loading="submitting">{{ link ? "Save" : "Create" }}</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
63
app/components/LinksTable.vue
Normal file
63
app/components/LinksTable.vue
Normal file
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import type { TableColumn } from "@nuxt/ui";
|
||||
|
||||
const props = defineProps<{
|
||||
data: Link[];
|
||||
status: "pending" | "idle" | "success" | "error";
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
edit: [link: Link];
|
||||
delete: [link: Link];
|
||||
}>();
|
||||
|
||||
const UButton = resolveComponent("UButton");
|
||||
|
||||
const columns: TableColumn<Link>[] = [
|
||||
{ accessorKey: "name", header: "Name" },
|
||||
{ accessorKey: "path", header: "Path" },
|
||||
{
|
||||
accessorKey: "url",
|
||||
header: "URL",
|
||||
cell: ({ row }) =>
|
||||
h("a", {
|
||||
href: row.original.url,
|
||||
target: "_blank",
|
||||
class: "text-primary hover:underline truncate max-w-xs block",
|
||||
},
|
||||
row.original.url,
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
cell: ({ row }) =>
|
||||
h("div", { class: "flex justify-end gap-1" }, [
|
||||
h(UButton, {
|
||||
icon: "i-lucide-pencil",
|
||||
variant: "ghost",
|
||||
size: "sm",
|
||||
onClick: () => emit("edit", row.original),
|
||||
}),
|
||||
h(UButton, {
|
||||
icon: "i-lucide-trash-2",
|
||||
variant: "ghost",
|
||||
size: "sm",
|
||||
color: "error",
|
||||
onClick: () => emit("delete", row.original),
|
||||
}),
|
||||
]),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UTable
|
||||
:data="data"
|
||||
:columns="columns"
|
||||
:loading="status === 'pending' || status === 'idle'"
|
||||
>
|
||||
<template #empty>
|
||||
{{ status === "pending" || status === "idle" ? "Loading..." : "No data" }}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
@@ -1,3 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
import { LazyLinkModal } from "#components";
|
||||
import type { InternalApi } from "nitropack/types";
|
||||
|
||||
type Link = InternalApi["/api/links"]["get"][number];
|
||||
|
||||
const toast = useToast();
|
||||
const overlay = useOverlay();
|
||||
|
||||
const { data: links, status, refresh } = useLazyFetch("/api/links", { key: "links", server: false, });
|
||||
|
||||
const route = useRoute();
|
||||
const category = computed(() => route.query.filter === "disabled" ? "disabled" : "all",);
|
||||
|
||||
const filteredLinks = computed(() => {
|
||||
if (!links.value) return [];
|
||||
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) => {
|
||||
try {
|
||||
await $fetch(`/api/links/${link.id}`, { method: "DELETE" });
|
||||
toast.add({ title: "Link deleted", color: "success" });
|
||||
await refresh();
|
||||
} catch {
|
||||
toast.add({ title: "Failed to delete link", color: "error" });
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>ok</div>
|
||||
<UDashboardGroup>
|
||||
<UDashboardSidebar :toggle="false">
|
||||
<template #header>
|
||||
<UDashboardNavbar title="pihka.al" :toggle="false" />
|
||||
</template>
|
||||
|
||||
<UNavigationMenu
|
||||
orientation="vertical"
|
||||
highlight
|
||||
:items="[
|
||||
{
|
||||
label: 'All',
|
||||
icon: 'i-lucide-link',
|
||||
badge: links?.length ?? 0,
|
||||
to: '/',
|
||||
active: category === 'all',
|
||||
},
|
||||
{
|
||||
label: 'Disabled',
|
||||
icon: 'i-lucide-link-2-off',
|
||||
badge: links?.filter((l) => l.disabled).length ?? 0,
|
||||
to: '/?filter=disabled',
|
||||
active: category === 'disabled',
|
||||
},
|
||||
]"
|
||||
class="px-2"
|
||||
/>
|
||||
</UDashboardSidebar>
|
||||
|
||||
<UDashboardPanel>
|
||||
<template #header>
|
||||
<UDashboardNavbar :title="category === 'all' ? 'All links' : 'Disabled links'">
|
||||
<template #right>
|
||||
<UButton icon="i-lucide-plus" @click="openModal(null)">
|
||||
New link
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<LinksTable
|
||||
:data="filteredLinks"
|
||||
:status="status"
|
||||
@edit="openModal"
|
||||
@delete="deleteLink"
|
||||
/>
|
||||
</template>
|
||||
</UDashboardPanel>
|
||||
</UDashboardGroup>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user