feat: create api communication form
This commit is contained in:
mehedi-hasan
parent
ca8b24cf7a
commit
f32d032b38
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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} /> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue