QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-17 21:30:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

WIP Version 0.0.1

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-05-08 04:36:04 +02:00
parent bd7eb0eb76
commit 71cc561bb2
151 changed files with 1742 additions and 1081 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/App.js
View File

@@ -8,7 +8,9 @@ import PrivateRoute from 'components/PrivateRoute';
import Authentication from 'components/Authentication';
import Dashboard from 'components/Dashboard/Dashboard';
import { isAuthenticated } from 'store/authentication/authentication.reducer'
import Progress from 'components/NProgress/Progress';
import { ReactQueryConfigProvider } from 'react-query';
import { ReactQueryDevtools } from "react-query-devtools";
import messages from 'lang/en';
import 'style/App.scss';
@@ -22,13 +24,22 @@ function App({
console.log(`new location via ${action}`, location);
});
const queryConfig = {
refetchAllOnWindowFocus: false,
cacheTime: 10000,
staleTime: 10000,
};
return (
<IntlProvider locale={locale} messages={messages}>
<div className="App">
<Router history={history}>
<Authentication isAuthenticated={isAuthorized} />
<PrivateRoute isAuthenticated={isAuthorized} component={Dashboard} />
</Router>
<ReactQueryConfigProvider config={queryConfig}>
<Router history={history}>
<Authentication isAuthenticated={isAuthorized} />
<PrivateRoute isAuthenticated={isAuthorized} component={Dashboard} />
</Router>
<ReactQueryDevtools />
</ReactQueryConfigProvider>
</div>
</IntlProvider>
);

2
client/src/components/Authentication.js
View File

@@ -3,7 +3,7 @@ import { Redirect, Route, Switch, Link } from 'react-router-dom';
import BodyClassName from 'react-body-classname';
import authenticationRoutes from 'routes/authentication';
export default function({ isAuthenticated =false, ...rest }) {
export default function AuthenticationWrapper({ isAuthenticated =false, ...rest }) {
const to = {pathname: '/dashboard/homepage'};
return (

2
client/src/components/Dashboard/Dashboard.js
View File

@@ -5,7 +5,7 @@ import DashboardContent from 'components/Dashboard/DashboardContent';
import DialogsContainer from 'components/DialogsContainer';
import PreferencesContent from 'components/Preferences/PreferencesContent';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
import Search from 'containers/Dashboard/GeneralSearch/Search';
import Search from 'containers/GeneralSearch/Search';
export default function Dashboard() {
return (

10
client/src/components/DialogsContainer.js
View File

@@ -1,9 +1,9 @@
import React from 'react';
import AccountFormDialog from 'containers/Dashboard/Dialogs/AccountFormDialog';
import UserFormDialog from 'containers/Dashboard/Dialogs/UserFormDialog';
import ItemCategoryDialog from 'containers/Dashboard/Dialogs/ItemCategoryDialog';
import CurrencyDialog from 'containers/Dashboard/Dialogs/CurrencyDialog';
import InviteUserDialog from 'containers/Dashboard/Dialogs/InviteUserDialog';
import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
import UserFormDialog from 'containers/Dialogs/UserFormDialog';
import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
import CurrencyDialog from 'containers/Dialogs/CurrencyDialog';
import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
export default function DialogsContainer() {
return (

13
client/src/components/Items/ItemsActionsBar.js
View File

@@ -1,13 +0,0 @@
import React from 'react';
import { Button, AnchorButton, Classes, Icon } from '@blueprintjs/core';
const ItemsActionsBar = () => {
return (
<div className='dashob'>
ItemsActionsBar 22
</div>
);
};
export default ItemsActionsBar;

94
client/src/components/JournalEntry/MakeJournalEntry.js
View File

@@ -1,94 +0,0 @@
import React from 'react';
import {
FormGroup,
MenuItem,
Intent,
InputGroup,
Position,
Button,
} from '@blueprintjs/core';
import { DateInput, TimePrecision } from "@blueprintjs/datetime";
import {
GridComponent,
ColumnsDirective,
ColumnDirective,
Inject,
Sort,
} from '@syncfusion/ej2-react-grids';
import {momentFormatter} from 'utils';
export default function MakeJournalEntry({
accounts,
currencies,
}) {
const handleDateChange = () => {
};
const handleClose = () => {
};
const columns = [
{
headerText: 'Account',
},
{
headerText: 'Description',
},
{
headerText: 'Account',
},
{
headerText: 'Debit',
},
{
headerText: 'Credit',
}
];
return (
<div class="make-journal-entry">
<div class="make-journal-entry__details">
<FormGroup
label={'Date'}
inline={true}>
<DateInput
{...momentFormatter('MM/DD/YYYY')}
defaultValue={new Date()}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM }}
/>
</FormGroup>
<GridComponent>
<ColumnsDirective>
{columns.map((column) => {
return (<ColumnDirective
field={column.field}
headerText={column.headerText}
template={column.template}
allowSorting={true}
customAttributes={column.customAttributes}
/>);
})}
</ColumnsDirective>
</GridComponent>
<div class="form__floating-footer">
<Button onClick={handleClose}>Close</Button>
<Button intent={Intent.PRIMARY} type="submit">
{ 'Save and Publish' }
</Button>
<Button intent={Intent.PRIMARY} type="submit">
{ 'Save as Draft' }
</Button>
</div>
</div>
</div>
)
}

16
client/src/components/NProgress/AppProgress.js
View File

@@ -1,18 +1,16 @@
import React from 'react';
import {connect} from 'react-redux';
import Progress from './Progress';
import {queryCache, useIsFetching} from 'react-query';
function AppProgress({
isAnimating,
}) {
const isFetching = useIsFetching();
return (
<Progress isAnimating={isAnimating} />
<Progress isAnimating={isFetching} />
);
};
const mapStateToProps = (state) => ({
isAnimating: state.dashboard.requestsLoading > 0,
});
export default connect(mapStateToProps)(AppProgress);
export default AppProgress;

4
client/src/components/Preferences/PreferencesTopbar.js
View File

@@ -1,8 +1,8 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
import UsersActions from 'containers/Dashboard/Preferences/UsersActions';
import CurrenciesActions from 'containers/Dashboard/Preferences/CurrenciesActions';
import UsersActions from 'containers/Preferences/UsersActions';
import CurrenciesActions from 'containers/Preferences/CurrenciesActions';
export default function PreferencesTopbar() {

33
client/src/components/Utils/Choose.js Normal file
View File

@@ -0,0 +1,33 @@
import React from 'react';
import PropTypes from 'prop-types';
import If from './if';
const Choose = props => {
let when = null;
let otherwise = null;
React.Children.forEach(props.children, children => {
if (children.props.condition === undefined) {
otherwise = children;
} else if (!when && children.props.condition === true) {
when = children;
}
});
return when || otherwise;
};
Choose.propTypes = {
children: PropTypes.node
};
Choose.When = If;
Choose.Otherwise = ({render, children}) => render ? render() : children;
Choose.Otherwise.propTypes = {
children: PropTypes.node,
render: PropTypes.func
};
export default Choose;

11
client/src/components/Utils/For.js Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
const For = ({render, of}) => of.map((item, index) => render(item, index));
For.propTypes = {
of: PropTypes.array.isRequired,
render: PropTypes.func.isRequired
};
export default For;

13
client/src/components/Utils/If.js Normal file
View File

@@ -0,0 +1,13 @@
import React from 'react';
import PropTypes from 'prop-types';
const If = props => props.condition
? (props.render ? props.render() : props.children) : null;
If.propTypes = {
condition: PropTypes.bool.isRequired,
children: PropTypes.node,
render: PropTypes.func
};
export default If;

9
client/src/components/index.js Normal file
View File

@@ -0,0 +1,9 @@
import If from './Utils/If';
// import Choose from './Utils/Choose';
// import For from './Utils/For';
export {
If,
// Choose,
// For,
};

13
client/src/connectors/AccountFormDialog.connector.js
View File

@@ -1,13 +0,0 @@
import {connect} from 'react-redux';
import {getDialogPayload} from 'store/dashboard/dashboard.reducer';
export const mapStateToProps = (state, props) => {
const dialogPayload = getDialogPayload(state, 'account-form');
return {
name: 'account-form',
payload: {action: 'new', id: null, ...dialogPayload},
};
};
export default connect(mapStateToProps);

14
client/src/connectors/CustomView.connector.js
View File

@@ -1,14 +0,0 @@
import { connect } from 'react-redux';
import {
fetchResourceViews,
} from 'store/customViews/customViews.actions';
const mapStateToProps = (state) => ({
});
const mapActionsToProps = (dispatch) => ({
fetchResourceViews: (resourceSlug) => dispatch(fetchResourceViews({ resourceSlug })),
});
export default connect(mapStateToProps, mapActionsToProps);

6
client/src/connectors/Dashboard.connector.js
View File

@@ -2,10 +2,6 @@
import { connect } from 'react-redux';
import t from 'store/types';
const mapStateToProps = (state) => ({
});
const mapActionsToProps = (dispatch) => ({
changePageTitle: (pageTitle) => dispatch({
type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
@@ -28,4 +24,4 @@ const mapActionsToProps = (dispatch) => ({
}),
});
export default connect(mapStateToProps, mapActionsToProps);
export default connect(null, mapActionsToProps);

12
client/src/connectors/RegisterForm.connect.js
View File

@@ -1,12 +0,0 @@
import { connect } from 'react-redux';
import { submitRegister } from 'store/registers/register.action';
export const mapStateToProps = (state, props) => {
return {};
};
export const mapDispatchToProps = (dispatch) => ({
requestSubmitRegister: (form) => dispatch(submitRegister({ form })),
});
export default connect(mapStateToProps, mapDispatchToProps);

14
client/src/connectors/Resource.connector.js
View File

@@ -8,19 +8,21 @@ import {
getResourceFields,
getResourceColumn,
getResourceField,
getResourceMetadata,
} from 'store/resources/resources.reducer';
export const mapStateToProps = (state, props) => ({
getResourceColumns: (resourceSlug) => getResourceColumns(state, resourceSlug),
getResourceFields: (resourceSlug) => getResourceFields(state, resourceSlug),
// getResourceColumns: (resourceSlug) => getResourceColumns(state, resourceSlug),
// getResourceFields: (resourceSlug) => getResourceFields(state, resourceSlug),
// getResourceMetadata: (resourceSlug) => getResourceMetadata(state, resourceSlug),
getResourceColumn: (columnId) => getResourceColumn(state, columnId),
getResourceField: (fieldId) => getResourceField(state, fieldId),
// getResourceColumn: (columnId) => getResourceColumn(state, columnId),
// getResourceField: (fieldId) => getResourceField(state, fieldId),
});
export const mapDispatchToProps = (dispatch) => ({
fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
fetchResourceColumns: (resourceSlug) => dispatch(fetchResourceColumns({ resourceSlug })),
requestFetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
requestFetchResourceColumns: (resourceSlug) => dispatch(fetchResourceColumns({ resourceSlug })),
});
export default connect(mapStateToProps, mapDispatchToProps);

25
client/src/connectors/View.connector.js
View File

@@ -1,25 +0,0 @@
import {connect} from 'react-redux';
import {
fetchView,
submitView,
deleteView,
editView,
} from 'store/customViews/customViews.actions';
import {
getViewMeta,
getViewItem,
} from 'store/customViews/customViews.selectors';
export const mapStateToProps = (state) => ({
getViewMeta: (viewId) => getViewMeta(state, viewId),
getViewItem: (viewId) => getViewItem(state, viewId),
});
export const mapDispatchToProps = (dispatch) => ({
fetchView: (id) => dispatch(fetchView({ id })),
submitView: (form) => dispatch(submitView({ form })),
editView: (id, form) => dispatch(editView({ id, form })),
deleteView: (id) => dispatch(deleteView({ id })),
});
export default connect(mapStateToProps, mapDispatchToProps);

29
client/src/connectors/ViewFormPage.connector.js
View File

@@ -1,29 +0,0 @@
import {connect} from 'react-redux';
import {
fetchResourceColumns,
fetchResourceFields,
} from 'store/resources/resources.actions';
import {
getResourceColumns,
getResourceFields,
} from 'store/resources/resources.reducer';
import {
fetchView,
submitView,
editView,
} from 'store/customViews/customViews.actions';
import t from 'store/types';
export const mapStateToProps = (state, props) => {
return {
};
};
export const mapDispatchToProps = (dispatch) => ({
fetchView: (id) => dispatch(fetchView({ id })),
submitView: (form) => dispatch(submitView({ form })),
editView: (id, form) => dispatch(editView({ id, form })),
});
export default connect(mapStateToProps, mapDispatchToProps);

0
client/src/containers/Dashboard/Accounting/MakeJournalEntriesFooter.js → client/src/containers/Accounting/MakeJournalEntriesFooter.js
View File

102
client/src/containers/Dashboard/Accounting/MakeJournalEntriesForm.js → client/src/containers/Accounting/MakeJournalEntriesForm.js
View File

@@ -1,39 +1,41 @@
import React, {useMemo, useState, useEffect, useRef, useCallback} from 'react';
import * as Yup from 'yup';
import {
ProgressBar,
Classes,
Intent,
} from '@blueprintjs/core';
import {useFormik} from "formik";
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
import MakeJournalEntriesTable from './MakeJournalEntriesTable';
import {useFormik} from "formik";
import MakeJournalEntriesConnect from 'connectors/MakeJournalEntries.connect';
import AccountsConnect from 'connectors/Accounts.connector';
import DashboardConnect from 'connectors/Dashboard.connector';
import {compose, saveFilesInAsync} from 'utils';
import moment from 'moment';
import withJournalsActions from 'containers/Accounting/withJournalsActions';
import withManualJournalDetail from 'containers/Accounting/withManualJournalDetail';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import AppToaster from 'components/AppToaster';
import {pick} from 'lodash';
import Dragzone from 'components/Dragzone';
import MediaConnect from 'connectors/Media.connect';
import classNames from 'classnames';
import ManualJournalsConnect from 'connectors/ManualJournals.connect';
import useMedia from 'hooks/useMedia';
import {compose} from 'utils';
function MakeJournalEntriesForm({
requestSubmitMedia,
requestDeleteMedia,
requestMakeJournalEntries,
requestEditManualJournal,
changePageTitle,
changePageSubtitle,
editJournal,
onFormSubmit,
onCancelForm,
requestDeleteMedia,
manualJournalsItems
manualJournalId,
manualJournal,
onFormSubmit,
onCancelForm,
}) {
const { setFiles, saveMedia, deletedFiles, setDeletedFiles, deleteMedia } = useMedia({
saveCallback: requestSubmitMedia,
@@ -47,13 +49,13 @@ function MakeJournalEntriesForm({
const clearSavedMediaIds = () => { savedMediaIds.current = []; }
useEffect(() => {
if (editJournal && editJournal.id) {
if (manualJournal && manualJournal.id) {
changePageTitle('Edit Journal');
changePageSubtitle(`No. ${editJournal.journal_number}`);
changePageSubtitle(`No. ${manualJournal.journal_number}`);
} else {
changePageTitle('New Journal');
}
}, [changePageTitle, changePageSubtitle, editJournal]);
}, [changePageTitle, changePageSubtitle, manualJournal]);
const validationSchema = Yup.object().shape({
journal_number: Yup.string().required(),
@@ -100,24 +102,24 @@ function MakeJournalEntriesForm({
}), [defaultEntry]);
const initialValues = useMemo(() => ({
...(editJournal) ? {
...pick(editJournal, Object.keys(defaultInitialValues)),
entries: editJournal.entries.map((entry) => ({
...(manualJournal) ? {
...pick(manualJournal, Object.keys(defaultInitialValues)),
entries: manualJournal.entries.map((entry) => ({
...pick(entry, Object.keys(defaultEntry)),
})),
} : {
...defaultInitialValues,
}
}), [editJournal, defaultInitialValues, defaultEntry]);
}), [manualJournal, defaultInitialValues, defaultEntry]);
const initialAttachmentFiles = useMemo(() => {
return editJournal && editJournal.media
? editJournal.media.map((attach) => ({
return manualJournal && manualJournal.media
? manualJournal.media.map((attach) => ({
preview: attach.attachment_file,
uploaded: true,
metadata: { ...attach },
})) : [];
}, [editJournal]);
}, [manualJournal]);
const formik = useFormik({
enableReinitialize: true,
@@ -125,7 +127,7 @@ function MakeJournalEntriesForm({
initialValues: {
...initialValues,
},
onSubmit: async (values, actions) => {
onSubmit: async (values, { setErrors, setSubmitting }) => {
const entries = values.entries.filter((entry) => (
(entry.credit || entry.debit)
));
@@ -142,7 +144,7 @@ function MakeJournalEntriesForm({
AppToaster.show({
message: 'credit_and_debit_not_equal',
});
actions.setSubmitting(false);
setSubmitting(false);
return;
}
const form = { ...values, status: payload.publish, entries };
@@ -150,33 +152,43 @@ function MakeJournalEntriesForm({
const saveJournal = (mediaIds) => new Promise((resolve, reject) => {
const requestForm = { ...form, media_ids: mediaIds };
if (editJournal && editJournal.id) {
requestEditManualJournal(editJournal.id, requestForm)
if (manualJournal && manualJournal.id) {
requestEditManualJournal(manualJournal.id, requestForm)
.then((response) => {
AppToaster.show({
message: 'manual_journal_has_been_edited',
intent: Intent.SUCCESS,
});
actions.setSubmitting(false);
setSubmitting(false);
saveInvokeSubmit({ action: 'update', ...payload });
clearSavedMediaIds([]);
resolve(response);
}).catch((error) => {
actions.setSubmitting(false);
reject(error);
}).catch((errors) => {
if (errors.find(e => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')) {
setErrors({
journal_number: 'Journal number is already used.',
});
}
setSubmitting(false);
});
} else {
requestMakeJournalEntries(requestForm)
.then((response) => {
AppToaster.show({
message: 'manual_journal_has_been_submit',
intent: Intent.SUCCESS,
});
actions.setSubmitting(false);
setSubmitting(false);
saveInvokeSubmit({ action: 'new', ...payload });
clearSavedMediaIds();
resolve(response);
}).catch((error) => {
actions.setSubmitting(false);
reject(error);
}).catch((errors) => {
if (errors.find(e => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')) {
setErrors({
journal_number: 'Journal number is already used.',
});
}
setSubmitting(false);
});
}
});
@@ -240,9 +252,11 @@ function MakeJournalEntriesForm({
}
export default compose(
ManualJournalsConnect,
MakeJournalEntriesConnect,
AccountsConnect,
DashboardConnect,
// ManualJournalsConnect,
// MakeJournalEntriesConnect,
withJournalsActions,
withManualJournalDetail,
withAccountsActions,
withDashboardActions,
MediaConnect,
)(MakeJournalEntriesForm);

0
client/src/containers/Dashboard/Accounting/MakeJournalEntriesHeader.js → client/src/containers/Accounting/MakeJournalEntriesHeader.js
View File

41
client/src/containers/Dashboard/Accounting/MakeJournalEntriesPage.js → client/src/containers/Accounting/MakeJournalEntriesPage.js
View File

@@ -1,31 +1,28 @@
import React, {useMemo, useCallback} from 'react';
import React, { useCallback } from 'react';
import { useParams, useHistory } from 'react-router-dom';
import useAsync from 'hooks/async';
import { useQuery } from 'react-query';
import MakeJournalEntriesForm from './MakeJournalEntriesForm';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import DashboardConnect from 'connectors/Dashboard.connector';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
import {compose} from 'utils';
import MakeJournalEntriesConnect from 'connectors/MakeJournalEntries.connect';
import AccountsConnect from 'connectors/Accounts.connector';
function MakeJournalEntriesPage({
fetchManualJournal,
getManualJournal,
requestFetchManualJournal,
requestFetchAccounts,
}) {
const history = useHistory();
const { id } = useParams();
const fetchJournal = useAsync(() => {
return Promise.all([
requestFetchAccounts(),
(id) && fetchManualJournal(id),
]);
});
const fetchAccounts = useQuery('accounts-list',
(key) => requestFetchAccounts());
const editJournal = useMemo(() =>
getManualJournal(id) || null,
[getManualJournal, id]);
const fetchJournal = useQuery(
id && ['manual-journal', id],
(key, journalId) => requestFetchManualJournal(journalId));
const handleFormSubmit = useCallback((payload) => {
payload.redirect &&
@@ -37,17 +34,19 @@ function MakeJournalEntriesPage({
}, [history]);
return (
<DashboardInsider loading={fetchJournal.pending} name={'make-journal-page'}>
<DashboardInsider
loading={fetchJournal.isFetching || fetchAccounts.isFetching}
name={'make-journal-page'}>
<MakeJournalEntriesForm
onFormSubmit={handleFormSubmit}
editJournal={editJournal}
manualJournalId={id}
onCancelForm={handleCancel} />
</DashboardInsider>
);
}
export default compose(
DashboardConnect,
AccountsConnect,
MakeJournalEntriesConnect,
// DashboardConnect,
withAccountsActions,
withManualJournalsActions,
)(MakeJournalEntriesPage);

9
client/src/containers/Dashboard/Accounting/MakeJournalEntriesTable.js → client/src/containers/Accounting/MakeJournalEntriesTable.js
View File

@@ -5,8 +5,7 @@ import {
} from '@blueprintjs/core';
import DataTable from 'components/DataTable';
import Icon from 'components/Icon';
import AccountsConnect from 'connectors/Accounts.connector.js';
import {compose, formattedAmount} from 'utils';
import { compose, formattedAmount} from 'utils';
import {
AccountsListFieldCell,
MoneyFieldCell,
@@ -14,6 +13,9 @@ import {
} from 'components/DataTableCells';
import { omit } from 'lodash';
import withAccounts from 'containers/Accounts/withAccounts';
// Actions cell renderer.
const ActionsCellRenderer = ({
row: { index },
@@ -70,6 +72,7 @@ const NoteCellRenderer = (chainedComponent) => (props) => {
return chainedComponent(props);
};
/**
* Make journal entries table component.
*/
@@ -223,5 +226,5 @@ function MakeJournalEntriesTable({
}
export default compose(
AccountsConnect,
withAccounts,
)(MakeJournalEntriesTable);

26
client/src/components/JournalEntry/ManualJournalActionsBar.js → client/src/containers/Accounting/ManualJournalActionsBar.js
View File

@@ -18,13 +18,19 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import DialogConnect from 'connectors/Dialog.connector';
import { compose } from 'utils';
import FilterDropdown from 'components/FilterDropdown';
import ManualJournalsConnect from 'connectors/ManualJournals.connect';
import ResourceConnect from 'connectors/Resource.connector';
function ManualJournalActionsBar({
views,
getResourceFields,
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withManualJournals from 'containers/Accounting/withManualJournals';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
function ManualJournalActionsBar({
resourceName = 'manual_journal',
resourceFields,
manualJournalsViews,
addManualJournalsTableQueries,
onFilterChanged,
selectedRows,
onBulkDelete
@@ -32,8 +38,7 @@ function ManualJournalActionsBar({
const { path } = useRouteMatch();
const history = useHistory();
const manualJournalFields = getResourceFields('manual_journals');
const viewsMenuItems = views.map(view => {
const viewsMenuItems = manualJournalsViews.map(view => {
return (
<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
);
@@ -44,7 +49,7 @@ function ManualJournalActionsBar({
}, [history]);
const filterDropdown = FilterDropdown({
fields: manualJournalFields,
fields: resourceFields,
onFilterChange: filterConditions => {
addManualJournalsTableQueries({
filter_roles: filterConditions || ''
@@ -120,6 +125,7 @@ function ManualJournalActionsBar({
export default compose(
DialogConnect,
ManualJournalsConnect,
ResourceConnect
withResourceDetail,
withManualJournals,
withManualJournalsActions,
)(ManualJournalActionsBar);

56
client/src/components/JournalEntry/ManualJournalsDataTable.js → client/src/containers/Accounting/ManualJournalsDataTable.js
View File

@@ -12,21 +12,33 @@ import { useParams } from 'react-router-dom';
import Icon from 'components/Icon';
import { compose } from 'utils';
import moment from 'moment';
import ManualJournalsConnect from 'connectors/ManualJournals.connect';
import LoadingIndicator from 'components/LoadingIndicator';
import DialogConnect from 'connectors/Dialog.connector';
import DashboardConnect from 'connectors/Dashboard.connector';
import ViewConnect from 'connectors/View.connector';
import { useUpdateEffect } from 'hooks';
import DataTable from 'components/DataTable';
import Money from 'components/Money';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withViewDetails from 'containers/Views/withViewDetails';
import withManualJournals from 'containers/Accounting/withManualJournals';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
function ManualJournalsDataTable({
loading,
manualJournals,
manualJournalsLoading,
changeCurrentView,
changePageSubtitle,
getViewItem,
viewId,
viewMeta,
setTopbarEditView,
manualJournalsLoading,
onFetchData,
onEditJournal,
onDeleteJournal,
@@ -43,8 +55,6 @@ function ManualJournalsDataTable({
}, [manualJournalsLoading, setInitialMount]);
useEffect(() => {
const viewMeta = getViewItem(customViewId);
if (customViewId) {
changeCurrentView(customViewId);
setTopbarEditView(customViewId);
@@ -55,7 +65,7 @@ function ManualJournalsDataTable({
changeCurrentView,
changePageSubtitle,
setTopbarEditView,
getViewItem,
viewMeta,
]);
const handlePublishJournal = useCallback((journal) => () => {
@@ -172,22 +182,26 @@ function ManualJournalsDataTable({
}, [onSelectedRowsChange]);
return (
<DataTable
columns={columns}
data={manualJournals}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
loading={manualJournalsLoading && !initialMount}
onSelectedRowsChange={handleSelectedRowsChange}
/>
<LoadingIndicator loading={loading} mount={false}>
<DataTable
columns={columns}
data={manualJournals}
onFetchData={handleDataTableFetchData}
manualSortBy={true}
selectionColumn={true}
noInitialFetch={true}
loading={manualJournalsLoading && !initialMount}
onSelectedRowsChange={handleSelectedRowsChange}
/>
</LoadingIndicator>
);
}
export default compose(
DialogConnect,
DashboardConnect,
ViewConnect,
ManualJournalsConnect,
withDashboardActions,
// withViewsActions,
withManualJournalsActions,
withManualJournals,
withViewDetails,
)(ManualJournalsDataTable);

61
client/src/containers/Dashboard/Accounting/ManualJournalsTable.js → client/src/containers/Accounting/ManualJournalsList.js
View File

@@ -1,45 +1,49 @@
import React, { useEffect, useState, useCallback } from 'react';
import { Route, Switch, useHistory } from 'react-router-dom';
import useAsync from 'hooks/async';
import { useQuery } from 'react-query';
import { Alert, Intent } from '@blueprintjs/core';
import AppToaster from 'components/AppToaster';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ManualJournalsViewTabs from 'components/JournalEntry/ManualJournalsViewTabs';
import ManualJournalsDataTable from 'components/JournalEntry/ManualJournalsDataTable';
import ManualJournalsActionsBar from 'components/JournalEntry/ManualJournalActionsBar';
import ManualJournalsConnect from 'connectors/ManualJournals.connect';
import DashboardConnect from 'connectors/Dashboard.connector';
import CustomViewConnect from 'connectors/CustomView.connector';
import ResourceConnect from 'connectors/Resource.connector';
import ManualJournalsViewTabs from 'containers/Accounting/ManualJournalsViewTabs';
import ManualJournalsDataTable from 'containers/Accounting/ManualJournalsDataTable';
import ManualJournalsActionsBar from 'containers/Accounting/ManualJournalActionsBar';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withManualJournalsActions from 'containers/Accounting/withManualJournalsActions';
import withViewsActions from 'containers/Views/withViewsActions';
import { compose } from 'utils';
/**
* Manual journals table.
*/
function ManualJournalsTable({
changePageTitle,
fetchResourceViews,
fetchManualJournalsTable,
requestFetchResourceViews,
requestFetchManualJournalsTable,
requestDeleteManualJournal,
requestPublishManualJournal,
requestDeleteBulkManualJournals,
addManualJournalsTableQueries
addManualJournalsTableQueries,
}) {
const history = useHistory();
const [deleteManualJournal, setDeleteManualJournal] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const [bulkDelete, setBulkDelete] = useState(false);
const fetchHook = useAsync(async () => {
await Promise.all([
fetchResourceViews('manual_journals'),
]);
const fetchViews = useQuery('journals-resource-views', () => {
return requestFetchResourceViews('manual_journals');
});
const fetchManualJournalsHook = useAsync(async () => {
return fetchManualJournalsTable();
});
const fetchManualJournals = useQuery('manual-journals-table', () =>
requestFetchManualJournalsTable());
useEffect(() => {
changePageTitle('Manual Journals');
@@ -89,13 +93,13 @@ function ManualJournalsTable({
// Handle filter change to re-fetch data-table.
const handleFilterChanged = useCallback(() => {
fetchManualJournalsHook.execute();
}, [fetchManualJournalsHook]);
fetchManualJournals.refetch();
}, [fetchManualJournals]);
// Handle view change to re-fetch data table.
const handleViewChanged = useCallback(() => {
fetchManualJournalsHook.execute();
}, [fetchManualJournalsHook]);
fetchManualJournals.refetch();
}, [fetchManualJournals]);
// Handle fetch data of manual jouranls datatable.
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
@@ -105,9 +109,7 @@ function ManualJournalsTable({
sort_order: sortBy[0].desc ? 'desc' : 'asc',
} : {},
});
fetchManualJournalsHook.execute();
}, [
fetchManualJournalsHook,
addManualJournalsTableQueries,
]);
@@ -123,7 +125,9 @@ function ManualJournalsTable({
}, [setSelectedRows]);
return (
<DashboardInsider loading={fetchHook.pending} name={'manual-journals'}>
<DashboardInsider
loading={fetchViews.isFetching || fetchManualJournals.isFetching}
name={'manual-journals'}>
<ManualJournalsActionsBar
onBulkDelete={handleBulkDelete}
selectedRows={selectedRows}
@@ -184,8 +188,7 @@ function ManualJournalsTable({
}
export default compose(
ManualJournalsConnect,
CustomViewConnect,
ResourceConnect,
DashboardConnect
withDashboardActions,
withManualJournalsActions,
withViewsActions,
)(ManualJournalsTable);

0
client/src/components/JournalEntry/ManualJournalsViewTabs.js → client/src/containers/Accounting/ManualJournalsViewTabs.js
View File

10
client/src/containers/Accounting/withJournalDetail.js Normal file
View File

@@ -0,0 +1,10 @@
import {connect} from 'react-redux';
import {
getManualJournal,
} from 'store/manualJournals/manualJournals.reducers';
export const mapStateToProps = (state, props) => ({
manualJournal: getManualJournal(state, props.manualJournalId),
});
export default connect(mapStateToProps);

14
client/src/containers/Accounting/withJournalsActions.js Normal file
View File

@@ -0,0 +1,14 @@
import {connect} from 'react-redux';
import {
makeJournalEntries,
fetchManualJournal,
editManualJournal,
} from 'store/manualJournals/manualJournals.actions';
export const mapDispatchToProps = (dispatch) => ({
requestMakeJournalEntries: (form) => dispatch(makeJournalEntries({ form })),
requestFetchManualJournal: (id) => dispatch(fetchManualJournal({ id })),
requestEditManualJournal: (id, form) => dispatch(editManualJournal({ id, form }))
});
export default connect(null, mapDispatchToProps);

9
client/src/containers/Accounting/withManualJournalDetail.js Normal file
View File

@@ -0,0 +1,9 @@
import { connect } from 'react-redux';
import t from 'store/types';
import { getManualJournal } from 'store/manualJournals/manualJournals.reducers';
const mapStateToProps = (state, props) => ({
manualJournal: getManualJournal(state, props.manualJournalId),
});
export default connect(mapStateToProps);

16
client/src/containers/Accounting/withManualJournals.js Normal file
View File

@@ -0,0 +1,16 @@
import { connect } from 'react-redux';
import { getResourceViews } from 'store/customViews/customViews.selectors';
import {
getManualJournalsItems,
} from 'store/manualJournals/manualJournals.selectors'
const mapStateToProps = (state, props) => ({
manualJournals: getManualJournalsItems(state, state.manualJournals.currentViewId),
manualJournalsViews: getResourceViews(state, 'manual_journals'),
manualJournalsItems: state.manualJournals.items,
manualJournalsTableQuery: state.manualJournals.tableQuery,
manualJournalsLoading: state.manualJournals.loading,
});
export default connect(mapStateToProps);

28
client/src/containers/Accounting/withManualJournalsActions.js Normal file
View File

@@ -0,0 +1,28 @@
import { connect } from 'react-redux';
import t from 'store/types';
import {
deleteManualJournal,
fetchManualJournalsTable,
publishManualJournal,
deleteBulkManualJournals,
fetchManualJournal,
} from 'store/manualJournals/manualJournals.actions';
const mapActionsToProps = (dispatch) => ({
requestDeleteManualJournal: (id) => dispatch(deleteManualJournal({ id })),
requestFetchManualJournalsTable: (query = {}) => dispatch(fetchManualJournalsTable({ query: { ...query } })),
requestFetchManualJournal: (id) => dispatch(fetchManualJournal({ id })),
requestPublishManualJournal: (id) => dispatch(publishManualJournal({ id })),
requestDeleteBulkManualJournals: (ids) => dispatch(deleteBulkManualJournals({ ids })),
changeCurrentView: (id) => dispatch({
type: t.MANUAL_JOURNALS_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
}),
addManualJournalsTableQueries: (queries) => dispatch({
type: t.MANUAL_JOURNALS_TABLE_QUERIES_ADD,
queries,
}),
});
export default connect(null, mapActionsToProps);

54
client/src/components/Accounts/AccountsActionsBar.js → client/src/containers/Accounts/AccountsActionsBar.js
View File

@@ -13,45 +13,50 @@ import {
Intent,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { connect } from 'react-redux';
import { useRouteMatch, useHistory } from 'react-router-dom';
import { If } from 'components';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import DialogConnect from 'connectors/Dialog.connector';
import AccountsConnect from 'connectors/Accounts.connector';
import {compose} from 'utils';
import FilterDropdown from 'components/FilterDropdown';
import ResourceConnect from 'connectors/Resource.connector';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
import withAccounts from 'containers/Accounts/withAccounts';
import {compose} from 'utils';
function AccountsActionsBar({
openDialog,
views,
selectedRows = [],
getResourceFields,
accountsViews,
resourceFields,
addAccountsTableQueries,
selectedRows = [],
onFilterChanged,
onBulkDelete,
onBulkArchive,
}) {
const history = useHistory();
const onClickNewAccount = () => { openDialog('account-form', {}); };
const accountsFields = getResourceFields('accounts');
const [filterCount, setFilterCount] = useState(0);
const onClickNewAccount = () => { openDialog('account-form', {}); };
const onClickViewItem = (view) => {
history.push(view
? `/dashboard/accounts/${view.id}/custom_view` :
'/dashboard/accounts');
? `/dashboard/accounts/${view.id}/custom_view` : '/dashboard/accounts');
};
const viewsMenuItems = views.map((view) => {
const viewsMenuItems = accountsViews.map((view) => {
return (<MenuItem onClick={() => onClickViewItem(view)} text={view.name} />);
});
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
const filterDropdown = FilterDropdown({
fields: accountsFields,
fields: resourceFields,
onFilterChange: (filterConditions) => {
setFilterCount(filterConditions.length || 0);
addAccountsTableQueries({
@@ -106,15 +111,13 @@ function AccountsActionsBar({
icon={ <Icon icon="filter" /> }/>
</Popover>
{hasSelectedRows && (
<If condition={hasSelectedRows}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='archive' iconSize={15} />}
text='Archive'
onClick={handleBulkArchive}
/>
)}
{hasSelectedRows && (
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
@@ -122,7 +125,8 @@ function AccountsActionsBar({
intent={Intent.DANGER}
onClick={handleBulkDelete}
/>
)}
</If>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
@@ -138,8 +142,16 @@ function AccountsActionsBar({
);
}
const mapStateToProps = (state, props) => ({
resourceName: 'accounts',
});
const withAccountsActionsBar = connect(mapStateToProps);
export default compose(
withAccountsActionsBar,
DialogConnect,
AccountsConnect,
ResourceConnect,
withAccounts,
withResourceDetail,
withAccountsTableActions,
)(AccountsActionsBar);

88
client/src/containers/Dashboard/Accounts/AccountsChart.js → client/src/containers/Accounts/AccountsChart.js
View File

@@ -3,29 +3,49 @@ import {
Route,
Switch,
} from 'react-router-dom';
import useAsync from 'hooks/async';
import { Alert, Intent } from '@blueprintjs/core';
import { useQuery } from 'react-query'
import AppToaster from 'components/AppToaster';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import AccountsViewsTabs from 'components/Accounts/AccountsViewsTabs';
import AccountsDataTable from 'components/Accounts/AccountsDataTable';
import DashboardActionsBar from 'components/Accounts/AccountsActionsBar';
import AccountsConnect from 'connectors/Accounts.connector';
import DashboardConnect from 'connectors/Dashboard.connector';
import CustomViewConnect from 'connectors/CustomView.connector';
import ResourceConnect from 'connectors/Resource.connector';
import AccountsViewsTabs from 'containers/Accounts/AccountsViewsTabs';
import AccountsDataTable from 'containers/Accounts/AccountsDataTable';
import DashboardActionsBar from 'containers/Accounts/AccountsActionsBar';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withResourceActions from 'containers/Resources/withResourcesActions';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
import withViewsActions from 'containers/Views/withViewsActions';
import withAccounts from 'containers/Accounts/withAccounts';
import { compose } from 'utils';
function AccountsChart({
// #withDashboard
changePageTitle,
// #withAccountsActions
requestDeleteAccount,
requestInactiveAccount,
fetchResourceViews,
fetchResourceFields,
// #withViewsActions
requestFetchResourceViews,
// #withResourceActions
requestFetchResourceFields,
// #withAccountsTableActions
requestFetchAccountsTable,
addAccountsTableQueries,
requestDeleteBulkAccounts,
addAccountsTableQueries,
// #withAccounts
accountsTableQuery,
}) {
const [deleteAccount, setDeleteAccount] = useState(false);
const [inactiveAccount, setInactiveAccount] = useState(false);
@@ -35,19 +55,16 @@ function AccountsChart({
const [tableLoading, setTableLoading] = useState(false);
// Fetch accounts resource views and fields.
const fetchHook = useAsync(async () => {
await Promise.all([
fetchResourceViews('accounts'),
fetchResourceFields('accounts'),
const fetchHook = useQuery('resource-accounts', () => {
return Promise.all([
requestFetchResourceViews('accounts'),
requestFetchResourceFields('accounts'),
]);
});
// Fetch accounts list according to the given custom view id.
const fetchAccountsHook = useAsync(async () => {
await Promise.all([
requestFetchAccountsTable(),
]);
}, false);
const fetchAccountsHook = useQuery(['accounts-table', accountsTableQuery],
() => requestFetchAccountsTable());
useEffect(() => {
changePageTitle('Chart of Accounts');
@@ -136,18 +153,20 @@ function AccountsChart({
// Refetches accounts data table when current custom view changed.
const handleFilterChanged = useCallback(() => {
fetchAccountsHook.execute();
fetchAccountsHook.refetch();
}, [fetchAccountsHook]);
// Refetch accounts data table when current custom view changed.
const handleViewChanged = useCallback(() => {
const handleViewChanged = useCallback(async () => {
setTableLoading(true);
fetchAccountsHook.execute().finally(() => {
setTableLoading(false);
});
}, [fetchAccountsHook]);
useEffect(() => {
if (tableLoading && !fetchAccountsHook.isFetching) {
setTableLoading(false);
}
}, [tableLoading, fetchAccountsHook.isFetching]);
// Handle fetch data of accounts datatable.
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
addAccountsTableQueries({
@@ -156,11 +175,13 @@ function AccountsChart({
sort_order: sortBy[0].desc ? 'desc' : 'asc',
} : {},
});
fetchAccountsHook.execute();
fetchAccountsHook.refetch();
}, [fetchAccountsHook, addAccountsTableQueries]);
return (
<DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>
<DashboardInsider
loading={fetchHook.isFetching}
name={'accounts-chart'}>
<DashboardActionsBar
selectedRows={selectedRows}
onFilterChanged={handleFilterChanged}
@@ -236,8 +257,11 @@ function AccountsChart({
}
export default compose(
AccountsConnect,
CustomViewConnect,
ResourceConnect,
DashboardConnect,
withAccountsActions,
withAccountsTableActions,
withViewsActions,
withResourceActions,
withDashboardActions,
withAccounts,
)(AccountsChart);

44
client/src/components/Accounts/AccountsDataTable.js → client/src/containers/Accounts/AccountsDataTable.js
View File

@@ -9,32 +9,34 @@ import {
Classes,
Tooltip,
} from '@blueprintjs/core';
import { useParams } from 'react-router-dom';
import Icon from 'components/Icon';
import { compose } from 'utils';
import AccountsConnect from 'connectors/Accounts.connector';
import DialogConnect from 'connectors/Dialog.connector';
import DashboardConnect from 'connectors/Dashboard.connector';
import ViewConnect from 'connectors/View.connector';
import LoadingIndicator from 'components/LoadingIndicator';
import DataTable from 'components/DataTable';
import Money from 'components/Money';
import { useUpdateEffect } from 'hooks';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withAccounts from 'containers/Accounts/withAccounts';
import {If} from 'components';
function AccountsDataTable({
loading,
// # withAccounts
accounts,
accountsLoading,
// # withDialog.
openDialog,
// own properties
loading,
onFetchData,
onSelectedRowsChange,
onDeleteAccount,
onInactiveAccount,
openDialog,
changeCurrentView,
changePageSubtitle,
getViewItem,
setTopbarEditView,
accountsLoading,
onFetchData,
onSelectedRowsChange
}) {
const [initialMount, setInitialMount] = useState(false);
@@ -147,9 +149,9 @@ function AccountsDataTable({
], [actionMenuList]);
const selectionColumn = useMemo(() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
minWidth: 50,
width: 50,
maxWidth: 50,
}), [])
const handleDatatableFetchData = useCallback((...params) => {
@@ -162,7 +164,11 @@ function AccountsDataTable({
return (
<LoadingIndicator loading={loading} mount={false}>
<If condition={loading}>
asdasdsadsa
</If>
<DataTable
noInitialFetch={true}
columns={columns}
data={accounts}
onFetchData={handleDatatableFetchData}
@@ -178,8 +184,8 @@ function AccountsDataTable({
}
export default compose(
AccountsConnect,
DialogConnect,
DashboardConnect,
ViewConnect
withDashboardActions,
withAccountsActions,
withAccounts,
)(AccountsDataTable);

85
client/src/components/Accounts/AccountsViewsTabs.js → client/src/containers/Accounts/AccountsViewsTabs.js
View File

@@ -9,38 +9,60 @@ import {
Tab,
Button
} from '@blueprintjs/core';
import { useParams } from 'react-router-dom';
import { useParams, withRouter } from 'react-router-dom';
import Icon from 'components/Icon';
import { Link } from 'react-router-dom';
import { compose } from 'utils';
import AccountsConnect from 'connectors/Accounts.connector';
import DashboardConnect from 'connectors/Dashboard.connector';
import {useUpdateEffect} from 'hooks';
import ViewConnect from 'connectors/View.connector';
import withDashboard from 'containers/Dashboard/withDashboard';
import withAccounts from 'containers/Accounts/withAccounts';
import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
import withViewDetail from 'containers/Views/withViewDetails';
function AccountsViewsTabs({
views,
setTopbarEditView,
customViewChanged,
// #withViewDetail
viewId,
viewItem,
// #withAccounts
accountsViews,
// #withAccountsTableActions
addAccountsTableQueries,
onViewChanged,
getViewItem,
changeCurrentView,
changeAccountsCurrentView,
// #withDashboard
setTopbarEditView,
changePageSubtitle,
// props
customViewChanged,
onViewChanged,
}) {
const history = useHistory();
const { custom_view_id: customViewId = null } = useParams();
useEffect(() => {
const viewMeta = getViewItem(customViewId);
changeCurrentView(customViewId || -1);
changeAccountsCurrentView(customViewId || -1);
setTopbarEditView(customViewId);
changePageSubtitle((customViewId && viewMeta) ? viewMeta.name : '');
changePageSubtitle((customViewId && viewItem) ? viewItem.name : '');
addAccountsTableQueries({
custom_view_id: customViewId,
});
return () => {
setTopbarEditView(null);
changePageSubtitle('');
changeAccountsCurrentView(null)
};
}, [customViewId]);
useUpdateEffect(() => {
onViewChanged && onViewChanged(customViewId);
}, [customViewId]);
// Clear page subtitle when unmount the page.
useEffect(() => () => { changePageSubtitle(''); }, []);
// Handle click a new view tab.
const handleClickNewView = () => {
@@ -53,19 +75,7 @@ function AccountsViewsTabs({
setTopbarEditView(customViewId);
};
useEffect(() => {
customViewChanged && customViewChanged(customViewId);
addAccountsTableQueries({
custom_view_id: customViewId,
});
}, [customViewId]);
useUpdateEffect(() => {
onViewChanged && onViewChanged(customViewId);
}, [customViewId]);
const tabs = views.map((view) => {
const tabs = accountsViews.map((view) => {
const baseUrl = '/dashboard/accounts';
const link = (
@@ -104,8 +114,19 @@ function AccountsViewsTabs({
);
}
const mapStateToProps = (state, ownProps) => ({
// Mapping view id from matched route params.
viewId: ownProps.match.params.custom_view_id,
});
const withAccountsViewsTabs = connect(mapStateToProps);
export default compose(
AccountsConnect,
DashboardConnect,
ViewConnect,
withRouter,
withAccountsViewsTabs,
withDashboard,
withAccounts,
withAccountsTableActions,
withViewDetail
)(AccountsViewsTabs);

10
client/src/containers/Accounts/withAccountDetail.js Normal file
View File

@@ -0,0 +1,10 @@
import { connect } from 'react-redux';
import {
getItemById
} from 'store/selectors';
const mapStateToProps = (state, props) => ({
account: getItemById(state.accounts.items, props.accountId),
});
export default connect(mapStateToProps);

19
client/src/containers/Accounts/withAccounts.js Normal file
View File

@@ -0,0 +1,19 @@
import { connect } from 'react-redux';
import {
getAccountsItems,
} from 'store/accounts/accounts.selectors';
import {
getResourceViews,
} from 'store/customViews/customViews.selectors';
const mapStateToProps = (state, props) => ({
accountsViews: getResourceViews(state, 'accounts'),
accounts: getAccountsItems(state, state.accounts.currentViewId),
accountsTypes: state.accounts.accountsTypes,
accountsTableQuery: state.accounts.tableQuery,
accountsLoading: state.accounts.loading,
accountErrors: state.accounts.errors,
});
export default connect(mapStateToProps);

22
client/src/containers/Accounts/withAccountsActions.js Normal file
View File

@@ -0,0 +1,22 @@
import { connect } from 'react-redux';
import {
fetchAccountTypes,
fetchAccountsList,
deleteAccount,
inactiveAccount,
submitAccount,
fetchAccount,
deleteBulkAccounts,
} from 'store/accounts/accounts.actions';
const mapActionsToProps = (dispatch) => ({
requestFetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
requestFetchAccountTypes: () => dispatch(fetchAccountTypes()),
requestSubmitAccount: ({ form }) => dispatch(submitAccount({ form })),
requestDeleteAccount: (id) => dispatch(deleteAccount({ id })),
requestInactiveAccount: (id) => dispatch(inactiveAccount({ id })),
requestFetchAccount: (id) => dispatch(fetchAccount({ id })),
requestDeleteBulkAccounts: (ids) => dispatch(deleteBulkAccounts({ ids })),
});
export default connect(null, mapActionsToProps);

24
client/src/containers/Accounts/withAccountsTableActions.js Normal file
View File

@@ -0,0 +1,24 @@
import { connect } from 'react-redux';
import t from 'store/types';
import {
fetchAccountsTable,
} from 'store/accounts/accounts.actions';
const mapActionsToProps = (dispatch) => ({
requestFetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
changeAccountsCurrentView: (id) => dispatch({
type: t.ACCOUNTS_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
}),
setAccountsTableQuery: (key, value) => dispatch({
type: 'ACCOUNTS_TABLE_QUERY_SET', key, value,
}),
addAccountsTableQueries: (queries) => dispatch({
type: 'ACCOUNTS_TABLE_QUERIES_ADD', queries,
}),
setSelectedRowsAccounts: (ids) => dispatch({
type: t.ACCOUNTS_SELECTED_ROWS_SET, payload: { ids },
}),
});
export default connect(null, mapActionsToProps);

7
client/src/containers/Authentication/InviteAccept.js
View File

@@ -5,7 +5,7 @@ import { useIntl } from 'react-intl';
import ErrorMessage from 'components/ErrorMessage';
import AppToaster from 'components/AppToaster';
import { compose } from 'utils';
import AuthenticationConnect from 'connectors/Authentication.connect';
import withAuthenticationActions from './withAuthenticationActions';
import { useParams } from 'react-router-dom';
import {
Button,
@@ -21,6 +21,7 @@ import AuthInsider from 'containers/Authentication/AuthInsider';
import { Link, useHistory } from 'react-router-dom';
import useAsync from 'hooks/async';
function Invite({
requestInviteAccept,
requestInviteMetaByToken,
@@ -224,4 +225,6 @@ function Invite({
);
}
export default compose(AuthenticationConnect)(Invite);
export default compose(
withAuthenticationActions,
)(Invite);

8
client/src/containers/Authentication/Login.js
View File

@@ -1,8 +1,7 @@
import React, { useEffect, useMemo, useState } from 'react';
import React, { useMemo, useState } from 'react';
import { Link, useHistory } from 'react-router-dom';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { connect } from 'react-redux';
import { useIntl } from 'react-intl';
import {
Button,
@@ -10,13 +9,12 @@ import {
Intent,
FormGroup,
Checkbox,
Position,
} from '@blueprintjs/core';
import Toaster from 'components/AppToaster';
import ErrorMessage from 'components/ErrorMessage';
import AuthInsider from 'containers/Authentication/AuthInsider';
import Icon from 'components/Icon';
import AuthenticationConnect from 'connectors/Authentication.connect';
import withAuthenticationActions from './withAuthenticationActions';
import { compose } from 'utils';
const ERRORS_TYPES = {
@@ -162,5 +160,5 @@ function Login({
}
export default compose(
AuthenticationConnect
withAuthenticationActions,
)(Login);

9
client/src/containers/Authentication/Register.js
View File

@@ -11,12 +11,13 @@ import {
} from '@blueprintjs/core';
import { Row, Col } from 'react-grid-system';
import { Link, useHistory } from 'react-router-dom';
import AuthenticationConnect from 'connectors/Authentication.connect';
import withAuthenticationActions from './withAuthenticationActions';
import ErrorMessage from 'components/ErrorMessage';
import AppToaster from 'components/AppToaster';
import AuthInsider from 'containers/Authentication/AuthInsider';
import { compose } from 'utils';
import Icon from 'components/Icon';
import { If } from 'components';
function Register({
requestRegister,
@@ -212,16 +213,16 @@ function Register({
</div>
</form>
{ isSubmitting && (
<If condition={isSubmitting}>
<div class="authentication-page__loading-overlay">
<Spinner size={50} />
</div>
)}
</If>
</div>
</AuthInsider>
);
}
export default compose(
AuthenticationConnect,
withAuthenticationActions,
)(Register);

5
client/src/containers/Authentication/ResetPassword.js
View File

@@ -13,9 +13,10 @@ import { Link, useParams, useHistory } from 'react-router-dom';
import ErrorMessage from 'components/ErrorMessage';
import AppToaster from 'components/AppToaster';
import { compose } from 'utils';
import AuthenticationConnect from 'connectors/Authentication.connect';
import withAuthenticationActions from './withAuthenticationActions';
import AuthInsider from 'containers/Authentication/AuthInsider';
function ResetPassword({
requestResetPassword,
}) {
@@ -131,5 +132,5 @@ function ResetPassword({
}
export default compose(
AuthenticationConnect,
withAuthenticationActions,
)(ResetPassword);

12
client/src/containers/Authentication/SendResetPassword.js
View File

@@ -5,12 +5,17 @@ import { useIntl } from 'react-intl';
import { Link, useHistory } from 'react-router-dom';
import { Button, InputGroup, Intent, FormGroup } from '@blueprintjs/core';
import { FormattedMessage } from 'react-intl';
import ErrorMessage from 'components/ErrorMessage';
import AuthenticationConnect from 'connectors/Authentication.connect';
import { compose } from 'utils';
import AppToaster from 'components/AppToaster';
import ErrorMessage from 'components/ErrorMessage';
import AuthInsider from 'containers/Authentication/AuthInsider';
import withAuthenticationActions from './withAuthenticationActions';
function SendResetPassword({
requestSendResetPassword,
}) {
@@ -65,6 +70,7 @@ function SendResetPassword({
});
},
});
return (
<AuthInsider>
<div class='reset-form'>
@@ -110,5 +116,5 @@ function SendResetPassword({
}
export default compose(
AuthenticationConnect,
withAuthenticationActions,
)(SendResetPassword);

5
client/src/connectors/Authentication.connect.js → client/src/containers/Authentication/withAuthenticationActions.js
View File

@@ -8,9 +8,6 @@ import {
} from 'store/authentication/authentication.actions';
import { connect } from 'react-redux';
const mapStateToProps = (state) => ({
});
const mapDispatchToProps = (dispatch) => ({
requestLogin: (form) => dispatch(login({ form })),
@@ -21,4 +18,4 @@ const mapDispatchToProps = (dispatch) => ({
requestInviteMetaByToken: (token) => dispatch(inviteMetaByToken({ token })),
});
export default connect(mapStateToProps, mapDispatchToProps);
export default connect(null, mapDispatchToProps);

24
client/src/containers/Dashboard/Items/ItemCategoryList.js
View File

@@ -1,24 +0,0 @@
import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import DashboardConnect from 'connectors/Dashboard.connector';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import CategoryList from 'components/Items/categoryList';
import ItemFormDialog from 'connectors/ItemFormDialog.connect';
import { compose } from 'utils';
const ItemCategoryList = ({ changePageTitle }) => {
const { id } = useParams();
useEffect(() => {
id
? changePageTitle('Edit Category Details')
: changePageTitle('Category List');
}, []);
return (
<DashboardInsider isLoading={null} name={'item-category-list'}>
<CategoryList />
</DashboardInsider>
);
};
export default compose(DashboardConnect, ItemFormDialog)(ItemCategoryList);

43
client/src/containers/Dashboard/Items/ItemForm.js
View File

@@ -1,43 +0,0 @@
import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useAsync } from 'react-use';
import DashboardConnect from 'connectors/Dashboard.connector';
import ItemForm from 'components/Items/ItemForm';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ItemsConnect from 'connectors/Items.connect';
import AccountsConnect from 'connectors/Accounts.connector';
import ItemCategoryConnect from 'connectors/ItemsCategory.connect';
import { compose } from 'utils';
const ItemFormContainer = ({
changePageTitle,
requestFetchAccounts,
requestFetchItemCategories,
}) => {
const { id } = useParams();
useEffect(() => {
id ?
changePageTitle('Edit Item Details') :
changePageTitle('New Item');
}, [id, changePageTitle]);
const fetchHook = useAsync(async () => {
await Promise.all([
requestFetchAccounts(),
requestFetchItemCategories(),
]);
});
return (
<DashboardInsider loading={fetchHook.loading} name={'item-form'}>
<ItemForm />
</DashboardInsider>
);
};
export default compose(
DashboardConnect,
ItemsConnect,
AccountsConnect,
ItemCategoryConnect,
)(ItemFormContainer);

102
client/src/containers/Dashboard/Items/ItemsCategoryList.js
View File

@@ -1,102 +0,0 @@
import React, { useEffect, useState, useCallback } from 'react';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import useAsync from 'hooks/async';
import { useParams } from 'react-router-dom';
import DashboardConnect from 'connectors/Dashboard.connector';
import ItemsCategoryConnect from 'connectors/ItemsCategory.connect';
import { compose } from 'utils';
import ItemsCategoryList from 'components/Items/ItemsCategoryList';
import ItemsCategoryActionsBar from './ItemsCategoryActionsBar';
import { Alert, Intent } from '@blueprintjs/core';
import AppToaster from 'components/AppToaster';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
const ItemCategoriesList = ({
changePageTitle,
views,
requestFetchItemCategories,
requestEditItemCategory,
requestDeleteItemCategory,
}) => {
const { id } = useParams();
const [deleteCategory, setDeleteCategory] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
useEffect(() => {
id
? changePageTitle('Edit Item Details')
: changePageTitle('Categories List');
}, [id, changePageTitle]);
const fetchHook = useAsync(async () => {
await Promise.all([
requestFetchItemCategories(),
]);
}, false);
const handelDeleteCategory = useCallback((category) => {
setDeleteCategory(category);
}, [setDeleteCategory]);
const handelEditCategory = category => {};
const handelCancelCategoryDelete = useCallback(() => {
setDeleteCategory(false);
}, [setDeleteCategory]);
const handelConfirmCategoryDelete = useCallback(() => {
requestDeleteItemCategory(deleteCategory.id).then(() => {
setDeleteCategory(false);
AppToaster.show({
message: 'the_category_has_been_delete'
});
});
}, [deleteCategory, requestDeleteItemCategory, setDeleteCategory]);
const handleFetchData = useCallback(() => {
fetchHook.execute();
}, []);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback((accounts) => {
setSelectedRows(accounts);
}, [setSelectedRows]);
return (
<DashboardInsider loading={fetchHook.pending} name="items-categories">
<ItemsCategoryActionsBar
views={views}
onDeleteCategory={handelDeleteCategory}
selectedRows={selectedRows}
/>
<DashboardPageContent>
<ItemsCategoryList
onDeleteCategory={handelDeleteCategory}
onFetchData={handleFetchData}
onEditCategory={handelEditCategory}
onSelectedRowsChange={handleSelectedRowsChange}
/>
<Alert
cancelButtonText='Cancel'
confirmButtonText='Move to Trash'
icon='trash'
intent={Intent.DANGER}
isOpen={deleteCategory}
onCancel={handelCancelCategoryDelete}
onConfirm={handelConfirmCategoryDelete}
>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be
able to restore it later, but it will become private to you.
</p>
</Alert>
</DashboardPageContent>
</DashboardInsider>
);
};
export default compose(
DashboardConnect,
ItemsCategoryConnect
)(ItemCategoriesList);

101
client/src/containers/Dashboard/Views/ViewFormPage.js
View File

@@ -1,101 +0,0 @@
import React, {useEffect, useState, useCallback} from 'react';
import { useAsync } from 'react-use';
import { useParams, useHistory } from 'react-router-dom';
import { Intent, Alert } from '@blueprintjs/core';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import ViewForm from 'components/Views/ViewForm';
import DashboardConnect from 'connectors/Dashboard.connector';
import ResourceConnect from 'connectors/Resource.connector';
import ViewConnect from 'connectors/View.connector';
import {compose} from 'utils';
import AppToaster from 'components/AppToaster';
function ViewFormPage({
changePageTitle,
fetchResourceFields,
fetchResourceColumns,
fetchView,
getResourceColumns,
getResourceFields,
submitView,
getViewMeta,
deleteView,
}) {
const { resource_slug: resourceSlug, view_id: viewId } = useParams();
const columns = getResourceColumns('accounts');
const fields = getResourceFields('accounts');
const viewForm = (viewId) ? getViewMeta(viewId) : null;
const [stateDeleteView, setStateDeleteView] = useState(null);
useEffect(() => {
if (viewId) {
changePageTitle('Edit Custom View');
} else {
changePageTitle('New Custom View');
}
}, [viewId, changePageTitle]);
const fetchHook = useAsync(async () => {
await Promise.all([
fetchResourceColumns('accounts'),
fetchResourceFields('accounts'),
...(viewId) ? [
fetchView(viewId),
] : [],
]);
}, []);
const handleDeleteView = useCallback((view) => {
setStateDeleteView(view);
}, []);
const handleCancelDeleteView = useCallback(() => {
setStateDeleteView(null);
}, []);
const handleConfirmDeleteView = useCallback(() => {
deleteView(stateDeleteView.id).then((response) => {
setStateDeleteView(null);
AppToaster.show({
message: 'the_custom_view_has_been_deleted',
});
})
}, [deleteView, stateDeleteView]);
return (
<DashboardInsider name={'view-form'} loading={fetchHook.loading} mount={false}>
<DashboardPageContent>
<ViewForm
resourceName={resourceSlug}
columns={columns}
fields={fields}
viewForm={viewForm}
onDelete={handleDeleteView} />
<Alert
cancelButtonText="Cancel"
confirmButtonText="Move to Trash"
icon="trash"
intent={Intent.DANGER}
isOpen={stateDeleteView}
onCancel={handleCancelDeleteView}
onConfirm={handleConfirmDeleteView}>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
but it will become private to you.
</p>
</Alert>
</DashboardPageContent>
</DashboardInsider>
);
}
export default compose(
DashboardConnect,
ResourceConnect,
ViewConnect,
)(ViewFormPage);

27
client/src/containers/Dashboard/withDashboard.js Normal file
View File

@@ -0,0 +1,27 @@
import { connect } from 'react-redux';
import t from 'store/types';
const mapActionsToProps = (dispatch) => ({
changePageTitle: (pageTitle) => dispatch({
type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
}),
changePageSubtitle: (pageSubtitle) => dispatch({
type: t.ALTER_DASHBOARD_PAGE_SUBTITLE, pageSubtitle,
}),
setTopbarEditView: (id) => dispatch({
type: t.SET_TOPBAR_EDIT_VIEW, id,
}),
setDashboardRequestLoading: () => dispatch({
type: t.SET_DASHBOARD_REQUEST_LOADING,
}),
setDashboardRequestCompleted: () => dispatch({
type: t.SET_DASHBOARD_REQUEST_COMPLETED,
}),
});
export default connect(null, mapActionsToProps);

30
client/src/containers/Dialogs/AccountFormDialog.container.js Normal file
View File

@@ -0,0 +1,30 @@
import {connect} from 'react-redux';
import { compose } from 'utils';
import DialogConnect from 'connectors/Dialog.connector';
import DialogReduxConnect from 'components/DialogReduxConnect';
import {getDialogPayload} from 'store/dashboard/dashboard.reducer';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withAccountDetail from 'containers/Accounts/withAccountDetail';
import withAccounts from 'containers/Accounts/withAccounts';
export const mapStateToProps = (state, props) => {
const dialogPayload = getDialogPayload(state, 'account-form');
return {
name: 'account-form',
payload: {action: 'new', id: null, ...dialogPayload},
accountId: dialogPayload?.id || null,
};
};
const AccountFormDialogConnect = connect(mapStateToProps);
export default compose(
AccountFormDialogConnect,
withAccountsActions,
withAccountDetail,
withAccounts,
DialogReduxConnect,
DialogConnect,
);

89
client/src/containers/Dashboard/Dialogs/AccountFormDialog.js → client/src/containers/Dialogs/AccountFormDialog.js
View File

@@ -15,31 +15,40 @@ import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useIntl } from 'react-intl';
import { omit } from 'lodash';
import { compose } from 'utils';
import useAsync from 'hooks/async';
import { useQuery, queryCache } from 'react-query';
import Dialog from 'components/Dialog';
import AppToaster from 'components/AppToaster';
import DialogConnect from 'connectors/Dialog.connector';
import DialogReduxConnect from 'components/DialogReduxConnect';
import AccountFormDialogConnect from 'connectors/AccountFormDialog.connector';
import AccountsConnect from 'connectors/Accounts.connector';
import AccountFormDialogContainer from 'containers/Dialogs/AccountFormDialog.container';
import classNames from 'classnames';
import Icon from 'components/Icon';
import ErrorMessage from 'components/ErrorMessage';
import { fetchAccountTypes } from 'store/accounts/accounts.actions';
function AccountFormDialog({
name,
payload,
isOpen,
// #withAccounts
accountsTypes,
accounts,
// #withAccountDetail
account,
// #withAccountsActions
requestFetchAccounts,
requestFetchAccountTypes,
requestFetchAccount,
closeDialog,
requestSubmitAccount,
requestEditAccount,
getAccountById,
// #withDialog
closeDialog,
}) {
const intl = useIntl();
const accountFormValidationSchema = Yup.object().shape({
@@ -63,10 +72,6 @@ function AccountFormDialog({
accounts.find(a => a.id === payload.id) : null,
);
const editAccount = useMemo(() =>
payload.action === 'edit' ? getAccountById(payload.id) : null,
[payload, getAccountById]);
const transformApiErrors = (errors) => {
const fields = {};
if (errors.find(e => e.type === 'NOT_UNIQUE_CODE')) {
@@ -79,8 +84,7 @@ function AccountFormDialog({
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...(payload.action === 'edit' && editAccount)
? editAccount : initialValues,
...(payload.action === 'edit' && account) ? account : initialValues,
},
validationSchema: accountFormValidationSchema,
onSubmit: (values, { setSubmitting, setErrors }) => {
@@ -97,12 +101,13 @@ function AccountFormDialog({
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.refetchQueries('accounts-table', { force: true });
}).catch((errors) => {
setSubmitting(false);
setErrors(transformApiErrors(errors));
});
} else {
requestSubmitAccount({ form: { ...omit(values, exclude) } }).then(response => {
requestSubmitAccount({ form: { ...omit(values, exclude) } }).then((response) => {
closeDialog(name);
AppToaster.show({
message: 'the_account_has_been_submit',
@@ -110,6 +115,7 @@ function AccountFormDialog({
position: Position.BOTTOM,
});
setSubmitting(false);
queryCache.refetchQueries('accounts-table', { force: true });
}).catch((errors) => {
setSubmitting(false);
setErrors(transformApiErrors(errors));
@@ -121,13 +127,13 @@ function AccountFormDialog({
// Set default account type.
useEffect(() => {
if (editAccount && editAccount.account_type_id) {
if (account && account.account_type_id) {
const defaultType = accountsTypes.find((t) =>
t.id === editAccount.account_type_id);
t.id === account.account_type_id);
defaultType && setSelectedAccountType(defaultType);
}
}, [editAccount, accountsTypes]);
}, [account, accountsTypes]);
// Filters accounts types items.
const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
@@ -168,18 +174,32 @@ function AccountFormDialog({
// Handles dialog close.
const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
const fetchHook = useAsync(async () => {
await Promise.all([
requestFetchAccounts(),
requestFetchAccountTypes(),
// Fetch the target in case edit mode.
...(payload.action === 'edit' ?
[requestFetchAccount(payload.id)] : [])
]);
}, false);
// Fetches accounts list.
const fetchAccountsList = useQuery('accounts-list',
() => requestFetchAccounts(), { manual: true });
// Fetches accounts types.
const fetchAccountsTypes = useQuery('accounts-types-list', async () => {
await requestFetchAccountTypes();
}, { manual: true });
// Fetch the given account id on edit mode.
const fetchAccount = useQuery(
payload.action === 'edit' && ['account', payload.id],
(key, id) => requestFetchAccount(id),
{ manual: true });
const isFetching = (
fetchAccountsList.isFetching ||
fetchAccountTypes.isFetching ||
fetchAccount.isFetching);
// Fetch requests on dialog opening.
const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
const onDialogOpening = useCallback(() => {
fetchAccountsList.refetch();
fetchAccountsTypes.refetch();
fetchAccount.refetch();
}, []);
const onChangeAccountType = useCallback((accountType) => {
setSelectedAccountType(accountType);
@@ -211,7 +231,7 @@ function AccountFormDialog({
name={name}
title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
className={{
'dialog--loading': fetchHook.pending,
'dialog--loading': isFetching,
'dialog--account-form': true
}}
autoFocus={true}
@@ -219,7 +239,7 @@ function AccountFormDialog({
onClosed={onDialogClosed}
onOpening={onDialogOpening}
isOpen={isOpen}
isLoading={fetchHook.pending}
isLoading={isFetching}
onClose={handleClose}
>
<form onSubmit={formik.handleSubmit}>
@@ -350,9 +370,6 @@ function AccountFormDialog({
);
}
export default compose(
AccountFormDialogConnect,
AccountsConnect,
DialogReduxConnect,
DialogConnect
)(AccountFormDialog);
export default AccountFormDialogContainer(
AccountFormDialog,
);

0
client/src/containers/Dashboard/Dialogs/CurrencyDialog.js → client/src/containers/Dialogs/CurrencyDialog.js
View File

0
client/src/containers/Dashboard/Dialogs/ExportDialog.js → client/src/containers/Dialogs/ExportDialog.js
View File

0
client/src/containers/Dashboard/Dialogs/ImportDialog.js → client/src/containers/Dialogs/ImportDialog.js
View File

0
client/src/containers/Dashboard/Dialogs/InviteUserDialog.js → client/src/containers/Dialogs/InviteUserDialog.js
View File

82
client/src/containers/Dashboard/Dialogs/ItemCategoryDialog.js → client/src/containers/Dialogs/ItemCategoryDialog.js
View File

@@ -14,31 +14,52 @@ import * as Yup from 'yup';
import { useIntl } from 'react-intl';
import { useFormik } from 'formik';
import { compose } from 'utils';
import Dialog from 'components/Dialog';
import useAsync from 'hooks/async';
import { useQuery } from 'react-query';
import classNames from 'classnames';
import AppToaster from 'components/AppToaster';
import ErrorMessage from 'components/ErrorMessage';
import Dialog from 'components/Dialog';
import DialogConnect from 'connectors/Dialog.connector';
import DialogReduxConnect from 'components/DialogReduxConnect';
import ItemsCategoryConnect from 'connectors/ItemsCategory.connect';
import ErrorMessage from 'components/ErrorMessage';
import classNames from 'classnames';
import {connect} from 'react-redux';
import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
import withItemCategoryDetail from 'containers/Items/withItemCategoryDetail';
import withItemCategories from 'containers/Items/withItemCategories';
import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
import Icon from 'components/Icon';
function ItemCategoryDialog({
name,
payload,
isOpen,
// #withDialog
openDialog,
closeDialog,
categories,
// #withItemCategoryDetail
itemCategoryId,
itemCategory,
// #withItemCategories
categoriesList,
// #withItemCategoriesActions
requestSubmitItemCategory,
requestFetchItemCategories,
requestEditItemCategory,
editItemCategory
}) {
const [selectedParentCategory, setParentCategory] = useState(null);
const intl = useIntl();
const fetchList = useQuery(['items-categories-list'],
() => requestFetchItemCategories());
const ValidationSchema = Yup.object().shape({
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
parent_category_id: Yup.string().nullable(),
@@ -51,12 +72,12 @@ function ItemCategoryDialog({
parent_category_id: null
}), []);
//Formik
// Formik
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...(payload.action === 'edit' &&
pick(editItemCategory, Object.keys(initialValues)))
pick(itemCategory, Object.keys(initialValues)))
},
validationSchema: ValidationSchema,
onSubmit: (values, { setSubmitting }) => {
@@ -104,15 +125,13 @@ function ItemCategoryDialog({
);
}, []);
// Handle the dialog closing.
const handleClose = useCallback(() => { closeDialog(name); }, [name, closeDialog]);
const fetchHook = useAsync(async () => {
await Promise.all([
requestFetchItemCategories(),
]);
}, false);
const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
// Handle the dialog opening.
const onDialogOpening = useCallback(() => {
fetchList.refetch();
}, [fetchList]);
const onChangeParentCategory = useCallback((parentCategory) => {
setParentCategory(parentCategory);
@@ -132,14 +151,14 @@ function ItemCategoryDialog({
name={name}
title={payload.action === 'edit' ? 'Edit Category' : ' New Category'}
className={classNames({
'dialog--loading': fetchHook.pending,
'dialog--loading': fetchList.isFetching,
},
'dialog--category-form',
)}
isOpen={isOpen}
onClosed={onDialogClosed}
onOpening={onDialogOpening}
isLoading={fetchHook.pending}
isLoading={fetchList.isFetching}
onClose={handleClose}
>
<form onSubmit={formik.handleSubmit}>
@@ -172,7 +191,7 @@ function ItemCategoryDialog({
intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
>
<Select
items={Object.values(categories)}
items={categoriesList}
noResults={<MenuItem disabled={true} text='No results.' />}
itemRenderer={parentCategoryItem}
itemPredicate={filterItemCategory}
@@ -214,8 +233,25 @@ function ItemCategoryDialog({
);
}
export default compose(
ItemsCategoryConnect,
const mapStateToProps = (state, props) => {
const dialogPayload = getDialogPayload(state, 'item-category-form');
return {
name: 'account-form',
payload: {action: 'new', id: null, ...dialogPayload},
itemCategoryId: dialogPayload?.id || null,
};
};
const withItemCategoryDialog = connect(mapStateToProps);
export default compose(
DialogConnect,
DialogReduxConnect
DialogReduxConnect,
withItemCategoryDialog,
withItemCategoryDetail,
withItemCategories,
withItemCategoriesActions
)(ItemCategoryDialog);

0
client/src/containers/Dashboard/Dialogs/ItemFromDialog.js → client/src/containers/Dialogs/ItemFromDialog.js
View File

0
client/src/containers/Dashboard/Dialogs/UserFormDialog.js → client/src/containers/Dialogs/UserFormDialog.js
View File

3
client/src/containers/Dashboard/Expenses/ExpenseForm.js → client/src/containers/Expenses/ExpenseForm.js
View File

@@ -32,8 +32,7 @@ function ExpenseFormContainer({
});
return (
<DashboardInsider isLoading={fetchHook.loading} name={'expense-form'}>
<ExpenseForm {...{submitExpense, editExpense, accounts, currencies} } />
<ExpenseForm {...{submitExpense, editExpense, accounts, currencies} } />
</DashboardInsider>
);
}

0
client/src/containers/Dashboard/Expenses/ExpensesList.js → client/src/containers/Expenses/ExpensesList.js
View File

0
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheet.js → client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
View File

0
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js → client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js
View File

4
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetHeader.js → client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetHeader.js
View File

@@ -1,5 +1,5 @@
import React, {useMemo, useCallback} from 'react';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import {Row, Col} from 'react-grid-system';
import {
Button,
@@ -12,7 +12,7 @@ import moment from 'moment';
import Icon from 'components/Icon';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import SelectDisplayColumnsBy from '../SelectDisplayColumnsBy';
import RadiosAccountingBasis from '../RadiosAccountingBasis';

0
client/src/containers/Dashboard/FinancialStatements/BalanceSheet/BalanceSheetTable.js → client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
View File

0
client/src/containers/Dashboard/FinancialStatements/FinancialStatementDateRange.js → client/src/containers/FinancialStatements/FinancialStatementDateRange.js
View File

0
client/src/containers/Dashboard/FinancialStatements/FinancialStatementHeader.js → client/src/containers/FinancialStatements/FinancialStatementHeader.js
View File

2
client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedger.js → client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useCallback, useState, useMemo } from 'react';
import moment from 'moment';
import GeneralLedgerTable from 'containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerTable';
import GeneralLedgerTable from 'containers/FinancialStatements/GeneralLedger/GeneralLedgerTable';
import useAsync from 'hooks/async';
import DashboardConnect from 'connectors/Dashboard.connector';
import GeneralLedgerConnect from 'connectors/GeneralLedgerSheet.connect';

0
client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js → client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js
View File

4
client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js → client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerHeader.js
View File

@@ -1,5 +1,5 @@
import React, {useState, useMemo, useEffect, useCallback} from 'react';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import {useIntl} from 'react-intl';
import {
Button,
@@ -15,7 +15,7 @@ import AccountsConnect from 'connectors/Accounts.connector'
import classNames from 'classnames';
import AccountsMultiSelect from 'components/AccountsMultiSelect';
import {useFormik} from 'formik';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import * as Yup from 'yup';
import RadiosAccountingBasis from '../RadiosAccountingBasis';

0
client/src/containers/Dashboard/FinancialStatements/GeneralLedger/GeneralLedgerTable.js → client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js
View File

2
client/src/containers/Dashboard/FinancialStatements/Journal/Journal.js → client/src/containers/FinancialStatements/Journal/Journal.js
View File

@@ -1,7 +1,7 @@
import React, {useState, useCallback, useEffect, useMemo} from 'react';
import {compose} from 'utils';
import JournalConnect from 'connectors/Journal.connect';
import JournalHeader from 'containers/Dashboard/FinancialStatements/Journal/JournalHeader';
import JournalHeader from 'containers/FinancialStatements/Journal/JournalHeader';
import useAsync from 'hooks/async';
import {useIntl} from 'react-intl';
import moment from 'moment';

0
client/src/containers/Dashboard/FinancialStatements/Journal/JournalActionsBar.js → client/src/containers/FinancialStatements/Journal/JournalActionsBar.js
View File

4
client/src/containers/Dashboard/FinancialStatements/Journal/JournalHeader.js → client/src/containers/FinancialStatements/Journal/JournalHeader.js
View File

@@ -8,8 +8,8 @@ import moment from 'moment';
import {useFormik} from 'formik';
import {useIntl} from 'react-intl';
import * as Yup from 'yup';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
export default function JournalHeader({

0
client/src/containers/Dashboard/FinancialStatements/Journal/JournalTable.js → client/src/containers/FinancialStatements/Journal/JournalTable.js
View File

0
client/src/containers/Dashboard/FinancialStatements/LedgerSheet.js → client/src/containers/FinancialStatements/LedgerSheet.js
View File

0
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet.js → client/src/containers/FinancialStatements/ProfitLossSheet.js
View File

0
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js → client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
View File

0
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js → client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
View File

4
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js → client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetHeader.js
View File

@@ -7,8 +7,8 @@ import moment from 'moment';
import {useFormik} from 'formik';
import {useIntl} from 'react-intl';
import * as Yup from 'yup';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import SelectsListColumnsBy from '../SelectDisplayColumnsBy';
import RadiosAccountingBasis from '../RadiosAccountingBasis';

0
client/src/containers/Dashboard/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js → client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
View File

0
client/src/containers/Dashboard/FinancialStatements/RadiosAccountingBasis.js → client/src/containers/FinancialStatements/RadiosAccountingBasis.js
View File

0
client/src/containers/Dashboard/FinancialStatements/SelectDisplayColumnsBy.js → client/src/containers/FinancialStatements/SelectDisplayColumnsBy.js
View File

0
client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js → client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js
View File

0
client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js → client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
View File

4
client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js → client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
View File

@@ -1,5 +1,5 @@
import React, {useState, useCallback, useMemo} from 'react';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
import {Row, Col} from 'react-grid-system';
import {
Button,
@@ -17,7 +17,7 @@ import {useIntl} from 'react-intl';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import Icon from 'components/Icon';
import FinancialStatementDateRange from 'containers/Dashboard/FinancialStatements/FinancialStatementDateRange';
import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
export default function TrialBalanceSheetHeader({
pageFilter,

0
client/src/containers/Dashboard/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js → client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
View File

0
client/src/containers/Dashboard/GeneralSearch/Search.js → client/src/containers/GeneralSearch/Search.js
View File

1
client/src/containers/Dashboard/Homepage.js → client/src/containers/Homepage/Homepage.js
View File

@@ -16,4 +16,5 @@ const mapActionsToProps = (dispatch) => ({
type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
}),
});
export default connect(null, mapActionsToProps)(DashboardHomepage);

53
client/src/containers/Items/ItemCategoriesList.js Normal file
View File

@@ -0,0 +1,53 @@
import React, { useEffect, useState, useCallback } from 'react';
import { useParams } from 'react-router-dom';
import useAsync from 'hooks/async';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
import withItemCategories from 'containers/Items/withItemCategories';
import { compose } from 'utils';
const ItemCategoryList = ({
changePageTitle,
requestFetchItemCategories,
}) => {
const { id } = useParams();
const [selectedRows, setSelectedRows] = useState([]);
useEffect(() => {
id
? changePageTitle('Edit Category Details')
: changePageTitle('Category List');
}, []);
const fetchCategories = useAsync(() => {
return Promise.all([
requestFetchItemCategories(),
]);
});
const handleFilterChanged = useCallback(() => {
}, []);
return (
<DashboardInsider name={'item-category-list'}>
<ItemsCategoryActionsBar
onFilterChanged={handleFilterChanged}
selectedRows={selectedRows} />
<ItemCategoriesDataTable />
</DashboardInsider>
);
};
export default compose(
withDashboardActions,
withItemCategoriesActions,
withItemCategories,
)(ItemCategoryList);

0
client/src/components/Items/ItemsCategoryList.js → client/src/containers/Items/ItemCategoriesTable.js
View File

4
client/src/components/Items/ItemForm.js → client/src/containers/Items/ItemForm.js
View File

@@ -188,6 +188,8 @@ const ItemForm = ({
});
}, [setDeletedFiles, deletedFiles]);
const handleCancelClickBtn = () => { history.goBack(); };
return (
<div class='item-form'>
<form onSubmit={handleSubmit}>
@@ -442,7 +444,7 @@ const ItemForm = ({
</Button>
<Button className={'ml1'}>Save as Draft</Button>
<Button className={'ml1'} onClick={'handleClose'}>Close</Button>
<Button className={'ml1'} onClick={handleCancelClickBtn}>Close</Button>
</div>
</form>
</div>

52
client/src/containers/Items/ItemFormPage.js Normal file
View File

@@ -0,0 +1,52 @@
import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery } from 'react-query';
import ItemForm from 'containers/Items/ItemForm';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import withDashboard from 'containers/Dashboard/withDashboard';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
import { compose } from 'utils';
const ItemFormContainer = ({
// #withDashboard
changePageTitle,
// #withAccountsActions
requestFetchAccounts,
// #withItemCategoriesActions
requestFetchItemCategories,
}) => {
const { id } = useParams();
useEffect(() => {
id ?
changePageTitle('Edit Item Details') :
changePageTitle('New Item');
}, [id, changePageTitle]);
const fetchAccounts = useQuery('accounts-list',
(key) => requestFetchAccounts());
const fetchCategories = useQuery('item-categories-list',
(key) => requestFetchItemCategories());
return (
<DashboardInsider
loading={fetchAccounts.isFetching || fetchCategories.isFetching}
name={'item-form'}>
<ItemForm />
</DashboardInsider>
);
};
export default compose(
withDashboard,
withAccountsActions,
withItemCategoriesActions,
)(ItemFormContainer);

40
client/src/containers/Dashboard/Items/ItemsActionsBar.js → client/src/containers/Items/ItemsActionsBar.js
View File

@@ -1,8 +1,6 @@
import React, { useMemo, useCallback, useState } from 'react';
import { useRouteMatch, useHistory } from 'react-router-dom';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import { compose } from 'utils';
import classNames from 'classnames';
import {
MenuItem,
Popover,
@@ -15,43 +13,42 @@ import {
Classes,
Intent,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { compose } from 'utils';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import Icon from 'components/Icon';
import DashboardConnect from 'connectors/Dashboard.connector';
import ResourceConnect from 'connectors/Resource.connector';
import FilterDropdown from 'components/FilterDropdown';
import ItemsConnect from 'connectors/Items.connect';
import DialogConnect from 'connectors/Dialog.connector';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withItems from 'containers/Items/withItems';
import { If } from 'components';
const ItemsActionsBar = ({
openDialog,
getResourceFields,
getResourceViews,
views,
resourceName = 'items',
resourceFields,
itemsViews,
onFilterChanged,
addItemsTableQueries,
selectedRows = [],
}) => {
const { path } = useRouteMatch();
const history = useHistory();
const [filterCount, setFilterCount] = useState(0);
const viewsMenuItems = views.map(view =>
const viewsMenuItems = itemsViews.map(view =>
(<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />));
const onClickNewItem = () => {
history.push('/dashboard/items/new');
};
const itemsFields = getResourceFields('items');
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
const filterDropdown = FilterDropdown({
fields: itemsFields,
fields: resourceFields,
onFilterChange: (filterConditions) => {
setFilterCount(filterConditions.length);
addItemsTableQueries({
filter_roles: filterConditions || '',
});
onFilterChanged && onFilterChanged(filterConditions);
}
});
@@ -105,14 +102,14 @@ const ItemsActionsBar = ({
/>
</Popover>
{hasSelectedRows && (
<If condition={hasSelectedRows}>
<Button
className={Classes.MINIMAL}
intent={Intent.DANGER}
icon={<Icon icon='trash' />}
text='Delete'
/>
)}
</If>
<Button
className={Classes.MINIMAL}
@@ -131,7 +128,6 @@ const ItemsActionsBar = ({
export default compose(
DialogConnect,
DashboardConnect,
ResourceConnect,
ItemsConnect
withItems,
withResourceDetail,
)(ItemsActionsBar);

34
client/src/containers/Dashboard/Items/ItemsCategoryActionsBar.js → client/src/containers/Items/ItemsCategoryActionsBar.js
View File

@@ -11,19 +11,24 @@ import {
PopoverInteractionKind,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { If } from 'components';
import Icon from 'components/Icon';
import DashboardConnect from 'connectors/Dashboard.connector';
import ItemsCategoryConnect from 'connectors/ItemsCategory.connect';
import DialogConnect from 'connectors/Dialog.connector';
import FilterDropdown from 'components/FilterDropdown';
import ResourceConnect from 'connectors/Resource.connector';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import withDashboard from 'containers/Dashboard/withDashboard';
const ItemsCategoryActionsBar = ({
resourceName = 'item_category',
resourceFields,
openDialog,
onDeleteCategory,
onFilterChanged,
getResourceFields,
selectedRows,
}) => {
const onClickNewCategory = useCallback(() => {
@@ -34,11 +39,10 @@ const ItemsCategoryActionsBar = ({
onDeleteCategory(selectedRows);
}, [selectedRows, onDeleteCategory]);
const categoriesFields = getResourceFields('itemCategories');
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [selectedRows]);
const filterDropdown = FilterDropdown({
fields: categoriesFields,
fields: resourceFields,
onFilterChange: (filterConditions) => {
onFilterChanged && onFilterChanged(filterConditions);
},
@@ -53,6 +57,7 @@ const ItemsCategoryActionsBar = ({
onClick={onClickNewCategory}
/>
<Popover
minimal={true}
content={filterDropdown}
interactionKind={PopoverInteractionKind.CLICK}
position={Position.BOTTOM_LEFT}
@@ -64,7 +69,7 @@ const ItemsCategoryActionsBar = ({
/>
</Popover>
{ hasSelectedRows && (
<If condition={hasSelectedRows}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
@@ -72,7 +77,8 @@ const ItemsCategoryActionsBar = ({
intent={Intent.DANGER}
onClick={handleDeleteCategory}
/>
)}
</If>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
@@ -88,9 +94,15 @@ const ItemsCategoryActionsBar = ({
);
};
const mapStateToProps = (state, props) => ({
resourceName: 'items_categories',
});
const withItemsCategoriesActionsBar = connect(mapStateToProps);
export default compose(
withItemsCategoriesActionsBar,
DialogConnect,
DashboardConnect,
ItemsCategoryConnect,
ResourceConnect
withDashboard,
withResourceDetail
)(ItemsCategoryActionsBar);

31
client/src/containers/Dashboard/Items/ItemsDataTable.js → client/src/containers/Items/ItemsDataTable.js
View File

@@ -7,17 +7,21 @@ import {
MenuDivider,
Position,
} from '@blueprintjs/core'
import CustomViewConnect from 'connectors/View.connector';
import ItemsConnect from 'connectors/Items.connect';
import {compose} from 'utils';
import DataTable from 'components/DataTable';
import Icon from 'components/Icon';
import Money from 'components/Money';
import withItems from 'containers/Items/withItems';
import LoadingIndicator from 'components/LoadingIndicator';
const ItemsDataTable = ({
loading,
itemsTableLoading,
currentPageItems,
itemsCurrentPage,
// props
onEditItem,
onDeleteItem,
onFetchData,
@@ -112,18 +116,19 @@ const ItemsDataTable = ({
}, [onSelectedRowsChange]);
return (
<DataTable
columns={columns}
data={currentPageItems}
selectionColumn={selectionColumn}
onFetchData={handleFetchData}
loading={itemsTableLoading && !initialMount}
noInitialFetch={true}
onSelectedRowsChange={handleSelectedRowsChange} />
<LoadingIndicator loading={loading} mount={false}>
<DataTable
columns={columns}
data={itemsCurrentPage}
selectionColumn={selectionColumn}
onFetchData={handleFetchData}
loading={itemsTableLoading && !initialMount}
noInitialFetch={true}
onSelectedRowsChange={handleSelectedRowsChange} />
</LoadingIndicator>
);
};
export default compose(
ItemsConnect,
CustomViewConnect,
withItems,
)(ItemsDataTable);

85
client/src/containers/Dashboard/Items/ItemsList.js → client/src/containers/Items/ItemsList.js
View File

@@ -8,47 +8,58 @@ import {
Alert,
} from '@blueprintjs/core';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import useAsync from 'hooks/async';
import ItemsActionsBar from 'containers/Dashboard/Items/ItemsActionsBar';
import { useQuery } from 'react-query';
import ItemsActionsBar from 'containers/Items/ItemsActionsBar';
import { compose } from 'utils';
import ItemsDataTable from './ItemsDataTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import ResourceConnect from 'connectors/Resource.connector';
import DashboardConnect from 'connectors/Dashboard.connector';
import ItemsConnect from 'connectors/Items.connect';
import CustomViewsConnect from 'connectors/CustomView.connector'
import ItemsViewsTabs from 'containers/Dashboard/Items/ItemsViewsTabs';
import ItemsViewsTabs from 'containers/Items/ItemsViewsTabs';
import AppToaster from 'components/AppToaster';
import withItems from 'containers/Items/withItems';
import withResourceActions from 'containers/Resources/withResourcesActions';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withItemsActions from 'containers/Items/withItemsActions';
import withViewsActions from 'containers/Views/withViewsActions';
function ItemsList({
// #withDashboard
changePageTitle,
fetchResourceViews,
fetchResourceFields,
views,
// #withResourceActions
requestFetchResourceViews,
requestFetchResourceFields,
// #withItems
itemsViews,
itemsCurrentPage,
itemsTableQuery,
// #withItemsActions
requestDeleteItem,
requestFetchItems,
addItemsTableQueries,
changeItemsCurrentView
}) {
const [deleteItem, setDeleteItem] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const [tableLoading, setTableLoading] = useState(false);
useEffect(() => {
changePageTitle('Items List');
}, [changePageTitle]);
const fetchHook = useAsync(async () => {
await Promise.all([
fetchResourceViews('items'),
fetchResourceFields('items'),
const fetchHook = useQuery('items-resource', () => {
return Promise.all([
requestFetchResourceViews('items'),
requestFetchResourceFields('items'),
]);
});
const fetchItems = useAsync(async () => {
await Promise.all([
requestFetchItems({ }),
])
});
const fetchItems = useQuery(['items-table', itemsTableQuery],
() => requestFetchItems({}));
// Handle click delete item.
const handleDeleteItem = useCallback((item) => {
@@ -70,6 +81,7 @@ function ItemsList({
});
}, [requestDeleteItem, deleteItem]);
// Handle fetch data table.
const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
addItemsTableQueries({
...(sortBy.length > 0) ? {
@@ -77,30 +89,40 @@ function ItemsList({
sort_order: sortBy[0].desc ? 'desc' : 'asc',
} : {},
});
fetchItems.execute();
}, [fetchItems, addItemsTableQueries]);
// Handle filter change to re-fetch the items.
const handleFilterChanged = useCallback(() => {
fetchItems.execute();
const handleFilterChanged = useCallback((filterConditions) => {
addItemsTableQueries({
filter_roles: filterConditions || '',
});
}, [fetchItems]);
// Handle custom view change to re-fetch the items.
const handleCustomViewChanged = useCallback(() => {
fetchItems.execute();
const handleCustomViewChanged = useCallback((customViewId) => {
setTableLoading(true);
}, [fetchItems]);
useEffect(() => {
if (tableLoading && !fetchItems.isFetching) {
setTableLoading(false);
}
}, [tableLoading, fetchItems.isFetching]);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback((accounts) => {
setSelectedRows(accounts);
}, [setSelectedRows]);
return (
<DashboardInsider isLoading={fetchHook.pending} name={'items-list'}>
<DashboardInsider
isLoading={fetchHook.isFetching}
name={'items-list'}>
<ItemsActionsBar
onFilterChanged={handleFilterChanged}
selectedRows={selectedRows}
views={views} />
views={itemsViews} />
<DashboardPageContent>
<Switch>
@@ -111,9 +133,11 @@ function ItemsList({
'/dashboard/items'
]}>
<ItemsViewsTabs
itemsViews={itemsViews}
onViewChanged={handleCustomViewChanged} />
<ItemsDataTable
loading={tableLoading}
onDeleteItem={handleDeleteItem}
onEditItem={handleEditItem}
onFetchData={handleFetchData}
@@ -140,8 +164,9 @@ function ItemsList({
}
export default compose(
DashboardConnect,
ResourceConnect,
ItemsConnect,
CustomViewsConnect,
withItems,
withResourceActions,
withDashboardActions,
withItemsActions,
withViewsActions,
)(ItemsList);

82
client/src/containers/Dashboard/Items/ItemsViewsTabs.js → client/src/containers/Items/ItemsViewsTabs.js
View File

@@ -11,17 +11,31 @@ import {
} from '@blueprintjs/core';
import { useParams } from 'react-router-dom';
import Icon from 'components/Icon';
import { Link } from 'react-router-dom';
import { Link, withRouter } from 'react-router-dom';
import { compose } from 'utils';
import ItemsConnect from 'connectors/Items.connect';
import DashboardConnect from 'connectors/Dashboard.connector';
import {useUpdateEffect} from 'hooks';
import withItemsActions from 'containers/Items/withItemsActions';
import withDashboard from 'containers/Dashboard/withDashboard';
import withViewDetail from 'containers/Views/withViewDetails';
function ItemsViewsTabs({
views,
setTopbarEditView,
customViewChanged,
// #withViewDetail
viewId,
viewItem,
itemsViews,
// #withItemsActions
addItemsTableQueries,
changeItemsCurrentView,
// #withDashboard
setTopbarEditView,
changePageSubtitle,
// #props
onViewChanged,
}) {
const history = useHistory();
@@ -31,51 +45,57 @@ function ItemsViewsTabs({
setTopbarEditView(null);
history.push('/dashboard/custom_views/items/new');
};
const handleViewLinkClick = () => {
setTopbarEditView(customViewId);
}
useUpdateEffect(() => {
customViewChanged && customViewChanged(customViewId);
useEffect(() => {
changeItemsCurrentView(customViewId || -1);
setTopbarEditView(customViewId);
changePageSubtitle((customViewId && viewItem) ? viewItem.name : '');
addItemsTableQueries({
custom_view_id: customViewId || null,
});
return () => {
setTopbarEditView(null);
changeItemsCurrentView(-1);
changePageSubtitle('');
};
}, [customViewId]);
useUpdateEffect(() => {
onViewChanged && onViewChanged(customViewId);
}, [customViewId]);
useEffect(() => {
addItemsTableQueries({
custom_view_id: customViewId,
})
}, [customViewId, addItemsTableQueries]);
const tabs = views.map(view => {
const tabs = itemsViews.map(view => {
const baseUrl = '/dashboard/items';
const link = (
<Link
to={`${baseUrl}/${view.id}/custom_view`}
onClick={handleViewLinkClick}
>{view.name}</Link>
<Link to={`${baseUrl}/${view.id}/custom_view`} onClick={handleViewLinkClick}>
{view.name}
</Link>
);
return <Tab
id={`custom_view_${view.id}`}
title={link} />;
return (<Tab id={`custom_view_${view.id}`} title={link} />);
});
return (
<Navbar className='navbar--dashboard-views'>
<NavbarGroup align={Alignment.LEFT}>
<Tabs
id='navbar'
large={true}
selectedTabId={`custom_view_${customViewId}`}
selectedTabId={customViewId ? `custom_view_${customViewId}` : 'all'}
className='tabs--dashboard-views'
>
<Tab
id='all'
title={<Link to={`/dashboard/items`}>All</Link>} />
title={<Link to={`/dashboard/items`}>All</Link>}
onClick={handleViewLinkClick} />
{tabs}
<Button
className='button--new-view'
icon={<Icon icon='plus' />}
@@ -88,7 +108,17 @@ function ItemsViewsTabs({
);
}
const mapStateToProps = (state, ownProps) => ({
// Mapping view id from matched route params.
viewId: ownProps.match.params.custom_view_id,
});
const withItemsViewsTabs = connect(mapStateToProps);
export default compose(
ItemsConnect,
DashboardConnect,
withRouter,
withItemsViewsTabs,
withDashboard,
withItemsActions,
withViewDetail,
)(ItemsViewsTabs);

Some files were not shown because too many files have changed in this diff Show More