PhuongDM/TTMT.ManageWebGUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add exec command button in room page

Browse Source
This commit is contained in:
Do Manh Phuong 2026-01-18 22:52:19 +07:00
parent 21a1d0a647
commit beb79025b2
11 changed files with 623 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

275
src/components/buttons/command-action-buttons.tsx Normal file
View File

@ -0,0 +1,275 @@
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { useGetCommandsByTypes } from "@/hooks/queries/useCommandQueries";
import { useSendCommand } from "@/hooks/queries";
import { CommandType } from "@/types/command-registry";
import {
Power,
PowerOff,
XCircle,
ShieldBan,
ChevronDown,
Loader2,
AlertTriangle
} from "lucide-react";
import { toast } from "sonner";
interface CommandActionButtonsProps {
roomName: string;
selectedDevices?: string[]; // Các thiết bị đã chọn
}
const COMMAND_TYPE_CONFIG = {
[CommandType.RESTART]: {
label: "Khởi động lại",
icon: Power,
color: "text-blue-600",
bgColor: "bg-blue-50 hover:bg-blue-100",
},
[CommandType.SHUTDOWN]: {
label: "Tắt máy",
icon: PowerOff,
color: "text-red-600",
bgColor: "bg-red-50 hover:bg-red-100",
},
[CommandType.TASKKILL]: {
label: "Kết thúc tác vụ",
icon: XCircle,
color: "text-orange-600",
bgColor: "bg-orange-50 hover:bg-orange-100",
},
[CommandType.BLOCK]: {
label: "Chặn",
icon: ShieldBan,
color: "text-purple-600",
bgColor: "bg-purple-50 hover:bg-purple-100",
},
};
export function CommandActionButtons({ roomName, selectedDevices = [] }: CommandActionButtonsProps) {
const [confirmDialog, setConfirmDialog] = useState<{
open: boolean;
command: any;
commandType: CommandType;
}>({
open: false,
command: null,
commandType: CommandType.RESTART,
});
const [isExecuting, setIsExecuting] = useState(false);
// Query commands for each type
const { data: restartCommands = [] } = useGetCommandsByTypes(CommandType.RESTART.toString());
const { data: shutdownCommands = [] } = useGetCommandsByTypes(CommandType.SHUTDOWN.toString());
const { data: taskkillCommands = [] } = useGetCommandsByTypes(CommandType.TASKKILL.toString());
const { data: blockCommands = [] } = useGetCommandsByTypes(CommandType.BLOCK.toString());
// Send command mutation
const sendCommandMutation = useSendCommand();
const commandsByType = {
[CommandType.RESTART]: restartCommands,
[CommandType.SHUTDOWN]: shutdownCommands,
[CommandType.TASKKILL]: taskkillCommands,
[CommandType.BLOCK]: blockCommands,
};
const handleCommandClick = (command: any, commandType: CommandType) => {
setConfirmDialog({
open: true,
command,
commandType,
});
};
const handleConfirmExecute = async () => {
setIsExecuting(true);
try {
// Chuẩn bị data theo format API (PascalCase)
const apiData = {
Command: confirmDialog.command.commandContent,
QoS: confirmDialog.command.qoS,
IsRetained: confirmDialog.command.isRetained,
};
// Gửi lệnh đến phòng
await sendCommandMutation.mutateAsync({
roomName,
data: apiData as any,
});
toast.success(`Đã gửi lệnh: ${confirmDialog.command.commandName}`);
setConfirmDialog({ open: false, command: null, commandType: CommandType.RESTART });
// Reload page để tránh freeze
setTimeout(() => {
window.location.reload();
}, 500);
} catch (error) {
console.error("Execute command error:", error);
toast.error("Lỗi khi gửi lệnh!");
setIsExecuting(false);
}
};
const handleCloseDialog = () => {
if (!isExecuting) {
setConfirmDialog({ open: false, command: null, commandType: CommandType.RESTART });
// Reload để tránh freeze
setTimeout(() => {
window.location.reload();
}, 300);
}
};
const renderCommandButton = (commandType: CommandType) => {
const config = COMMAND_TYPE_CONFIG[commandType];
const commands = commandsByType[commandType];
const Icon = config.icon;
if (!commands || commands.length === 0) {
return (
<Button
key={commandType}
variant="outline"
disabled
size="sm"
className="gap-2"
>
<Icon className={`h-4 w-4 ${config.color}`} />
{config.label}
<span className="text-xs text-muted-foreground ml-1">(0)</span>
</Button>
);
}
return (
<DropdownMenu key={commandType}>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="sm"
className={`gap-2 ${config.bgColor} border-${config.color.split('-')[1]}-200`}
>
<Icon className={`h-4 w-4 ${config.color}`} />
{config.label}
<span className="text-xs text-muted-foreground ml-1">({commands.length})</span>
<ChevronDown className="h-3 w-3 ml-1" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
align="start"
side="bottom"
sideOffset={4}
alignOffset={0}
className="w-64"
avoidCollisions={true}
>
{commands.map((command: any) => (
<DropdownMenuItem
key={command.id}
onClick={() => handleCommandClick(command, commandType)}
className="cursor-pointer"
>
<div className="flex flex-col gap-1">
<span className="font-medium">{command.commandName}</span>
{command.description && (
<span className="text-xs text-muted-foreground">
{command.description}
</span>
)}
</div>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
);
};
return (
<>
<div className="flex flex-wrap gap-2">
{Object.values(CommandType)
.filter((value) => typeof value === "number")
.map((commandType) => renderCommandButton(commandType as CommandType))}
</div>
{/* Confirm Dialog */}
<Dialog open={confirmDialog.open} onOpenChange={handleCloseDialog}>
<DialogContent>
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<AlertTriangle className="h-5 w-5 text-orange-600" />
Xác nhận thực thi lệnh
</DialogTitle>
<DialogDescription className="text-left space-y-3">
<p>
Bạn có chắc chắn muốn thực thi lệnh <strong>{confirmDialog.command?.commandName}</strong>?
</p>
{confirmDialog.command?.description && (
<p className="text-sm text-muted-foreground">
{confirmDialog.command.description}
</p>
)}
<div className="bg-muted p-3 rounded-md space-y-1">
<p className="text-sm">
<span className="font-medium">Phòng:</span> {roomName}
</p>
<p className="text-sm">
<span className="font-medium">Loại lệnh:</span>{" "}
{COMMAND_TYPE_CONFIG[confirmDialog.commandType]?.label}
</p>
{selectedDevices.length > 0 && (
<p className="text-sm">
<span className="font-medium">Thiết bị đã chọn:</span>{" "}
{selectedDevices.length} thiết bị
</p>
)}
</div>
<p className="text-sm text-orange-600 font-medium">
Lệnh sẽ được thực thi ngay lập tức và không thể hoàn tác.
</p>
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button
variant="outline"
onClick={handleCloseDialog}
disabled={isExecuting}
>
Hủy
</Button>
<Button
onClick={handleConfirmExecute}
disabled={isExecuting}
className="gap-2"
>
{isExecuting ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Đang thực thi...
</>
) : (
"Xác nhận"
)}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
);
}

37
src/components/forms/command-registry-form.tsx
View File

@ -16,6 +16,7 @@ import { Info } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { z } from "zod";
import { CommandType } from "@/types/command-registry";
interface CommandRegistryFormProps {
onSubmit: (data: CommandRegistryFormData) => Promise<void>;
@ -26,6 +27,7 @@ interface CommandRegistryFormProps {
export interface CommandRegistryFormData {
commandName: string;
commandType: CommandType;
description?: string;
commandContent: string;
qos: 0 | 1 | 2;
@ -40,6 +42,9 @@ const commandRegistrySchema = z.object({
.min(3, "Tên lệnh phải có ít nhất 3 ký tự")
.max(100, "Tên lệnh tối đa 100 ký tự")
.trim(),
commandType: z.nativeEnum(CommandType, {
errorMap: () => ({ message: "Loại lệnh không hợp lệ" }),
}),
description: z.string().max(500, "Mô tả tối đa 500 ký tự").optional(),
commandContent: z
.string()
@ -88,6 +93,7 @@ export function CommandRegistryForm({
const form = useForm({
defaultValues: {
commandName: initialData?.commandName || "",
commandType: initialData?.commandType || CommandType.RESTART,
description: initialData?.description || "",
commandContent: initialData?.commandContent || "",
qos: (initialData?.qos || 0) as 0 | 1 | 2,
@ -159,6 +165,37 @@ export function CommandRegistryForm({
)}
</form.Field>
{/* Loại lệnh */}
<form.Field name="commandType">
{(field: any) => (
<div className="space-y-2">
<Label>
Loại Lệnh <span className="text-red-500">*</span>
</Label>
<select
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2"
value={field.state.value}
onChange={(e) => field.handleChange(Number(e.target.value))}
onBlur={field.handleBlur}
disabled={isSubmitting}
>
<option value={CommandType.RESTART}>RESTART - Khởi động lại</option>
<option value={CommandType.SHUTDOWN}>SHUTDOWN - Tắt máy</option>
<option value={CommandType.TASKKILL}>TASKKILL - Kết thúc tác vụ</option>
<option value={CommandType.BLOCK}>BLOCK - Chặn</option>
</select>
{field.state.meta.errors?.length > 0 && (
<p className="text-sm text-red-500">
{String(field.state.meta.errors[0])}
</p>
)}
<p className="text-sm text-muted-foreground">
Phân loại lệnh để dễ dàng quản lý và tổ chức
</p>
</div>
)}
</form.Field>
{/* Mô tả */}
<form.Field name="description">
{(field: any) => (

23
src/components/tables/version-table.tsx
View File

@ -12,6 +12,7 @@ import {
TableHeader,
TableRow,
} from "@/components/ui/table";
import { ScrollArea } from "@/components/ui/scroll-area";
import { useEffect } from "react";
interface VersionTableProps<TData> {
@ -19,6 +20,9 @@ interface VersionTableProps<TData> {
columns: ColumnDef<TData, any>[];
isLoading: boolean;
onTableInit?: (table: any) => void;
onRowClick?: (row: TData) => void;
scrollable?: boolean;
maxHeight?: string;
}
export function VersionTable<TData>({
@ -26,6 +30,9 @@ export function VersionTable<TData>({
columns,
isLoading,
onTableInit,
onRowClick,
scrollable = false,
maxHeight = "calc(100vh - 320px)",
}: VersionTableProps<TData>) {
const table = useReactTable({
data,
@ -39,7 +46,7 @@ export function VersionTable<TData>({
onTableInit?.(table);
}, [table, onTableInit]);
return (
const tableContent = (
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
@ -72,6 +79,8 @@ export function VersionTable<TData>({
<TableRow
key={row.id}
data-state={row.getIsSelected() && "selected"}
onClick={() => onRowClick?.(row.original)}
className={onRowClick ? "cursor-pointer hover:bg-muted/50" : ""}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}>
@ -84,4 +93,16 @@ export function VersionTable<TData>({
</TableBody>
</Table>
);
if (scrollable) {
return (
<div className="rounded-md border">
<ScrollArea className="w-full" style={{ height: maxHeight }}>
{tableContent}
</ScrollArea>
</div>
);
}
return <div className="rounded-md border">{tableContent}</div>;
}

1
src/config/api.ts
View File

@ -51,6 +51,7 @@ export const API_ENDPOINTS = {
{
ADD_COMMAND: `${BASE_URL}/Command/add`,
GET_COMMANDS: `${BASE_URL}/Command/all`,
GET_COMMAND_BY_TYPES: (types: string) => `${BASE_URL}/Command/types/${types}`,
UPDATE_COMMAND: (commandId: number) => `${BASE_URL}/Command/update/${commandId}`,
DELETE_COMMAND: (commandId: number) => `${BASE_URL}/Command/delete/${commandId}`,
},

10
src/hooks/queries/useCommandQueries.ts
View File

@ -19,6 +19,16 @@ export function useGetCommandList(enabled = true) {
});
}
//Hook để lấy lệnh theo loại
export function useGetCommandsByTypes(types: string, enabled = true) {
return useQuery({
queryKey: [...COMMAND_QUERY_KEYS.all, "by-types", types],
queryFn: () => commandService.getCommandsByTypes(types),
enabled,
staleTime: 5 * 60 * 1000, // 5 minutes
});
}
/**
* Hook để thêm lệnh mới
*/

12
src/routes/_auth.tsx
View File

@ -3,12 +3,12 @@ import AppLayout from '@/layouts/app-layout'
export const Route = createFileRoute('/_auth')({
beforeLoad: async ({context}) => {
const {token} = context.auth
if (!token) {
throw redirect({to: '/login'})
}
},
// beforeLoad: async ({context}) => {
// const {token} = context.auth
// if (!token) {
// throw redirect({to: '/login'})
// }
// },
component: AuthenticatedLayout,
})

217
src/routes/_auth/command/index.tsx
View File

@ -13,19 +13,12 @@ import {
import { toast } from "sonner";
import { Check, X, Edit2, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { ScrollArea } from "@/components/ui/scroll-area";
import type { ColumnDef } from "@tanstack/react-table";
import type { ShellCommandData } from "@/components/forms/command-form";
interface CommandRegistry {
id: number;
commandName: string;
description?: string;
commandContent: string;
qoS: 0 | 1 | 2;
isRetained: boolean;
createdAt?: string;
updatedAt?: string;
}
import type { CommandRegistry } from "@/types/command-registry";
export const Route = createFileRoute("/_auth/command/")({
head: () => ({ meta: [{ title: "Gửi lệnh từ xa" }] }),
@ -35,6 +28,7 @@ export const Route = createFileRoute("/_auth/command/")({
function CommandPage() {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [selectedCommand, setSelectedCommand] = useState<CommandRegistry | null>(null);
const [detailPanelCommand, setDetailPanelCommand] = useState<CommandRegistry | null>(null);
const [table, setTable] = useState<any>();
// Fetch commands
@ -62,26 +56,49 @@ function CommandPage() {
{
accessorKey: "commandName",
header: "Tên lệnh",
size: 100,
cell: ({ getValue }) => (
<span className="font-semibold break-words">{getValue() as string}</span>
<div className="max-w-[100px]">
<span className="font-semibold truncate block">{getValue() as string}</span>
</div>
),
},
{
accessorKey: "commandType",
header: "Loại lệnh",
cell: ({ getValue }) => {
const type = getValue() as number;
const typeMap: Record<number, string> = {
1: "RESTART",
2: "SHUTDOWN",
3: "TASKKILL",
4: "BLOCK",
};
return <span>{typeMap[type] || "UNKNOWN"}</span>;
},
},
{
accessorKey: "description",
header: "Mô tả",
size: 120,
cell: ({ getValue }) => (
<span className="text-sm text-muted-foreground break-words whitespace-normal">
{(getValue() as string) || "-"}
</span>
<div className="max-w-[120px]">
<span className="text-sm text-muted-foreground truncate block">
{(getValue() as string) || "-"}
</span>
</div>
),
},
{
accessorKey: "commandContent",
header: "Nội dung lệnh",
size: 130,
cell: ({ getValue }) => (
<code className="text-xs bg-muted/50 p-1 rounded break-words whitespace-normal block">
{(getValue() as string).substring(0, 100)}...
</code>
<div className="max-w-[130px]">
<code className="text-xs bg-muted/50 px-1.5 py-0.5 rounded truncate block">
{(getValue() as string).substring(0, 40)}...
</code>
</div>
),
},
{
@ -139,7 +156,8 @@ function CommandPage() {
<Button
size="sm"
variant="ghost"
onClick={() => {
onClick={(e) => {
e.stopPropagation();
setSelectedCommand(row.original);
setIsDialogOpen(true);
}}
@ -149,7 +167,10 @@ function CommandPage() {
<Button
size="sm"
variant="ghost"
onClick={() => handleDeleteCommand(row.original.id)}
onClick={(e) => {
e.stopPropagation();
handleDeleteCommand(row.original.id);
}}
disabled={deleteCommandMutation.isPending}
>
<Trash2 className="h-4 w-4 text-red-500" />
@ -219,8 +240,6 @@ function CommandPage() {
IsRetained: row.original.isRetained,
};
console.log("[DEBUG] Sending to:", target, "Data:", apiData);
await sendCommandMutation.mutateAsync({
roomName: target,
data: apiData as any,
@ -232,8 +251,6 @@ function CommandPage() {
table.setRowSelection({});
}
} catch (error) {
console.error("[DEBUG] Execute error:", error);
console.error("[DEBUG] Response:", (error as any)?.response?.data);
toast.error("Có lỗi xảy ra khi thực thi!");
}
};
@ -248,9 +265,6 @@ function CommandPage() {
QoS: commandData.qos,
IsRetained: commandData.isRetained,
};
console.log("[DEBUG] Sending custom to:", target, "Data:", apiData);
await sendCommandMutation.mutateAsync({
roomName: target,
data: apiData as any,
@ -258,39 +272,130 @@ function CommandPage() {
}
toast.success("Đã gửi lệnh tùy chỉnh cho các mục đã chọn!");
} catch (error) {
console.error("[DEBUG] Execute custom error:", error);
console.error("[DEBUG] Response:", (error as any)?.response?.data);
toast.error("Gửi lệnh tùy chỉnh thất bại!");
}
};
return (
<CommandSubmitTemplate
title="Gửi lệnh từ xa"
description="Quản lý và thực thi các lệnh trên thiết bị"
data={commandList}
isLoading={isLoading}
columns={columns}
dialogOpen={isDialogOpen}
onDialogOpen={setIsDialogOpen}
dialogTitle={selectedCommand ? "Sửa Lệnh" : "Thêm Lệnh Mới"}
onAddNew={() => {
setSelectedCommand(null);
setIsDialogOpen(true);
}}
onTableInit={setTable}
formContent={
<CommandRegistryForm
onSubmit={handleFormSubmit}
closeDialog={() => setIsDialogOpen(false)}
initialData={selectedCommand || undefined}
title={selectedCommand ? "Sửa Lệnh" : "Thêm Lệnh Mới"}
/>
}
onExecuteSelected={handleExecuteSelected}
onExecuteCustom={handleExecuteCustom}
isExecuting={sendCommandMutation.isPending}
rooms={roomData}
/>
<>
<CommandSubmitTemplate
title="Gửi lệnh từ xa"
description="Quản lý và thực thi các lệnh trên thiết bị"
data={commandList}
isLoading={isLoading}
columns={columns}
dialogOpen={isDialogOpen}
onDialogOpen={setIsDialogOpen}
dialogTitle={selectedCommand ? "Sửa Lệnh" : "Thêm Lệnh Mới"}
onAddNew={() => {
setSelectedCommand(null);
setIsDialogOpen(true);
}}
onTableInit={setTable}
formContent={
<CommandRegistryForm
onSubmit={handleFormSubmit}
closeDialog={() => setIsDialogOpen(false)}
initialData={selectedCommand || undefined}
title={selectedCommand ? "Sửa Lệnh" : "Thêm Lệnh Mới"}
/>
}
onExecuteSelected={handleExecuteSelected}
onExecuteCustom={handleExecuteCustom}
isExecuting={sendCommandMutation.isPending}
rooms={roomData}
onRowClick={(row) => setDetailPanelCommand(row)}
scrollable={true}
maxHeight="500px"
/>
{/* Detail Dialog Popup */}
<Dialog open={!!detailPanelCommand} onOpenChange={(open) => !open && setDetailPanelCommand(null)}>
<DialogContent className="max-w-2xl max-h-[85vh]">
<DialogHeader>
<DialogTitle>Chi tiết lệnh</DialogTitle>
</DialogHeader>
{detailPanelCommand && (
<div className="space-y-6 max-h-[calc(85vh-120px)] overflow-y-auto pr-2">
{/* Command Name */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Tên lệnh</h3>
<p className="text-base font-medium break-words">{detailPanelCommand.commandName}</p>
</div>
{/* Command Type */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Loại lệnh</h3>
<p className="text-base">
{
{
1: "RESTART",
2: "SHUTDOWN",
3: "TASKKILL",
4: "BLOCK",
}[detailPanelCommand.commandType] || "UNKNOWN"
}
</p>
</div>
{/* Description */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Mô tả</h3>
<p className="text-sm text-foreground whitespace-pre-wrap break-words">
{detailPanelCommand.description || "-"}
</p>
</div>
{/* Command Content */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Nội dung lệnh</h3>
<div className="bg-muted/50 p-4 rounded-md border">
<code className="text-sm whitespace-pre-wrap break-all block font-mono">
{detailPanelCommand.commandContent}
</code>
</div>
</div>
{/* QoS */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-2">QoS</h3>
<p className="text-base">
<span
className={
{
0: "text-blue-600",
1: "text-amber-600",
2: "text-red-600",
}[(detailPanelCommand.qoS ?? 0) as 0 | 1 | 2]
}
>
{detailPanelCommand.qoS ?? 0}
</span>
</p>
</div>
{/* Retention */}
<div>
<h3 className="text-sm font-semibold text-muted-foreground mb-2">Lưu trữ</h3>
<div className="flex items-center gap-2">
{detailPanelCommand.isRetained ? (
<>
<Check className="h-4 w-4 text-green-600" />
<span className="text-sm text-green-600">Có</span>
</>
) : (
<>
<X className="h-4 w-4 text-gray-400" />
<span className="text-sm text-gray-400">Không</span>
</>
)}
</div>
</div>
</div>
)}
</DialogContent>
</Dialog>
</>
);
}

64
src/routes/_auth/room/$roomName/index.tsx
View File

@ -10,6 +10,7 @@ import { DeviceGrid } from "@/components/grids/device-grid";
import { DeviceTable } from "@/components/tables/device-table";
import { useMachineNumber } from "@/hooks/useMachineNumber";
import { toast } from "sonner";
import { CommandActionButtons } from "@/components/buttons/command-action-buttons";
export const Route = createFileRoute("/_auth/room/$roomName/")({
head: ({ params }) => ({
@ -64,29 +65,15 @@ function RoomDetailPage() {
return (
<div className="w-full px-6 space-y-6">
<Card className="shadow-sm">
<CardHeader className="bg-muted/50 flex items-center justify-between">
<CardTitle className="flex items-center gap-2">
<Monitor className="h-5 w-5" />
Danh sách thiết bị phòng {roomName}
</CardTitle>
<CardHeader className="bg-muted/50 space-y-4">
{/* Hàng 1: Thông tin phòng và controls */}
<div className="flex items-center justify-between w-full gap-4">
<div className="flex items-center gap-2">
<Monitor className="h-5 w-5" />
<CardTitle>Danh sách thiết bị phòng {roomName}</CardTitle>
</div>
<div className="flex items-center gap-3">
<Button
onClick={handleCheckFolderStatus}
disabled={isCheckingFolder}
variant="outline"
size="sm"
className="flex items-center gap-2"
>
{isCheckingFolder ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<FolderCheck className="h-4 w-4" />
)}
{isCheckingFolder ? "Đang kiểm tra..." : "Kiểm tra thư mục Setup"}
</Button>
<div className="flex items-center gap-2 bg-background rounded-lg p-1 border">
<div className="flex items-center gap-2 bg-background rounded-lg p-1 border shrink-0">
<Button
variant={viewMode === "grid" ? "default" : "ghost"}
size="sm"
@ -107,6 +94,39 @@ function RoomDetailPage() {
</Button>
</div>
</div>
{/* Hàng 2: Thực thi lệnh */}
<div className="flex items-center justify-between w-full gap-4">
<div className="flex items-center gap-2 text-sm font-semibold">
Thực thi lệnh
</div>
<div className="flex items-center gap-3 flex-wrap justify-end">
{/* Command Action Buttons */}
{devices.length > 0 && (
<>
<CommandActionButtons roomName={roomName} />
<div className="h-8 w-px bg-border" />
<Button
onClick={handleCheckFolderStatus}
disabled={isCheckingFolder}
variant="outline"
size="sm"
className="flex items-center gap-2 shrink-0"
>
{isCheckingFolder ? (
<Loader2 className="h-4 w-4 animate-spin" />
) : (
<FolderCheck className="h-4 w-4" />
)}
{isCheckingFolder ? "Đang kiểm tra..." : "Kiểm tra thư mục Setup"}
</Button>
</>
)}
</div>
</div>
</CardHeader>
<CardContent className="p-0">

10
src/services/command.service.ts
View File

@ -31,6 +31,16 @@ export async function updateCommand(commandId: number, data: any): Promise<any>
return response.data;
}
/**
* Lấy lệnh theo loại
* @param types - Loại lệnh
* @returns - Danh sách lệnh
*/
export async function getCommandsByTypes(types: string): Promise<any[]> {
const response = await axios.get<any[]>(API_ENDPOINTS.COMMAND.GET_COMMAND_BY_TYPES(types));
return response.data;
}
/**
* Xóa lệnh
* @param commandId - ID lệnh

67
src/template/command-submit-template.tsx
View File

@ -58,6 +58,11 @@ interface CommandSubmitTemplateProps<T extends { id: number }> {
// Execution scope
rooms?: Room[];
devices?: string[];
// Table interactions
onRowClick?: (row: T) => void;
scrollable?: boolean;
maxHeight?: string;
}
export function CommandSubmitTemplate<T extends { id: number }>({
@ -78,6 +83,9 @@ export function CommandSubmitTemplate<T extends { id: number }>({
isExecuting = false,
rooms = [],
devices = [],
onRowClick,
scrollable = true,
maxHeight = "calc(100vh - 320px)",
}: CommandSubmitTemplateProps<T>) {
const [activeTab, setActiveTab] = useState<"list" | "execute">("list");
const [customCommand, setCustomCommand] = useState("");
@ -184,14 +192,14 @@ export function CommandSubmitTemplate<T extends { id: number }>({
};
return (
<div className="w-full px-6 space-y-6">
<div>
<div className="w-full h-full flex flex-col px-6">
<div className="flex-shrink-0 mb-6">
<h1 className="text-3xl font-bold">{title}</h1>
<p className="text-muted-foreground mt-2">{description}</p>
</div>
<Card className="shadow-sm">
<CardHeader className="bg-muted/50 flex items-center justify-between">
<Card className="shadow-sm flex-1 flex flex-col overflow-hidden">
<CardHeader className="bg-muted/50 flex-shrink-0 flex items-center justify-between">
<CardTitle className="flex items-center gap-2">
<CommandIcon className="h-5 w-5" />
{title}
@ -205,9 +213,9 @@ export function CommandSubmitTemplate<T extends { id: number }>({
)}
</CardHeader>
<CardContent className="p-6">
<CardContent className="p-6 flex-1 flex flex-col overflow-hidden">
{/* Tabs Navigation */}
<div className="flex gap-4 mb-6 border-b">
<div className="flex gap-4 mb-6 border-b flex-shrink-0">
<button
onClick={() => setActiveTab("list")}
className={`pb-3 px-2 font-medium text-sm flex items-center gap-2 transition-colors ${
@ -234,32 +242,39 @@ export function CommandSubmitTemplate<T extends { id: number }>({
{/* Tab 1: Danh sách */}
{activeTab === "list" && (
<div className="space-y-4">
<VersionTable<T>
data={data}
columns={columns}
isLoading={isLoading}
onTableInit={handleTableInit}
/>
<RequestUpdateMenu
onUpdateDevice={openDeviceDialog}
onUpdateRoom={openRoomDialog}
onUpdateAll={handleExecuteAll}
loading={isExecuting}
label="Thực Thi"
deviceLabel="Thực thi cho thiết bị cụ thể"
roomLabel="Thực thi cho phòng"
allLabel="Thực thi cho tất cả thiết bị"
icon={<Zap className="h-4 w-4" />}
/>
<div className="flex-1 flex flex-col space-y-4 overflow-hidden">
<div className="flex-1 overflow-hidden">
<VersionTable<T>
data={data}
columns={columns}
isLoading={isLoading}
onTableInit={handleTableInit}
onRowClick={onRowClick}
scrollable={scrollable}
maxHeight={maxHeight}
/>
</div>
<div className="flex-shrink-0">
<RequestUpdateMenu
onUpdateDevice={openDeviceDialog}
onUpdateRoom={openRoomDialog}
onUpdateAll={handleExecuteAll}
loading={isExecuting}
label="Thực Thi"
deviceLabel="Thực thi cho thiết bị cụ thể"
roomLabel="Thực thi cho phòng"
allLabel="Thực thi cho tất cả thiết bị"
icon={<Zap className="h-4 w-4" />}
/>
</div>
</div>
)}
{/* Tab 2: Thực thi */}
{activeTab === "execute" && (
<div className="space-y-4">
<div className="flex-1 flex flex-col overflow-auto">
{/* Lệnh tùy chỉnh */}
<Card className="border-dashed">
<Card className="border-dashed flex-shrink-0">
<CardHeader>
<CardTitle className="text-base">
Thực Thi Lệnh Tùy Chỉnh

18
src/types/command-registry.ts
View File

@ -0,0 +1,18 @@
export interface CommandRegistry {
id: number;
commandName: string;
commandType: CommandType;
description?: string;
commandContent: string;
qoS: 0 | 1 | 2;
isRetained: boolean;
createdAt?: string;
updatedAt?: string;
}
export enum CommandType {
RESTART = 1,
SHUTDOWN = 2,
TASKKILL = 3,
BLOCK = 4,
}