Enhance Purchase Order management with new actions and UI updates
- Updated NewPurchaseOrder component to set default state to 'draft'. - Removed unnecessary item property display and added new properties for total amounts and shipping details. - Introduced new PurchaseOrderInfo component to manage order items and shipments, including modals for creating new items and shipments, posting, acknowledging, and canceling orders. - Enhanced PurchaseOrder model with new actions for editing, canceling edits, finishing edits, and deleting orders, along with updated visibility and disabled states based on order status. - Added new properties to the PurchaseOrder model for better tracking of order states and financial details.
This commit is contained in:
parent
62a494509a
commit
4a605ddc09
@ -2,15 +2,15 @@ import PropTypes from 'prop-types'
|
||||
import ObjectInfo from '../../common/ObjectInfo'
|
||||
import NewObjectForm from '../../common/NewObjectForm'
|
||||
import WizardView from '../../common/WizardView'
|
||||
import { getModelProperty } from '../../../../database/ObjectModels.js'
|
||||
import ObjectProperty from '../../common/ObjectProperty.jsx'
|
||||
|
||||
const NewPurchaseOrder = ({ onOk, reset, defaultValues }) => {
|
||||
return (
|
||||
<NewObjectForm
|
||||
type={'purchaseOrder'}
|
||||
reset={reset}
|
||||
defaultValues={{ state: { type: 'new' }, ...defaultValues }}
|
||||
defaultValues={{
|
||||
state: { type: 'draft' },
|
||||
...defaultValues
|
||||
}}
|
||||
>
|
||||
{({ handleSubmit, submitLoading, objectData, formValid }) => {
|
||||
const steps = [
|
||||
@ -26,24 +26,13 @@ const NewPurchaseOrder = ({ onOk, reset, defaultValues }) => {
|
||||
required={true}
|
||||
objectData={objectData}
|
||||
visibleProperties={{
|
||||
_reference: false,
|
||||
items: false,
|
||||
cost: false
|
||||
}}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Items',
|
||||
key: 'items',
|
||||
content: (
|
||||
<ObjectProperty
|
||||
{...getModelProperty('purchaseOrder', 'items')}
|
||||
isEditing={true}
|
||||
objectData={objectData}
|
||||
loading={submitLoading}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: 'Summary',
|
||||
key: 'summary',
|
||||
@ -56,7 +45,15 @@ const NewPurchaseOrder = ({ onOk, reset, defaultValues }) => {
|
||||
_id: false,
|
||||
createdAt: false,
|
||||
updatedAt: false,
|
||||
items: false
|
||||
_reference: false,
|
||||
totalAmount: false,
|
||||
totalAmountWithTax: false,
|
||||
totalTaxAmount: false,
|
||||
postedAt: false,
|
||||
acknowledgedAt: false,
|
||||
shippingAmount: false,
|
||||
shippingAmountWithTax: false,
|
||||
grandTotalAmount: false
|
||||
}}
|
||||
isEditing={false}
|
||||
objectData={objectData}
|
||||
|
||||
@ -23,6 +23,12 @@ import DocumentPrintButton from '../../common/DocumentPrintButton.jsx'
|
||||
import ScrollBox from '../../common/ScrollBox.jsx'
|
||||
import OrderItemsIcon from '../../../Icons/OrderItemIcon.jsx'
|
||||
import NewOrderItem from '../OrderItems/NewOrderItem.jsx'
|
||||
import NewShipment from '../Shipments/NewShipment.jsx'
|
||||
import PostPurchaseOrder from './PostPurchaseOrder.jsx'
|
||||
import AcknowledgePurchaseOrder from './AcknowledgePurchaseOrder.jsx'
|
||||
import CancelPurchaseOrder from './CancelPurchaseOrder.jsx'
|
||||
import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
|
||||
import { getModelByName } from '../../../../database/ObjectModels.js'
|
||||
|
||||
const log = loglevel.getLogger('PurchaseOrderInfo')
|
||||
log.setLevel(config.logLevel)
|
||||
@ -30,8 +36,15 @@ log.setLevel(config.logLevel)
|
||||
const PurchaseOrderInfo = () => {
|
||||
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 [postPurchaseOrderOpen, setPostPurchaseOrderOpen] = useState(false)
|
||||
const [acknowledgePurchaseOrderOpen, setAcknowledgePurchaseOrderOpen] =
|
||||
useState(false)
|
||||
const [cancelPurchaseOrderOpen, setCancelPurchaseOrderOpen] = useState(false)
|
||||
const purchaseOrderId = new URLSearchParams(location.search).get(
|
||||
'purchaseOrderId'
|
||||
)
|
||||
@ -59,14 +72,17 @@ const PurchaseOrderInfo = () => {
|
||||
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
|
||||
},
|
||||
@ -77,9 +93,29 @@ const PurchaseOrderInfo = () => {
|
||||
newOrderItem: () => {
|
||||
setNewOrderItemOpen(true)
|
||||
return true
|
||||
},
|
||||
newShipment: () => {
|
||||
setNewShipmentOpen(true)
|
||||
return true
|
||||
},
|
||||
post: () => {
|
||||
setPostPurchaseOrderOpen(true)
|
||||
return true
|
||||
},
|
||||
acknowledge: () => {
|
||||
setAcknowledgePurchaseOrderOpen(true)
|
||||
return true
|
||||
},
|
||||
cancel: () => {
|
||||
setCancelPurchaseOrderOpen(true)
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
const editDisabled = getModelByName('purchaseOrder')
|
||||
.actions.find((action) => action.name === 'edit')
|
||||
.disabled(objectFormState.objectData)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
@ -103,6 +139,8 @@ const PurchaseOrderInfo = () => {
|
||||
disabled={objectFormState.loading}
|
||||
items={[
|
||||
{ key: 'info', label: 'Purchase Order Information' },
|
||||
{ key: 'orderItems', label: 'Order Items' },
|
||||
{ key: 'shipments', label: 'Shipments' },
|
||||
{ key: 'notes', label: 'Notes' },
|
||||
{ key: 'auditLogs', label: 'Audit Logs' }
|
||||
]}
|
||||
@ -131,7 +169,11 @@ const PurchaseOrderInfo = () => {
|
||||
}}
|
||||
editLoading={objectFormState.editLoading}
|
||||
formValid={objectFormState.formValid}
|
||||
disabled={objectFormState.lock?.locked || objectFormState.loading}
|
||||
disabled={
|
||||
objectFormState.lock?.locked ||
|
||||
objectFormState.loading ||
|
||||
editDisabled
|
||||
}
|
||||
loading={objectFormState.editLoading}
|
||||
/>
|
||||
</Space>
|
||||
@ -169,6 +211,7 @@ const PurchaseOrderInfo = () => {
|
||||
indicator={<LoadingOutlined />}
|
||||
isEditing={isEditing}
|
||||
type='purchaseOrder'
|
||||
labelWidth='225px'
|
||||
objectData={objectData}
|
||||
visibleProperties={{
|
||||
items: false
|
||||
@ -178,16 +221,39 @@ const PurchaseOrderInfo = () => {
|
||||
<InfoCollapse
|
||||
title='Purchase Order Items'
|
||||
icon={<OrderItemsIcon />}
|
||||
active={collapseState.info}
|
||||
active={collapseState.orderItems}
|
||||
onToggle={(expanded) =>
|
||||
updateCollapseState('info', expanded)
|
||||
updateCollapseState('orderItems', expanded)
|
||||
}
|
||||
collapseKey='info'
|
||||
collapseKey='orderItems'
|
||||
>
|
||||
<ObjectTable
|
||||
type='orderItem'
|
||||
masterFilter={{ 'order._id': purchaseOrderId }}
|
||||
masterFilter={{
|
||||
'order._id': purchaseOrderId,
|
||||
orderType: 'purchaseOrder'
|
||||
}}
|
||||
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': purchaseOrderId,
|
||||
orderType: 'purchaseOrder'
|
||||
}}
|
||||
visibleColumns={{ order: false }}
|
||||
ref={shipmentsTableRef}
|
||||
/>
|
||||
</InfoCollapse>
|
||||
</Flex>
|
||||
@ -248,6 +314,80 @@ const PurchaseOrderInfo = () => {
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={newShipmentOpen}
|
||||
onCancel={() => {
|
||||
setNewShipmentOpen(false)
|
||||
}}
|
||||
width={800}
|
||||
footer={null}
|
||||
destroyOnHidden={true}
|
||||
>
|
||||
<NewShipment
|
||||
onOk={() => {
|
||||
setNewShipmentOpen(false)
|
||||
}}
|
||||
reset={newShipmentOpen}
|
||||
defaultValues={{
|
||||
orderType: 'purchaseOrder',
|
||||
order: { _id: purchaseOrderId }
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={postPurchaseOrderOpen}
|
||||
onCancel={() => {
|
||||
setPostPurchaseOrderOpen(false)
|
||||
}}
|
||||
width={500}
|
||||
footer={null}
|
||||
destroyOnHidden={true}
|
||||
centered={true}
|
||||
>
|
||||
<PostPurchaseOrder
|
||||
onOk={() => {
|
||||
setPostPurchaseOrderOpen(false)
|
||||
actions.reload()
|
||||
}}
|
||||
objectData={objectFormState.objectData}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={acknowledgePurchaseOrderOpen}
|
||||
onCancel={() => {
|
||||
setAcknowledgePurchaseOrderOpen(false)
|
||||
}}
|
||||
width={515}
|
||||
footer={null}
|
||||
destroyOnHidden={true}
|
||||
centered={true}
|
||||
>
|
||||
<AcknowledgePurchaseOrder
|
||||
onOk={() => {
|
||||
setAcknowledgePurchaseOrderOpen(false)
|
||||
actions.reload()
|
||||
}}
|
||||
objectData={objectFormState.objectData}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={cancelPurchaseOrderOpen}
|
||||
onCancel={() => {
|
||||
setCancelPurchaseOrderOpen(false)
|
||||
}}
|
||||
width={515}
|
||||
footer={null}
|
||||
destroyOnHidden={true}
|
||||
centered={true}
|
||||
>
|
||||
<CancelPurchaseOrder
|
||||
onOk={() => {
|
||||
setCancelPurchaseOrderOpen(false)
|
||||
actions.reload()
|
||||
}}
|
||||
objectData={objectFormState.objectData}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -0,0 +1,362 @@
|
||||
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 '../OrderItems/NewOrderItem.jsx'
|
||||
import NewShipment from './NewShipment.jsx'
|
||||
import PostPurchaseOrder from '../PurchaseOrders/PostPurchaseOrder.jsx'
|
||||
import AcknowledgePurchaseOrder from '../PurchaseOrders/AcknowledgePurchaseOrder.jsx'
|
||||
import ShipmentIcon from '../../../Icons/ShipmentIcon.jsx'
|
||||
|
||||
const log = loglevel.getLogger('PurchaseOrderInfo')
|
||||
log.setLevel(config.logLevel)
|
||||
|
||||
const PurchaseOrderInfo = () => {
|
||||
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 [postPurchaseOrderOpen, setPostPurchaseOrderOpen] = useState(false)
|
||||
const [acknowledgePurchaseOrderOpen, setAcknowledgePurchaseOrderOpen] =
|
||||
useState(false)
|
||||
const purchaseOrderId = new URLSearchParams(location.search).get(
|
||||
'purchaseOrderId'
|
||||
)
|
||||
const [collapseState, updateCollapseState] = useCollapseState(
|
||||
'PurchaseOrderInfo',
|
||||
{
|
||||
info: true,
|
||||
notes: true,
|
||||
auditLogs: 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: () => {
|
||||
setPostPurchaseOrderOpen(true)
|
||||
return true
|
||||
},
|
||||
acknowledge: () => {
|
||||
setAcknowledgePurchaseOrderOpen(true)
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex
|
||||
gap='large'
|
||||
vertical='true'
|
||||
style={{
|
||||
maxHeight: '100%',
|
||||
minHeight: 0
|
||||
}}
|
||||
>
|
||||
<Flex justify={'space-between'}>
|
||||
<Space size='middle'>
|
||||
<Space size='small'>
|
||||
<ObjectActions
|
||||
type='purchaseOrder'
|
||||
id={purchaseOrderId}
|
||||
disabled={objectFormState.loading}
|
||||
objectData={objectFormState.objectData}
|
||||
/>
|
||||
<ViewButton
|
||||
disabled={objectFormState.loading}
|
||||
items={[
|
||||
{ key: 'info', label: 'Purchase Order Information' },
|
||||
{ key: 'orderItems', label: 'Order Items' },
|
||||
{ key: 'shipments', label: 'Shipments' },
|
||||
{ key: 'notes', label: 'Notes' },
|
||||
{ key: 'auditLogs', label: 'Audit Logs' }
|
||||
]}
|
||||
visibleState={collapseState}
|
||||
updateVisibleState={updateCollapseState}
|
||||
/>
|
||||
<DocumentPrintButton
|
||||
type='purchaseOrder'
|
||||
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}
|
||||
loading={objectFormState.editLoading}
|
||||
/>
|
||||
</Space>
|
||||
</Flex>
|
||||
|
||||
<ScrollBox>
|
||||
<Flex vertical gap={'large'}>
|
||||
<ActionHandler
|
||||
actions={actions}
|
||||
loading={objectFormState.loading}
|
||||
ref={actionHandlerRef}
|
||||
>
|
||||
<ObjectForm
|
||||
id={purchaseOrderId}
|
||||
type='purchaseOrder'
|
||||
style={{ height: '100%' }}
|
||||
ref={objectFormRef}
|
||||
onStateChange={(state) => {
|
||||
setEditFormState((prev) => ({ ...prev, ...state }))
|
||||
}}
|
||||
>
|
||||
{({ loading, isEditing, objectData }) => (
|
||||
<Flex vertical gap={'large'}>
|
||||
<InfoCollapse
|
||||
title='Purchase Order Information'
|
||||
icon={<InfoCircleIcon />}
|
||||
active={collapseState.info}
|
||||
onToggle={(expanded) =>
|
||||
updateCollapseState('info', expanded)
|
||||
}
|
||||
collapseKey='info'
|
||||
>
|
||||
<ObjectInfo
|
||||
loading={loading}
|
||||
indicator={<LoadingOutlined />}
|
||||
isEditing={isEditing}
|
||||
type='purchaseOrder'
|
||||
labelWidth='225px'
|
||||
objectData={objectData}
|
||||
visibleProperties={{
|
||||
items: false
|
||||
}}
|
||||
/>
|
||||
</InfoCollapse>
|
||||
<InfoCollapse
|
||||
title='Purchase Order Items'
|
||||
icon={<OrderItemsIcon />}
|
||||
active={collapseState.orderItems}
|
||||
onToggle={(expanded) =>
|
||||
updateCollapseState('orderItems', expanded)
|
||||
}
|
||||
collapseKey='orderItems'
|
||||
>
|
||||
<ObjectTable
|
||||
type='orderItem'
|
||||
masterFilter={{
|
||||
'order._id': purchaseOrderId,
|
||||
orderType: 'purchaseOrder'
|
||||
}}
|
||||
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': purchaseOrderId,
|
||||
orderType: 'purchaseOrder'
|
||||
}}
|
||||
visibleColumns={{ order: false }}
|
||||
ref={shipmentsTableRef}
|
||||
/>
|
||||
</InfoCollapse>
|
||||
</Flex>
|
||||
)}
|
||||
</ObjectForm>
|
||||
</ActionHandler>
|
||||
<InfoCollapse
|
||||
title='Notes'
|
||||
icon={<NoteIcon />}
|
||||
active={collapseState.notes}
|
||||
onToggle={(expanded) => updateCollapseState('notes', expanded)}
|
||||
collapseKey='notes'
|
||||
>
|
||||
<Card>
|
||||
<NotesPanel _id={purchaseOrderId} type='purchaseOrder' />
|
||||
</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': purchaseOrderId }}
|
||||
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: purchaseOrderId },
|
||||
orderType: 'purchaseOrder',
|
||||
syncAmount: 'itemCost'
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={newShipmentOpen}
|
||||
onCancel={() => {
|
||||
setNewShipmentOpen(false)
|
||||
}}
|
||||
width={800}
|
||||
footer={null}
|
||||
destroyOnHidden={true}
|
||||
>
|
||||
<NewShipment
|
||||
onOk={() => {
|
||||
setNewShipmentOpen(false)
|
||||
}}
|
||||
reset={newShipmentOpen}
|
||||
defaultValues={{
|
||||
orderType: 'purchaseOrder',
|
||||
order: { _id: purchaseOrderId }
|
||||
}}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={postPurchaseOrderOpen}
|
||||
onCancel={() => {
|
||||
setPostPurchaseOrderOpen(false)
|
||||
}}
|
||||
width={500}
|
||||
footer={null}
|
||||
destroyOnHidden={true}
|
||||
centered={true}
|
||||
>
|
||||
<PostPurchaseOrder
|
||||
onOk={() => {
|
||||
setPostPurchaseOrderOpen(false)
|
||||
actions.reload()
|
||||
}}
|
||||
objectData={objectFormState.objectData}
|
||||
/>
|
||||
</Modal>
|
||||
<Modal
|
||||
open={acknowledgePurchaseOrderOpen}
|
||||
onCancel={() => {
|
||||
setAcknowledgePurchaseOrderOpen(false)
|
||||
}}
|
||||
width={515}
|
||||
footer={null}
|
||||
destroyOnHidden={true}
|
||||
centered={true}
|
||||
>
|
||||
<AcknowledgePurchaseOrder
|
||||
onOk={() => {
|
||||
setAcknowledgePurchaseOrderOpen(false)
|
||||
actions.reload()
|
||||
}}
|
||||
objectData={objectFormState.objectData}
|
||||
/>
|
||||
</Modal>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default PurchaseOrderInfo
|
||||
@ -1,6 +1,10 @@
|
||||
import PurchaseOrderIcon from '../../components/Icons/PurchaseOrderIcon'
|
||||
import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
|
||||
import PlusIcon from '../../components/Icons/PlusIcon'
|
||||
import CheckIcon from '../../components/Icons/CheckIcon'
|
||||
import EditIcon from '../../components/Icons/EditIcon'
|
||||
import XMarkIcon from '../../components/Icons/XMarkIcon'
|
||||
import BinIcon from '../../components/Icons/BinIcon'
|
||||
|
||||
export const PurchaseOrder = {
|
||||
name: 'purchaseOrder',
|
||||
@ -17,19 +21,168 @@ export const PurchaseOrder = {
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}`
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
label: 'Edit',
|
||||
type: 'button',
|
||||
icon: EditIcon,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=edit`,
|
||||
visible: (objectData) => {
|
||||
return !(objectData?._isEditing && objectData?._isEditing == true)
|
||||
},
|
||||
disabled: (objectData) => {
|
||||
return objectData?.state?.type != 'draft'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'cancelEdit',
|
||||
label: 'Cancel Edit',
|
||||
type: 'button',
|
||||
icon: XMarkIcon,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=cancelEdit`,
|
||||
visible: (objectData) => {
|
||||
return objectData?._isEditing && objectData?._isEditing == true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'finishEdit',
|
||||
label: 'Finish Edit',
|
||||
type: 'button',
|
||||
icon: CheckIcon,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=finishEdit`,
|
||||
visible: (objectData) => {
|
||||
return objectData?._isEditing && objectData?._isEditing == true
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'delete',
|
||||
label: 'Delete',
|
||||
type: 'button',
|
||||
icon: BinIcon,
|
||||
danger: true,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=delete`,
|
||||
visible: (objectData) => {
|
||||
return !(objectData?._isEditing && objectData?._isEditing == true)
|
||||
},
|
||||
disabled: (objectData) => {
|
||||
return objectData?.state?.type != 'draft'
|
||||
}
|
||||
},
|
||||
{ type: 'divider' },
|
||||
{
|
||||
name: 'New Order Item',
|
||||
label: 'New Order Item',
|
||||
type: 'button',
|
||||
icon: PlusIcon,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=newOrderItem`
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=newOrderItem`,
|
||||
disabled: (objectData) => {
|
||||
return objectData?.state?.type != 'draft'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'New Shipment',
|
||||
label: 'New Shipment',
|
||||
type: 'button',
|
||||
icon: PlusIcon,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=newShipment`,
|
||||
disabled: (objectData) => {
|
||||
return objectData?.state?.type != 'draft'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'New Invoice',
|
||||
label: 'New Invoice',
|
||||
type: 'button',
|
||||
icon: PlusIcon,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=newInvoice`,
|
||||
disabled: (objectData) => {
|
||||
return objectData?.state?.type != 'received'
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
name: 'post',
|
||||
label: 'Post',
|
||||
type: 'button',
|
||||
icon: CheckIcon,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=post`,
|
||||
visible: (objectData) => {
|
||||
return objectData?.state?.type == 'draft'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'acknowledge',
|
||||
label: 'Acknowledge',
|
||||
type: 'button',
|
||||
icon: CheckIcon,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=acknowledge`,
|
||||
visible: (objectData) => {
|
||||
return objectData?.state?.type == 'sent'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'complete',
|
||||
label: 'Complete',
|
||||
type: 'button',
|
||||
icon: CheckIcon,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/shipments/info?shipmentId=${_id}&action=complete`,
|
||||
disabled: (objectData) => {
|
||||
return objectData?.state?.type != 'received'
|
||||
},
|
||||
visible: (objectData) => {
|
||||
return objectData?.state?.type == 'received'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'cancel',
|
||||
label: 'Cancel',
|
||||
type: 'button',
|
||||
icon: XMarkIcon,
|
||||
danger: true,
|
||||
url: (_id) =>
|
||||
`/dashboard/inventory/purchaseorders/info?purchaseOrderId=${_id}&action=cancel`,
|
||||
disabled: (objectData) => {
|
||||
return objectData?.state?.type == 'cancelled'
|
||||
},
|
||||
visible: (objectData) => {
|
||||
return (
|
||||
objectData?.state?.type != 'draft' &&
|
||||
objectData?.state?.type != 'completed' &&
|
||||
objectData?.state?.type != 'received'
|
||||
)
|
||||
}
|
||||
}
|
||||
],
|
||||
group: ['vendor'],
|
||||
filters: ['vendor'],
|
||||
sorters: ['createdAt', 'state', 'updatedAt'],
|
||||
columns: ['_id', 'createdAt', 'state', 'updatedAt', 'vendor'],
|
||||
columns: [
|
||||
'_id',
|
||||
'_reference',
|
||||
'state',
|
||||
'vendor',
|
||||
'totalAmount',
|
||||
'totalAmountWithTax',
|
||||
'totalTaxAmount',
|
||||
'shippingAmount',
|
||||
'shippingAmountWithTax',
|
||||
'grandTotalAmount',
|
||||
'createdAt',
|
||||
'updatedAt',
|
||||
'vendor'
|
||||
],
|
||||
properties: [
|
||||
{
|
||||
name: '_id',
|
||||
@ -62,6 +215,7 @@ export const PurchaseOrder = {
|
||||
readOnly: true
|
||||
},
|
||||
{ name: 'state', label: 'State', type: 'state', readOnly: true },
|
||||
{ name: 'postedAt', label: 'Posted At', type: 'dateTime', readOnly: true },
|
||||
{
|
||||
name: 'vendor',
|
||||
label: 'Vendor',
|
||||
@ -71,17 +225,9 @@ export const PurchaseOrder = {
|
||||
showHyperlink: true
|
||||
},
|
||||
{
|
||||
name: 'totalAmount',
|
||||
label: 'Total Amount',
|
||||
type: 'number',
|
||||
prefix: '£',
|
||||
readOnly: true
|
||||
},
|
||||
{
|
||||
name: 'totalAmountWithTax',
|
||||
label: 'Total Amount w/ Tax',
|
||||
type: 'number',
|
||||
prefix: '£',
|
||||
name: 'acknowledgedAt',
|
||||
label: 'Acknowledged At',
|
||||
type: 'dateTime',
|
||||
readOnly: true
|
||||
},
|
||||
{
|
||||
@ -89,7 +235,104 @@ export const PurchaseOrder = {
|
||||
label: 'Total Tax Amount',
|
||||
type: 'number',
|
||||
prefix: '£',
|
||||
roundNumber: 2,
|
||||
readOnly: true,
|
||||
columnWidth: 175
|
||||
},
|
||||
{
|
||||
name: 'CompletedAt',
|
||||
label: 'Completed At',
|
||||
type: 'dateTime',
|
||||
readOnly: true
|
||||
},
|
||||
{
|
||||
name: 'totalAmountWithTax',
|
||||
label: 'Total Amount w/ Tax',
|
||||
type: 'number',
|
||||
prefix: '£',
|
||||
readOnly: true,
|
||||
columnWidth: 175,
|
||||
roundNumber: 2
|
||||
},
|
||||
{
|
||||
name: 'shippingAmount',
|
||||
label: 'Shipping Amount',
|
||||
type: 'number',
|
||||
prefix: '£',
|
||||
roundNumber: 2,
|
||||
readOnly: true,
|
||||
columnWidth: 150
|
||||
},
|
||||
{
|
||||
name: 'shippingAmountWithTax',
|
||||
label: 'Shipping Amount w/ Tax',
|
||||
type: 'number',
|
||||
prefix: '£',
|
||||
readOnly: true,
|
||||
roundNumber: 2,
|
||||
columnWidth: 200
|
||||
},
|
||||
{
|
||||
name: 'totalAmount',
|
||||
label: 'Total Amount',
|
||||
type: 'number',
|
||||
prefix: '£',
|
||||
roundNumber: 2,
|
||||
readOnly: true,
|
||||
columnWidth: 150
|
||||
},
|
||||
{
|
||||
name: 'grandTotalAmount',
|
||||
label: 'Grand Total Amount',
|
||||
type: 'number',
|
||||
prefix: '£',
|
||||
roundNumber: 2,
|
||||
columnWidth: 175,
|
||||
readOnly: true
|
||||
}
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
name: 'draft.count',
|
||||
label: 'Draft',
|
||||
type: 'number',
|
||||
color: 'default'
|
||||
},
|
||||
{
|
||||
name: 'sent.count',
|
||||
label: 'Sent',
|
||||
type: 'number',
|
||||
color: 'cyan'
|
||||
},
|
||||
{
|
||||
name: 'acknowledged.count',
|
||||
label: 'Acknowledged',
|
||||
type: 'number',
|
||||
color: 'processing'
|
||||
},
|
||||
{
|
||||
name: 'partiallyShipped.count',
|
||||
label: 'Partially Shipped',
|
||||
type: 'number',
|
||||
color: 'processing'
|
||||
},
|
||||
{
|
||||
name: 'shipped.count',
|
||||
label: 'Shipped',
|
||||
type: 'number',
|
||||
color: 'processing'
|
||||
},
|
||||
{
|
||||
name: 'partiallyReceived.count',
|
||||
label: 'Partially Received',
|
||||
type: 'number',
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
name: 'received.count',
|
||||
label: 'Received',
|
||||
type: 'number',
|
||||
color: 'success'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user