diff --git a/src/components/CreatePrinter/CreatePrinter.tsx b/src/components/CreatePrinter/CreatePrinter.tsx index c2e7644..b72de16 100644 --- a/src/components/CreatePrinter/CreatePrinter.tsx +++ b/src/components/CreatePrinter/CreatePrinter.tsx @@ -4,6 +4,7 @@ import { createPrinter, PrinterInputs, fetchPrinterDescriptions } from "@/app/ap import { successDialog } from "@/components/Swal/CustomAlerts"; import { ArrowBack, Check } from "@mui/icons-material"; import { + Autocomplete, Box, Button, FormControl, @@ -45,6 +46,12 @@ const CreatePrinter: React.FC = () => { loadDescriptions(); }, []); + useEffect(() => { + if (formData.type !== "Label") { + setFormData((prev) => ({ ...prev, dpi: undefined })); + } + }, [formData.type]); + const handleChange = useCallback((field: keyof PrinterInputs) => { return (e: React.ChangeEvent) => { const value = e.target.value; @@ -67,16 +74,28 @@ const CreatePrinter: React.FC = () => { })); }, []); - const handleDescriptionChange = useCallback((e: SelectChangeEvent) => { + const handleDescriptionChange = useCallback((_e: any, newValue: string | null) => { setFormData((prev) => ({ ...prev, - description: e.target.value, + description: newValue || "", })); }, []); const handleSubmit = useCallback(async () => { setIsSubmitting(true); try { + const needDpi = formData.type === "Label"; + const missing: string[] = []; + if (!formData.ip || formData.ip.trim() === "") missing.push("IP"); + if (formData.port === undefined || formData.port === null || Number.isNaN(formData.port)) missing.push("Port"); + if (!formData.type || formData.type.trim() === "") missing.push(t("Type") || "類型"); + if (needDpi && (formData.dpi === undefined || formData.dpi === null || Number.isNaN(formData.dpi))) missing.push("DPI"); + if (missing.length > 0) { + alert(`請必須輸入 ${missing.join("、")}`); + setIsSubmitting(false); + return; + } + await createPrinter(formData); successDialog(t("Create Printer") || "新增列印機", t); router.push("/settings/printer"); @@ -144,26 +163,30 @@ const CreatePrinter: React.FC = () => { value={formData.dpi ?? ""} onChange={handleChange("dpi")} variant="outlined" + disabled={formData.type !== "Label"} /> - - {t("Description")} - - + { + setFormData((prev) => ({ + ...prev, + description: newInputValue, + })); + }} + renderInput={(params) => ( + + )} + /> diff --git a/src/components/EditPrinter/EditPrinter.tsx b/src/components/EditPrinter/EditPrinter.tsx index d29ceec..e8512ce 100644 --- a/src/components/EditPrinter/EditPrinter.tsx +++ b/src/components/EditPrinter/EditPrinter.tsx @@ -1,6 +1,6 @@ "use client"; -import { useCallback, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import { useRouter } from "next/navigation"; import { useTranslation } from "react-i18next"; import { PrinterResult } from "@/app/api/settings/printer"; @@ -37,6 +37,12 @@ const EditPrinter: React.FC = ({ printer }) => { dpi: printer.dpi || undefined, }); + useEffect(() => { + if (formData.type !== "Label") { + setFormData((prev) => ({ ...prev, dpi: undefined })); + } + }, [formData.type]); + const handleChange = useCallback((field: keyof PrinterInputs) => { return (e: React.ChangeEvent) => { const value = e.target.value; @@ -125,6 +131,7 @@ const EditPrinter: React.FC = ({ printer }) => { value={formData.dpi || ""} onChange={handleChange("dpi")} variant="outlined" + disabled={formData.type !== "Label"} />