refactoring: expenses landing list.

refactoring: customers landing list.
refactoring: vendors landing list.
refactoring: manual journals landing list.

client/src/containers/Customers/CustomerForm/CustomerFloatingActions.js

@@ -11,8 +11,10 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import classNames from 'classnames';
-import { CLASSES } from 'common/classes';
+import { useHistory } from 'react-router-dom';
 import { useFormikContext } from 'formik';
+
+import { CLASSES } from 'common/classes';
 import { Icon } from 'components';
 import { useCustomerFormContext } from './CustomerFormProvider';
 
@@ -20,6 +22,8 @@ import { useCustomerFormContext } from './CustomerFormProvider';
  * Customer floating actions bar.
  */
 export default function CustomerFloatingActions() {
+  const history = useHistory();
+
   // Customer form context.
   const { customerId, setSubmitPayload } = useCustomerFormContext();
 
@@ -33,7 +37,7 @@ export default function CustomerFloatingActions() {
 
   // Handle cancel button click.
   const handleCancelBtnClick = (event) => {
-    
+    history.goBack();
   };
 
   // handle clear button clicl.

client/src/containers/Customers/CustomerForm/CustomerForm.js

@@ -1,5 +1,4 @@
 import React, { useMemo, useEffect } from 'react';
-import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import moment from 'moment';
 import { Intent } from '@blueprintjs/core';
@@ -12,7 +11,7 @@ import AppToaster from 'components/AppToaster';
 
 import CustomerFormPrimarySection from './CustomerFormPrimarySection';
 import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
-import CustomersTabs from 'containers/Customers/CustomersTabs';
+import CustomersTabs from './CustomersTabs';
 import CustomerFloatingActions from './CustomerFloatingActions';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -20,6 +19,7 @@ import withSettings from 'containers/Settings/withSettings';
 
 import { compose, transformToForm } from 'utils';
 import { useCustomerFormContext } from './CustomerFormProvider';
+import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
 
 const defaultInitialValues = {
   customer_type: 'business',
@@ -79,49 +79,6 @@ function CustomerForm({
   const history = useHistory();
   const { formatMessage } = useIntl();
 
-  const validationSchema = Yup.object().shape({
-    customer_type: Yup.string()
-      .required()
-      .trim()
-      .label(formatMessage({ id: 'customer_type_' })),
-    salutation: Yup.string().trim(),
-    first_name: Yup.string().trim(),
-    last_name: Yup.string().trim(),
-    company_name: Yup.string().trim(),
-    display_name: Yup.string()
-      .trim()
-      .required()
-      .label(formatMessage({ id: 'display_name_' })),
-
-    email: Yup.string().email().nullable(),
-    work_phone: Yup.number(),
-    personal_phone: Yup.number(),
-    website: Yup.string().url().nullable(),
-
-    active: Yup.boolean(),
-    note: Yup.string().trim(),
-
-    billing_address_country: Yup.string().trim(),
-    billing_address_1: Yup.string().trim(),
-    billing_address_2: Yup.string().trim(),
-    billing_address_city: Yup.string().trim(),
-    billing_address_state: Yup.string().trim(),
-    billing_address_postcode: Yup.number().nullable(),
-    billing_address_phone: Yup.number(),
-
-    shipping_address_country: Yup.string().trim(),
-    shipping_address_1: Yup.string().trim(),
-    shipping_address_2: Yup.string().trim(),
-    shipping_address_city: Yup.string().trim(),
-    shipping_address_state: Yup.string().trim(),
-    shipping_address_postcode: Yup.number().nullable(),
-    shipping_address_phone: Yup.number(),
-
-    opening_balance: Yup.number().nullable(),
-    currency_code: Yup.string(),
-    opening_balance_at: Yup.date(),
-  });
-
   /**
    * Initial values in create and edit mode.
    */
@@ -180,7 +137,7 @@ function CustomerForm({
   return (
     <div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
       <Formik
-        validationSchema={validationSchema}
+        validationSchema={isNewMode ? CreateCustomerForm : EditCustomerForm}
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >

client/src/containers/Customers/CustomerForm/CustomerForm.schema.js

@@ -0,0 +1,49 @@
+import * as Yup from 'yup';
+import { formatMessage } from 'services/intl';
+
+
+const Schema = Yup.object().shape({
+    customer_type: Yup.string()
+      .required()
+      .trim()
+      .label(formatMessage({ id: 'customer_type_' })),
+    salutation: Yup.string().trim(),
+    first_name: Yup.string().trim(),
+    last_name: Yup.string().trim(),
+    company_name: Yup.string().trim(),
+    display_name: Yup.string()
+      .trim()
+      .required()
+      .label(formatMessage({ id: 'display_name_' })),
+
+    email: Yup.string().email().nullable(),
+    work_phone: Yup.number(),
+    personal_phone: Yup.number(),
+    website: Yup.string().url().nullable(),
+
+    active: Yup.boolean(),
+    note: Yup.string().trim(),
+
+    billing_address_country: Yup.string().trim(),
+    billing_address_1: Yup.string().trim(),
+    billing_address_2: Yup.string().trim(),
+    billing_address_city: Yup.string().trim(),
+    billing_address_state: Yup.string().trim(),
+    billing_address_postcode: Yup.number().nullable(),
+    billing_address_phone: Yup.number(),
+
+    shipping_address_country: Yup.string().trim(),
+    shipping_address_1: Yup.string().trim(),
+    shipping_address_2: Yup.string().trim(),
+    shipping_address_city: Yup.string().trim(),
+    shipping_address_state: Yup.string().trim(),
+    shipping_address_postcode: Yup.number().nullable(),
+    shipping_address_phone: Yup.number(),
+
+    opening_balance: Yup.number().nullable(),
+    currency_code: Yup.string(),
+    opening_balance_at: Yup.date(),
+  });
+
+export const CreateCustomerForm = Schema;
+export const EditCustomerForm = Schema;

client/src/containers/Customers/CustomerForm/CustomerFormPage.js

@@ -5,14 +5,9 @@ import { DashboardCard } from 'components';
 import CustomerForm from './CustomerForm';
 import { CustomerFormProvider } from './CustomerFormProvider';
 
-import withCustomersActions from './withCustomersActions';
-import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
-
-import { compose } from 'utils';
-
 import 'style/pages/Customers/PageForm.scss';
 
-function CustomerFormPage() {
+export default function CustomerFormPage() {
   const { id } = useParams();
 
   return (
@@ -22,9 +17,4 @@ function CustomerFormPage() {
       </DashboardCard>
     </CustomerFormProvider>
   );
-}
-
-export default compose(
-  withCustomersActions,
-  withCurrenciesActions,
-)(CustomerFormPage);
+}

client/src/containers/Customers/CustomerForm/CustomerFormPrimarySection.js

@@ -9,7 +9,7 @@ import {
   SalutationList,
   DisplayNameList,
 } from 'components';
-import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
+import CustomerTypeRadioField from './CustomerTypeRadioField';
 import { CLASSES } from 'common/classes';
 import { inputIntent } from 'utils';
 import { useAutofocus } from 'hooks';

client/src/containers/Customers/CustomerForm/CustomersTabs.js

@@ -1,6 +1,7 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import { Tabs, Tab } from '@blueprintjs/core';
-import { FormattedMessage as T, useIntl } from 'react-intl';
+import { useIntl } from 'react-intl';
+
 import CustomerAddressTabs from './CustomerAddressTabs';
 import CustomerAttachmentTabs from './CustomerAttachmentTabs';
 import CustomerFinancialPanel from './CustomerFinancialPanel';

client/src/containers/Customers/CustomerTable.js

@@ -1,247 +0,0 @@
-import React, { useCallback, useMemo } from 'react';
-import {
-  Button,
-  Popover,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  Position,
-  Intent,
-} from '@blueprintjs/core';
-import { useIntl } from 'react-intl';
-import classNames from 'classnames';
-
-import CustomersEmptyStatus from './CustomersEmptyStatus';
-import { DataTable, Icon, Money, Choose } from 'components';
-import { CLASSES } from 'common/classes';
-
-import withCustomers from './withCustomers';
-import withCustomersActions from './withCustomersActions';
-
-import { compose, firstLettersArgs, saveInvoke } from 'utils';
-
-const AvatarCell = (row) => {
-  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
-};
-
-const PhoneNumberAccessor = (row) => (
-  <div>
-    <div className={'work_phone'}>{row.work_phone}</div>
-    <div className={'personal_phone'}>{row.personal_phone}</div>
-  </div>
-);
-
-const BalanceAccessor = (row) => {
-  return (<Money amount={row.closing_balance} currency={row.currency_code} />);
-};
-
-
-function CustomerTable({
-  //#withCustomers
-  customers,
-  customersLoading,
-  customerPagination,
-  customersTableQuery,
-  customersCurrentViewId,
-
-  // #withCustomersActions
-  addCustomersTableQueries,
-
-  //#OwnProps
-  loading,
-  onEditCustomer,
-  onDeleteCustomer,
-  onFetchData,
-  onSelectedRowsChange,
-}) {
-  const { formatMessage } = useIntl();
-
-  // Customers actions list.
-  const renderContextMenu = useMemo(
-    () => ({ customer, onEditCustomer, onDeleteCustomer }) => {
-      const handleEditCustomer = () => {
-        saveInvoke(onEditCustomer, customer);
-      };
-      const handleDeleteCustomer = () => {
-        saveInvoke(onDeleteCustomer, customer);
-      };
-      return (
-        <Menu>
-          <MenuItem
-            icon={<Icon icon="reader-18" />}
-            text={formatMessage({ id: 'view_details' })}
-          />
-          <MenuDivider />
-          <MenuItem
-            icon={<Icon icon="pen-18" />}
-            text={formatMessage({ id: 'edit_customer' })}
-            onClick={handleEditCustomer}
-          />
-          <MenuItem
-            icon={<Icon icon="trash-16" iconSize={16} />}
-            text={formatMessage({ id: 'delete_customer' })}
-            intent={Intent.DANGER}
-            onClick={handleDeleteCustomer}
-          />
-        </Menu>
-      );
-    },
-    [formatMessage],
-  );
-
-  // Renders actions table cell.
-  const renderActionsCell = useMemo(
-    () => ({ cell }) => (
-      <Popover
-        content={renderContextMenu({
-          customer: cell.row.original,
-          onEditCustomer,
-          onDeleteCustomer,
-        })}
-        position={Position.RIGHT_BOTTOM}
-      >
-        <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
-      </Popover>
-    ),
-    [onDeleteCustomer, onEditCustomer, renderContextMenu],
-  );
-
-  // Table columns.
-  const columns = useMemo(
-    () => [
-      {
-        id: 'avatar',
-        Header: '',
-        accessor: AvatarCell,
-        className: 'avatar',
-        width: 50,
-        disableResizing: true,
-        disableSortBy: true,
-      },
-      {
-        id: 'display_name',
-        Header: formatMessage({ id: 'display_name' }),
-        accessor: 'display_name',
-        className: 'display_name',
-        width: 150,
-      },
-      {
-        id: 'company_name',
-        Header: formatMessage({ id: 'company_name' }),
-        accessor: 'company_name',
-        className: 'company_name',
-        width: 150,
-      },
-      {
-        id: 'phone_number',
-        Header: formatMessage({ id: 'phone_number' }),
-        accessor: PhoneNumberAccessor,
-        className: 'phone_number',
-        width: 100,
-      },
-      {
-        id: 'receivable_balance',
-        Header: formatMessage({ id: 'receivable_balance' }),
-        accessor: BalanceAccessor,
-        className: 'receivable_balance',
-        width: 100,
-      },
-      {
-        id: 'actions',
-        Cell: renderActionsCell,
-        className: 'actions',
-        width: 70,
-        disableResizing: true,
-        disableSortBy: true,
-      },
-    ],
-    [formatMessage, renderActionsCell],
-  );
-
-  // Handle fetch data table.
-  const handleFetchData = useCallback(
-    ({ pageIndex, pageSize, sortBy }) => {
-      addCustomersTableQueries({
-        page: pageIndex + 1,
-        page_size: pageSize,
-        ...(sortBy.length > 0
-          ? {
-              column_sort_order: sortBy[0].id,
-              sort_order: sortBy[0].desc ? 'desc' : 'asc',
-            }
-          : {}),
-      });
-    },
-    [addCustomersTableQueries],
-  );
-
-  const handleSelectedRowsChange = useCallback(
-    (selectedRows) => {
-      onSelectedRowsChange &&
-        onSelectedRowsChange(selectedRows.map((s) => s.original));
-    },
-    [onSelectedRowsChange],
-  );
-
-  const rowContextMenu = (cell) =>
-    renderContextMenu({
-      customer: cell.row.original,
-      onEditCustomer,
-      onDeleteCustomer,
-    });
-
-  const showEmptyStatus = [
-    customersCurrentViewId === -1,
-    customers.length === 0,
-  ].every((condition) => condition === true);
-  return (
-    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
-      <Choose>
-        <Choose.When condition={showEmptyStatus}>
-          <CustomersEmptyStatus />
-        </Choose.When>
-
-        <Choose.Otherwise>
-          <DataTable
-            noInitialFetch={true}
-            columns={columns}
-            data={customers}
-            onFetchData={handleFetchData}
-            selectionColumn={true}
-            expandable={false}
-            sticky={true}
-            onSelectedRowsChange={handleSelectedRowsChange}
-            spinnerProps={{ size: 30 }}
-            rowContextMenu={rowContextMenu}
-            pagination={true}
-            manualSortBy={true}
-            pagesCount={customerPagination.pagesCount}
-            autoResetSortBy={false}
-            autoResetPage={false}
-            initialPageSize={customersTableQuery.page_size}
-            initialPageIndex={customersTableQuery.page - 1}
-          />
-        </Choose.Otherwise>
-      </Choose>
-    </div>
-  );
-};
-
-export default compose(
-  withCustomers(
-    ({
-      customers,
-      customersLoading,
-      customerPagination,
-      customersTableQuery,
-      customersCurrentViewId,
-    }) => ({
-      customers,
-      customersLoading,
-      customerPagination,
-      customersTableQuery,
-      customersCurrentViewId,
-    }),
-  ),
-  withCustomersActions,
-)(CustomerTable);

client/src/containers/Customers/CustomersAlerts.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import CustomerDeleteAlert from 'containers/Alerts/Customers/CustomerDeleteAlert';
-import CustomerBulkDeleteAlert from 'containers/Alerts/Customers/CustomerBulkDeleteAlert';
+// import CustomerBulkDeleteAlert from 'containers/Alerts/Customers/CustomerBulkDeleteAlert';
 
 /**
  * Customers alert.
@@ -9,7 +9,7 @@ export default function ItemsAlerts() {
   return (
     <div>
       <CustomerDeleteAlert name={'customer-delete'} />
-      <CustomerBulkDeleteAlert name={'customers-bulk-delete'} />
+      {/* <CustomerBulkDeleteAlert name={'customers-bulk-delete'} /> */}
     </div>
   );
 }

client/src/containers/Customers/CustomersLanding/CustomersActionsBar.js

@@ -18,8 +18,8 @@ import { If, Icon, DashboardActionViewsList } from 'components';
 
 import { useCustomersListContext } from './CustomersListProvider';
 
-import withCustomers from 'containers/Customers/withCustomers';
-import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
 import withAlertActions from 'containers/Alert/withAlertActions';
 
 import { compose } from 'utils';
@@ -29,21 +29,26 @@ import { compose } from 'utils';
  */
 function CustomerActionsBar({
   // #withCustomers
-  customersSelectedRows,
+  customersSelectedRows = [],
 
-  //#withCustomersActions
-  addCustomersTableQueries,
+  // #withCustomersActions
+  setCustomersTableState,
 
   // #withAlertActions
   openAlert,
 }) {
+  // History context.
   const history = useHistory();
+  
+  // React intl
   const { formatMessage } = useIntl();
+
+  // Customers list context.
   const { customersViews } = useCustomersListContext();
 
-  const onClickNewCustomer = useCallback(() => {
+  const onClickNewCustomer = () => {
     history.push('/customers/new');
-  }, [history]);
+  };
 
   // Handle Customers bulk delete button click.,
   const handleBulkDelete = () => {
@@ -51,8 +56,8 @@ function CustomerActionsBar({
   };
 
   const handleTabChange = (viewId) => {
-    addCustomersTableQueries({
-      custom_view_id: viewId.id || null,
+    setCustomersTableState({
+      customViewId: viewId.id || null,
     });
   };
 

client/src/containers/Customers/CustomersLanding/CustomersList.js

@@ -1,19 +1,20 @@
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 
+import 'style/pages/Customers/List.scss';
+
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
-import CustomerActionsBar from 'containers/Customers/CustomerActionsBar';
+import CustomersActionsBar from './CustomersActionsBar';
+import CustomersViewsTabs from './CustomersViewsTabs';
+import CustomersTable from './CustomersTable';
 import CustomersAlerts from 'containers/Customers/CustomersAlerts';
-import CustomersViewPage from 'containers/Customers/CustomersViewPage';
 import { CustomersListProvider } from './CustomersListProvider';
 
-import withCustomers from 'containers/Customers/withCustomers';
+import withCustomers from './withCustomers';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
-import { compose } from 'utils';
-
-import 'style/pages/Customers/List.scss';
+import { transformTableStateToQuery, compose } from 'utils';
 
 /**
  * Customers list.
@@ -23,21 +24,24 @@ function CustomersList({
   changePageTitle,
 
   // #withCustomers
-  customersTableQuery,
+  customersTableState,
 }) {
   const { formatMessage } = useIntl();
 
+  // Changes the dashboard page title once the page mount.
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'customers_list' }));
   }, [changePageTitle, formatMessage]);
 
-
   return (
-    <CustomersListProvider query={customersTableQuery}>
-      <CustomerActionsBar />
+    <CustomersListProvider
+      query={transformTableStateToQuery(customersTableState)}
+    >
+      <CustomersActionsBar />
 
       <DashboardPageContent>
-        <CustomersViewPage />
+        <CustomersViewsTabs />
+        <CustomersTable />
       </DashboardPageContent>
       <CustomersAlerts />
     </CustomersListProvider>
@@ -46,5 +50,5 @@ function CustomersList({
 
 export default compose(
   withDashboardActions,
-  withCustomers(({ customersTableQuery }) => ({ customersTableQuery })),
+  withCustomers(({ customersTableState }) => ({ customersTableState })),
 )(CustomersList);

client/src/containers/Customers/CustomersLanding/CustomersListProvider.js

@@ -2,6 +2,7 @@ import React, { createContext } from 'react';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useResourceViews, useCustomers } from 'hooks/query';
+import { isTableEmptyStatus } from 'utils';
 
 const CustomersListContext = createContext();
 
@@ -9,14 +10,20 @@ function CustomersListProvider({ query, ...props }) {
   // Fetch customers resource views and fields.
   const {
     data: customersViews,
-    isFetching: isCustomersViewsLoading,
+    isLoading: isCustomersViewsLoading,
   } = useResourceViews('customers');
 
   // Fetches customers data with pagination meta.
   const {
-    data: { customers, pagination },
-    isFetching: isCustomersLoading,
-  } = useCustomers(query);
+    data: { customers, pagination, filterMeta },
+    isLoading: isCustomersLoading,
+    isFetching: isCustomersFetching,
+  } = useCustomers(query, { keepPreviousData: true });
+
+  // Detarmines the datatable empty status.
+  const isEmptyStatus = isTableEmptyStatus({
+    data: customers, pagination, filterMeta,
+  }) && !isCustomersFetching;
 
   const state = {
     customersViews,
@@ -25,8 +32,9 @@ function CustomersListProvider({ query, ...props }) {
 
     isCustomersViewsLoading,
     isCustomersLoading,
+    isCustomersFetching,
 
-    isEmptyStatus: false,
+    isEmptyStatus,
   };
 
   return (

client/src/containers/Customers/CustomersLanding/CustomersTable.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import CustomersEmptyStatus from './CustomersEmptyStatus';
+import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
+import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
+
+import { DataTable, Choose } from 'components';
+import { CLASSES } from 'common/classes';
+
+import withCustomersActions from './withCustomersActions';
+import withAlertsActions from 'containers/Alert/withAlertActions';
+import withDialogActions from 'containers/Dialog/withDialogActions';
+
+import { useCustomersListContext } from './CustomersListProvider';
+import { ActionsMenu, useCustomersTableColumns } from './components';
+
+import { compose } from 'utils';
+
+/**
+ * Customers table.
+ */
+function CustomersTable({
+  // #withCustomersActions
+  setCustomersTableState, 
+
+  // #withAlerts
+  openAlert
+}) {
+  const history = useHistory();
+
+  // Customers table columns.
+  const columns = useCustomersTableColumns();
+
+  // Customers list context.
+  const {
+    isEmptyStatus,
+    customers,
+    pagination,
+    isCustomersLoading,
+    isCustomersFetching,
+  } = useCustomersListContext();
+
+  // Handle fetch data once the page index, size or sort by of the table change.
+  const handleFetchData = React.useCallback(
+    ({ pageSize, pageIndex, sortBy }) => {
+      setCustomersTableState({
+        pageIndex,
+        pageSize,
+        sortBy,
+      });
+    },
+    [setCustomersTableState],
+  );
+
+  // Handles the customer delete action.
+  const handleCustomerDelete = (customer) => {
+    openAlert('customer-delete', { customerId: customer.id })
+  };
+
+  // Handle the customer edit action.
+  const handleCustomerEdit = (customer) => {
+    history.push(`/customers/${customer.id}/edit`);
+  };
+ 
+  return (
+    <div className={classNames(CLASSES.DASHBOARD_DATATABLE)}>
+      <Choose>
+        <Choose.When condition={isEmptyStatus}>
+          <CustomersEmptyStatus />
+        </Choose.When>
+
+        <Choose.Otherwise>
+          <DataTable
+            noInitialFetch={true}
+            columns={columns}
+            data={customers}
+
+            loading={isCustomersLoading}
+            headerLoading={isCustomersLoading}
+            progressBarLoading={isCustomersFetching}
+
+            onFetchData={handleFetchData}
+            selectionColumn={true}
+            expandable={false}
+            sticky={true}
+
+            spinnerProps={{ size: 30 }}
+
+            pagination={true}
+            manualSortBy={true}
+            manualPagination={true}
+            pagesCount={pagination.pagesCount}
+
+            autoResetSortBy={false}
+            autoResetPage={false}
+
+            TableLoadingRenderer={TableSkeletonRows}
+            TableHeaderSkeletonRenderer={TableSkeletonHeader}
+
+            payload={{
+              onDelete: handleCustomerDelete,
+              onEdit: handleCustomerEdit,
+            }}
+            ContextMenu={ActionsMenu}
+          />
+        </Choose.Otherwise>
+      </Choose>
+    </div>
+  );
+};
+
+export default compose(
+  withAlertsActions,
+  withDialogActions,
+  withCustomersActions,
+)(CustomersTable);

client/src/containers/Customers/CustomersLanding/CustomersViewsTabs.js

@@ -1,38 +1,41 @@
 import React, { useMemo } from 'react';
 import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { compose } from 'redux';
-import { useParams } from 'react-router-dom';
+import { pick } from 'lodash';
 
 import { DashboardViewsTabs } from 'components';
 
-import withCustomersActions from 'containers/Customers/withCustomersActions';
+import withCustomers from './withCustomers';
+import withCustomersActions from './withCustomersActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
-import { pick } from 'lodash';
+
 import { useCustomersListContext } from './CustomersListProvider';
+import { compose } from 'utils';
 
 /**
  * Customers views tabs.
  */
 function CustomersViewsTabs({
   // #withCustomersActions
-  addCustomersTableQueries,
+  setCustomersTableState,
+
+  // #withCustomers
+  customersTableState,
 }) {
-  const { custom_view_id: customViewId = null } = useParams();
+  // Customers list context.
   const { customersViews } = useCustomersListContext();
 
-  const tabs = useMemo(() =>
-    customersViews.map(
-      (view) => ({
-        ...pick(view, ['name', 'id']),
-      }),
-      [customersViews],
-    ),
-    [customersViews]
+  const tabs = useMemo(
+    () =>
+      customersViews.map((view) => pick(view, ['name', 'id']), [
+        customersViews,
+      ]),
+    [customersViews],
   );
 
+  // Handle tabs change.
   const handleTabsChange = (viewId) => {
-    addCustomersTableQueries({
-      custom_view_id: viewId || null,
+    setCustomersTableState({
+      customViewId: viewId || null,
     });
   };
 
@@ -40,7 +43,7 @@ function CustomersViewsTabs({
     <Navbar className="navbar--dashboard-views">
       <NavbarGroup align={Alignment.LEFT}>
         <DashboardViewsTabs
-          initialViewId={customViewId}
+          customViewId={customersTableState.customViewId}
           resourceName={'customers'}
           tabs={tabs}
           onChange={handleTabsChange}
@@ -53,4 +56,5 @@ function CustomersViewsTabs({
 export default compose(
   withDashboardActions,
   withCustomersActions,
+  withCustomers(({ customersTableState }) => ({ customersTableState })),
 )(CustomersViewsTabs);

client/src/containers/Customers/CustomersLanding/components.js

@@ -0,0 +1,143 @@
+import React, { useMemo } from 'react';
+import {
+  Button,
+  Popover,
+  Menu,
+  MenuItem,
+  MenuDivider,
+  Position,
+  Intent,
+} from '@blueprintjs/core';
+import { Icon, Money } from 'components';
+import { safeCallback } from 'utils';
+import { firstLettersArgs } from 'utils';
+import { useIntl } from 'react-intl';
+
+/**
+ * Actions menu.
+ */
+export function ActionsMenu({
+  row: { original },
+  payload: { onEdit, onDelete },
+}) {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Menu>
+      <MenuItem
+        icon={<Icon icon="reader-18" />}
+        text={formatMessage({ id: 'view_details' })}
+      />
+      <MenuDivider />
+      <MenuItem
+        icon={<Icon icon="pen-18" />}
+        text={formatMessage({ id: 'edit_customer' })}
+        onClick={safeCallback(onEdit, original)}
+      />
+      <MenuItem
+        icon={<Icon icon="trash-16" iconSize={16} />}
+        text={formatMessage({ id: 'delete_customer' })}
+        intent={Intent.DANGER}
+        onClick={safeCallback(onDelete, original)}
+      />
+    </Menu>
+  );
+}
+
+/**
+ * Actions cell.
+ */
+export function ActionsCell(props) {
+  return (
+    <Popover
+      content={<ActionsMenu {...props} />}
+      position={Position.RIGHT_BOTTOM}
+    >
+      <Button icon={<Icon icon="more-h-16" iconSize={16} />} />
+    </Popover>
+  );
+}
+
+/**
+ * Avatar cell.
+ */
+export function AvatarCell(row) {
+  return <span className="avatar">{firstLettersArgs(row.display_name)}</span>;
+}
+
+/**
+ * Phone number accessor.
+ */
+export function PhoneNumberAccessor(row) {
+  return (
+    <div>
+      <div className={'work_phone'}>{row.work_phone}</div>
+      <div className={'personal_phone'}>{row.personal_phone}</div>
+    </div>
+  );
+}
+
+/**
+ * Balance accessor.
+ */
+export function BalanceAccessor(row) {
+  return <Money amount={row.closing_balance} currency={'USD'} />;
+}
+
+/**
+ * Retrieve customers table columns.
+ */
+export function useCustomersTableColumns() {
+  const { formatMessage } = useIntl();
+
+  return useMemo(
+    () => [
+      {
+        id: 'avatar',
+        Header: '',
+        accessor: AvatarCell,
+        className: 'avatar',
+        width: 50,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+      {
+        id: 'display_name',
+        Header: formatMessage({ id: 'display_name' }),
+        accessor: 'display_name',
+        className: 'display_name',
+        width: 150,
+      },
+      {
+        id: 'company_name',
+        Header: formatMessage({ id: 'company_name' }),
+        accessor: 'company_name',
+        className: 'company_name',
+        width: 150,
+      },
+      {
+        id: 'phone_number',
+        Header: formatMessage({ id: 'phone_number' }),
+        accessor: PhoneNumberAccessor,
+        className: 'phone_number',
+        width: 100,
+      },
+      {
+        id: 'receivable_balance',
+        Header: formatMessage({ id: 'receivable_balance' }),
+        accessor: BalanceAccessor,
+        className: 'receivable_balance',
+        width: 100,
+      },
+      {
+        id: 'actions',
+        Cell: ActionsCell,
+        className: 'actions',
+        width: 70,
+        disableResizing: true,
+        disableSortBy: true,
+      },
+    ],
+    [formatMessage],
+  );
+}

client/src/containers/Customers/CustomersLanding/withCustomers.js

@@ -0,0 +1,14 @@
+import { connect } from 'react-redux';
+import { getCustomersTableStateFactory } from 'store/customers/customers.selectors';
+
+export default (mapState) => {
+  const getCustomersTableState = getCustomersTableStateFactory();
+
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      customersTableState: getCustomersTableState(state, props),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

client/src/containers/Customers/CustomersLanding/withCustomersActions.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import {
+  setCustomersTableState
+} from 'store/customers/customers.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  setCustomersTableState: (state) => dispatch(setCustomersTableState(state)),
+});
+
+export default connect(null, mapDispatchToProps);

client/src/containers/Customers/CustomersViewPage.js

@@ -1,61 +0,0 @@
-import React, { useCallback } from 'react';
-import { Route, Switch, useHistory } from 'react-router-dom';
-
-import CustomersViewsTabs from 'containers/Customers/CustomersViewsTabs';
-import CustomersTable from 'containers/Customers/CustomerTable';
-
-import withCustomersActions from 'containers/Customers/withCustomersActions';
-import withAlertsActions from 'containers/Alert/withAlertActions';
-import { compose } from 'utils';
-
-function CustomersViewPage({
-  // #withAlertsActions.
-  openAlert,
-
-  // #withCustomersActions
-  setSelectedRowsCustomers,
-}) {
-  const history = useHistory();
-
-  // Handle click delete customer.
-  const handleDeleteCustomer = useCallback(
-    ({ id }) => {
-      openAlert('customer-delete', { customerId: id });
-    },
-    [openAlert],
-  );
-
-  // Handle select customer rows.
-  const handleSelectedRowsChange = (selectedRows) => {
-    const selectedRowsIds = selectedRows.map((r) => r.id);
-    setSelectedRowsCustomers(selectedRowsIds);
-  };
-
-  const handleEditCustomer = useCallback(
-    (customer) => {
-      history.push(`/customers/${customer.id}/edit`);
-    },
-    [history],
-  );
-
-  return (
-    <Switch>
-      <Route
-        exact={true}
-        path={['/customers/:custom_view_id/custom_view', '/customers']}
-      >
-        <CustomersViewsTabs />
-        <CustomersTable
-          // onDeleteCustomer={handleDeleteCustomer}
-          // onEditCustomer={handleEditCustomer}
-          // onSelectedRowsChange={handleSelectedRowsChange}
-        />
-      </Route>
-    </Switch>
-  );
-}
-
-export default compose(
-  withAlertsActions,
-  withCustomersActions,
-)(CustomersViewPage);

client/src/containers/Customers/withCustomers.js

@@ -1,32 +0,0 @@
-import { connect } from 'react-redux';
-import { getResourceViews } from 'store/customViews/customViews.selectors';
-import {
-  getCustomerCurrentPageFactory,
-  getCustomerPaginationMetaFactory,
-  getCustomerTableQueryFactory,
-  getCustomersCurrentViewIdFactory,
-} from 'store/customers/customers.selectors';
-
-export default (mapState) => {
-  const getCustomersList = getCustomerCurrentPageFactory();
-  const getCustomerPaginationMeta = getCustomerPaginationMetaFactory();
-  const getCustomersCurrentViewId = getCustomersCurrentViewIdFactory();
-  const getCustomerTableQuery = getCustomerTableQueryFactory();
-
-  const mapStateToProps = (state, props) => {
-    const query = getCustomerTableQuery(state, props);
-    const mapped = {
-      customers: getCustomersList(state, props, query),
-      customersViews: getResourceViews(state, props, 'customers'),
-      customersTableQuery: query,
-      customerPagination: getCustomerPaginationMeta(state, props, query),
-      customersLoading: state.customers.loading,
-      customersItems: state.customers.items,
-      customersCurrentViewId: getCustomersCurrentViewId(state, props),
-      customersSelectedRows: state.customers.selectedRows,
-    };
-    return mapState ? mapState(mapped, state, props) : mapped;
-  };
-
-  return connect(mapStateToProps);
-};

client/src/containers/Customers/withCustomersActions.js

@@ -1,37 +0,0 @@
-import { connect } from 'react-redux';
-import {
-  fetchCustomers,
-  fetchCustomer,
-  submitCustomer,
-  editCustomer,
-  deleteCustomer,
-  deleteBulkCustomers,
-} from 'store/customers/customers.actions';
-import t from 'store/types';
-
-export const mapDispatchToProps = (dispatch) => ({
-  requestFetchCustomers: (query) => dispatch(fetchCustomers({ query })),
-  requestDeleteCustomer: (id) => dispatch(deleteCustomer({ id })),
-  requestDeleteBulkCustomers: (ids) => dispatch(deleteBulkCustomers({ ids })),
-  requestSubmitCustomer: (form) => dispatch(submitCustomer({ form })),
-  requestEditCustomer: (id, form) => dispatch(editCustomer({ id, form })),
-  requestFetchCustomer: (id) => dispatch(fetchCustomer({ id })),
-  addCustomersTableQueries: (queries) =>
-    dispatch({
-      type: t.CUSTOMERS_TABLE_QUERIES_ADD,
-      payload: { queries },
-    }),
-  changeCustomerView: (id) => {
-    dispatch({
-      type: t.CUSTOMERS_SET_CURRENT_VIEW,
-      currentViewId: parseInt(id, 10),
-    });
-  },
-  setSelectedRowsCustomers: (selectedRows) =>
-    dispatch({
-      type: t.CUSTOMER_SELECTED_ROWS_SET,
-      payload: { selectedRows },
-    }),
-});
-
-export default connect(null, mapDispatchToProps);