+ {/* Header */}
{title}
@@ -59,6 +101,7 @@ export function AppManagerTemplate({
+ {/* Table */}
@@ -66,6 +109,7 @@ export function AppManagerTemplate({
Tất cả các phiên bản đã tải lên
+
({
onTableInit={onTableInit}
/>
+
{onUpdate && (
-
- onUpdate("All")}
+
)}
- {rooms && onUpdate && (
- setDialogOpen(false)}
- rooms={rooms}
- onConfirm={(roomName) => {
- onUpdate(roomName);
- setDialogOpen(false);
- }}
- />
- )}
+
+ {/* 🧩 SelectDialog tái sử dụng */}
+ {dialogProps && (
+
setDialogOpen(false)}
+ title={dialogProps.title}
+ description={dialogProps.description}
+ icon={dialogProps.icon}
+ items={dialogProps.items}
+ onConfirm={async (selectedItems) => {
+ if (!onUpdate) return;
+ await onUpdate(selectedItems);
+ setDialogOpen(false);
+ }}
+ />
+ )}
);
}
diff --git a/src/template/form-submit-template.tsx b/src/template/form-submit-template.tsx
index e0c7817..885eecb 100644
--- a/src/template/form-submit-template.tsx
+++ b/src/template/form-submit-template.tsx
@@ -1,5 +1,3 @@
-"use client"
-
import { useState } from "react"
import {
Card,
@@ -9,9 +7,9 @@ import {
CardHeader,
CardTitle,
} from "@/components/ui/card"
-import { UpdateButton } from "@/components/update-button"
-import { Terminal } from "lucide-react"
-import { RoomSelectDialog } from "@/components/room-select-dialog"
+import { Terminal, Building2, Monitor } from "lucide-react"
+import { RequestUpdateMenu } from "@/components/request-update-menu"
+import { SelectDialog } from "@/components/select-dialog"
interface FormSubmitTemplateProps {
title: string
@@ -21,9 +19,10 @@ interface FormSubmitTemplateProps {
command: string
setCommand: (val: string) => void
}) => React.ReactNode
- onSubmit?: (roomName: string, command: string) => void
+ onSubmit?: (target: string, command: string) => void | Promise
submitLoading?: boolean
rooms?: string[]
+ devices?: string[]
}
export function FormSubmitTemplate({
@@ -34,16 +33,56 @@ export function FormSubmitTemplate({
onSubmit,
submitLoading,
rooms = [],
+ devices = [],
}: FormSubmitTemplateProps) {
- const [dialogOpen, setDialogOpen] = useState(false)
const [command, setCommand] = useState("")
+ const [dialogOpen, setDialogOpen] = useState(false)
+ const [dialogType, setDialogType] = useState<"room" | "device" | null>(null)
- const handleClick = () => {
+ const openRoomDialog = () => {
if (rooms.length > 0 && onSubmit) {
+ setDialogType("room")
setDialogOpen(true)
}
}
+ const openDeviceDialog = () => {
+ if (devices.length > 0 && onSubmit) {
+ setDialogType("device")
+ setDialogOpen(true)
+ }
+ }
+
+ const handleSubmitAll = () => {
+ if (!onSubmit) return
+ const allTargets = [...rooms, ...devices]
+ for (const target of allTargets) {
+ onSubmit(target, command)
+ }
+ }
+
+ const getDialogProps = () => {
+ if (dialogType === "room") {
+ return {
+ title: "Chọn phòng để gửi lệnh",
+ description: "Chọn các phòng muốn gửi lệnh CMD tới",
+ icon: ,
+ items: rooms,
+ }
+ }
+ if (dialogType === "device") {
+ return {
+ title: "Chọn thiết bị để gửi lệnh",
+ description: "Chọn các thiết bị muốn gửi lệnh CMD tới",
+ icon: ,
+ items: devices,
+ }
+ }
+ return null
+ }
+
+ const dialogProps = getDialogProps()
+
return (
@@ -58,33 +97,35 @@ export function FormSubmitTemplate({
Nhập và gửi lệnh xuống thiết bị
-
- {children({ command, setCommand })}
-
+
+
{children({ command, setCommand })}
{onSubmit && (
-
-
+
- onSubmit("All", command)}
- loading={submitLoading}
- label="Cập nhật tất cả thiết bị"
/>
)}
- {onSubmit && rooms.length > 0 && (
-
setDialogOpen(false)}
- rooms={rooms}
- onConfirm={(roomName) => {
- onSubmit(roomName, command)
+ title={dialogProps.title}
+ description={dialogProps.description}
+ icon={dialogProps.icon}
+ items={dialogProps.items}
+ onConfirm={async (selectedItems) => {
+ if (!onSubmit) return
+ for (const item of selectedItems) {
+ await onSubmit(item, command)
+ }
setDialogOpen(false)
}}
/>
diff --git a/src/template/table-manager-template.tsx b/src/template/table-manager-template.tsx
new file mode 100644
index 0000000..f758338
--- /dev/null
+++ b/src/template/table-manager-template.tsx
@@ -0,0 +1,153 @@
+import { RequestUpdateMenu } from "@/components/request-update-menu";
+import { SelectDialog } from "@/components/select-dialog";
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card";
+import { UploadDialog } from "@/components/upload-dialog";
+import { VersionTable } from "@/components/version-table";
+import type { ColumnDef } from "@tanstack/react-table";
+import type { AxiosProgressEvent } from "axios";
+import { FileText, Building2, Monitor } from "lucide-react";
+import { useState } from "react";
+
+interface BlackListManagerTemplateProps {
+ title: string;
+ description: string;
+ data: TData[];
+ isLoading: boolean;
+ columns: ColumnDef[];
+ onUpload: (
+ fd: FormData,
+ config?: { onUploadProgress?: (e: AxiosProgressEvent) => void }
+ ) => Promise;
+ onUpdate?: (roomName: string) => void;
+ updateLoading?: boolean;
+ onTableInit?: (table: any) => void;
+ rooms: string[];
+ devices?: string[];
+}
+
+export function BlackListManagerTemplate({
+ title,
+ description,
+ data,
+ isLoading,
+ columns,
+ onUpload,
+ onUpdate,
+ updateLoading,
+ onTableInit,
+ rooms = [],
+ devices = [],
+}: BlackListManagerTemplateProps) {
+ const [dialogOpen, setDialogOpen] = useState(false);
+ const [dialogType, setDialogType] = useState<"room" | "device" | null>(null);
+
+ const handleUpdateAll = () => {
+ if (onUpdate) onUpdate("All");
+ };
+
+ const openRoomDialog = () => {
+ if (rooms.length > 0 && onUpdate) {
+ setDialogType("room");
+ setDialogOpen(true);
+ }
+ };
+
+ const openDeviceDialog = () => {
+ if (devices.length > 0 && onUpdate) {
+ setDialogType("device");
+ setDialogOpen(true);
+ }
+ };
+
+ const getDialogProps = () => {
+ if (dialogType === "room") {
+ return {
+ title: "Chọn phòng",
+ description: "Chọn các phòng cần cập nhật",
+ icon: ,
+ items: rooms,
+ };
+ }
+ if (dialogType === "device") {
+ return {
+ title: "Chọn thiết bị",
+ description: "Chọn các thiết bị cần cập nhật",
+ icon: ,
+ items: devices,
+ };
+ }
+ return null;
+ };
+ const dialogProps = getDialogProps();
+
+ return (
+
+ {/* Header */}
+
+
+
{title}
+
{description}
+
+
+
+
+ {/* Table */}
+
+
+
+ Danh sách phần mềm bị chặn
+
+
+ Các phần mềm không được cho phép trong hệ thống
+
+
+
+
+
+
+
+ {/* Footer */}
+ {onUpdate && (
+
+
+
+ )}
+
+
+ {dialogProps && (
+
setDialogOpen(false)}
+ title={dialogProps.title}
+ description={dialogProps.description}
+ icon={dialogProps.icon}
+ items={dialogProps.items}
+ onConfirm={async (selectedItems) => {
+ if (!onUpdate) return;
+ for (const item of selectedItems) {
+ onUpdate(item);
+ }
+ setDialogOpen(false);
+ }}
+ />
+ )}
+