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"
|
||||
/>
|
||||
<Link
|
||||
href="#"
|
||||
href="/dashboard/evaluations/add"
|
||||
className={buttonVariants({
|
||||
variant: "default",
|
||||
// size: "sm",
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const ToolsTable = ({ skillsData }: { skillsData: Skill[] }) => {
|
|||
description="Manage Skills"
|
||||
/>
|
||||
<Link
|
||||
href="#"
|
||||
href="/dashboard/skills/add"
|
||||
className={buttonVariants({
|
||||
variant: "default",
|
||||
// size: "sm",
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ const CommandItem = React.forwardRef<
|
|||
<CommandPrimitive.Item
|
||||
ref={ref}
|
||||
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
|
||||
)}
|
||||
{...props}
|
||||
|
|
|
|||
Loading…
Reference in New Issue