Use wizard view for "new" windows.

This commit is contained in:
Tom Butcher 2025-12-03 00:15:34 +00:00
parent f2bdb973d1
commit 735826bdb9
4 changed files with 44 additions and 192 deletions

View File

@ -1,18 +1,9 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { useState } from 'react'
import { useMediaQuery } from 'react-responsive'
import { Typography, Flex, Steps, Divider } from 'antd'
import ObjectInfo from '../../common/ObjectInfo' import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm' import NewObjectForm from '../../common/NewObjectForm'
import NewObjectButtons from '../../common/NewObjectButtons' import WizardView from '../../common/WizardView'
const { Title } = Typography
const NewFilamentStock = ({ onOk, reset }) => { const NewFilamentStock = ({ onOk, reset }) => {
const [currentStep, setCurrentStep] = useState(0)
const isMobile = useMediaQuery({ maxWidth: 768 })
return ( return (
<NewObjectForm <NewObjectForm
type={'filamentStock'} type={'filamentStock'}
@ -30,7 +21,6 @@ const NewFilamentStock = ({ onOk, reset }) => {
column={1} column={1}
bordered={false} bordered={false}
isEditing={true} isEditing={true}
initial={true}
required={true} required={true}
objectData={objectData} objectData={objectData}
/> />
@ -56,43 +46,16 @@ const NewFilamentStock = ({ onOk, reset }) => {
} }
] ]
return ( return (
<Flex gap='middle'> <WizardView
{!isMobile && ( steps={steps}
<div style={{ minWidth: '160px' }}> loading={submitLoading}
<Steps formValid={formValid}
current={currentStep} title='New Filament Stock'
items={steps}
direction='vertical'
style={{ width: 'fit-content' }}
/>
</div>
)}
{!isMobile && (
<Divider type='vertical' style={{ height: 'unset' }} />
)}
<Flex vertical gap='middle' style={{ flexGrow: 1 }}>
<Title level={2} style={{ margin: 0 }}>
New Filament Stock
</Title>
<div style={{ minHeight: '260px', marginBottom: 8 }}>
{steps[currentStep].content}
</div>
<NewObjectButtons
currentStep={currentStep}
totalSteps={steps.length}
onPrevious={() => setCurrentStep((prev) => prev - 1)}
onNext={() => setCurrentStep((prev) => prev + 1)}
onSubmit={() => { onSubmit={() => {
handleSubmit() handleSubmit()
onOk() onOk()
}} }}
formValid={formValid}
submitLoading={submitLoading}
/> />
</Flex>
</Flex>
) )
}} }}
</NewObjectForm> </NewObjectForm>

View File

@ -1,18 +1,9 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { useState } from 'react'
import { useMediaQuery } from 'react-responsive'
import { Typography, Flex, Steps, Divider } from 'antd'
import ObjectInfo from '../../common/ObjectInfo' import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm' import NewObjectForm from '../../common/NewObjectForm'
import NewObjectButtons from '../../common/NewObjectButtons' import WizardView from '../../common/WizardView'
const { Title } = Typography
const NewPartStock = ({ onOk, reset }) => { const NewPartStock = ({ onOk, reset }) => {
const [currentStep, setCurrentStep] = useState(0)
const isMobile = useMediaQuery({ maxWidth: 768 })
return ( return (
<NewObjectForm <NewObjectForm
type={'partStock'} type={'partStock'}
@ -30,7 +21,6 @@ const NewPartStock = ({ onOk, reset }) => {
column={1} column={1}
bordered={false} bordered={false}
isEditing={true} isEditing={true}
initial={true}
required={true} required={true}
objectData={objectData} objectData={objectData}
/> />
@ -56,43 +46,16 @@ const NewPartStock = ({ onOk, reset }) => {
} }
] ]
return ( return (
<Flex gap='middle'> <WizardView
{!isMobile && ( steps={steps}
<div style={{ minWidth: '160px' }}> loading={submitLoading}
<Steps formValid={formValid}
current={currentStep} title='New Part Stock'
items={steps}
direction='vertical'
style={{ width: 'fit-content' }}
/>
</div>
)}
{!isMobile && (
<Divider type='vertical' style={{ height: 'unset' }} />
)}
<Flex vertical gap='middle' style={{ flexGrow: 1 }}>
<Title level={2} style={{ margin: 0 }}>
New Part Stock
</Title>
<div style={{ minHeight: '260px', marginBottom: 8 }}>
{steps[currentStep].content}
</div>
<NewObjectButtons
currentStep={currentStep}
totalSteps={steps.length}
onPrevious={() => setCurrentStep((prev) => prev - 1)}
onNext={() => setCurrentStep((prev) => prev + 1)}
onSubmit={() => { onSubmit={() => {
handleSubmit() handleSubmit()
onOk() onOk()
}} }}
formValid={formValid}
submitLoading={submitLoading}
/> />
</Flex>
</Flex>
) )
}} }}
</NewObjectForm> </NewObjectForm>

View File

@ -1,18 +1,9 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { useState } from 'react'
import { useMediaQuery } from 'react-responsive'
import { Typography, Flex, Steps, Divider } from 'antd'
import ObjectInfo from '../../common/ObjectInfo' import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm' import NewObjectForm from '../../common/NewObjectForm'
import NewObjectButtons from '../../common/NewObjectButtons' import WizardView from '../../common/WizardView'
const { Title } = Typography
const NewStockAudit = ({ onOk, reset }) => { const NewStockAudit = ({ onOk, reset }) => {
const [currentStep, setCurrentStep] = useState(0)
const isMobile = useMediaQuery({ maxWidth: 768 })
return ( return (
<NewObjectForm <NewObjectForm
type={'stockAudit'} type={'stockAudit'}
@ -30,7 +21,6 @@ const NewStockAudit = ({ onOk, reset }) => {
column={1} column={1}
bordered={false} bordered={false}
isEditing={true} isEditing={true}
initial={true}
required={true} required={true}
objectData={objectData} objectData={objectData}
/> />
@ -56,43 +46,16 @@ const NewStockAudit = ({ onOk, reset }) => {
} }
] ]
return ( return (
<Flex gap='middle'> <WizardView
{!isMobile && ( steps={steps}
<div style={{ minWidth: '160px' }}> loading={submitLoading}
<Steps formValid={formValid}
current={currentStep} title='New Stock Audit'
items={steps}
direction='vertical'
style={{ width: 'fit-content' }}
/>
</div>
)}
{!isMobile && (
<Divider type='vertical' style={{ height: 'unset' }} />
)}
<Flex vertical gap='middle' style={{ flexGrow: 1 }}>
<Title level={2} style={{ margin: 0 }}>
New Stock audit
</Title>
<div style={{ minHeight: '260px', marginBottom: 8 }}>
{steps[currentStep].content}
</div>
<NewObjectButtons
currentStep={currentStep}
totalSteps={steps.length}
onPrevious={() => setCurrentStep((prev) => prev - 1)}
onNext={() => setCurrentStep((prev) => prev + 1)}
onSubmit={() => { onSubmit={() => {
handleSubmit() handleSubmit()
onOk() onOk()
}} }}
formValid={formValid}
submitLoading={submitLoading}
/> />
</Flex>
</Flex>
) )
}} }}
</NewObjectForm> </NewObjectForm>

View File

@ -1,19 +1,9 @@
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { useState } from 'react'
import { useMediaQuery } from 'react-responsive'
import { Typography, Flex, Steps, Divider } from 'antd'
import ObjectInfo from '../../common/ObjectInfo' import ObjectInfo from '../../common/ObjectInfo'
import NewObjectForm from '../../common/NewObjectForm' import NewObjectForm from '../../common/NewObjectForm'
import NewObjectButtons from '../../common/NewObjectButtons' import WizardView from '../../common/WizardView'
const { Title } = Typography
const NewDocumentSize = ({ onOk }) => { const NewDocumentSize = ({ onOk }) => {
const [currentStep, setCurrentStep] = useState(0)
const isMobile = useMediaQuery({ maxWidth: 768 })
return ( return (
<NewObjectForm type={'documentSize'}> <NewObjectForm type={'documentSize'}>
{({ handleSubmit, submitLoading, objectData, formValid }) => { {({ handleSubmit, submitLoading, objectData, formValid }) => {
@ -52,43 +42,16 @@ const NewDocumentSize = ({ onOk }) => {
} }
] ]
return ( return (
<Flex gap='middle'> <WizardView
{!isMobile && ( steps={steps}
<div style={{ minWidth: '160px' }}> loading={submitLoading}
<Steps formValid={formValid}
current={currentStep} title='New Document Size'
items={steps}
direction='vertical'
style={{ width: 'fit-content' }}
/>
</div>
)}
{!isMobile && (
<Divider type='vertical' style={{ height: 'unset' }} />
)}
<Flex vertical gap='middle' style={{ flexGrow: 1 }}>
<Title level={2} style={{ margin: 0 }}>
New Document Size
</Title>
<div style={{ minHeight: '260px', marginBottom: 8 }}>
{steps[currentStep].content}
</div>
<NewObjectButtons
currentStep={currentStep}
totalSteps={steps.length}
onPrevious={() => setCurrentStep((prev) => prev - 1)}
onNext={() => setCurrentStep((prev) => prev + 1)}
onSubmit={() => { onSubmit={() => {
handleSubmit() handleSubmit()
onOk() onOk()
}} }}
formValid={formValid}
submitLoading={submitLoading}
/> />
</Flex>
</Flex>
) )
}} }}
</NewObjectForm> </NewObjectForm>