);
diff --git a/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js b/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
index 5741eb83a..e357eb426 100644
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerHeader.js
@@ -1,68 +1,56 @@
import React from 'react';
+import { defaultTo } from 'lodash';
+
import { FormattedMessage as T } from 'components';
-import { Icon, Money } from 'components';
+import { Icon, Money, DetailsMenu, DetailItem } from 'components';
+import { useAccountDrawerContext } from './AccountDrawerProvider';
/**
* Account drawer header.
*/
-export default function AccountDrawerHeader({
- account: {
- account_normal,
- account_type_label,
- code,
- amount,
- currency_code,
- description,
- },
-}) {
+export default function AccountDrawerHeader() {
+ const { account } = useAccountDrawerContext();
+
return (
-
-
-
-
-
-
-
{account_type_label}
-
-
-
-
-
-
- {' '}
- {account_normal}{' '}
+
+
+ }
+ >
+
+
+
+
+
+ }>
+ {account.account_type_label}
+
+
+ }>
+ {account.account_normal}
-
-
-
-
-
-
-
-
{currency_code}
-
+
-
-
-
-
- : {description ? description : '--'}
-
+
}>
+ {account.code}
+
+
+
}>
+ {account.currency_code}
+
+
+
+
+ }>
+ {defaultTo(account.description, '--')}
+
+
);
}
diff --git a/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js b/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
index 7d6ec6242..5f36a3322 100644
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerProvider.js
@@ -14,12 +14,12 @@ function AccountDrawerProvider({ accountId, name, ...props }) {
});
// Load the specific account transactions.
- const {
- data: accounts,
- isLoading: isAccountsLoading,
- } = useAccountTransactions(accountId, {
- enabled: !!accountId,
- });
+ const { data: accounts, isLoading: isAccountsLoading } =
+ useAccountTransactions(accountId, {
+ enabled: !!accountId,
+ });
+
+ // Drawer title.
const drawerTitle = `${account.name} ${account.code}`;
// provider.
diff --git a/client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js b/client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
index c8be64528..9b3c6ab8f 100644
--- a/client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
+++ b/client/src/containers/Drawers/AccountDrawer/AccountDrawerTable.js
@@ -1,61 +1,29 @@
import React from 'react';
-import moment from 'moment';
import { Link } from 'react-router-dom';
+import intl from 'react-intl-universal';
+
import { useAccountDrawerContext } from './AccountDrawerProvider';
-import intl from 'react-intl-universal';
-import { DataTable, Money } from 'components';
-import { isBlank, compose } from 'utils';
+import { DataTable, If } from 'components';
+
+import { compose } from 'utils';
+import { useAccountReadEntriesColumns } from './utils';
+
import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
/**
* account drawer table.
*/
function AccountDrawerTable({ closeDrawer }) {
const {
- account: { currency_code },
+ account,
accounts,
drawerName,
} = useAccountDrawerContext();
- const columns = React.useMemo(
- () => [
- {
- Header: intl.get('transaction_date'),
- accessor: ({ date }) => moment(date).format('YYYY MMM DD'),
- width: 110,
- },
- {
- Header: intl.get('transaction_type'),
- accessor: 'reference_type_formatted',
- width: 100,
- },
- {
- Header: intl.get('credit'),
- accessor: ({ credit }) =>
- !isBlank(credit) && credit !== 0 ? (
-
- ) : null,
- width: 80,
- },
- {
- Header: intl.get('debit'),
- accessor: ({ debit }) =>
- !isBlank(debit) && debit !== 0 ? (
-
- ) : null,
- width: 80,
- },
- {
- Header: intl.get('running_balance'),
- accessor: ({ running_balance }) => (
-
- ),
- width: 110,
- },
- ],
- [],
- );
+ // Account read-only entries table columns.
+ const columns = useAccountReadEntriesColumns();
// Handle view more link click.
const handleLinkClick = () => {
@@ -64,16 +32,18 @@ function AccountDrawerTable({ closeDrawer }) {
return (
-
+
-
+ 0}>
+
+
);
}
diff --git a/client/src/containers/Drawers/AccountDrawer/index.js b/client/src/containers/Drawers/AccountDrawer/index.js
index f621ffe81..52afe9ac7 100644
--- a/client/src/containers/Drawers/AccountDrawer/index.js
+++ b/client/src/containers/Drawers/AccountDrawer/index.js
@@ -15,9 +15,16 @@ function AccountDrawer({
isOpen,
payload: { accountId },
}) {
-
return (
-
+
diff --git a/client/src/containers/Drawers/AccountDrawer/utils.js b/client/src/containers/Drawers/AccountDrawer/utils.js
new file mode 100644
index 000000000..19d4910c0
--- /dev/null
+++ b/client/src/containers/Drawers/AccountDrawer/utils.js
@@ -0,0 +1,62 @@
+import intl from 'react-intl-universal';
+import React from 'react';
+import moment from 'moment';
+
+import { Money } from 'components';
+import { isBlank } from 'utils';
+
+/**
+ * Debit/credit table cell.
+ */
+function DebitCreditTableCell({ value, payload: { account } }) {
+ return !isBlank(value) && value !== 0 ? (
+
+ ) : null;
+}
+
+/**
+ * Running balance table cell.
+ */
+function RunningBalanceTableCell({ value, payload: { account } }) {
+ return (
+
+ );
+}
+
+/**
+ * Retrieve entries columns of read-only account view.
+ */
+export const useAccountReadEntriesColumns = () =>
+ React.useMemo(
+ () => [
+ {
+ Header: intl.get('transaction_date'),
+ accessor: ({ date }) => moment(date).format('YYYY MMM DD'),
+ width: 110,
+ },
+ {
+ Header: intl.get('transaction_type'),
+ accessor: 'reference_type_formatted',
+ width: 100,
+ },
+ {
+ Header: intl.get('credit'),
+ accessor: 'credit',
+ Cell: DebitCreditTableCell,
+ width: 80,
+ },
+ {
+ Header: intl.get('debit'),
+ accessor: 'debit',
+ Cell: DebitCreditTableCell,
+ width: 80,
+ },
+ {
+ Header: intl.get('running_balance'),
+ Cell: RunningBalanceTableCell,
+ accessor: 'running_balance',
+ width: 110,
+ },
+ ],
+ [],
+ );
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
index bd2b3329f..dd2cc138c 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerActionBar.js
@@ -1,23 +1,26 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import Icon from 'components/Icon';
-import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import {
+ Button,
+ Classes,
+ NavbarGroup,
+ Intent,
+ NavbarDivider,
+} from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
-import { safeCallback } from 'utils';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
/**
* Expense drawer action bar.
*/
function ExpenseDrawerActionBar({
- // #ownProps
- expense,
-
// #withAlertsDialog
openAlert,
@@ -25,21 +28,18 @@ function ExpenseDrawerActionBar({
closeDrawer,
}) {
const history = useHistory();
+ const { expense } = useExpenseDrawerContext();
// Handle the expense edit action.
- const onEditExpense = () => {
- if (expense) {
- history.push(`/expenses/${expense.id}/edit`);
- closeDrawer('expense-drawer');
- }
+ const handleEditExpense = () => {
+ history.push(`/expenses/${expense.id}/edit`);
+ closeDrawer('expense-drawer');
};
// Handle the expense delete action.
- const onDeleteExpense = () => {
- if (expense) {
- openAlert('expense-delete', { expenseId: expense.id });
- closeDrawer('expense-drawer');
- }
+ const handleDeleteExpense = () => {
+ openAlert('expense-delete', { expenseId: expense.id });
+ closeDrawer('expense-drawer');
};
return (
@@ -49,15 +49,15 @@ function ExpenseDrawerActionBar({
className={Classes.MINIMAL}
icon={}
text={}
- onClick={safeCallback(onEditExpense)}
+ onClick={handleEditExpense}
/>
-
+
}
+ icon={}
text={}
- // intent={Intent.DANGER}
- onClick={safeCallback(onDeleteExpense)}
+ intent={Intent.DANGER}
+ onClick={handleDeleteExpense}
/>
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
index fca141626..c84c074f4 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerContent.js
@@ -1,6 +1,6 @@
import React from 'react';
-import 'style/components/Drawers/ViewDetails.scss';
+import 'style/components/Drawers/ExpenseDrawer.scss';
import { ExpenseDrawerProvider } from './ExpenseDrawerProvider';
import ExpenseDrawerDetails from './ExpenseDrawerDetails';
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
index 8ddbf6674..859d4c96d 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerDetails.js
@@ -1,22 +1,26 @@
import React from 'react';
+
+import { Card } from 'components';
+
import ExpenseDrawerActionBar from './ExpenseDrawerActionBar';
import ExpenseDrawerHeader from './ExpenseDrawerHeader';
import ExpenseDrawerTable from './ExpenseDrawerTable';
import ExpenseDrawerFooter from './ExpenseDrawerFooter';
-import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
/**
* Expense view details.
*/
export default function ExpenseDrawerDetails() {
- const { expense } = useExpenseDrawerContext();
return (
);
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
index a74d32ca7..c1641512b 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerFooter.js
@@ -1,20 +1,19 @@
import React from 'react';
-import { If, Money } from 'components';
-import { FormattedMessage as T } from 'components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
+
+export default function ExpenseDrawerFooter() {
+ const { expense: { total_amount } } = useExpenseDrawerContext();
-export default function ExpenseDrawerFooter({
- expense: { total_amount, currency_code },
-}) {
return (
-
-
-
-
-
{}
+
+
+
+
Subtotal
+
{total_amount}
-
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
index 9500c3f04..8fddabe15 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerHeader.js
@@ -1,68 +1,58 @@
import React from 'react';
import moment from 'moment';
-import { If, Money } from 'components';
+import { defaultTo } from 'lodash';
+
+import { DetailItem, DetailsMenu, Money } from 'components';
import { FormattedMessage as T } from 'components';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
/**
* Expense drawer content.
*/
-export default function ExpenseDrawerHeader({
- expense: {
- total_amount,
- payment_account: { name },
- payment_date,
- currency_code,
- reference_no,
- description,
- published_at,
- },
-}) {
+export default function ExpenseDrawerHeader() {
+ const {
+ expense: {
+ total_amount,
+ payment_date,
+ currency_code,
+ reference_no,
+ description,
+ published_at,
+ },
+ } = useExpenseDrawerContext();
+
return (
-
-
-
-
-
-
-
{moment(payment_date).format('YYYY MMM DD')}
-
-
-
-
-
-
-
{currency_code}
-
-
-
-
-
-
-
{moment(published_at).format('YYYY MMM DD')}
-
-
+
+
+ }>
+
+
+
+
+
+ }>
+ {moment(payment_date).format('YYYY MMM DD')}
+
+
+ }>
+ {currency_code}
+
+
+ }>
+ {defaultTo(reference_no, '-')}
+
+
+ }>
+ {moment(published_at).format('YYYY MMM DD')}
+
+
+
+
+ }>
+ {defaultTo(description, '—')}
+
+ }>2021 Aug 24
+
);
}
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js
index 2cb576313..f16cbdddc 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerProvider.js
@@ -1,6 +1,6 @@
import React from 'react';
import { useExpense } from 'hooks/query';
-import { DrawerHeaderContent, DashboardInsider } from 'components';
+import { DashboardInsider } from 'components';
const ExpenseDrawerDrawerContext = React.createContext();
@@ -8,16 +8,22 @@ const ExpenseDrawerDrawerContext = React.createContext();
* Expense drawer provider.
*/
function ExpenseDrawerProvider({ expenseId, ...props }) {
-
// Fetch the expense details.
- const { data: expense, isLoading: isExpenseLoading } = useExpense(expenseId, {
+ const {
+ data: expense,
+ isLoading: isExpenseLoading,
+ isFetching: isExpenseFetching,
+ } = useExpense(expenseId, {
enabled: !!expenseId,
});
- // provider.
+ // Provider.
const provider = {
expenseId,
expense,
+
+ isExpenseFetching,
+ isExpenseLoading,
};
return (
diff --git a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
index ae15afac0..8a46ef316 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/ExpenseDrawerTable.js
@@ -1,40 +1,18 @@
import React from 'react';
-
-import intl from 'react-intl-universal';
-import { DataTable, Money } from 'components';
+import { DataTable } from 'components';
+import { useExpenseReadEntriesColumns } from './utils';
+import { useExpenseDrawerContext } from './ExpenseDrawerProvider';
/**
* Expense details table.
*/
-export default function ExpenseDrawerTable({
- expense: { currency_code, categories },
-}) {
- const columns = React.useMemo(
- () => [
- {
- Header: intl.get('expense_account'),
- accessor: 'expense_account.name',
- width: 110,
- },
- {
- Header: intl.get('amount'),
- accessor: ({ amount }) => (
-
- ),
- width: 100,
- },
- {
- Header: intl.get('description'),
- accessor: 'description',
- width: 110,
- },
- ],
- [],
- );
+export default function ExpenseDrawerTable() {
+ const columns = useExpenseReadEntriesColumns();
+ const { expense } = useExpenseDrawerContext();
return (
-
+
);
}
diff --git a/client/src/containers/Drawers/ExpenseDrawer/index.js b/client/src/containers/Drawers/ExpenseDrawer/index.js
index 07031c210..aadfe7946 100644
--- a/client/src/containers/Drawers/ExpenseDrawer/index.js
+++ b/client/src/containers/Drawers/ExpenseDrawer/index.js
@@ -15,10 +15,19 @@ function ExpenseDrawer({
//#withDrawer
isOpen,
- payload: { expenseId, title },
+ payload: { expenseId },
}) {
return (
-
+
diff --git a/client/src/containers/Drawers/ExpenseDrawer/utils.js b/client/src/containers/Drawers/ExpenseDrawer/utils.js
new file mode 100644
index 000000000..74ed165f0
--- /dev/null
+++ b/client/src/containers/Drawers/ExpenseDrawer/utils.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import intl from 'react-intl-universal';
+
+export const useExpenseReadEntriesColumns = () =>
+ React.useMemo(
+ () => [
+ {
+ Header: intl.get('expense_account'),
+ accessor: 'expense_account.name',
+ width: 110,
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('description'),
+ accessor: 'description',
+ width: 110,
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('amount'),
+ accessor: 'amount',
+ width: 100,
+ disableSortBy: true,
+ },
+ ],
+ [],
+ );
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
index 73d22029f..f8c5fb1b6 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerActionBar.js
@@ -1,23 +1,26 @@
import React from 'react';
import { useHistory } from 'react-router-dom';
import Icon from 'components/Icon';
-import { Button, Classes, NavbarGroup, Intent } from '@blueprintjs/core';
+import {
+ Button,
+ Classes,
+ NavbarGroup,
+ Intent,
+ NavbarDivider,
+} from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
-import { safeCallback } from 'utils';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
/**
* Manual journal action bar.
*/
function ManualJournalDrawerActionBar({
- // #ownProps
- manualJournal,
-
// #withAlertsDialog
openAlert,
@@ -25,21 +28,17 @@ function ManualJournalDrawerActionBar({
closeDrawer,
}) {
const history = useHistory();
+ const { manualJournalId } = useManualJournalDrawerContext();
// Handle edit manual journal action.
- const onEditManualJournal = () => {
- if (manualJournal) {
- history.push(`/manual-journals/${manualJournal.id}/edit`);
- closeDrawer('journal-drawer');
- }
+ const handleEditManualJournal = () => {
+ history.push(`/manual-journals/${manualJournalId}/edit`);
+ closeDrawer('journal-drawer');
};
// Handle manual journal delete action.
- const onDeleteManualJournal = () => {
- if (manualJournal) {
- openAlert('journal-delete', { manualJournalId: manualJournal.id });
- closeDrawer('journal-drawer');
- }
+ const handleDeleteManualJournal = () => {
+ openAlert('journal-delete', { manualJournalId });
};
return (
@@ -49,14 +48,15 @@ function ManualJournalDrawerActionBar({
className={Classes.MINIMAL}
icon={}
text={}
- onClick={safeCallback(onEditManualJournal)}
+ onClick={handleEditManualJournal}
/>
-
+
}
+ icon={}
text={}
- onClick={safeCallback(onDeleteManualJournal)}
+ intent={Intent.DANGER}
+ onClick={handleDeleteManualJournal}
/>
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
index e5129cb5c..67794ea93 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerDetails.js
@@ -1,4 +1,7 @@
import React from 'react';
+
+import { Card } from 'components';
+
import ManualJournalDrawerActionBar from './ManualJournalDrawerActionBar';
import ManualJournalDrawerHeader from './ManualJournalDrawerHeader';
import ManualJournalDrawerTable from './ManualJournalDrawerTable';
@@ -15,10 +18,13 @@ export default function ManualJournalDrawerDetails() {
return (
);
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
index 29451caac..fc0d02efa 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerFooter.js
@@ -1,25 +1,27 @@
import React from 'react';
-import { FormattedMessage as T } from 'components';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
+
+export default function ManualJournalDrawerFooter({}) {
+ const {
+ manualJournal: { amount },
+ } = useManualJournalDrawerContext();
-export default function ManualJournalDrawerFooter({
- manualJournal: { amount_formatted },
-}) {
return (
-
-
-
-
-
-
-
{amount_formatted}
+
+
+
+
Subtotal
+
{amount}
+
{amount}
-
-
-
-
-
{amount_formatted}
+
+
TOTAL
+
{amount}
+
{amount}
);
}
+
+
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
index 28daba3e0..eb6edc735 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerHeader.js
@@ -1,47 +1,49 @@
import React from 'react';
-import { FormattedMessage as T } from 'components';
+import { defaultTo } from 'lodash';
+import { DetailsMenu, DetailItem, FormattedMessage as T } from 'components';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
/**
- * Manual journal details header.
+ * Manual journal details header.
*/
-export default function ManualJournalDrawerHeader({
- manualJournal: {
- amount_formatted,
- journal_type,
- journal_number,
- reference,
- currency_code,
- },
-}) {
+export default function ManualJournalDrawerHeader() {
+ const {
+ manualJournal: {
+ formatted_amount,
+ journal_type,
+ journal_number,
+ reference,
+ currency_code,
+ description,
+ },
+ } = useManualJournalDrawerContext();
+
return (
-
-
-
-
-
-
-
-
{journal_number}
-
-
-
-
-
-
-
{currency_code}
+
+
+ }>
+ {formatted_amount}
+
+
+ }>
+ {journal_type}
+
+
+ }>
+ {journal_number}
+
+
+ }>
+ {defaultTo(reference, '-')}
+
+
+ }>
+ {currency_code}
+
+
+
+
+ Description: {defaultTo(description, '—')}
);
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
index 6b2b531f0..527e259bb 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerProvider.js
@@ -9,17 +9,22 @@ const ManualJournalDrawerContext = React.createContext();
* Manual journal drawer provider.
*/
function ManualJournalDrawerProvider({ manualJournalId, ...props }) {
- // fetch the specific manual journal details.
- const { data: manualJournal, isLoading: isJournalLoading } = useJournal(
- manualJournalId,
- {
- enabled: !!manualJournalId,
- },
- );
- // provider.
+ // Fetch the specific manual journal details.
+ const {
+ data: manualJournal,
+ isLoading: isJournalLoading,
+ isFetching: isJournalFetching,
+ } = useJournal(manualJournalId, {
+ enabled: !!manualJournalId,
+ });
+
+ // Provider.
const provider = {
manualJournalId,
manualJournal,
+
+ isJournalFetching,
+ isJournalLoading,
};
return (
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
index 26798517b..5ae255d15 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/ManualJournalDrawerTable.js
@@ -1,73 +1,20 @@
import React from 'react';
-import { Classes, Tooltip, Position } from '@blueprintjs/core';
-import intl from 'react-intl-universal';
-import { DataTable, Money, If, Icon } from 'components';
-import { isBlank } from 'utils';
-
-/**
- * Note column accessor.
- */
-export function NoteAccessor(row) {
- return (
-
-
-
-
-
- );
-}
+import { DataTable, If } from 'components';
+import { useManualJournalEntriesColumns } from './utils';
+import { useManualJournalDrawerContext } from './ManualJournalDrawerProvider';
/**
* Manual journal drawer table.
*/
-export default function ManualJournalDrawerTable({
- manualJournal: { entries, description, currency_code },
-}) {
- const columns = React.useMemo(
- () => [
- {
- Header: intl.get('account_name'),
- accessor: 'account.name',
- width: 130,
- },
- {
- Header: intl.get('contact'),
- accessor: 'contact.display_name',
- width: 130,
- },
- {
- Header: intl.get('credit'),
- accessor: ({ credit }) =>
- !isBlank(credit) && credit !== 0 ? (
-
- ) : null,
- width: 80,
- },
- {
- Header: intl.get('debit'),
- accessor: ({ debit }) =>
- !isBlank(debit) && debit !== 0 ? (
-
- ) : null,
- width: 80,
- },
- {
- Header: intl.get('note'),
- accessor: NoteAccessor,
- width: 80,
- },
- ],
- [],
- );
+export default function ManualJournalDrawerTable() {
+ const columns = useManualJournalEntriesColumns();
+ const {
+ manualJournal: { entries, description },
+ } = useManualJournalDrawerContext();
return (
-
+
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/index.js b/client/src/containers/Drawers/ManualJournalDrawer/index.js
index 28649bd6f..eeecfc894 100644
--- a/client/src/containers/Drawers/ManualJournalDrawer/index.js
+++ b/client/src/containers/Drawers/ManualJournalDrawer/index.js
@@ -19,7 +19,15 @@ function ManualJournalDrawer({
payload: { manualJournalId },
}) {
return (
-
+
diff --git a/client/src/containers/Drawers/ManualJournalDrawer/utils.js b/client/src/containers/Drawers/ManualJournalDrawer/utils.js
new file mode 100644
index 000000000..c27ea0a28
--- /dev/null
+++ b/client/src/containers/Drawers/ManualJournalDrawer/utils.js
@@ -0,0 +1,65 @@
+import intl from 'react-intl-universal';
+import React from 'react';
+import { Classes, Tooltip, Position } from '@blueprintjs/core';
+
+import { If, Icon } from 'components';
+
+/**
+ * Note column accessor.
+ */
+export function NoteAccessor(row) {
+ return (
+
+
+
+
+
+ );
+}
+
+/**
+ * Retrieve read-only manual journal entries columns.
+ */
+export const useManualJournalEntriesColumns = () =>
+ React.useMemo(
+ () => [
+ {
+ Header: intl.get('account_name'),
+ accessor: 'account.name',
+ width: 130,
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('contact'),
+ accessor: 'contact.display_name',
+ width: 130,
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('note'),
+ accessor: NoteAccessor,
+ width: 80,
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('credit'),
+ accessor: 'credit',
+ width: 100,
+ disableResizable: true,
+ disableSortBy: true,
+ },
+ {
+ Header: intl.get('debit'),
+ accessor: 'debit',
+ width: 100,
+ disableResizable: true,
+ disableSortBy: true,
+ },
+ ],
+ [],
+ );
diff --git a/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js b/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
index 689d12be5..815b01684 100644
--- a/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpensesList.js
@@ -21,6 +21,7 @@ import { ExpensesListProvider } from './ExpensesListProvider';
function ExpensesList({
// #withExpenses
expensesTableState,
+ expensesTableStateChanged,
// #withExpensesActions
setExpensesTableState,
@@ -40,6 +41,7 @@ function ExpensesList({
return (
@@ -57,6 +59,9 @@ function ExpensesList({
}
export default compose(
- withExpenses(({ expensesTableState }) => ({ expensesTableState })),
+ withExpenses(({ expensesTableState, expensesTableStateChanged }) => ({
+ expensesTableState,
+ expensesTableStateChanged,
+ })),
withExpensesActions,
)(ExpensesList);
diff --git a/client/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js b/client/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js
index 53f3ae0b9..9262c922e 100644
--- a/client/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js
+++ b/client/src/containers/Expenses/ExpensesLanding/ExpensesListProvider.js
@@ -1,14 +1,16 @@
import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useExpenses, useResourceMeta, useResourceViews } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
const ExpensesListContext = createContext();
/**
* Accounts chart data provider.
*/
-function ExpensesListProvider({ query, ...props }) {
+function ExpensesListProvider({ query, tableStateChanged, ...props }) {
// Fetch accounts resource views and fields.
const { data: expensesViews, isLoading: isViewsLoading } =
useResourceViews('expenses');
@@ -29,11 +31,7 @@ function ExpensesListProvider({ query, ...props }) {
// Detarmines the datatable empty status.
const isEmptyStatus =
- isTableEmptyStatus({
- data: expenses,
- pagination,
- filterMeta,
- }) && !isExpensesFetching;
+ isEmpty(expenses) && !isExpensesLoading && !tableStateChanged;
// Provider payload.
const provider = {
diff --git a/client/src/containers/Expenses/ExpensesLanding/withExpenses.js b/client/src/containers/Expenses/ExpensesLanding/withExpenses.js
index 6255c9b77..8b551b26d 100644
--- a/client/src/containers/Expenses/ExpensesLanding/withExpenses.js
+++ b/client/src/containers/Expenses/ExpensesLanding/withExpenses.js
@@ -1,12 +1,17 @@
import { connect } from 'react-redux';
-import { getExpensesTableStateFactory } from 'store/expenses/expenses.selectors';
+import {
+ expensesTableStateChangedFactory,
+ getExpensesTableStateFactory,
+} from 'store/expenses/expenses.selectors';
export default (mapState) => {
const getExpensesTableState = getExpensesTableStateFactory();
+ const expensesTableStateChanged = expensesTableStateChangedFactory();
const mapStateToProps = (state, props) => {
const mapped = {
expensesTableState: getExpensesTableState(state, props),
+ expensesTableStateChanged: expensesTableStateChanged(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
diff --git a/client/src/containers/Expenses/ExpensesLanding/withExpensesActions.js b/client/src/containers/Expenses/ExpensesLanding/withExpensesActions.js
index 28fb07a49..03294a10d 100644
--- a/client/src/containers/Expenses/ExpensesLanding/withExpensesActions.js
+++ b/client/src/containers/Expenses/ExpensesLanding/withExpensesActions.js
@@ -1,8 +1,12 @@
import { connect } from 'react-redux';
-import { setExpensesTableState } from 'store/expenses/expenses.actions';
+import {
+ setExpensesTableState,
+ resetExpensesTableState,
+} from 'store/expenses/expenses.actions';
const mapDispatchToProps = (dispatch) => ({
setExpensesTableState: (state) => dispatch(setExpensesTableState(state)),
+ resetExpensesTableState: (state) => dispatch(resetExpensesTableState(state)),
});
export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Items/ItemsList.js b/client/src/containers/Items/ItemsList.js
index 7a6a7985b..167e4ad04 100644
--- a/client/src/containers/Items/ItemsList.js
+++ b/client/src/containers/Items/ItemsList.js
@@ -11,7 +11,9 @@ import ItemsViewsTabs from './ItemsViewsTabs';
import ItemsDataTable from './ItemsDataTable';
import { ItemsListProvider } from './ItemsListProvider';
+
import withItems from './withItems';
+import withItemsActions from './withItemsActions';
/**
* Items list.
@@ -19,9 +21,24 @@ import withItems from './withItems';
function ItemsList({
// #withItems
itemsTableState,
+ itemsTableStateChanged,
+
+ // #withItemsActions
+ resetItemsTableState,
}) {
+ // Resets items table query state once the page unmount.
+ React.useEffect(
+ () => () => {
+ resetItemsTableState();
+ },
+ [resetItemsTableState],
+ );
+
return (
-
+
@@ -38,5 +55,9 @@ function ItemsList({
}
export default compose(
- withItems(({ itemsTableState }) => ({ itemsTableState })),
+ withItemsActions,
+ withItems(({ itemsTableState, itemsTableStateChanged }) => ({
+ itemsTableState,
+ itemsTableStateChanged,
+ })),
)(ItemsList);
diff --git a/client/src/containers/Items/ItemsListProvider.js b/client/src/containers/Items/ItemsListProvider.js
index e44fe0c25..51918764a 100644
--- a/client/src/containers/Items/ItemsListProvider.js
+++ b/client/src/containers/Items/ItemsListProvider.js
@@ -1,5 +1,5 @@
import React, { createContext } from 'react';
-
+import { isEmpty } from 'lodash';
import {
getFieldsFromResourceMeta,
transformTableQueryToParams,
@@ -15,7 +15,7 @@ const ItemsContext = createContext();
/**
* Items list provider.
*/
-function ItemsListProvider({ tableState, ...props }) {
+function ItemsListProvider({ tableState, tableStateChanged, ...props }) {
const tableQuery = transformItemsTableState(tableState);
// Fetch accounts resource views and fields.
@@ -43,13 +43,7 @@ function ItemsListProvider({ tableState, ...props }) {
// Detarmines the datatable empty status.
const isEmptyStatus =
- isTableEmptyStatus({
- data: items,
- pagination,
- filterMeta,
- }) &&
- !isItemsFetching &&
- !tableState.inactiveMode;
+ !tableStateChanged && !isItemsLoading && isEmpty(items);
const state = {
itemsViews,
@@ -68,7 +62,10 @@ function ItemsListProvider({ tableState, ...props }) {
};
return (
-
+
);
diff --git a/client/src/containers/Items/ItemsViewsTabs.js b/client/src/containers/Items/ItemsViewsTabs.js
index 074b3f97b..82a93f086 100644
--- a/client/src/containers/Items/ItemsViewsTabs.js
+++ b/client/src/containers/Items/ItemsViewsTabs.js
@@ -22,7 +22,7 @@ function ItemsViewsTabs({
const { itemsViews } = useItemsListContext();
// Mapped items views.
- const tabs = transfromViewsToTabs(itemsViews)
+ const tabs = transfromViewsToTabs(itemsViews);
// Handles the active tab change.
const handleTabChange = (viewSlug) => {
@@ -46,7 +46,7 @@ function ItemsViewsTabs({
export default compose(
withRouter,
withItems(({ itemsTableState }) => ({
- itemsCurrentView: itemsTableState?.viewSlug
+ itemsCurrentView: itemsTableState?.viewSlug,
})),
withItemsActions,
)(ItemsViewsTabs);
diff --git a/client/src/containers/Items/withItems.js b/client/src/containers/Items/withItems.js
index e1cdd4eb8..81dd3e4a1 100644
--- a/client/src/containers/Items/withItems.js
+++ b/client/src/containers/Items/withItems.js
@@ -1,15 +1,18 @@
import {connect} from 'react-redux';
import {
getItemsTableStateFactory,
+ isItemsTableStateChangedFactory,
} from 'store/items/items.selectors';
export default (mapState) => {
const getItemsTableState = getItemsTableStateFactory();
+ const isItemsTableStateChanged = isItemsTableStateChangedFactory();
const mapStateToProps = (state, props) => {
const mapped = {
itemsSelectedRows: state.items.selectedRows,
itemsTableState: getItemsTableState(state, props),
+ itemsTableStateChanged: isItemsTableStateChanged(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
diff --git a/client/src/containers/Items/withItemsActions.js b/client/src/containers/Items/withItemsActions.js
index d5e55cd04..eb0ec86c9 100644
--- a/client/src/containers/Items/withItemsActions.js
+++ b/client/src/containers/Items/withItemsActions.js
@@ -1,8 +1,12 @@
import { connect } from 'react-redux';
-import { setItemsTableState }from 'store/items/items.actions';
+import {
+ setItemsTableState,
+ resetItemsTableState,
+} from 'store/items/items.actions';
export const mapDispatchToProps = (dispatch) => ({
setItemsTableState: (queries) => dispatch(setItemsTableState(queries)),
+ resetItemsTableState: () => dispatch(resetItemsTableState()),
});
export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
index 1f15c0f97..42f8834c0 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsList.js
@@ -21,9 +21,10 @@ import { transformTableStateToQuery, compose } from 'utils';
function BillsList({
// #withBills
billsTableState,
+ billsTableStateChanged,
// #withBillsActions
- setBillsTableState
+ setBillsTableState,
}) {
// Resets the accounts table state once the page unmount.
useEffect(
@@ -38,7 +39,10 @@ function BillsList({
);
return (
-
+
@@ -55,6 +59,9 @@ function BillsList({
}
export default compose(
- withBills(({ billsTableState }) => ({ billsTableState })),
- withBillsActions
+ withBills(({ billsTableState, billsTableStateChanged }) => ({
+ billsTableState,
+ billsTableStateChanged,
+ })),
+ withBillsActions,
)(BillsList);
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js b/client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js
index 562c0b6f1..d5ecde035 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/BillsListProvider.js
@@ -1,14 +1,17 @@
import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useResourceViews, useResourceMeta, useBills } from 'hooks/query';
-import { getFieldsFromResourceMeta, isTableEmptyStatus } from 'utils';
+
+import { getFieldsFromResourceMeta } from 'utils';
const BillsListContext = createContext();
/**
* Accounts chart data provider.
*/
-function BillsListProvider({ query, ...props }) {
+function BillsListProvider({ query, tableStateChanged, ...props }) {
// Fetch accounts resource views and fields.
const { data: billsViews, isLoading: isViewsLoading } =
useResourceViews('bills');
@@ -29,11 +32,7 @@ function BillsListProvider({ query, ...props }) {
// Detarmines the datatable empty status.
const isEmptyStatus =
- isTableEmptyStatus({
- data: bills,
- pagination,
- filterMeta,
- }) && !isBillsFetching;
+ isEmpty(bills) && !isBillsLoading && !tableStateChanged;
// Provider payload.
const provider = {
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/withBills.js b/client/src/containers/Purchases/Bills/BillsLanding/withBills.js
index 6c6ec01c1..3b4cdded9 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/withBills.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/withBills.js
@@ -1,12 +1,17 @@
import { connect } from 'react-redux';
-import { getBillsTableStateFactory } from 'store/Bills/bills.selectors';
+import {
+ getBillsTableStateFactory,
+ billsTableStateChangedFactory,
+} from 'store/Bills/bills.selectors';
export default (mapState) => {
const getBillsTableState = getBillsTableStateFactory();
+ const billsTableStateChanged = billsTableStateChangedFactory();
const mapStateToProps = (state, props) => {
const mapped = {
billsTableState: getBillsTableState(state, props),
+ billsTableStateChanged: billsTableStateChanged(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
diff --git a/client/src/containers/Purchases/Bills/BillsLanding/withBillsActions.js b/client/src/containers/Purchases/Bills/BillsLanding/withBillsActions.js
index e0d6d0c03..e4122183c 100644
--- a/client/src/containers/Purchases/Bills/BillsLanding/withBillsActions.js
+++ b/client/src/containers/Purchases/Bills/BillsLanding/withBillsActions.js
@@ -1,8 +1,12 @@
import { connect } from 'react-redux';
-import { setBillsTableState } from 'store/Bills/bills.actions';
+import {
+ setBillsTableState,
+ resetBillsTableState,
+} from 'store/Bills/bills.actions';
const mapDispatchToProps = (dispatch) => ({
setBillsTableState: (queries) => dispatch(setBillsTableState(queries)),
+ resetBillsTableState: () => dispatch(resetBillsTableState()),
});
export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
index e7ad53d85..013f66f6c 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeActionsBar.js
@@ -43,17 +43,17 @@ function PaymentMadeActionsBar({
// Payment receives list context.
const { paymentMadesViews, fields } = usePaymentMadesListContext();
+ // Payment receive refresh action.
+ const { refresh } = useRefreshPaymentMades();
+
// Handle new payment made button click.
const handleClickNewPaymentMade = () => {
history.push('/payment-mades/new');
};
- // Payment receive refresh action.
- const { refresh } = useRefreshPaymentMades();
-
// Handle tab changing.
- const handleTabChange = (customView) => {
- setPaymentMadesTableState({ customViewId: customView.id || null });
+ const handleTabChange = (viewSlug) => {
+ setPaymentMadesTableState({ viewSlug });
};
// Handle click a refresh payment receives.
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
index 3ff9662ae..566e93095 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeList.js
@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
function PaymentMadeList({
// #withPaymentMades
paymentMadesTableState,
+ paymentsTableStateChanged,
// #withPaymentMadeActions
- setPaymentMadesTableState
+ resetPaymentMadesTableState,
}) {
// Resets the invoices table state once the page unmount.
React.useEffect(
() => () => {
- setPaymentMadesTableState({
- filterRoles: [],
- viewSlug: '',
- pageIndex: 0,
- });
+ resetPaymentMadesTableState();
},
- [setPaymentMadesTableState],
+ [resetPaymentMadesTableState],
);
return (
@@ -56,8 +54,9 @@ function PaymentMadeList({
}
export default compose(
- withPaymentMades(({ paymentMadesTableState }) => ({
+ withPaymentMades(({ paymentMadesTableState, paymentsTableStateChanged }) => ({
paymentMadesTableState,
+ paymentsTableStateChanged,
})),
- withPaymentMadeActions
+ withPaymentMadeActions,
)(PaymentMadeList);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js
index 346d84072..c8d902042 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadeViewTabs.js
@@ -2,7 +2,6 @@ import React from 'react';
import { useHistory } from 'react-router';
import { FormattedMessage as T } from 'components';
import { Alignment, Navbar, NavbarGroup } from '@blueprintjs/core';
-import { pick } from 'lodash';
import { DashboardViewsTabs } from 'components';
@@ -10,6 +9,8 @@ import { usePaymentMadesListContext } from './PaymentMadesListProvider';
import withPaymentMadeActions from './withPaymentMadeActions';
import { compose } from 'utils';
+import { transformPaymentViewsToTabs } from './utils';
+
import withPaymentMade from './withPaymentMade';
/**
@@ -28,15 +29,14 @@ function PaymentMadeViewTabs({
const { paymentMadesViews } = usePaymentMadesListContext();
// Handle the active tab changning.
- const handleTabsChange = (customView) => {
- setPaymentMadesTableState({
- customViewId: customView.id || null,
- });
+ const handleTabsChange = (viewSlug) => {
+ setPaymentMadesTableState({ viewSlug });
};
-
- const tabs = paymentMadesViews.map((view) => ({
- ...pick(view, ['name', 'id']),
- }));
+ // Transformes payment views to tabs.
+ const tabs = React.useMemo(
+ () => transformPaymentViewsToTabs(paymentMadesViews),
+ [paymentMadesViews],
+ );
const handleClickNewView = () => {
history.push('/custom_views/payment-mades/new');
@@ -59,5 +59,5 @@ function PaymentMadeViewTabs({
export default compose(
withPaymentMadeActions,
- withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState }))
+ withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
)(PaymentMadeViewTabs);
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
index 53250b9fb..0f81b01e4 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/PaymentMadesListProvider.js
@@ -1,23 +1,23 @@
import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import {
useResourceViews,
usePaymentMades,
- useResourceMeta
+ useResourceMeta,
} from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
const PaymentMadesListContext = createContext();
/**
* Accounts chart data provider.
*/
-function PaymentMadesListProvider({ query, ...props }) {
+function PaymentMadesListProvider({ query, tableStateChanged, ...props }) {
// Fetch accounts resource views and fields.
- const {
- data: paymentMadesViews,
- isLoading: isViewsLoading,
- } = useResourceViews('bill_payments');
+ const { data: paymentMadesViews, isLoading: isViewsLoading } =
+ useResourceViews('bill_payments');
// Fetch the accounts resource fields.
const {
@@ -35,11 +35,7 @@ function PaymentMadesListProvider({ query, ...props }) {
// Detarmines the datatable empty status.
const isEmptyStatus =
- isTableEmptyStatus({
- data: paymentMades,
- pagination,
- filterMeta,
- }) && !isPaymentsLoading;
+ isEmpty(paymentMades) && !isPaymentsLoading && !tableStateChanged;
// Provider payload.
const provider = {
@@ -56,7 +52,7 @@ function PaymentMadesListProvider({ query, ...props }) {
isPaymentsLoading,
isPaymentsFetching,
isViewsLoading,
- isEmptyStatus
+ isEmptyStatus,
};
return (
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/utils.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/utils.js
new file mode 100644
index 000000000..c80ead371
--- /dev/null
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/utils.js
@@ -0,0 +1,7 @@
+import { pick } from 'lodash';
+
+export const transformPaymentViewsToTabs = (paymentMadeViews) => {
+ return paymentMadeViews.map((view) => ({
+ ...pick(view, ['name', 'id']),
+ }));
+ };
\ No newline at end of file
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.js
index 4488d5489..76434a0c2 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMade.js
@@ -1,14 +1,17 @@
import { connect } from 'react-redux';
import {
- getPaymentMadesTableStateFactory
+ getPaymentMadesTableStateFactory,
+ paymentsTableStateChangedFactory,
} from 'store/PaymentMades/paymentMades.selector';
export default (mapState) => {
const getPaymentMadesTableState = getPaymentMadesTableStateFactory();
+ const paymentsTableStateChanged = paymentsTableStateChangedFactory();
const mapStateToProps = (state, props) => {
const mapped = {
paymentMadesTableState: getPaymentMadesTableState(state, props),
+ paymentsTableStateChanged: paymentsTableStateChanged(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
diff --git a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.js b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.js
index d078efaa3..b14f33731 100644
--- a/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.js
+++ b/client/src/containers/Purchases/PaymentMades/PaymentsLanding/withPaymentMadeActions.js
@@ -1,8 +1,13 @@
import { connect } from 'react-redux';
-import { setPaymentMadesTableState } from 'store/PaymentMades/paymentMades.actions';
+import {
+ setPaymentMadesTableState,
+ resetPaymentMadesTableState,
+} from 'store/PaymentMades/paymentMades.actions';
const mapDispatchToProps = (dispatch) => ({
setPaymentMadesTableState: (state) =>
dispatch(setPaymentMadesTableState(state)),
+
+ resetPaymentMadesTableState: () => dispatch(resetPaymentMadesTableState()),
});
export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
index f89760072..eb550c448 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesActionsBar.js
@@ -46,7 +46,6 @@ function EstimateActionsBar({
const onClickNewEstimate = () => {
history.push('/estimates/new');
};
-
// Estimates refresh action.
const { refresh } = useRefreshEstimates();
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
index f093409ee..c94f80753 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesList.js
@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
function EstimatesList({
// #withEstimate
estimatesTableState,
+ estimatesTableStateChanged,
// #withEstimatesActions
- setEstimatesTableState
+ resetEstimatesTableState,
}) {
// Resets the estimates table state once the page unmount.
React.useEffect(
() => () => {
- setEstimatesTableState({
- filterRoles: [],
- viewSlug: '',
- pageIndex: 0,
- });
+ resetEstimatesTableState();
},
- [setEstimatesTableState],
+ [resetEstimatesTableState],
);
return (
@@ -56,6 +54,9 @@ function EstimatesList({
}
export default compose(
- withEstimates(({ estimatesTableState }) => ({ estimatesTableState })),
- withEstimatesActions
+ withEstimates(({ estimatesTableState, estimatesTableStateChanged }) => ({
+ estimatesTableState,
+ estimatesTableStateChanged,
+ })),
+ withEstimatesActions,
)(EstimatesList);
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js
index 6d1ae9b7e..87aa53ee3 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/EstimatesListProvider.js
@@ -1,16 +1,18 @@
import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useResourceViews, useResourceMeta, useEstimates } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
+// Estimates list context.
const EstimatesListContext = createContext();
/**
* Sale estimates data provider.
*/
-function EstimatesListProvider({ query, ...props }) {
+function EstimatesListProvider({ query, tableStateChanged, ...props }) {
// Fetches estimates resource views and fields.
const { data: estimatesViews, isLoading: isViewsLoading } =
useResourceViews('sale_estimates');
@@ -31,11 +33,7 @@ function EstimatesListProvider({ query, ...props }) {
// Detarmines the datatable empty status.
const isEmptyStatus =
- isTableEmptyStatus({
- data: estimates,
- pagination,
- filterMeta,
- }) && !isEstimatesFetching;
+ !isEstimatesLoading && !tableStateChanged && isEmpty(estimates);
// Provider payload.
const provider = {
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js b/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js
index 5251f2ed2..ace6026f6 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimates.js
@@ -1,14 +1,17 @@
import { connect } from 'react-redux';
import {
getEstimatesTableStateFactory,
+ isEstimatesTableStateChangedFactory,
} from 'store/Estimate/estimates.selectors';
export default (mapState) => {
const getEstimatesTableState = getEstimatesTableStateFactory();
+ const isEstimatesTableStateChanged = isEstimatesTableStateChangedFactory();
const mapStateToProps = (state, props) => {
const mapped = {
estimatesTableState: getEstimatesTableState(state, props),
+ estimatesTableStateChanged: isEstimatesTableStateChanged(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
diff --git a/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js b/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js
index 0387fb757..a8d303818 100644
--- a/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js
+++ b/client/src/containers/Sales/Estimates/EstimatesLanding/withEstimatesActions.js
@@ -1,10 +1,12 @@
import { connect } from 'react-redux';
import {
setEstimatesTableState,
+ resetEstimatesTableState,
} from 'store/Estimate/estimates.actions';
const mapDispatchToProps = (dispatch) => ({
setEstimatesTableState: (state) => dispatch(setEstimatesTableState(state)),
+ resetEstimatesTableState: () => dispatch(resetEstimatesTableState()),
});
export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
index 1aeea04dd..da687ac51 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoiceViewTabs.js
@@ -29,9 +29,7 @@ function InvoiceViewTabs({
// Handle tab change.
const handleTabsChange = (viewSlug) => {
- setInvoicesTableState({
- viewSlug: viewSlug || null,
- });
+ setInvoicesTableState({ viewSlug });
};
// Handle click a new view tab.
const handleClickNewView = () => {
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
index a55858f6f..d440253b9 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesList.js
@@ -22,25 +22,23 @@ import { transformTableStateToQuery, compose } from 'utils';
function InvoicesList({
// #withInvoice
invoicesTableState,
+ invoicesTableStateChanged,
// #withInvoicesActions
- setInvoicesTableState
+ resetInvoicesTableState,
}) {
// Resets the invoices table state once the page unmount.
React.useEffect(
() => () => {
- setInvoicesTableState({
- filterRoles: [],
- viewSlug: '',
- pageIndex: 0,
- });
+ resetInvoicesTableState();
},
- [setInvoicesTableState],
+ [resetInvoicesTableState],
);
return (
@@ -58,7 +56,10 @@ function InvoicesList({
}
export default compose(
- withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
+ withInvoices(({ invoicesTableState, invoicesTableStateChanged }) => ({
+ invoicesTableState,
+ invoicesTableStateChanged,
+ })),
withInvoiceActions,
withAlertsActions,
)(InvoicesList);
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
index 15d09f749..d2bd10be9 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/InvoicesListProvider.js
@@ -1,14 +1,16 @@
import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useResourceViews, useResourceMeta, useInvoices } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
const InvoicesListContext = createContext();
/**
* Accounts chart data provider.
*/
-function InvoicesListProvider({ query, ...props }) {
+function InvoicesListProvider({ query, tableStateChanged, ...props }) {
// Fetch accounts resource views and fields.
const { data: invoicesViews, isLoading: isViewsLoading } =
useResourceViews('sale_invoices');
@@ -29,11 +31,7 @@ function InvoicesListProvider({ query, ...props }) {
// Detarmines the datatable empty status.
const isEmptyStatus =
- isTableEmptyStatus({
- data: invoices,
- pagination,
- filterMeta,
- }) && !isInvoicesLoading;
+ isEmpty(invoices) && !tableStateChanged && !isInvoicesLoading;
// Provider payload.
const provider = {
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js
index a94d37c4c..8ae4916a9 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoiceActions.js
@@ -1,10 +1,12 @@
import { connect } from 'react-redux';
import {
- setInvoicesTableState
+ setInvoicesTableState,
+ resetInvoicesTableState
} from 'store/Invoice/invoices.actions';
const mapDipatchToProps = (dispatch) => ({
setInvoicesTableState: (queries) => dispatch(setInvoicesTableState(queries)),
+ resetInvoicesTableState: () => dispatch(resetInvoicesTableState()),
});
export default connect(null, mapDipatchToProps);
diff --git a/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.js b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.js
index 5ff2019a0..c0b1fe253 100644
--- a/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.js
+++ b/client/src/containers/Sales/Invoices/InvoicesLanding/withInvoices.js
@@ -1,14 +1,17 @@
import { connect } from 'react-redux';
import {
getInvoicesTableStateFactory,
+ isInvoicesTableStateChangedFactory,
} from 'store/Invoice/invoices.selector';
export default (mapState) => {
const getInvoicesTableState = getInvoicesTableStateFactory();
+ const isInvoicesTableStateChanged = isInvoicesTableStateChangedFactory();
const mapStateToProps = (state, props) => {
const mapped = {
invoicesTableState: getInvoicesTableState(state, props),
+ invoicesTableStateChanged: isInvoicesTableStateChanged(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
index d6133c4e2..0dbb0c556 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesList.js
@@ -20,25 +20,23 @@ import { compose, transformTableStateToQuery } from 'utils';
function PaymentReceiveList({
// #withPaymentReceives
paymentReceivesTableState,
+ paymentsTableStateChanged,
// #withPaymentReceivesActions
- setPaymentReceivesTableState
+ resetPaymentReceivesTableState,
}) {
// Resets the payment receives table state once the page unmount.
React.useEffect(
() => () => {
- setPaymentReceivesTableState({
- filterRoles: [],
- viewSlug: '',
- pageIndex: 0,
- });
+ resetPaymentReceivesTableState();
},
- [setPaymentReceivesTableState],
+ [resetPaymentReceivesTableState],
);
return (
@@ -56,8 +54,11 @@ function PaymentReceiveList({
}
export default compose(
- withPaymentReceives(({ paymentReceivesTableState }) => ({
- paymentReceivesTableState,
- })),
+ withPaymentReceives(
+ ({ paymentReceivesTableState, paymentsTableStateChanged }) => ({
+ paymentReceivesTableState,
+ paymentsTableStateChanged,
+ }),
+ ),
withPaymentReceivesActions,
)(PaymentReceiveList);
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js
index a281aa5d1..60dc32960 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/PaymentReceivesListProvider.js
@@ -1,4 +1,6 @@
import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import {
useResourceViews,
@@ -12,7 +14,7 @@ const PaymentReceivesListContext = createContext();
/**
* Payment receives data provider.
*/
-function PaymentReceivesListProvider({ query, ...props }) {
+function PaymentReceivesListProvider({ query, tableStateChanged, ...props }) {
// Fetch accounts resource views and fields.
const {
data: paymentReceivesViews,
@@ -33,6 +35,10 @@ function PaymentReceivesListProvider({ query, ...props }) {
isFetching: isPaymentReceivesFetching,
} = usePaymentReceives(query, { keepPreviousData: true });
+ // Detarmines the datatable empty status.
+ const isEmptyStatus =
+ !isPaymentReceivesLoading && !tableStateChanged && isEmpty(paymentReceives);
+
// Provider payload.
const provider = {
paymentReceives,
@@ -42,6 +48,7 @@ function PaymentReceivesListProvider({ query, ...props }) {
fields: getFieldsFromResourceMeta(resourceMeta.fields),
+ isEmptyStatus,
isViewsLoading,
isResourceFetching,
isResourceLoading,
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceives.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceives.js
index 13e047e11..4356e9ed0 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceives.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceives.js
@@ -1,14 +1,17 @@
import { connect } from 'react-redux';
import {
- getPaymentReceiveTableStateFactory
+ getPaymentReceiveTableStateFactory,
+ paymentsTableStateChangedFactory
} from 'store/PaymentReceives/paymentReceives.selector';
export default (mapState) => {
const getPaymentReceiveTableState = getPaymentReceiveTableStateFactory();
+ const paymentsTableStateChanged = paymentsTableStateChangedFactory();
const mapStateToProps = (state, props) => {
const mapped = {
paymentReceivesTableState: getPaymentReceiveTableState(state, props),
+ paymentsTableStateChanged: paymentsTableStateChanged(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
diff --git a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceivesActions.js b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceivesActions.js
index 48f56f76c..0c7661ddd 100644
--- a/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceivesActions.js
+++ b/client/src/containers/Sales/PaymentReceives/PaymentsLanding/withPaymentReceivesActions.js
@@ -1,9 +1,15 @@
import { connect } from 'react-redux';
-import { setPaymentReceivesTableState } from 'store/PaymentReceives/paymentReceives.actions';
+import {
+ setPaymentReceivesTableState,
+ resetPaymentReceivesTableState,
+} from 'store/PaymentReceives/paymentReceives.actions';
const mapDispatchToProps = (dispatch) => ({
setPaymentReceivesTableState: (state) =>
dispatch(setPaymentReceivesTableState(state)),
+
+ resetPaymentReceivesTableState: () =>
+ dispatch(resetPaymentReceivesTableState()),
});
export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
index 169a4bf2c..749450e07 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsList.js
@@ -20,24 +20,24 @@ import { transformTableStateToQuery, compose } from 'utils';
function ReceiptsList({
// #withReceipts
receiptTableState,
+ receiptsTableStateChanged,
// #withReceiptsActions
- setReceiptsTableState,
+ resetReceiptsTableState,
}) {
// Resets the receipts table state once the page unmount.
React.useEffect(
() => () => {
- setReceiptsTableState({
- filterRoles: [],
- viewSlug: '',
- pageIndex: 0,
- });
+ resetReceiptsTableState();
},
- [setReceiptsTableState],
+ [resetReceiptsTableState],
);
return (
-
+
@@ -56,8 +56,9 @@ function ReceiptsList({
}
export default compose(
- withReceipts(({ receiptTableState }) => ({
+ withReceipts(({ receiptTableState, receiptsTableStateChanged }) => ({
receiptTableState,
+ receiptsTableStateChanged,
})),
withReceiptsActions,
)(ReceiptsList);
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
index cc7dac755..803ac518d 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/ReceiptsListProvider.js
@@ -1,13 +1,15 @@
import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
+
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useResourceMeta, useResourceViews, useReceipts } from 'hooks/query';
-import { isTableEmptyStatus, getFieldsFromResourceMeta } from 'utils';
+import { getFieldsFromResourceMeta } from 'utils';
const ReceiptsListContext = createContext();
// Receipts list provider.
-function ReceiptsListProvider({ query, ...props }) {
+function ReceiptsListProvider({ query, tableStateChanged, ...props }) {
// Fetch receipts resource views and fields.
const { data: receiptsViews, isLoading: isViewsLoading } =
useResourceViews('sale_receipt');
@@ -27,11 +29,7 @@ function ReceiptsListProvider({ query, ...props }) {
// Detarmines the datatable empty status.
const isEmptyStatus =
- isTableEmptyStatus({
- data: receipts,
- pagination,
- filterMeta,
- }) && !isReceiptsLoading;
+ isEmpty(receipts) && !tableStateChanged && !isReceiptsLoading;
const provider = {
receipts,
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js
index 312a83338..2dc0eb039 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceipts.js
@@ -1,14 +1,17 @@
import { connect } from 'react-redux';
import {
getReceiptsTableStateFactory,
+ receiptsTableStateChangedFactory,
} from 'store/receipts/receipts.selector';
export default (mapState) => {
const getReceiptsTableState = getReceiptsTableStateFactory();
+ const receiptsTableStateChanged = receiptsTableStateChangedFactory();
const mapStateToProps = (state, props) => {
const mapped = {
receiptTableState: getReceiptsTableState(state, props),
+ receiptsTableStateChanged: receiptsTableStateChanged(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
diff --git a/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js b/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js
index 4fc165973..dad050912 100644
--- a/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js
+++ b/client/src/containers/Sales/Receipts/ReceiptsLanding/withReceiptsActions.js
@@ -1,8 +1,12 @@
import { connect } from 'react-redux';
-import { setReceiptsTableState } from 'store/receipts/receipts.actions';
+import {
+ setReceiptsTableState,
+ resetReceiptsTableState,
+} from 'store/receipts/receipts.actions';
const mapDispatchToProps = (dispatch) => ({
setReceiptsTableState: (queries) => dispatch(setReceiptsTableState(queries)),
+ resetReceiptsTableState: () => dispatch(resetReceiptsTableState()),
});
export default connect(null, mapDispatchToProps);
diff --git a/client/src/containers/UniversalSearch/DashboardUniversalSearch.js b/client/src/containers/UniversalSearch/DashboardUniversalSearch.js
index 56f4453b8..2accd802b 100644
--- a/client/src/containers/UniversalSearch/DashboardUniversalSearch.js
+++ b/client/src/containers/UniversalSearch/DashboardUniversalSearch.js
@@ -66,19 +66,14 @@ function DashboardUniversalSearch({
setSearchKeyword(query);
};
// Handle search type change.
- const handleSearchTypeChange = (searchType) => {
+ const handleSearchTypeChange = (type) => {
remove();
- setSearchType(searchType.key);
-
- if (searchKeyword && searchType) {
- refetch();
- }
+ setSearchType(type.key);
};
// Handle overlay of universal search close.
const handleClose = () => {
closeGlobalSearch();
};
-
// Handle universal search item select.
const handleItemSelect = (item) => {
setSelectedItemUniversalSearch(searchType, item.id);
@@ -92,10 +87,10 @@ function DashboardUniversalSearch({
);
React.useEffect(() => {
- if (searchKeyword) {
+ if (searchKeyword && searchType) {
debounceFetch.current();
}
- }, [searchKeyword]);
+ }, [searchKeyword, searchType]);
// Handles the overlay once be closed.
const handleOverlayClosed = () => {
diff --git a/client/src/containers/UniversalSearch/DashboardUniversalSearchItemActions.js b/client/src/containers/UniversalSearch/DashboardUniversalSearchItemActions.js
index 12b15c2f8..4de42eec5 100644
--- a/client/src/containers/UniversalSearch/DashboardUniversalSearchItemActions.js
+++ b/client/src/containers/UniversalSearch/DashboardUniversalSearchItemActions.js
@@ -4,6 +4,7 @@ import * as R from 'ramda';
import withUniversalSearch from './withUniversalSearch';
import { getUniversalSearchItemsActions } from './utils';
+import withUniversalSearchActions from './withUniversalSearchActions';
/**
* Universal search selected item action based on each resource type.
@@ -11,13 +12,22 @@ import { getUniversalSearchItemsActions } from './utils';
function DashboardUniversalSearchItemActions({
searchSelectedResourceType,
searchSelectedResourceId,
+
+ // #with
+ resetSelectedItemUniversalSearch,
}) {
const components = getUniversalSearchItemsActions();
+ // Handle action execuation.
+ const handleActionExec = React.useCallback(() => {
+ resetSelectedItemUniversalSearch();
+ }, [resetSelectedItemUniversalSearch]);
+
return components.map((COMPONENT) => (
));
}
@@ -29,4 +39,5 @@ export default R.compose(
searchSelectedResourceId,
}),
),
+ withUniversalSearchActions,
)(DashboardUniversalSearchItemActions);
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js b/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
index ee143530f..6fb00f48e 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorActionsBar.js
@@ -53,8 +53,8 @@ function VendorActionsBar({
const { refresh } = useRefreshVendors();
// Handle the active tab change.
- const handleTabChange = (customView) => {
- setVendorsTableState({ customViewId: customView.id || null });
+ const handleTabChange = (viewSlug) => {
+ setVendorsTableState({ viewSlug });
};
// Handle inactive switch changing.
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js b/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js
index a829f144d..0d37b7191 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorViewsTabs.js
@@ -22,12 +22,12 @@ function VendorViewsTabs({
}) {
const { vendorsViews } = useVendorsListContext();
+ // Transformes the resource views to tabs.
const tabs = transfromViewsToTabs(vendorsViews);
+ // Handle dashboard tabs change.
const handleTabsChange = (viewSlug) => {
- setVendorsTableState({
- viewSlug: viewSlug || null,
- });
+ setVendorsTableState({ viewSlug });
};
return (
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorsList.js b/client/src/containers/Vendors/VendorsLanding/VendorsList.js
index 4836434f4..61352ba73 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorsList.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsList.js
@@ -21,9 +21,10 @@ import { compose } from 'utils';
function VendorsList({
// #withVendors
vendorsTableState,
+ vendorsTableStateChanged,
// #withVendorsActions
- setVendorsTableState
+ setVendorsTableState,
}) {
// Resets the vendors table state once the page unmount.
useEffect(
@@ -36,9 +37,12 @@ function VendorsList({
},
[setVendorsTableState],
);
-
+
return (
-
+
@@ -55,6 +59,9 @@ function VendorsList({
}
export default compose(
- withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
- withVendorsActions
+ withVendors(({ vendorsTableState, vendorsTableStateChanged }) => ({
+ vendorsTableState,
+ vendorsTableStateChanged,
+ })),
+ withVendorsActions,
)(VendorsList);
diff --git a/client/src/containers/Vendors/VendorsLanding/VendorsListProvider.js b/client/src/containers/Vendors/VendorsLanding/VendorsListProvider.js
index 10e493851..8b5be1896 100644
--- a/client/src/containers/Vendors/VendorsLanding/VendorsListProvider.js
+++ b/client/src/containers/Vendors/VendorsLanding/VendorsListProvider.js
@@ -1,4 +1,5 @@
import React, { createContext } from 'react';
+import { isEmpty } from 'lodash';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import { useResourceMeta, useResourceViews, useVendors } from 'hooks/query';
@@ -7,7 +8,7 @@ import { transformVendorsStateToQuery } from './utils';
const VendorsListContext = createContext();
-function VendorsListProvider({ tableState, ...props }) {
+function VendorsListProvider({ tableState, tableStateChanged, ...props }) {
// Transformes the vendors table state to fetch query.
const tableQuery = transformVendorsStateToQuery(tableState);
@@ -31,13 +32,7 @@ function VendorsListProvider({ tableState, ...props }) {
// Detarmines the datatable empty status.
const isEmptyStatus =
- isTableEmptyStatus({
- data: vendors,
- pagination,
- filterMeta,
- }) &&
- !isVendorsLoading &&
- !tableState.inactiveMode;
+ isEmpty(vendors) && !isVendorsLoading && !tableStateChanged;
const provider = {
vendors,
diff --git a/client/src/containers/Vendors/VendorsLanding/withVendors.js b/client/src/containers/Vendors/VendorsLanding/withVendors.js
index 4d2b92225..aec39cfab 100644
--- a/client/src/containers/Vendors/VendorsLanding/withVendors.js
+++ b/client/src/containers/Vendors/VendorsLanding/withVendors.js
@@ -1,14 +1,17 @@
import { connect } from 'react-redux';
import {
getVendorsTableStateFactory,
+ vendorsTableStateChangedFactory,
} from 'store/vendors/vendors.selectors';
export default (mapState) => {
const getVendorsTableState = getVendorsTableStateFactory();
+ const vendorsTableStateChanged = vendorsTableStateChangedFactory();
const mapStateToProps = (state, props) => {
const mapped = {
vendorsTableState: getVendorsTableState(state, props),
+ vendorsTableStateChanged: vendorsTableStateChanged(state, props),
};
return mapState ? mapState(mapped, state, props) : mapped;
};
diff --git a/client/src/lang/ar-ly/index.json b/client/src/lang/ar-ly/index.json
index 6bd76947f..e54d2ae5e 100644
--- a/client/src/lang/ar-ly/index.json
+++ b/client/src/lang/ar-ly/index.json
@@ -1205,23 +1205,21 @@
"the_contact_has_been_inactivated_successfully": "تم إلغاء تنشيط جهة اتصال بنجاح.",
"are_sure_to_inactive_this_contact": "هل أنت متأكد أنك تريد إلغاء تنشيط جهة اتصال؟ ستكون قادرًا على تنشيطه لاحقًا",
"are_sure_to_activate_this_contact": "هل أنت متأكد أنك تريد تفعيل جهة اتصال؟ ستتمكن من تعطيله لاحقًا",
- "publish_adjustment": "Publish adjustment",
- "inactivate_customer": "Inactivate customer",
- "activate_customer": "Activate customer",
- "filter.all_filters_must_match": "Atleast one filter must match",
- "filter.atleast_one_filter_must_match": "Atleast one filter must match",
- "filter.when": "When",
- "universal_search.placeholder": "Search...",
-
- "universal_search.enter_text": "To select",
- "universal_search.close_text": "To close",
- "universal_seach.navigate_text": "To navigate",
- "pdf_preview.dialog.title": "PDF Preview",
- "pdf_preview.download.button": "Download",
- "pdf_preview.preview.button": "Preview",
- "invoice_preview.dialog.title": "Invoice PDF Preview",
- "estimate_preview.dialog.title": "Estimate PDF Preview",
- "receipt_preview.dialog.title":"Receipt PDF Preview"
-
+ "publish_adjustment": "نشر التسوية",
+ "inactivate_customer": "تعطيل الزبون",
+ "activate_customer": "تفعيل الزبون",
+ "filter.all_filters_must_match": "يجب ان تتطابق مع جميع الشروط",
+ "filter.atleast_one_filter_must_match": "يجب أن يتطابق شرط واحد على الأقل",
+ "filter.when": "عندما",
+ "universal_search.placeholder": "بحث...",
+ "universal_search.enter_text": "لتحديد",
+ "universal_search.close_text": "لإغلاق",
+ "universal_seach.navigate_text": "للاختيار",
+ "pdf_preview.dialog.title": "معاينة PDF",
+ "pdf_preview.download.button": "تحميل",
+ "pdf_preview.preview.button": "معاينة",
+ "invoice_preview.dialog.title": "معاينة فاتورة PDF",
+ "estimate_preview.dialog.title": "معاينة عرض PDF",
+ "receipt_preview.dialog.title":"معاينة إيصال PDF"
}
diff --git a/client/src/lang/en/index.json b/client/src/lang/en/index.json
index 6b176f026..e8f89d341 100644
--- a/client/src/lang/en/index.json
+++ b/client/src/lang/en/index.json
@@ -1195,7 +1195,7 @@
"publish_adjustment": "Publish adjustment",
"inactivate_customer": "Inactivate customer",
"activate_customer": "Activate customer",
- "filter.all_filters_must_match": "Atleast one filter must match",
+ "filter.all_filters_must_match": "All filters must match",
"filter.atleast_one_filter_must_match": "Atleast one filter must match",
"filter.when": "When",
"universal_search.placeholder": "Search...",
diff --git a/client/src/store/Bills/bills.actions.js b/client/src/store/Bills/bills.actions.js
index 7f0804c9e..1e5d86995 100644
--- a/client/src/store/Bills/bills.actions.js
+++ b/client/src/store/Bills/bills.actions.js
@@ -7,4 +7,9 @@ export const setBillsTableState = (queries) => {
};
};
-export const setSelectedRowsItems = () => {};
+export const resetBillsTableState = () => {
+ return {
+ type: t.BILLS_TABLE_STATE_RESET,
+ };
+};
+
diff --git a/client/src/store/Bills/bills.reducer.js b/client/src/store/Bills/bills.reducer.js
index 71e538182..272f231d2 100644
--- a/client/src/store/Bills/bills.reducer.js
+++ b/client/src/store/Bills/bills.reducer.js
@@ -4,12 +4,15 @@ import storage from 'redux-persist/lib/storage';
import { createTableStateReducers } from 'store/tableState.reducer';
import t from 'store/types';
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+ viewSlug: null,
+};
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: []
- },
+ tableState: defaultTableQuery,
};
const STORAGE_KEY = 'bigcapital:bills';
@@ -21,14 +24,11 @@ const CONFIG = {
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('BILLS'),
+ ...createTableStateReducers('BILLS', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
- }
+ },
});
-export default persistReducer(
- CONFIG,
- reducerInstance,
-);
\ No newline at end of file
+export default persistReducer(CONFIG, reducerInstance);
diff --git a/client/src/store/Bills/bills.selectors.js b/client/src/store/Bills/bills.selectors.js
index 33e14c11f..a37d24d15 100644
--- a/client/src/store/Bills/bills.selectors.js
+++ b/client/src/store/Bills/bills.selectors.js
@@ -1,5 +1,8 @@
+import { isEqual } from 'lodash';
+
import { paginationLocationQuery } from 'store/selectors';
import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './bills.reducer';
const billsTableStateSelector = (state) => state.bills.tableState;
@@ -15,3 +18,8 @@ export const getBillsTableStateFactory = () =>
};
},
);
+
+export const billsTableStateChangedFactory = () =>
+ createDeepEqualSelector(billsTableStateSelector, (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ });
diff --git a/client/src/store/Bills/bills.type.js b/client/src/store/Bills/bills.type.js
index efdcf828c..da4189522 100644
--- a/client/src/store/Bills/bills.type.js
+++ b/client/src/store/Bills/bills.type.js
@@ -1,4 +1,5 @@
export default {
BILLS_TABLE_STATE_SET: 'BILLS/TABLE_STATE_SET',
+ BILLS_TABLE_STATE_RESET: 'BILLS/TABLE_STATE_RESET',
};
\ No newline at end of file
diff --git a/client/src/store/Estimate/estimates.actions.js b/client/src/store/Estimate/estimates.actions.js
index b43971f9a..ec6ecf261 100644
--- a/client/src/store/Estimate/estimates.actions.js
+++ b/client/src/store/Estimate/estimates.actions.js
@@ -7,4 +7,8 @@ export const setEstimatesTableState = (queries) => {
};
};
-export const setSelectedRowsItems = () => {};
+export const resetEstimatesTableState = () => {
+ return {
+ type: t.ESTIMATES_TABLE_STATE_RESET,
+ };
+}
diff --git a/client/src/store/Estimate/estimates.reducer.js b/client/src/store/Estimate/estimates.reducer.js
index e61cbf3e2..616e97c8e 100644
--- a/client/src/store/Estimate/estimates.reducer.js
+++ b/client/src/store/Estimate/estimates.reducer.js
@@ -6,12 +6,15 @@ import {
} from 'store/tableState.reducer';
import t from 'store/types';
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+ viewSlug: null,
+};
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: [],
- },
+ tableState: defaultTableQuery,
};
const STORAGE_KEY = 'bigcapital:estimates';
@@ -23,7 +26,7 @@ const CONFIG = {
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('ESTIMATES'),
+ ...createTableStateReducers('ESTIMATES', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
diff --git a/client/src/store/Estimate/estimates.selectors.js b/client/src/store/Estimate/estimates.selectors.js
index 49deced85..b23966436 100644
--- a/client/src/store/Estimate/estimates.selectors.js
+++ b/client/src/store/Estimate/estimates.selectors.js
@@ -1,8 +1,10 @@
+import { isEqual } from 'lodash';
import { createDeepEqualSelector } from 'utils';
import { paginationLocationQuery } from 'store/selectors';
+import { defaultTableQuery } from './estimates.reducer';
const estimatesTableState = (state) => state.salesEstimates.tableState;
-
+
// Retrieve estimates table query.
export const getEstimatesTableStateFactory = () =>
createDeepEqualSelector(
@@ -15,3 +17,8 @@ export const getEstimatesTableStateFactory = () =>
};
},
);
+
+export const isEstimatesTableStateChangedFactory = () =>
+ createDeepEqualSelector(estimatesTableState, (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ });
diff --git a/client/src/store/Estimate/estimates.types.js b/client/src/store/Estimate/estimates.types.js
index c91285541..bd11d0fa7 100644
--- a/client/src/store/Estimate/estimates.types.js
+++ b/client/src/store/Estimate/estimates.types.js
@@ -1,3 +1,4 @@
export default {
ESTIMATES_TABLE_STATE_SET: 'ESTIMATES/TABLE_STATE_SET',
+ ESTIMATES_TABLE_STATE_RESET: 'ESTIMATES/TABLE_STATE_RESET',
};
diff --git a/client/src/store/Invoice/invoices.actions.js b/client/src/store/Invoice/invoices.actions.js
index 9eb1d328c..f465affd4 100644
--- a/client/src/store/Invoice/invoices.actions.js
+++ b/client/src/store/Invoice/invoices.actions.js
@@ -7,4 +7,10 @@ export const setInvoicesTableState = (queries) => {
};
};
+export const resetInvoicesTableState= () => {
+ return {
+ type: t.INVOICES_TABLE_STATE_RESET,
+ };
+}
+
export const setSelectedRowsItems = () => {};
diff --git a/client/src/store/Invoice/invoices.reducer.js b/client/src/store/Invoice/invoices.reducer.js
index a7b037ac4..958815d75 100644
--- a/client/src/store/Invoice/invoices.reducer.js
+++ b/client/src/store/Invoice/invoices.reducer.js
@@ -6,12 +6,15 @@ import {
} from 'store/tableState.reducer';
import t from 'store/types';
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+ viewSlug: null,
+};
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: []
- },
+ tableState: defaultTableQuery,
};
const STORAGE_KEY = 'bigcapital:invoices';
@@ -23,7 +26,7 @@ const CONFIG = {
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('INVOICES'),
+ ...createTableStateReducers('INVOICES', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
diff --git a/client/src/store/Invoice/invoices.selector.js b/client/src/store/Invoice/invoices.selector.js
index 307d7dc2f..41ea6a36f 100644
--- a/client/src/store/Invoice/invoices.selector.js
+++ b/client/src/store/Invoice/invoices.selector.js
@@ -1,5 +1,7 @@
+import { isEqual } from 'lodash';
import { paginationLocationQuery } from 'store/selectors';
import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './invoices.reducer';
const invoicesTableStateSelector = (state) => state.salesInvoices.tableState;
@@ -17,3 +19,14 @@ export const getInvoicesTableStateFactory = () =>
};
},
);
+
+/**
+ * Retrieve invoices table state.
+ */
+export const isInvoicesTableStateChangedFactory = () =>
+ createDeepEqualSelector(
+ invoicesTableStateSelector,
+ (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ },
+ );
diff --git a/client/src/store/Invoice/invoices.types.js b/client/src/store/Invoice/invoices.types.js
index 23eae8b6a..3b979d112 100644
--- a/client/src/store/Invoice/invoices.types.js
+++ b/client/src/store/Invoice/invoices.types.js
@@ -1,4 +1,5 @@
export default {
INVOICES_TABLE_STATE_SET: 'INVOICES/TABLE_STATE_SET',
+ INVOICES_TABLE_STATE_RESET: 'INVOICES/TABLE_STATE_RESET',
};
\ No newline at end of file
diff --git a/client/src/store/PaymentMades/paymentMades.actions.js b/client/src/store/PaymentMades/paymentMades.actions.js
index 39c55f75d..4370e0dd7 100644
--- a/client/src/store/PaymentMades/paymentMades.actions.js
+++ b/client/src/store/PaymentMades/paymentMades.actions.js
@@ -7,4 +7,10 @@ export const setPaymentMadesTableState = (queries) => {
};
};
-export const setSelectedRowsItems = () => {};
+export const resetPaymentMadesTableState = (queries) => {
+ return {
+ type: t.PAYMENT_MADES_TABLE_STATE_RESET,
+ payload: { queries },
+ };
+};
+
diff --git a/client/src/store/PaymentMades/paymentMades.reducer.js b/client/src/store/PaymentMades/paymentMades.reducer.js
index bc63df771..98aba95bf 100644
--- a/client/src/store/PaymentMades/paymentMades.reducer.js
+++ b/client/src/store/PaymentMades/paymentMades.reducer.js
@@ -1,30 +1,31 @@
import { createReducer } from '@reduxjs/toolkit';
import { persistReducer, purgeStoredState } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
-import {
- createTableStateReducers,
-} from 'store/tableState.reducer';
+import { createTableStateReducers } from 'store/tableState.reducer';
import t from 'store/types';
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+ sortBy: [],
+ viewSlug: null,
+};
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: [],
- sortBy: [],
- },
+ tableState: defaultTableQuery,
};
const STORAGE_KEY = 'bigcapital:paymentMades';
const CONFIG = {
key: STORAGE_KEY,
- whitelist: ['tableState'],
+ whitelist: [],
storage,
-}
+};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('PAYMENT_MADES'),
+ ...createTableStateReducers('PAYMENT_MADES', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
diff --git a/client/src/store/PaymentMades/paymentMades.selector.js b/client/src/store/PaymentMades/paymentMades.selector.js
index cbe614cb0..433f5f69a 100644
--- a/client/src/store/PaymentMades/paymentMades.selector.js
+++ b/client/src/store/PaymentMades/paymentMades.selector.js
@@ -1,5 +1,8 @@
+import { isEqual } from 'lodash';
+
import { paginationLocationQuery } from 'store/selectors';
import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './paymentMades.reducer';
const paymentMadesTableStateSelector = (state) => state.paymentMades.tableState;
@@ -15,3 +18,8 @@ export const getPaymentMadesTableStateFactory = () =>
};
},
);
+
+export const paymentsTableStateChangedFactory = () =>
+ createDeepEqualSelector(paymentMadesTableStateSelector, (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ });
diff --git a/client/src/store/PaymentMades/paymentMades.type.js b/client/src/store/PaymentMades/paymentMades.type.js
index 9a855d5ad..b976a8571 100644
--- a/client/src/store/PaymentMades/paymentMades.type.js
+++ b/client/src/store/PaymentMades/paymentMades.type.js
@@ -1,3 +1,4 @@
export default {
PAYMENT_MADES_TABLE_STATE_SET: 'PAYMENT_MADES/TABLE_STATE_SET',
+ PAYMENT_MADES_TABLE_STATE_RESET: 'PAYMENT_MADES/TABLE_STATE_RESET',
};
diff --git a/client/src/store/PaymentReceives/paymentReceives.actions.js b/client/src/store/PaymentReceives/paymentReceives.actions.js
index adbcec26b..ee8d9f748 100644
--- a/client/src/store/PaymentReceives/paymentReceives.actions.js
+++ b/client/src/store/PaymentReceives/paymentReceives.actions.js
@@ -7,4 +7,8 @@ export const setPaymentReceivesTableState = (queries) => {
};
};
-export const setSelectedRowsItems = () => {};
+export const resetPaymentReceivesTableState = () => {
+ return {
+ type: t.PAYMENT_RECEIVES_TABLE_STATE_RESET
+ };
+}
diff --git a/client/src/store/PaymentReceives/paymentReceives.reducer.js b/client/src/store/PaymentReceives/paymentReceives.reducer.js
index a49afa76d..ef9fb2c04 100644
--- a/client/src/store/PaymentReceives/paymentReceives.reducer.js
+++ b/client/src/store/PaymentReceives/paymentReceives.reducer.js
@@ -6,12 +6,15 @@ import {
} from 'store/tableState.reducer';
import t from 'store/types';
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+ viewSlug: null,
+};
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: [],
- },
+ tableState: defaultTableQuery,
};
const STORAGE_KEY = 'bigcapital:paymentReceives';
@@ -23,7 +26,7 @@ const CONFIG = {
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('PAYMENT_RECEIVES'),
+ ...createTableStateReducers('PAYMENT_RECEIVES', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
diff --git a/client/src/store/PaymentReceives/paymentReceives.selector.js b/client/src/store/PaymentReceives/paymentReceives.selector.js
index 7f9b53587..324f876cb 100644
--- a/client/src/store/PaymentReceives/paymentReceives.selector.js
+++ b/client/src/store/PaymentReceives/paymentReceives.selector.js
@@ -1,7 +1,11 @@
import { createSelector } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+
import {
paginationLocationQuery,
} from 'store/selectors';
+import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './paymentReceives.reducer';
const paymentReceiveTableState = (state) => state.paymentReceives.tableState;
@@ -15,4 +19,8 @@ export const getPaymentReceiveTableStateFactory = () => createSelector(
...tableState,
};
},
-);
\ No newline at end of file
+);
+export const paymentsTableStateChangedFactory = () =>
+ createDeepEqualSelector(paymentReceiveTableState, (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ });
diff --git a/client/src/store/PaymentReceives/paymentReceives.type.js b/client/src/store/PaymentReceives/paymentReceives.type.js
index 4ec311f8a..a654eed1d 100644
--- a/client/src/store/PaymentReceives/paymentReceives.type.js
+++ b/client/src/store/PaymentReceives/paymentReceives.type.js
@@ -1,3 +1,4 @@
export default {
PAYMENT_RECEIVES_TABLE_STATE_SET: 'PAYMENT_RECEIVES/TABLE_STATE_SET',
+ PAYMENT_RECEIVES_TABLE_STATE_RESET: 'PAYMENT_RECEIVES/TABLE_STATE_RESET',
};
diff --git a/client/src/store/accounts/accounts.reducer.js b/client/src/store/accounts/accounts.reducer.js
index deb7d15ba..755765a68 100644
--- a/client/src/store/accounts/accounts.reducer.js
+++ b/client/src/store/accounts/accounts.reducer.js
@@ -4,12 +4,15 @@ import storage from 'redux-persist/lib/storage';
import { createTableStateReducers } from 'store/tableState.reducer';
import t from 'store/types';
+
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+};
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: [],
- },
+ tableState: defaultTableQuery,
};
const STORAGE_KEY = 'bigcapital:accounts';
@@ -21,7 +24,7 @@ const CONFIG = {
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('ACCOUNTS'),
+ ...createTableStateReducers('ACCOUNTS', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
diff --git a/client/src/store/accounts/accounts.selectors.js b/client/src/store/accounts/accounts.selectors.js
index 7bffadca7..bc47c4cbb 100644
--- a/client/src/store/accounts/accounts.selectors.js
+++ b/client/src/store/accounts/accounts.selectors.js
@@ -1,5 +1,8 @@
+import { isEqual } from 'lodash';
+
import { paginationLocationQuery } from 'store/selectors';
import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './accounts.reducer';
// Accounts table state selector
const accountsTableStateSelector = (state, props) => state.accounts.tableState;
@@ -16,3 +19,8 @@ export const getAccountsTableStateFactory = () =>
};
},
);
+
+export const accountsTableStateChangedFactory = () =>
+ createDeepEqualSelector(accountsTableStateSelector, (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ });
diff --git a/client/src/store/accounts/accounts.types.js b/client/src/store/accounts/accounts.types.js
index 989a0fbba..fc64154cf 100644
--- a/client/src/store/accounts/accounts.types.js
+++ b/client/src/store/accounts/accounts.types.js
@@ -1,4 +1,5 @@
export default {
ACCOUNTS_TABLE_STATE_SET: 'ACCOUNTS/TABLE_STATE_SET',
+ ACCOUNTS_TABLE_STATE_RESET: 'ACCOUNTS/TABLE_STATE_RESET',
};
\ No newline at end of file
diff --git a/client/src/store/customers/customers.reducer.js b/client/src/store/customers/customers.reducer.js
index 93b68a76a..3b48816a7 100644
--- a/client/src/store/customers/customers.reducer.js
+++ b/client/src/store/customers/customers.reducer.js
@@ -3,26 +3,31 @@ import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { createTableStateReducers } from 'store/tableState.reducer';
+// Default table query state.
+export const defaultTableQueryState = {
+ pageSize: 12,
+ pageIndex: 0,
+ inactiveMode: false,
+ filterRoles: [],
+ viewSlug: null,
+};
+
+// initial data.
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- inactiveMode: false,
- filterRoles: []
- },
+ tableState: defaultTableQueryState,
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('CUSTOMERS'),
+ ...createTableStateReducers('CUSTOMERS', defaultTableQueryState),
});
const STORAGE_KEY = 'bigcapital:estimates';
export default persistReducer(
-{
- key: STORAGE_KEY,
- whitelist: [],
- storage,
-},
-reducerInstance,
+ {
+ key: STORAGE_KEY,
+ whitelist: [],
+ storage,
+ },
+ reducerInstance,
);
diff --git a/client/src/store/customers/customers.selectors.js b/client/src/store/customers/customers.selectors.js
index f6a42000d..2e20dd00b 100644
--- a/client/src/store/customers/customers.selectors.js
+++ b/client/src/store/customers/customers.selectors.js
@@ -1,5 +1,8 @@
+import { isEqual } from 'lodash';
+
import { paginationLocationQuery } from 'store/selectors';
import { createDeepEqualSelector } from 'utils';
+import { defaultTableQueryState } from './customers.reducer';
const customerTableStateSelector = (state) => state.customers.tableState;
@@ -14,3 +17,9 @@ export const getCustomersTableStateFactory = () =>
};
},
);
+
+export const customersTableStateChangedFactory = () =>
+ createDeepEqualSelector(customerTableStateSelector, (tableState) => {
+ return !isEqual(tableState, defaultTableQueryState);
+ });
+
\ No newline at end of file
diff --git a/client/src/store/customers/customers.type.js b/client/src/store/customers/customers.type.js
index 6b091d0c2..66c10a1ca 100644
--- a/client/src/store/customers/customers.type.js
+++ b/client/src/store/customers/customers.type.js
@@ -1,3 +1,4 @@
export default {
- CUSTOMERS_TABLE_STATE_SET: 'CUSTOMERS/TABLE_STATE_SET'
+ CUSTOMERS_TABLE_STATE_SET: 'CUSTOMERS/TABLE_STATE_SET',
+ CUSTOMERS_TABLE_STATE_RESET: 'CUSTOMERS/TABLE_STATE_RESET'
};
diff --git a/client/src/store/expenses/expenses.actions.js b/client/src/store/expenses/expenses.actions.js
index 9ba4a7aa9..a28d0e423 100644
--- a/client/src/store/expenses/expenses.actions.js
+++ b/client/src/store/expenses/expenses.actions.js
@@ -11,4 +11,9 @@ export const setExpensesTableState = (queries) => {
};
};
-export const setSelectedRowsItems = () => {};
+export const resetExpensesTableState = () => {
+ return {
+ type: t.EXPENSES_TABLE_STATE_RESET,
+ };
+};
+
diff --git a/client/src/store/expenses/expenses.reducer.js b/client/src/store/expenses/expenses.reducer.js
index 473102d95..9cbc6a8da 100644
--- a/client/src/store/expenses/expenses.reducer.js
+++ b/client/src/store/expenses/expenses.reducer.js
@@ -4,12 +4,17 @@ import storage from 'redux-persist/lib/storage';
import { createTableStateReducers } from 'store/tableState.reducer';
import t from 'store/types';
+// Default table query.
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+ viewSlug: null,
+};
+
+// Initial state.
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: [],
- },
+ tableState: defaultTableQuery,
};
const STORAGE_KEY = 'bigcapital:expenses';
@@ -21,7 +26,7 @@ const CONFIG = {
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('EXPENSES'),
+ ...createTableStateReducers('EXPENSES', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
diff --git a/client/src/store/expenses/expenses.selectors.js b/client/src/store/expenses/expenses.selectors.js
index e6f6b19ef..f4be3427d 100644
--- a/client/src/store/expenses/expenses.selectors.js
+++ b/client/src/store/expenses/expenses.selectors.js
@@ -1,14 +1,17 @@
+import { isEqual } from 'lodash';
+
import { createDeepEqualSelector } from 'utils';
import { paginationLocationQuery } from 'store/selectors';
+import { defaultTableQuery } from './expenses.reducer';
// Items table state selectors.
-const itemsTableStateSelector = (state) => state.expenses.tableState;
+const expensesTableStateSelector = (state) => state.expenses.tableState;
// Retrive expenses table query.
export const getExpensesTableStateFactory = () =>
createDeepEqualSelector(
paginationLocationQuery,
- itemsTableStateSelector,
+ expensesTableStateSelector,
(locationQuery, tableState) => {
return {
...locationQuery,
@@ -16,3 +19,8 @@ export const getExpensesTableStateFactory = () =>
};
},
);
+
+export const expensesTableStateChangedFactory = () =>
+ createDeepEqualSelector(expensesTableStateSelector, (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ });
diff --git a/client/src/store/expenses/expenses.types.js b/client/src/store/expenses/expenses.types.js
index 4549268a6..f260b4716 100644
--- a/client/src/store/expenses/expenses.types.js
+++ b/client/src/store/expenses/expenses.types.js
@@ -1,3 +1,4 @@
export default {
EXPENSES_TABLE_STATE_SET: 'EXPENSES/TABLE_STATE_SET',
+ EXPENSES_TABLE_STATE_RESET: 'EXPENSES/TABLE_STATE_RESET',
};
diff --git a/client/src/store/items/items.actions.js b/client/src/store/items/items.actions.js
index 629e028ca..4011ba38a 100644
--- a/client/src/store/items/items.actions.js
+++ b/client/src/store/items/items.actions.js
@@ -7,4 +7,11 @@ export const setItemsTableState = (queries) => {
};
};
+
+export const resetItemsTableState = () => {
+ return {
+ type: t.ITEMS_TABLE_STATE_RESET,
+ };
+}
+
export const setSelectedRowsItems = () => {};
diff --git a/client/src/store/items/items.reducer.js b/client/src/store/items/items.reducer.js
index 234301292..fb4c3bce9 100644
--- a/client/src/store/items/items.reducer.js
+++ b/client/src/store/items/items.reducer.js
@@ -4,13 +4,16 @@ import storage from 'redux-persist/lib/storage';
import { createTableStateReducers } from 'store/tableState.reducer';
import t from 'store/types';
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+ inactiveMode: false,
+ viewSlug: null,
+};
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: [],
- inactiveMode: false,
- },
+ tableState: defaultTableQuery,
selectedRows: [],
};
@@ -18,12 +21,12 @@ const STORAGE_KEY = 'bigcapital:items';
const CONFIG = {
key: STORAGE_KEY,
- whitelist: ['tableState'],
+ whitelist: [],
storage,
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('ITEMS'),
+ ...createTableStateReducers('ITEMS', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
diff --git a/client/src/store/items/items.selectors.js b/client/src/store/items/items.selectors.js
index 468b2315e..ab57d1825 100644
--- a/client/src/store/items/items.selectors.js
+++ b/client/src/store/items/items.selectors.js
@@ -1,5 +1,8 @@
+import { isEqual } from 'lodash';
+
import { paginationLocationQuery } from 'store/selectors';
import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './items.reducer';
const itemsTableStateSelector = (state) => state.items.tableState;
@@ -15,3 +18,8 @@ export const getItemsTableStateFactory = () =>
};
},
);
+
+export const isItemsTableStateChangedFactory = () =>
+ createDeepEqualSelector(itemsTableStateSelector, (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ });
diff --git a/client/src/store/items/items.types.js b/client/src/store/items/items.types.js
index da78ab64d..572729ba5 100644
--- a/client/src/store/items/items.types.js
+++ b/client/src/store/items/items.types.js
@@ -1,4 +1,5 @@
export default {
ITEMS_TABLE_STATE_SET: 'ITEMS/TABLE_STATE_SET',
+ ITEMS_TABLE_STATE_RESET: 'ITEMS/TABLE_STATE_RESET',
};
\ No newline at end of file
diff --git a/client/src/store/manualJournals/manualJournals.reducers.js b/client/src/store/manualJournals/manualJournals.reducers.js
index 058d1fb60..279ccf3ef 100644
--- a/client/src/store/manualJournals/manualJournals.reducers.js
+++ b/client/src/store/manualJournals/manualJournals.reducers.js
@@ -4,12 +4,15 @@ import storage from 'redux-persist/lib/storage';
import { createTableStateReducers } from 'store/tableState.reducer';
import t from 'store/types';
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+ viewSlug: null,
+}
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: [],
- },
+ tableState: defaultTableQuery,
};
const STORAGE_KEY = 'bigcapital:manualJournals';
@@ -21,7 +24,7 @@ const CONFIG = {
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('MANUAL_JOURNALS'),
+ ...createTableStateReducers('MANUAL_JOURNALS', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
diff --git a/client/src/store/manualJournals/manualJournals.selectors.js b/client/src/store/manualJournals/manualJournals.selectors.js
index 4351ae15f..3d46d8b8c 100644
--- a/client/src/store/manualJournals/manualJournals.selectors.js
+++ b/client/src/store/manualJournals/manualJournals.selectors.js
@@ -1,5 +1,8 @@
+import { isEqual } from 'lodash';
+
import { paginationLocationQuery } from 'store/selectors';
import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './manualJournals.reducers';
const manualJournalsTableState = (state) => state.manualJournals.tableState;
@@ -15,3 +18,8 @@ export const getManualJournalsTableStateFactory = () =>
};
},
);
+
+export const manualJournalTableStateChangedFactory = () =>
+ createDeepEqualSelector(manualJournalsTableState, (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ });
diff --git a/client/src/store/manualJournals/manualJournals.types.js b/client/src/store/manualJournals/manualJournals.types.js
index 200302ee2..414d4f0ba 100644
--- a/client/src/store/manualJournals/manualJournals.types.js
+++ b/client/src/store/manualJournals/manualJournals.types.js
@@ -1,3 +1,4 @@
export default {
MANUAL_JOURNALS_TABLE_STATE_SET: 'MANUAL_JOURNALS/TABLE_STATE_SET',
+ MANUAL_JOURNALS_TABLE_STATE_RESET: 'MANUAL_JOURNALS/TABLE_STATE_RESET',
};
diff --git a/client/src/store/receipts/receipts.actions.js b/client/src/store/receipts/receipts.actions.js
index cda294cd6..e63c0add1 100644
--- a/client/src/store/receipts/receipts.actions.js
+++ b/client/src/store/receipts/receipts.actions.js
@@ -7,4 +7,8 @@ export const setReceiptsTableState = (queries) => {
};
};
-export const setSelectedRowsItems = () => {};
+export const resetReceiptsTableState = () => {
+ return {
+ type: t.RECEIPTS_TABLE_STATE_RESET,
+ };
+}
\ No newline at end of file
diff --git a/client/src/store/receipts/receipts.reducer.js b/client/src/store/receipts/receipts.reducer.js
index 9490c12f4..98029f7fe 100644
--- a/client/src/store/receipts/receipts.reducer.js
+++ b/client/src/store/receipts/receipts.reducer.js
@@ -1,17 +1,18 @@
import { createReducer } from '@reduxjs/toolkit';
import { persistReducer, purgeStoredState } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
-import {
- createTableStateReducers,
-} from 'store/tableState.reducer';
+import { createTableStateReducers } from 'store/tableState.reducer';
import t from 'store/types';
+export const defaultTableQuery = {
+ pageSize: 12,
+ pageIndex: 0,
+ filterRoles: [],
+ viewSlug: null,
+};
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- filterRoles: []
- },
+ tableState: defaultTableQuery,
};
const STORAGE_KEY = 'bigcapital:receipts';
@@ -23,14 +24,11 @@ const CONFIG = {
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('RECEIPTS'),
+ ...createTableStateReducers('RECEIPTS', defaultTableQuery),
[t.RESET]: () => {
purgeStoredState(CONFIG);
},
});
-export default persistReducer(
- CONFIG,
- reducerInstance,
-);
+export default persistReducer(CONFIG, reducerInstance);
diff --git a/client/src/store/receipts/receipts.selector.js b/client/src/store/receipts/receipts.selector.js
index de41b4650..ec587fa1e 100644
--- a/client/src/store/receipts/receipts.selector.js
+++ b/client/src/store/receipts/receipts.selector.js
@@ -1,5 +1,8 @@
+import { isEqual } from 'lodash';
+
import { paginationLocationQuery } from 'store/selectors';
import { createDeepEqualSelector } from 'utils';
+import { defaultTableQuery } from './receipts.reducer';
const receiptTableStateSelector = (state) => state.salesReceipts.tableState;
@@ -15,3 +18,8 @@ export const getReceiptsTableStateFactory = () =>
};
},
);
+
+export const receiptsTableStateChangedFactory = () =>
+ createDeepEqualSelector(receiptTableStateSelector, (tableState) => {
+ return !isEqual(tableState, defaultTableQuery);
+ });
diff --git a/client/src/store/receipts/receipts.type.js b/client/src/store/receipts/receipts.type.js
index 68459985f..a95809294 100644
--- a/client/src/store/receipts/receipts.type.js
+++ b/client/src/store/receipts/receipts.type.js
@@ -1,4 +1,5 @@
export default {
RECEIPTS_TABLE_STATE_SET: 'RECEIPTS/TABLE_STATE_SET',
+ RECEIPTS_TABLE_STATE_RESET: 'RECEIPTS/TABLE_STATE_RESET',
};
\ No newline at end of file
diff --git a/client/src/store/tableState.reducer.js b/client/src/store/tableState.reducer.js
index 5c82c633b..120d75cee 100644
--- a/client/src/store/tableState.reducer.js
+++ b/client/src/store/tableState.reducer.js
@@ -1,9 +1,10 @@
const TYPES = {
TABLE_STATE_SET: 'TABLE_STATE_SET',
+ TABLE_STATE_RESET: 'TABLE_STATE_RESET'
};
-export const createTableStateReducers = (RESOURCE_NAME) => ({
+export const createTableStateReducers = (RESOURCE_NAME, defaultTableQuery) => ({
/**
* Resource table state set.
*/
@@ -15,4 +16,10 @@ export const createTableStateReducers = (RESOURCE_NAME) => ({
...queries,
};
},
+
+ [`${RESOURCE_NAME}/${TYPES.TABLE_STATE_RESET}`]: (state, action) => {
+ state.tableState = {
+ ...defaultTableQuery,
+ };
+ }
});
diff --git a/client/src/store/vendors/vendors.reducer.js b/client/src/store/vendors/vendors.reducer.js
index a89aa1007..0f1fe726e 100644
--- a/client/src/store/vendors/vendors.reducer.js
+++ b/client/src/store/vendors/vendors.reducer.js
@@ -4,13 +4,16 @@ import storage from 'redux-persist/lib/storage';
import { createTableStateReducers } from 'store/tableState.reducer';
import t from 'store/types';
+export const defaultTableQueryState = {
+ pageSize: 12,
+ pageIndex: 0,
+ inactiveMode: false,
+ filterRoles: [],
+ viewSlug: null,
+};
+
const initialState = {
- tableState: {
- pageSize: 12,
- pageIndex: 0,
- inactiveMode: false,
- filterRoles: [],
- },
+ tableState: defaultTableQueryState,
};
const STORAGE_KEY = 'bigcapital:vendors';
@@ -22,11 +25,11 @@ const CONFIG = {
};
const reducerInstance = createReducer(initialState, {
- ...createTableStateReducers('VENDORS'),
+ ...createTableStateReducers('VENDORS', defaultTableQueryState),
[t.RESET]: () => {
purgeStoredState(CONFIG);
- }
+ },
});
export default persistReducer(CONFIG, reducerInstance);
diff --git a/client/src/store/vendors/vendors.selectors.js b/client/src/store/vendors/vendors.selectors.js
index e789e35bf..d141429e1 100644
--- a/client/src/store/vendors/vendors.selectors.js
+++ b/client/src/store/vendors/vendors.selectors.js
@@ -1,7 +1,8 @@
+import { isEqual } from 'lodash';
+
import { createDeepEqualSelector } from 'utils';
-import {
- paginationLocationQuery,
-} from 'store/selectors';
+import { paginationLocationQuery } from 'store/selectors';
+import { defaultTableQueryState } from './vendors.reducer';
const vendorsTableStateSelector = (state) => state.vendors.tableState;
@@ -20,4 +21,7 @@ export const getVendorsTableStateFactory = () =>
},
);
-
\ No newline at end of file
+export const vendorsTableStateChangedFactory = () =>
+ createDeepEqualSelector(vendorsTableStateSelector, (tableState) => {
+ return !isEqual(tableState, defaultTableQueryState);
+ });
diff --git a/client/src/style/App.scss b/client/src/style/App.scss
index ce81ed904..c7adad861 100644
--- a/client/src/style/App.scss
+++ b/client/src/style/App.scss
@@ -242,12 +242,26 @@ html[lang^="ar"] {
.bp3-dialog {
&-body {
- margin: 0;
-
+
+ &:not(.loading){
+ margin: 0;
+ }
> .bp3-spinner {
margin: 20px 0;
}
}
}
+}
+
+.bp3-drawer{
+ border-left: 1px solid #00115e;
+}
+
+
+.drawer-portal{
+
+ .bp3-overlay-backdrop{
+ background: rgba(0, 10, 30, 0.05);
+ }
}
\ No newline at end of file
diff --git a/client/src/style/components/DataTable/DataTable.scss b/client/src/style/components/DataTable/DataTable.scss
index b40228214..400fe25f0 100644
--- a/client/src/style/components/DataTable/DataTable.scss
+++ b/client/src/style/components/DataTable/DataTable.scss
@@ -219,11 +219,18 @@
}
}
.tr.no-results {
+
.td {
flex-direction: column;
- padding: 20px;
- color: #666;
+ padding: 18px 20px;
+ color: #777;
align-items: center;
+ font-size: 14px;
+ border-bottom: 0;
+
+ &:hover{
+ background: transparent;
+ }
}
}
diff --git a/client/src/style/components/Details.scss b/client/src/style/components/Details.scss
index bd91be366..bdb4c3735 100644
--- a/client/src/style/components/Details.scss
+++ b/client/src/style/components/Details.scss
@@ -1,42 +1,51 @@
.details-menu {
- margin: 15px;
- border: 1px solid #d2dce2;
&--vertical {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
- padding: 10px;
- margin-bottom: 15px;
- // border-bottom: 1px solid #d2dce2;
- }
- &--horizontal {
- display: flex;
- flex-direction: column;
- line-height: 30px;
- padding: 10px;
+ .detail-item{
+ flex-direction: column;
- .label {
- color: #666666;
- font-weight: 500;
+ &__content{
+ margin: 5px 0;
+ }
}
}
- &.is-vertical {
+ &--horizantal {
+ display: flex;
+ flex-direction: column;
+
+ .detail-item{
+ flex-direction: row;
+
+ &:not(:first-of-type){
+ margin-top: 10px;
+ }
+
+ &__label{
+ padding-right: 10px;
+ }
+ }
}
.detail-item {
- flex: 1;
line-height: 1.3rem;
+ display: flex;
+
&__label {
- color: #666666;
+ color: #727983;
font-weight: 500;
}
&__content {
text-transform: capitalize;
- margin: 5px 0;
}
}
+
+ + .details-menu{
+ margin-top: 18px;
+ }
}
diff --git a/client/src/style/components/Drawers/AccountDrawer.scss b/client/src/style/components/Drawers/AccountDrawer.scss
index 2a90ded17..7b120cff0 100644
--- a/client/src/style/components/Drawers/AccountDrawer.scss
+++ b/client/src/style/components/Drawers/AccountDrawer.scss
@@ -3,32 +3,17 @@
.account-drawer {
background-color: #fbfbfb;
- &__content {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- margin: 18px;
- padding: 15px;
- background: white;
- border: 1px solid #d2dce2;
+ .card-header{
+ margin: 15px;
+ padding: 22px 15px;
+ }
- > div{
+ &__content-header {
+
+ .detail-item{
flex-grow: 1;
- font-size: 14px;
- margin: 15px 0;
- > span {
- color: #666666;
- font-weight: 500;
- }
-
- .balance,
- p {
- text-transform: capitalize;
- margin: 5px 0;
- }
-
- .balance {
+ .big-number {
font-size: 28px;
color: #c06361;
margin: 6px 0;
@@ -36,23 +21,19 @@
margin-bottom: 0;
}
- &.account-normal{
+ &--account-normal{
.bp3-icon{
position: relative;
top: -2px;
margin-left: 2px;
-
+
svg{
fill: #6a7994;
}
}
}
}
-
- &--desc {
- flex-basis: 100%;
- }
}
&__table {
@@ -69,12 +50,12 @@
}
.tbody .tr .td {
- padding: 0.8rem;
+ padding: 0.6rem 0.8rem;
}
}
&-footer{
- padding: 12px 14px;
+ padding: 10px 14px;
display: inline-block;
a{
diff --git a/client/src/style/components/Drawers/ExpenseDrawer.scss b/client/src/style/components/Drawers/ExpenseDrawer.scss
new file mode 100644
index 000000000..1a2de8a4b
--- /dev/null
+++ b/client/src/style/components/Drawers/ExpenseDrawer.scss
@@ -0,0 +1,103 @@
+.expense-drawer {
+ .card {
+ margin: 15px;
+ padding: 25px 15px 35px;
+
+ .amount {
+
+ }
+ }
+
+ &__content-header {
+ margin-bottom: 30px;
+
+ .detail-item {
+ flex-grow: 1;
+
+ &--amount {
+ width: 20%;
+ }
+ .big-number{
+ font-size: 28px;
+ color: #c06361;
+ margin: 6px 0;
+ font-weight: 600;
+ }
+ }
+
+ .details-menu + .details-menu{
+ margin-top: 14px;
+ }
+
+ .details-menu--horizantal{
+
+ .detail-item{
+
+ &__label{
+ min-width: 120px;
+ }
+ }
+ }
+ }
+
+ &__content-footer{
+ display: flex;
+
+ .total-lines{
+ margin-left: auto;
+ }
+ }
+
+
+ .table {
+ .thead .th {
+ background: transparent;
+ color: #222222;
+ border-bottom: 1px solid #000000;
+ border-top: 1px solid #000000;
+ padding: 0.5rem;
+ }
+
+ .tbody .tr .td {
+ background: transparent;
+ padding: 0.5rem 0.5rem;
+ border-bottom: 0;
+ }
+
+ .tbody .tr:last-child .td {
+ border-bottom: 1px solid #d2dce2;
+ }
+ }
+
+
+ .total-lines {
+
+ &__line {
+ display: flex;
+
+ >div {
+ padding: 7px 8px;
+ }
+
+ .title {
+ width: 220px;
+ font-weight: 600;
+ }
+
+ .amount {
+ font-weight: 600;
+ width: 260px;
+ }
+
+ &--subtotal {
+ border-bottom: 1px solid #000;
+ }
+
+ &--total {
+ border-bottom: 3px double #000;
+ }
+ }
+
+ }
+
+}
\ No newline at end of file
diff --git a/client/src/style/components/Drawers/ViewDetails.scss b/client/src/style/components/Drawers/ViewDetails.scss
index f0d982727..d3ac4d6b0 100644
--- a/client/src/style/components/Drawers/ViewDetails.scss
+++ b/client/src/style/components/Drawers/ViewDetails.scss
@@ -1,93 +1,179 @@
-.journal-drawer,
-.expense-drawer {
- &__content {
- display: flex;
- flex-direction: column;
+
+
+.journal-drawer{
+
+ .card{
margin: 15px;
- padding: 15px;
- border: 1px solid #d2dce2;
- box-shadow: 1px 1px #fbf8f8;
- background-color: #ffffff;
- min-height: 508px;
+ padding: 25px 15px 35px;
+ }
+ .card{
- &--header {
- display: flex;
- flex-wrap: wrap;
- justify-content: flex-start;
- margin: 15px 0 20px;
- font-size: 14px;
- color: #666666;
+ .amount{
+ font-size: 28px;
+ color: #c06361;
+ margin: 6px 0;
+ font-weight: 600;
+ }
+ }
- > div {
+ .table{
+ .thead .th {
+ background: transparent;
+ color: #222222;
+ border-bottom: 1px solid #000000;
+ border-top: 1px solid #000000;
+ padding: 0.5rem;
+ }
+ .tbody .tr .td {
+ background: transparent;
+ padding: 0.5rem 0.5rem;
+ border-bottom: 0;
+ }
+
+ .tbody .tr:last-child .td{
+ border-bottom: 1px solid #d2dce2;
+ }
+ }
+
+ &__content{
+
+ &-header{
+ margin-bottom: 35px;
+
+ .detail-item{
flex-grow: 1;
- span {
- display: block;
- color: #666666;
- font-weight: 500;
- margin: 10px 0;
- }
- }
- .info {
- flex: 0 1 25%;
- padding-left: 2%;
- margin: 10px 0;
- }
- .balance {
- font-size: 26px;
- font-weight: 500;
- color: #0f1118;
- }
- }
- &--table {
- flex-grow: 1;
- flex-shrink: 0;
-
- .table {
- color: #666666;
- font-size: 14px;
-
- .thead .th {
- background: transparent;
- color: #222222;
- border-bottom: 1px solid #000000;
- padding: 0.5rem;
- }
- .tbody .tr .td {
- background: transparent;
- padding: 0.8rem 0.5rem;
- }
- }
- .desc {
- margin: 20px 0 60px;
-
- > b {
- color: #2f2f2f;
+ &--amount{
+ width: 20%;
}
}
}
- &--footer {
+ &-footer{
display: flex;
- flex-direction: column;
- align-items: flex-end;
- color: #666666;
- .wrapper > div {
- display: flex;
- border-top: 1px solid #000000;
- border-bottom: 1px solid #000000;
- padding: 0.2rem;
- span,
- p {
- margin: 10px 50px 5px 0px;
- }
- span {
- color: #333333;
- flex-grow: 1;
- font-weight: 500;
- }
+
+ .total-lines{
+ margin-left: auto;
+ }
+ }
+
+ &-description{
+ margin-top: 20px;
+ .title{
+ color: #727983;
}
}
}
+
+
+ .total-lines{
+
+ &__line{
+ display: flex;
+
+ > div{
+ padding: 7px 8px;
+ }
+
+ .title{
+ width: 220px;
+ font-weight: 600;
+ }
+
+ .credit,
+ .debit{
+ font-weight: 600;
+ width: 155px;
+ }
+
+ &--subtotal{
+ border-bottom: 1px solid #000;
+ }
+
+ &--total{
+ border-bottom: 3px double #000;
+ }
+ }
+
+ }
+
}
+
+// .expense-drawer {
+
+// &__content {
+// display: flex;
+// flex-direction: column;
+
+// border: 1px solid #d2dce2;
+// box-shadow: 1px 1px #fbf8f8;
+// background-color: #ffffff;
+// min-height: 508px;
+
+// &--header {
+// display: flex;
+// flex-wrap: wrap;
+// justify-content: flex-start;
+// margin: 15px 0 20px;
+// font-size: 14px;
+// color: #666666;
+
+// > div {
+// flex-grow: 1;
+// span {
+// display: block;
+// color: #666666;
+// font-weight: 500;
+// margin: 10px 0;
+// }
+// }
+// .info {
+// flex: 0 1 25%;
+// padding-left: 2%;
+// margin: 10px 0;
+// }
+// .balance {
+// font-size: 26px;
+// font-weight: 500;
+// color: #0f1118;
+// }
+// }
+
+// &--table {
+// flex-grow: 1;
+// flex-shrink: 0;
+
+
+// .desc {
+// margin: 20px 0 60px;
+
+// > b {
+// color: #2f2f2f;
+// }
+// }
+// }
+
+// &--footer {
+// display: flex;
+// flex-direction: column;
+// align-items: flex-end;
+// color: #666666;
+// .wrapper > div {
+// display: flex;
+// border-top: 1px solid #000000;
+// border-bottom: 1px solid #000000;
+// padding: 0.2rem;
+// span,
+// p {
+// margin: 10px 50px 5px 0px;
+// }
+// span {
+// color: #333333;
+// flex-grow: 1;
+// font-weight: 500;
+// }
+// }
+// }
+// }
+// }