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

feat: optimize account details.

Browse Source
This commit is contained in:
a.bouhuolia
2021-12-21 20:29:51 +02:00
parent 661cbaf11e
commit 10c421dea0
2 changed files with 24 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
View File

@@ -1,26 +1,23 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import intl from 'react-intl-universal'; import intl from 'react-intl-universal';
import styled from 'styled-components';
import { useAccountDrawerContext } from './AccountDrawerProvider'; import { useAccountDrawerContext } from './AccountDrawerProvider';
import { DataTable, If } from 'components'; import { Card, DataTable, If } from 'components';
import { compose } from 'utils'; import { compose } from 'utils';
import { useAccountReadEntriesColumns } from './utils'; import { useAccountReadEntriesColumns } from './utils';
import withDrawerActions from 'containers/Drawer/withDrawerActions'; import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { TableStyle } from '../../../common';
/** /**
* account drawer table. * account drawer table.
*/ */
function AccountDrawerTable({ closeDrawer }) { function AccountDrawerTable({ closeDrawer }) {
const { const { account, accounts, drawerName } = useAccountDrawerContext();
account,
accounts,
drawerName,
} = useAccountDrawerContext();
// Account read-only entries table columns. // Account read-only entries table columns.
const columns = useAccountReadEntriesColumns(); const columns = useAccountReadEntriesColumns();
@@ -31,21 +28,34 @@ function AccountDrawerTable({ closeDrawer }) {
}; };
return ( return (
<div className={'account-drawer__table'}> <Card>
<DataTable columns={columns} data={accounts} payload={{ account }}/> <DataTable
columns={columns}
data={accounts}
payload={{ account }}
styleName={TableStyle.Constrant}
/>
<If condition={accounts.length > 0}> <If condition={accounts.length > 0}>
<div class="account-drawer__table-footer"> <TableFooter>
<Link <Link
to={`/financial-reports/general-ledger`} to={`/financial-reports/general-ledger`}
onClick={handleLinkClick} onClick={handleLinkClick}
> >
← {intl.get('view_more_transactions')} ← {intl.get('view_more_transactions')}
</Link> </Link>
</div> </TableFooter>
</If> </If>
</div> </Card>
); );
} }
export default compose(withDrawerActions)(AccountDrawerTable); export default compose(withDrawerActions)(AccountDrawerTable);
const TableFooter = styled.div`
padding: 6px 14px;
display: block;
border-top: 1px solid #d2dde2;
border-bottom: 1px solid #d2dde2;
font-size: 12px;
`;

31
src/style/components/Drawers/AccountDrawer.scss
View File

@@ -1,7 +1,6 @@
.account-drawer { .account-drawer {
background-color: #fbfbfb;
.card-header{ .card-header{
margin: 15px; margin: 15px;
@@ -35,34 +34,4 @@
} }
} }
} }
&__table {
margin: 18px;
background: #fff;
border: 1px solid #d2dce2;
.table {
.thead {
.tr .th {
padding: 0.7rem 0.8rem;
font-weight: 500;
}
}
.tbody .tr .td {
padding: 0.6rem 0.8rem;
}
}
&-footer{
padding: 10px 14px;
display: inline-block;
a{
text-decoration: underline;
font-size: 12px;
color: #37639c;
}
}
}
} }