WIP Version 0.0.1

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -0,0 +1,138 @@
+import React, {useState, useMemo, useCallback} from 'react';
+import FinancialSheet from 'components/FinancialSheet';
+import DataTable from 'components/DataTable';
+import Money from 'components/Money';
+import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
+import ProfitLossSheetTableConnect from 'connectors/ProfitLossTable.connect';
+import { compose, defaultExpanderReducer } from 'utils';
+
+
+function ProfitLossSheetTable({
+  loading,
+  onFetchData,
+  profitLossTableRows,
+  profitLossQuery,
+  profitLossColumns,
+  companyName,
+}) {
+  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,
+    },  
+    {
+      Header: 'Account Name',
+      accessor: 'name',
+      className: "name",
+    },
+    {
+      Header: 'Acc. Code',
+      accessor: 'code',
+      className: "account_code",
+    },
+    ...(profitLossQuery.display_columns_type === 'total') ? [
+      {
+        Header: 'Total',
+        Cell: ({ cell }) => {
+          const row = cell.row.original;
+          if (row.total) {
+            return (<Money amount={row.total.formatted_amount} currency={'USD'} />);
+          }
+          return '';          
+        },
+        className: "total",
+      }
+    ] : [],
+    ...(profitLossQuery.display_columns_type === 'date_periods') ? 
+      (profitLossColumns.map((column, index) => ({
+        id: `date_period_${index}`,
+        Header: column,
+        accessor: (row) => {
+          if (row.periods && row.periods[index]) {
+            const amount = row.periods[index].formatted_amount;
+            return (<Money amount={amount} currency={'USD'} />);
+          }
+          return '';
+        },
+        width: 100,
+      })))
+    : [],
+  ], [profitLossQuery.display_columns_type, profitLossColumns]);
+
+  // Handle data table fetch data.
+  const handleFetchData = useCallback((...args) => {
+    onFetchData && onFetchData(...args);
+  }, [onFetchData]);
+
+  // Retrieve default expanded rows of balance sheet.
+  const expandedRows = useMemo(() => 
+    defaultExpanderReducer(profitLossTableRows, 1),
+    [profitLossTableRows]);
+
+  // Retrieve conditional datatable row classnames.
+  const rowClassNames = useCallback((row) => {
+    return {
+      [`row--${row.rowType}`]: row.rowType,
+    };
+  }, []);
+
+  return (
+    <FinancialSheet
+      companyName={companyName}
+      sheetType={'Profit/Loss Sheet'}
+      date={new Date()}
+      name="profit-loss-sheet"
+      loading={loading}
+      basis={profitLossQuery.basis}>
+
+      <DataTable
+        className="bigcapital-datatable--financial-report"
+        columns={columns}
+        data={profitLossTableRows}
+        onFetchData={handleFetchData}
+        expanded={expandedRows}
+        rowClassNames={rowClassNames}
+        noInitialFetch={true} />
+    </FinancialSheet>
+  );
+}
+
+export default compose(
+  ProfitLossSheetConnect,
+  ProfitLossSheetTableConnect,
+)(ProfitLossSheetTable);