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"
|
description="Manage Commits"
|
||||||
/>
|
/>
|
||||||
<Link
|
<Link
|
||||||
href="#"
|
href="/dashboard/commits/add"
|
||||||
className={buttonVariants({
|
className={buttonVariants({
|
||||||
variant: "default",
|
variant: "default",
|
||||||
// size: "sm",
|
// size: "sm",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue