feat: edit configuration page

This commit is contained in:
mehedi-hasan 2024-05-03 20:49:43 +06:00
parent 3081b2fed7
commit df83c049c9
6 changed files with 100 additions and 36 deletions

View File

@ -1,7 +1,9 @@
"use client"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import AddConfigurationForm from "@/components/add-configuration-form"; import ConfigurationForm from "@/components/configuration-form";
import Breadcrumb from "@/components/breadcrumb"; import Breadcrumb from "@/components/breadcrumb";
const breadcrumbItems = [ const breadcrumbItems = [
@ -10,25 +12,29 @@ const breadcrumbItems = [
{ title: "Add" }, { title: "Add" },
]; ];
export default function SettingsDisplayPage() { export default function Page() {
return ( return (
<ScrollArea className="h-[calc(100vh-53px)]"> <ScrollArea className="h-[calc(100vh-53px)]">
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6"> <div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
<Breadcrumb items={breadcrumbItems} /> <Breadcrumb items={breadcrumbItems} />
<div className="w-full h-full flex justify-center items-center"> <div className="w-full h-full flex justify-center items-center">
<Card className="max-w-[700px] w-full"> <Card className="max-w-[700px] w-full">
<CardHeader> <CardHeader>
<CardTitle className="mb-4 font-bold text-xl"> <CardTitle className="mb-4 font-bold text-xl">
Create Configuration Create Configuration
</CardTitle> </CardTitle>
<Separator /> <Separator />
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<AddConfigurationForm /> <ConfigurationForm
</CardContent> onSubmit={() => {}}
</Card> btn1_content="Create"
</div> btn2_content="Create and add another"
/>
</CardContent>
</Card>
</div>
</div> </div>
<ScrollBar /> <ScrollBar />
</ScrollArea> </ScrollArea>

View File

@ -0,0 +1,47 @@
"use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import ConfigurationForm from "@/components/configuration-form";
import Breadcrumb from "@/components/breadcrumb";
import { dummyConfigurations } from "@/constants/data";
import { Configuration } from "@/types/configuration";
const breadcrumbItems = [
{ title: "Dashboard", link: "/dashboard" },
{ title: "Configurations", link: "/dashboard/configurations" },
{ title: "Edit" },
];
export default function Page({ params }: { params: { id: string } }) {
const configuration = dummyConfigurations.find((configuration) => configuration.id === +params.id);
return (
<ScrollArea className="h-[calc(100vh-53px)]">
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
<Breadcrumb items={breadcrumbItems} />
<div className="w-full h-full flex justify-center items-center">
<Card className="max-w-[700px] w-full">
<CardHeader>
<CardTitle className="mb-4 font-bold text-xl">
Edit Configuration
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<ConfigurationForm
configuration={configuration as Configuration}
onSubmit={() => {}}
btn1_content="Save and continue editing"
btn2_content="Save changes"
/>
</CardContent>
</Card>
</div>
</div>
<ScrollBar />
</ScrollArea>
);
}

View File

@ -15,6 +15,7 @@ import {
} from "@/components/ui/form"; } from "@/components/ui/form";
import { toast } from "@/components/ui/use-toast"; import { toast } from "@/components/ui/use-toast";
import { Input } from "./ui/input"; import { Input } from "./ui/input";
import { Configuration } from "@/types/configuration";
const displayFormSchema = z.object({ const displayFormSchema = z.object({
name: z.string().trim().min(1, "Name is required."), name: z.string().trim().min(1, "Name is required."),
@ -23,16 +24,25 @@ const displayFormSchema = z.object({
type DisplayFormValues = z.infer<typeof displayFormSchema>; type DisplayFormValues = z.infer<typeof displayFormSchema>;
// This can come from your database or API. type Props = {
const defaultValues: Partial<DisplayFormValues> = { configuration?: Configuration;
name: "", onSubmit: () => void;
value: "", btn1_content: string;
btn2_content: string;
}; };
export default function AddConfigurationForm() { export default function ConfigurationForm({
configuration,
onSubmit: onFormSubmit,
btn1_content,
btn2_content,
}: Props) {
const form = useForm<DisplayFormValues>({ const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema), resolver: zodResolver(displayFormSchema),
defaultValues, defaultValues: {
name: configuration?.name || "",
value: configuration?.value || "",
},
}); });
function onSubmit(data: DisplayFormValues) { function onSubmit(data: DisplayFormValues) {
@ -78,10 +88,10 @@ export default function AddConfigurationForm() {
<div className="flex items-center gap-4 flex-col sm:flex-row"> <div className="flex items-center gap-4 flex-col sm:flex-row">
<Button className="w-full" size="lg"> <Button className="w-full" size="lg">
Create {btn1_content}
</Button> </Button>
<Button variant="secondary" className="w-full" size="lg"> <Button variant="secondary" className="w-full" size="lg">
Create and add another {btn2_content}
</Button> </Button>
</div> </div>
</form> </form>

View File

@ -12,6 +12,7 @@ import { useToast } from "@/components/ui/use-toast";
import { Configuration } from "@/types/configuration"; import { Configuration } from "@/types/configuration";
import { BookCheck, Edit, MoreHorizontal, Trash } from "lucide-react"; import { BookCheck, Edit, MoreHorizontal, Trash } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@ -47,13 +48,13 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel> <DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem <DropdownMenuItem className="cursor-pointer p-0">
className="cursor-pointer" <Link
// onClick={() => href={`/dashboard/configurations/edit/${data.id}`}
// router.push(`#`) className="flex items-center gap-2 px-2 py-1.5 w-full"
// } >
> <Edit className="h-4 w-4" /> Edit
<Edit className="mr-2 h-4 w-4" /> Update </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="cursor-pointer" className="cursor-pointer"

View File

@ -108,31 +108,31 @@ export const dummyConfigurations: Configuration[] = [
{ {
id: 1, id: 1,
name: "process_limit", name: "process_limit",
value: 20, value: "20",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}, },
{ {
id: 2, id: 2,
name: "process_timeout", name: "process_timeout",
value: 600, value: "600",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}, },
{ {
id: 3, id: 3,
name: "number_of_courses_to_create", name: "number_of_courses_to_create",
value: 5, value: "5",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}, },
{ {
id: 4, id: 4,
name: "max_retries", name: "max_retries",
value: 2, value: "2",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}, },
{ {
id: 5, id: 5,
name: "max_token_per_evaluation", name: "max_token_per_evaluation",
value: 1000000, value: "1000000",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}, },
]; ];

View File

@ -1,6 +1,6 @@
export interface Configuration { export interface Configuration {
id: number; id: number;
name: string; name: string;
value: number; value: string;
created_at: string; created_at: string;
} }