From c68b4ca9baaaa0df9e9e49b35133e5b5c5a54077 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Wed, 10 Feb 2021 18:35:19 +0200 Subject: [PATCH] refactoring: expenses landing list. refactoring: customers landing list. refactoring: vendors landing list. refactoring: manual journals landing list. --- client/src/common/classes.js | 2 +- client/src/components/DialogsContainer.js | 2 +- .../ManualJournalActionsBar.js | 32 +- .../ManualJournalsAlerts.js | 0 .../ManualJournalsDataTable.js | 118 ++++++++ .../ManualJournalsEmptyStatus.js | 0 .../JournalsLanding/ManualJournalsList.js | 56 ++++ .../ManualJournalsListProvider.js | 19 +- .../ManualJournalsViewTabs.js | 20 +- .../{ => JournalsLanding}/components.js | 146 ++++----- .../Accounting/JournalsLanding/utils.js | 79 +++++ .../JournalsLanding/withManualJournals.js | 16 + .../withManualJournalsActions.js | 11 + .../MakeJournalEntries.schema.js | 0 .../MakeJournalEntriesField.js | 0 .../MakeJournalEntriesFooter.js | 0 .../MakeJournalEntriesForm.js | 0 .../MakeJournalEntriesHeader.js | 0 .../MakeJournalEntriesHeaderFields.js | 5 +- .../MakeJournalEntriesPage.js | 0 .../MakeJournalEntriesTable.js | 0 .../MakeJournalFormFloatingActions.js | 0 .../MakeJournalFormFooter.js | 0 .../MakeJournalNumberWatcher.js | 0 .../{ => MakeJournal}/MakeJournalProvider.js | 0 .../Accounting/MakeJournal/components.js | 91 ++++++ .../Accounting/{ => MakeJournal}/utils.js | 15 +- .../Accounting/ManualJournalsDataTable.js | 249 --------------- .../Accounting/ManualJournalsList.js | 80 ----- .../Accounting/withJournalDetail.js | 10 - .../Accounting/withJournalsActions.js | 14 - .../Accounting/withManualJournalDetail.js | 11 - .../Accounting/withManualJournals.js | 33 -- .../Accounting/withManualJournalsActions.js | 33 -- .../containers/Accounts/AccountActionsMenu.js | 30 -- .../containers/Accounts/AccountsActionsBar.js | 18 +- .../src/containers/Accounts/AccountsAlerts.js | 10 +- .../src/containers/Accounts/AccountsChart.js | 21 +- .../Accounts/AccountsChartProvider.js | 11 +- .../containers/Accounts/AccountsDataTable.js | 181 +++++------ .../containers/Accounts/AccountsViewPage.js | 90 ------ .../containers/Accounts/AccountsViewsTabs.js | 27 +- client/src/containers/Accounts/components.js | 77 +++-- client/src/containers/Accounts/utils.js | 75 ++++- .../containers/Accounts/withAccountDetail.js | 8 - .../src/containers/Accounts/withAccounts.js | 17 +- .../Accounts/withAccountsActions.js | 30 -- .../Accounts/withAccountsTableActions.js | 28 +- .../containers/Alerts/AccountDeleteAlert.js | 33 +- .../Customers/CustomerBulkDeleteAlert.js | 4 - .../Alerts/Customers/CustomerDeleteAlert.js | 10 +- .../Alerts/Expenses/ExpenseDeleteAlert.js | 1 - .../Alerts/Expenses/ExpensePublishAlert.js | 7 +- .../ManualJournals/JournalDeleteAlert.js | 25 +- .../ManualJournals/JournalPublishAlert.js | 2 +- .../Alerts/Vendors/VendorDeleteAlert.js | 9 +- .../{ => CustomerForm}/CustomerAddressTabs.js | 0 .../CustomerAttachmentTabs.js | 0 .../CustomerFinancialPanel.js | 0 .../CustomerFloatingActions.js | 8 +- .../{ => CustomerForm}/CustomerForm.js | 49 +-- .../CustomerForm/CustomerForm.schema.js | 49 +++ .../CustomerFormAfterPrimarySection.js | 0 .../{ => CustomerForm}/CustomerFormPage.js | 14 +- .../CustomerFormPrimarySection.js | 2 +- .../CustomerFormProvider.js | 0 .../{ => CustomerForm}/CustomerNotePanel.js | 0 .../CustomerTypeRadioField.js | 0 .../{ => CustomerForm}/CustomersTabs.js | 5 +- .../src/containers/Customers/CustomerTable.js | 247 --------------- .../containers/Customers/CustomersAlerts.js | 4 +- .../CustomersActionsBar.js} | 23 +- .../CustomersEmptyStatus.js | 0 .../{ => CustomersLanding}/CustomersList.js | 28 +- .../CustomersListProvider.js | 18 +- .../CustomersLanding/CustomersTable.js | 118 ++++++++ .../CustomersViewsTabs.js | 38 +-- .../Customers/CustomersLanding/components.js | 143 +++++++++ .../CustomersLanding/withCustomers.js | 14 + .../CustomersLanding/withCustomersActions.js | 10 + .../containers/Customers/CustomersViewPage.js | 61 ---- .../src/containers/Customers/withCustomers.js | 32 -- .../Customers/withCustomersActions.js | 37 --- .../AccountFormDialogContent.js | 10 +- .../JournalNumberDialogContent.js | 8 +- .../containers/Expenses/ExpenseDataTable.js | 285 ------------------ .../ExpenseFloatingActions.js | 0 .../Expenses/{ => ExpenseForm}/ExpenseForm.js | 7 +- .../{ => ExpenseForm}/ExpenseForm.schema.js | 0 .../{ => ExpenseForm}/ExpenseFormBody.js | 0 .../{ => ExpenseForm}/ExpenseFormEntries.js | 120 +------- .../ExpenseFormEntriesField.js | 0 .../{ => ExpenseForm}/ExpenseFormFooter.js | 0 .../{ => ExpenseForm}/ExpenseFormHeader.js | 0 .../ExpenseFormHeaderFields.js | 0 .../{ => ExpenseForm}/ExpenseFormPage.js | 17 +- .../ExpenseFormPageProvider.js | 0 .../Expenses/ExpenseForm/components.js | 132 ++++++++ .../Expenses/{ => ExpenseForm}/utils.js | 0 .../src/containers/Expenses/ExpensesAlerts.js | 12 +- .../containers/Expenses/ExpensesEmptyState.js | 40 --- .../ExpenseActionsBar.js | 18 +- .../ExpensesLanding/ExpenseDataTable.js | 120 ++++++++ .../{ => ExpensesLanding}/ExpenseViewTabs.js | 19 +- .../ExpensesEmptyStatus.js | 0 .../{ => ExpensesLanding}/ExpensesList.js | 24 +- .../ExpensesListProvider.js | 23 +- .../Expenses/ExpensesLanding/components.js | 185 ++++++++++++ .../Expenses/ExpensesLanding/withExpenses.js | 15 + .../ExpensesLanding/withExpensesActions.js | 8 + .../containers/Expenses/ExpensesViewPage.js | 37 --- .../src/containers/Expenses/withExpenses.js | 32 -- .../Expenses/withExpensesActions.js | 36 --- .../ARAgingSummaryHeaderGeneral.js | 8 +- .../GeneralLedger/GeneralLedger.js | 2 - client/src/containers/Items/ItemsDataTable.js | 6 + .../{ => VendorForm}/VendorAttahmentTab.js | 0 .../VendorFinanicalPanelTab.js | 0 .../{ => VendorForm}/VendorFloatingActions.js | 2 + .../Vendors/{ => VendorForm}/VendorForm.js | 15 +- .../{ => VendorForm}/VendorForm.schema.js | 0 .../VendorFormAfterPrimarySection.js | 0 .../{ => VendorForm}/VendorFormPage.js | 7 +- .../VendorFormPrimarySection.js | 0 .../{ => VendorForm}/VendorFormProvider.js | 16 +- .../Vendors/{ => VendorForm}/VendorsTabs.js | 9 +- .../{ => VendorsLanding}/VendorActionsBar.js | 14 +- .../{ => VendorsLanding}/VendorViewsTabs.js | 21 +- .../VendorsEmptyStatus.js | 0 .../{ => VendorsLanding}/VendorsList.js | 24 +- .../VendorsListProvider.js | 19 +- .../Vendors/VendorsLanding/VendorsTable.js | 114 +++++++ .../Vendors/VendorsLanding/components.js | 142 +++++++++ .../Vendors/{ => VendorsLanding}/utils.js | 0 .../Vendors/VendorsLanding/withVendors.js | 16 + .../VendorsLanding/withVendorsActions.js | 8 + client/src/containers/Vendors/VendorsTable.js | 214 ------------- .../src/containers/Vendors/VendorsViewPage.js | 60 ---- .../containers/Vendors/withVendorActions.js | 35 --- client/src/containers/Vendors/withVendors.js | 33 -- client/src/hooks/query/accounts.js | 36 +-- client/src/hooks/query/customers.js | 111 ++++--- client/src/hooks/query/expenses.js | 126 ++++++-- client/src/hooks/query/manualJournals.js | 75 +++-- client/src/hooks/query/vendors.js | 102 ++++--- client/src/routes/dashboard.js | 216 ++++++------- client/src/routes/preferences.js | 12 +- client/src/store/accounts/accounts.actions.js | 264 +--------------- client/src/store/accounts/accounts.reducer.js | 115 +------ .../src/store/accounts/accounts.selectors.js | 87 +----- client/src/store/accounts/accounts.types.js | 29 +- .../src/store/customers/customers.actions.js | 138 +-------- .../src/store/customers/customers.reducer.js | 94 +----- .../store/customers/customers.selectors.js | 70 +---- client/src/store/customers/customers.type.js | 11 +- client/src/store/expenses/expenses.actions.js | 162 +--------- client/src/store/expenses/expenses.reducer.js | 105 +------ .../src/store/expenses/expenses.selectors.js | 85 +----- client/src/store/expenses/expenses.types.js | 12 +- .../manualJournals/manualJournals.actions.js | 175 +---------- .../manualJournals/manualJournals.reducers.js | 106 +------ .../manualJournals.selectors.js | 84 +----- .../manualJournals/manualJournals.types.js | 16 +- client/src/store/vendors/vendors.actions.js | 117 +------ client/src/store/vendors/vendors.reducer.js | 80 +---- client/src/store/vendors/vendors.selectors.js | 69 +---- client/src/store/vendors/vendors.types.js | 12 +- client/src/style/pages/Customers/List.scss | 4 +- client/src/style/pages/Vendors/List.scss | 21 ++ client/src/style/pages/Vendors/PageForm.scss | 162 ++++++++++ 170 files changed, 2835 insertions(+), 4430 deletions(-) rename client/src/containers/Accounting/{ => JournalsLanding}/ManualJournalActionsBar.js (77%) rename client/src/containers/Accounting/{ => JournalsLanding}/ManualJournalsAlerts.js (100%) create mode 100644 client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js rename client/src/containers/Accounting/{ => JournalsLanding}/ManualJournalsEmptyStatus.js (100%) create mode 100644 client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js rename client/src/containers/Accounting/{ => JournalsLanding}/ManualJournalsListProvider.js (62%) rename client/src/containers/Accounting/{ => JournalsLanding}/ManualJournalsViewTabs.js (72%) rename client/src/containers/Accounting/{ => JournalsLanding}/components.js (54%) create mode 100644 client/src/containers/Accounting/JournalsLanding/utils.js create mode 100644 client/src/containers/Accounting/JournalsLanding/withManualJournals.js create mode 100644 client/src/containers/Accounting/JournalsLanding/withManualJournalsActions.js rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalEntries.schema.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalEntriesField.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalEntriesFooter.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalEntriesForm.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalEntriesHeader.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalEntriesHeaderFields.js (98%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalEntriesPage.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalEntriesTable.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalFormFloatingActions.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalFormFooter.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalNumberWatcher.js (100%) rename client/src/containers/Accounting/{ => MakeJournal}/MakeJournalProvider.js (100%) create mode 100644 client/src/containers/Accounting/MakeJournal/components.js rename client/src/containers/Accounting/{ => MakeJournal}/utils.js (93%) delete mode 100644 client/src/containers/Accounting/ManualJournalsDataTable.js delete mode 100644 client/src/containers/Accounting/ManualJournalsList.js delete mode 100644 client/src/containers/Accounting/withJournalDetail.js delete mode 100644 client/src/containers/Accounting/withJournalsActions.js delete mode 100644 client/src/containers/Accounting/withManualJournalDetail.js delete mode 100644 client/src/containers/Accounting/withManualJournals.js delete mode 100644 client/src/containers/Accounting/withManualJournalsActions.js delete mode 100644 client/src/containers/Accounts/AccountActionsMenu.js delete mode 100644 client/src/containers/Accounts/AccountsViewPage.js delete mode 100644 client/src/containers/Accounts/withAccountDetail.js delete mode 100644 client/src/containers/Accounts/withAccountsActions.js rename client/src/containers/Customers/{ => CustomerForm}/CustomerAddressTabs.js (100%) rename client/src/containers/Customers/{ => CustomerForm}/CustomerAttachmentTabs.js (100%) rename client/src/containers/Customers/{ => CustomerForm}/CustomerFinancialPanel.js (100%) rename client/src/containers/Customers/{ => CustomerForm}/CustomerFloatingActions.js (96%) rename client/src/containers/Customers/{ => CustomerForm}/CustomerForm.js (72%) create mode 100644 client/src/containers/Customers/CustomerForm/CustomerForm.schema.js rename client/src/containers/Customers/{ => CustomerForm}/CustomerFormAfterPrimarySection.js (100%) rename client/src/containers/Customers/{ => CustomerForm}/CustomerFormPage.js (60%) rename client/src/containers/Customers/{ => CustomerForm}/CustomerFormPrimarySection.js (98%) rename client/src/containers/Customers/{ => CustomerForm}/CustomerFormProvider.js (100%) rename client/src/containers/Customers/{ => CustomerForm}/CustomerNotePanel.js (100%) rename client/src/containers/Customers/{ => CustomerForm}/CustomerTypeRadioField.js (100%) rename client/src/containers/Customers/{ => CustomerForm}/CustomersTabs.js (90%) delete mode 100644 client/src/containers/Customers/CustomerTable.js rename client/src/containers/Customers/{CustomerActionsBar.js => CustomersLanding/CustomersActionsBar.js} (88%) rename client/src/containers/Customers/{ => CustomersLanding}/CustomersEmptyStatus.js (100%) rename client/src/containers/Customers/{ => CustomersLanding}/CustomersList.js (59%) rename client/src/containers/Customers/{ => CustomersLanding}/CustomersListProvider.js (66%) create mode 100644 client/src/containers/Customers/CustomersLanding/CustomersTable.js rename client/src/containers/Customers/{ => CustomersLanding}/CustomersViewsTabs.js (60%) create mode 100644 client/src/containers/Customers/CustomersLanding/components.js create mode 100644 client/src/containers/Customers/CustomersLanding/withCustomers.js create mode 100644 client/src/containers/Customers/CustomersLanding/withCustomersActions.js delete mode 100644 client/src/containers/Customers/CustomersViewPage.js delete mode 100644 client/src/containers/Customers/withCustomers.js delete mode 100644 client/src/containers/Customers/withCustomersActions.js delete mode 100644 client/src/containers/Expenses/ExpenseDataTable.js rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseFloatingActions.js (100%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseForm.js (97%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseForm.schema.js (100%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseFormBody.js (100%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseFormEntries.js (54%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseFormEntriesField.js (100%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseFormFooter.js (100%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseFormHeader.js (100%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseFormHeaderFields.js (100%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseFormPage.js (77%) rename client/src/containers/Expenses/{ => ExpenseForm}/ExpenseFormPageProvider.js (100%) create mode 100644 client/src/containers/Expenses/ExpenseForm/components.js rename client/src/containers/Expenses/{ => ExpenseForm}/utils.js (100%) delete mode 100644 client/src/containers/Expenses/ExpensesEmptyState.js rename client/src/containers/Expenses/{ => ExpensesLanding}/ExpenseActionsBar.js (90%) create mode 100644 client/src/containers/Expenses/ExpensesLanding/ExpenseDataTable.js rename client/src/containers/Expenses/{ => ExpensesLanding}/ExpenseViewTabs.js (75%) rename client/src/containers/Expenses/{ => ExpensesLanding}/ExpensesEmptyStatus.js (100%) rename client/src/containers/Expenses/{ => ExpensesLanding}/ExpensesList.js (56%) rename client/src/containers/Expenses/{ => ExpensesLanding}/ExpensesListProvider.js (56%) create mode 100644 client/src/containers/Expenses/ExpensesLanding/components.js create mode 100644 client/src/containers/Expenses/ExpensesLanding/withExpenses.js create mode 100644 client/src/containers/Expenses/ExpensesLanding/withExpensesActions.js delete mode 100644 client/src/containers/Expenses/ExpensesViewPage.js delete mode 100644 client/src/containers/Expenses/withExpenses.js delete mode 100644 client/src/containers/Expenses/withExpensesActions.js rename client/src/containers/Vendors/{ => VendorForm}/VendorAttahmentTab.js (100%) rename client/src/containers/Vendors/{ => VendorForm}/VendorFinanicalPanelTab.js (100%) rename client/src/containers/Vendors/{ => VendorForm}/VendorFloatingActions.js (97%) rename client/src/containers/Vendors/{ => VendorForm}/VendorForm.js (94%) rename client/src/containers/Vendors/{ => VendorForm}/VendorForm.schema.js (100%) rename client/src/containers/Vendors/{ => VendorForm}/VendorFormAfterPrimarySection.js (100%) rename client/src/containers/Vendors/{ => VendorForm}/VendorFormPage.js (82%) rename client/src/containers/Vendors/{ => VendorForm}/VendorFormPrimarySection.js (100%) rename client/src/containers/Vendors/{ => VendorForm}/VendorFormProvider.js (85%) rename client/src/containers/Vendors/{ => VendorForm}/VendorsTabs.js (85%) rename client/src/containers/Vendors/{ => VendorsLanding}/VendorActionsBar.js (90%) rename client/src/containers/Vendors/{ => VendorsLanding}/VendorViewsTabs.js (70%) rename client/src/containers/Vendors/{ => VendorsLanding}/VendorsEmptyStatus.js (100%) rename client/src/containers/Vendors/{ => VendorsLanding}/VendorsList.js (57%) rename client/src/containers/Vendors/{ => VendorsLanding}/VendorsListProvider.js (66%) create mode 100644 client/src/containers/Vendors/VendorsLanding/VendorsTable.js create mode 100644 client/src/containers/Vendors/VendorsLanding/components.js rename client/src/containers/Vendors/{ => VendorsLanding}/utils.js (100%) create mode 100644 client/src/containers/Vendors/VendorsLanding/withVendors.js create mode 100644 client/src/containers/Vendors/VendorsLanding/withVendorsActions.js delete mode 100644 client/src/containers/Vendors/VendorsTable.js delete mode 100644 client/src/containers/Vendors/VendorsViewPage.js delete mode 100644 client/src/containers/Vendors/withVendorActions.js delete mode 100644 client/src/containers/Vendors/withVendors.js create mode 100644 client/src/style/pages/Vendors/List.scss create mode 100644 client/src/style/pages/Vendors/PageForm.scss diff --git a/client/src/common/classes.js b/client/src/common/classes.js index 79e07b132..396700ebb 100644 --- a/client/src/common/classes.js +++ b/client/src/common/classes.js @@ -33,7 +33,7 @@ const CLASSES = { PAGE_FORM_PAYMENT_MADE: 'page-form--payment-made', PAGE_FORM_PAYMENT_RECEIVE: 'page-form--payment-receive', PAGE_FORM_CUSTOMER: 'page-form--customer', - PAGE_FORM_VENDOR: 'page-form--customer', + PAGE_FORM_VENDOR: 'page-form--vendor', PAGE_FORM_ITEM: 'page-form--item', PAGE_FORM_MAKE_JOURNAL: 'page-form--make-journal-entries', PAGE_FORM_EXPENSE: 'page-form--expense', diff --git a/client/src/components/DialogsContainer.js b/client/src/components/DialogsContainer.js index a84df5e5f..c7fb79fff 100644 --- a/client/src/components/DialogsContainer.js +++ b/client/src/components/DialogsContainer.js @@ -19,7 +19,7 @@ import PaymentViaVoucherDialog from 'containers/Dialogs/PaymentViaVoucherDialog' export default function DialogsContainer() { return (
- + {/* */} diff --git a/client/src/containers/Accounting/ManualJournalActionsBar.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js similarity index 77% rename from client/src/containers/Accounting/ManualJournalActionsBar.js rename to client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js index 2fe0fd561..35f900df7 100644 --- a/client/src/containers/Accounting/ManualJournalActionsBar.js +++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalActionsBar.js @@ -13,18 +13,14 @@ import { import classNames from 'classnames'; import { useHistory } from 'react-router-dom'; import { FormattedMessage as T } from 'react-intl'; -import { connect } from 'react-redux'; -import { useManualJournalsContext } from 'containers/Accounting/ManualJournalsListProvider'; +import { useManualJournalsContext } from './ManualJournalsListProvider'; import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'; import withDialogActions from 'containers/Dialog/withDialogActions'; import { If, DashboardActionViewsList } from 'components'; -import withResourceDetail from 'containers/Resources/withResourceDetails'; -import withManualJournals from 'containers/Accounting/withManualJournals'; -import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions'; - +import withManualJournalsActions from './withManualJournalsActions'; import { compose } from 'utils'; /** @@ -32,9 +28,12 @@ import { compose } from 'utils'; */ function ManualJournalActionsBar({ // #withManualJournalsActions - addManualJournalsTableQueries, + setManualJournalsTableState, }) { + // History context. const history = useHistory(); + + // Manual journals context. const { journalsViews } = useManualJournalsContext(); // Handle click a new manual journal. @@ -44,13 +43,13 @@ function ManualJournalActionsBar({ // Handle delete button click. const handleBulkDelete = () => { - + }; // Handle tab change. const handleTabChange = (viewId) => { - addManualJournalsTableQueries({ - custom_view_id: viewId.id || null, + setManualJournalsTableState({ + customViewid: viewId.id || null, }); }; @@ -115,20 +114,7 @@ function ManualJournalActionsBar({ ); } -const mapStateToProps = (state, props) => ({ - resourceName: 'manual_journals', -}); - -const withManualJournalsActionsBar = connect(mapStateToProps); - export default compose( - withManualJournalsActionsBar, withDialogActions, - withResourceDetail(({ resourceFields }) => ({ - resourceFields, - })), - withManualJournals(({ manualJournalsViews }) => ({ - manualJournalsViews, - })), withManualJournalsActions, )(ManualJournalActionsBar); diff --git a/client/src/containers/Accounting/ManualJournalsAlerts.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsAlerts.js similarity index 100% rename from client/src/containers/Accounting/ManualJournalsAlerts.js rename to client/src/containers/Accounting/JournalsLanding/ManualJournalsAlerts.js diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js new file mode 100644 index 000000000..d9f89d5e1 --- /dev/null +++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsDataTable.js @@ -0,0 +1,118 @@ +import React from 'react'; +import classNames from 'classnames'; +import { DataTable, Choose } from 'components'; +import { CLASSES } from 'common/classes'; + +import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus'; +import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; +import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; + +import withManualJournalsActions from './withManualJournalsActions'; +import withAlertsActions from 'containers/Alert/withAlertActions'; + +import { useManualJournalsContext } from './ManualJournalsListProvider'; +import { useManualJournalsColumns } from './utils'; +import { ActionsMenu } from './components'; + +import { compose } from 'utils'; + +/** + * Manual journals data-table. + */ +function ManualJournalsDataTable({ + // #withManualJournalsActions + setManualJournalsTableState, + + // #withAlertsActions + openAlert, + + // #ownProps + onSelectedRowsChange, +}) { + // Manual journals context. + const { + manualJournals, + pagination, + isManualJournalsLoading, + isManualJournalsFetching, + isEmptyStatus + } = useManualJournalsContext(); + + // Manual journals columns. + const columns = useManualJournalsColumns(); + + // Handles the journal publish action. + const handlePublishJournal = ({ id }) => { + openAlert('journal-publish', { manualJournalId: id }) + }; + + // Handle the journal edit action. + const handleEditJournal = ({ id }) => { + + }; + + // Handle the journal delete action. + const handleDeleteJournal = ({ id }) => { + openAlert('journal-delete', { manualJournalId: id }); + }; + + // Handle fetch data once the page index, size or sort by of the table change. + const handleFetchData = React.useCallback( + ({ pageSize, pageIndex, sortBy }) => { + setManualJournalsTableState({ + pageIndex, + pageSize, + sortBy, + }); + }, + [setManualJournalsTableState], + ); + + return ( +
+ + + + + + + + + +
+ ); +} + +export default compose( + withManualJournalsActions, + withAlertsActions +)(ManualJournalsDataTable); diff --git a/client/src/containers/Accounting/ManualJournalsEmptyStatus.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js similarity index 100% rename from client/src/containers/Accounting/ManualJournalsEmptyStatus.js rename to client/src/containers/Accounting/JournalsLanding/ManualJournalsEmptyStatus.js diff --git a/client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js new file mode 100644 index 000000000..b04d2c786 --- /dev/null +++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsList.js @@ -0,0 +1,56 @@ +import React, { useEffect } from 'react'; +import { useIntl } from 'react-intl'; + +import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; + +import { ManualJournalsListProvider } from './ManualJournalsListProvider'; +import ManualJournalsAlerts from './ManualJournalsAlerts'; +import ManualJournalsViewTabs from './ManualJournalsViewTabs'; +import ManualJournalsDataTable from './ManualJournalsDataTable'; +import ManualJournalsActionsBar from './ManualJournalActionsBar'; + +import withDashboardActions from 'containers/Dashboard/withDashboardActions'; +import withManualJournals from './withManualJournals'; + +import { transformTableStateToQuery, compose } from 'utils'; + +import 'style/pages/ManualJournal/List.scss'; + +/** + * Manual journals table. + */ +function ManualJournalsTable({ + // #withDashboardActions + changePageTitle, + + // #withManualJournals + journalsTableState, +}) { + const { formatMessage } = useIntl(); + + // Handle update the page title. + useEffect(() => { + changePageTitle(formatMessage({ id: 'manual_journals' })); + }, [changePageTitle, formatMessage]); + + return ( + + + + + + + + + + ); +} + +export default compose( + withDashboardActions, + withManualJournals(({ manualJournalsTableState }) => ({ + journalsTableState: manualJournalsTableState, + })), +)(ManualJournalsTable); diff --git a/client/src/containers/Accounting/ManualJournalsListProvider.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js similarity index 62% rename from client/src/containers/Accounting/ManualJournalsListProvider.js rename to client/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js index 6a28387f4..d9f512714 100644 --- a/client/src/containers/Accounting/ManualJournalsListProvider.js +++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsListProvider.js @@ -1,28 +1,39 @@ import React, { createContext } from 'react'; import DashboardInsider from 'components/Dashboard/DashboardInsider'; import { useResourceViews, useJournals } from 'hooks/query'; +import { isTableEmptyStatus } from 'utils'; const ManualJournalsContext = createContext(); function ManualJournalsListProvider({ query, ...props }) { // Fetches accounts resource views and fields. - const { data: journalsViews, isFetching: isViewsLoading } = useResourceViews( + const { data: journalsViews, isLoading: isViewsLoading } = useResourceViews( 'manual_journals', ); // Fetches the manual journals transactions with pagination meta. const { - data: { manualJournals }, - isFetching: isManualJournalsLoading, - } = useJournals(query); + data: { manualJournals, pagination, filterMeta }, + isLoading: isManualJournalsLoading, + isFetching: isManualJournalsFetching + } = useJournals(query, { keepPreviousData: true }); + + // Detarmines the datatable empty status. + const isEmptyStatus = isTableEmptyStatus({ + data: manualJournals, pagination, filterMeta, + }) && !isManualJournalsFetching; // Global state. const state = { manualJournals, + pagination, journalsViews, isManualJournalsLoading, + isManualJournalsFetching, isViewsLoading, + + isEmptyStatus }; return ( diff --git a/client/src/containers/Accounting/ManualJournalsViewTabs.js b/client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js similarity index 72% rename from client/src/containers/Accounting/ManualJournalsViewTabs.js rename to client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js index 25cba1767..e4b06c652 100644 --- a/client/src/containers/Accounting/ManualJournalsViewTabs.js +++ b/client/src/containers/Accounting/JournalsLanding/ManualJournalsViewTabs.js @@ -8,17 +8,21 @@ import { DashboardViewsTabs } from 'components'; import { useManualJournalsContext } from './ManualJournalsListProvider'; import withManualJournalsActions from './withManualJournalsActions'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; +import withManualJournals from './withManualJournals'; -import { compose, saveInvoke } from 'utils'; +import { compose } from 'utils'; /** * Manual journal views tabs. */ function ManualJournalsViewTabs({ // #withManualJournalsActions - addManualJournalsTableQueries, + setManualJournalsTableState, + + // #withManualJournals + journalsTableState }) { - const { custom_view_id: customViewId } = useParams(); + // Manual journals context. const { journalsViews } = useManualJournalsContext(); const tabs = journalsViews.map((view) => ({ @@ -27,9 +31,10 @@ function ManualJournalsViewTabs({ const handleClickNewView = () => {}; + // Handles the tab change. const handleTabChange = (viewId) => { - addManualJournalsTableQueries({ - custom_view_id: viewId || null, + setManualJournalsTableState({ + customViewId: viewId || null, }); }; @@ -38,7 +43,7 @@ function ManualJournalsViewTabs({ ({ + journalsTableState: manualJournalsTableState, + })), )(ManualJournalsViewTabs); diff --git a/client/src/containers/Accounting/components.js b/client/src/containers/Accounting/JournalsLanding/components.js similarity index 54% rename from client/src/containers/Accounting/components.js rename to client/src/containers/Accounting/JournalsLanding/components.js index e516dbc51..f0d5472ab 100644 --- a/client/src/containers/Accounting/components.js +++ b/client/src/containers/Accounting/JournalsLanding/components.js @@ -6,16 +6,20 @@ import { Position, Tag, Button, + MenuItem, + Menu, + MenuDivider, + Popover, } from '@blueprintjs/core'; import { FormattedMessage as T } from 'react-intl'; import moment from 'moment'; -import { Choose, Money, If, Icon, Hint } from 'components'; +import { Choose, Money, If, Icon } from 'components'; +import { safeCallback } from 'utils'; +import { formatMessage } from 'services/intl'; -import withAccountDetails from 'containers/Accounts/withAccountDetail'; - -import { compose } from 'utils'; - -// Amount accessor. +/** + * Amount accessor. + */ export const AmountAccessor = (r) => ( } @@ -26,15 +30,13 @@ export const AmountAccessor = (r) => ( ); -const AmountPopoverContentLineRender = ({ - journalEntry, - accountId, - - // #withAccountDetail - account, -}) => { +/** + * Amount popover content line. + */ +export const AmountPopoverContentLine = ({ journalEntry }) => { const isCredit = !!journalEntry.credit; const isDebit = !!journalEntry.debit; + const { account } = journalEntry; return ( @@ -55,10 +57,9 @@ const AmountPopoverContentLineRender = ({ ); }; -const AmountPopoverContentLine = compose(withAccountDetails)( - AmountPopoverContentLineRender, -); - +/** + * Amount popover content. + */ export function AmountPopoverContent({ journalEntries }) { const journalLinesProps = journalEntries.map((journalEntry) => ({ journalEntry, @@ -78,7 +79,7 @@ export function AmountPopoverContent({ journalEntries }) { } /** - * publish column accessor. + * Publish column accessor. */ export const StatusAccessor = (row) => { return ( @@ -123,79 +124,52 @@ export function NoteAccessor(row) { ); } -// Contact header cell. -export function ContactHeaderCell() { +/** + * Table actions cell. + */ +export const ActionsCell = (props) => { return ( - <> - - } - position={Position.LEFT_BOTTOM} - /> - + } + position={Position.RIGHT_BOTTOM} + > +
) } \ No newline at end of file diff --git a/client/src/containers/Accounts/AccountsChart.js b/client/src/containers/Accounts/AccountsChart.js index e4f9529b3..75daab70f 100644 --- a/client/src/containers/Accounts/AccountsChart.js +++ b/client/src/containers/Accounts/AccountsChart.js @@ -4,15 +4,17 @@ import { useIntl } from 'react-intl'; import 'style/pages/Accounts/List.scss'; import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; -import { AccountsChartProvider } from 'containers/Accounts/AccountsChartProvider'; -import AccountsViewPage from 'containers/Accounts/AccountsViewPage'; +import { AccountsChartProvider } from './AccountsChartProvider'; + +import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs'; import AccountsActionsBar from 'containers/Accounts/AccountsActionsBar'; import AccountsAlerts from './AccountsAlerts'; +import AccountsDataTable from './AccountsDataTable'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withAccounts from 'containers/Accounts/withAccounts'; -import { compose } from 'utils'; +import { transformTableStateToQuery, compose } from 'utils'; /** * Accounts chart list. @@ -22,7 +24,7 @@ function AccountsChart({ changePageTitle, // #withAccounts - accountsTableQuery + accountsTableState, }) { const { formatMessage } = useIntl(); @@ -31,11 +33,14 @@ function AccountsChart({ }, [changePageTitle, formatMessage]); return ( - + - + + @@ -45,7 +50,5 @@ function AccountsChart({ export default compose( withDashboardActions, - withAccounts(({ accountsTableQuery }) => ({ - accountsTableQuery, - })), + withAccounts(({ accountsTableState }) => ({ accountsTableState })), )(AccountsChart); diff --git a/client/src/containers/Accounts/AccountsChartProvider.js b/client/src/containers/Accounts/AccountsChartProvider.js index cb8375f63..ff9985afb 100644 --- a/client/src/containers/Accounts/AccountsChartProvider.js +++ b/client/src/containers/Accounts/AccountsChartProvider.js @@ -9,18 +9,22 @@ const AccountsChartContext = createContext(); */ function AccountsChartProvider({ query, ...props }) { // Fetch accounts resource views and fields. - const { data: resourceViews, isFetching: isViewsLoading } = useResourceViews( + const { data: resourceViews, isLoading: isViewsLoading } = useResourceViews( 'accounts', ); // Fetch the accounts resource fields. const { data: resourceFields, - isFetching: isFieldsLoading, + isLoading: isFieldsLoading, } = useResourceFields('accounts'); // Fetch accounts list according to the given custom view id. - const { data: accounts, isFetching: isAccountsLoading } = useAccounts( + const { + data: accounts, + isFetching: isAccountsFetching, + isLoading: isAccountsLoading + } = useAccounts( query, { keepPreviousData: true } ); @@ -32,6 +36,7 @@ function AccountsChartProvider({ query, ...props }) { resourceViews, isAccountsLoading, + isAccountsFetching, isFieldsLoading, isViewsLoading, }; diff --git a/client/src/containers/Accounts/AccountsDataTable.js b/client/src/containers/Accounts/AccountsDataTable.js index 25d89fc1c..07d9f9ba8 100644 --- a/client/src/containers/Accounts/AccountsDataTable.js +++ b/client/src/containers/Accounts/AccountsDataTable.js @@ -1,127 +1,75 @@ -import React, { useCallback, useMemo } from 'react'; -import { Button, Popover, Position } from '@blueprintjs/core'; -import { useIntl } from 'react-intl'; +import React from 'react'; import classNames from 'classnames'; -import { Icon, DataTable } from 'components'; -import { saveInvoke } from 'utils'; +import { TableFastCell, DataTable } from 'components'; +import { compose } from 'utils'; import { CLASSES } from 'common/classes'; -import { NormalCell, BalanceCell, AccountActionsMenu } from './components'; -import { TableFastCell } from 'components'; +import { useAccountsTableColumns, rowClassNames } from './utils'; +import { ActionsMenu } from './components'; import TableVirtualizedListRows from 'components/Datatable/TableVirtualizedRows'; import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; +import { useAccountsChartContext } from './AccountsChartProvider'; + +import withAlertsActions from 'containers/Alert/withAlertActions'; +import withDialogActions from 'containers/Dialog/withDialogActions'; /** * Accounts data-table. */ -export default function AccountsDataTable({ - // #ownProps - accounts, - loading, - onFetchData, - onSelectedRowsChange, - // onDeleteAccount, - // onInactivateAccount, - // onActivateAccount, - // onEditAccount, - // onNewChildAccount, +function AccountsDataTable({ + // #withAlertsDialog + openAlert, + + // #withDial + openDialog, }) { - const { formatMessage } = useIntl(); + const { + isAccountsLoading, + isAccountsFetching, + accounts, + } = useAccountsChartContext(); - const ActionsCell = useMemo( - () => ({ row }) => ( - } - position={Position.RIGHT_TOP} - > -