diff --git a/client/src/components/DrawersContainer.js b/client/src/components/DrawersContainer.js index 177101057..63dcbdb6e 100644 --- a/client/src/components/DrawersContainer.js +++ b/client/src/components/DrawersContainer.js @@ -6,6 +6,7 @@ import PaymentReceiveDrawer from 'containers/Sales/PaymentReceives/PaymentDetail import AccountDrawer from 'containers/Drawers/AccountDrawer'; import ManualJournalDrawer from 'containers/Drawers/ManualJournalDrawer'; import ExpenseDrawer from 'containers/Drawers/ExpenseDrawer'; +import BillDrawer from 'containers/Drawers/BillDrawer'; export default function DrawersContainer() { return ( @@ -17,6 +18,7 @@ export default function DrawersContainer() { + ); } diff --git a/client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js b/client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js index 2275883ad..171d88ce1 100644 --- a/client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js +++ b/client/src/containers/Dialogs/AllocateLandedCostDialog/AllocateLandedCostEntriesTable.js @@ -66,6 +66,30 @@ export default function AllocateLandedCostEntriesTable({ rate: '100000', amount: '400', }, + { + item_id: 'ITEM', + quantity: '30000', + rate: '100000', + amount: '400', + }, + { + item_id: 'ITEM', + quantity: '30000', + rate: '100000', + amount: '400', + }, + { + item_id: 'ITEM', + quantity: '30000', + rate: '100000', + amount: '400', + }, + { + item_id: 'ITEM', + quantity: '30000', + rate: '100000', + amount: '400', + }, ]; return ; diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js b/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js new file mode 100644 index 000000000..0e93746a5 --- /dev/null +++ b/client/src/containers/Drawers/BillDrawer/BillDrawerContent.js @@ -0,0 +1,16 @@ +import React from 'react'; +import { BillDrawerProvider } from './BillDrawerProvider'; +import BillDrawerDetails from './BillDrawerDetails'; +/** + * Bill drawer content. + */ +export default function BillDrawerContent({ + // #ownProp + billId, +}) { + return ( + + + + ); +} diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js new file mode 100644 index 000000000..28bc4fc3a --- /dev/null +++ b/client/src/containers/Drawers/BillDrawer/BillDrawerDetails.js @@ -0,0 +1,25 @@ +import React from 'react'; +import { Tabs, Tab } from '@blueprintjs/core'; +import intl from 'react-intl-universal'; + +import LocatedLandedCostTable from './LocatedLandedCostTable'; + +import 'style/components/Drawer/BillDrawer.scss'; + +/** + * Bill view details. + */ +export default function BillDrawerDetails() { + return ( +
+ + + } + /> + +
+ ); +} diff --git a/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js b/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js new file mode 100644 index 000000000..689508ad0 --- /dev/null +++ b/client/src/containers/Drawers/BillDrawer/BillDrawerProvider.js @@ -0,0 +1,26 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { DrawerHeaderContent, DashboardInsider } from 'components'; + +const BillDrawerContext = React.createContext(); + +/** + * Bill drawer provider. + */ +function BillDrawerProvider({ billId, ...props }) { + //provider. + const provider = {}; + return ( + + + + + ); +} + +const useBillDrawerContext = () => React.useContext(BillDrawerContext); + +export { BillDrawerProvider, useBillDrawerContext }; diff --git a/client/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js b/client/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js new file mode 100644 index 000000000..c50da77e6 --- /dev/null +++ b/client/src/containers/Drawers/BillDrawer/LocatedLandedCostTable.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { DataTable } from 'components'; +import { useLocatedLandedCostColumns, ActionsMenu } from './components'; + +/** + * Located landed cost table. + */ +function LocatedLandedCostTable() { + const columns = useLocatedLandedCostColumns(); + + const DATA = [ + { + name: 'INV-1000', + amount: '10.000.000', + allocation_method: 'Bill', + }, + ]; + + return ; +} + +export default LocatedLandedCostTable; diff --git a/client/src/containers/Drawers/BillDrawer/components.js b/client/src/containers/Drawers/BillDrawer/components.js new file mode 100644 index 000000000..1e3816c3c --- /dev/null +++ b/client/src/containers/Drawers/BillDrawer/components.js @@ -0,0 +1,41 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { Intent, MenuItem, Menu } from '@blueprintjs/core'; +import { safeCallback } from 'utils'; +import { Icon } from 'components'; + +/** + * Actions menu. + */ +export function ActionsMenu({ row: { original }, payload: { onDelete } }) { + return ( + + } + text={intl.get('delete_transaction')} + intent={Intent.DANGER} + // onClick={safeCallback(onDelete, original)} + /> + + ); +} + +export function useLocatedLandedCostColumns() { + return React.useMemo(() => [ + { + Header: intl.get('name'), + accessor: 'name', + width: 150, + }, + { + Header: intl.get('amount'), + accessor: 'amount', + width: 100, + }, + { + Header: intl.get('allocation_method'), + accessor: 'allocation_method', + width: 100, + }, + ]); +} diff --git a/client/src/containers/Drawers/BillDrawer/index.js b/client/src/containers/Drawers/BillDrawer/index.js new file mode 100644 index 000000000..c712e4a15 --- /dev/null +++ b/client/src/containers/Drawers/BillDrawer/index.js @@ -0,0 +1,27 @@ +import React from 'react'; +import { Drawer, DrawerSuspense } from 'components'; +import withDrawers from 'containers/Drawer/withDrawers'; + +import { compose } from 'utils'; + +const BillDrawerContent = React.lazy(() => import('./BillDrawerContent')); + +/** + * Bill drawer. + */ +function BillDrawer({ + name, + // #withDrawer + isOpen, + payload: { billId }, +}) { + return ( + + + + + + ); +} + +export default compose(withDrawers())(BillDrawer); diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js index 03f49bb09..0bb5de39b 100644 --- a/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js +++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsTable.js @@ -14,6 +14,7 @@ import withBillActions from './withBillsActions'; import withSettings from 'containers/Settings/withSettings'; import withAlertsActions from 'containers/Alert/withAlertActions'; import withDialogActions from 'containers/Dialog/withDialogActions'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; import { useBillsTableColumns, ActionsMenu } from './components'; import { useBillsListContext } from './BillsListProvider'; @@ -32,6 +33,9 @@ function BillsDataTable({ // #withDialogActions openDialog, + + // #withDrawerActions + openDrawer, }) { // Bills list context. const { bills, pagination, isBillsLoading, isBillsFetching, isEmptyStatus } = @@ -78,6 +82,11 @@ function BillsDataTable({ openDialog('allocate-landed-cost', { billId: id }); }; + // Handle view detail bill. + const handleViewDetailBill = ({ id }) => { + openDrawer('bill-drawer', { billId: id }); + }; + if (isEmptyStatus) { return ; } @@ -106,6 +115,7 @@ function BillsDataTable({ onOpen: handleOpenBill, onQuick: handleQuickPaymentMade, onAllocateLandedCost: handleAllocateLandedCost, + onViewDetails: handleViewDetailBill, }} /> ); @@ -115,6 +125,7 @@ export default compose( withBills(({ billsTableState }) => ({ billsTableState })), withBillActions, withAlertsActions, + withDrawerActions, withDialogActions, withSettings(({ organizationSettings }) => ({ baseCurrency: organizationSettings?.baseCurrency, diff --git a/client/src/containers/Purchases/Bills/BillsLanding/components.js b/client/src/containers/Purchases/Bills/BillsLanding/components.js index fa4c2a76b..cf2b6c73a 100644 --- a/client/src/containers/Purchases/Bills/BillsLanding/components.js +++ b/client/src/containers/Purchases/Bills/BillsLanding/components.js @@ -20,7 +20,14 @@ import moment from 'moment'; * Actions menu. */ export function ActionsMenu({ - payload: { onEdit, onOpen, onDelete, onQuick, onAllocateLandedCost }, + payload: { + onEdit, + onOpen, + onDelete, + onQuick, + onViewDetails, + onAllocateLandedCost, + }, row: { original }, }) { return ( @@ -28,6 +35,7 @@ export function ActionsMenu({ } text={intl.get('view_details')} + onClick={safeCallback(onViewDetails, original)} /> *:not(:last-child) { + margin-right: 25px; + } + + &.bp3-large > .bp3-tab { + font-size: 15px; + color: #555; + margin: 0 0.8rem; + + &[aria-selected='true'], + &:not([aria-disabled='true']):hover { + color: $pt-link-color; + } + } + } + } + + .bigcapital-datatable { + .table { + max-height: 500px; + border: 1px solid #d1dee2; + min-width: auto; + margin: 12px; + + .tbody, + .tbody-inner { + height: auto; + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } + } + .tbody { + .tr .td { + padding: 0.8rem; + } + } + } + } +} + +.bp3-drawer.bp3-position-right { + bottom: 0; + right: 0; + top: 0; + overflow: auto; + height: 100%; + + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + + .bp3-drawer-header { + margin-bottom: 2px; + box-shadow: (0, 0, 0); + background-color: #6a7993; + + .bp3-heading, + .bp3-icon { + color: white; + } + } +} diff --git a/client/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss b/client/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss index 4785113d6..fe15f6d73 100644 --- a/client/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss +++ b/client/src/style/pages/AllocateLandedCost/AllocateLandedCostForm.scss @@ -19,12 +19,13 @@ .bigcapital-datatable { .table { - max-height: 300px; + // max-height: 300px; border: 1px solid #d1dee2; min-width: auto; .tbody, .tbody-inner { + height: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none;