Tom Butcher 43464f8054 Refactor Delete Functionality Across Multiple Components
- Removed the delete action from various components including InvoiceInfo, PaymentInfo, and others to streamline functionality.
- Introduced a new DeleteObject component to handle deletion logic in a centralized manner, enhancing code maintainability.
- Updated models to utilize the new DeleteObject component for consistent deletion handling across the application.
- Simplified ObjectForm by eliminating the previous delete modal, improving component structure and clarity.
2026-08-22 21:06:32 +01:00

385 lines
8.8 KiB
JavaScript

import { createElement, lazy } from 'react'
const PaymentInfo = lazy(
() => import('../../components/Dashboard/Finance/Payments/PaymentInfo')
)
const NewPayment = lazy(
() => import('../../components/Dashboard/Finance/Payments/NewPayment')
)
const PostPayment = lazy(
() => import('../../components/Dashboard/Finance/Payments/PostPayment')
)
const AuthorisePayment = lazy(
() => import('../../components/Dashboard/Finance/Payments/AuthorisePayment')
)
const DeclinePayment = lazy(
() => import('../../components/Dashboard/Finance/Payments/DeclinePayment')
)
const CancelPayment = lazy(
() => import('../../components/Dashboard/Finance/Payments/CancelPayment')
)
const DeleteObject = lazy(
() => import('../../components/Dashboard/common/DeleteObject')
)
import PaymentIcon from '../../components/Icons/PaymentIcon'
import PlusIcon from '../../components/Icons/PlusIcon'
import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
import CheckIcon from '../../components/Icons/CheckIcon'
import EditIcon from '../../components/Icons/EditIcon'
import XMarkIcon from '../../components/Icons/XMarkIcon'
import BinIcon from '../../components/Icons/BinIcon'
import ListIcon from '../../components/Icons/ListIcon'
export const Payment = {
name: 'payment',
label: 'Payment',
labelPlural: 'Payments',
url: '/dashboard/finance/payments',
prefix: 'PAY',
icon: PaymentIcon,
actions: [
{
name: 'new',
type: 'modal',
pageName: 'list',
modalWidth: 800,
label: 'New Payment',
icon: PlusIcon,
content: (objectData, { onOk } = {}) => {
return createElement(NewPayment, { defaultValues: objectData, onOk, reset: true })
}
},
{
name: 'list',
type: 'page',
pageName: 'list',
label: 'List',
icon: ListIcon
},
{
name: 'info',
type: 'page',
pageName: 'info',
label: 'Info',
default: true,
row: true,
icon: InfoCircleIcon
},
{
name: 'edit',
type: 'page',
pageName: 'info',
label: 'Edit',
row: true,
icon: EditIcon,
visible: (objectData) => {
return !(objectData?._isEditing && objectData?._isEditing == true)
},
disabled: (objectData) => {
return objectData?.state?.type != 'draft'
}
},
{
name: 'cancelEdit',
label: 'Cancel Edits',
type: 'page',
pageName: 'info',
icon: XMarkIcon,
visible: (objectData) => {
return objectData?._isEditing && objectData?._isEditing == true
}
},
{
name: 'finishEdit',
label: 'Save Edits',
type: 'page',
pageName: 'info',
icon: CheckIcon,
visible: (objectData) => {
return objectData?._isEditing && objectData?._isEditing == true
}
},
{
name: 'delete',
type: 'modal',
modalWidth: 520,
modalCentered: true,
label: 'Delete',
icon: BinIcon,
danger: true,
visible: (objectData) => {
return !(objectData?._isEditing && objectData?._isEditing == true)
},
disabled: (objectData) => {
return objectData?.state?.type != 'draft'
},
content: (objectData, { onOk } = {}) => {
return createElement(DeleteObject, { objectData, onOk })
}
},
{ type: 'divider' },
{
name: 'post',
type: 'modal',
modalWidth: 520,
label: 'Post',
icon: CheckIcon,
visible: (objectData) => {
return objectData?.state?.type == 'draft'
},
content: (objectData, { onOk } = {}) => {
return createElement(PostPayment, { objectData, onOk })
}
},
{
name: 'authorise',
type: 'modal',
modalWidth: 520,
label: 'Authorise',
icon: CheckIcon,
disabled: (objectData) => {
return objectData?.state?.type != 'posted'
},
visible: (objectData) => {
return objectData?.state?.type == 'posted'
},
content: (objectData, { onOk } = {}) => {
return createElement(AuthorisePayment, { objectData, onOk })
}
},
{
name: 'decline',
type: 'modal',
modalWidth: 520,
label: 'Decline',
icon: XMarkIcon,
danger: true,
disabled: (objectData) => {
return objectData?.state?.type != 'posted'
},
visible: (objectData) => {
return objectData?.state?.type == 'posted'
},
content: (objectData, { onOk } = {}) => {
return createElement(DeclinePayment, { objectData, onOk })
}
},
{
name: 'cancel',
type: 'modal',
modalWidth: 520,
label: 'Cancel',
icon: XMarkIcon,
danger: true,
disabled: (objectData) => {
return objectData?.state?.type != 'posted'
},
visible: (objectData) => {
return objectData?.state?.type == 'posted'
},
content: (objectData, { onOk } = {}) => {
return createElement(CancelPayment, { objectData, onOk })
}
}
],
pages: [
{
name: 'info',
content: () => createElement(PaymentInfo)
}
],
group: ['vendor', 'client', 'invoice'],
filters: [
'vendor',
'client',
'state',
'invoice',
'createdAt',
'updatedAt',
'_reference'
],
sorters: ['createdAt', 'state', 'updatedAt', 'paymentDate'],
columns: [
'_reference',
'state',
'invoice',
'vendor',
'client',
'paymentDate',
'amount',
'paymentMethod',
'createdAt',
'updatedAt'
],
properties: [
{
name: '_id',
label: 'ID',
type: 'id',
columnFixed: 'left',
objectType: 'payment',
columnWidth: 140,
showCopy: true
},
{
name: 'createdAt',
label: 'Created At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: '_reference',
label: 'Reference',
type: 'reference',
columnFixed: 'left',
required: true,
objectType: 'payment',
showCopy: true,
readOnly: true,
columnWidth: 180
},
{
name: 'updatedAt',
label: 'Updated At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: 'state',
label: 'State',
type: 'state',
readOnly: true,
columnWidth: 260
},
{
name: 'postedAt',
label: 'Posted At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: 'invoice',
label: 'Invoice',
type: 'object',
objectType: 'invoice',
required: true,
showHyperlink: true,
columnWidth: 200
},
{
name: 'authorisedAt',
label: 'Authorised At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: 'payTo',
label: 'Pay To',
type: 'object',
objectType: 'vendor',
showHyperlink: true,
required: true,
readOnly: true,
columnWidth: 200,
disabled: (objectData) => {
return objectData?.invoice?.orderType == 'purchaseOrder'
},
value: (objectData) => {
return objectData?.invoice?.from
}
},
{
name: 'declinedAt',
label: 'Declined At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: 'amount',
label: 'Amount',
type: 'number',
prefix: '£',
roundNumber: 2,
required: true,
columnWidth: 150
},
{
name: 'cancelledAt',
label: 'Cancelled At',
type: 'dateTime',
readOnly: true,
columnWidth: 175
},
{
name: 'paymentMethod',
label: 'Payment Method',
type: 'string',
required: false,
columnWidth: 150
}
],
stats: [
{
name: 'draft.draftCount.count',
label: 'Draft',
type: 'number',
color: 'default'
},
{
name: 'draft.draftAmount.sum',
label: 'Draft Amount',
type: 'number',
prefix: '£',
roundNumber: 2,
color: 'default'
},
{
name: 'posted.postedCount.count',
label: 'Posted',
type: 'number',
color: 'cyan'
},
{
name: 'posted.postedAmount.sum',
label: 'Posted Amount',
type: 'number',
prefix: '£',
roundNumber: 2,
color: 'cyan'
},
{
name: 'authorised.authorisedCount.count',
label: 'Authorised',
type: 'number',
color: 'green'
},
{
name: 'authorised.authorisedAmount.sum',
label: 'Authorised Amount',
type: 'number',
prefix: '£',
roundNumber: 2,
color: 'green'
},
{
name: 'declined.declinedCount.count',
label: 'Declined',
type: 'number',
color: 'red'
},
{
name: 'declined.declinedAmount.sum',
label: 'Declined Amount',
type: 'number',
prefix: '£',
roundNumber: 2,
color: 'red'
}
]
}