feat: create api communication form

This commit is contained in:
mehedi-hasan 2024-04-20 02:30:54 +06:00
parent ca8b24cf7a
commit f32d032b38
4 changed files with 269 additions and 7 deletions

View File

@ -0,0 +1,26 @@
import AddAPICommunicationForm from "@/components/add-api-communication-form";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
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 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 API Communication
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<AddAPICommunicationForm />
</CardContent>
</Card>
</div>
<ScrollBar />
</ScrollArea>
);
}

View File

@ -115,7 +115,7 @@ export default function AddAccountForm() {
name="organization"
render={({ field }) => (
<FormItem>
<FormLabel>User</FormLabel>
<FormLabel>Organization</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>

View File

@ -0,0 +1,241 @@
"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 {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "./ui/select";
import { Textarea } from "./ui/textarea";
const displayFormSchema = z.object({
pt: z
.string({
required_error: "PT is required.",
})
.trim()
.min(1, "PT is required."),
messages: z
.string({
required_error: "Messages are required.",
})
.trim()
.min(1, "Messages is required."),
completion: z
.string({
required_error: "Completion is required.",
})
.trim()
.min(1, "Completion is required."),
ct: z
.string({
required_error: "CT is required.",
})
.trim()
.min(1, "CT is required."),
tt: z
.string({
required_error: "TT is required.",
})
.trim()
.min(1, "TT is required."),
status: z
.string({
required_error: "Status is required.",
})
.trim()
.min(1, "Status is required."),
type: z
.string({
required_error: "Type is required.",
})
.trim()
.min(1, "Type is required."),
evaluation: z
.string({
required_error: "Evaluation is required.",
})
.trim()
.min(1, "Evaluation is required."),
});
type DisplayFormValues = z.infer<typeof displayFormSchema>;
// This can come from your database or API.
const defaultValues: Partial<DisplayFormValues> = {
pt: "",
messages: "",
completion: "",
ct: "",
tt: "",
status: "",
type: "",
evaluation: "",
};
export default function AddAPICommunicationForm() {
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="pt"
render={({ field }) => (
<FormItem>
<FormLabel>PT</FormLabel>
<FormControl>
<Input placeholder="Enter PT..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="messages"
render={({ field }) => (
<FormItem>
<FormLabel>Messages</FormLabel>
<FormControl>
<Textarea placeholder="Enter messages..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="completion"
render={({ field }) => (
<FormItem>
<FormLabel>Completion</FormLabel>
<FormControl>
<Textarea placeholder="Enter completion..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="ct"
render={({ field }) => (
<FormItem>
<FormLabel>CT</FormLabel>
<FormControl>
<Input placeholder="Enter CT..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="tt"
render={({ field }) => (
<FormItem>
<FormLabel>TT</FormLabel>
<FormControl>
<Input placeholder="Enter TT..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="status"
render={({ field }) => (
<FormItem>
<FormLabel>Status</FormLabel>
<FormControl>
<Input placeholder="Enter Status..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="type"
render={({ field }) => (
<FormItem>
<FormLabel>Type</FormLabel>
<FormControl>
<Input placeholder="Enter type..." {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="evaluation"
render={({ field }) => (
<FormItem>
<FormLabel>Evaluation</FormLabel>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select a Evaluation" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished">
Uploaded at: 2023-09-20 00:00:00 - Uploader:
jschultz@php.net - Developer: fabien@potencier.org - Status:
finished
</SelectItem>
</SelectContent>
</Select>
<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>
);
}

View File

@ -8,7 +8,6 @@ import { columns } from "./columns";
import Link from "next/link";
import { Plus } from "lucide-react";
import { buttonVariants } from "@/components/ui/button";
import { Organization } from "@/types/organization";
import { ApiCommunication } from "@/types/api-communication";
const ToolsTable = ({
@ -24,13 +23,10 @@ const ToolsTable = ({
description="Manage Api Communications"
/>
<Link
href="#"
href="/dashboard/api-communications/add"
className={buttonVariants({
variant: "default",
// size: "sm",
})}
// className="text-xs md:text-sm"
// onClick={() => router.push(`/admin-dashboard/tools/add`)}
>
<Plus className="mr-2 h-4 w-4" />{" "}
<span className="md:hidden">Add</span>{" "}
@ -39,7 +35,6 @@ const ToolsTable = ({
</div>
<Separator />
<DataTable data={apiCommunications} columns={columns} />
{/* <DataTable data={tasks} columns={columns} /> */}
</>
);
};