fix: resources table issues.

This commit is contained in:
a.bouhuolia
2021-02-21 16:03:17 +02:00
parent 350a148747
commit f96166514b
13 changed files with 68 additions and 29 deletions

View File

@@ -7,6 +7,7 @@ import ManualJournalsEmptyStatus from './ManualJournalsEmptyStatus';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import withManualJournals from './withManualJournals';
import withManualJournalsActions from './withManualJournalsActions'; import withManualJournalsActions from './withManualJournalsActions';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -26,6 +27,9 @@ function ManualJournalsDataTable({
// #withAlertsActions // #withAlertsActions
openAlert, openAlert,
// #withManualJournals
manualJournalsTableState,
// #ownProps // #ownProps
onSelectedRowsChange, onSelectedRowsChange,
}) { }) {
@@ -80,6 +84,7 @@ function ManualJournalsDataTable({
noInitialFetch={true} noInitialFetch={true}
columns={columns} columns={columns}
data={manualJournals} data={manualJournals}
initialState={manualJournalsTableState}
manualSortBy={true} manualSortBy={true}
selectionColumn={true} selectionColumn={true}
expandable={true} expandable={true}
@@ -106,5 +111,8 @@ function ManualJournalsDataTable({
export default compose( export default compose(
withManualJournalsActions, withManualJournalsActions,
withManualJournals(({ manualJournalsTableState }) => ({
manualJournalsTableState,
})),
withAlertsActions, withAlertsActions,
)(ManualJournalsDataTable); )(ManualJournalsDataTable);

View File

@@ -1,5 +1,4 @@
import React, { useEffect } from 'react'; import React from 'react';
import { useIntl } from 'react-intl';
import { DashboardContentTable, DashboardPageContent } from 'components'; import { DashboardContentTable, DashboardPageContent } from 'components';
@@ -9,7 +8,6 @@ import ManualJournalsViewTabs from './ManualJournalsViewTabs';
import ManualJournalsDataTable from './ManualJournalsDataTable'; import ManualJournalsDataTable from './ManualJournalsDataTable';
import ManualJournalsActionsBar from './ManualJournalActionsBar'; import ManualJournalsActionsBar from './ManualJournalActionsBar';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withManualJournals from './withManualJournals'; import withManualJournals from './withManualJournals';
import { transformTableStateToQuery, compose } from 'utils'; import { transformTableStateToQuery, compose } from 'utils';
@@ -20,19 +18,9 @@ import 'style/pages/ManualJournal/List.scss';
* Manual journals table. * Manual journals table.
*/ */
function ManualJournalsTable({ function ManualJournalsTable({
// #withDashboardActions
changePageTitle,
// #withManualJournals // #withManualJournals
journalsTableState, journalsTableState,
}) { }) {
const { formatMessage } = useIntl();
// Handle update the page title.
useEffect(() => {
changePageTitle(formatMessage({ id: 'manual_journals' }));
}, [changePageTitle, formatMessage]);
return ( return (
<ManualJournalsListProvider <ManualJournalsListProvider
query={transformTableStateToQuery(journalsTableState)} query={transformTableStateToQuery(journalsTableState)}
@@ -53,7 +41,6 @@ function ManualJournalsTable({
} }
export default compose( export default compose(
withDashboardActions,
withManualJournals(({ manualJournalsTableState }) => ({ withManualJournals(({ manualJournalsTableState }) => ({
journalsTableState: manualJournalsTableState, journalsTableState: manualJournalsTableState,
})), })),

View File

@@ -7,6 +7,7 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import { DataTable } from 'components'; import { DataTable } from 'components';
import withCustomers from './withCustomers';
import withCustomersActions from './withCustomersActions'; import withCustomersActions from './withCustomersActions';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import withDialogActions from 'containers/Dialog/withDialogActions'; import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -23,6 +24,9 @@ function CustomersTable({
// #withCustomersActions // #withCustomersActions
setCustomersTableState, setCustomersTableState,
// #withCustomers
customersTableState,
// #withAlerts // #withAlerts
openAlert, openAlert,
}) { }) {
@@ -71,6 +75,7 @@ function CustomersTable({
noInitialFetch={true} noInitialFetch={true}
columns={columns} columns={columns}
data={customers} data={customers}
initialState={customersTableState}
loading={isCustomersLoading} loading={isCustomersLoading}
headerLoading={isCustomersLoading} headerLoading={isCustomersLoading}
progressBarLoading={isCustomersFetching} progressBarLoading={isCustomersFetching}
@@ -100,4 +105,5 @@ export default compose(
withAlertsActions, withAlertsActions,
withDialogActions, withDialogActions,
withCustomersActions, withCustomersActions,
withCustomers(({ customersTableState }) => ({ customersTableState })),
)(CustomersTable); )(CustomersTable);

View File

@@ -9,6 +9,7 @@ import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import BillsEmptyStatus from './BillsEmptyStatus'; import BillsEmptyStatus from './BillsEmptyStatus';
import withBills from './withBills';
import withBillActions from './withBillsActions'; import withBillActions from './withBillsActions';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -22,6 +23,9 @@ function BillsDataTable({
// #withBillsActions // #withBillsActions
setBillsTableState, setBillsTableState,
// #withBills
billsTableState,
// #withAlerts // #withAlerts
openAlert, openAlert,
}) { }) {
@@ -73,6 +77,7 @@ function BillsDataTable({
<DataTable <DataTable
columns={columns} columns={columns}
data={bills} data={bills}
initialState={billsTableState}
loading={isBillsLoading} loading={isBillsLoading}
headerLoading={isBillsLoading} headerLoading={isBillsLoading}
progressBarLoading={isBillsFetching} progressBarLoading={isBillsFetching}
@@ -96,6 +101,7 @@ function BillsDataTable({
} }
export default compose( export default compose(
withBills(({ billsTableState }) => ({ billsTableState })),
withBillActions, withBillActions,
withAlertsActions, withAlertsActions,
withSettings(({ organizationSettings }) => ({ withSettings(({ organizationSettings }) => ({

View File

@@ -101,7 +101,9 @@ function PaymentMadeForm() {
const onError = ({ const onError = ({
response: { response: {
error: { data: errors }, error: {
data: { errors },
},
}, },
}) => { }) => {
const getError = (errorType) => errors.find((e) => e.type === errorType); const getError = (errorType) => errors.find((e) => e.type === errorType);
@@ -116,9 +118,7 @@ function PaymentMadeForm() {
}; };
if (!isNewMode) { if (!isNewMode) {
editPaymentMadeMutate([paymentMadeId, form]) editPaymentMadeMutate([paymentMadeId, form]).then(onSaved).catch(onError);
.then(onSaved)
.catch(onError);
} else { } else {
createPaymentMadeMutate(form).then(onSaved).catch(onError); createPaymentMadeMutate(form).then(onSaved).catch(onError);
} }

View File

@@ -12,7 +12,7 @@ const PaymentMadesListContext = createContext();
/** /**
* Accounts chart data provider. * Accounts chart data provider.
*/ */
function PaymentMadesListProvider({ accountsTableQuery, ...props }) { function PaymentMadesListProvider({ query, ...props }) {
// Fetch accounts resource views and fields. // Fetch accounts resource views and fields.
const { const {
data: paymentMadesViews, data: paymentMadesViews,
@@ -30,7 +30,7 @@ function PaymentMadesListProvider({ accountsTableQuery, ...props }) {
data: { paymentMades, pagination, filterMeta }, data: { paymentMades, pagination, filterMeta },
isLoading: isPaymentsLoading, isLoading: isPaymentsLoading,
isFetching: isPaymentsFetching, isFetching: isPaymentsFetching,
} = usePaymentMades(accountsTableQuery, { keepPreviousData: true }); } = usePaymentMades(query, { keepPreviousData: true });
// Detarmines the datatable empty status. // Detarmines the datatable empty status.
const isEmptyStatus = const isEmptyStatus =

View File

@@ -9,6 +9,7 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import withPaymentMadeActions from './withPaymentMadeActions'; import withPaymentMadeActions from './withPaymentMadeActions';
import withPaymentMade from './withPaymentMade';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import { usePaymentMadesTableColumns, ActionsMenu } from './components'; import { usePaymentMadesTableColumns, ActionsMenu } from './components';
@@ -19,7 +20,10 @@ import { usePaymentMadesListContext } from './PaymentMadesListProvider';
*/ */
function PaymentMadesTable({ function PaymentMadesTable({
// #withPaymentMadeActions // #withPaymentMadeActions
addPaymentMadesTableQueries, setPaymentMadesTableState,
// #withPaymentMade
paymentMadesTableState,
// #withAlerts // #withAlerts
openAlert, openAlert,
@@ -52,9 +56,9 @@ function PaymentMadesTable({
// Handle datatable fetch data once the table state change. // Handle datatable fetch data once the table state change.
const handleDataTableFetchData = useCallback( const handleDataTableFetchData = useCallback(
({ pageIndex, pageSize, sortBy }) => { ({ pageIndex, pageSize, sortBy }) => {
addPaymentMadesTableQueries({ pageIndex, pageSize, sortBy }); setPaymentMadesTableState({ pageIndex, pageSize, sortBy });
}, },
[addPaymentMadesTableQueries], [setPaymentMadesTableState],
); );
// Display empty status instead of the table. // Display empty status instead of the table.
@@ -66,6 +70,7 @@ function PaymentMadesTable({
<DataTable <DataTable
columns={columns} columns={columns}
data={paymentMades} data={paymentMades}
initialState={paymentMadesTableState}
onFetchData={handleDataTableFetchData} onFetchData={handleDataTableFetchData}
loading={isPaymentsLoading} loading={isPaymentsLoading}
headerLoading={isPaymentsLoading} headerLoading={isPaymentsLoading}
@@ -91,6 +96,7 @@ function PaymentMadesTable({
export default compose( export default compose(
withPaymentMadeActions, withPaymentMadeActions,
withPaymentMade(({ paymentMadesTableState }) => ({ paymentMadesTableState })),
withAlertsActions, withAlertsActions,
withSettings(({ organizationSettings }) => ({ withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency, baseCurrency: organizationSettings?.baseCurrency,

View File

@@ -9,6 +9,7 @@ import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withInvoices from './withInvoices';
import withInvoiceActions from './withInvoiceActions'; import withInvoiceActions from './withInvoiceActions';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
@@ -23,6 +24,9 @@ function InvoicesDataTable({
// #withInvoicesActions // #withInvoicesActions
setInvoicesTableState, setInvoicesTableState,
// #withInvoices
invoicesTableState,
// #withSettings // #withSettings
baseCurrency, baseCurrency,
@@ -79,6 +83,7 @@ function InvoicesDataTable({
<DataTable <DataTable
columns={columns} columns={columns}
data={invoices} data={invoices}
initialState={invoicesTableState}
loading={isInvoicesLoading} loading={isInvoicesLoading}
headerLoading={isInvoicesLoading} headerLoading={isInvoicesLoading}
progressBarLoading={isInvoicesFetching} progressBarLoading={isInvoicesFetching}
@@ -109,6 +114,7 @@ export default compose(
withDashboardActions, withDashboardActions,
withInvoiceActions, withInvoiceActions,
withAlertsActions, withAlertsActions,
withInvoices(({ invoicesTableState }) => ({ invoicesTableState })),
withSettings(({ organizationSettings }) => ({ withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency, baseCurrency: organizationSettings?.baseCurrency,
})), })),

View File

@@ -8,8 +8,9 @@ import { DataTable } from 'components';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withPaymentReceives from './withPaymentReceives';
import withPaymentReceivesActions from './withPaymentReceivesActions'; import withPaymentReceivesActions from './withPaymentReceivesActions';
import withAlertsActions from 'containers/Alert/withAlertActions';
import withSettings from 'containers/Settings/withSettings'; import withSettings from 'containers/Settings/withSettings';
import { usePaymentReceivesColumns, ActionsMenu } from './components'; import { usePaymentReceivesColumns, ActionsMenu } from './components';
import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider'; import { usePaymentReceivesListContext } from './PaymentReceiptsListProvider';
@@ -21,6 +22,9 @@ function PaymentReceivesDataTable({
// #withPaymentReceivesActions // #withPaymentReceivesActions
setPaymentReceivesTableState, setPaymentReceivesTableState,
// #withPaymentReceives
paymentReceivesTableState,
// #withAlertsActions // #withAlertsActions
openAlert, openAlert,
}) { }) {
@@ -70,6 +74,7 @@ function PaymentReceivesDataTable({
<DataTable <DataTable
columns={columns} columns={columns}
data={paymentReceives} data={paymentReceives}
initialState={paymentReceivesTableState}
loading={isPaymentReceivesLoading} loading={isPaymentReceivesLoading}
headerLoading={isPaymentReceivesLoading} headerLoading={isPaymentReceivesLoading}
progressBarLoading={isPaymentReceivesFetching} progressBarLoading={isPaymentReceivesFetching}
@@ -96,6 +101,9 @@ function PaymentReceivesDataTable({
export default compose( export default compose(
withPaymentReceivesActions, withPaymentReceivesActions,
withAlertsActions, withAlertsActions,
withPaymentReceives(({ paymentReceivesTableState }) => ({
paymentReceivesTableState,
})),
withSettings(({ organizationSettings }) => ({ withSettings(({ organizationSettings }) => ({
baseCurrency: organizationSettings?.baseCurrency, baseCurrency: organizationSettings?.baseCurrency,
})), })),

View File

@@ -23,6 +23,9 @@ function ReceiptsDataTable({
// #withReceiptsActions // #withReceiptsActions
setReceiptsTableState, setReceiptsTableState,
// #withReceipts
receiptTableState,
// #withSettings // #withSettings
baseCurrency, baseCurrency,
@@ -78,6 +81,7 @@ function ReceiptsDataTable({
<DataTable <DataTable
columns={columns} columns={columns}
data={receipts} data={receipts}
initialState={receiptTableState}
loading={isReceiptsLoading} loading={isReceiptsLoading}
headerLoading={isReceiptsLoading} headerLoading={isReceiptsLoading}
progressBarLoading={isReceiptsFetching} progressBarLoading={isReceiptsFetching}

View File

@@ -1,9 +1,7 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import { CLASSES } from 'common/classes'; import { DataTable } from 'components';
import { DataTable, Choose } from 'components';
import TableSkeletonRows from 'components/Datatable/TableSkeletonRows'; import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton'; import TableSkeletonHeader from 'components/Datatable/TableHeaderSkeleton';
@@ -11,6 +9,7 @@ import VendorsEmptyStatus from './VendorsEmptyStatus';
import { useVendorsListContext } from './VendorsListProvider'; import { useVendorsListContext } from './VendorsListProvider';
import withVendorsActions from './withVendorsActions'; import withVendorsActions from './withVendorsActions';
import withVendors from './withVendors';
import withAlertsActions from 'containers/Alert/withAlertActions'; import withAlertsActions from 'containers/Alert/withAlertActions';
import { compose } from 'utils'; import { compose } from 'utils';
@@ -23,6 +22,9 @@ function VendorsTable({
// #withVendorsActions // #withVendorsActions
setVendorsTableState, setVendorsTableState,
// #withVendors
vendorsTableState,
// #withAlertsActions // #withAlertsActions
openAlert, openAlert,
}) { }) {
@@ -73,6 +75,7 @@ function VendorsTable({
noInitialFetch={true} noInitialFetch={true}
columns={columns} columns={columns}
data={vendors} data={vendors}
initialState={vendorsTableState}
loading={isVendorsLoading} loading={isVendorsLoading}
headerLoading={isVendorsLoading} headerLoading={isVendorsLoading}
progressBarLoading={isVendorsFetching} progressBarLoading={isVendorsFetching}
@@ -96,4 +99,8 @@ function VendorsTable({
); );
} }
export default compose(withVendorsActions, withAlertsActions)(VendorsTable); export default compose(
withVendorsActions,
withAlertsActions,
withVendors(({ vendorsTableState }) => ({ vendorsTableState })),
)(VendorsTable);

View File

@@ -59,6 +59,7 @@ export default [
), ),
breadcrumb: 'Manual Journals', breadcrumb: 'Manual Journals',
hotkey: 'shift+m', hotkey: 'shift+m',
pageTitle: formatMessage({ id: 'manual_journals' })
}, },
{ {
path: `/items/categories`, path: `/items/categories`,

View File

@@ -12,5 +12,5 @@ const initialState = {
}; };
export default createReducer(initialState, { export default createReducer(initialState, {
...createTableStateReducers('ITEMS'), ...createTableStateReducers('PAYMENT_MADES'),
}); });