Tom Butcher
ca7ab55d1e
- Introduced new SVG icons for client and sales order. - Implemented SalesRoutes for navigation. - Created components for managing clients and sales orders, including overview, client info, and order details. - Added functionality for creating, editing, and canceling sales orders. - Integrated sales statistics and actions within the dashboard layout.
441 lines
14 KiB
JavaScript
441 lines
14 KiB
JavaScript
import { useRef, useState } from 'react'
|
|
import { useLocation } from 'react-router-dom'
|
|
import { Space, Flex, Card, Modal } from 'antd'
|
|
import { LoadingOutlined } from '@ant-design/icons'
|
|
import loglevel from 'loglevel'
|
|
import config from '../../../../config.js'
|
|
import useCollapseState from '../../hooks/useCollapseState.js'
|
|
import NotesPanel from '../../common/NotesPanel.jsx'
|
|
import InfoCollapse from '../../common/InfoCollapse.jsx'
|
|
import ObjectInfo from '../../common/ObjectInfo.jsx'
|
|
import ViewButton from '../../common/ViewButton.jsx'
|
|
import InfoCircleIcon from '../../../Icons/InfoCircleIcon.jsx'
|
|
import NoteIcon from '../../../Icons/NoteIcon.jsx'
|
|
import AuditLogIcon from '../../../Icons/AuditLogIcon.jsx'
|
|
import ObjectForm from '../../common/ObjectForm.jsx'
|
|
import EditButtons from '../../common/EditButtons.jsx'
|
|
import LockIndicator from '../../common/LockIndicator.jsx'
|
|
import ActionHandler from '../../common/ActionHandler.jsx'
|
|
import ObjectActions from '../../common/ObjectActions.jsx'
|
|
import ObjectTable from '../../common/ObjectTable.jsx'
|
|
import InfoCollapsePlaceholder from '../../common/InfoCollapsePlaceholder.jsx'
|
|
import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
|
|
import ScrollBox from '../../common/ScrollBox.jsx'
|
|
import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
|
|
import NewOrderItem from '../../Inventory/OrderItems/NewOrderItem.jsx'
|
|
import NewShipment from '../../Inventory/Shipments/NewShipment.jsx'
|
|
import PostSalesOrder from './PostSalesOrder.jsx'
|
|
import ConfirmSalesOrder from './ConfirmSalesOrder.jsx'
|
|
import CancelSalesOrder from './CancelSalesOrder.jsx'
|
|
import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
|
|
import InvoiceIcon from '../../../Icons/InvoiceIcon.jsx'
|
|
import StockEventIcon from '../../../Icons/StockEventIcon.jsx'
|
|
import { getModelByName } from '../../../../database/ObjectModels.js'
|
|
|
|
const log = loglevel.getLogger('SalesOrderInfo')
|
|
log.setLevel(config.logLevel)
|
|
|
|
const SalesOrderInfo = () => {
|
|
const location = useLocation()
|
|
const objectFormRef = useRef(null)
|
|
const orderItemsTableRef = useRef(null)
|
|
const shipmentsTableRef = useRef(null)
|
|
const actionHandlerRef = useRef(null)
|
|
const [newOrderItemOpen, setNewOrderItemOpen] = useState(false)
|
|
const [newShipmentOpen, setNewShipmentOpen] = useState(false)
|
|
const [postSalesOrderOpen, setPostSalesOrderOpen] = useState(false)
|
|
const [confirmSalesOrderOpen, setConfirmSalesOrderOpen] = useState(false)
|
|
const [cancelSalesOrderOpen, setCancelSalesOrderOpen] = useState(false)
|
|
const salesOrderId = new URLSearchParams(location.search).get('salesOrderId')
|
|
const [collapseState, updateCollapseState] = useCollapseState(
|
|
'SalesOrderInfo',
|
|
{
|
|
info: true,
|
|
notes: true,
|
|
auditLogs: true,
|
|
invoices: true,
|
|
stockEvents: true
|
|
}
|
|
)
|
|
|
|
const [objectFormState, setEditFormState] = useState({
|
|
isEditing: false,
|
|
editLoading: false,
|
|
formValid: false,
|
|
lock: null,
|
|
loading: false,
|
|
objectData: {}
|
|
})
|
|
|
|
const actions = {
|
|
reload: () => {
|
|
objectFormRef?.current?.handleFetchObject?.()
|
|
return true
|
|
},
|
|
edit: () => {
|
|
orderItemsTableRef?.current?.startEditing?.()
|
|
objectFormRef?.current?.startEditing?.()
|
|
return false
|
|
},
|
|
cancelEdit: () => {
|
|
orderItemsTableRef?.current?.cancelEditing?.()
|
|
objectFormRef?.current?.cancelEditing?.()
|
|
return true
|
|
},
|
|
finishEdit: () => {
|
|
orderItemsTableRef?.current?.handleUpdate?.()
|
|
objectFormRef?.current?.handleUpdate?.()
|
|
return true
|
|
},
|
|
delete: () => {
|
|
objectFormRef?.current?.handleDelete?.()
|
|
return true
|
|
},
|
|
newOrderItem: () => {
|
|
setNewOrderItemOpen(true)
|
|
return true
|
|
},
|
|
newShipment: () => {
|
|
setNewShipmentOpen(true)
|
|
return true
|
|
},
|
|
post: () => {
|
|
setPostSalesOrderOpen(true)
|
|
return true
|
|
},
|
|
confirm: () => {
|
|
setConfirmSalesOrderOpen(true)
|
|
return true
|
|
},
|
|
cancel: () => {
|
|
setCancelSalesOrderOpen(true)
|
|
return true
|
|
}
|
|
}
|
|
|
|
const editDisabled = getModelByName('salesOrder')
|
|
.actions.find((action) => action.name === 'edit')
|
|
.disabled(objectFormState.objectData)
|
|
|
|
return (
|
|
<>
|
|
<Flex
|
|
gap='large'
|
|
vertical='true'
|
|
style={{
|
|
maxHeight: '100%',
|
|
minHeight: 0
|
|
}}
|
|
>
|
|
<Flex justify={'space-between'}>
|
|
<Space size='middle'>
|
|
<Space size='small'>
|
|
<ObjectActions
|
|
type='salesOrder'
|
|
id={salesOrderId}
|
|
disabled={objectFormState.loading}
|
|
objectData={objectFormState.objectData}
|
|
/>
|
|
<ViewButton
|
|
disabled={objectFormState.loading}
|
|
items={[
|
|
{ key: 'info', label: 'Sales Order Information' },
|
|
{ key: 'orderItems', label: 'Order Items' },
|
|
{ key: 'shipments', label: 'Shipments' },
|
|
{ key: 'invoices', label: 'Invoices' },
|
|
{ key: 'stockEvents', label: 'Stock Events' },
|
|
{ key: 'notes', label: 'Notes' },
|
|
{ key: 'auditLogs', label: 'Audit Logs' }
|
|
]}
|
|
visibleState={collapseState}
|
|
updateVisibleState={updateCollapseState}
|
|
/>
|
|
<DocumentPrintButton
|
|
type='salesOrder'
|
|
objectData={objectFormState.objectData}
|
|
disabled={objectFormState.loading}
|
|
/>
|
|
</Space>
|
|
<LockIndicator lock={objectFormState.lock} />
|
|
</Space>
|
|
<Space>
|
|
<EditButtons
|
|
isEditing={objectFormState.isEditing}
|
|
handleUpdate={() => {
|
|
actionHandlerRef.current.callAction('finishEdit')
|
|
}}
|
|
cancelEditing={() => {
|
|
actionHandlerRef.current.callAction('cancelEdit')
|
|
}}
|
|
startEditing={() => {
|
|
actionHandlerRef.current.callAction('edit')
|
|
}}
|
|
editLoading={objectFormState.editLoading}
|
|
formValid={objectFormState.formValid}
|
|
disabled={
|
|
objectFormState.lock?.locked ||
|
|
objectFormState.loading ||
|
|
editDisabled
|
|
}
|
|
loading={objectFormState.editLoading}
|
|
/>
|
|
</Space>
|
|
</Flex>
|
|
|
|
<ScrollBox>
|
|
<Flex vertical gap={'large'}>
|
|
<ActionHandler
|
|
actions={actions}
|
|
loading={objectFormState.loading}
|
|
ref={actionHandlerRef}
|
|
>
|
|
<ObjectForm
|
|
id={salesOrderId}
|
|
type='salesOrder'
|
|
style={{ height: '100%' }}
|
|
ref={objectFormRef}
|
|
onStateChange={(state) => {
|
|
setEditFormState((prev) => ({ ...prev, ...state }))
|
|
}}
|
|
>
|
|
{({ loading, isEditing, objectData }) => (
|
|
<Flex vertical gap={'large'}>
|
|
<InfoCollapse
|
|
title='Sales Order Information'
|
|
icon={<InfoCircleIcon />}
|
|
active={collapseState.info}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('info', expanded)
|
|
}
|
|
collapseKey='info'
|
|
>
|
|
<ObjectInfo
|
|
loading={loading}
|
|
indicator={<LoadingOutlined />}
|
|
isEditing={isEditing}
|
|
type='salesOrder'
|
|
labelWidth='225px'
|
|
objectData={objectData}
|
|
visibleProperties={{
|
|
items: false
|
|
}}
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Sales Order Items'
|
|
icon={<OrderItemsIcon />}
|
|
active={collapseState.orderItems}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('orderItems', expanded)
|
|
}
|
|
collapseKey='orderItems'
|
|
>
|
|
<ObjectTable
|
|
type='orderItem'
|
|
masterFilter={{
|
|
'order._id': salesOrderId,
|
|
orderType: 'salesOrder'
|
|
}}
|
|
visibleColumns={{ order: false }}
|
|
ref={orderItemsTableRef}
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Shipments'
|
|
icon={<ShipmentIcon />}
|
|
active={collapseState.shipments}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('shipments', expanded)
|
|
}
|
|
collapseKey='shipments'
|
|
>
|
|
<ObjectTable
|
|
type='shipment'
|
|
masterFilter={{
|
|
'order._id': salesOrderId,
|
|
orderType: 'salesOrder'
|
|
}}
|
|
visibleColumns={{ order: false }}
|
|
ref={shipmentsTableRef}
|
|
/>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Invoices'
|
|
icon={<InvoiceIcon />}
|
|
active={collapseState.invoices}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('invoices', expanded)
|
|
}
|
|
collapseKey='invoices'
|
|
>
|
|
{objectFormState.loading ? (
|
|
<InfoCollapsePlaceholder />
|
|
) : (
|
|
<ObjectTable
|
|
type='invoice'
|
|
masterFilter={{
|
|
'order._id': salesOrderId,
|
|
orderType: 'salesOrder'
|
|
}}
|
|
visibleColumns={{ order: false }}
|
|
/>
|
|
)}
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Stock Events'
|
|
icon={<StockEventIcon />}
|
|
active={collapseState.stockEvents}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('stockEvents', expanded)
|
|
}
|
|
collapseKey='stockEvents'
|
|
>
|
|
{objectFormState.loading ? (
|
|
<InfoCollapsePlaceholder />
|
|
) : (
|
|
<ObjectTable
|
|
type='stockEvent'
|
|
masterFilter={{
|
|
'owner._id': salesOrderId
|
|
}}
|
|
/>
|
|
)}
|
|
</InfoCollapse>
|
|
</Flex>
|
|
)}
|
|
</ObjectForm>
|
|
</ActionHandler>
|
|
<InfoCollapse
|
|
title='Notes'
|
|
icon={<NoteIcon />}
|
|
active={collapseState.notes}
|
|
onToggle={(expanded) => updateCollapseState('notes', expanded)}
|
|
collapseKey='notes'
|
|
>
|
|
<Card>
|
|
<NotesPanel _id={salesOrderId} type='salesOrder' />
|
|
</Card>
|
|
</InfoCollapse>
|
|
<InfoCollapse
|
|
title='Audit Logs'
|
|
icon={<AuditLogIcon />}
|
|
active={collapseState.auditLogs}
|
|
onToggle={(expanded) =>
|
|
updateCollapseState('auditLogs', expanded)
|
|
}
|
|
collapseKey='auditLogs'
|
|
>
|
|
{objectFormState.loading ? (
|
|
<InfoCollapsePlaceholder />
|
|
) : (
|
|
<ObjectTable
|
|
type='auditLog'
|
|
masterFilter={{ 'parent._id': salesOrderId }}
|
|
visibleColumns={{ _id: false, 'parent._id': false }}
|
|
/>
|
|
)}
|
|
</InfoCollapse>
|
|
</Flex>
|
|
</ScrollBox>
|
|
</Flex>
|
|
<Modal
|
|
open={newOrderItemOpen}
|
|
onCancel={() => {
|
|
setNewOrderItemOpen(false)
|
|
}}
|
|
width={800}
|
|
footer={null}
|
|
destroyOnHidden={true}
|
|
>
|
|
<NewOrderItem
|
|
onOk={() => {
|
|
setNewOrderItemOpen(false)
|
|
}}
|
|
reset={newOrderItemOpen}
|
|
defaultValues={{
|
|
order: { _id: salesOrderId },
|
|
orderType: 'salesOrder',
|
|
syncAmount: 'itemCost'
|
|
}}
|
|
/>
|
|
</Modal>
|
|
<Modal
|
|
open={newShipmentOpen}
|
|
onCancel={() => {
|
|
setNewShipmentOpen(false)
|
|
}}
|
|
width={800}
|
|
footer={null}
|
|
destroyOnHidden={true}
|
|
>
|
|
<NewShipment
|
|
onOk={() => {
|
|
setNewShipmentOpen(false)
|
|
}}
|
|
reset={newShipmentOpen}
|
|
defaultValues={{
|
|
orderType: 'salesOrder',
|
|
order: { _id: salesOrderId }
|
|
}}
|
|
/>
|
|
</Modal>
|
|
<Modal
|
|
open={postSalesOrderOpen}
|
|
onCancel={() => {
|
|
setPostSalesOrderOpen(false)
|
|
}}
|
|
width={500}
|
|
footer={null}
|
|
destroyOnHidden={true}
|
|
centered={true}
|
|
>
|
|
<PostSalesOrder
|
|
onOk={() => {
|
|
setPostSalesOrderOpen(false)
|
|
actions.reload()
|
|
}}
|
|
objectData={objectFormState.objectData}
|
|
/>
|
|
</Modal>
|
|
<Modal
|
|
open={confirmSalesOrderOpen}
|
|
onCancel={() => {
|
|
setConfirmSalesOrderOpen(false)
|
|
}}
|
|
width={515}
|
|
footer={null}
|
|
destroyOnHidden={true}
|
|
centered={true}
|
|
>
|
|
<ConfirmSalesOrder
|
|
onOk={() => {
|
|
setConfirmSalesOrderOpen(false)
|
|
actions.reload()
|
|
}}
|
|
objectData={objectFormState.objectData}
|
|
/>
|
|
</Modal>
|
|
<Modal
|
|
open={cancelSalesOrderOpen}
|
|
onCancel={() => {
|
|
setCancelSalesOrderOpen(false)
|
|
}}
|
|
width={515}
|
|
footer={null}
|
|
destroyOnHidden={true}
|
|
centered={true}
|
|
>
|
|
<CancelSalesOrder
|
|
onOk={() => {
|
|
setCancelSalesOrderOpen(false)
|
|
actions.reload()
|
|
}}
|
|
objectData={objectFormState.objectData}
|
|
/>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SalesOrderInfo
|