95 lines
2.4 KiB
TypeScript
95 lines
2.4 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card"
|
|
import { UpdateButton } from "@/components/update-button"
|
|
import { Terminal } from "lucide-react"
|
|
import { RoomSelectDialog } from "@/components/room-select-dialog"
|
|
|
|
interface FormSubmitTemplateProps {
|
|
title: string
|
|
description: string
|
|
isLoading?: boolean
|
|
children: (props: {
|
|
command: string
|
|
setCommand: (val: string) => void
|
|
}) => React.ReactNode
|
|
onSubmit?: (roomName: string, command: string) => void
|
|
submitLoading?: boolean
|
|
rooms?: string[]
|
|
}
|
|
|
|
export function FormSubmitTemplate({
|
|
title,
|
|
description,
|
|
isLoading,
|
|
children,
|
|
onSubmit,
|
|
submitLoading,
|
|
rooms = [],
|
|
}: FormSubmitTemplateProps) {
|
|
const [dialogOpen, setDialogOpen] = useState(false)
|
|
const [command, setCommand] = useState("")
|
|
|
|
const handleClick = () => {
|
|
if (rooms.length > 0 && onSubmit) {
|
|
setDialogOpen(true)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="w-full px-6 space-y-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">{title}</h1>
|
|
<p className="text-muted-foreground mt-2">{description}</p>
|
|
</div>
|
|
|
|
<Card className="w-full">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Terminal className="h-5 w-5" /> Gửi lệnh CMD
|
|
</CardTitle>
|
|
<CardDescription>Nhập và gửi lệnh xuống thiết bị</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{children({ command, setCommand })}
|
|
</CardContent>
|
|
|
|
{onSubmit && (
|
|
<CardFooter className="flex gap-2">
|
|
<UpdateButton
|
|
onClick={handleClick}
|
|
loading={submitLoading}
|
|
label="Yêu cầu theo phòng"
|
|
/>
|
|
<UpdateButton
|
|
onClick={() => onSubmit("All", command)}
|
|
loading={submitLoading}
|
|
label="Cập nhật tất cả thiết bị"
|
|
/>
|
|
</CardFooter>
|
|
)}
|
|
</Card>
|
|
|
|
{onSubmit && rooms.length > 0 && (
|
|
<RoomSelectDialog
|
|
open={dialogOpen}
|
|
onClose={() => setDialogOpen(false)}
|
|
rooms={rooms}
|
|
onConfirm={(roomName) => {
|
|
onSubmit(roomName, command)
|
|
setDialogOpen(false)
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|