Update: Printer Handle

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<HTMLInputElement>) => {
       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"}
           />
         </Grid>
         <Grid item xs={12} md={6}>
-          <FormControl fullWidth>
-            <InputLabel>{t("Description")}</InputLabel>
-            <Select
-              label={t("Description")}
-              value={formData.description ?? ""}
-              onChange={handleDescriptionChange}
-            >
-              <MenuItem value="">
-                <em>-- {t("Select") || "選擇"} --</em>
-              </MenuItem>
-              {descriptions.map((desc) => (
-                <MenuItem key={desc} value={desc}>
-                  {desc}
-                </MenuItem>
-              ))}
-            </Select>
-          </FormControl>
+          <Autocomplete
+            freeSolo
+            options={descriptions}
+            value={formData.description || null}
+            onChange={handleDescriptionChange}
+            onInputChange={(_e, newInputValue) => {
+              setFormData((prev) => ({
+                ...prev,
+                description: newInputValue,
+              }));
+            }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                label={t("Description")}
+                variant="outlined"
+                fullWidth
+              />
+            )}
+          />
         </Grid>
         <Grid item xs={12}>
           <Stack direction="row" spacing={2}>

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<Props> = ({ 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<HTMLInputElement>) => {
       const value = e.target.value;
@@ -125,6 +131,7 @@ const EditPrinter: React.FC<Props> = ({ printer }) => {
             value={formData.dpi || ""}
             onChange={handleChange("dpi")}
             variant="outlined"
+            disabled={formData.type !== "Label"}
           />
         </Grid>
         <Grid item xs={12}>