feat: optimize chart of accounts.

2026-02-14 20:00:33 +00:00 · 2020-04-12 17:13:34 +02:00
parent 54e2a43647
commit 4d4191dfc0
14 changed files with 178 additions and 36 deletions
--- a/client/src/components/Accounts/AccountsDataTable.js
+++ b/client/src/components/Accounts/AccountsDataTable.js
@@ -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>    
  );
 }
--- a/client/src/components/DataTable.js
+++ b/client/src/components/DataTable.js
@@ -103,6 +103,8 @@ export default function DataTable({
              <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
            </div>
          ),
+          className: 'selection',
+          ...(typeof selectionColumn === 'object') ? selectionColumn : {},
        }] : [],
        ...columns,
      ])
--- a/client/src/components/Items/ItemsCategoryList.js
+++ b/client/src/components/Items/ItemsCategoryList.js
@@ -45,7 +45,11 @@ const ItemsCategoryList = ({
        Header: 'Description',
        accessor: 'description'
      },
-
+      {
+        id: 'count',
+        Header: 'Count',
+        // accessor: ''
+      },
      {
        id: 'actions',
        Header: '',
--- a/client/src/components/JournalEntry/ManualJournalActionsBar.js
+++ b/client/src/components/JournalEntry/ManualJournalActionsBar.js
@@ -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' />}
--- a/client/src/components/JournalEntry/ManualJournalsDataTable.js
+++ b/client/src/components/JournalEntry/ManualJournalsDataTable.js
@@ -107,6 +107,7 @@ function ManualJournalsDataTable({
      Header: 'Note',
      accessor: r => (<Icon icon={'file-alt'} iconSize={16} />),
      disableResizing: true,
+      disableSorting: true,
      width: 100,
      className: 'note',
    },
--- a/client/src/components/JournalEntry/ManualJournalsViewTabs.js
+++ b/client/src/components/JournalEntry/ManualJournalsViewTabs.js
@@ -85,6 +85,7 @@ function ManualJournalsViewTabs({
            className='button--new-view'
            icon={<Icon icon='plus' />}
            onClick={handleClickNewView}
+            minimal={true}
          />
        </Tabs>
      </NavbarGroup>
--- a/client/src/containers/Dashboard/Accounts/AccountsChart.js
+++ b/client/src/containers/Dashboard/Accounts/AccountsChart.js
@@ -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'}>
--- a/client/src/static/json/icons.js
+++ b/client/src/static/json/icons.js
@@ -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',
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -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";
--- a/client/src/style/components/data-table.scss
+++ b/client/src/style/components/data-table.scss
@@ -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{
--- a/client/src/style/objects/typography.scss
+++ b/client/src/style/objects/typography.scss
@@ -1,7 +1,7 @@


 body{
-  color: #212529;
+  color: #444;
 }

 .#{$ns}-heading{
--- a/client/src/style/pages/accounts-chart.scss
+++ b/client/src/style/pages/accounts-chart.scss
@@ -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;
    }
--- a/client/src/style/pages/financial-statements.scss
+++ b/client/src/style/pages/financial-statements.scss
@@ -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;
--- a/server/src/http/controllers/Accounts.js
+++ b/server/src/http/controllers/Accounts.js
@@ -282,6 +282,7 @@ export default {
      const accounts = await Account.query().onBuild((builder) => {
        builder.modify('filterAccountTypes', filter.account_types);
        builder.withGraphFetched('type');
+        builder.withGraphFetched('balance');

        // Build custom view conditions query.
        if (viewConditionals.length > 0) {