WIP feature/breadcrumb/fix_localize

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -5,12 +5,13 @@ import useAsync from 'hooks/async';
 import DashboardConnect from 'connectors/Dashboard.connector';
 import GeneralLedgerConnect from 'connectors/GeneralLedgerSheet.connect';
 import GeneralLedgerHeader from './GeneralLedgerHeader';
-import {compose} from 'utils';
+import { compose } from 'utils';
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
 import AccountsConnect from 'connectors/Accounts.connector';
 import SettingsConnect from 'connectors/Settings.connect';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 function GeneralLedger({
   changePageTitle,
@@ -21,6 +22,7 @@ function GeneralLedger({
   requestFetchAccounts,
   organizationSettings,
 }) {
+  const { formatMessage } = useIntl()
   const [filter, setFilter] = useState({
     from_date: moment().startOf('year').format('YYYY-MM-DD'),
     to_date: moment().endOf('year').format('YYYY-MM-DD'),
@@ -30,7 +32,7 @@ function GeneralLedger({
 
   // Change page title of the dashboard.
   useEffect(() => {
-    changePageTitle('General Ledger');
+    changePageTitle(formatMessage({id:'general_ledger'}));
   }, []);
 
   const fetchHook = useAsync(() => {
@@ -45,7 +47,7 @@ function GeneralLedger({
     ]);
   }, false);
 
-  const generalLedgerSheetIndex = useMemo(() => 
+  const generalLedgerSheetIndex = useMemo(() =>
     getGeneralLedgerSheetIndex(filter),
     [getGeneralLedgerSheetIndex, filter]);
 
@@ -55,7 +57,7 @@ function GeneralLedger({
 
   // Handle fetch data of trial balance table.
   const handleFetchData = useCallback(() => { fetchSheet.execute() }, [fetchSheet]);
-  
+
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback((filter) => {
     const parsedFilter = {
@@ -67,7 +69,7 @@ function GeneralLedger({
     fetchSheet.execute(parsedFilter);
   }, [setFilter, fetchSheet]);
 
-  const handleFilterChanged = () => {};
+  const handleFilterChanged = () => { };
 
   return (
     <DashboardInsider>

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js

@@ -14,11 +14,14 @@ import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 export default function GeneralLedgerActionsBar({
 
 }) {
 
+  const {formatMessage} =useIntl();
+
   const filterDropdown = FilterDropdown({
     fields: [],
     onFilterChange: (filterConditions) => {
@@ -32,7 +35,7 @@ export default function GeneralLedgerActionsBar({
         <Button
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon='cog' />}
-          text='Customize Report'
+          text={<T id={'customize_report'}/>}
         />
         <NavbarDivider />
 
@@ -43,19 +46,19 @@ export default function GeneralLedgerActionsBar({
 
           <Button
             className={classNames(Classes.MINIMAL, 'button--filter')}
-            text="Filter"
+            text={<T id={'filter'}/>}
             icon={ <Icon icon="filter" /> } />
         </Popover>
 
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-export' />}
-          text='Print'
+          text={<T id={'print'}/>}
         />
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-export' />}
-          text='Export'
+          text={<T id={'export'}/>}
         />
       </NavbarGroup>
     </DashboardActionsBar>

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js

@@ -1,6 +1,7 @@
 import React, {useState, useMemo, useEffect, useCallback} from 'react';
 import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
-import {useIntl} from 'react-intl';
+import { FormattedMessage as T, useIntl } from 'react-intl';
+
 import {
   Button,
   FormGroup,
@@ -19,13 +20,12 @@ import FinancialStatementDateRange from 'containers/FinancialStatements/Financia
 import * as Yup from 'yup';
 import RadiosAccountingBasis from '../RadiosAccountingBasis';
 
-
 function GeneralLedgerHeader({
   onSubmitFilter,
   pageFilter,
   accounts,
 }) {
-  const intl = useIntl();
+  const {formatMessage} = useIntl();
 
   const formik = useFormik({
     enableReinitialize: true,
@@ -64,7 +64,7 @@ function GeneralLedgerHeader({
       <Row>
         <Col sm={3}>
           <FormGroup
-            label={'Specific Accounts'}
+            label={<T id={'specific_accounts'}/>}
             className={classNames('form-group--select-list', Classes.FILL)}
           >
             <AccountsMultiSelect
@@ -84,7 +84,7 @@ function GeneralLedgerHeader({
             onClick={handleSubmitClick}
             disabled={formik.isSubmitting}
             className={'button--submit-filter mt2'}>
-            { 'Calculate Report' }
+            <T id={'calculate_report'}/>
           </Button>
         </Col>
       </Row>

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -1,4 +1,4 @@
-import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
@@ -6,6 +6,7 @@ import moment from 'moment';
 import {
   defaultExpanderReducer,
 } from 'utils';
+import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 const ROW_TYPE = {
@@ -21,9 +22,10 @@ export default function GeneralLedgerTable({
   loading,
   data,
 }) {
+  
   // Account name column accessor.
   const accountNameAccessor = useCallback((row) => {
-    switch(row.rowType) {
+    switch (row.rowType) {
       case ROW_TYPE.OPENING_BALANCE:
         return 'Opening Balance';
       case ROW_TYPE.CLOSING_BALANCE:
@@ -49,32 +51,32 @@ export default function GeneralLedgerTable({
     const transaction = cell.row.original
 
     if (transaction.rowType === ROW_TYPE.ACCOUNT) {
-      return (!cell.row.isExpanded) ? 
+      return (!cell.row.isExpanded) ?
         (<Money amount={transaction.closing.amount} currency={"USD"} />) : '';
     }
     return (<Money amount={transaction.amount} currency={"USD"} />);
   }, []);
 
   const referenceLink = useCallback((row) => {
-    return (<a href="">{ row.referenceId }</a>);
+    return (<a href="">{row.referenceId}</a>);
   });
-
+  const { formatMessage } = useIntl();
   const columns = useMemo(() => [
     {
       // Build our expander column
       id: 'expander', // Make sure it has an ID
-      className: 'expander',      
+      className: 'expander',
       Header: ({
         getToggleAllRowsExpandedProps,
         isAllRowsExpanded
       }) => (
-        <span {...getToggleAllRowsExpandedProps()} className="toggle">
-          {isAllRowsExpanded ?
-            (<span class="arrow-down" />) :
-            (<span class="arrow-right" />)
-          }
-        </span>
-      ),
+          <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
@@ -100,37 +102,37 @@ export default function GeneralLedgerTable({
       disableResizing: true,
     },
     {
-      Header: 'Account Name',
+      Header: formatMessage({id:'account_name'}),
       accessor: accountNameAccessor,
       className: "name",
     },
     {
-      Header: 'Date',
+      Header: formatMessage({id:'date'}),
       accessor: dateAccessor,
       className: "date",
     },
     {
-      Header: 'Transaction Type',
+      Header: formatMessage({id:'transaction_type'}),
       accessor: 'referenceType',
       className: 'transaction_type',
     },
     {
-      Header: 'Trans. NUM',
+      Header: formatMessage({id:'trans_num'}),
       accessor: referenceLink,
       className: 'transaction_number'
     },
     {
-      Header: 'Description',
+      Header: formatMessage({id:'description'}),
       accessor: 'note',
       className: 'description',
     },
     {
-      Header: 'Amount',
+      Header: formatMessage({id:'amount'}),
       Cell: amountCell,
       className: 'amount'
     },
     {
-      Header: 'Balance',
+      Header: formatMessage({id:'balance'}),
       Cell: amountCell,
       className: 'balance',
     },
@@ -159,7 +161,7 @@ export default function GeneralLedgerTable({
         expanded={expandedRows}
         virtualizedRows={true}
         fixedItemSize={37}
-        fixedSizeHeight={1000}  />
+        fixedSizeHeight={1000} />
     </FinancialSheet>
-  ); 
+  );
 }