From 6c0933b7977936292d359b3dca0ae6beadaf7a1d Mon Sep 17 00:00:00 2001 From: Tom Butcher Date: Fri, 5 Sep 2025 23:17:35 +0100 Subject: [PATCH] Refactor NewPrinter component to utilize NewObjectForm and WizardView for improved structure and user experience; streamline printer setup process and enhance form validation. --- .../Production/Printers/NewPrinter.jsx | 659 +++--------------- 1 file changed, 102 insertions(+), 557 deletions(-) diff --git a/src/components/Dashboard/Production/Printers/NewPrinter.jsx b/src/components/Dashboard/Production/Printers/NewPrinter.jsx index bf082a5..9a50922 100644 --- a/src/components/Dashboard/Production/Printers/NewPrinter.jsx +++ b/src/components/Dashboard/Production/Printers/NewPrinter.jsx @@ -1,564 +1,109 @@ -import { useState, useContext, useEffect, useCallback } from 'react' -import axios from 'axios' -import { - Form, - Button, - message, - Typography, - Flex, - Steps, - Divider, - Input, - Select, - Space, - Descriptions, - List, - InputNumber, - notification, - Progress, - Modal, - Radio -} from 'antd' -import { SearchOutlined, SettingOutlined } from '@ant-design/icons' import PropTypes from 'prop-types' -import { PrintServerContext } from '../../context/PrintServerContext' -import EditIcon from '../../../Icons/EditIcon.jsx' +import ObjectInfo from '../../common/ObjectInfo' +import NewObjectForm from '../../common/NewObjectForm' +import WizardView from '../../common/WizardView' -import config from '../../../../config.js' - -const { Title } = Typography - -const initialNewPrinterForm = { - moonraker: { - protocol: 'ws', - host: '', - port: '', - apiKey: '' - } +const NewPrinter = ({ onOk }) => { + return ( + + {({ handleSubmit, submitLoading, objectData, formValid }) => { + const steps = [ + { + title: 'Required', + key: 'required', + content: ( + + ) + }, + { + title: 'Optional', + key: 'optional', + content: ( + + ) + }, + { + title: 'Summary', + key: 'summary', + content: ( + + ) + } + ] + return ( + { + handleSubmit() + onOk() + }} + /> + ) + }} + + ) } -const NewPrinter = ({ onOk, reset }) => { - NewPrinter.propTypes = { - onOk: PropTypes.func.isRequired, - reset: PropTypes.bool.isRequired - } - - const { printServer } = useContext(PrintServerContext) - const [messageApi, contextHolder] = message.useMessage() - const [notificationApi, notificationContextHolder] = - notification.useNotification() - const [newPrinterLoading, setNewPrinterLoading] = useState(false) - const [currentStep, setCurrentStep] = useState(0) - const [nextEnabled, setNextEnabled] = useState(false) - const [newPrinterForm] = Form.useForm() - const [newPrinterFormValues, setNewPrinterFormValues] = useState( - initialNewPrinterForm - ) - const [discoveredPrinters, setDiscoveredPrinters] = useState([]) - const [discovering, setDiscovering] = useState(false) - const [showManualSetup, setShowManualSetup] = useState(false) - const [scanPort, setScanPort] = useState(7125) - const [scanProtocol, setScanProtocol] = useState('ws') - const [editingHostname, setEditingHostname] = useState(null) - const [hostnameInput, setHostnameInput] = useState('') - const [initialized, setInitialized] = useState(false) - - const newPrinterFormUpdateValues = Form.useWatch([], newPrinterForm) - - useEffect(() => { - newPrinterForm - .validateFields({ - validateOnly: true - }) - .then(() => { - if (currentStep === 0) { - const moonraker = newPrinterForm.getFieldValue('moonraker') - setNextEnabled( - !!(moonraker?.protocol && moonraker?.host && moonraker?.port) - ) - } else if (currentStep === 1) { - const name = newPrinterForm.getFieldValue('name') - setNextEnabled(!!name) - } else { - setNextEnabled(true) - } - }) - .catch(() => setNextEnabled(false)) - }, [newPrinterForm, newPrinterFormUpdateValues, currentStep]) - - const summaryItems = [ - { - key: 'name', - label: 'Name', - children: newPrinterFormValues.name - }, - { - key: 'protocol', - label: 'Protocol', - children: newPrinterFormValues.moonraker?.protocol - }, - { - key: 'host', - label: 'Host', - children: newPrinterFormValues.moonraker?.host - }, - { - key: 'port', - label: 'Port', - children: newPrinterFormValues.moonraker?.port - } - ] - - useEffect(() => { - if (reset) { - newPrinterForm.resetFields() - } - }, [reset, newPrinterForm]) - - const handlePrinterSelect = (printer) => { - newPrinterForm.setFieldsValue({ - moonraker: { - protocol: printer.protocol, - host: printer.host, - port: printer.port - } - }) - setNewPrinterFormValues({ - ...newPrinterFormValues, - moonraker: { - protocol: printer.protocol, - host: printer.host, - port: printer.port - } - }) - } - - const handleHostnameEdit = (printer, newHostname) => { - if (newHostname && newHostname.trim() !== '') { - const updatedPrinter = { - ...printer, - host: newHostname.trim() - } - setDiscoveredPrinters((prev) => - prev.map((p) => (p.host === printer.host ? updatedPrinter : p)) - ) - setEditingHostname(null) - setHostnameInput('') - } - } - - const showEditHostnameDialog = (printer) => { - setEditingHostname(printer.host) - setHostnameInput(printer.host) - } - - const handleNewPrinter = async () => { - setNewPrinterLoading(true) - try { - await axios.post( - `${config.backendUrl}/printers`, - { - ...newPrinterFormValues - }, - { - headers: { - Accept: 'application/json' - }, - withCredentials: true - } - ) - - onOk() - } catch (error) { - messageApi.error('Error adding new printer: ' + error.message) - } finally { - setNewPrinterLoading(false) - } - } - - const notifyScanNetworkFound = useCallback( - (data) => { - const newPrinter = { - protocol: scanProtocol, - host: data.hostname || data.ip, - port: scanPort - } - notificationApi.info({ - message: 'Printer Found', - description: `Printer found: ${data.hostname || data.ip}!` - }) - setDiscoveredPrinters((prev) => [...prev, newPrinter]) - }, - [scanProtocol, scanPort, notificationApi] - ) - - const notifyScanNetworkComplete = useCallback( - (data) => { - setDiscovering(false) - notificationApi.destroy('network-scan') - if (data == false) { - messageApi.error('Error discovering printers!') - } else { - messageApi.success('Finished discovering printers!') - } - }, - [messageApi, notificationApi] - ) - - const notifyScanNetworkProgress = useCallback( - (data) => { - notificationApi.info({ - message: 'Scanning Network', - description: ( -
-
- Scanning IP: {data.currentIP} -
- -
- ), - duration: 0, - key: 'network-scan', - icon: null, - placement: 'bottomRight', - style: { - width: 360 - }, - className: 'network-scan-notification', - closeIcon: null, - onClose: () => {}, - btn: null - }) - }, - [notificationApi] - ) - - const discoverPrinters = useCallback(() => { - if (!discovering) { - setDiscovering(true) - setDiscoveredPrinters([]) - messageApi.info('Discovering printers...') - printServer.off('notify_scan_network_found') - printServer.off('notify_scan_network_progress') - printServer.off('notify_scan_network_complete') - - printServer.on('notify_scan_network_found', notifyScanNetworkFound) - printServer.on('notify_scan_network_progress', notifyScanNetworkProgress) - printServer.on('notify_scan_network_complete', notifyScanNetworkComplete) - - printServer.emit('bridge.scan_network.start', { - port: scanPort, - protocol: scanProtocol - }) - } - }, [ - discovering, - printServer, - scanPort, - scanProtocol, - messageApi, - notifyScanNetworkFound, - notifyScanNetworkProgress, - notifyScanNetworkComplete - ]) - - useEffect(() => { - setInitialized(true) - if (!initialized) { - discoverPrinters() - } - }, [initialized, discoverPrinters]) - - const stopDiscovery = () => { - if (discovering) { - setDiscovering(false) - notificationApi.destroy('network-scan') - messageApi.info('Stopping discovery...') - printServer.off('notify_scan_network_found') - printServer.off('notify_scan_network_progress') - printServer.off('notify_scan_network_complete') - printServer.emit('bridge.scan_network.stop', (response) => { - if (response == false) { - messageApi.error('Error stopping discovery!') - } - }) - } - } - - const handlePortChange = (value) => { - stopDiscovery() - setScanPort(value) - } - - const handleProtocolChange = (value) => { - stopDiscovery() - setScanProtocol(value) - } - - const steps = [ - { - title: 'Discovery', - key: 'discovery', - content: ( - <> - - {!showManualSetup ? ( - <> - - - - setHostnameInput(e.target.value)} - placeholder='Enter host' - autoFocus - /> - - - - ) : ( - <> - - - - - - - - - - - - - - - - )} - - - ) - }, - { - title: 'Required', - key: 'required', - content: ( - <> - - - - - ) - }, - { - title: 'Summary', - key: 'summary', - content: ( - - - - ) - } - ] - - return ( - - {contextHolder} - {notificationContextHolder} - -
- -
- - - - - - New Printer - -
- setNewPrinterFormValues((prevValues) => ({ - ...prevValues, - ...changedValues - })) - } - initialValues={initialNewPrinterForm} - > -
{steps[currentStep].content}
- - - - {currentStep < steps.length - 1 && ( - - )} - {currentStep === steps.length - 1 && ( - - )} - -
- - - ) +NewPrinter.propTypes = { + onOk: PropTypes.func.isRequired, + reset: PropTypes.bool } export default NewPrinter