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

Fix : Preferences

Browse Source
This commit is contained in:
elforjani3
2020-11-02 10:23:01 +02:00
parent f76abb3f79
commit e36a1dcf50
20 changed files with 853 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,9 +2,9 @@ import React, { lazy } from 'react';
import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
// import UserFormDialog from 'containers/Dialogs/UserFormDialog';
import UserFormDialog from 'containers/Dialogs/UserFormDialog';
// import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
// import CurrencyDialog from 'containers/Dialogs/CurrencyDialog';
import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';
// import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
// import ExchangeRateDialog from 'containers/Dialogs/ExchangeRateDialog';
import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog';
@@ -23,6 +23,8 @@ export default function DialogsContainer() {
<EstimateNumberDialog dialogName={'estimate-number-form'} />
<ReceiptNumberDialog dialogName={'receipt-number-form'} />
<InvoiceNumberDialog dialogName={'invoice-number-form'} />
<CurrencyFormDialog dialogName={'currency-form'} />
<UserFormDialog dialogName={'user-form'} />
</div>
);
}

16
client/src/containers/Currencies/withCurrency.js
View File

@@ -1,16 +0,0 @@
import { connect } from 'react-redux';
import {
getCurrencyById,
getCurrencyByCode,
} from 'store/currencies/currencies.selector';
const mapStateToProps = (state, props) => ({
...(props.currencyId) ? {
currency: getCurrencyById(state.currencies.data, props.currencyId),
} : (props.currencyCode) ? {
currency: getCurrencyByCode(state.currencies.data, props.currencyCode),
} : {},
});
export default connect(mapStateToProps);

12
client/src/containers/Currencies/withCurrencyDetail.js Normal file
View File

@@ -0,0 +1,12 @@
import { connect } from 'react-redux';
import {
getCurrencyById,
getCurrencyByCode,
} from 'store/currencies/currencies.selector';
const mapStateToProps = (state, props) => ({
currency: getCurrencyByCode(state, props),
});
export default connect(mapStateToProps);

94
client/src/containers/Dialogs/CurrencyDialog.js → client/src/containers/Dialogs/CurencyFormDialogContent.js
View File

@@ -7,40 +7,41 @@ import {
Intent,
} from '@blueprintjs/core';
import * as Yup from 'yup';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import { useQuery, queryCache } from 'react-query';
import { connect } from 'react-redux';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { pick } from 'lodash';
import AppToaster from 'components/AppToaster';
import Dialog from 'components/Dialog';
import withDialogRedux from 'components/DialogReduxConnect';
import ErrorMessage from 'components/ErrorMessage';
import classNames from 'classnames';
import withDialogActions from 'containers/Dialog/withDialogActions';
import {
If,
ErrorMessage,
AppToaster,
FieldRequiredHint,
DialogContent,
} from 'components';
import withCurrency from 'containers/Currencies/withCurrency';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withCurrencyDetail from 'containers/Currencies/withCurrencyDetail';
import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
import { compose } from 'utils';
function CurrencyDialog({
dialogName,
payload,
isOpen,
// #withDialogActions
closeDialog,
// #withCurrency
currencyCode,
function CurencyFormDialogContent({
// #withCurrencyDetail
currency,
// #wihtCurrenciesActions
requestFetchCurrencies,
requestSubmitCurrencies,
requestEditCurrency,
// #withDialogActions
closeDialog,
// #ownProp
action,
currencyId,
dialogName,
}) {
const { formatMessage } = useIntl();
const fetchCurrencies = useQuery('currencies', () =>
@@ -63,7 +64,6 @@ function CurrencyDialog({
}),
[],
);
const {
values,
errors,
@@ -75,12 +75,11 @@ function CurrencyDialog({
} = useFormik({
enableReinitialize: true,
initialValues: {
...(payload.action === 'edit' &&
pick(currency, Object.keys(initialValues))),
...(action === 'edit' && pick(currency, Object.keys(initialValues))),
},
validationSchema: validationSchema,
onSubmit: (values, { setSubmitting }) => {
if (payload.action === 'edit') {
if (action === 'edit') {
requestEditCurrency(currency.id, values)
.then((response) => {
closeDialog(dialogName);
@@ -115,7 +114,6 @@ function CurrencyDialog({
}
},
});
const handleClose = useCallback(() => {
closeDialog(dialogName);
}, [dialogName, closeDialog]);
@@ -129,35 +127,13 @@ function CurrencyDialog({
closeDialog(dialogName);
}, [closeDialog, dialogName, resetForm]);
const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
return (
<Dialog
name={dialogName}
title={
payload.action === 'edit' ? (
<T id={'edit_currency'} />
) : (
<T id={'new_currency'} />
)
}
className={classNames(
{
'dialog--loading': fetchCurrencies.isFetching,
},
'dialog--currency-form',
)}
isOpen={isOpen}
onClosed={onDialogClosed}
onOpening={onDialogOpening}
isLoading={fetchCurrencies.isFetching}
onClose={handleClose}
>
<DialogContent isLoading={fetchCurrencies.isFetching}>
<form onSubmit={handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={<T id={'currency_name'} />}
labelInfo={requiredSpan}
labelInfo={FieldRequiredHint}
className={'form-group--currency-name'}
intent={
errors.currency_name && touched.currency_name && Intent.DANGER
@@ -178,7 +154,7 @@ function CurrencyDialog({
<FormGroup
label={<T id={'currency_code'} />}
labelInfo={requiredSpan}
labelInfo={FieldRequiredHint}
className={'form-group--currency-code'}
intent={
errors.currency_code && touched.currency_code && Intent.DANGER
@@ -208,29 +184,17 @@ function CurrencyDialog({
type="submit"
disabled={isSubmitting}
>
{payload.action === 'edit' ? (
<T id={'edit'} />
) : (
<T id={'submit'} />
)}
{action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} />}
</Button>
</div>
</div>
</form>
</Dialog>
</DialogContent>
);
}
const mapStateToProps = (state, props) => ({
currency: 'currency-form',
});
const withCurrencyFormDialog = connect(mapStateToProps);
export default compose(
withCurrencyFormDialog,
withDialogRedux(null, 'currency-form'),
withCurrency,
withCurrencyDetail,
withDialogActions,
withCurrenciesActions,
)(CurrencyDialog);
)(CurencyFormDialogContent);

41
client/src/containers/Dialogs/CurrencyFormDialog.js Normal file
View File

@@ -0,0 +1,41 @@
import React, { lazy } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const CurrencyFormDialogContent = lazy(() =>
import('./CurencyFormDialogContent'),
);
function CurrencyFormDialog({
dialogName,
payload = { action: '', id: null },
isOpen,
}) {
return (
<Dialog
name={dialogName}
title={
payload.action === 'edit' ? (
<T id={'edit_currency'} />
) : (
<T id={'new_currency'} />
)
}
className={'dialog--currency-form'}
isOpen={isOpen}
autoFocus={true}
canEscapeKeyClose={true}
>
<DialogSuspense>
<CurrencyFormDialogContent
dialogName={dialogName}
currencyId={payload.currencyCode}
action={payload.action}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(withDialogRedux())(CurrencyFormDialog);

2
client/src/containers/Dialogs/UserFormDialog.connector.js
View File

@@ -7,7 +7,7 @@ export const mapStateToProps = (state, props) => {
const dialogPayload = getDialogPayload(state, 'user-form');
return {
name: 'user-form',
dialogName: 'user-form',
payload: { action: 'new', id: null },
userDetails:
dialogPayload.action === 'edit'

170
client/src/containers/Dialogs/UserFormDialog.js
View File

@@ -1,110 +1,19 @@
import React, { useCallback } from 'react';
import React, { lazy } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import {
Dialog,
Button,
FormGroup,
InputGroup,
Intent,
Classes,
} from '@blueprintjs/core';
import { objectKeysTransform } from 'utils';
import { pick, snakeCase } from 'lodash';
import classNames from 'classnames';
import { queryCache, useQuery } from 'react-query';
import AppToaster from 'components/AppToaster';
import DialogReduxConnect from 'components/DialogReduxConnect';
import ErrorMessage from 'components/ErrorMessage';
import UserFormDialogConnect from 'containers/Dialogs/UserFormDialog.connector';
import withUsersActions from 'containers/Users/withUsersActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const UserFormDialogContent = lazy(() => import('./UserFormDialogContent'));
function UserFormDialog({
requestFetchUser,
requestSubmitInvite,
name,
payload,
dialogName,
payload = { action: '', id: null },
isOpen,
closeDialog,
}) {
const { formatMessage } = useIntl();
const fetchHook = useQuery(
payload.action === 'edit' && ['user', payload.user.id],
(key, id) => requestFetchUser(id),
{ manual: true },
);
const validationSchema = Yup.object().shape({
email: Yup.string()
.email()
.required()
.label(formatMessage({ id: 'email' })),
});
const initialValues = {
status: 1,
...(payload.action === 'edit' &&
pick(
objectKeysTransform(payload.user, snakeCase),
Object.keys(validationSchema.fields),
)),
};
const {
errors,
touched,
resetForm,
getFieldProps,
handleSubmit,
isSubmitting,
} = useFormik({
enableReinitialize: true,
initialValues,
validationSchema,
onSubmit: (values, { setSubmitting }) => {
const form = { ...values };
requestSubmitInvite(form)
.then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({
id: 'teammate_invited_to_organization_account',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.invalidateQueries('users-table');
})
.catch((errors) => {
setSubmitting(false);
});
},
});
// Handle the dialog opening.
const onDialogOpening = useCallback(() => {
fetchHook.refetch();
}, [fetchHook]);
const onDialogClosed = useCallback(() => {
resetForm();
}, [resetForm]);
// Handles dialog close.
const handleClose = useCallback(() => {
closeDialog(name);
}, [closeDialog, name]);
return (
<Dialog
name={name}
name={dialogName}
title={
payload.action === 'edit' ? (
<T id={'edit_invite'} />
@@ -112,66 +21,23 @@ function UserFormDialog({
<T id={'invite_user'} />
)
}
className={classNames({
'dialog--loading': fetchHook.pending,
'dialog--invite-form': true,
})}
//
className={'dialog--invite-form'}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
isLoading={fetchHook.pending}
onClosed={onDialogClosed}
onOpening={onDialogOpening}
onClose={handleClose}
>
<form onSubmit={handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<p class="mb2">
<T id={'your_access_to_your_team'} />
</p>
<FormGroup
label={<T id={'email'} />}
className={classNames('form-group--email', Classes.FILL)}
intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name="email" {...{ errors, touched }} />}
inline={true}
>
<InputGroup
medium={true}
intent={errors.email && touched.email && Intent.DANGER}
{...getFieldProps('email')}
/>
</FormGroup>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
type="submit"
disabled={isSubmitting}
>
{payload.action === 'edit' ? (
<T id={'edit'} />
) : (
<T id={'invite'} />
)}
</Button>
</div>
</div>
</form>
<DialogSuspense>
<UserFormDialogContent
dialogName={dialogName}
userId={payload.id}
action={payload.action}
/>
</DialogSuspense>
</Dialog>
);
}
export default compose(
UserFormDialogConnect,
withUsersActions,
withDialogActions,
DialogReduxConnect,
// UserFormDialogConnect,
withDialogRedux(),
)(UserFormDialog);

162
client/src/containers/Dialogs/UserFormDialogContent.js Normal file
View File

@@ -0,0 +1,162 @@
import React, { useCallback } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import {
Button,
FormGroup,
InputGroup,
Intent,
Classes,
} from '@blueprintjs/core';
import { pick, snakeCase } from 'lodash';
import classNames from 'classnames';
import { queryCache, useQuery } from 'react-query';
import { FormattedMessage as T, useIntl } from 'react-intl';
import {
If,
ErrorMessage,
AppToaster,
FieldRequiredHint,
DialogContent,
} from 'components';
import UserFormDialogConnect from 'containers/Dialogs/UserFormDialog.connector';
import withUsersActions from 'containers/Users/withUsersActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, objectKeysTransform } from 'utils';
function UserFormDialogContent({
// #wihtCurrenciesActions
requestFetchUser,
requestSubmitInvite,
// #withDialogActions
closeDialog,
// #ownProp
action,
userId,
dialogName,
}) {
const { formatMessage } = useIntl();
const fetchHook = useQuery(
// action === 'edit' && ['user', action.user.id],
action === 'edit' && ['user', userId],
(key, id) => requestFetchUser(id),
{ enabled: userId },
);
const validationSchema = Yup.object().shape({
email: Yup.string()
.email()
.required()
.label(formatMessage({ id: 'email' })),
});
const initialValues = {
status: 1,
...(action === 'edit' &&
pick(
objectKeysTransform(userId, snakeCase),
Object.keys(validationSchema.fields),
)),
};
const {
errors,
touched,
resetForm,
getFieldProps,
handleSubmit,
isSubmitting,
} = useFormik({
enableReinitialize: true,
initialValues,
validationSchema,
onSubmit: (values, { setSubmitting }) => {
const form = { ...values };
requestSubmitInvite(form)
.then((response) => {
closeDialog(dialogName);
AppToaster.show({
message: formatMessage({
id: 'teammate_invited_to_organization_account',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.invalidateQueries('users-table');
})
.catch((errors) => {
setSubmitting(false);
});
},
});
// Handles dialog close.
const handleClose = useCallback(() => {
closeDialog(dialogName);
}, [closeDialog, dialogName]);
// Handle the dialog opening.
const onDialogOpening = useCallback(() => {
fetchHook.refetch();
}, [fetchHook]);
const onDialogClosed = useCallback(() => {
resetForm();
closeDialog(dialogName);
}, [resetForm]);
console.log(action, 'action');
return (
<DialogContent isLoading={fetchHook.isFetching}>
<form onSubmit={handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<p className="mb2">
<T id={'your_access_to_your_team'} />
</p>
<FormGroup
label={<T id={'email'} />}
className={classNames('form-group--email', Classes.FILL)}
intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name="email" {...{ errors, touched }} />}
inline={true}
>
<InputGroup
medium={true}
intent={errors.email && touched.email && Intent.DANGER}
{...getFieldProps('email')}
/>
</FormGroup>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
type="submit"
disabled={isSubmitting}
>
{action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />}
</Button>
</div>
</div>
</form>
</DialogContent>
);
}
export default compose(
// UserFormDialogConnect,
withDialogActions,
withUsersActions,
)(UserFormDialogContent);

154
client/src/containers/Preferences/Currencies/CurrenciesDataTable.js Normal file
View File

@@ -0,0 +1,154 @@
import React, { useCallback, useState, useMemo } from 'react';
import {
Intent,
Button,
Popover,
Menu,
MenuItem,
Position,
} from '@blueprintjs/core';
import { withRouter } from 'react-router';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { compose } from 'utils';
import { useUpdateEffect } from 'hooks';
import LoadingIndicator from 'components/LoadingIndicator';
import { DataTable, Icon } from 'components';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withCurrencies from 'containers/Currencies/withCurrencies';
import withDialogActions from 'containers/Dialog/withDialogActions';
function CurrenciesDataTable({
// #withCurrencies
currenciesList,
currenciesLoading,
loading,
onFetchData,
onSelectedRowsChange,
onDeleteCurrency,
// #withDialog.
openDialog,
}) {
const [initialMount, setInitialMount] = useState(false);
const { formatMessage } = useIntl();
useUpdateEffect(() => {
if (!currenciesLoading) {
setInitialMount(true);
}
}, [currenciesLoading, setInitialMount]);
const handleEditCurrency = useCallback(
(currency) => {
openDialog('currency-form', {
action: 'edit',
currencyCode: currency.currency_code,
});
},
[openDialog],
);
const actionMenuList = useCallback(
(currency) => (
<Menu>
<MenuItem
icon={<Icon icon="pen-18" />}
text={formatMessage({ id: 'edit_currency' })}
onClick={() => handleEditCurrency(currency)}
/>
<MenuItem
icon={<Icon icon="trash-16" iconSize={16} />}
text={formatMessage({ id: 'delete_currency' })}
onClick={() => onDeleteCurrency(currency)}
intent={Intent.DANGER}
/>
</Menu>
),
[handleEditCurrency, onDeleteCurrency, formatMessage],
);
const onRowContextMenu = useCallback(
(cell) => {
return actionMenuList(cell.row.original);
},
[actionMenuList],
);
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'currency_name' }),
accessor: 'currency_name',
width: 150,
},
{
Header: formatMessage({ id: 'currency_code' }),
accessor: 'currency_code',
className: 'currency_code',
width: 120,
},
{
Header: 'Currency sign',
width: 120,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: true,
},
],
[actionMenuList, formatMessage],
);
const handleDataTableFetchData = useCallback(
(...args) => {
onFetchData && onFetchData(...args);
},
[onFetchData],
);
const handleSelectedRowsChange = useCallback(
(selectedRows) => {
onSelectedRowsChange &&
onSelectedRowsChange(selectedRows.map((s) => s.original));
},
[onSelectedRowsChange],
);
return (
<LoadingIndicator loading={loading} mount={false}>
<DataTable
columns={columns}
data={currenciesList}
onFetchData={handleDataTableFetchData}
noInitialFetch={true}
loading={currenciesLoading && !initialMount}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
/>
</LoadingIndicator>
);
}
export default compose(
withRouter,
withDashboardActions,
withDialogActions,
withCurrencies(({ currenciesList }) => ({
currenciesList,
})),
)(CurrenciesDataTable);

153
client/src/containers/Preferences/Currencies/CurrenciesList.js
View File

@@ -1,13 +1,5 @@
import React, { useCallback, useState, useMemo, useEffect } from 'react';
import {
Button,
Popover,
Menu,
MenuItem,
Position,
Alert,
Intent,
} from '@blueprintjs/core';
import { Alert, Intent } from '@blueprintjs/core';
import { useQuery, queryCache } from 'react-query';
import {
FormattedMessage as T,
@@ -15,13 +7,12 @@ import {
useIntl,
} from 'react-intl';
import Icon from 'components/Icon';
import LoadingIndicator from 'components/LoadingIndicator';
import DataTable from 'components/DataTable';
import CurrenciesDataTable from './CurrenciesDataTable';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import AppToaster from 'components/AppToaster';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withCurrencies from 'containers/Currencies/withCurrencies';
import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -41,41 +32,34 @@ function CurrenciesList({
// #withDashboardActions
changePreferencesPageTitle,
// #ownProps
onFetchData,
}) {
const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const { formatMessage } = useIntl();
const fetchCurrencies = useQuery('currencies-table',
const fetchCurrencies = useQuery(
'currencies-table',
() => requestFetchCurrencies(),
{ enabled: true },
);
useEffect(() => {
changePreferencesPageTitle(formatMessage({ id: 'currencies' }));
}, [changePreferencesPageTitle, formatMessage]);
const handleEditCurrency = useCallback(
(currency) => {
openDialog('currency-form', {
action: 'edit',
currencyCode: currency.currency_code,
});
},
[openDialog],
);
const handleEditCurrency = useCallback(() => {}, []);
const onDeleteCurrency = useCallback((currency) => {
// Handle click and cancel/confirm currency delete
const handleDeleteCurrency = useCallback((currency) => {
setDeleteCurrencyState(currency);
}, []);
// handle cancel delete currency alert.
const handleCancelCurrencyDelete = () => {
setDeleteCurrencyState(false);
};
// Handle confirm Currency delete
const handleConfirmCurrencyDelete = useCallback(
(refetch) => {
requestDeleteCurrency(deleteCurrencyState.currency_code)
@@ -95,95 +79,44 @@ function CurrenciesList({
[deleteCurrencyState, requestDeleteCurrency, formatMessage],
);
const actionMenuList = useCallback(
(currency) => (
<Menu>
<MenuItem
text={<T id={'edit_currency'} />}
onClick={() => handleEditCurrency(currency)}
/>
<MenuItem
text={<T id={'delete_currency'} />}
onClick={() => onDeleteCurrency(currency)}
intent={Intent.DANGER}
/>
</Menu>
),
[handleEditCurrency, onDeleteCurrency],
// Handle selected rows change.
const handleSelectedRowsChange = useCallback(
(accounts) => {
setSelectedRows(accounts);
},
[setSelectedRows],
);
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'currency_name' }),
accessor: 'currency_name',
width: 150,
},
{
Header: formatMessage({ id: 'currency_code' }),
accessor: 'currency_code',
className: 'currency_code',
width: 120,
},
{
Header: 'Currency sign',
width: 120,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_TOP}
>
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
),
className: 'actions',
width: 50,
},
],
[actionMenuList, formatMessage],
);
const handleDataTableFetchData = useCallback(() => {
// fetchCurrencies.refetch();
}, [fetchCurrencies]);
return (
<LoadingIndicator loading={fetchCurrencies.isFetching}>
<DataTable
columns={columns}
data={currenciesList}
onFetchData={handleDataTableFetchData}
loading={currenciesLoading}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteCurrencyState}
onCancel={handleCancelCurrencyDelete}
onConfirm={handleConfirmCurrencyDelete}
>
<p>
<FormattedHTMLMessage
id={'once_delete_this_currency_you_will_able_to_restore_it'}
/>
</p>
</Alert>
</LoadingIndicator>
<DashboardInsider loading={fetchCurrencies.isFetching}>
<DashboardPageContent>
<CurrenciesDataTable
onDeleteCurrency={handleDeleteCurrency}
onEditCurrency={handleEditCurrency}
onSelectedRowsChange={handleSelectedRowsChange}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteCurrencyState}
onCancel={handleCancelCurrencyDelete}
onConfirm={handleConfirmCurrencyDelete}
>
<p>
<FormattedHTMLMessage
id={'once_delete_this_currency_you_will_able_to_restore_it'}
/>
</p>
</Alert>
</DashboardPageContent>
</DashboardInsider>
);
}
export default compose(
withDashboardActions,
withCurrencies(({ currenciesList }) => ({
currenciesList,
})),
withCurrenciesActions,
withDialogActions,
)(CurrenciesList);

96
client/src/containers/Preferences/General/General.js
View File

@@ -1,5 +1,6 @@
import React, { useState, useCallback, useEffect } from 'react';
import { useFormik } from 'formik';
import { mapKeys, snakeCase } from 'lodash';
import * as Yup from 'yup';
import {
Button,
@@ -9,19 +10,30 @@ import {
MenuItem,
Classes,
Spinner,
Position,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { TimezonePicker } from '@blueprintjs/timezone';
import { useQuery, queryCache } from 'react-query';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { DateInput } from '@blueprintjs/datetime';
import moment from 'moment';
import { useHistory } from 'react-router-dom';
import { compose, optionsMapToArray } from 'utils';
import {
compose,
optionsMapToArray,
tansformDateValue,
momentFormatter,
} from 'utils';
import ErrorMessage from 'components/ErrorMessage';
import AppToaster from 'components/AppToaster';
import { ListSelect } from 'components';
import { If } from 'components';
import {
If,
FieldRequiredHint,
ListSelect,
ErrorMessage,
AppToaster,
} from 'components';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
@@ -40,14 +52,11 @@ function GeneralPreferences({
}) {
const { formatMessage } = useIntl();
const [selectedItems, setSelectedItems] = useState({});
const history = useHistory();
const fetchHook = useQuery(
['settings'],
() => {
requestFetchOptions();
},
{ manual: true },
);
const fetchHook = useQuery(['settings'], () => {
requestFetchOptions();
});
useEffect(() => {
changePreferencesPageTitle(formatMessage({ id: 'general' }));
@@ -193,16 +202,21 @@ function GeneralPreferences({
name: Yup.string()
.required()
.label(formatMessage({ id: 'organization_name_' })),
financial_date_start: Yup.date()
.required()
.label(formatMessage({ id: 'date_start_' })),
industry: Yup.string()
.required()
.label(formatMessage({ id: 'organization_industry_' })),
location: Yup.string()
.required()
.label(formatMessage({ id: 'location' })),
base_currency: Yup.string().required(formatMessage({ id: 'required' })),
fiscal_year: Yup.string()
base_currency: Yup.string()
.required()
.label(formatMessage({ id: 'base_currency_' })),
fiscal_year: Yup.string()
.required()
.label(formatMessage({ id: 'fiscal_year_' })),
language: Yup.string()
.required()
.label(formatMessage({ id: 'language' })),
@@ -214,6 +228,12 @@ function GeneralPreferences({
.label(formatMessage({ id: 'date_format_' })),
});
function snakeCaseChange(data) {
return mapKeys(data, (value, key) => snakeCase(key));
}
const initialValues = snakeCaseChange(organizationSettings);
const {
values,
errors,
@@ -226,7 +246,7 @@ function GeneralPreferences({
} = useFormik({
enableReinitialize: true,
initialValues: {
...organizationSettings,
...initialValues,
},
validationSchema,
onSubmit: (values, { setSubmitting }) => {
@@ -264,6 +284,13 @@ function GeneralPreferences({
/>
);
const handleDateChange = useCallback(
(date) => {
const formatted = moment(date).format('YYYY-MM-DD');
setFieldValue('financial_date_start', formatted);
},
[setFieldValue],
);
const date_format = (item, { handleClick }) => (
<MenuItem
key={item.id}
@@ -300,6 +327,11 @@ function GeneralPreferences({
},
[setFieldValue],
);
const handleClose = () => {
history.goBack();
};
return (
<div
className={classNames({
@@ -310,6 +342,7 @@ function GeneralPreferences({
<form onSubmit={handleSubmit}>
<FormGroup
label={<T id={'organization_name'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
intent={errors.name && touched.name && Intent.DANGER}
helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
@@ -321,6 +354,30 @@ function GeneralPreferences({
{...getFieldProps('name')}
/>
</FormGroup>
<FormGroup
label={<T id={'financial_starting_date'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
intent={
errors.financial_date_start &&
touched.financial_date_start &&
Intent.DANGER
}
helperText={
<ErrorMessage
name="financial_date_start"
{...{ errors, touched }}
/>
}
className={classNames('form-group--select-list', Classes.FILL)}
>
<DateInput
{...momentFormatter('MMMM Do YYYY')}
value={tansformDateValue(values.financial_date_start)}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
<FormGroup
label={<T id={'organization_industry'} />}
@@ -362,6 +419,7 @@ function GeneralPreferences({
<FormGroup
label={<T id={'base_currency'} />}
labelInfo={<FieldRequiredHint />}
className={classNames(
'form-group--base-currency',
'form-group--select-list',
@@ -392,6 +450,7 @@ function GeneralPreferences({
<FormGroup
label={<T id={'fiscal_year'} />}
labelInfo={<FieldRequiredHint />}
className={classNames(
'form-group--fiscal-year',
'form-group--select-list',
@@ -419,6 +478,7 @@ function GeneralPreferences({
<FormGroup
label={<T id={'language'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames(
'form-group--language',
@@ -443,6 +503,7 @@ function GeneralPreferences({
</FormGroup>
<FormGroup
label={<T id={'time_zone'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames(
'form-group--time-zone',
@@ -463,6 +524,7 @@ function GeneralPreferences({
</FormGroup>
<FormGroup
label={<T id={'date_format'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames(
'form-group--language',
@@ -497,7 +559,7 @@ function GeneralPreferences({
>
<T id={'save'} />
</Button>
<Button onClick={'handleClose'}>
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
</div>
@@ -512,7 +574,7 @@ function GeneralPreferences({
}
export default compose(
withSettings,
withSettings(({ organizationSettings }) => ({ organizationSettings })),
withSettingsActions,
withDashboardActions,
)(GeneralPreferences);

185
client/src/containers/Preferences/Users/UsersDataTable.js Normal file
View File

@@ -0,0 +1,185 @@
import React, { useCallback, useState, useMemo } from 'react';
import {
Intent,
Button,
Popover,
Menu,
MenuDivider,
Tag,
MenuItem,
Position,
} from '@blueprintjs/core';
import { withRouter } from 'react-router';
import { snakeCase } from 'lodash';
import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
import { compose } from 'utils';
import LoadingIndicator from 'components/LoadingIndicator';
import { DataTable, Icon, If, AppToaster } from 'components';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withUsers from 'containers/Users/withUsers';
function UsersDataTable({
// #withDialogActions
openDialog,
// #withUsers
usersList,
usersLoading,
// #ownProps
loading,
onFetchData,
onInactiveUser,
onDeleteUser,
onSelectedRowsChange,
}) {
const [initialMount, setInitialMount] = useState(false);
const { formatMessage } = useIntl();
const onEditUser = useCallback(
(user) => () => {
const form = Object.keys(user).reduce((obj, key) => {
const camelKey = snakeCase(key);
obj[camelKey] = user[key];
return obj;
}, {});
openDialog('userList-form', { action: 'edit', user: form });
},
[openDialog],
);
const actionMenuList = useCallback(
(user) => (
<Menu>
<If condition={user.invite_accepted_at}>
<MenuItem
icon={<Icon icon="pen-18" />}
text={formatMessage({ id: 'edit_user' })}
onClick={onEditUser(user)}
/>
<MenuDivider />
<MenuItem
text={formatMessage({ id: 'inactivate_user' })}
onClick={() => onInactiveUser(user)}
/>
</If>
<MenuItem
icon={<Icon icon="trash-16" iconSize={16} />}
text={formatMessage({ id: 'delete_user' })}
onClick={() => onDeleteUser(user)}
intent={Intent.DANGER}
/>
</Menu>
),
[onInactiveUser, onDeleteUser, onEditUser],
);
const onRowContextMenu = useCallback(
(cell) => {
return actionMenuList(cell.row.original);
},
[actionMenuList],
);
const columns = useMemo(
() => [
{
id: 'full_name',
Header: formatMessage({ id: 'full_name' }),
accessor: 'full_name',
width: 150,
},
{
id: 'email',
Header: formatMessage({ id: 'email' }),
accessor: 'email',
width: 150,
},
{
id: 'phone_number',
Header: formatMessage({ id: 'phone_number' }),
accessor: 'phone_number',
width: 120,
},
{
id: 'status',
Header: 'Status',
accessor: (user) =>
!user.invite_accepted_at ? (
<Tag minimal={true}>
<T id={'inviting'} />
</Tag>
) : user.active ? (
<Tag intent={Intent.SUCCESS} minimal={true}>
<T id={'activate'} />
</Tag>
) : (
<Tag intent={Intent.WARNING} minimal={true}>
<T id={'inactivate'} />
</Tag>
),
width: 80,
className: 'status',
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="more-h-16" iconSize={16} />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: true,
},
],
[actionMenuList, formatMessage],
);
const handelDataTableFetchData = useCallback(
(...args) => {
onFetchData && onFetchData(...args);
},
[onFetchData],
);
const handleSelectedRowsChange = useCallback(
(selectedRows) => {
onSelectedRowsChange &&
onSelectedRowsChange(selectedRows.map((s) => s.original));
},
[onSelectedRowsChange],
);
return (
<LoadingIndicator loading={loading} mount={false}>
<DataTable
columns={columns}
data={usersList}
onFetchData={handelDataTableFetchData}
loading={usersLoading && !initialMount}
manualSortBy={true}
noInitialFetch={true}
onSelectedRowsChange={handleSelectedRowsChange}
rowContextMenu={onRowContextMenu}
/>
</LoadingIndicator>
);
}
export default compose(
withRouter,
withDialogActions,
withUsers(({ usersList, usersLoading }) => ({ usersList, usersLoading })),
)(UsersDataTable);

230
client/src/containers/Preferences/Users/UsersList.js
View File

@@ -1,41 +1,31 @@
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import { queryCache, useQuery } from 'react-query';
import DataTable from 'components/DataTable';
import {
Alert,
Popover,
Button,
Menu,
MenuItem,
MenuDivider,
Position,
Intent,
Tag,
} from '@blueprintjs/core';
import { snakeCase } from 'lodash';
import { Alert, Intent } from '@blueprintjs/core';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withUsers from 'containers/Users/withUsers';
import UsersDataTable from './UsersDataTable';
import withUsersActions from 'containers/Users/withUsersActions';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
import Icon from 'components/Icon';
import LoadingIndicator from 'components/LoadingIndicator';
import { If } from 'components';
import { snakeCase } from 'lodash';
import AppToaster from 'components/AppToaster';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withUsers from 'containers/Users/withUsers';
import withUsersActions from 'containers/Users/withUsersActions';
import { compose } from 'utils';
function UsersListPreferences({
// #withDialog
openDialog,
// #withDashboardActions
changePreferencesPageTitle,
// #withUsers
@@ -51,15 +41,18 @@ function UsersListPreferences({
}) {
const [deleteUserState, setDeleteUserState] = useState(false);
const [inactiveUserState, setInactiveUserState] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const { formatMessage } = useIntl();
const fetchUsers = useQuery('users-table', () => requestFetchUsers());
useEffect(() => {
changePreferencesPageTitle(formatMessage({ id: 'users' }));
}, [changePreferencesPageTitle, formatMessage]);
const onInactiveUser = useCallback((user) => {
// Handle cancel/confirm user inactive.
const handleInactiveUser = useCallback((user) => {
setInactiveUserState(user);
}, []);
@@ -86,26 +79,20 @@ function UsersListPreferences({
});
}, [inactiveUserState, requestInactiveUser, formatMessage]);
const onDeleteUser = useCallback((user) => {
// Handle click and cancel/confirm user delete
const handleDeleteUser = useCallback((user) => {
setDeleteUserState(user);
}, []);
// handle cancel delete user alert.
const handleCancelUserDelete = () => {
setDeleteUserState(false);
};
const onEditUser = useCallback(
(user) => () => {
const form = Object.keys(user).reduce((obj, key) => {
const camelKey = snakeCase(key);
obj[camelKey] = user[key];
return obj;
}, {});
const handleEditUser = useCallback(() => {}, []);
openDialog('userList-form', { action: 'edit', user: form });
},
[openDialog],
);
// Handle confirm User delete
const handleConfirmUserDelete = useCallback(() => {
@@ -128,138 +115,63 @@ function UsersListPreferences({
});
}, [deleteUserState, requestDeleteUser, formatMessage]);
const actionMenuList = useCallback(
(user) => (
<Menu>
<If condition={user.invite_accepted_at}>
<MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
<MenuDivider />
// const handelDataTableFetchData = useCallback(() => {
// onFetchData && onFetchData();
// }, [onFetchData]);
<MenuItem
text={<T id={'inactivate_user'} />}
onClick={() => onInactiveUser(user)}
/>
</If>
<MenuItem
text={<T id={'delete_user'} />}
onClick={() => onDeleteUser(user)}
intent={Intent.DANGER}
/>
</Menu>
),
[onInactiveUser, onDeleteUser, onEditUser],
// Handle selected rows change.
const handleSelectedRowsChange = useCallback(
(accounts) => {
setSelectedRows(accounts);
},
[setSelectedRows],
);
const columns = useMemo(
() => [
{
id: 'full_name',
Header: formatMessage({ id: 'full_name' }),
accessor: 'full_name',
width: 150,
},
{
id: 'email',
Header: formatMessage({ id: 'email' }),
accessor: 'email',
width: 150,
},
{
id: 'phone_number',
Header: formatMessage({ id: 'phone_number' }),
accessor: 'phone_number',
width: 120,
},
{
id: 'status',
Header: 'Status',
accessor: (user) =>
!user.invite_accepted_at ? (
<Tag minimal={true}>
<T id={'inviting'} />
</Tag>
) : user.active ? (
<Tag intent={Intent.SUCCESS} minimal={true}>
<T id={'activate'} />
</Tag>
) : (
<Tag intent={Intent.WARNING} minimal={true}>
<T id={'inactivate'} />
</Tag>
),
width: 80,
className: 'status',
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_TOP}
>
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: true,
},
],
[actionMenuList, formatMessage],
);
const handelDataTableFetchData = useCallback(() => {
onFetchData && onFetchData();
}, [onFetchData]);
return (
<LoadingIndicator>
<DataTable
columns={columns}
data={usersList}
onFetchData={handelDataTableFetchData()}
loading={fetchUsers.isFetching}
manualSortBy={true}
expandable={false}
/>
<DashboardInsider loading={fetchUsers.isFetching}>
<DashboardPageContent>
<UsersDataTable
onDeleteUser={handleDeleteUser}
onInactiveUser={handleInactiveUser}
onEditUser={handleEditUser}
// onFetchData={handleFetchData}
onSelectedRowsChange={handleSelectedRowsChange}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteUserState}
onCancel={handleCancelUserDelete}
onConfirm={handleConfirmUserDelete}
>
<p>
<FormattedHTMLMessage
id={'once_delete_this_account_you_will_able_to_restore_it'}
/>
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'inactivate'} />}
intent={Intent.WARNING}
isOpen={inactiveUserState}
onCancel={handleCancelInactiveUser}
onConfirm={handleConfirmUserActive}
>
<p>
<T id={'are_sure_to_inactive_this_account'} />
</p>
</Alert>
</LoadingIndicator>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteUserState}
onCancel={handleCancelUserDelete}
onConfirm={handleConfirmUserDelete}
>
<p>
<FormattedHTMLMessage
id={'once_delete_this_account_you_will_able_to_restore_it'}
/>
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'inactivate'} />}
intent={Intent.WARNING}
isOpen={inactiveUserState}
onCancel={handleCancelInactiveUser}
onConfirm={handleConfirmUserActive}
>
<p>
<T id={'are_sure_to_inactive_this_account'} />
</p>
</Alert>
</DashboardPageContent>
</DashboardInsider>
);
}
export default compose(
withDialogActions,
withDashboardActions,
withUsers,
withUsersActions,
)(UsersListPreferences);

14
client/src/containers/Users/withUsers.js
View File

@@ -1,7 +1,13 @@
import { connect } from 'react-redux';
export const mapStateToProps = (state, props) => ({
usersList: state.users.list.results,
});
export default (mapState) => {
const mapStateToProps = (state, props) => {
const mapped = {
usersList: state.users.list,
usersLoading: state.users.loading,
};
return mapState ? mapState(mapped, state, props) : mapped;
};
export default connect(mapStateToProps);
return connect(mapStateToProps);
};

19
client/src/store/currencies/currencies.selector.js
View File

@@ -1,19 +1,22 @@
// @flow
import { createSelector } from 'reselect';
import { getItemById } from 'store/selectors';
const currenciesItemsSelector = state => state.currencies.data;
const currenciesItemsSelector = (state) => state.currencies.data;
const currenciesCodePropSelector = (state, props) => props.currencyId;
export const getCurrenciesList = createSelector(
currenciesItemsSelector,
(currencies) => {
return Object.values(currencies);
}
},
);
export const getCurrencyById = (currencies: Object, id: Integer) => {
return Object.values(currencies).find(c => c.id == id) || null;
};
export const getCurrencyByCode = createSelector(
currenciesItemsSelector,
currenciesCodePropSelector,
(currencies, currencyCode) => {
return getItemById(currencies, currencyCode);
},
);
export const getCurrencyByCode = (currencies: Object, currencyCode: String) => {
return currencies[currencyCode] || null;
};

9
client/src/store/users/users.actions.js
View File

@@ -4,12 +4,21 @@ import t from 'store/types';
export const fetchUsers = () => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.USERS_TABLE_LOADING,
payload: { loading: true },
});
ApiService.get(`users`)
.then((response) => {
dispatch({
type: t.USERS_LIST_SET,
users: response.data.users,
});
dispatch({
type: t.USERS_TABLE_LOADING,
payload: { loading: false },
});
resolve(response);
})
.catch((error) => {

10
client/src/store/users/users.reducer.js
View File

@@ -2,10 +2,9 @@ import { createReducer } from '@reduxjs/toolkit';
import t from 'store/types';
const initialState = {
list: {
results: [],
},
list: {},
userById: {},
loading: false,
};
export default createReducer(initialState, {
@@ -16,6 +15,11 @@ export default createReducer(initialState, {
[t.USER_DETAILS_SET]: (state, action) => {
state.userById[action.user.id] = action.user;
},
[t.USERS_TABLE_LOADING]: (state, action) => {
const { loading } = action.payload;
state.loading = !!loading;
},
});
/**

4
client/src/store/users/users.types.js
View File

@@ -1,5 +1,5 @@
export default {
USERS_LIST_SET: 'USERS_LIST_SET',
USERS_TABLE_LOADING: 'USERS_TABLE_LOADING',
USER_DETAILS_SET: 'USER_DETAILS_SET',
};
};

3
client/src/style/pages/dashboard.scss
View File

@@ -307,7 +307,8 @@
&__preferences-topbar{
border-bottom: 1px solid #E5E5E5;
height: 70px;
// height: 70px;
height: 65px;
padding: 0 0 0 22px;
display: flex;
flex-direction: row;

22
client/src/style/pages/preferences.scss
View File

@@ -1,8 +1,7 @@
.dashboard-content--preferences {
// margin-left: 430px;
margin-left: 410px;
width: 100%;
// height: max-content;
// width: 100%;
position: relative;
}
@@ -60,11 +59,10 @@
.preferences__sidebar {
background: #fdfdfd;
position: fixed;
// left: 220px;
left: 200px;
top: 1px;
min-width: 210px;
max-width: 210px;
left: 190px;
top: -5px;
min-width: 220px;
max-width: 220px;
height: 100%;
.sidebar-wrapper {
@@ -108,9 +106,9 @@
// Preference
//---------------------------------
.preferences__inside-content--general {
margin: 20px;
.bp3-form-group {
margin: 25px 20px 20px;
margin: 18px 18px;
.bp3-label {
min-width: 180px;
}
@@ -142,6 +140,12 @@
border: 1px solid #ced4da;
padding: 8px;
}
.bp3-button .bp3-icon:first-child:last-child,
.bp3-button .bp3-spinner + .bp3-icon:last-child {
position: absolute;
right: 15px;
display: inline-block;
}
}
}