diff --git a/client/CHANGELOG.md b/client/CHANGELOG.md index 463f1a106..fcca15ca3 100644 --- a/client/CHANGELOG.md +++ b/client/CHANGELOG.md @@ -32,6 +32,7 @@ straightforward as possible. - Inventory adjustment publish action. - Customers and vendors activate and inactivate action. - Add refresh button on dashboard actions bar to all datatables resources. +- Add clickable datatable rows to display each row details. ### Changed diff --git a/client/src/components/Details/index.js b/client/src/components/Details/index.js index 83c576d86..58362042f 100644 --- a/client/src/components/Details/index.js +++ b/client/src/components/Details/index.js @@ -18,13 +18,18 @@ export function DetailsMenu({ children, direction = DIRECTION.VERTICAL, minLabelSize, + className, }) { return (
{children} @@ -36,14 +41,18 @@ export function DetailsMenu({ /** * Detail item. */ -export function DetailItem({ label, children, name }) { +export function DetailItem({ label, children, name, className }) { const { minLabelSize } = useDetailsMenuContext(); return (
- + + diff --git a/client/src/containers/Customers/CustomersLanding/CustomersList.js b/client/src/containers/Customers/CustomersLanding/CustomersList.js index f4cb9d428..118ebbe46 100644 --- a/client/src/containers/Customers/CustomersLanding/CustomersList.js +++ b/client/src/containers/Customers/CustomersLanding/CustomersList.js @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import 'style/pages/Customers/List.scss'; -import { DashboardContentTable, DashboardPageContent } from 'components'; +import { DashboardPageContent } from 'components'; import CustomersActionsBar from './CustomersActionsBar'; import CustomersViewsTabs from './CustomersViewsTabs'; diff --git a/client/src/containers/Customers/CustomersLanding/CustomersTable.js b/client/src/containers/Customers/CustomersLanding/CustomersTable.js index c2fd9c2a1..9205ee93a 100644 --- a/client/src/containers/Customers/CustomersLanding/CustomersTable.js +++ b/client/src/containers/Customers/CustomersLanding/CustomersTable.js @@ -92,12 +92,12 @@ function CustomersTable({ // Handle view detail contact. const handleViewDetailCustomer = ({ id }) => { - openDrawer('contact-detail-drawer', { contactId: id }); + openDrawer('contact-detail-drawer', { customerId: id }); }; // Handle cell click. const handleCellClick = (cell, event) => { - openDrawer('contact-detail-drawer', { contactId: cell.row.original.id }); + openDrawer('customer-details-drawer', { customerId: cell.row.original.id }); }; if (isEmptyStatus) { diff --git a/client/src/containers/Customers/CustomersUniversalSearch.js b/client/src/containers/Customers/CustomersUniversalSearch.js index 661f6bc46..b9e4b8768 100644 --- a/client/src/containers/Customers/CustomersUniversalSearch.js +++ b/client/src/containers/Customers/CustomersUniversalSearch.js @@ -3,14 +3,23 @@ import intl from 'react-intl-universal'; import { RESOURCES_TYPES } from '../../common/resourcesTypes'; import withDrawerActions from '../Drawer/withDrawerActions'; -function CustomerUniversalSearchSelectComponent({ resourceType, resourceId }) { +function CustomerUniversalSearchSelectComponent({ + resourceType, + resourceId, + onAction, + + // #withDrawerActions + openDrawer, +}) { if (resourceType === RESOURCES_TYPES.CUSTOMER) { + openDrawer('customer-details-drawer', { customerId: resourceId }); + onAction && onAction(); } return null; } const CustomerUniversalSearchSelectAction = withDrawerActions( - CustomerUniversalSearchSelectComponent + CustomerUniversalSearchSelectComponent, ); /** @@ -19,6 +28,7 @@ const CustomerUniversalSearchSelectAction = withDrawerActions( * @returns */ const customersToSearch = (contact) => ({ + id: contact.id, text: contact.display_name, label: contact.formatted_balance, reference: contact, diff --git a/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetails.js b/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetails.js new file mode 100644 index 000000000..4ff62bf14 --- /dev/null +++ b/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetails.js @@ -0,0 +1,24 @@ +import React from 'react'; +import clsx from 'classnames'; + +import { Card } from 'components'; + +import CustomerDetailsActionsBar from './CustomerDetailsActionsBar'; +import CustomerDetailsHeader from './CustomerDetailsHeader'; + +import Style from './CustomerDetailsDrawer.module.scss'; + +/** + * contact detail. + */ +export default function CustomerDetails() { + return ( +
+ + + + + +
+ ); +} diff --git a/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js b/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js new file mode 100644 index 000000000..1453a5ea2 --- /dev/null +++ b/client/src/containers/Drawers/CustomerDetailsDrawer/CustomerDetailsActionsBar.js @@ -0,0 +1,130 @@ +import React from 'react'; +import intl from 'react-intl-universal'; +import { useHistory } from 'react-router-dom'; +import { + Button, + NavbarGroup, + Classes, + NavbarDivider, + Intent, + Position, + PopoverInteractionKind, + Popover, + Menu, + MenuItem, +} from '@blueprintjs/core'; +import clsx from 'classnames'; +import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; + +import { useCustomerDetailsDrawerContext } from './CustomerDetailsDrawerProvider'; + +import withAlertsActions from 'containers/Alert/withAlertActions'; +import withDrawerActions from 'containers/Drawer/withDrawerActions'; + +import { Icon, FormattedMessage as T } from 'components'; + +import { compose } from 'utils'; + +/** + * Customer details actions bar. + */ +function CustomerDetailsActionsBar({ + // #withAlertsActions + openAlert, + + // #withDrawerActions + closeDrawer, +}) { + const { contact, customerId } = useCustomerDetailsDrawerContext(); + const history = useHistory(); + + // Handle new invoice button click. + const handleNewInvoiceClick = () => { + history.push('invoices/new'); + closeDrawer('customer-details-drawer'); + }; + // Handle new receipt button click. + const handleNewReceiptClick = () => { + history.push('receipts/new'); + closeDrawer('customer-details-drawer'); + }; + // Handle new payment receive button click. + const handleNewPaymentClick = () => { + history.push('payment-receives/new'); + closeDrawer('customer-details-drawer'); + }; + // Handle new estimate button click. + const handleNewEstimateClick = () => { + history.push('estimates/new'); + closeDrawer('customer-details-drawer'); + }; + + const handleDeleteCustomer = () => { + openAlert(`'customer-delete`, { customerId }); + closeDrawer('customer-details-drawer'); + }; + const handleEditContact = () => { + history.push(`/customers/${customerId}/edit`); + closeDrawer('customer-details-drawer'); + }; + + return ( + + + + } + onClick={handleNewInvoiceClick} + /> + } + onClick={handleNewEstimateClick} + /> + } + onClick={handleNewReceiptClick} + /> + } + onClick={handleNewPaymentClick} + /> + + } + minimal={true} + interactionKind={PopoverInteractionKind.CLICK} + position={Position.BOTTOM_LEFT} + > +