QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-15 12:20:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: optimize chart of accounts.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-04-12 17:13:34 +02:00
parent 54e2a43647
commit 4d4191dfc0
14 changed files with 178 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
client/src/components/Accounts/AccountsDataTable.js
View File

@@ -6,6 +6,8 @@ import {
MenuItem,
MenuDivider,
Position,
Classes,
Tooltip,
} from '@blueprintjs/core';
import { useParams } from 'react-router-dom';
import Icon from 'components/Icon';
@@ -16,6 +18,7 @@ import DashboardConnect from 'connectors/Dashboard.connector';
import ViewConnect from 'connectors/View.connector';
import LoadingIndicator from 'components/LoadingIndicator';
import DataTable from 'components/DataTable';
import Money from 'components/Money';
function AccountsDataTable({
accounts,
@@ -45,9 +48,10 @@ function AccountsDataTable({
// Clear page subtitle when unmount the page.
useEffect(() => () => { changePageSubtitle(''); }, []);
const handleEditAccount = account => () => {
const handleEditAccount = useCallback((account) => () => {
openDialog('account-form', { action: 'edit', id: account.id });
};
}, [openDialog]);
const actionMenuList = account => (
<Menu>
<MenuItem text='View Details' />
@@ -64,20 +68,71 @@ function AccountsDataTable({
</Menu>
);
const columns = useMemo(() => [
{
// Build our expander column
id: 'expander', // Make sure it has an ID
className: 'expander',
Header: ({
getToggleAllRowsExpandedProps,
isAllRowsExpanded
}) => (
<span {...getToggleAllRowsExpandedProps()} className="toggle">
{isAllRowsExpanded ?
(<span class="arrow-down" />) :
(<span class="arrow-right" />)
}
</span>
),
Cell: ({ row }) =>
// Use the row.canExpand and row.getToggleRowExpandedProps prop getter
// to build the toggle for expanding a row
row.canExpand ? (
<span
{...row.getToggleRowExpandedProps({
style: {
// We can even use the row.depth property
// and paddingLeft to indicate the depth
// of the row
paddingLeft: `${row.depth * 2}rem`,
},
className: 'toggle',
})}
>
{row.isExpanded ?
(<span class="arrow-down" />) :
(<span class="arrow-right" />)
}
</span>
) : null,
width: 20,
disableResizing: true,
},
{
id: 'name',
Header: 'Account Name',
accessor: 'name',
accessor: row => {
return (row.description) ?
(<Tooltip
className={Classes.TOOLTIP_INDICATOR}
content={row.description}
position={Position.RIGHT_TOP}
hoverOpenDelay={500}>
{ row.name }
</Tooltip>) : row.name;
},
className: 'account_name',
},
{
id: 'code',
Header: 'Code',
accessor: 'code'
accessor: 'code',
className: 'code',
},
{
id: 'type',
Header: 'Type',
accessor: 'type.name'
accessor: 'type.name',
className: 'type',
},
{
id: 'normal',
@@ -96,14 +151,14 @@ function AccountsDataTable({
Header: 'Balance',
Cell: ({ cell }) => {
const account = cell.row.original;
const {balance} = account;
const {balance = null} = account;
return ('undefined' !== typeof balance) ?
(<span>{ balance.amount }</span>) :
(<span>--</span>);
return (balance) ?
(<span>
<Money amount={balance.amount} currency={balance.currency_code} />
</span>) :
(<span class="placeholder">--</span>);
},
// canResize: false,
},
{
id: 'actions',
@@ -111,18 +166,23 @@ function AccountsDataTable({
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}>
position={Position.RIGHT_TOP}>
<Button icon={<Icon icon='ellipsis-h' />} />
</Popover>
),
className: 'actions',
width: 50,
// canResize: false
}
], []);
const handleDatatableFetchData = useCallback(() => {
onFetchData && onFetchData();
const selectionColumn = useMemo(() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
}), [])
const handleDatatableFetchData = useCallback((...params) => {
onFetchData && onFetchData(...params);
}, []);
return (
@@ -132,7 +192,7 @@ function AccountsDataTable({
data={accounts}
onFetchData={handleDatatableFetchData}
manualSortBy={true}
selectionColumn={true} />
selectionColumn={selectionColumn} />
</LoadingIndicator>
);
}

2
client/src/components/DataTable.js
View File

@@ -103,6 +103,8 @@ export default function DataTable({
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
),
className: 'selection',
...(typeof selectionColumn === 'object') ? selectionColumn : {},
}] : [],
...columns,
])

6
client/src/components/Items/ItemsCategoryList.js
View File

@@ -45,7 +45,11 @@ const ItemsCategoryList = ({
Header: 'Description',
accessor: 'description'
},
{
id: 'count',
Header: 'Count',
// accessor: ''
},
{
id: 'actions',
Header: '',

22
client/src/components/JournalEntry/ManualJournalActionsBar.js
View File

@@ -1,4 +1,4 @@
import React, { useMemo, useState } from 'react';
import React, { useMemo, useState, useCallback } from 'react';
import Icon from 'components/Icon';
import {
Button,
@@ -37,9 +37,10 @@ function ManualJournalActionsBar({
);
});
const onClickNewManualJournal = () => {
const onClickNewManualJournal = useCallback(() => {
history.push('/dashboard/accounting/make-journal-entry');
};
}, [history]);
const filterDropdown = FilterDropdown({
fields: manualJournalFields,
onFilterChange: filterConditions => {
@@ -83,12 +84,15 @@ function ManualJournalActionsBar({
icon={<Icon icon='filter' />}
/>
</Popover>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
text='Delete'
intent={Intent.DANGER}
/>
{ (false) && (
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
text='Delete'
intent={Intent.DANGER}
/>
)}
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}

1
client/src/components/JournalEntry/ManualJournalsDataTable.js
View File

@@ -107,6 +107,7 @@ function ManualJournalsDataTable({
Header: 'Note',
accessor: r => (<Icon icon={'file-alt'} iconSize={16} />),
disableResizing: true,
disableSorting: true,
width: 100,
className: 'note',
},

1
client/src/components/JournalEntry/ManualJournalsViewTabs.js
View File

@@ -85,6 +85,7 @@ function ManualJournalsViewTabs({
className='button--new-view'
icon={<Icon icon='plus' />}
onClick={handleClickNewView}
minimal={true}
/>
</Tabs>
</NavbarGroup>

17
client/src/containers/Dashboard/Accounts/AccountsChart.js
View File

@@ -28,6 +28,7 @@ function AccountsChart({
fetchResourceFields,
getResourceFields,
requestFetchAccountsTable,
addAccountsTableQueries
}) {
const [state, setState] = useState({
deleteAlertActive: false,
@@ -116,9 +117,21 @@ function AccountsChart({
console.log(accounts);
};
const handleFilterChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
const handleFilterChanged = useCallback(() => {
fetchAccountsHook.execute();
}, [fetchAccountsHook]);
const handleViewChanged = useCallback(() => { fetchAccountsHook.execute(); }, []);
const handleFetchData = useCallback(() => { fetchAccountsHook.execute(); }, []);
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
addAccountsTableQueries({
...(sortBy.length > 0) ? {
column_sort_by: sortBy[0].id,
sort_by: sortBy[0].desc ? 'desc' : 'asc',
} : {},
});
fetchAccountsHook.execute();
}, [fetchAccountsHook, addAccountsTableQueries]);
return (
<DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>

6
client/src/static/json/icons.js
View File

@@ -36,9 +36,13 @@ export default {
viewBox: '0 0 512 512',
},
"arrow-up": {
path: ['M4.465 263.536l7.07 7.071c4.686 4.686 12.284 4.686 16.971 0L207 92.113V468c0 6.627 5.373 12 12 12h10c6.627 0 12-5.373 12-12V92.113l178.494 178.493c4.686 4.686 12.284 4.686 16.971 0l7.07-7.071c4.686-4.686 4.686-12.284 0-16.97l-211.05-211.05c-4.686-4.686-12.284-4.686-16.971 0L4.465 246.566c-4.687 4.686-4.687 12.284 0 16.97z'],
path: ['M6.101 261.899L25.9 281.698c4.686 4.686 12.284 4.686 16.971 0L198 126.568V468c0 6.627 5.373 12 12 12h28c6.627 0 12-5.373 12-12V126.568l155.13 155.13c4.686 4.686 12.284 4.686 16.971 0l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L232.485 35.515c-4.686-4.686-12.284-4.686-16.971 0L6.101 244.929c-4.687 4.686-4.687 12.284 0 16.97z'],
viewBox: '0 0 448 512'
},
"arrow-down": {
path: ['M441.9 250.1l-19.8-19.8c-4.7-4.7-12.3-4.7-17 0L250 385.4V44c0-6.6-5.4-12-12-12h-28c-6.6 0-12 5.4-12 12v341.4L42.9 230.3c-4.7-4.7-12.3-4.7-17 0L6.1 250.1c-4.7 4.7-4.7 12.3 0 17l209.4 209.4c4.7 4.7 12.3 4.7 17 0l209.4-209.4c4.7-4.7 4.7-12.3 0-17z'],
viewBox: '0 0 448 512'
},
"ellipsis-h": {
path: ['M304 256c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48zm120-48c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48zm-336 0c-26.5 0-48 21.5-48 48s21.5 48 48 48 48-21.5 48-48-21.5-48-48-48z'],
viewBox: '0 0 512 512',

8
client/src/style/App.scss
View File

@@ -9,6 +9,8 @@ $pt-popover-box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02), 0 2px 4px rgba(16, 22,
$menu-item-color-hover: $light-gray4;
$menu-item-color-active: $light-gray3;
$breadcrumbs-collapsed-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#6B8193' enable-background='new 0 0 16 16' xml:space='preserve'><g><circle cx='2' cy='8.03' r='2'/><circle cx='14' cy='8.03' r='2'/><circle cx='8' cy='8.03' r='2'/></g></svg>");
// Blueprint framework.
@import "@blueprintjs/core/src/blueprint.scss";
@import "@blueprintjs/datetime/src/blueprint-datetime.scss";
@@ -27,6 +29,12 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
// Components
@import "components/data-table";
@import "components/dialog";
.bp3-breadcrumbs-collapsed::before{
background: escape-svg($breadcrumbs-collapsed-icon) center center;
width: 15px;
height: 15px;
}
// Pages
@import "pages/dashboard";

18
client/src/style/components/data-table.scss
View File

@@ -4,19 +4,27 @@
overflow-x: auto;
overflow-y: hidden;
.dashboard__page-content &{
.table .thead{
.th{
border-bottom-color: #eaeaea;
}
}
}
.table {
text-align: left;
border-spacing: 0;
min-width: 100%;
display: block;
// width: 100%;
.thead{
overflow-y: auto;
overflow-x: hidden;
.th{
padding: 1rem 0.5rem;
padding: 0.8rem 0.5rem;
background: #F8FAFA;
font-size: 14px;
color: #555;
@@ -109,13 +117,17 @@
.tr .td{
border-bottom: 1px solid #E0E2E2;
align-items: center;
.placeholder{
color: #999;
}
}
.td.actions .#{$ns}-button{
background: #E6EFFB;
border: 0;
box-shadow: none;
padding: 5px 15px;
border-radius: 2px;
border-radius: 5px;
&:hover,
&:focus{

2
client/src/style/objects/typography.scss
View File

@@ -1,7 +1,7 @@
body{
color: #212529;
color: #444;
}
.#{$ns}-heading{

36
client/src/style/pages/accounts-chart.scss
View File

@@ -2,12 +2,45 @@
.dashboard__insider--accounts-chart{
.bigcapital-datatable{
.normal{
.#{$ns}-icon{
color: #666;
color: #aaa;
padding-left: 15px;
}
}
.table{
.thead,
.tbody{
.th.selection,
.td.selection{
padding-left: 18px;
}
}
.tbody{
.tr .td{
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.account_name{
font-weight: 500;
.bp3-tooltip-indicator{
cursor: default;
border-bottom-color: #c6c6c6;
}
}
.code{
color: #666;
}
.actions{
padding-right: 18px;
justify-content: right;
}
}
}
}
}
@@ -48,7 +81,6 @@
.form-group--parent-account{
margin-bottom: 35px;
}
.form-group--account-code{
margin-bottom: 16px;
}

2
client/src/style/pages/financial-statements.scss
View File

@@ -44,7 +44,7 @@
width: auto;
padding: 30px 20px;
max-width: 100%;
margin: 35px auto;
margin: 25px auto 35px;
min-height: 400px;
display: flex;
flex-direction: column;