mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 05:40:31 +00:00
refactoring: expenses landing list.
refactoring: customers landing list. refactoring: vendors landing list. refactoring: manual journals landing list.
This commit is contained in:
a.bouhuolia
@@ -0,0 +1,123 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import {
|
||||
NavbarGroup,
|
||||
NavbarDivider,
|
||||
Button,
|
||||
Classes,
|
||||
Intent,
|
||||
Popover,
|
||||
Position,
|
||||
PopoverInteractionKind,
|
||||
} from '@blueprintjs/core';
|
||||
import { FormattedMessage as T, useIntl } from 'react-intl';
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
import { If, Icon, DashboardActionViewsList } from 'components';
|
||||
|
||||
import { useCustomersListContext } from './CustomersListProvider';
|
||||
|
||||
import withCustomers from './withCustomers';
|
||||
import withCustomersActions from './withCustomersActions';
|
||||
import withAlertActions from 'containers/Alert/withAlertActions';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Customers actions bar.
|
||||
*/
|
||||
function CustomerActionsBar({
|
||||
// #withCustomers
|
||||
customersSelectedRows = [],
|
||||
|
||||
// #withCustomersActions
|
||||
setCustomersTableState,
|
||||
|
||||
// #withAlertActions
|
||||
openAlert,
|
||||
}) {
|
||||
// History context.
|
||||
const history = useHistory();
|
||||
|
||||
// React intl
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
// Customers list context.
|
||||
const { customersViews } = useCustomersListContext();
|
||||
|
||||
const onClickNewCustomer = () => {
|
||||
history.push('/customers/new');
|
||||
};
|
||||
|
||||
// Handle Customers bulk delete button click.,
|
||||
const handleBulkDelete = () => {
|
||||
openAlert('customers-bulk-delete', { customersIds: customersSelectedRows });
|
||||
};
|
||||
|
||||
const handleTabChange = (viewId) => {
|
||||
setCustomersTableState({
|
||||
customViewId: viewId.id || null,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<DashboardActionViewsList
|
||||
resourceName={'customers'}
|
||||
views={customersViews}
|
||||
onChange={handleTabChange}
|
||||
/>
|
||||
<NavbarDivider />
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon={'plus'} />}
|
||||
text={<T id={'new_customer'} />}
|
||||
onClick={onClickNewCustomer}
|
||||
/>
|
||||
<NavbarDivider />
|
||||
<Popover
|
||||
// content={filterDropdown}
|
||||
interactionKind={PopoverInteractionKind.CLICK}
|
||||
position={Position.BOTTOM_LEFT}
|
||||
>
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--filter')}
|
||||
text={`${formatMessage({ id: 'filters_applied' })}`}
|
||||
icon={<Icon icon="filter-16" iconSize={16} />}
|
||||
/>
|
||||
</Popover>
|
||||
|
||||
<If condition={customersSelectedRows.length}>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon="trash-16" iconSize={16} />}
|
||||
text={<T id={'delete'} />}
|
||||
intent={Intent.DANGER}
|
||||
onClick={handleBulkDelete}
|
||||
/>
|
||||
</If>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon="file-import-16" iconSize={16} />}
|
||||
text={<T id={'import'} />}
|
||||
/>
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={<Icon icon="file-export-16" iconSize={16} />}
|
||||
text={<T id={'export'} />}
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
withCustomersActions,
|
||||
withCustomers(({ customersSelectedRows }) => ({
|
||||
customersSelectedRows,
|
||||
})),
|
||||
withAlertActions,
|
||||
)(CustomerActionsBar);
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { Button, Intent } from '@blueprintjs/core';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
import { EmptyStatus } from 'components';
|
||||
|
||||
export default function CustomersEmptyStatus() {
|
||||
const history = useHistory();
|
||||
|
||||
return (
|
||||
<EmptyStatus
|
||||
title={"Create and manage your organization's customers."}
|
||||
description={
|
||||
<p>
|
||||
Here a list of your organization products and services, to be used
|
||||
when you create invoices or bills to your customers or vendors.
|
||||
</p>
|
||||
}
|
||||
action={
|
||||
<>
|
||||
<Button
|
||||
intent={Intent.PRIMARY}
|
||||
large={true}
|
||||
onClick={() => {
|
||||
history.push('/customers/new');
|
||||
}}
|
||||
>
|
||||
New customer
|
||||
</Button>
|
||||
|
||||
<Button intent={Intent.NONE} large={true}>
|
||||
Learn more
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useIntl } from 'react-intl';
|
||||
|
||||
import 'style/pages/Customers/List.scss';
|
||||
|
||||
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
|
||||
|
||||
import CustomersActionsBar from './CustomersActionsBar';
|
||||
import CustomersViewsTabs from './CustomersViewsTabs';
|
||||
import CustomersTable from './CustomersTable';
|
||||
import CustomersAlerts from 'containers/Customers/CustomersAlerts';
|
||||
import { CustomersListProvider } from './CustomersListProvider';
|
||||
|
||||
import withCustomers from './withCustomers';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
|
||||
import { transformTableStateToQuery, compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Customers list.
|
||||
*/
|
||||
function CustomersList({
|
||||
// #withDashboardActions
|
||||
changePageTitle,
|
||||
|
||||
// #withCustomers
|
||||
customersTableState,
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
// Changes the dashboard page title once the page mount.
|
||||
useEffect(() => {
|
||||
changePageTitle(formatMessage({ id: 'customers_list' }));
|
||||
}, [changePageTitle, formatMessage]);
|
||||
|
||||
return (
|
||||
<CustomersListProvider
|
||||
query={transformTableStateToQuery(customersTableState)}
|
||||
>
|
||||
<CustomersActionsBar />
|
||||
|
||||
<DashboardPageContent>
|
||||
<CustomersViewsTabs />
|
||||
<CustomersTable />
|
||||
</DashboardPageContent>
|
||||
<CustomersAlerts />
|
||||
</CustomersListProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDashboardActions,
|
||||
withCustomers(({ customersTableState }) => ({ customersTableState })),
|
||||
)(CustomersList);
|
||||
@@ -0,0 +1,49 @@
|
||||
import React, { createContext } from 'react';
|
||||
|
||||
import DashboardInsider from 'components/Dashboard/DashboardInsider';
|
||||
import { useResourceViews, useCustomers } from 'hooks/query';
|
||||
import { isTableEmptyStatus } from 'utils';
|
||||
|
||||
const CustomersListContext = createContext();
|
||||
|
||||
function CustomersListProvider({ query, ...props }) {
|
||||
// Fetch customers resource views and fields.
|
||||
const {
|
||||
data: customersViews,
|
||||
isLoading: isCustomersViewsLoading,
|
||||
} = useResourceViews('customers');
|
||||
|
||||
// Fetches customers data with pagination meta.
|
||||
const {
|
||||
data: { customers, pagination, filterMeta },
|
||||
isLoading: isCustomersLoading,
|
||||
isFetching: isCustomersFetching,
|
||||
} = useCustomers(query, { keepPreviousData: true });
|
||||
|
||||
// Detarmines the datatable empty status.
|
||||
const isEmptyStatus = isTableEmptyStatus({
|
||||
data: customers, pagination, filterMeta,
|
||||
}) && !isCustomersFetching;
|
||||
|
||||
const state = {
|
||||
customersViews,
|
||||
customers,
|
||||
pagination,
|
||||
|
||||
isCustomersViewsLoading,
|
||||
isCustomersLoading,
|
||||
isCustomersFetching,
|
||||
|
||||
isEmptyStatus,
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardInsider loading={isCustomersViewsLoading} name={'customers-list'}>
|
||||
<CustomersListContext.Provider value={state} {...props} />
|
||||
</DashboardInsider>
|
||||
);
|
||||
}
|
||||
|
||||
const useCustomersListContext = () => React.useContext(CustomersListContext);
|
||||
|
||||
export { CustomersListProvider, useCustomersListContext };
|
||||
@@ -0,0 +1,118 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { useHistory } from 'react-router-dom';
|
||||
|
||||
import CustomersEmptyStatus from './CustomersEmptyStatus';
|
||||
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
|
||||
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
|
||||
|
||||
import { DataTable, Choose } from 'components';
|
||||
import { CLASSES } from 'common/classes';
|
||||
|
||||
import withCustomersActions from './withCustomersActions';
|
||||
import withAlertsActions from 'containers/Alert/withAlertActions';
|
||||
import withDialogActions from 'containers/Dialog/withDialogActions';
|
||||
|
||||
import { useCustomersListContext } from './CustomersListProvider';
|
||||
import { ActionsMenu, useCustomersTableColumns } from './components';
|
||||
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Customers table.
|
||||
*/
|
||||
function CustomersTable({
|
||||
// #withCustomersActions
|
||||
setCustomersTableState,
|
||||
|
||||
// #withAlerts
|
||||
openAlert
|
||||
}) {
|
||||
const history = useHistory();
|
||||
|
||||
// Customers table columns.
|
||||
const columns = useCustomersTableColumns();
|
||||
|
||||
// Customers list context.
|
||||
const {
|
||||
isEmptyStatus,
|
||||
customers,
|
||||
pagination,
|
||||
isCustomersLoading,
|
||||
isCustomersFetching,
|
||||
} = useCustomersListContext();
|
||||
|
||||
// Handle fetch data once the page index, size or sort by of the table change.
|
||||
const handleFetchData = React.useCallback(
|
||||
({ pageSize, pageIndex, sortBy }) => {
|
||||
setCustomersTableState({
|
||||
pageIndex,
|
||||
pageSize,
|
||||
sortBy,
|
||||
});
|
||||
},
|
||||
[setCustomersTableState],
|
||||
);
|
||||
|
||||
// Handles the customer delete action.
|
||||
const handleCustomerDelete = (customer) => {
|
||||
openAlert('customer-delete', { customerId: customer.id })
|
||||
};
|
||||
|
||||
// Handle the customer edit action.
|
||||
const handleCustomerEdit = (customer) => {
|
||||
history.push(`/customers/${customer.id}/edit`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
|
||||
<Choose>
|
||||
<Choose.When condition={isEmptyStatus}>
|
||||
<CustomersEmptyStatus />
|
||||
</Choose.When>
|
||||
|
||||
<Choose.Otherwise>
|
||||
<DataTable
|
||||
noInitialFetch={true}
|
||||
columns={columns}
|
||||
data={customers}
|
||||
|
||||
loading={isCustomersLoading}
|
||||
headerLoading={isCustomersLoading}
|
||||
progressBarLoading={isCustomersFetching}
|
||||
|
||||
onFetchData={handleFetchData}
|
||||
selectionColumn={true}
|
||||
expandable={false}
|
||||
sticky={true}
|
||||
|
||||
spinnerProps={{ size: 30 }}
|
||||
|
||||
pagination={true}
|
||||
manualSortBy={true}
|
||||
manualPagination={true}
|
||||
pagesCount={pagination.pagesCount}
|
||||
|
||||
autoResetSortBy={false}
|
||||
autoResetPage={false}
|
||||
|
||||
TableLoadingRenderer={TableSkeletonRows}
|
||||
TableHeaderSkeletonRenderer={TableSkeletonHeader}
|
||||
|
||||
payload={{
|
||||
onDelete: handleCustomerDelete,
|
||||
onEdit: handleCustomerEdit,
|
||||
}}
|
||||
ContextMenu={ActionsMenu}
|
||||
/>
|
||||
</Choose.Otherwise>
|
||||
</Choose>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default compose(
|
||||
withAlertsActions,
|
||||
withDialogActions,
|
||||
withCustomersActions,
|
||||
)(CustomersTable);
|
||||
@@ -0,0 +1,60 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
|
||||
import { pick } from 'lodash';
|
||||
|
||||
import { DashboardViewsTabs } from 'components';
|
||||
|
||||
import withCustomers from './withCustomers';
|
||||
import withCustomersActions from './withCustomersActions';
|
||||
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
|
||||
|
||||
import { useCustomersListContext } from './CustomersListProvider';
|
||||
import { compose } from 'utils';
|
||||
|
||||
/**
|
||||
* Customers views tabs.
|
||||
*/
|
||||
function CustomersViewsTabs({
|
||||
// #withCustomersActions
|
||||
setCustomersTableState,
|
||||
|
||||
// #withCustomers
|
||||
customersTableState,
|
||||
}) {
|
||||
// Customers list context.
|
||||
const { customersViews } = useCustomersListContext();
|
||||
|
||||
const tabs = useMemo(
|
||||
() =>
|
||||
customersViews.map((view) => pick(view, ['name', 'id']), [
|
||||
customersViews,
|
||||
]),
|
||||
[customersViews],
|
||||
);
|
||||
|
||||
// Handle tabs change.
|
||||
const handleTabsChange = (viewId) => {
|
||||
setCustomersTableState({
|
||||
customViewId: viewId || null,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Navbar className="navbar--dashboard-views">
|
||||
<NavbarGroup align={Alignment.LEFT}>
|
||||
<DashboardViewsTabs
|
||||
customViewId={customersTableState.customViewId}
|
||||
resourceName={'customers'}
|
||||
tabs={tabs}
|
||||
onChange={handleTabsChange}
|
||||
/>
|
||||
</NavbarGroup>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
withDashboardActions,
|
||||
withCustomersActions,
|
||||
withCustomers(({ customersTableState }) => ({ customersTableState })),
|
||||
)(CustomersViewsTabs);
|
||||
143
client/src/containers/Customers/CustomersLanding/components.js
Normal file
143
client/src/containers/Customers/CustomersLanding/components.js
Normal file
@@ -0,0 +1,143 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Intent,
|
||||
} from '@blueprintjs/core';
|
||||
import { Icon, Money } from 'components';
|
||||
import { safeCallback } from 'utils';
|
||||
import { firstLettersArgs } from 'utils';
|
||||
import { useIntl } from 'react-intl';
|
||||
|
||||
/**
|
||||
* Actions menu.
|
||||
*/
|
||||
export function ActionsMenu({
|
||||
row: { original },
|
||||
payload: { onEdit, onDelete },
|
||||
}) {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuItem
|
||||
icon={<Icon icon="reader-18" />}
|
||||
text={formatMessage({ id: 'view_details' })}
|
||||
/>
|
||||
<MenuDivider />
|
||||
<MenuItem
|
||||
icon={<Icon icon="pen-18" />}
|
||||
text={formatMessage({ id: 'edit_customer' })}
|
||||
onClick={safeCallback(onEdit, original)}
|
||||
/>
|
||||
<MenuItem
|
||||
icon={<Icon icon="trash-16" iconSize={16} />}
|
||||
text={formatMessage({ id: 'delete_customer' })}
|
||||
intent={Intent.DANGER}
|
||||
onClick={safeCallback(onDelete, original)}
|
||||
/>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Actions cell.
|
||||
*/
|
||||
export function ActionsCell(props) {
|
||||
return (
|
||||
<Popover
|
||||
content={<ActionsMenu {...props} />}
|
||||
position={Position.RIGHT_BOTTOM}
|
||||
>
|
||||
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Avatar cell.
|
||||
*/
|
||||
export function AvatarCell(row) {
|
||||
return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Phone number accessor.
|
||||
*/
|
||||
export function PhoneNumberAccessor(row) {
|
||||
return (
|
||||
<div>
|
||||
<div className={'work_phone'}>{row.work_phone}</div>
|
||||
<div className={'personal_phone'}>{row.personal_phone}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Balance accessor.
|
||||
*/
|
||||
export function BalanceAccessor(row) {
|
||||
return <Money amount={row.closing_balance} currency={'USD'} />;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retrieve customers table columns.
|
||||
*/
|
||||
export function useCustomersTableColumns() {
|
||||
const { formatMessage } = useIntl();
|
||||
|
||||
return useMemo(
|
||||
() => [
|
||||
{
|
||||
id: 'avatar',
|
||||
Header: '',
|
||||
accessor: AvatarCell,
|
||||
className: 'avatar',
|
||||
width: 50,
|
||||
disableResizing: true,
|
||||
disableSortBy: true,
|
||||
},
|
||||
{
|
||||
id: 'display_name',
|
||||
Header: formatMessage({ id: 'display_name' }),
|
||||
accessor: 'display_name',
|
||||
className: 'display_name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'company_name',
|
||||
Header: formatMessage({ id: 'company_name' }),
|
||||
accessor: 'company_name',
|
||||
className: 'company_name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
id: 'phone_number',
|
||||
Header: formatMessage({ id: 'phone_number' }),
|
||||
accessor: PhoneNumberAccessor,
|
||||
className: 'phone_number',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
id: 'receivable_balance',
|
||||
Header: formatMessage({ id: 'receivable_balance' }),
|
||||
accessor: BalanceAccessor,
|
||||
className: 'receivable_balance',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
Cell: ActionsCell,
|
||||
className: 'actions',
|
||||
width: 70,
|
||||
disableResizing: true,
|
||||
disableSortBy: true,
|
||||
},
|
||||
],
|
||||
[formatMessage],
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { connect } from 'react-redux';
|
||||
import { getCustomersTableStateFactory } from 'store/customers/customers.selectors';
|
||||
|
||||
export default (mapState) => {
|
||||
const getCustomersTableState = getCustomersTableStateFactory();
|
||||
|
||||
const mapStateToProps = (state, props) => {
|
||||
const mapped = {
|
||||
customersTableState: getCustomersTableState(state, props),
|
||||
};
|
||||
return mapState ? mapState(mapped, state, props) : mapped;
|
||||
};
|
||||
return connect(mapStateToProps);
|
||||
};
|
||||
@@ -0,0 +1,10 @@
|
||||
import { connect } from 'react-redux';
|
||||
import {
|
||||
setCustomersTableState
|
||||
} from 'store/customers/customers.actions';
|
||||
|
||||
export const mapDispatchToProps = (dispatch) => ({
|
||||
setCustomersTableState: (state) => dispatch(setCustomersTableState(state)),
|
||||
});
|
||||
|
||||
export default connect(null, mapDispatchToProps);
|
||||
Reference in New Issue
Block a user