feat: edit criteria page

This commit is contained in:
mehedi-hasan 2024-05-04 23:38:19 +06:00
parent cbc0cde9e8
commit 723ccc7919
6 changed files with 111 additions and 32 deletions

View File

@ -2,10 +2,8 @@
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 { dummyApiCommunications, dummyConfigurations } from "@/constants/data";
import { Configuration } from "@/types/configuration";
import { dummyApiCommunications } from "@/constants/data";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import APICommunicationForm from "@/components/api-communication-form";
import { ApiCommunication } from "@/types/api-communication";

View File

@ -1,7 +1,9 @@
"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 AddCriteriaForm from "@/components/add-criteria-form";
import AddCriteriaForm from "@/components/criteria-form";
export default function SettingsDisplayPage() {
return (
@ -16,7 +18,11 @@ export default function SettingsDisplayPage() {
</CardHeader>
<CardContent>
<AddCriteriaForm />
<AddCriteriaForm
onSubmit={() => {}}
btn1_content="Save and continue editing"
btn2_content="Save changes"
/>
</CardContent>
</Card>
</div>

View File

@ -0,0 +1,55 @@
"use client";
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 {
dummyApiCommunications,
dummyConfigurations,
dummyCriteria,
} from "@/constants/data";
import { Configuration } from "@/types/configuration";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import APICommunicationForm from "@/components/api-communication-form";
import { ApiCommunication } from "@/types/api-communication";
import CriteriaForm from "@/components/criteria-form";
import { Criteria } from "@/types/criteria";
const breadcrumbItems = [
{ title: "Dashboard", link: "/dashboard" },
{ title: "Api Communications", link: "/dashboard/api-communications" },
{ title: "Edit" },
];
export default function Page({ params }: { params: { id: string } }) {
const criteria = dummyCriteria.find((criteria) => criteria.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 mb-8">
<CardHeader>
<CardTitle className="mb-4 font-bold text-xl">
Edit Criteria
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<CriteriaForm
criteria={criteria as Criteria}
onSubmit={() => {}}
btn1_content="Save and continue editing"
btn2_content="Save changes"
/>
</CardContent>
</Card>
</div>
</div>
<ScrollBar />
</ScrollArea>
);
}

View File

@ -78,17 +78,17 @@ const displayFormSchema = z.object({
type DisplayFormValues = z.infer<typeof displayFormSchema>;
// This can come from your database or API.
const defaultValues: Partial<DisplayFormValues> = {
pt: "",
messages: "",
completion: "",
ct: "",
tt: "",
status: "",
type: "",
evaluation: "",
};
// // This can come from your database or API.
// const defaultValues: Partial<DisplayFormValues> = {
// pt: "",
// messages: "",
// completion: "",
// ct: "",
// tt: "",
// status: "",
// type: "",
// evaluation: "",
// };
type Props = {
apiCommunication?: ApiCommunication;

View File

@ -16,6 +16,7 @@ import {
import { toast } from "@/components/ui/use-toast";
import { Input } from "./ui/input";
import { Textarea } from "./ui/textarea";
import { Criteria } from "@/types/criteria";
const displayFormSchema = z.object({
name: z.string().trim().min(1, "Name is required."),
@ -25,17 +26,33 @@ const displayFormSchema = z.object({
type DisplayFormValues = z.infer<typeof displayFormSchema>;
// This can come from your database or API.
const defaultValues: Partial<DisplayFormValues> = {
name: "",
description: "",
prompt: "",
// // This can come from your database or API.
// const defaultValues: Partial<DisplayFormValues> = {
// name: "",
// description: "",
// prompt: "",
// };
type Props = {
criteria?: Criteria;
onSubmit: () => void;
btn1_content: string;
btn2_content: string;
};
export default function AddCriteriaForm() {
export default function CriteriaForm({
criteria,
onSubmit: onFormSubmit,
btn1_content,
btn2_content,
}: Props) {
const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema),
defaultValues,
defaultValues: {
name: criteria?.name || "",
description: criteria?.description || "",
prompt: criteria?.prompt || "",
},
});
function onSubmit(data: DisplayFormValues) {
@ -47,6 +64,8 @@ export default function AddCriteriaForm() {
</pre>
),
});
onFormSubmit();
}
return (
@ -94,10 +113,10 @@ export default function AddCriteriaForm() {
<div className="flex items-center gap-4 flex-col sm:flex-row">
<Button className="w-full" size="lg">
Create
{btn1_content}
</Button>
<Button variant="secondary" className="w-full" size="lg">
Create and add another
{btn2_content}
</Button>
</div>
</form>

View File

@ -13,6 +13,7 @@ import { Criteria } from "@/types/criteria";
import { EvaluationStart } from "@/types/evaluation-start";
import { Edit, GitCommit, MoreHorizontal, Trash } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";
@ -48,13 +49,13 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
<DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem
className="cursor-pointer"
// onClick={() =>
// router.push(`#`)
// }
>
<Edit className="mr-2 h-4 w-4" /> Edit
<DropdownMenuItem className="cursor-pointer p-0">
<Link
href={`/dashboard/criteria/edit/${data.id}`}
className="flex items-center gap-2 px-2 py-1.5 w-full"
>
<Edit className="h-4 w-4" /> Edit
</Link>
</DropdownMenuItem>
<DropdownMenuItem
className="cursor-pointer"