122 lines
3.4 KiB
JavaScript
122 lines
3.4 KiB
JavaScript
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 NewObjectForm from '../../common/NewObjectForm'
|
|
import NewObjectButtons from '../../common/NewObjectButtons'
|
|
|
|
const { Title } = Typography
|
|
|
|
const NewDocumentTemplate = ({ onOk }) => {
|
|
const [currentStep, setCurrentStep] = useState(0)
|
|
|
|
const isMobile = useMediaQuery({ maxWidth: 768 })
|
|
|
|
return (
|
|
<NewObjectForm
|
|
type={'documentTemplate'}
|
|
defaultValues={{ active: true, global: false }}
|
|
>
|
|
{({ handleSubmit, submitLoading, objectData, formValid }) => {
|
|
const steps = [
|
|
{
|
|
title: 'Required',
|
|
key: 'required',
|
|
content: (
|
|
<ObjectInfo
|
|
type='documentTemplate'
|
|
column={1}
|
|
bordered={false}
|
|
isEditing={true}
|
|
required={true}
|
|
objectData={objectData}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
title: 'Optional',
|
|
key: 'optional',
|
|
content: (
|
|
<ObjectInfo
|
|
type='documentTemplate'
|
|
column={1}
|
|
bordered={false}
|
|
isEditing={true}
|
|
required={false}
|
|
visibleProperties={{ content: false, testObject: false }}
|
|
objectData={objectData}
|
|
/>
|
|
)
|
|
},
|
|
{
|
|
title: 'Summary',
|
|
key: 'summary',
|
|
content: (
|
|
<ObjectInfo
|
|
type='documentTemplate'
|
|
column={1}
|
|
bordered={false}
|
|
visibleProperties={{
|
|
_id: false,
|
|
createdAt: false,
|
|
updatedAt: false
|
|
}}
|
|
isEditing={false}
|
|
objectData={objectData}
|
|
/>
|
|
)
|
|
}
|
|
]
|
|
return (
|
|
<Flex gap='middle'>
|
|
{!isMobile && (
|
|
<div style={{ minWidth: '160px' }}>
|
|
<Steps
|
|
current={currentStep}
|
|
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 Template
|
|
</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={() => {
|
|
handleSubmit()
|
|
onOk()
|
|
}}
|
|
formValid={formValid}
|
|
submitLoading={submitLoading}
|
|
/>
|
|
</Flex>
|
|
</Flex>
|
|
)
|
|
}}
|
|
</NewObjectForm>
|
|
)
|
|
}
|
|
|
|
NewDocumentTemplate.propTypes = {
|
|
onOk: PropTypes.func.isRequired,
|
|
reset: PropTypes.bool
|
|
}
|
|
|
|
export default NewDocumentTemplate
|