feat: commit form
This commit is contained in:
mehedi-hasan
parent
5c76a8b444
commit
32b31f9df3
|
|
@ -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 CommitForm from "@/components/commit-form";
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ title: "Dashboard", link: "/dashboard" },
|
||||
{ title: "Commits", link: "/dashboard/commits" },
|
||||
{ title: "Create Commit" },
|
||||
];
|
||||
|
||||
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 mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="mb-4 font-bold text-xl">
|
||||
Create Commit
|
||||
</CardTitle>
|
||||
<Separator />
|
||||
</CardHeader>
|
||||
|
||||
<CardContent>
|
||||
<CommitForm />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<ScrollBar />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,360 @@
|
|||
"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 = [
|
||||
"new",
|
||||
"running",
|
||||
"retry",
|
||||
"skills_extracted",
|
||||
"failed",
|
||||
"too_big",
|
||||
] as const;
|
||||
|
||||
const evaluations = [
|
||||
"Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished",
|
||||
"Uploaded at: 2023-09-27 00:00:00 - Uploader: jschultz@php.net - Developer: gamemaker0042@gmail.com - Status: finished",
|
||||
] as const;
|
||||
|
||||
const types = ["code", "merge"] as const;
|
||||
|
||||
const displayFormSchema = z.object({
|
||||
id: z.string().trim().min(1, "ID is required"),
|
||||
hash: z.string().trim().min(1, "Hash is required"),
|
||||
status: z.string().trim().min(1, "Status is required"),
|
||||
retryCount: z.string().trim().min(1, "Retry count is required"),
|
||||
type: z.string().trim().min(1, "Type is required"),
|
||||
evaluation: z.string().trim().min(1, "Evaluation is required"),
|
||||
commitDate: z.string().refine((value) => /^\d{4}-\d{2}-\d{2}$/.test(value), {
|
||||
message: "Commit date should be in the format YYYY-MM-DD",
|
||||
}),
|
||||
});
|
||||
|
||||
type DisplayFormValues = z.infer<typeof displayFormSchema>;
|
||||
|
||||
// This can come from your database or API.
|
||||
const defaultValues: Partial<DisplayFormValues> = {
|
||||
id: "",
|
||||
hash: "",
|
||||
status: "",
|
||||
retryCount: "",
|
||||
type: "",
|
||||
evaluation: "",
|
||||
commitDate: "",
|
||||
};
|
||||
|
||||
export default function CommitForm() {
|
||||
const [isStatusPopoverOpen, setIsStatusPopoverOpen] = useState(false);
|
||||
const [isTypePopoverOpen, setIsTypePopoverOpen] = useState(false);
|
||||
const [isEvaluationPopoverOpen, setIsEvaluationPopoverOpen] = 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="id"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>ID</FormLabel>
|
||||
<Input placeholder="Enter ID..." {...field} />
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="hash"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Hash</FormLabel>
|
||||
<Input placeholder="Enter hash..." {...field} />
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="status"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Status</FormLabel>
|
||||
<Popover
|
||||
open={isStatusPopoverOpen}
|
||||
onOpenChange={setIsStatusPopoverOpen}
|
||||
>
|
||||
<PopoverTrigger
|
||||
asChild
|
||||
onClick={() => setIsStatusPopoverOpen(true)}
|
||||
>
|
||||
<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="retryCount"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Retry Count</FormLabel>
|
||||
<Input placeholder="Enter retry count..." {...field} />
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="type"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Type</FormLabel>
|
||||
<Popover
|
||||
open={isTypePopoverOpen}
|
||||
onOpenChange={setIsTypePopoverOpen}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
"w-full justify-between",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{field.value
|
||||
? types.find((type) => type === field.value)
|
||||
: "Select Type"}
|
||||
<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 type..."
|
||||
className="h-9"
|
||||
/>
|
||||
<CommandEmpty>No type found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{types.map((type) => (
|
||||
<CommandItem
|
||||
value={type}
|
||||
key={type}
|
||||
onSelect={() => {
|
||||
form.setValue("type", type);
|
||||
setIsTypePopoverOpen(false);
|
||||
}}
|
||||
>
|
||||
{type}
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
"ml-auto h-4 w-4",
|
||||
type === field.value
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="evaluation"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-col">
|
||||
<FormLabel>Evaluation</FormLabel>
|
||||
<Popover
|
||||
open={isEvaluationPopoverOpen}
|
||||
onOpenChange={setIsEvaluationPopoverOpen}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className={cn(
|
||||
"w-full justify-between",
|
||||
!field.value && "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
<p className="truncate">
|
||||
{field.value
|
||||
? evaluations.find(
|
||||
(evaluation) => evaluation === field.value
|
||||
)
|
||||
: "Select Evaluation"}
|
||||
</p>
|
||||
<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 evaluation..."
|
||||
className="h-9"
|
||||
/>
|
||||
<CommandEmpty>No evaluation found.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{evaluations.map((evaluation) => (
|
||||
<CommandItem
|
||||
value={evaluation}
|
||||
key={evaluation}
|
||||
onSelect={() => {
|
||||
form.setValue("evaluation", evaluation);
|
||||
setIsEvaluationPopoverOpen(false);
|
||||
}}
|
||||
>
|
||||
{evaluation}
|
||||
<CheckIcon
|
||||
className={cn(
|
||||
"ml-auto h-4 w-4",
|
||||
evaluation === field.value
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="commitDate"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Commit Date</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="date" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-4 flex-col sm:flex-row">
|
||||
<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 = ({ commitsData }: { commitsData: Commit[] }) => {
|
|||
description="Manage Commits"
|
||||
/>
|
||||
<Link
|
||||
href="#"
|
||||
href="/dashboard/commits/add"
|
||||
className={buttonVariants({
|
||||
variant: "default",
|
||||
// size: "sm",
|
||||
|
|
|
|||
Loading…
Reference in New Issue