feat: edit api communication page

This commit is contained in:
mehedi-hasan 2024-05-04 23:05:38 +06:00
parent df83c049c9
commit cbc0cde9e8
5 changed files with 96 additions and 15 deletions

View File

@ -1,4 +1,6 @@
import AddAPICommunicationForm from "@/components/add-api-communication-form"; "use client"
import AddAPICommunicationForm from "@/components/api-communication-form";
import Breadcrumb from "@/components/breadcrumb"; import Breadcrumb from "@/components/breadcrumb";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
@ -25,7 +27,9 @@ export default function SettingsDisplayPage() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<AddAPICommunicationForm /> <AddAPICommunicationForm onSubmit={() => {}}
btn1_content="Create"
btn2_content="Create and add another" />
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

View File

@ -0,0 +1,51 @@
"use client";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import ConfigurationForm from "@/components/configuration-form";
import Breadcrumb from "@/components/breadcrumb";
import { dummyApiCommunications, dummyConfigurations } from "@/constants/data";
import { Configuration } from "@/types/configuration";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import APICommunicationForm from "@/components/api-communication-form";
import { ApiCommunication } from "@/types/api-communication";
const breadcrumbItems = [
{ title: "Dashboard", link: "/dashboard" },
{ title: "Api Communications", link: "/dashboard/api-communications" },
{ title: "Edit" },
];
export default function Page({ params }: { params: { id: string } }) {
const apiCommunication = dummyApiCommunications.find(
(apiCommunication) => apiCommunication.id === +params.id
);
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">
Edit Api Communication
</CardTitle>
<Separator />
</CardHeader>
<CardContent>
<APICommunicationForm
apiCommunication={apiCommunication as ApiCommunication}
onSubmit={() => {}}
btn1_content="Save and continue editing"
btn2_content="Save changes"
/>
</CardContent>
</Card>
</div>
</div>
<ScrollBar />
</ScrollArea>
);
}

View File

@ -23,6 +23,7 @@ import {
SelectValue, SelectValue,
} from "./ui/select"; } from "./ui/select";
import { Textarea } from "./ui/textarea"; import { Textarea } from "./ui/textarea";
import { ApiCommunication } from "@/types/api-communication";
const displayFormSchema = z.object({ const displayFormSchema = z.object({
pt: z pt: z
@ -89,10 +90,31 @@ const defaultValues: Partial<DisplayFormValues> = {
evaluation: "", evaluation: "",
}; };
export default function AddAPICommunicationForm() { type Props = {
apiCommunication?: ApiCommunication;
onSubmit: () => void;
btn1_content: string;
btn2_content: string;
};
export default function APICommunicationForm({
apiCommunication,
onSubmit: onFormSubmit,
btn1_content,
btn2_content,
}: Props) {
const form = useForm<DisplayFormValues>({ const form = useForm<DisplayFormValues>({
resolver: zodResolver(displayFormSchema), resolver: zodResolver(displayFormSchema),
defaultValues, defaultValues: {
pt: apiCommunication?.pt ? String(apiCommunication.pt) : "",
messages: apiCommunication?.messages || "",
completion: apiCommunication?.completion || "",
ct: apiCommunication?.ct ? String(apiCommunication.ct) : "",
tt: apiCommunication?.tt ? String(apiCommunication.tt) : "",
status: apiCommunication?.status || "",
type: apiCommunication?.type || "",
evaluation: apiCommunication?.evaluation || "",
},
}); });
function onSubmit(data: DisplayFormValues) { function onSubmit(data: DisplayFormValues) {
@ -104,6 +126,8 @@ export default function AddAPICommunicationForm() {
</pre> </pre>
), ),
}); });
onFormSubmit();
} }
return ( return (
@ -215,11 +239,12 @@ export default function AddAPICommunicationForm() {
</SelectTrigger> </SelectTrigger>
</FormControl> </FormControl>
<SelectContent> <SelectContent>
<SelectItem value="Uploaded at: 2023-09-20 00:00:00 - Uploader: jschultz@php.net - Developer: fabien@potencier.org - Status: finished"> <SelectItem className="truncate" 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: Uploaded at: 2023-09-20 00:00:00 - Uploader:
jschultz@php.net - Developer: fabien@potencier.org - Status: jschultz@php.net - Developer: fabien@potencier.org - Status:
finished finished
</SelectItem> </SelectItem>
</SelectContent> </SelectContent>
</Select> </Select>
<FormMessage /> <FormMessage />
@ -229,10 +254,10 @@ export default function AddAPICommunicationForm() {
<div className="flex items-center gap-4 flex-col sm:flex-row"> <div className="flex items-center gap-4 flex-col sm:flex-row">
<Button className="w-full" size="lg"> <Button className="w-full" size="lg">
Create {btn1_content}
</Button> </Button>
<Button variant="secondary" className="w-full" size="lg"> <Button variant="secondary" className="w-full" size="lg">
Create and add another {btn2_content}
</Button> </Button>
</div> </div>
</form> </form>

View File

@ -12,6 +12,7 @@ import { useToast } from "@/components/ui/use-toast";
import { ApiCommunication } from "@/types/api-communication"; import { ApiCommunication } from "@/types/api-communication";
import { Edit, MoreHorizontal, Trash } from "lucide-react"; import { Edit, MoreHorizontal, Trash } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation"; import { useRouter } from "next/navigation";
import { useState } from "react"; import { useState } from "react";
@ -47,13 +48,13 @@ export const CellAction: React.FC<CellActionProps> = ({ data }) => {
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuLabel>Actions</DropdownMenuLabel> <DropdownMenuLabel>Actions</DropdownMenuLabel>
<DropdownMenuItem <DropdownMenuItem className="cursor-pointer p-0">
className="cursor-pointer" <Link
// onClick={() => href={`/dashboard/api-communications/edit/${data.id}`}
// router.push(`#`) className="flex items-center gap-2 px-2 py-1.5 w-full"
// }
> >
<Edit className="mr-2 h-4 w-4" /> Update <Edit className="h-4 w-4" /> Edit
</Link>
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
className="cursor-pointer" className="cursor-pointer"

View File

@ -164,7 +164,7 @@ export const dummyApiCommunications: ApiCommunication[] = [
status: "course_creation_success", status: "course_creation_success",
type: "course_creation", type: "course_creation",
evaluation: evaluation:
" 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",
created_at: new Date().toISOString(), created_at: new Date().toISOString(),
}, },
]; ];