mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-18 22:00:31 +00:00
WIP
This commit is contained in:
Ahmed Bouhuolia
99
client/src/components/Accounts/AccountsActionsBar.js
Normal file
99
client/src/components/Accounts/AccountsActionsBar.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import Icon from 'components/Icon';
|
||||
import {
|
||||
Button,
|
||||
NavbarGroup,
|
||||
Navbar,
|
||||
Classes,
|
||||
NavbarDivider,
|
||||
MenuItem,
|
||||
Menu,
|
||||
Popover,
|
||||
PopoverInteractionKind,
|
||||
Position,
|
||||
} from "@blueprintjs/core";
|
||||
import classNames from 'classnames';
|
||||
import {connect} from 'react-redux';
|
||||
import {useRouteMatch} from 'react-router-dom';
|
||||
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
import {compose} from 'utils';
|
||||
|
||||
function AccountsActionsBar({
|
||||
openDialog,
|
||||
views,
|
||||
bulkActions,
|
||||
}) {
|
||||
const {path} = useRouteMatch();
|
||||
const onClickNewAccount = () => { openDialog('account-form', {}); };
|
||||
|
||||
const viewsMenuItems = views.map((view) => {
|
||||
return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
|
||||
});
|
||||
|
||||
const hasBulkActionsSelected = useMemo(() => {
|
||||
return Object.keys(bulkActions).length > 0;
|
||||
}, [bulkActions]);
|
||||
|
||||
return (
|
||||
<DashboardActionsBar>
|
||||
<NavbarGroup>
|
||||
<Popover
|
||||
content={<Menu>{viewsMenuItems}</Menu>}
|
||||
minimal={true}
|
||||
interactionKind={PopoverInteractionKind.HOVER}
|
||||
position={Position.BOTTOM_LEFT}>
|
||||
|
||||
<Button
|
||||
className={classNames(Classes.MINIMAL, 'button--table-views')}
|
||||
icon={ <Icon icon="table" /> }
|
||||
text="Table Views"
|
||||
rightIcon={'caret-down'} />
|
||||
</Popover>
|
||||
|
||||
<NavbarDivider />
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={ <Icon icon="plus" /> }
|
||||
text="New Account"
|
||||
onClick={onClickNewAccount} />
|
||||
|
||||
{hasBulkActionsSelected && (
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={ <Icon icon="trash" />}
|
||||
text="Archive" />)}
|
||||
|
||||
{hasBulkActionsSelected && (
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={ <Icon icon="trash" />}
|
||||
text="Delete" />)}
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={ <Icon icon="file-import" /> }
|
||||
text="Import" />
|
||||
|
||||
<Button
|
||||
className={Classes.MINIMAL}
|
||||
icon={ <Icon icon="file-export" /> }
|
||||
text="Export" />
|
||||
</NavbarGroup>
|
||||
</DashboardActionsBar>
|
||||
)
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
bulkActions: state.accounts.bulkActions,
|
||||
};
|
||||
};
|
||||
|
||||
export default compose(
|
||||
DialogConnect,
|
||||
AccountsConnect,
|
||||
connect(mapStateToProps),
|
||||
)(AccountsActionsBar);
|
||||
168
client/src/components/Accounts/AccountsDataTable.js
Normal file
168
client/src/components/Accounts/AccountsDataTable.js
Normal file
@@ -0,0 +1,168 @@
|
||||
import {
|
||||
GridComponent,
|
||||
ColumnsDirective,
|
||||
ColumnDirective,
|
||||
Inject,
|
||||
Sort,
|
||||
} from '@syncfusion/ej2-react-grids';
|
||||
import React, {useEffect} from 'react';
|
||||
import {
|
||||
Button,
|
||||
Popover,
|
||||
Menu,
|
||||
MenuItem,
|
||||
MenuDivider,
|
||||
Position,
|
||||
Checkbox,
|
||||
} from '@blueprintjs/core';
|
||||
import {useParams} from 'react-router-dom';
|
||||
import useAsync from 'hooks/async';
|
||||
import Icon from 'components/Icon';
|
||||
import { handleBooleanChange, compose } from 'utils';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
import DialogConnect from 'connectors/Dialog.connector';
|
||||
import DashboardConnect from 'connectors/Dashboard.connector';
|
||||
import ViewConnect from 'connectors/View.connector';
|
||||
import LoadingIndicator from 'components/LoadingIndicator';
|
||||
|
||||
function AccountsDataTable({
|
||||
accounts,
|
||||
onDeleteAccount,
|
||||
onInactiveAccount,
|
||||
openDialog,
|
||||
addBulkActionAccount,
|
||||
removeBulkActionAccount,
|
||||
fetchAccounts,
|
||||
changeCurrentView,
|
||||
changePageSubtitle,
|
||||
getViewItem,
|
||||
setTopbarEditView
|
||||
}) {
|
||||
const { custom_view_id: customViewId } = useParams();
|
||||
|
||||
// Fetch accounts list according to the given custom view id.
|
||||
const fetchHook = useAsync(async () => {
|
||||
await Promise.all([
|
||||
fetchAccounts({ custom_view_id: customViewId }),
|
||||
]);
|
||||
});
|
||||
// Refetch accounts list after custom view id change.
|
||||
useEffect(() => {
|
||||
const viewMeta = getViewItem(customViewId);
|
||||
fetchHook.execute();
|
||||
|
||||
if (customViewId) {
|
||||
changeCurrentView(customViewId);
|
||||
setTopbarEditView(customViewId);
|
||||
}
|
||||
if (customViewId && viewMeta) {
|
||||
changePageSubtitle(viewMeta.name);
|
||||
} else {
|
||||
changePageSubtitle('');
|
||||
}
|
||||
}, [customViewId]);
|
||||
|
||||
useEffect(() => () => {
|
||||
// Clear page subtitle when unmount the page.
|
||||
changePageSubtitle('');
|
||||
}, []);
|
||||
|
||||
const handleEditAccount = (account) => () => {
|
||||
openDialog('account-form', {action: 'edit', id: account.id});
|
||||
};
|
||||
const actionMenuList = (account) =>
|
||||
(<Menu>
|
||||
<MenuItem text="View Details" />
|
||||
<MenuDivider />
|
||||
<MenuItem text="Edit Account" onClick={handleEditAccount(account)} />
|
||||
<MenuItem text="New Account" />
|
||||
<MenuDivider />
|
||||
<MenuItem text="Inactivate Account" onClick={() => onInactiveAccount(account)} />
|
||||
<MenuItem text="Delete Account" onClick={() => onDeleteAccount(account)} />
|
||||
</Menu>);
|
||||
|
||||
const handleClickCheckboxBulk = (account) => handleBooleanChange((value) => {
|
||||
if (value) {
|
||||
addBulkActionAccount(account.id);
|
||||
} else {
|
||||
removeBulkActionAccount(account.id);
|
||||
}
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
field: '',
|
||||
headerText: '',
|
||||
template: (account) => (<Checkbox onChange={handleClickCheckboxBulk(account)} />),
|
||||
customAttributes: {class: 'checkbox-row'}
|
||||
},
|
||||
{
|
||||
field: 'name',
|
||||
headerText: 'Account Name',
|
||||
customAttributes: {class: 'account-name'},
|
||||
},
|
||||
{
|
||||
field: 'code',
|
||||
headerText: 'Code',
|
||||
},
|
||||
{
|
||||
field: 'type.name',
|
||||
headerText: 'Type',
|
||||
},
|
||||
{
|
||||
headerText: 'Normal',
|
||||
template: (column) => {
|
||||
const type = column.type ? column.type.normal : '';
|
||||
return type === 'credit' ? (<Icon icon={'arrow-down'} />) : ((<Icon icon={'arrow-up'} />));
|
||||
},
|
||||
customAttributes: {class: 'account-normal'},
|
||||
},
|
||||
{
|
||||
field: 'balance',
|
||||
headerText: 'Balance',
|
||||
template: (column, data) => { return <span>$10,000</span>; },
|
||||
},
|
||||
{
|
||||
headerText: '',
|
||||
template: (account) => (
|
||||
<Popover content={actionMenuList(account)} position={Position.RIGHT_BOTTOM}>
|
||||
<Button icon={<Icon icon="ellipsis-h" />} />
|
||||
</Popover>
|
||||
),
|
||||
}
|
||||
];
|
||||
|
||||
const dataStateChange = (state) => {
|
||||
|
||||
}
|
||||
return (
|
||||
<LoadingIndicator loading={fetchHook.pending} spinnerSize={30}>
|
||||
<GridComponent
|
||||
allowSorting={true}
|
||||
allowGrouping={true}
|
||||
dataSource={{result: accounts, count: 12}}
|
||||
dataStateChange={dataStateChange}
|
||||
>
|
||||
<ColumnsDirective>
|
||||
{columns.map((column) => {
|
||||
return (<ColumnDirective
|
||||
field={column.field}
|
||||
headerText={column.headerText}
|
||||
template={column.template}
|
||||
allowSorting={true}
|
||||
customAttributes={column.customAttributes}
|
||||
/>);
|
||||
})}
|
||||
</ColumnsDirective>
|
||||
<Inject services={[Sort]} />
|
||||
</GridComponent>
|
||||
</LoadingIndicator>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(
|
||||
AccountsConnect,
|
||||
DialogConnect,
|
||||
DashboardConnect,
|
||||
ViewConnect,
|
||||
)(AccountsDataTable);
|
||||
54
client/src/components/Accounts/AccountsViewsTabs.js
Normal file
54
client/src/components/Accounts/AccountsViewsTabs.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import React from 'react';
|
||||
import {useHistory} from 'react-router';
|
||||
import {connect} from 'react-redux';
|
||||
import {
|
||||
Alignment,
|
||||
Navbar,
|
||||
NavbarGroup,
|
||||
Tabs,
|
||||
Tab,
|
||||
Button
|
||||
} from "@blueprintjs/core";
|
||||
import {useParams} from 'react-router-dom';
|
||||
import Icon from 'components/Icon';
|
||||
import {Link} from 'react-router-dom';
|
||||
import {compose} from 'utils';
|
||||
import AccountsConnect from 'connectors/Accounts.connector';
|
||||
|
||||
function AccountsViewsTabs({ views }) {
|
||||
const history = useHistory();
|
||||
const { custom_view_id: customViewId } = useParams();
|
||||
|
||||
const handleClickNewView = () => {
|
||||
history.push('/dashboard/custom_views/accounts/new');
|
||||
};
|
||||
const tabs = views.map((view) => {
|
||||
const baseUrl = '/dashboard/accounts';
|
||||
const link = (<Link to={`${baseUrl}/${view.id}/custom_view`}>{ view.name }</Link>);
|
||||
return (<Tab id={`custom_view_${view.id}`} title={link} />);
|
||||
});
|
||||
return (
|
||||
<Navbar className="navbar--dashboard-views">
|
||||
<NavbarGroup
|
||||
align={Alignment.LEFT}>
|
||||
<Tabs
|
||||
id="navbar"
|
||||
large={true}
|
||||
selectedTabId={`custom_view_${customViewId}`}
|
||||
className="tabs--dashboard-views">
|
||||
<Tab
|
||||
id="all"
|
||||
title={<Link to={`/dashboard/accounts`}>All</Link>} />
|
||||
|
||||
{ tabs }
|
||||
<Button
|
||||
className="button--new-view"
|
||||
icon={<Icon icon="plus" />}
|
||||
onClick={handleClickNewView} />
|
||||
</Tabs>
|
||||
</NavbarGroup>
|
||||
</Navbar>
|
||||
);
|
||||
}
|
||||
|
||||
export default compose(AccountsConnect)(AccountsViewsTabs);
|
||||
Reference in New Issue
Block a user