From 0c3636f2272f1377d0bac8e802de947589bb230c Mon Sep 17 00:00:00 2001 From: "LAPTOP-EU9T8H5F\\User" Date: Tue, 30 Dec 2025 12:51:33 +0800 Subject: [PATCH] update of qr-code of user --- src/app/api/settings/printer/index.ts | 1 + .../qrCodeHandles/qrCodeHandleSearch.tsx | 245 ++++++++++++------ src/i18n/zh/common.json | 2 +- src/i18n/zh/jo.json | 2 +- 4 files changed, 174 insertions(+), 76 deletions(-) diff --git a/src/app/api/settings/printer/index.ts b/src/app/api/settings/printer/index.ts index e443ccd..d41dc48 100644 --- a/src/app/api/settings/printer/index.ts +++ b/src/app/api/settings/printer/index.ts @@ -9,6 +9,7 @@ export interface PrinterCombo { label?: string; code?: string; name?: string; + type?: string; description?: string; ip?: string; port?: number; diff --git a/src/components/qrCodeHandles/qrCodeHandleSearch.tsx b/src/components/qrCodeHandles/qrCodeHandleSearch.tsx index 5893786..70cd478 100644 --- a/src/components/qrCodeHandles/qrCodeHandleSearch.tsx +++ b/src/components/qrCodeHandles/qrCodeHandleSearch.tsx @@ -13,7 +13,25 @@ import { UserResult } from "@/app/api/user"; import { deleteUser } from "@/app/api/user/actions"; import QrCodeIcon from "@mui/icons-material/QrCode"; import { exportUserQrCode } from "@/app/api/user/client"; -import { Checkbox, Box, Button, TextField, Stack, Autocomplete, Modal, Card, IconButton } from "@mui/material"; +import { + Checkbox, + Box, + Button, + TextField, + Stack, + Autocomplete, + Modal, + Card, + IconButton, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + Paper, + Typography +} from "@mui/material"; import DownloadIcon from "@mui/icons-material/Download"; import PrintIcon from "@mui/icons-material/Print"; import CloseIcon from "@mui/icons-material/Close"; @@ -41,23 +59,15 @@ const QrCodeHandleSearch: React.FC = ({ users, printerCombo }) => { const [selectAll, setSelectAll] = useState(false); const [printQty, setPrintQty] = useState(1); - // Preview modal state const [previewOpen, setPreviewOpen] = useState(false); const [previewUrl, setPreviewUrl] = useState(null); + const [selectedUsersModalOpen, setSelectedUsersModalOpen] = useState(false); const filteredPrinters = useMemo(() => { - const allowedPrinterNames = [ - "A4印機 測試用 Local", - "A4印機 測試用 Server", - "A4 2F Office", - "A4 2F 雪庫", - ]; - - return printerCombo.filter((printer) => { - const printerName = printer.name || printer.label || printer.code || ""; - return allowedPrinterNames.includes(printerName); - }); + return printerCombo.filter((printer) => { + return printer.type === "A4"; + }); }, [printerCombo]); const [selectedPrinter, setSelectedPrinter] = useState( @@ -150,7 +160,8 @@ const QrCodeHandleSearch: React.FC = ({ users, printerCombo }) => { setIsUploading(true); const response = await exportUserQrCode(userIds); downloadFile(response.blobValue, response.filename); - successDialog(t("QR Code exported successfully"), t); + setSelectedUsersModalOpen(false); + successDialog("二維碼已下載", t); } catch (error) { console.error("Error exporting QR code:", error); } finally { @@ -183,16 +194,29 @@ const QrCodeHandleSearch: React.FC = ({ users, printerCombo }) => { setTimeout(() => { URL.revokeObjectURL(url); }, 1000); + setSelectedUsersModalOpen(false); + successDialog("二維碼已列印", t); } catch (error) { console.error("Error printing QR code:", error); } finally { setIsUploading(false); } - }, [checkboxIds, printQty, setIsUploading]); + }, [checkboxIds, printQty, setIsUploading, t]); + + const handleViewSelectedQrCodes = useCallback(() => { + if (checkboxIds.length === 0) { + return; + } + setSelectedUsersModalOpen(true); + }, [checkboxIds]); + + const selectedUsers = useMemo(() => { + return users.filter(user => checkboxIds.includes(user.id)); + }, [users, checkboxIds]); - const handleViewSelectedQrCodes = useCallback(async () => { - await handleDownloadQrCode(checkboxIds); - }, [checkboxIds, handleDownloadQrCode]); + const handleCloseSelectedUsersModal = useCallback(() => { + setSelectedUsersModalOpen(false); + }, []); const columns = useMemo[]>( () => [ @@ -263,7 +287,6 @@ const QrCodeHandleSearch: React.FC = ({ users, printerCombo }) => { totalCount={filteredUser.length} isAutoPaging={true} /> - {/* Add select all and view selected buttons */} - {/* Print and Download Section */} - - - - options={filteredPrinters} - value={selectedPrinter ?? null} - onChange={(event, value) => { - setSelectedPrinter(value ?? undefined); + + option.name || option.label || option.code || String(option.id)} - renderInput={(params) => ( - - )} - /> - { - const value = parseInt(e.target.value) || 1; - setPrintQty(Math.max(1, value)); + > + + 已選擇用戶 ({selectedUsers.length}) + + + + + + + - - - - + + + options={filteredPrinters} + value={selectedPrinter ?? null} + onChange={(event, value) => { + setSelectedPrinter(value ?? undefined); + }} + getOptionLabel={(option) => option.name || option.label || option.code || String(option.id)} + renderInput={(params) => ( + + )} + /> + { + const value = parseInt(e.target.value) || 1; + setPrintQty(Math.max(1, value)); + }} + inputProps={{ min: 1 }} + sx={{ width: 120 }} + /> + + + + + + - {/* PDF Preview Modal - Simple preview only */} = ({ users, printerCombo }) => { outline: 'none', }} > - {/* Header with close button only */} = ({ users, printerCombo }) => { - {/* PDF Preview */}