feat: edit evaluation page

This commit is contained in:
mehedi-hasan 2024-05-05 21:36:03 +06:00
parent 3c068397d6
commit 73c88598e7
5 changed files with 104 additions and 28 deletions

View File

@ -1,8 +1,10 @@
"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 Breadcrumb from "@/components/breadcrumb"; import Breadcrumb from "@/components/breadcrumb";
import AddEvaluationForm from "@/components/evaluation-form"; import EvaluationForm from "@/components/evaluation-form";
const breadcrumbItems = [ const breadcrumbItems = [
{ title: "Dashboard", link: "/dashboard" }, { title: "Dashboard", link: "/dashboard" },
@ -25,7 +27,11 @@ export default function Page() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<AddEvaluationForm /> <EvaluationForm
onSubmit={() => {}}
btn1_content="Create"
btn2_content="Create and add another"
/>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

View File

@ -0,0 +1,49 @@
"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 Breadcrumb from "@/components/breadcrumb";
import EvaluationForm from "@/components/evaluation-form";
import { Evaluation } from "@/types/evaluation";
import { dummyEvaluations } from "@/constants/data";
const breadcrumbItems = [
{ title: "Dashboard", link: "/dashboard" },
{ title: "Evaluation", link: "/dashboard/evaluations" },
{ title: "Edit" },
];
export default function Page({ params }: { params: { id: string } }) {
const evaluation = dummyEvaluations.find(
(evaluation) => evaluation.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 Evaluation
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<EvaluationForm
evaluation={evaluation as Evaluation}
onSubmit={() => {}}
btn1_content="Save and continue editing"
btn2_content="Save changes"
/>
</CardContent>
</Card>
</div>
<ScrollBar />
</div>
</ScrollArea>
);
}

View File

@ -16,6 +16,7 @@ import { EvaluationStart } from "@/types/evaluation-start";
import { Skill } from "@/types/skill"; import { Skill } from "@/types/skill";
import { Edit, GitCommit, MoreHorizontal, Trash } from "lucide-react"; import { Edit, GitCommit, 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";
@ -51,13 +52,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/commits/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" /> Edit </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="cursor-pointer" className="cursor-pointer"

View File

@ -27,6 +27,7 @@ import {
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { CommandList } from "cmdk"; import { CommandList } from "cmdk";
import { useState } from "react"; import { useState } from "react";
import { Evaluation } from "@/types/evaluation";
const statuses = [ const statuses = [
"uploading", "uploading",
@ -43,8 +44,8 @@ const statuses = [
"evaluation_failed", "evaluation_failed",
] as const; ] as const;
const uploaders = ["hello@skilld.team", "johndoe@gmail.com"] as const; const uploaders = ["johndoe@gmail.com", "danabramov@gmail.com"] as const;
const developers = ["hello@skilld.team", "johndoe@gmail.com"] as const; const developers = ["danabramov@gmail.com", "johndoe@gmail.com"] as const;
const displayFormSchema = z.object({ const displayFormSchema = z.object({
status: z.string().trim().min(1, "Status is required"), status: z.string().trim().min(1, "Status is required"),
@ -65,22 +66,38 @@ const displayFormSchema = z.object({
type DisplayFormValues = z.infer<typeof displayFormSchema>; type DisplayFormValues = z.infer<typeof displayFormSchema>;
// This can come from your database or API. // const defaultValues: Partial<DisplayFormValues> = {
const defaultValues: Partial<DisplayFormValues> = { // status: "",
status: "", // uploadTime: "",
uploadTime: "", // uploaderAccount: "",
uploaderAccount: "", // developerUser: "",
developerUser: "", // };
type Props = {
evaluation?: Evaluation;
onSubmit: () => void;
btn1_content: string;
btn2_content: string;
}; };
export default function AddEvaluationForm() { export default function EvaluationForm({
evaluation,
onSubmit: onFormSubmit,
btn1_content,
btn2_content,
}: Props) {
const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState(false); const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState(false);
const [isUploaderPopoverOpen, setIsUploaderPopoverOpen] = useState(false); const [isUploaderPopoverOpen, setIsUploaderPopoverOpen] = useState(false);
const [isDeveloperPopoverOpen, setIsDeveloperPopoverOpen] = useState(false); const [isDeveloperPopoverOpen, setIsDeveloperPopoverOpen] = useState(false);
const form = useForm<DisplayFormValues>({ const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema), resolver: zodResolver(displayFormSchema),
defaultValues, defaultValues: {
status: evaluation?.status || "",
uploadTime: evaluation?.uploadTime || "",
uploaderAccount: evaluation?.uploaderAccount || "",
developerUser: evaluation?.developerUser || "",
},
}); });
function onSubmit(data: DisplayFormValues) { function onSubmit(data: DisplayFormValues) {
@ -92,6 +109,8 @@ export default function AddEvaluationForm() {
</pre> </pre>
), ),
}); });
onFormSubmit();
} }
return ( return (
@ -312,10 +331,10 @@ export default function AddEvaluationForm() {
<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

@ -15,6 +15,7 @@ import { EvaluationStart } from "@/types/evaluation-start";
import { Skill } from "@/types/skill"; import { Skill } from "@/types/skill";
import { Edit, GitCommit, MoreHorizontal, Trash } from "lucide-react"; import { Edit, GitCommit, 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";
@ -50,13 +51,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/evaluations/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" /> Edit </Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="cursor-pointer" className="cursor-pointer"