faet: Account Transcations.

src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Button, NavbarGroup, Classes, NavbarDivider } from '@blueprintjs/core';
+import {
+  Icon,
+  DashboardRowsHeightButton,
+  FormattedMessage as T,
+} from 'components';
+
+import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
+import { CashFlowMenuItems } from './utils';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+
+import withDialogActions from 'containers/Dialog/withDialogActions';
+import withSettings from '../../Settings/withSettings';
+import withSettingsActions from '../../Settings/withSettingsActions';
+import { addMoneyIn, addMoneyOut } from '../../../common/cashflowOptions';
+
+import { compose } from 'utils';
+
+function AccountTransactionsActionsBar({
+  // #withDialogActions
+  openDialog,
+
+  // #withSettings
+  cashflowTansactionsTableSize,
+  // #withSettingsActions
+  addSetting,
+}) {
+  // Handle table row size change.
+  const handleTableRowSizeChange = (size) => {
+    addSetting('cashflowTransactions', 'tableSize', size);
+  };
+  const { accountId } = useAccountTransactionsContext();
+
+  //Handle money in form
+  const handleMoneyInFormTransaction = (value) => {
+    openDialog('money-in', {
+      account_type: value.type,
+      account_id: accountId.id,
+    });
+  };
+
+  //Handle money out form
+  const handlMoneyOutFormTransaction = (value) => {
+    openDialog('money-out', {
+      account_type: value.type,
+      account_id: accountId.id,
+    });
+  };
+  return (
+    <DashboardActionsBar>
+      <NavbarGroup>
+        <CashFlowMenuItems
+          items={addMoneyIn}
+          onItemSelect={handleMoneyInFormTransaction}
+          text={<T id={'cash_flow.label.add_money_in'} />}
+        />
+        <CashFlowMenuItems
+          items={addMoneyOut}
+          onItemSelect={handlMoneyOutFormTransaction}
+          text={<T id={'cash_flow.label.add_money_out'} />}
+        />
+
+        <NavbarDivider />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="print-16" iconSize={16} />}
+          text={<T id={'print'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-export-16" iconSize={16} />}
+          text={<T id={'export'} />}
+        />
+        <Button
+          className={Classes.MINIMAL}
+          icon={<Icon icon="file-import-16" iconSize={16} />}
+          text={<T id={'import'} />}
+        />
+        <NavbarDivider />
+        <DashboardRowsHeightButton
+          initialValue={cashflowTansactionsTableSize}
+          onChange={handleTableRowSizeChange}
+        />
+        <NavbarDivider />
+      </NavbarGroup>
+    </DashboardActionsBar>
+  );
+}
+
+export default compose(
+  withDialogActions,
+  withSettingsActions,
+  withSettings(({ cashflowTransactionsSettings }) => ({
+    cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
+  })),
+)(AccountTransactionsActionsBar);

src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.js

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { DataTable, TableFastCell } from 'components';
+import { TABLES } from 'common/tables';
+
+import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import withSettings from '../../Settings/withSettings';
+
+import { useMemorizedColumnsWidths } from '../../../hooks';
+import { useAccountTransactionsColumns } from './components';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import { compose } from 'utils';
+
+/**
+ * Account transactions data table.
+ */
+function AccountTransactionsDataTable({
+  // #withSettings
+  cashflowTansactionsTableSize,
+}) {
+  // Retrieve table columns.
+  const columns = useAccountTransactionsColumns();
+
+  // Retrieve list context.
+  const {
+    cashflowTransactions,
+    isCashFlowTransactionsFetching,
+    isCashFlowTransactionsLoading,
+  } = useAccountTransactionsContext();
+
+  // Local storage memorizing columns widths.
+  const [initialColumnsWidths, , handleColumnResizing] =
+    useMemorizedColumnsWidths(TABLES.CASHFLOW_Transactions);
+
+  return (
+    <DataTable
+      noInitialFetch={true}
+      columns={columns}
+      data={cashflowTransactions}
+      selectionColumn={true}
+      sticky={true}
+      loading={isCashFlowTransactionsLoading}
+      headerLoading={isCashFlowTransactionsLoading}
+      progressBarLoading={isCashFlowTransactionsFetching}
+      expandColumnSpace={1}
+      expandToggleColumn={2}
+      selectionColumnWidth={45}
+      TableCellRenderer={TableFastCell}
+      TableLoadingRenderer={TableSkeletonRows}
+      TableRowsRenderer={TableVirtualizedListRows}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      // #TableVirtualizedListRows props.
+      vListrowHeight={cashflowTansactionsTableSize == 'small' ? 40 : 42}
+      vListOverscanRowCount={0}
+      TableHeaderSkeletonRenderer={TableSkeletonHeader}
+      initialColumnsWidths={initialColumnsWidths}
+      onColumnResizing={handleColumnResizing}
+      size={cashflowTansactionsTableSize}
+    />
+  );
+}
+
+export default compose(
+  withSettings(({ cashflowTransactionsSettings }) => ({
+    cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
+  })),
+)(AccountTransactionsDataTable);

src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import 'style/pages/CashFlow/AccountTransactions/List.scss';
+
+import { DashboardPageContent, DashboardContentTable } from 'components';
+
+import { AccountTransactionsProvider } from './AccountTransactionsProvider';
+
+import AccountTransactionsActionsBar from './AccountTransactionsActionsBar';
+import AccountTransactionsDataTable from './AccountTransactionsDataTable';
+
+/**
+ * Account transactions list.
+ */
+function AccountTransactionsList() {
+  return (
+    <AccountTransactionsProvider>
+      <AccountTransactionsActionsBar />
+      <DashboardPageContent>
+        <DashboardContentTable>
+          <AccountTransactionsDataTable />
+        </DashboardContentTable>
+      </DashboardPageContent>
+    </AccountTransactionsProvider>
+  );
+}
+
+export default AccountTransactionsList;

src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+
+import { useCashflowTransactions } from 'hooks/query';
+
+const AccountTransactionsContext = React.createContext();
+
+/**
+ * Account transctions provider.
+ */
+function AccountTransactionsProvider({ query, ...props }) {
+  const accountId = useParams();
+
+  // Fetch cashflow account transactions list
+  const {
+    data: cashflowTransactions,
+    isFetching: isCashFlowTransactionsFetching,
+    isLoading: isCashFlowTransactionsLoading,
+  } = useCashflowTransactions(accountId, {
+    enabled: !!accountId,
+  });
+
+
+  // Provider payload.
+  const provider = {
+    accountId,
+    cashflowTransactions,
+    isCashFlowTransactionsFetching,
+    isCashFlowTransactionsLoading,
+  };
+
+  return (
+    <DashboardInsider name={'account-transactions'}>
+      <AccountTransactionsContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useAccountTransactionsContext = () =>
+  React.useContext(AccountTransactionsContext);
+
+export { AccountTransactionsProvider, useAccountTransactionsContext };

src/containers/CashFlow/AccountTransactions/components.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+import { FormatDateCell } from 'components';
+
+/**
+ * Retrieve account transctions table columns.
+ */
+export function useAccountTransactionsColumns() {
+  return React.useMemo(
+    () => [
+      {
+        id: 'date',
+        Header: intl.get('date'),
+        accessor: 'date',
+        Cell: FormatDateCell,
+        width: 110,
+        className: 'date',
+      },
+      {
+        id: 'type',
+        Header: intl.get('type'),
+        accessor: 'type',
+        className: 'type',
+        width: 140,
+        textOverview: true,
+      },
+      {
+        id: 'status',
+        Header: intl.get('status'),
+        // accessor:
+        width: 160,
+        className: 'status',
+      },
+      {
+        id: 'deposit',
+        Header: intl.get('cash_flow.label.deposit'),
+        accessor: 'formattedDeposit',
+        width: 110,
+        className: 'deposit',
+        align: 'right',
+      },
+      {
+        id: 'withdrawal',
+        Header: intl.get('cash_flow.label.withdrawal'),
+        accessor: 'formattedWithdrawal',
+        className: 'withdrawal',
+        width: 150,
+        align: 'right',
+      },
+      {
+        id: 'running_balance',
+        Header: intl.get('cash_flow.label.running_balance'),
+        accessor: 'running_balance',
+        className: 'running_balance',
+        width: 150,
+        align: 'right',
+      },
+    ],
+    [],
+  );
+}

src/containers/CashFlow/AccountTransactions/utils.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import {
+  Button,
+  PopoverInteractionKind,
+  MenuItem,
+  Classes,
+  Position,
+} from '@blueprintjs/core';
+
+import { Select } from '@blueprintjs/select';
+import { Icon } from 'components';
+
+export const CashFlowMenuItems = ({ text, items, onItemSelect }) => {
+  // Menu items renderer.
+  const itemsRenderer = (item, { handleClick, modifiers, query }) => (
+    <MenuItem text={item.name} label={item.label} onClick={handleClick} />
+  );
+
+  const handleCashFlowMenuSelect = (type) => {
+    onItemSelect && onItemSelect(type);
+  };
+
+  return (
+    <Select
+      items={items}
+      itemRenderer={itemsRenderer}
+      onItemSelect={handleCashFlowMenuSelect}
+      popoverProps={{
+        minimal: true,
+        position: Position.BOTTOM_LEFT,
+        interactionKind: PopoverInteractionKind.CLICK,
+        modifiers: {
+          offset: { offset: '0, 4' },
+        },
+      }}
+      filterable={false}
+    >
+      <Button
+        text={text}
+        icon={<Icon icon={'plus-24'} iconSize={20} />}
+        // rightIcon={'caret-down'}
+        // className={classNames(Classes.MINIMAL, 'button--table-views')}
+        minimal={true}
+      />
+    </Select>
+  );
+};