11import { SettingsContext } from "@/core/settings/settingsContext" ;
22import { Printer , printerTypes } from "@/printers/entities/Printer" ;
33import { ActionIcon , Button , Group , Input , Select , TextInput } from "@mantine/core" ;
4- import { useForm } from "@mantine/form" ;
4+ import { hasLength , isNotEmpty , useForm } from "@mantine/form" ;
55import { notifications } from "@mantine/notifications" ;
66import { IconPlugConnected } from "@tabler/icons-react" ;
77import useAxios from "axios-hooks" ;
@@ -16,10 +16,14 @@ export function PrinterForm({ printer, onPrinterChange }: PrinterFormProps) {
1616 const { settings } = useContext ( SettingsContext ) ;
1717 const form = useForm ( {
1818 initialValues : {
19- ...printer ,
19+ name : '' ,
20+ type : '' ,
21+ address : '' ,
2022 } ,
2123 validate : {
22- name : ( value ) => ( value . length < 2 ? 'Too short name' : null ) ,
24+ name : hasLength ( { min : 3 } , "Use at least 3 characters" ) ,
25+ type : isNotEmpty ( "You must select a printer type." ) ,
26+ address : hasLength ( { min : 8 } , "You must insert an address (with http://)" )
2327 } ,
2428 } ) ;
2529 const [ { loading } , executeSave ] = useAxios ( { method : 'POST' } , { manual : true } )
@@ -66,7 +70,7 @@ export function PrinterForm({ printer, onPrinterChange }: PrinterFormProps) {
6670
6771 }
6872
69- return ( < >
73+ return (
7074 < form onSubmit = { form . onSubmit ( onSave ) } >
7175 < TextInput
7276 mb = "sm"
@@ -110,8 +114,8 @@ export function PrinterForm({ printer, onPrinterChange }: PrinterFormProps) {
110114 { ...form . getInputProps ( 'state' ) }
111115 /> }
112116 < Group justify = "flex-end" mt = "md" >
113- < Button type = "submit" loading = { loading } onClick = { onSave } > Save</ Button >
117+ < Button type = "submit" loading = { loading } > Save</ Button >
114118 </ Group >
115119 </ form >
116- </ > )
120+ )
117121}
0 commit comments