feat: skill, evaluation add form
This commit is contained in:
mehedi-hasan
parent
328514ff7b
commit
b9ea061a2e
|
|
@ -0,0 +1,36 @@
|
||||||
|
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 AddEvaluationForm from "@/components/evaluation-form";
|
||||||
|
|
||||||
|
const breadcrumbItems = [
|
||||||
|
{ title: "Dashboard", link: "/dashboard" },
|
||||||
|
{ title: "Evaluation", link: "/dashboard/evaluations" },
|
||||||
|
{ title: "Add" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function SettingsDisplayPage() {
|
||||||
|
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">
|
||||||
|
Create Evaluation
|
||||||
|
</CardTitle>
|
||||||
|
<Separator />
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent>
|
||||||
|
<AddEvaluationForm/>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<ScrollBar />
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import AddSkillForm from "@/components/add-skill-form";
|
||||||
|
import Breadcrumb from "@/components/breadcrumb";
|
||||||
|
|
||||||
|
const breadcrumbItems = [
|
||||||
|
{ title: "Dashboard", link: "/dashboard" },
|
||||||
|
{ title: "Skills", link: "/dashboard/skills" },
|
||||||
|
{ title: "Add" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function SettingsDisplayPage() {
|
||||||
|
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">
|
||||||
|
Create Skill
|
||||||
|
</CardTitle>
|
||||||
|
<Separator />
|
||||||
|
</CardHeader>
|
||||||
|
|
||||||
|
<CardContent>
|
||||||
|
<AddSkillForm />
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
<ScrollBar />
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { toast } from "@/components/ui/use-toast";
|
||||||
|
import { Input } from "./ui/input";
|
||||||
|
|
||||||
|
const displayFormSchema = z.object({
|
||||||
|
name: z.string().trim().min(1, "Name is required."),
|
||||||
|
});
|
||||||
|
|
||||||
|
type DisplayFormValues = z.infer<typeof displayFormSchema>;
|
||||||
|
|
||||||
|
// This can come from your database or API.
|
||||||
|
const defaultValues: Partial<DisplayFormValues> = {
|
||||||
|
name: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AddSkillForm() {
|
||||||
|
const form = useForm<DisplayFormValues>({
|
||||||
|
resolver: zodResolver(displayFormSchema),
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
function onSubmit(data: DisplayFormValues) {
|
||||||
|
toast({
|
||||||
|
title: "You submitted the following values:",
|
||||||
|
description: (
|
||||||
|
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||||
|
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="name"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="Enter Name..." {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button className="w-full" size="lg">
|
||||||
|
Create
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" className="w-full" size="lg">
|
||||||
|
Create and add another
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,324 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { toast } from "@/components/ui/use-toast";
|
||||||
|
import { Input } from "./ui/input";
|
||||||
|
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
|
||||||
|
import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
} from "./ui/command";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { CommandList } from "cmdk";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
const statuses = [
|
||||||
|
"uploading",
|
||||||
|
"new",
|
||||||
|
"requested",
|
||||||
|
"extraction_running",
|
||||||
|
"skills_extracted",
|
||||||
|
"evaluation_running",
|
||||||
|
"score_requested",
|
||||||
|
"course_creation",
|
||||||
|
"finished",
|
||||||
|
"deleted",
|
||||||
|
"extraction_failed",
|
||||||
|
"evaluation_failed",
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const uploaders = ["hello@skilld.team", "johndoe@gmail.com"] as const;
|
||||||
|
const developers = ["hello@skilld.team", "johndoe@gmail.com"] as const;
|
||||||
|
|
||||||
|
const displayFormSchema = z.object({
|
||||||
|
status: z.string().trim().min(1, "Status is required"),
|
||||||
|
uploadTime: z.string().refine((value) => /^\d{4}-\d{2}-\d{2}$/.test(value), {
|
||||||
|
message: "Upload time should be in the format YYYY-MM-DD",
|
||||||
|
}),
|
||||||
|
uploaderAccount: z
|
||||||
|
.string()
|
||||||
|
.trim()
|
||||||
|
.email()
|
||||||
|
.min(1, "Please select a uploader account"),
|
||||||
|
developerUser: z
|
||||||
|
.string()
|
||||||
|
.trim()
|
||||||
|
.email()
|
||||||
|
.min(1, "Please select a developer user"),
|
||||||
|
});
|
||||||
|
|
||||||
|
type DisplayFormValues = z.infer<typeof displayFormSchema>;
|
||||||
|
|
||||||
|
// This can come from your database or API.
|
||||||
|
const defaultValues: Partial<DisplayFormValues> = {
|
||||||
|
status: "",
|
||||||
|
uploadTime: "",
|
||||||
|
uploaderAccount: "",
|
||||||
|
developerUser: "",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AddEvaluationForm() {
|
||||||
|
const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState(false);
|
||||||
|
const [isUploaderPopoverOpen, setIsUploaderPopoverOpen] = useState(false);
|
||||||
|
const [isDeveloperPopoverOpen, setIsDeveloperPopoverOpen] = useState(false);
|
||||||
|
|
||||||
|
const form = useForm<DisplayFormValues>({
|
||||||
|
resolver: zodResolver(displayFormSchema),
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
function onSubmit(data: DisplayFormValues) {
|
||||||
|
toast({
|
||||||
|
title: "You submitted the following values:",
|
||||||
|
description: (
|
||||||
|
<pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
|
||||||
|
<code className="text-white">{JSON.stringify(data, null, 2)}</code>
|
||||||
|
</pre>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="status"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>Status</FormLabel>
|
||||||
|
<Popover
|
||||||
|
open={isStatusPopoverOpen}
|
||||||
|
onOpenChange={setIsStatusPopoverOpen}
|
||||||
|
>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<FormControl>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-between",
|
||||||
|
!field.value && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{field.value
|
||||||
|
? statuses.find((status) => status === field.value)
|
||||||
|
: "Select Status"}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[300px] md:w-[650px] p-0">
|
||||||
|
<Command>
|
||||||
|
<CommandList>
|
||||||
|
<CommandInput
|
||||||
|
placeholder="Search status..."
|
||||||
|
className="h-9"
|
||||||
|
/>
|
||||||
|
<CommandEmpty>No status found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{statuses.map((status) => (
|
||||||
|
<CommandItem
|
||||||
|
value={status}
|
||||||
|
key={status}
|
||||||
|
onSelect={() => {
|
||||||
|
form.setValue("status", status);
|
||||||
|
setIsStatusPopoverOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{status}
|
||||||
|
<CheckIcon
|
||||||
|
className={cn(
|
||||||
|
"ml-auto h-4 w-4",
|
||||||
|
status === field.value
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`uploadTime`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Upload Time</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input type="date" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="uploaderAccount"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>Uploader Account</FormLabel>
|
||||||
|
<Popover
|
||||||
|
open={isUploaderPopoverOpen}
|
||||||
|
onOpenChange={setIsUploaderPopoverOpen}
|
||||||
|
>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<FormControl>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-between",
|
||||||
|
!field.value && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{field.value
|
||||||
|
? uploaders.find((uploader) => uploader === field.value)
|
||||||
|
: "Select uploader"}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[300px] md:w-[650px] p-0">
|
||||||
|
<Command>
|
||||||
|
<CommandList>
|
||||||
|
<CommandInput
|
||||||
|
placeholder="Search uploader..."
|
||||||
|
className="h-9"
|
||||||
|
/>
|
||||||
|
<CommandEmpty>No uploader found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{uploaders.map((uploader) => (
|
||||||
|
<CommandItem
|
||||||
|
value={uploader}
|
||||||
|
key={uploader}
|
||||||
|
onSelect={() => {
|
||||||
|
form.setValue("uploaderAccount", uploader);
|
||||||
|
setIsUploaderPopoverOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{uploader}
|
||||||
|
<CheckIcon
|
||||||
|
className={cn(
|
||||||
|
"ml-auto h-4 w-4",
|
||||||
|
uploader === field.value
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="developerUser"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>Developer User</FormLabel>
|
||||||
|
<Popover
|
||||||
|
open={isDeveloperPopoverOpen}
|
||||||
|
onOpenChange={setIsDeveloperPopoverOpen}
|
||||||
|
>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<FormControl>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
role="combobox"
|
||||||
|
className={cn(
|
||||||
|
"w-full justify-between",
|
||||||
|
!field.value && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{field.value
|
||||||
|
? developers.find(
|
||||||
|
(developer) => developer === field.value
|
||||||
|
)
|
||||||
|
: "Select developer"}
|
||||||
|
<CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
</Button>
|
||||||
|
</FormControl>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-[300px] md:w-[650px] p-0">
|
||||||
|
<Command>
|
||||||
|
<CommandList>
|
||||||
|
<CommandInput
|
||||||
|
placeholder="Search developer..."
|
||||||
|
className="h-9"
|
||||||
|
/>
|
||||||
|
<CommandEmpty>No developer found.</CommandEmpty>
|
||||||
|
<CommandGroup>
|
||||||
|
{developers.map((developer) => (
|
||||||
|
<CommandItem
|
||||||
|
value={developer}
|
||||||
|
key={developer}
|
||||||
|
onSelect={() => {
|
||||||
|
form.setValue("developerUser", developer);
|
||||||
|
setIsDeveloperPopoverOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{developer}
|
||||||
|
<CheckIcon
|
||||||
|
className={cn(
|
||||||
|
"ml-auto h-4 w-4",
|
||||||
|
developer === field.value
|
||||||
|
? "opacity-100"
|
||||||
|
: "opacity-0"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Button className="w-full" size="lg">
|
||||||
|
Create
|
||||||
|
</Button>
|
||||||
|
<Button variant="secondary" className="w-full" size="lg">
|
||||||
|
Create and add another
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -19,7 +19,7 @@ const ToolsTable = ({ evaluationsData }: { evaluationsData: Evaluation[] }) => {
|
||||||
description="Manage Evaluations"
|
description="Manage Evaluations"
|
||||||
/>
|
/>
|
||||||
<Link
|
<Link
|
||||||
href="#"
|
href="/dashboard/evaluations/add"
|
||||||
className={buttonVariants({
|
className={buttonVariants({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
// size: "sm",
|
// size: "sm",
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ const ToolsTable = ({ skillsData }: { skillsData: Skill[] }) => {
|
||||||
description="Manage Skills"
|
description="Manage Skills"
|
||||||
/>
|
/>
|
||||||
<Link
|
<Link
|
||||||
href="#"
|
href="/dashboard/skills/add"
|
||||||
className={buttonVariants({
|
className={buttonVariants({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
// size: "sm",
|
// size: "sm",
|
||||||
|
|
|
||||||
|
|
@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
|
||||||
<CommandPrimitive.Item
|
<CommandPrimitive.Item
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
|
"relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue