refactor(PurchaseByItem)

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItems.js

@@ -3,31 +3,30 @@ import moment from 'moment';
 
 import 'style/pages/FinancialStatements/SalesAndPurchasesSheet.scss';
 
+import { FinancialStatement } from 'components';
+
 import { PurchasesByItemsProvider } from './PurchasesByItemsProvider';
 import PurchasesByItemsActionsBar from './PurchasesByItemsActionsBar';
 import PurchasesByItemsHeader from './PurchasesByItemsHeader';
-import PurchasesByItemsTable from './PurchasesByItemsTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { PurchasesByItemsLoadingBar } from './components';
+import { PurchasesByItemsBody } from './PurchasesByItemsBody';
 
 import withPurchasesByItemsActions from './withPurchasesByItemsActions';
-import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
+
+import { getDefaultPurchasesByItemsQuery } from './utils';
 import { compose } from 'utils';
 
 /**
  * Purchases by items.
  */
 function PurchasesByItems({
-  // #withPreferences
-  organizationName,
 
   // #withPurchasesByItemsActions
   togglePurchasesByItemsFilterDrawer,
 }) {
   const [filter, setFilter] = useState({
-    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
-    toDate: moment().endOf('year').format('YYYY-MM-DD'),
-    filterByOption: 'with-transactions',
+    ...getDefaultPurchasesByItemsQuery(),
   });
 
   // Handle filter form submit.
@@ -68,23 +67,16 @@ function PurchasesByItems({
       <PurchasesByItemsLoadingBar />
 
       <DashboardPageContent>
-        <div className="financial-statement financial-statement--purchases-by-items">
+        <FinancialStatement>
           <PurchasesByItemsHeader
             pageFilter={filter}
             onSubmitFilter={handleFilterSubmit}
           />
-        </div>
-        <div className="financial-statement__body">
-          <PurchasesByItemsTable companyName={organizationName} />
-        </div>
+          <PurchasesByItemsBody />
+        </FinancialStatement>
       </DashboardPageContent>
     </PurchasesByItemsProvider>
   );
 }
 
-export default compose(
-  withPurchasesByItemsActions,
-  withCurrentOrganization(({ organization }) => ({
-    organizationName: organization.name,
-  })),
-)(PurchasesByItems);
+export default compose(withPurchasesByItemsActions)(PurchasesByItems);

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsBody.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import * as R from 'ramda';
+
+import { FinancialReportBody } from '../FinancialReportPage';
+import { FinancialSheetSkeleton } from '../../../components/FinancialSheet';
+import PurchasesByItemsTable from './PurchasesByItemsTable';
+
+import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
+
+import withCurrentOrganization from '../../../containers/Organization/withCurrentOrganization';
+
+/**
+ * Purchases by items.
+ * @returns {JSX.Element}
+ */
+function PurchasesByItemsBodyJSX({
+  // #withPreferences
+  organizationName,
+}) {
+  const { isLoading } = usePurchaseByItemsContext();
+
+  return (
+    <FinancialReportBody>
+      {isLoading ? (
+        <FinancialSheetSkeleton />
+      ) : (
+        <PurchasesByItemsTable companyName={organizationName} />
+      )}
+    </FinancialReportBody>
+  );
+}
+
+export const PurchasesByItemsBody = R.compose(
+  withCurrentOrganization(({ organization }) => ({
+    organizationName: organization.name,
+  })),
+)(PurchasesByItemsBodyJSX);

src/containers/FinancialStatements/PurchasesByItems/PurchasesByItemsTable.js

@@ -1,13 +1,17 @@
 import React from 'react';
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
 import { DataTable, FinancialSheet } from 'components';
 
 import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
 import { usePurchasesByItemsTableColumns } from './components';
 
+import { tableRowTypesToClassnames } from 'utils';
+import { TableStyle } from 'common';
+
 /**
- * purchases by items data table.
+ * Purchases by items data table.
  */
 export default function PurchasesByItemsTable({ companyName }) {
   // Purchases by items context.
@@ -19,20 +23,6 @@ export default function PurchasesByItemsTable({ companyName }) {
   // Purchases by items table columns.
   const columns = usePurchasesByItemsTableColumns();
 
-  const rowClassNames = (row) => {
-    const { original } = row;
-    const rowTypes = Array.isArray(original.rowType)
-      ? original.rowType
-      : [original.rowType];
-
-    return {
-      ...rowTypes.reduce((acc, rowType) => {
-        acc[`row_type--${rowType}`] = rowType;
-        return acc;
-      }, {}),
-    };
-  };
-
   return (
     <FinancialSheet
       companyName={companyName}
@@ -42,19 +32,36 @@ export default function PurchasesByItemsTable({ companyName }) {
       name="purchases-by-items"
       loading={isLoading}
     >
-      <DataTable
-        className="bigcapital-datatable--financial-report"
+      <PurchasesByItemsDataTable
         columns={columns}
         data={tableRows}
         expandable={true}
         expandToggleColumn={1}
         expandColumnSpace={1}
         sticky={true}
-        rowClassNames={rowClassNames}
+        rowClassNames={tableRowTypesToClassnames}
         noResults={intl.get(
           'there_were_no_purchases_during_the_selected_date_range',
         )}
+        styleName={TableStyle.Constrant}
       />
     </FinancialSheet>
   );
 }
+
+const PurchasesByItemsDataTable = styled(DataTable)`
+  .table {
+    .tbody {
+      .tr .td {
+        border-bottom: 0;
+        padding-top: 0.4rem;
+        padding-bottom: 0.4rem;
+      }
+      .tr.row_type--total .td {
+        border-top: 1px solid #bbb;
+        font-weight: 500;
+        border-bottom: 3px double #000;
+      }
+    }
+  }
+`;

src/containers/FinancialStatements/PurchasesByItems/components.js

@@ -1,18 +1,17 @@
 import React from 'react';
 import intl from 'react-intl-universal';
-import { Button } from '@blueprintjs/core';
-import { getColumnWidth } from 'utils';
-import { If, Icon } from 'components';
+
+import { If } from 'components';
 import { CellTextSpan } from 'components/Datatable/Cells';
 import { usePurchaseByItemsContext } from './PurchasesByItemsProvider';
 import FinancialLoadingBar from '../FinancialLoadingBar';
 
+import { getColumnWidth } from 'utils';
+
 /**
  * Retrieve purchases by items table columns.
  */
 export const usePurchasesByItemsTableColumns = () => {
-  
-
   // purchases by items context.
   const {
     purchaseByItems: { tableRows },

src/containers/FinancialStatements/PurchasesByItems/utils.js

@@ -0,0 +1,10 @@
+import moment from 'moment';
+
+
+export const getDefaultPurchasesByItemsQuery = () => {
+  return {
+    fromDate: moment().startOf('year').format('YYYY-MM-DD'),
+    toDate: moment().endOf('year').format('YYYY-MM-DD'),
+    filterByOption: 'with-transactions',
+  }
+}

src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -1,8 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import moment from 'moment';
 
-import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
-
 import { FinancialStatement } from 'components';
 import { TrialBalanceSheetProvider } from './TrialBalanceProvider';
 import TrialBalanceActionsBar from './TrialBalanceActionsBar';