WIP financial statements.

client/src/components/Accounts/AccountsDataTable.js

@@ -131,7 +131,8 @@ function AccountsDataTable({
         columns={columns}
         data={accounts}
         onFetchData={handleDatatableFetchData}
-        manualSortBy={true} />
+        manualSortBy={true}
+        selectionColumn={true} />
     </LoadingIndicator>    
   );
 }

client/src/components/DataTable.js

@@ -12,7 +12,6 @@ import {
 import {Checkbox} from '@blueprintjs/core';
 import classnames from 'classnames';
 import Icon from 'components/Icon';
-// import { FixedSizeList } from 'react-window'
 
 const IndeterminateCheckbox = React.forwardRef(
   ({ indeterminate, ...rest }, ref) => {
@@ -23,9 +22,7 @@ const IndeterminateCheckbox = React.forwardRef(
       resolvedRef.current.indeterminate = indeterminate
     }, [resolvedRef, indeterminate])
 
-    return (
-      <Checkbox ref={resolvedRef} {...rest} />
-    );
+    return (<Checkbox ref={resolvedRef} {...rest} />);
   }
 );
 
@@ -35,7 +32,9 @@ export default function DataTable({
   loading,
   onFetchData,
   onSelectedRowsChange,
-  manualSortBy = 'false'
+  manualSortBy = 'false',
+  selectionColumn = false,
+  className
 }) {
   const {
     getTableProps,
@@ -51,8 +50,8 @@ export default function DataTable({
     nextPage,
     previousPage,
     setPageSize,
-
     selectedFlatRows,
+
     // Get the state from the instance
     state: { pageIndex, pageSize, sortBy, selectedRowIds },
   } = useTable(
@@ -77,7 +76,7 @@ export default function DataTable({
     hooks => {
       hooks.visibleColumns.push(columns => [
         // Let's make a column for selection
-        {
+        ...(selectionColumn) ? [{
           id: 'selection',
           disableResizing: true,
           minWidth: 35,
@@ -97,23 +96,19 @@ export default function DataTable({
               <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
             </div>
           ),
-        },
+        }] : [],
         ...columns,
       ])
     }
   );
 
-  // Debounce our onFetchData call for 100ms
-  const onFetchDataDebounced = useAsyncDebounce(onFetchData, 100);
-  const onSelectRowsDebounced = useAsyncDebounce(onSelectedRowsChange, 250);
-
   // When these table states change, fetch new data!
   useEffect(() => {
-    onFetchDataDebounced({ pageIndex, pageSize, sortBy })
-  }, []);
+    onFetchData && onFetchData({ pageIndex, pageSize, sortBy })
+  }, [pageIndex, pageSize, sortBy]);
 
   return (
-    <div className={'bigcapital-datatable'}>
+    <div className={classnames('bigcapital-datatable', className)}>
       <div {...getTableProps()} className="table"> 
         <div className="thead">
           {headerGroups.map(headerGroup => (
@@ -157,8 +152,7 @@ export default function DataTable({
                     className: classnames(cell.column.className || '', 'td'),
                   })}>{ cell.render('Cell') }</div>
                 })}
-              </div>
-            )
+              </div>)
           })}
         </div>
       </div>

client/src/components/FinancialSheet.js

@@ -1,26 +1,35 @@
 import React, { Children } from 'react';
-
+import moment from 'moment';
+import classnames from 'classnames';
+import LoadingIndicator from 'components/LoadingIndicator';
 
 export default function FinancialSheet({
   companyTitle,
   sheetType,
   date,
   children,
-  accountingBasis
+  accountingBasis,
+  name,
+  loading,
 }) {
+  const formattedDate = moment(date).format('DD MMMM YYYY')
+  const nameModifer = name ? `financial-sheet--${name}` : '';
+
   return (
-    <div class="financial-sheet">
-      <h1 class="financial-sheet__title">{ companyTitle }</h1>
-      <h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
-      <span class="financial-sheet__date">{ date }</span>
+    <div className={classnames('financial-sheet', nameModifer)}>
+      <LoadingIndicator loading={loading}>
+        <h1 class="financial-sheet__title">{ companyTitle }</h1>
+        <h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
+        <div class="financial-sheet__date">As of { formattedDate }</div>
 
-      <div class="financial-sheet__table">
-        { children }
-      </div>
+        <div class="financial-sheet__table">
+          { children }
+        </div>
 
-      <div class="financial-sheet__accounting-basis">
-        { accountingBasis }
-      </div>
+        <div class="financial-sheet__accounting-basis">
+          { accountingBasis }
+        </div>
+      </LoadingIndicator>
     </div>
   );
 }

client/src/components/LoadingIndicator.js

@@ -4,9 +4,10 @@ import { Spinner } from '@blueprintjs/core';
 export default function LoadingIndicator({
   loading,
   spinnerSize = 40,
-  children
+  children,
+  mount = true,
 }) {
-  const [rendered, setRendered] = useState(false);
+  const [rendered, setRendered] = useState(mount);
 
   useEffect(() => {
     if (!loading) { setRendered(true); }

client/src/components/Money.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Currency from 'js-money/lib/currency';
+import accounting from 'accounting';
+
+function formattedAmount(cents, currency) {
+  const { symbol, decimal_digits: precision } = Currency[currency];
+  const amount = cents / Math.pow(10, precision);
+
+  return accounting.formatMoney(amount, { symbol, precision });
+}
+
+export default function Money({ amount, currency }) {
+  return (
+    <span>{ formattedAmount(amount, currency) }</span>
+  );
+}