docs: add report draft and dashboard form refinements
This commit is contained in:
parent
4e0cf0140f
commit
441e709193
26 changed files with 1700 additions and 505 deletions
|
|
@ -4,7 +4,7 @@ import { useMutation, useQuery } from "@tanstack/react-query";
|
|||
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
||||
import { useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { DetailCard, FormCard, PageSection, QueryStateCard, TextAreaField, TextField } from "@/components/dashboard-ui";
|
||||
import { DetailCard, FormCard, PageSection, QueryStateCard, SelectField, TextAreaField, TextField } from "@/components/dashboard-ui";
|
||||
import { queryClient, trpc, trpcClient } from "@/utils/trpc";
|
||||
|
||||
export const Route = createFileRoute("/dashboard/notes_/$noteId")({
|
||||
|
|
@ -75,6 +75,12 @@ function RouteComponent() {
|
|||
return <QueryStateCard title="Note unavailable" description="The requested note could not be loaded." />;
|
||||
}
|
||||
|
||||
const serverMap = new Map(servers.data.map((item) => [item.id, item.name]));
|
||||
const serverOptions = servers.data.map((item) => ({
|
||||
value: item.id,
|
||||
label: `${item.name} (${item.id})`,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="grid gap-6">
|
||||
<PageSection title={note.data.title} description="View and edit this note.">
|
||||
|
|
@ -82,7 +88,7 @@ function RouteComponent() {
|
|||
title="Note summary"
|
||||
description="Current note metadata and content preview."
|
||||
rows={[
|
||||
{ label: "Server ID", value: note.data.serverId },
|
||||
{ label: "Server", value: serverMap.get(note.data.serverId) || note.data.serverId },
|
||||
{ label: "Category", value: note.data.category || "-" },
|
||||
{ label: "Updated", value: new Date(note.data.updatedAt).toLocaleString() },
|
||||
{ label: "Content", value: note.data.content },
|
||||
|
|
@ -114,13 +120,15 @@ function RouteComponent() {
|
|||
>
|
||||
<form.Field name="serverId">
|
||||
{(field) => (
|
||||
<TextField
|
||||
label="Server ID"
|
||||
<SelectField
|
||||
label="Server"
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
description={`Available: ${servers.data.map((item) => `${item.name} (${item.id})`).join(", ")}`}
|
||||
onValueChange={field.handleChange}
|
||||
description="Select the server this note belongs to."
|
||||
placeholder="Select a server"
|
||||
options={serverOptions}
|
||||
/>
|
||||
)}
|
||||
</form.Field>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue