feat: optimize style of account drawer.

2026-02-19 06:10:31 +00:00 · 2021-05-02 22:28:05 +02:00
parent 279dfb012c
commit 8275d3d395
11 changed files with 156 additions and 44 deletions
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerActionBar.js
@@ -28,8 +28,6 @@ function AccountDrawerActionBar({
  // #ownProps
  account,
 }) {
-
-
  // Handle new child button click.
  const onNewChildAccount = () => {
    openDialog('account-form', {
@@ -69,9 +67,9 @@ function AccountDrawerActionBar({
        />
        <Button
          className={Classes.MINIMAL}
-          icon={<Icon style={{ color: 'red' }} icon="trash-18" iconSize={18} />}
+          icon={<Icon icon="trash-18" iconSize={18} />}
          text={<T id={'delete'} />}
-          // intent={Intent.DANGER}
+          intent={Intent.DANGER}
          onClick={safeCallback(onDeleteAccount)}
        />
      </NavbarGroup>
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerContent.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerContent.js
@@ -8,10 +8,11 @@ import AccountDrawerDetails from './AccountDrawerDetails';
 export default function AccountDrawerContent({
  // #ownProp
  accountId,
+  name
 }) {
  return (
-    <AccountDrawerProvider accountId={accountId}>
+    <AccountDrawerProvider name={name} accountId={accountId}>
      <AccountDrawerDetails />
    </AccountDrawerProvider>
  );
-}
+}
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage as T } from 'react-intl';
-import { If, Money } from 'components';
+import { Icon, Money } from 'components';

 /**
 *  Account drawer header.
@@ -23,17 +23,24 @@ export default function AccountDrawerHeader({
          {<Money amount={amount} currency={currency_code} />}
        </p>
      </div>
-      <div>
+      <div class={'account-type'}>
        <span>
          <T id={'account_type'} />
        </span>
        <p>{account_type_label}</p>
      </div>
-      <div>
+      <div class={'account-normal'}>
        <span>
          <T id={'account_normal'} />
        </span>
-        <p> {account_normal}</p>
+        <p>
+          {' '}
+          {account_normal}{' '}
+          <Icon
+            iconSize={14}
+            icon={`arrow-${account_normal === 'credit' ? 'down' : 'up'}`}
+          />
+        </p>
      </div>
      <div>
        <span>
@@ -49,12 +56,10 @@ export default function AccountDrawerHeader({
      </div>

      <p className={'account-drawer__content--desc'}>
-        <If condition={description}>
-          <b>
-            <T id={'description'} />
-          </b>
-          : {description}
-        </If>
+        <b>
+          <T id={'description'} />
+        </b>
+        : {description ? description : '--'}
      </p>
    </div>
  );
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
@@ -7,7 +7,7 @@ const AccountDrawerContext = React.createContext();
 /**
 * Account drawer provider.
 */
-function AccountDrawerProvider({ accountId, ...props }) {
+function AccountDrawerProvider({ accountId, name, ...props }) {
  // Fetches the specific account details.
  const { data: account, isLoading: isAccountLoading } = useAccount(accountId, {
    enabled: !!accountId,
@@ -20,18 +20,19 @@ function AccountDrawerProvider({ accountId, ...props }) {
  } = useAccountTransactions(accountId, {
    enabled: !!accountId,
  });
-  const name = `${account.name} ${account.code}`;
+  const drawerTitle = `${account.name} ${account.code}`;

  // provider.
  const provider = {
    accountId,
    account,
    accounts,
+    drawerName: name,
  };

  return (
    <DashboardInsider loading={isAccountLoading || isAccountsLoading}>
-      <DrawerHeaderContent name={'account-drawer'} title={name} />
+      <DrawerHeaderContent name={'account-drawer'} title={drawerTitle} />
      <AccountDrawerContext.Provider value={provider} {...props} />
    </DashboardInsider>
  );
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
@@ -1,18 +1,23 @@
 import React from 'react';
 import moment from 'moment';
+import { Link } from 'react-router-dom';
 import { useAccountDrawerContext } from './AccountDrawerProvider';

 import { formatMessage } from 'services/intl';
 import { DataTable, Money } from 'components';
-import { isBlank } from 'utils';
+import { isBlank, compose } from 'utils';
+import withDrawerActions from 'containers/Drawer/withDrawerActions';

 /**
 * account drawer table.
 */
-export default function AccountDrawerTable() {
+function AccountDrawerTable({
+  closeDrawer
+}) {
  const {
    account: { currency_code },
    accounts,
+    drawerName
  } = useAccountDrawerContext();

  const columns = React.useMemo(
@@ -45,16 +50,33 @@ export default function AccountDrawerTable() {
      },
      {
        Header: formatMessage({ id: 'running_balance' }),
-        accessor: 'balance',
+        accessor: ({ running_balance }) => (
+          <Money amount={running_balance} currency={currency_code} />
+        ),
        width: 110,
      },
    ],
    [],
  );

+  // Handle view more link click.
+  const handleLinkClick = () => {
+    closeDrawer(drawerName);
+  };
+
  return (
    <div className={'account-drawer__table'}>
      <DataTable columns={columns} data={accounts} />
+
+      <div class="account-drawer__table-footer">
+        <Link to={`/financial-reports/general-ledger`} onClick={handleLinkClick}>
+          ← View more transactions.
+        </Link>
+      </div>
    </div>
  );
 }
+
+export default compose(
+  withDrawerActions
+)(AccountDrawerTable);
--- a/client/src/containers/Drawers/AccountDrawer/index.js
+++ b/client/src/containers/Drawers/AccountDrawer/index.js
@@ -11,15 +11,15 @@ const AccountDrawerContent = lazy(() => import('./AccountDrawerContent'));
 */
 function AccountDrawer({
  name,
-  //#withDrawer
+  // #withDrawer
  isOpen,
  payload: { accountId },
 }) {

  return (
-    <Drawer isOpen={isOpen} name={name}>
+    <Drawer isOpen={isOpen} name={name} size={'900px'}>
      <DrawerSuspense>
-        <AccountDrawerContent accountId={accountId} />
+        <AccountDrawerContent name={name} accountId={accountId} />
      </DrawerSuspense>
    </Drawer>
  );
--- a/client/src/containers/Drawers/ManualJournalDrawer/index.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/index.js
@@ -19,7 +19,7 @@ function ManualJournalDrawer({
  payload: { manualJournalId },
 }) {
  return (
-    <Drawer isOpen={isOpen} name={name}>
+    <Drawer isOpen={isOpen} name={name} size={'900px'}>
      <DrawerSuspense>
        <ManualJournalDrawerContent manualJournalId={manualJournalId} />
      </DrawerSuspense>
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -176,3 +176,8 @@ body.hide-scrollbar .Pane2 {

 .ReactVirtualized__List {
 }
+
+
+.bp3-drawer{
+  box-shadow: 0 0 0;
+}
--- a/client/src/style/components/Drawer/AccountDrawer.scss
+++ b/client/src/style/components/Drawer/AccountDrawer.scss
@@ -1,3 +1,15 @@
+.bp3-drawer-header {
+  box-shadow: 0 0 0;
+
+  .bp3-heading{
+    font-size: 16px;
+  }
+  .bp3-button{
+    min-height: 28px;
+    min-width: 28px;
+  }
+}
+
 .account-drawer {
  background-color: #fbfbfb;

@@ -9,30 +21,47 @@
    padding: 15px;
    background: white;
    border: 1px solid #d2dce2;
-    color: #666666;

-    > div {
+    > div{
      flex-grow: 1;
      font-size: 14px;
      margin: 15px 0;

+      > span {
+        color: #666666;
+        font-weight: 500;
+      }
+
      .balance,
      p {
        text-transform: capitalize;
        margin: 5px 0;
      }
+
      .balance {
-        font-size: 26px;
-        font-weight: 500;
-        color: #000;
-        margin: 10px 0;
+        font-size: 28px;
+        color: #c06361;
+        margin: 6px 0;
+        font-weight: 600;
+        margin-bottom: 0;
+      }
+
+      &.account-normal{
+
+        .bp3-icon{
+          position: relative;
+          top: -2px;
+          margin-left: 2px;
+
+          svg{
+            fill: #6a7994;
+          }
+        }
      }
    }
+
    &--desc {
      flex-basis: 100%;
-      b {
-        color: #000;
-      }
    }
  }

@@ -42,15 +71,26 @@
    border: 1px solid #d2dce2;

    .table {
-      .thead .tr .th .resizer {
-        display: none;
+      .thead {
+        .tr .th {
+          padding: 0.7rem 0.8rem;
+          font-weight: 500;
+        }
      }
-      .thead .th,
+
      .tbody .tr .td {
        padding: 0.8rem;
-        font-size: 14px;
-        font-weight: 400;
-        color: #666666;
+      }
+    }
+
+    &-footer{
+      padding: 12px 14px;
+      display: inline-block;
+      
+      a{
+        text-decoration: underline;
+        font-size: 12px;
+        color: #37639c;
      }
    }
  }
@@ -64,16 +104,19 @@
  height: 100%;

  scrollbar-width: none;
+
  &::-webkit-scrollbar {
    display: none;
  }
+
  .bp3-drawer-header {
    margin-bottom: 2px;
    box-shadow: (0, 0, 0);
    background-color: #6a7993;
+
    .bp3-heading,
    .bp3-icon {
      color: white;
    }
  }
-}
+}
--- a/server/src/api/controllers/Accounts.ts
+++ b/server/src/api/controllers/Accounts.ts
@@ -353,7 +353,9 @@ export default class AccountsController extends BaseController {
        tenantId,
        transactionsFilter
      );
-      return res.status(200).send({ transactions });
+      return res.status(200).send({
+        transactions: this.transfromToResponse(transactions),
+      });
    } catch (error) {
      next(error);
    }
--- a/server/src/services/Accounts/AccountsService.ts
+++ b/server/src/services/Accounts/AccountsService.ts
@@ -20,6 +20,7 @@ import DynamicListingService from 'services/DynamicListing/DynamicListService';
 import events from 'subscribers/events';
 import AccountTypesUtils from 'lib/AccountTypes';
 import { ERRORS } from './constants';
+import { transaction } from 'objection';

@Service()
 export default class AccountsService {
@@ -631,6 +632,30 @@ export default class AccountsService {
    };
  }

+
+  runningBalanceFromClosing(
+    transactions: IAccountTransaction[],
+    closingBalance: number,
+    accountNormal: string,
+  ) {
+    let remain = closingBalance;
+
+    return transactions.map((entry, index) => {
+      const { credit, debit } = entry;
+      const amount = accountNormal === 'credit' ?
+        credit - debit : debit - credit;
+
+      const runningBalance = Math.min(amount, remain);
+      const output = {
+        ...entry.toJSON(),
+        runningBalance: remain,
+        runningBalanceFormatted: remain,
+      };
+      remain -= Math.max(runningBalance, 0);
+      return output;
+    });
+  }
+
  /**
   * Retrieve the accounts transactions.
   * @param {number} tenantId -
@@ -642,6 +667,9 @@ export default class AccountsService {
  ): Promise<{ transactions: IAccountTransaction }> {
    const { AccountTransaction } = this.tenancy.models(tenantId);

+    // Retrieve the given account or throw not found error.
+    const account = await this.getAccountOrThrowError(tenantId, filter.accountId);
+
    this.logger.info('[accounts] trying to get accounts transactions list.');
    const transactions = await AccountTransaction.query().onBuild((query) => {
      query.orderBy('date', 'DESC');
@@ -652,7 +680,14 @@ export default class AccountsService {
      query.withGraphFetched('account');
      query.withGraphFetched('contact');
    });
-    return { transactions };
+
+    return {
+      transactions: this.runningBalanceFromClosing(
+        transactions,
+        account.amount,
+        account.accountNormal,
+      )
+    };
  }

  /**