From f9fe3506c5f0689fe3c4c811d64c8dadb7eefdc7 Mon Sep 17 00:00:00 2001 From: elforjani13 <39470382+elforjani13@users.noreply.github.com> Date: Sun, 19 Dec 2021 17:29:25 +0200 Subject: [PATCH] feat: item payment transactions. --- src/common/itemPaymentTranactionsOption.js | 8 ++ .../ItemDetailDrawer/ItemContentDetails.js | 10 +- .../ItemDetailDrawerProvider.js | 5 + .../ItemDetailDrawer/ItemDetailHeader.js | 130 +++++++++--------- .../Drawers/ItemDetailDrawer/ItemDetailTab.js | 23 ++++ .../BillPaymentTransactionsDataTable.js | 20 ++- .../EstimatePaymentTransactionsDataTable.js | 20 ++- .../InvoicePaymentTransactionsDataTable.js | 20 ++- .../ItemPaymentTransactionContent.js | 21 +++ .../ReceiptPaymentTransactionsDataTable.js | 20 ++- .../ItemPaymentTransactions/index.js | 52 ++++--- .../ItemPaymentTransactions/utils.js | 38 +++++ src/style/components/Drawers/ItemDrawer.scss | 36 +++-- 13 files changed, 235 insertions(+), 168 deletions(-) create mode 100644 src/common/itemPaymentTranactionsOption.js create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js create mode 100644 src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js diff --git a/src/common/itemPaymentTranactionsOption.js b/src/common/itemPaymentTranactionsOption.js new file mode 100644 index 000000000..1df2bb456 --- /dev/null +++ b/src/common/itemPaymentTranactionsOption.js @@ -0,0 +1,8 @@ +import intl from 'react-intl-universal'; + +export default [ + { name: 'invoices', label: intl.get('invoices') }, + { name: 'estimates', label: intl.get('estimates') }, + { name: 'receipts', label: intl.get('receipts') }, + { name: 'bills', label: intl.get('bills') }, +]; diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js index 61d94a3a2..e2044c0e1 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemContentDetails.js @@ -1,10 +1,7 @@ import React from 'react'; +import ItemDetailTab from './ItemDetailTab'; import ItemDetailActionsBar from './ItemDetailActionsBar'; -import ItemDetailHeader from './ItemDetailHeader'; -import { ItemPaymentTransactions } from './ItemPaymentTransactions'; - -import { Card } from 'components'; /** * Item detail. @@ -13,10 +10,7 @@ export default function ItemDetail() { return (
- - - - +
); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js index bb83783b3..c748e559b 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailDrawerProvider.js @@ -8,6 +8,9 @@ const ItemDetailDrawerContext = React.createContext(); * Item detail provider */ function ItemDetailDrawerProvider({ itemId, ...props }) { + // transaction type payload. + const [value, setValue] = React.useState('invoices'); + // Fetches the given item detail. const { isLoading: isItemLoading, data: item } = useItem(itemId, { enabled: !!itemId, @@ -18,6 +21,8 @@ function ItemDetailDrawerProvider({ itemId, ...props }) { item, itemId, isItemLoading, + value, + setValue, }; return ( diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js index 0511a2c4f..7eea8ab1b 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailHeader.js @@ -3,7 +3,7 @@ import intl from 'react-intl-universal'; import { defaultTo } from 'lodash'; import classNames from 'classnames'; -import { If, DetailsMenu, DetailItem } from 'components'; +import { If, DetailsMenu, DetailItem, Card } from 'components'; import { useItemDetailDrawerContext } from './ItemDetailDrawerProvider'; /** @@ -13,70 +13,72 @@ export default function ItemDetailHeader() { const { item } = useItemDetailDrawerContext(); return ( -
- - - - - - - - - - - - 0, - })} - > - {defaultTo(item.quantity_on_hand, '-')} - - - - - - - + +
+ - - - - -
+ + + + + + + + + + 0, + })} + > + {defaultTo(item.quantity_on_hand, '-')} + + + + + + + + + + + + +
+ ); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js b/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js new file mode 100644 index 000000000..e964d4bd5 --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemDetailTab.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { Tab } from '@blueprintjs/core'; +import { DrawerMainTabs, FormattedMessage as T } from 'components'; +import { ItemPaymentTransactions } from './ItemPaymentTransactions'; +import ItemDetailHeader from './ItemDetailHeader'; + + +export default function ItemDetailTab() { + return ( + + } + panel={} + /> + } + panel={} + /> + + ); +} diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js index b08e709e5..8d0c6d7a6 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/BillPaymentTransactionsDataTable.js @@ -1,5 +1,5 @@ import React from 'react'; -import { DataTable, Card } from '../../../../components'; +import { DataTable } from '../../../../components'; import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; import { useItemAssociatedBillTransactions } from 'hooks/query'; import { useBillTransactionsColumns } from './components'; @@ -22,16 +22,12 @@ export default function BillPaymentTransactions() { }); return ( -
- - - -
+ ); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js index ebab517ab..0bafefb1a 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/EstimatePaymentTransactionsDataTable.js @@ -1,5 +1,5 @@ import React from 'react'; -import { DataTable, Card } from '../../../../components'; +import { DataTable } from '../../../../components'; import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; import { useItemAssociatedEstimateTransactions } from 'hooks/query'; import { useEstimateTransactionsColumns } from './components'; @@ -22,16 +22,12 @@ export default function EstimatePaymentTransactions() { }); return ( -
- - - -
+ ); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js index 1299a4118..7900a998a 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/InvoicePaymentTransactionsDataTable.js @@ -1,5 +1,5 @@ import React from 'react'; -import { DataTable, Card } from '../../../../components'; +import { DataTable } from '../../../../components'; import { useItemAssociatedInvoiceTransactions } from 'hooks/query'; import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; import { useInvoicePaymentTransactionsColumns } from './components'; @@ -22,16 +22,12 @@ export default function InvoicePaymentTransactionsTable() { }); return ( -
- - - -
+ ); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js new file mode 100644 index 000000000..eb6f93d30 --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ItemPaymentTransactionContent.js @@ -0,0 +1,21 @@ +import React from 'react'; +import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable'; +import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable'; +import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable'; +import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable'; + +export default function ItemPaymentTransactionsContent({ tansactionType }) { + const handleType = () => { + switch (tansactionType) { + case 'invoices': + return ; + case 'estimates': + return ; + case 'receipts': + return ; + case 'bills': + return ; + } + }; + return handleType(); +} diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js index c73f8e20a..dac60ed12 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/ReceiptPaymentTransactionsDataTable.js @@ -1,5 +1,5 @@ import React from 'react'; -import { DataTable, Card } from '../../../../components'; +import { DataTable } from '../../../../components'; import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; import { useItemAssociatedReceiptTransactions } from 'hooks/query'; import { useReceiptTransactionsColumns } from './components'; @@ -22,16 +22,12 @@ export default function ReceiptPaymentTransactions() { }); return ( -
- - - -
+ ); } diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js index bd2fefae1..16da8be06 100644 --- a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/index.js @@ -1,34 +1,30 @@ import React from 'react'; -import { Tab } from '@blueprintjs/core'; -import { DrawerMainTabs, FormattedMessage as T } from 'components'; -import InvoicePaymentTransactionsTable from './InvoicePaymentTransactionsDataTable'; -import EstimatePaymentTransactionsTable from './EstimatePaymentTransactionsDataTable'; -import ReceiptPaymentTransactionsTable from './ReceiptPaymentTransactionsDataTable'; -import BillPaymentTransactionsTable from './BillPaymentTransactionsDataTable'; +import styled from 'styled-components'; +import { Card, FormattedMessage as T } from 'components'; +import { ItemManuTransaction } from './utils'; +import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; +import ItemPaymentTransactionContent from './ItemPaymentTransactionContent'; export const ItemPaymentTransactions = () => { + const { value } = useItemDetailDrawerContext(); + return ( - - } - panel={} - /> - } - panel={} - /> - } - panel={} - /> - } - /> - + + + + + + + ); }; + +const ItemManuTransactions = styled.div` + display: flex; + align-items: center; + color: #727983; + .bp3-button { + padding-left: 6px; + font-weight: 700; + } +`; diff --git a/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js new file mode 100644 index 000000000..9e93ea4b2 --- /dev/null +++ b/src/containers/Drawers/ItemDetailDrawer/ItemPaymentTransactions/utils.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { + Button, + MenuItem, + Menu, + Popover, + PopoverInteractionKind, + Position, +} from '@blueprintjs/core'; +import { FormattedMessage as T } from 'components'; +import { useItemDetailDrawerContext } from '../ItemDetailDrawerProvider'; +import transactions from '../../../../common/itemPaymentTranactionsOption'; + +export const ItemManuTransaction = () => { + const { value, setValue } = useItemDetailDrawerContext(); + + // const handleClickItem = (item) => { + // onChange && onChange(item); + // }; + + const content = transactions.map(({ name, label }) => ( + setValue(name)} text={label} /> + )); + + return ( + {content}} + > +