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

feat: application preferences.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-12-02 17:21:54 +02:00
parent 1da83ccaf3
commit 2feb4c2e88
45 changed files with 1321 additions and 1293 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/common/classes.js
View File

@@ -10,6 +10,9 @@ const CLASSES = {
DATATABLE_EDITOR_ITEMS_ENTRIES: 'items-entries-table',
DATATABLE_EDITOR_HAS_TOTAL_ROW: 'has-total-row',
DASHBOARD_CONTENT: 'dashboard-content',
DASHBOARD_CONTENT_PREFERENCES: 'dashboard-content--preferences',
PAGE_FORM: 'page-form',
PAGE_FORM_HEADER: 'page-form__header',
PAGE_FORM_HEADER_PRIMARY: 'page-form__primary-section',
@@ -46,7 +49,24 @@ const CLASSES = {
SELECT_LIST_FILL_POPOVER: 'select-list--fill-popover',
PREFERENCES_PAGE: 'preferences-page',
PREFERENCES_PAGE_SIDEBAR: 'preferences-page__sidebar',
PREFERENCES_PAGE_TOPBAR: 'preferences-page__topbar',
PREFERENCES_PAGE_CONTENT: 'preferences-page__content',
PREFERENCES_PAGE_TABS: 'preferences-page__tabs',
PREFERENCES_SIDEBAR: 'preferences-sidebar',
PREFERENCES_TOPBAR: 'preferences-topbar',
PREFERENCES_PAGE_INSIDE_CONTENT: 'preferences-page__inside-content',
PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL: 'preferences-page__inside-content--general',
PREFERENCES_PAGE_INSIDE_CONTENT_USERS: 'preferences-page__inside-content--users',
PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES: 'preferences-page__inside-content--currencies',
PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT: 'preferences-page__inside-content--accountant',
...Classes,
CARD: 'card',
};
export {

5
client/src/common/countries.js Normal file
View File

@@ -0,0 +1,5 @@
export default [
{ name: 'Libya', value: 'libya' },
]

5
client/src/common/currencies.js Normal file
View File

@@ -0,0 +1,5 @@
export default [
{ label: 'US Dollar', code: 'USD' },
{ label: 'Euro', code: 'EUR' },
{ label: 'Libyan Dinar ', code: 'LYD' },
]

40
client/src/common/dateFormatsOptions.js Normal file
View File

@@ -0,0 +1,40 @@
import moment from 'moment';
export default [
{
id: 1,
name: 'MM/DD/YY',
label: `${moment().format('MM/DD/YYYY')}`,
value: 'mm/dd/yy',
},
{
id: 2,
name: 'DD/MM/YY',
label: `${moment().format('DD/MM/YYYY')}`,
value: 'dd/mm/yy',
},
{
id: 3,
name: 'YY/MM/DD',
label: `${moment().format('YYYY/MM/DD')}`,
value: 'yy/mm/dd',
},
{
id: 4,
name: 'MM-DD-YY',
label: `${moment().format('MM-DD-YYYY')}`,
value: 'mm-dd-yy',
},
{
id: 5,
name: 'DD-MM-YY',
label: `${moment().format('DD-MM-YYYY')}`,
value: 'dd-mm-yy',
},
{
id: 6,
name: 'YY-MM-DD',
label: `${moment().format('YYYY-MM-DD')}`,
value: 'yy-mm-dd',
},
]

88
client/src/common/fiscalYearOptions.js Normal file
View File

@@ -0,0 +1,88 @@
import { formatMessage } from 'services/intl';
export default [
{
id: 0,
name: `${formatMessage({ id: 'january' })} - ${formatMessage({
id: 'december',
})}`,
value: 'january',
},
{
id: 1,
name: `${formatMessage({ id: 'february' })} - ${formatMessage({
id: 'january',
})}`,
value: 'february',
},
{
id: 2,
name: `${formatMessage({ id: 'march' })} - ${formatMessage({
id: 'february',
})}`,
value: 'March',
},
{
id: 3,
name: `${formatMessage({ id: 'april' })} - ${formatMessage({
id: 'march',
})}`,
value: 'april',
},
{
id: 4,
name: `${formatMessage({ id: 'may' })} - ${formatMessage({
id: 'april',
})}`,
value: 'may',
},
{
id: 5,
name: `${formatMessage({ id: 'june' })} - ${formatMessage({
id: 'may',
})}`,
value: 'june',
},
{
id: 6,
name: `${formatMessage({ id: 'july' })} - ${formatMessage({
id: 'june',
})}`,
value: 'july',
},
{
id: 7,
name: `${formatMessage({ id: 'august' })} - ${formatMessage({
id: 'july',
})}`,
value: 'August',
},
{
id: 8,
name: `${formatMessage({ id: 'september' })} - ${formatMessage({
id: 'august',
})}`,
value: 'september',
},
{
id: 9,
name: `${formatMessage({ id: 'october' })} - ${formatMessage({
id: 'november',
})}`,
value: 'october',
},
{
id: 10,
name: `${formatMessage({ id: 'november' })} - ${formatMessage({
id: 'october',
})}`,
value: 'november',
},
{
id: 11,
name: `${formatMessage({ id: 'december' })} - ${formatMessage({
id: 'november',
})}`,
value: 'december',
},
]

6
client/src/common/languagesOptions.js Normal file
View File

@@ -0,0 +1,6 @@
export default [
{ name: 'English', value: 'EN' },
{ name: 'Arabic', value: 'AR' },
];

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

@@ -7,8 +7,7 @@ import DashboardLoadingIndicator from './DashboardLoadingIndicator';
import Sidebar from 'components/Sidebar/Sidebar';
import DashboardContent from 'components/Dashboard/DashboardContent';
import DialogsContainer from 'components/DialogsContainer';
import PreferencesContent from 'components/Preferences/PreferencesContent';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
import PreferencesPage from 'components/Preferences/PreferencesPage';
import Search from 'containers/GeneralSearch/Search';
import DashboardSplitPane from 'components/Dashboard/DashboardSplitePane';
@@ -28,9 +27,8 @@ function Dashboard({
<Route path="/preferences">
<DashboardSplitPane>
<Sidebar />
<PreferencesSidebar />
<PreferencesPage />
</DashboardSplitPane>
<PreferencesContent />
</Route>
<Route path="/">

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

@@ -2,10 +2,9 @@ import React, { lazy } from 'react';
import AccountFormDialog from 'containers/Dialogs/AccountFormDialog';
import UserFormDialog from 'containers/Dialogs/UserFormDialog';
import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
import ItemCategoryDialog from 'containers/Dialogs/ItemCategoryDialog';
import CurrencyFormDialog from 'containers/Dialogs/CurrencyFormDialog';
// import InviteUserDialog from 'containers/Dialogs/InviteUserDialog';
import ExchangeRateFormDialog from 'containers/Dialogs/ExchangeRateFormDialog';
import JournalNumberDialog from 'containers/Dialogs/JournalNumberDialog';
// import BillNumberDialog from 'containers/Dialogs/BillNumberDialog';
@@ -13,6 +12,7 @@ import PaymentReceiveNumberDialog from 'containers/Dialogs/PaymentReceiveNumberD
import EstimateNumberDialog from 'containers/Dialogs/EstimateNumberDialog';
import ReceiptNumberDialog from 'containers/Dialogs/ReceiptNumberDialog';
import InvoiceNumberDialog from 'containers/Dialogs/InvoiceNumberDialog';
export default function DialogsContainer() {
return (
<div>
@@ -24,9 +24,9 @@ export default function DialogsContainer() {
<ReceiptNumberDialog dialogName={'receipt-number-form'} />
<InvoiceNumberDialog dialogName={'invoice-number-form'} />
<CurrencyFormDialog dialogName={'currency-form'} />
<UserFormDialog dialogName={'user-form'} />
<InviteUserDialog dialogName={'invite-user'} />
<ExchangeRateFormDialog dialogName={'exchangeRate-form'} />
<ItemCategoryDialog dialogName={'item-category-form'} />
</div>
);
}
}

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

@@ -2,6 +2,8 @@ import React, { useState, useMemo, useEffect } from 'react';
import { Button, MenuItem } from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
export default function ListSelect({
buttonProps,
@@ -69,6 +71,10 @@ export default function ListSelect({
{...selectProps}
noResults={noResults}
disabled={disabled}
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
selectProps.className,
)}
>
<Button
text={currentItem ? currentItem[labelProp] : defaultText}

17
client/src/components/Preferences/PreferencesContent.js
View File

@@ -1,17 +0,0 @@
import React from 'react';
import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
export default function PreferencesContent() {
return (
<div className='dashboard-content dashboard-content--preferences'>
<PreferencesTopbar pageTitle={'asdad'} />
<div className='dashboard__preferences-content'>
<PreferencesContentRoute />
</div>
</div>
);
}

28
client/src/components/Preferences/PreferencesPage.js
View File

@@ -1,11 +1,29 @@
import React from 'react';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
import { ErrorBoundary } from 'react-error-boundary';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
import DashboardErrorBoundary from 'components/Dashboard/DashboardErrorBoundary';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
export default function PreferencesPage() {
return (
<div class="preferences-page">
<PreferencesSidebar />
</div>
<ErrorBoundary FallbackComponent={DashboardErrorBoundary}>
<div className={classNames(
CLASSES.DASHBOARD_CONTENT,
CLASSES.DASHBOARD_CONTENT_PREFERENCES,
)}>
<div className={classNames(CLASSES.PREFERENCES_PAGE)}>
<PreferencesSidebar />
<div className={CLASSES.PREFERENCES_PAGE_CONTENT}>
<PreferencesTopbar pageTitle={'asdad'} />
<PreferencesContentRoute />
</div>
</div>
</div>
</ErrorBoundary>
);
}
}

39
client/src/components/Preferences/PreferencesSidebar.js
View File

@@ -1,35 +1,36 @@
import React from 'react';
import {Menu, MenuItem, MenuDivider} from '@blueprintjs/core';
import { Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
import { useHistory, useLocation } from 'react-router-dom';
import preferencesMenu from 'config/preferencesMenu';
import PreferencesSidebarContainer from './PreferencesSidebarContainer';
export default function PreferencesSidebar() {
const history = useHistory();
const location = useLocation();
const items = preferencesMenu.map((item) => (
(item.divider) ?
<MenuDivider
title={item.title} /> :
const items = preferencesMenu.map((item) =>
item.divider ? (
<MenuDivider title={item.title} />
) : (
<MenuItem
active={(item.href && item.href === location.pathname)}
active={item.href && item.href === location.pathname}
text={item.text}
label={item.label}
disabled={item.disabled}
onClick={() => { history.push(item.href); }} />
));
onClick={() => {
history.push(item.href);
}}
/>
),
);
return (
<div class="preferences__sidebar">
<div class="preferences__sidebar-wrapper">
<div class="preferences__sidebar-head">
<h2>Preferences</h2>
</div>
<Menu className="preferences__sidebar-menu">
{ items }
</Menu>
<PreferencesSidebarContainer>
<div class="preferences-sidebar__head">
<h2>Preferences</h2>
</div>
</div>
<Menu className="preferences-sidebar__menu">{items}</Menu>
</PreferencesSidebarContainer>
);
}
}

21
client/src/components/Preferences/PreferencesSidebarContainer.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import classNames from 'classnames';
import { Scrollbar } from 'react-scrollbars-custom';
import { CLASSES } from 'common/classes';
export default function PreferencesSidebarContainer({ children }) {
return (
<div
className={classNames(
CLASSES.PREFERENCES_PAGE_SIDEBAR,
CLASSES.PREFERENCES_SIDEBAR,
)}
>
<div class="preferences-sidebar__wrapper">
<Scrollbar noDefaultStyles={true}>
<div class="preferences-sidebar__inner">{children}</div>
</Scrollbar>
</div>
</div>
);
}

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

@@ -1,6 +1,7 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
import UsersActions from 'containers/Preferences/Users/UsersActions';
@@ -11,15 +12,19 @@ import { compose } from 'utils';
function PreferencesTopbar({ preferencesPageTitle }) {
return (
<div class="dashboard__preferences-topbar">
<div class="dashboard__title">
<div
className={classNames(
CLASSES.PREFERENCES_PAGE_TOPBAR,
CLASSES.PREFERENCES_TOPBAR,
)}
>
<div class="preferences-topbar__title">
<h2>{preferencesPageTitle}</h2>
</div>
<div class="preferences__topbar-actions">
<div class="preferences-topbar__actions">
<Route pathname="/preferences">
<Switch>
<Route exact path={'/preferences/users'} component={UsersActions} />
<Route
exact
path={'/preferences/currencies'}
@@ -29,7 +34,7 @@ function PreferencesTopbar({ preferencesPageTitle }) {
</Route>
</div>
<div class="dashboard__topbar-user">
<div class="preferences-topbar__user">
<DashboardTopbarUser />
</div>
</div>

5
client/src/config/preferencesMenu.js
View File

@@ -21,9 +21,4 @@ export default [
disabled: false,
href: '/preferences/accountant',
},
{
text: <T id={'accounts'}/>,
disabled: false,
href: '/preferences/accounts',
},
];

6
client/src/containers/Dialogs/AccountFormDialog/AccountFormDialogContent.js
View File

@@ -154,7 +154,11 @@ function AccountFormDialogContent({
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<AccountFormDialogFields isNewMode={isNewMode} onClose={handleClose} />
<AccountFormDialogFields
dialogName={dialogName}
isNewMode={isNewMode}
onClose={handleClose}
/>
</Formik>
</DialogContent>
);

4
client/src/containers/Dialogs/AccountFormDialog/AccountFormDialogFields.js
View File

@@ -1,4 +1,4 @@
import React, { useEffect } from 'react';
import React from 'react';
import { Form, FastField, Field, ErrorMessage, useFormikContext } from 'formik';
import classNames from 'classnames';
import { FormattedMessage as T } from 'react-intl';
@@ -28,7 +28,7 @@ import { useAutofocus } from 'hooks';
* Account form dialogs fields.
*/
function AccountFormDialogFields({
// #ownProps
// #ownPropscl
onClose,
isNewMode,

218
client/src/containers/Dialogs/InviteUserDialog.js
View File

@@ -1,218 +0,0 @@
import React, { useMemo, useCallback } 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 classNames from 'classnames';
import { pick, snakeCase } from 'lodash';
import { queryCache } from 'react-query';
import AppToaster from 'components/AppToaster';
import DialogReduxConnect from 'components/DialogReduxConnect';
import UserListDialogConnect from 'containers/Dialogs/UsersListDialog.connector';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withUsersActions from 'containers/Users/withUsersActions';
import ErrorMessage from 'components/ErrorMessage';
import useAsync from 'hooks/async';
import { compose, objectKeysTransform } from 'utils';
function InviteUserDialog({
name,
payload,
isOpen,
closeDialog,
requestFetchUser,
requestEditUser,
}) {
const { formatMessage } = useIntl();
const fetchHook = useAsync(async () => {
await Promise.all([
...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
]);
}, false);
const validationSchema = Yup.object().shape({
first_name: Yup.string()
.required()
.label(formatMessage({ id: 'first_name_' })),
last_name: Yup.string()
.required()
.label(formatMessage({ id: 'last_name_' })),
email: Yup.string()
.email()
.required()
.label(formatMessage({ id: 'email' })),
phone_number: Yup.number()
.required()
.label(formatMessage({ id: 'phone_number_' })),
});
const initialValues = useMemo(
() => ({
first_name: '',
last_name: '',
email: '',
phone_number: '',
}),
[],
);
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...(payload.action === 'edit' &&
pick(
objectKeysTransform(payload.user, snakeCase),
Object.keys(initialValues),
)),
},
validationSchema,
onSubmit: (values, { setSubmitting }) => {
const form = {
...values,
};
if (payload.action === 'edit') {
requestEditUser(payload.user.id, form)
.then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({
id: 'the_user_details_has_been_updated',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.invalidateQueries('users-table');
})
.catch((error) => {
setSubmitting(false);
});
}
},
});
const { errors, touched } = useMemo(() => formik, [formik]);
const onDialogOpening = () => {
fetchHook.execute();
};
const onDialogClosed = useCallback(() => {
formik.resetForm();
}, [formik.resetForm]);
// Handles dialog close.
const handleClose = useCallback(() => {
closeDialog(name);
}, [closeDialog, name]);
return (
<Dialog
name={name}
title={payload.action === 'edit' ? <T id={'edit_user'} /> : ''}
className={classNames({
'dialog--loading': fetchHook.pending,
'dialog--invite-user': true,
})}
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}
isLoading={fetchHook.pending}
onClosed={onDialogClosed}
onOpening={onDialogOpening}
onClose={handleClose}
>
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={<T id={'first_name'} />}
className={'form-group--first-name'}
intent={errors.first_name && touched.first_name && Intent.DANGER}
helperText={<ErrorMessage name="first_name" {...formik} />}
inline={true}
>
<InputGroup
intent={errors.first_name && touched.first_name && Intent.DANGER}
{...formik.getFieldProps('first_name')}
/>
</FormGroup>
<FormGroup
label={<T id={'last_name'} />}
className={'form-group--last-name'}
intent={errors.last_name && touched.last_name && Intent.DANGER}
helperText={<ErrorMessage name="last_name" {...formik} />}
inline={true}
>
<InputGroup
intent={errors.last_name && touched.last_name && Intent.DANGER}
{...formik.getFieldProps('last_name')}
/>
</FormGroup>
<FormGroup
label={<T id={'email'} />}
className={'form-group--email'}
intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name="email" {...formik} />}
inline={true}
>
<InputGroup
medium={true}
intent={errors.email && touched.email && Intent.DANGER}
{...formik.getFieldProps('email')}
/>
</FormGroup>
<FormGroup
label={<T id={'phone_number'} />}
className={'form-group--phone-number'}
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
helperText={<ErrorMessage name="phone_number" {...formik} />}
inline={true}
>
<InputGroup
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
{...formik.getFieldProps('phone_number')}
/>
</FormGroup>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
<Button
intent={Intent.PRIMARY}
type="submit"
disabled={formik.isSubmitting}
>
{payload.action === 'edit' ? <T id={'edit'} /> : ''}
</Button>
</div>
</div>
</form>
</Dialog>
);
}
export default compose(
withDialogActions,
UserListDialogConnect,
withUsersActions,
DialogReduxConnect,
)(InviteUserDialog);

11
client/src/containers/Dialogs/InviteUserDialog/InviteUserDialog.schema.js Normal file
View File

@@ -0,0 +1,11 @@
import * as Yup from 'yup';
import { formatMessage } from 'services/intl';
const Schema = Yup.object().shape({
email: Yup.string()
.email()
.required()
.label(formatMessage({ id: 'email' })),
});
export const InviteUserFormSchema = Schema;

97
client/src/containers/Dialogs/InviteUserDialog/InviteUserDialogContent.js Normal file
View File

@@ -0,0 +1,97 @@
import React from 'react';
import { Intent } from '@blueprintjs/core';
import { pick, snakeCase } from 'lodash';
import { queryCache, useQuery } from 'react-query';
import { useIntl } from 'react-intl';
import { Formik } from 'formik';
import { AppToaster, DialogContent } from 'components';
import withUsersActions from 'containers/Users/withUsersActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose, objectKeysTransform } from 'utils';
import { InviteUserFormSchema } from './InviteUserDialog.schema';
import UserFormDialogForm from './InviteUserDialogForm';
import { transformApiErrors } from './utils';
//
function InviteUserDialogContent({
// #wihtCurrenciesActions
requestFetchUser,
requestSubmitInvite,
// #withDialogActions
closeDialog,
// #ownProp
action,
userId,
dialogName,
}) {
const { formatMessage } = useIntl();
// Fetch user details.
const fetchHook = useQuery(
['user', userId],
(key, id) => requestFetchUser(id),
{ enabled: userId },
);
const initialValues = {
status: 1,
...(action === 'edit' &&
pick(
objectKeysTransform(userId, snakeCase),
Object.keys(InviteUserFormSchema.fields),
)),
};
const handleSubmit = (values, { setSubmitting, setErrors }) => {
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) => {
const errorsTransformed = transformApiErrors(errors);
setErrors({ ...errorsTransformed });
setSubmitting(false);
});
};
const handleCancelBtnClick = () => {
closeDialog('invite-user');
};
return (
<DialogContent isLoading={fetchHook.isFetching}>
<Formik
validationSchema={InviteUserFormSchema}
initialValues={initialValues}
onSubmit={handleSubmit}
>
<UserFormDialogForm
action={action}
onCancelClick={handleCancelBtnClick}
/>
</Formik>
</DialogContent>
);
}
export default compose(
// UserFormDialogConnect,
withDialogActions,
withUsersActions,
)(InviteUserDialogContent);

56
client/src/containers/Dialogs/InviteUserDialog/InviteUserDialogForm.js Normal file
View File

@@ -0,0 +1,56 @@
import React from 'react';
import {
FormGroup,
InputGroup,
Intent,
Button,
} from '@blueprintjs/core';
import { FastField, Form, useFormikContext, ErrorMessage } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import { CLASSES } from 'common/classes';
import classNames from 'classnames';
import { inputIntent, saveInvoke } from 'utils';
export default function InviteUserDialogForm({ onCancelClick, action }) {
const { isSubmitting } = useFormikContext();
const handleCancelBtnClick = (event) => {
saveInvoke(onCancelClick, event);
};
return (
<Form>
<div className={CLASSES.DIALOG_BODY}>
<p className="mb2">
<T id={'your_access_to_your_team'} />
</p>
<FastField name={'email'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'email'} />}
className={classNames('form-group--email', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="email" />}
inline={true}
>
<InputGroup medium={true} {...field} />
</FormGroup>
)}
</FastField>
</div>
<div className={CLASSES.DIALOG_FOOTER}>
<div className={CLASSES.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleCancelBtnClick}>
<T id={'cancel'} />
</Button>
<Button intent={Intent.PRIMARY} type="submit" disabled={isSubmitting}>
{action === 'edit' ? <T id={'edit'} /> : <T id={'invite'} />}
</Button>
</div>
</div>
</Form>
);
}

5
client/src/containers/Dialogs/UserFormDialog/index.js → client/src/containers/Dialogs/InviteUserDialog/index.js
View File

@@ -1,11 +1,12 @@
import React, { lazy } from 'react';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { FormattedMessage as T } from 'react-intl';
import { Dialog, DialogSuspense } from 'components';
import withDialogRedux from 'components/DialogReduxConnect';
import { compose } from 'utils';
const UserFormDialogContent = lazy(() => import('./UserFormDialogContent'));
const UserFormDialogContent = lazy(() => import('./InviteUserDialogContent'));
// User form dialog.
function UserFormDialog({
dialogName,
payload = { action: '', id: null },

10
client/src/containers/Dialogs/InviteUserDialog/utils.js Normal file
View File

@@ -0,0 +1,10 @@
import { formatMessage } from 'services/intl';
export const transformApiErrors = (errors) => {
const fields = {};
if (errors.find(error => error.type === 'EMAIL.ALREADY.INVITED')) {
fields.email = formatMessage({ id: 'email_is_already_used' });
}
return fields;
}

162
client/src/containers/Dialogs/UserFormDialog/UserFormDialogContent.js
View File

@@ -1,162 +0,0 @@
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);

60
client/src/containers/Preferences/Accountant/Accountant.js
View File

@@ -1,9 +1,59 @@
import React from 'react';
import React, { useEffect } from 'react';
import classNames from 'classnames';
import { Formik } from 'formik';
import { useQuery } from 'react-query';
import { CLASSES } from 'common/classes';
import { LoadingIndicator } from 'components';
import AccountantForm from './AccountantForm';
import { AccountantSchema } from './Accountant.schema';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
import withSettingsActions from 'containers/Settings/withSettingsActions';
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import { compose } from 'utils';
// Accountant preferences.
function AccountantPreferences({
changePreferencesPageTitle,
// #withAccountsActions
requestFetchAccounts,
}) {
const initialValues = {};
useEffect(() => {
changePreferencesPageTitle('Accountant');
}, [changePreferencesPageTitle]);
const fetchAccounts = useQuery('accounts-list', (key) =>
requestFetchAccounts(),
);
export default function AccountantPreferences() {
return (
<div class="preferences__inside-content--accountant">
<div
className={classNames(
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_ACCOUNTANT,
)}
>
<div className={classNames(CLASSES.CARD)}>
<LoadingIndicator loading={fetchAccounts.isFetching} spinnerSize={28}>
<Formik
initialValues={initialValues}
validationSchema={AccountantSchema}
component={AccountantForm}
/>
</LoadingIndicator>
</div>
</div>
);
}
}
export default compose(
withSettings(({ organizationSettings }) => ({ organizationSettings })),
withSettingsActions,
withDashboardActions,
withAccountsActions,
)(AccountantPreferences);

10
client/src/containers/Preferences/Accountant/Accountant.schema.js Normal file
View File

@@ -0,0 +1,10 @@
import * as Yup from 'yup';
const Schema = Yup.object().shape({
accounting_basis: Yup.string().required(),
account_code_required: Yup.boolean(),
customer_deposit_account: Yup.number().nullable(),
vendor_withdrawal_account: Yup.number().nullable(),
});
export const AccountantSchema = Schema;

105
client/src/containers/Preferences/Accountant/AccountantForm.js Normal file
View File

@@ -0,0 +1,105 @@
import React from 'react';
import { Form } from 'formik';
import {
FormGroup,
RadioGroup,
Radio,
Checkbox,
Button,
Intent,
} from '@blueprintjs/core';
import { useHistory } from 'react-router-dom';
import { AccountsSelectList } from 'components';
import {
FieldRequiredHint,
} from 'components';
import { FormattedMessage as T } from 'react-intl';
import { compose } from 'utils';
import withAccounts from 'containers/Accounts/withAccounts';
function AccountantForm({
// #withAccounts
accountsList,
}) {
const history = useHistory();
const handleCloseClick = () => {
history.go(-1);
};
return (
<Form>
<FormGroup label={<strong>Accounts</strong>}>
<Checkbox
label={'Make account code required when create a new accounts.'}
/>
<Checkbox
label={'Should account code be unique when create a new account.'}
/>
</FormGroup>
<FormGroup
labelInfo={<FieldRequiredHint />}
label={<strong>Accounting Basis</strong>}>
<RadioGroup inline={true}>
<Radio label="Cash" value="cash" />
<Radio label="Accural" value="accural" />
</RadioGroup>
</FormGroup>
<FormGroup
label={<strong>Deposit customer account</strong>}
helperText={
'Select a preferred account to deposit into it after customer make payment.'
}
labelInfo={<FieldRequiredHint />}
>
<AccountsSelectList
accounts={accountsList}
defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={['current_asset']}
/>
</FormGroup>
<FormGroup
label={<strong>Withdrawal customer account</strong>}
helperText={
'Select a preferred account to deposit into it after customer make payment.'
}
labelInfo={<FieldRequiredHint />}
>
<AccountsSelectList
accounts={accountsList}
defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={['current_asset']}
/>
</FormGroup>
<FormGroup
label={<strong>Vendor advance deposit</strong>}
helperText={
'Select a preferred account to deposit into it vendor advanced deposits.'
}
labelInfo={<FieldRequiredHint />}
>
<AccountsSelectList
accounts={accountsList}
defaultSelectText={<T id={'select_payment_account'} />}
filterByTypes={['current_asset', 'other_current_asset']}
/>
</FormGroup>
<div className={'card__footer'}>
<Button intent={Intent.PRIMARY} type="submit">
<T id={'save'} />
</Button>
<Button onClick={handleCloseClick}>
<T id={'close'} />
</Button>
</div>
</Form>
);
}
export default compose(
withAccounts(({ accountsList }) => ({ accountsList })),
)(AccountantForm);

28
client/src/containers/Preferences/Currencies/Currencies.js
View File

@@ -1,20 +1,20 @@
import React from 'react';
import { Button, Intent } from '@blueprintjs/core';
import { compose } from 'utils';
import withDialogActions from 'containers/Dialog/withDialogActions';
import classNames from 'classnames';
function Currencies({ openDialog }) {
const onClickNewCurrency = () => {
openDialog('currency-form',{});
};
import { CLASSES } from 'common/classes';
import CurrenciesList from './CurrenciesList';
export default function PreferencesCurrenciesPage() {
return (
<div className={'preferences__inside-content'}>
<div className={'preferences__tabs'}>
<div className={classNames(
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_CURRENCIES,
)}>
<div className={classNames(CLASSES.CARD)}>
<CurrenciesList />
</div>
</div>
);
}
export default compose(withDialogActions)(Currencies);
)
}

53
client/src/containers/Preferences/Currencies/CurrenciesDataTable.js
View File

@@ -1,4 +1,4 @@
import React, { useCallback, useState, useMemo } from 'react';
import React, { useCallback, useMemo } from 'react';
import {
Intent,
Button,
@@ -8,10 +8,9 @@ import {
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 { useIntl } from 'react-intl';
import { compose, saveInvoke } from 'utils';
import { DataTable, Icon } from 'components';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -23,24 +22,15 @@ function CurrenciesDataTable({
currenciesList,
currenciesLoading,
loading,
// #ownProps
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', {
@@ -59,7 +49,6 @@ function CurrenciesDataTable({
text={formatMessage({ id: 'edit_currency' })}
onClick={() => handleEditCurrency(currency)}
/>
<MenuItem
icon={<Icon icon="trash-16" iconSize={16} />}
text={formatMessage({ id: 'delete_currency' })}
@@ -116,31 +105,20 @@ function CurrenciesDataTable({
const handleDataTableFetchData = useCallback(
(...args) => {
onFetchData && onFetchData(...args);
saveInvoke(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>
<DataTable
columns={columns}
data={currenciesList}
loading={currenciesLoading}
onFetchData={handleDataTableFetchData}
noInitialFetch={true}
rowContextMenu={onRowContextMenu}
/>
);
}
@@ -148,7 +126,8 @@ export default compose(
withRouter,
withDashboardActions,
withDialogActions,
withCurrencies(({ currenciesList }) => ({
withCurrencies(({ currenciesList, currenciesLoading }) => ({
currenciesList,
currenciesLoading,
})),
)(CurrenciesDataTable);

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

@@ -1,6 +1,6 @@
import React, { useCallback, useState, useMemo, useEffect } from 'react';
import React, { useCallback, useState, useEffect } from 'react';
import { Alert, Intent } from '@blueprintjs/core';
import { useQuery, queryCache } from 'react-query';
import { useQuery } from 'react-query';
import {
FormattedMessage as T,
FormattedHTMLMessage,
@@ -8,33 +8,23 @@ import {
} from 'react-intl';
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 withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { compose } from 'utils';
// Currencies landing list page.
function CurrenciesList({
// #withCurrencies
currenciesList,
currenciesLoading,
// #withCurrenciesActions
requestDeleteCurrency,
requestFetchCurrencies,
// #withDialogActions
openDialog,
// #withDashboardActions
changePreferencesPageTitle,
}) {
const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const { formatMessage } = useIntl();
const fetchCurrencies = useQuery(
@@ -52,7 +42,7 @@ function CurrenciesList({
// Handle click and cancel/confirm currency delete
const handleDeleteCurrency = useCallback((currency) => {
setDeleteCurrencyState(currency);
}, []);
}, [setDeleteCurrencyState]);
// handle cancel delete currency alert.
const handleCancelCurrencyDelete = () => {
@@ -79,44 +69,29 @@ function CurrenciesList({
[deleteCurrencyState, requestDeleteCurrency, formatMessage],
);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback(
(accounts) => {
setSelectedRows(accounts);
},
[setSelectedRows],
);
return (
<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>
<>
<CurrenciesDataTable
onDeleteCurrency={handleDeleteCurrency}
onEditCurrency={handleEditCurrency}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
intent={Intent.DANGER}
isOpen={deleteCurrencyState}
onCancel={handleCancelCurrencyDelete}
onConfirm={handleConfirmCurrencyDelete}
>
<p>
Once you delete this currency, you won't be able to restore it later. Are you sure you want to delete ?
</p>
</Alert>
</>
);
}
export default compose(
withDashboardActions,
withCurrenciesActions,
withDialogActions,
)(CurrenciesList);

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

@@ -1,39 +1,17 @@
import React, { useState, useCallback, useEffect } from 'react';
import { useFormik } from 'formik';
import React, { useEffect } from 'react';
import { Formik } from 'formik';
import { mapKeys, snakeCase } from 'lodash';
import * as Yup from 'yup';
import {
Button,
FormGroup,
InputGroup,
Intent,
MenuItem,
Classes,
Spinner,
Position,
} from '@blueprintjs/core';
import { Intent } 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 { useIntl } from 'react-intl';
import { CLASSES } from 'common/classes';
import {
compose,
optionsMapToArray,
tansformDateValue,
momentFormatter,
} from 'utils';
import { compose, optionsMapToArray } from 'utils';
import {
If,
FieldRequiredHint,
ListSelect,
ErrorMessage,
AppToaster,
} from 'components';
import { AppToaster, LoadingIndicator } from 'components';
import GeneralForm from './GeneralForm';
import { PreferencesGeneralSchema } from './General.schema';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
@@ -51,524 +29,59 @@ function GeneralPreferences({
requestFetchOptions,
}) {
const { formatMessage } = useIntl();
const [selectedItems, setSelectedItems] = useState({});
const history = useHistory();
const fetchHook = useQuery(['settings'], () => {
requestFetchOptions();
});
const fetchSettings = useQuery(['settings'], () => requestFetchOptions());
useEffect(() => {
changePreferencesPageTitle(formatMessage({ id: 'general' }));
}, [changePreferencesPageTitle, formatMessage]);
const businessLocation = [{ id: 218, name: 'LIBYA', value: 'libya' }];
const languagesDisplay = [
{ id: 0, name: 'English', value: 'en' },
{ id: 1, name: 'Arabic', value: 'ar' },
];
const currencies = [
{ id: 0, name: 'US Dollar', value: 'USD' },
{ id: 1, name: 'Euro', value: 'EUR' },
{ id: 1, name: 'Libyan Dinar ', value: 'LYD' },
];
const fiscalYear = [
{
id: 0,
name: `${formatMessage({ id: 'january' })} - ${formatMessage({
id: 'december',
})}`,
value: 'january',
},
{
id: 1,
name: `${formatMessage({ id: 'february' })} - ${formatMessage({
id: 'january',
})}`,
value: 'february',
},
{
id: 2,
name: `${formatMessage({ id: 'march' })} - ${formatMessage({
id: 'february',
})}`,
value: 'March',
},
{
id: 3,
name: `${formatMessage({ id: 'april' })} - ${formatMessage({
id: 'march',
})}`,
value: 'april',
},
{
id: 4,
name: `${formatMessage({ id: 'may' })} - ${formatMessage({
id: 'april',
})}`,
value: 'may',
},
{
id: 5,
name: `${formatMessage({ id: 'june' })} - ${formatMessage({
id: 'may',
})}`,
value: 'june',
},
{
id: 6,
name: `${formatMessage({ id: 'july' })} - ${formatMessage({
id: 'june',
})}`,
value: 'july',
},
{
id: 7,
name: `${formatMessage({ id: 'august' })} - ${formatMessage({
id: 'july',
})}`,
value: 'August',
},
{
id: 8,
name: `${formatMessage({ id: 'september' })} - ${formatMessage({
id: 'august',
})}`,
value: 'september',
},
{
id: 9,
name: `${formatMessage({ id: 'october' })} - ${formatMessage({
id: 'november',
})}`,
value: 'october',
},
{
id: 10,
name: `${formatMessage({ id: 'november' })} - ${formatMessage({
id: 'october',
})}`,
value: 'november',
},
{
id: 11,
name: `${formatMessage({ id: 'december' })} - ${formatMessage({
id: 'november',
})}`,
value: 'december',
},
];
const dateFormat = [
{
id: 1,
name: 'MM/DD/YY',
label: `${moment().format('MM/DD/YYYY')}`,
value: 'mm/dd/yy',
},
{
id: 2,
name: 'DD/MM/YY',
label: `${moment().format('DD/MM/YYYY')}`,
value: 'dd/mm/yy',
},
{
id: 3,
name: 'YY/MM/DD',
label: `${moment().format('YYYY/MM/DD')}`,
value: 'yy/mm/dd',
},
{
id: 4,
name: 'MM-DD-YY',
label: `${moment().format('MM-DD-YYYY')}`,
value: 'mm-dd-yy',
},
{
id: 5,
name: 'DD-MM-YY',
label: `${moment().format('DD-MM-YYYY')}`,
value: 'dd-mm-yy',
},
{
id: 6,
name: 'YY-MM-DD',
label: `${moment().format('YYYY-MM-DD')}`,
value: 'yy-mm-dd',
},
];
const validationSchema = Yup.object().shape({
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()
.label(formatMessage({ id: 'base_currency_' })),
fiscal_year: Yup.string()
.required()
.label(formatMessage({ id: 'fiscal_year_' })),
language: Yup.string()
.required()
.label(formatMessage({ id: 'language' })),
time_zone: Yup.string()
.required()
.label(formatMessage({ id: 'time_zone_' })),
date_format: Yup.string()
.required()
.label(formatMessage({ id: 'date_format_' })),
});
function snakeCaseChange(data) {
function transformGeneralSettings(data) {
return mapKeys(data, (value, key) => snakeCase(key));
}
const initialValues = snakeCaseChange(organizationSettings);
const initialValues = {
...transformGeneralSettings(organizationSettings),
};
const {
values,
errors,
touched,
setFieldValue,
getFieldProps,
handleSubmit,
resetForm,
isSubmitting,
} = useFormik({
enableReinitialize: true,
initialValues: {
...initialValues,
},
validationSchema,
onSubmit: (values, { setSubmitting }) => {
const options = optionsMapToArray(values).map((option) => {
return { key: option.key, ...option, group: 'organization' };
});
requestSubmitOptions({ options })
.then((response) => {
AppToaster.show({
message: formatMessage({
id: 'the_options_has_been_successfully_created',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
queryCache.invalidateQueries('settings');
})
.catch((error) => {
setSubmitting(false);
const handleFormSubmit = (values, { setSubmitting, resetForm }) => {
const options = optionsMapToArray(values).map((option) => {
return { key: option.key, ...option, group: 'organization' };
});
requestSubmitOptions({ options })
.then((response) => {
AppToaster.show({
message: formatMessage({
id: 'the_options_has_been_successfully_created',
}),
intent: Intent.SUCCESS,
});
},
});
const onItemRenderer = (item, { handleClick }) => (
<MenuItem key={item.id} text={item.name} onClick={handleClick} />
);
const currencyItem = (item, { handleClick }) => (
<MenuItem
key={item.id}
text={item.name}
label={item.value}
onClick={handleClick}
/>
);
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}
text={item.name}
label={item.label}
onClick={handleClick}
/>
);
const onItemsSelect = (filedName) => {
return (filed) => {
setSelectedItems({
...selectedItems,
[filedName]: filed,
setSubmitting(false);
resetForm();
queryCache.invalidateQueries('settings');
})
.catch((error) => {
setSubmitting(false);
});
setFieldValue(filedName, filed.value);
};
};
const filterItems = (query, item, _index, exactMatch) => {
const normalizedTitle = item.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
};
const handleTimezoneChange = useCallback(
(timezone) => {
setFieldValue('time_zone', timezone);
},
[setFieldValue],
);
const handleClose = () => {
history.goBack();
};
return (
<div
className={classNames({
'preferences__inside-content--general': true,
preferences__loading: fetchHook.pending,
})}
className={classNames(
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_GENERAL,
)}
>
<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 }} />}
className={'form-group--org-name'}
>
<InputGroup
medium={'true'}
intent={errors.name && touched.name && Intent.DANGER}
{...getFieldProps('name')}
<div className={classNames(CLASSES.CARD)}>
<LoadingIndicator loading={fetchSettings.isFetching} spinnerSize={28}>
<Formik
initialValues={initialValues}
validationSchema={PreferencesGeneralSchema}
onSubmit={handleFormSubmit}
component={GeneralForm}
/>
</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'} />}
inline={true}
intent={errors.industry && touched.industry && Intent.DANGER}
helperText={<ErrorMessage name="industry" {...{ errors, touched }} />}
className={'form-group--org-industry'}
>
<InputGroup
medium={'true'}
intent={errors.industry && touched.industry && Intent.DANGER}
{...getFieldProps('industry')}
/>
</FormGroup>
<FormGroup
label={<T id={'business_location'} />}
className={classNames(
'form-group--business-location',
'form-group--select-list',
Classes.FILL,
)}
inline={true}
helperText={<ErrorMessage name="location" {...{ errors, touched }} />}
intent={errors.location && touched.location && Intent.DANGER}
>
<ListSelect
items={businessLocation}
noResults={<MenuItem disabled={true} text="No result." />}
itemRenderer={onItemRenderer}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('location')}
selectedItem={values.location}
selectedItemProp={'value'}
defaultText={<T id={'select_business_location'} />}
labelProp={'name'}
/>
</FormGroup>
<FormGroup
label={<T id={'base_currency'} />}
labelInfo={<FieldRequiredHint />}
className={classNames(
'form-group--base-currency',
'form-group--select-list',
Classes.LOADING,
Classes.FILL,
)}
inline={true}
helperText={
<ErrorMessage name="base_currency" {...{ errors, touched }} />
}
intent={
errors.base_currency && touched.base_currency && Intent.DANGER
}
>
<ListSelect
items={currencies}
noResults={<MenuItem disabled={true} text="No result." />}
itemRenderer={currencyItem}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('base_currency')}
itemPredicate={filterItems}
selectedItem={values.base_currency}
selectedItemProp={'value'}
defaultText={<T id={'select_base_currency'} />}
labelProp={'name'}
/>
</FormGroup>
<FormGroup
label={<T id={'fiscal_year'} />}
labelInfo={<FieldRequiredHint />}
className={classNames(
'form-group--fiscal-year',
'form-group--select-list',
Classes.FILL,
)}
inline={true}
helperText={
<ErrorMessage name="fiscal_year" {...{ errors, touched }} />
}
intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER}
>
<ListSelect
items={fiscalYear}
noResults={<MenuItem disabled={true} text="No result." />}
itemRenderer={onItemRenderer}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('fiscal_year')}
itemPredicate={filterItems}
selectedItem={values.fiscal_year}
selectedItemProp={'value'}
defaultText={<T id={'select_fiscal_year'} />}
labelProp={'name'}
/>
</FormGroup>
<FormGroup
label={<T id={'language'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames(
'form-group--language',
'form-group--select-list',
Classes.FILL,
)}
intent={errors.language && touched.language && Intent.DANGER}
helperText={<ErrorMessage name="language" {...{ errors, touched }} />}
>
<ListSelect
items={languagesDisplay}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={onItemRenderer}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('language')}
itemPredicate={filterItems}
selectedItem={values.language}
selectedItemProp={'value'}
defaultText={<T id={'select_language'} />}
labelProp={'name'}
/>
</FormGroup>
<FormGroup
label={<T id={'time_zone'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames(
'form-group--time-zone',
'form-group--select-list',
Classes.FILL,
)}
intent={errors.time_zone && touched.time_zone && Intent.DANGER}
helperText={
<ErrorMessage name="time_zone" {...{ errors, touched }} />
}
>
<TimezonePicker
value={values.time_zone}
onChange={handleTimezoneChange}
valueDisplayFormat="composite"
placeholder={<T id={'select_time_zone'} />}
/>
</FormGroup>
<FormGroup
label={<T id={'date_format'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames(
'form-group--language',
'form-group--select-list',
Classes.FILL,
)}
intent={errors.date_format && touched.date_format && Intent.DANGER}
helperText={
<ErrorMessage name="date_format" {...{ errors, touched }} />
}
>
<ListSelect
items={dateFormat}
noResults={<MenuItem disabled={true} text="No result." />}
itemRenderer={date_format}
popoverProp={{ minimal: true }}
onItemSelect={onItemsSelect('date_format')}
itemPredicate={filterItems}
selectedItem={values.date_format}
selectedItemProp={'value'}
defaultText={<T id={'select_date_format'} />}
labelProp={'name'}
/>
</FormGroup>
<div className={'preferences__floating-footer '}>
<Button
className={'preferences-button'}
intent={Intent.PRIMARY}
type="submit"
loading={isSubmitting}
>
<T id={'save'} />
</Button>
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
</div>
</form>
<If condition={fetchHook.isFetching || isSubmitting}>
<div className={'preferences__loading-overlay'}>
<Spinner size={40} />
</div>
</If>
</LoadingIndicator>
</div>
</div>
);
}

34
client/src/containers/Preferences/General/General.schema.js Normal file
View File

@@ -0,0 +1,34 @@
import * as Yup from 'yup';
import { formatMessage } from 'services/intl';
const Schema = Yup.object().shape({
name: Yup.string()
.required()
.label(formatMessage({ id: 'organization_name_' })),
financial_date_start: Yup.date()
.required()
.label(formatMessage({ id: 'date_start_' })),
industry: Yup.string()
.nullable()
.label(formatMessage({ id: 'organization_industry_' })),
location: Yup.string()
.nullable()
.label(formatMessage({ id: 'location' })),
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' })),
time_zone: Yup.string()
.required()
.label(formatMessage({ id: 'time_zone_' })),
date_format: Yup.string()
.required()
.label(formatMessage({ id: 'date_format_' })),
});
export const PreferencesGeneralSchema = Schema;

250
client/src/containers/Preferences/General/GeneralForm.js Normal file
View File

@@ -0,0 +1,250 @@
import { Form } from 'formik';
import React from 'react';
import {
Button,
FormGroup,
InputGroup,
Intent,
Position,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { TimezonePicker } from '@blueprintjs/timezone';
import { ErrorMessage, FastField } from 'formik';
import { FormattedMessage as T } from 'react-intl';
import { DateInput } from '@blueprintjs/datetime';
import { useHistory } from 'react-router-dom';
import { ListSelect, FieldRequiredHint } from 'components';
import {
inputIntent,
momentFormatter,
tansformDateValue,
handleDateChange,
} from 'utils';
import { CLASSES } from 'common/classes';
import countriesOptions from 'common/countries';
import currencies from 'common/currencies';
import fiscalYearOptions from 'common/fiscalYearOptions';
import languages from 'common/languagesOptions';
import dateFormatsOptions from 'common/dateFormatsOptions';
export default function PreferencesGeneralForm({}) {
const history = useHistory();
const handleCloseClick = () => {
history.go(-1);
};
return (
<Form>
<FastField name={'name'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'organization_name'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="name" />}
className={'form-group--org-name'}
>
<InputGroup medium={'true'} {...field} />
</FormGroup>
)}
</FastField>
<FastField name={'financial_date_start'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'financial_starting_date'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="financial_date_start" />}
className={classNames('form-group--select-list', CLASSES.FILL)}
>
<DateInput
{...momentFormatter('MMMM Do YYYY')}
value={tansformDateValue(value)}
onChange={handleDateChange((formattedDate) => {
form.setFieldValue('financial_date_start', formattedDate);
})}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'industry'}>
{({ field, meta: { error, touched } }) => (
<FormGroup
label={<T id={'organization_industry'} />}
inline={true}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="industry" />}
className={'form-group--org-industry'}
>
<InputGroup medium={'true'} {...field} />
</FormGroup>
)}
</FastField>
<FastField name={'location'}>
{({ field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'business_location'} />}
className={classNames(
'form-group--business-location',
CLASSES.FILL,
)}
inline={true}
helperText={<ErrorMessage name="location" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={countriesOptions}
onItemSelect={(item) => {}}
selectedItem={value}
selectedItemProp={'value'}
defaultText={<T id={'select_business_location'} />}
labelProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'base_currency'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'base_currency'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--base-currency', CLASSES.FILL)}
inline={true}
helperText={<ErrorMessage name="base_currency" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={currencies}
onItemSelect={(currency) => {
form.setFieldValue('base_currency', currency.code);
}}
selectedItem={value}
selectedItemProp={'code'}
defaultText={<T id={'select_base_currency'} />}
labelProp={'label'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'fiscal_year'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'fiscal_year'} />}
labelInfo={<FieldRequiredHint />}
className={classNames('form-group--fiscal-year', CLASSES.FILL)}
inline={true}
helperText={<ErrorMessage name="fiscal_year" />}
intent={inputIntent({ error, touched })}
>
<ListSelect
items={fiscalYearOptions}
selectedItemProp={'value'}
labelProp={'name'}
defaultText={<T id={'select_fiscal_year'} />}
selectedItem={value}
onItemSelect={(item) => {}}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'language'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'language'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames('form-group--language', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="language" />}
>
<ListSelect
items={languages}
selectedItemProp={'value'}
labelProp={'name'}
defaultText={<T id={'select_language'} />}
selectedItem={value}
onItemSelect={(item) => {}}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<FastField name={'time_zone'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'time_zone'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames(
'form-group--time-zone',
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="time_zone" />}
>
<TimezonePicker
value={value}
onChange={(timezone) => {
form.setFieldValue('time_zone', timezone);
}}
valueDisplayFormat="composite"
placeholder={<T id={'select_time_zone'} />}
/>
</FormGroup>
)}
</FastField>
<FastField name={'date_format'}>
{({ form, field: { value }, meta: { error, touched } }) => (
<FormGroup
label={<T id={'date_format'} />}
labelInfo={<FieldRequiredHint />}
inline={true}
className={classNames('form-group--date-format', CLASSES.FILL)}
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name="date_format" />}
>
<ListSelect
items={dateFormatsOptions}
onItemSelect={(dateFormat) => {
form.setFieldValue('date_format', dateFormat);
}}
selectedItem={value}
selectedItemProp={'value'}
defaultText={<T id={'select_date_format'} />}
labelProp={'name'}
popoverProps={{ minimal: true }}
/>
</FormGroup>
)}
</FastField>
<div className={'card__footer'}>
<Button
intent={Intent.PRIMARY}
type="submit"
>
<T id={'save'} />
</Button>
<Button onClick={handleCloseClick}>
<T id={'close'} />
</Button>
</div>
</Form>
);
}

24
client/src/containers/Preferences/Users/Users.js
View File

@@ -1,20 +1,28 @@
import React from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
import withUserPreferences from 'containers/Preferences/Users/withUserPreferences'
import withUserPreferences from 'containers/Preferences/Users/withUserPreferences';
function UsersPreferences({ openDialog }) {
const onChangeTabs = (currentTabId) => {};
return (
<div class='preferences__inside-content preferences__inside-content--users-roles'>
<div class='preferences__tabs'>
<Tabs animate={true} onChange={onChangeTabs}>
<Tab id='users' title='Users' />
<Tab id='roles' title='Roles' />
</Tabs>
<div className={classNames(
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT,
CLASSES.PREFERENCES_PAGE_INSIDE_CONTENT_USERS,
)}>
<div className={classNames(CLASSES.CARD)}>
<div className={classNames(CLASSES.PREFERENCES_PAGE_TABS)}>
<Tabs animate={true} onChange={onChangeTabs}>
<Tab id="users" title="Users" />
<Tab id="roles" title="Roles" />
</Tabs>
</div>
<PreferencesSubContent preferenceTab="users" />
</div>
<PreferencesSubContent preferenceTab='users' />
</div>
);
}

10
client/src/containers/Preferences/Users/UsersActions.js
View File

@@ -1,9 +1,9 @@
import React, {useCallback} from 'react';
import React from 'react';
import {
Button,
Intent,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { FormattedMessage as T } from 'react-intl';
import Icon from 'components/Icon';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -13,9 +13,9 @@ function UsersActions({
openDialog,
closeDialog,
}) {
const onClickNewUser = useCallback(() => {
openDialog('user-form');
}, [openDialog]);
const onClickNewUser = () => {
openDialog('invite-user');
};
return (
<div className="preferences-actions">

53
client/src/containers/Preferences/Users/UsersDataTable.js
View File

@@ -12,18 +12,18 @@ import {
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 { FormattedMessage as T, useIntl } from 'react-intl';
import { compose, firstLettersArgs } from 'utils';
import { DataTable, Icon, If } from 'components';
import withDialogActions from 'containers/Dialog/withDialogActions';
import withUsers from 'containers/Users/withUsers';
const AvatarCell = (row) => {
return <span className={'avatar'}>{ firstLettersArgs(row.email) }</span>;
}
function UsersDataTable({
// #withDialogActions
openDialog,
@@ -39,7 +39,6 @@ function UsersDataTable({
onDeleteUser,
onSelectedRowsChange,
}) {
const [initialMount, setInitialMount] = useState(false);
const { formatMessage } = useIntl();
const onEditUser = useCallback(
@@ -80,7 +79,7 @@ function UsersDataTable({
/>
</Menu>
),
[onInactiveUser, onDeleteUser, onEditUser],
[onInactiveUser, onDeleteUser, onEditUser, formatMessage],
);
const onRowContextMenu = useCallback(
(cell) => {
@@ -91,6 +90,12 @@ function UsersDataTable({
const columns = useMemo(
() => [
{
id: 'avatar',
Header: '',
accessor: AvatarCell,
width: 100,
},
{
id: 'full_name',
Header: formatMessage({ id: 'full_name' }),
@@ -154,27 +159,15 @@ function UsersDataTable({
},
[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>
<DataTable
columns={columns}
data={usersList}
loading={loading}
onFetchData={handelDataTableFetchData}
noInitialFetch={true}
rowContextMenu={onRowContextMenu}
/>
);
}

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

@@ -1,47 +1,32 @@
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import React, { useState, useCallback, useEffect } from 'react';
import { queryCache, useQuery } from 'react-query';
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 UsersDataTable from './UsersDataTable';
import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
import { snakeCase } from 'lodash';
import AppToaster from 'components/AppToaster';
import { compose } from 'utils';
function UsersListPreferences({
// #withDialog
openDialog,
// #withDashboardActions
changePreferencesPageTitle,
// #withUsers
usersList,
// #withUsersActions
requestDeleteUser,
requestInactiveUser,
requestFetchUsers,
// #ownProps
onFetchData,
}) {
const [deleteUserState, setDeleteUserState] = useState(false);
const [inactiveUserState, setInactiveUserState] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const { formatMessage } = useIntl();
@@ -91,9 +76,6 @@ function UsersListPreferences({
const handleEditUser = useCallback(() => {}, []);
// Handle confirm User delete
const handleConfirmUserDelete = useCallback(() => {
if (!deleteUserState) {
@@ -115,63 +97,44 @@ function UsersListPreferences({
});
}, [deleteUserState, requestDeleteUser, formatMessage]);
// const handelDataTableFetchData = useCallback(() => {
// onFetchData && onFetchData();
// }, [onFetchData]);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback(
(accounts) => {
setSelectedRows(accounts);
},
[setSelectedRows],
);
return (
<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>
</DashboardPageContent>
</DashboardInsider>
<>
<UsersDataTable
loading={fetchUsers.isFetching}
onDeleteUser={handleDeleteUser}
onInactiveUser={handleInactiveUser}
onEditUser={handleEditUser}
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
intent={Intent.DANGER}
isOpen={deleteUserState}
onCancel={handleCancelUserDelete}
onConfirm={handleConfirmUserDelete}
>
<p>
Once you delete this user, you won't be able to restore it later. Are you sure you want to delete ?
</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>
</>
);
}
export default compose(
withDialogActions,
withDashboardActions,
withUsersActions,
)(UsersListPreferences);

1
client/src/lang/en/index.js
View File

@@ -854,4 +854,5 @@ export default {
save_and_send: 'Save and Send',
posting_date: 'Posting date',
customer: 'Customer',
email_is_already_used: 'The email is already used.',
};

8
client/src/routes/preferences.js
View File

@@ -2,7 +2,7 @@ import General from 'containers/Preferences/General/General';
import Users from 'containers/Preferences/Users/Users';
import Accountant from 'containers/Preferences/Accountant/Accountant';
import Accounts from 'containers/Preferences/Accounts/Accounts';
import CurrenciesList from 'containers/Preferences/Currencies/CurrenciesList'
import Currencies from 'containers/Preferences/Currencies/Currencies'
const BASE_URL = '/preferences';
@@ -19,7 +19,7 @@ export default [
},
{
path: `${BASE_URL}/currencies`,
component: CurrenciesList,
component: Currencies,
exact: true,
},
{
@@ -27,8 +27,4 @@ export default [
component: Accountant,
exact: true,
},
{
path: `${BASE_URL}/accounts`,
component: Accounts,
},
];

1
client/src/store/currencies/currencies.reducer.js
View File

@@ -3,6 +3,7 @@ import t from 'store/types';
const initialState = {
data: {},
loading: false,
};
export default createReducer(initialState, {

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

@@ -49,7 +49,16 @@ export const deleteUser = ({ id }) => {
};
export const submitInvite = ({ form }) => {
return (dispatch) => ApiService.post(`invite/send`, form);
return (dispatch) => new Promise((resolve, reject) => {
ApiService.post(`invite/send`, form)
.then((response) => { resolve(response); })
.catch((error) => {
const { response } = error;
const { data } = response;
reject(data?.errors);
});
});
};
export const editUser = ({ form, id }) => {

12
client/src/style/App.scss
View File

@@ -587,4 +587,16 @@ body.authentication {
.dropzone-container{
max-width: 250px;
margin-left: auto;
}
.card{
background: #fff;
border: 1px solid #d2dce2;
}
.form-group--select-list{
button{
justify-content: start;
}
}

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

@@ -355,20 +355,7 @@
}
&__preferences-topbar{
border-bottom: 1px solid #E5E5E5;
height: 65px;
padding: 0 0 0 22px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
h2{
font-size: 22px;
font-weight: 300;
margin: 0;
color: #555;
}
}
&__footer{

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

@@ -1,16 +1,37 @@
.dashboard-content--preferences {
// margin-left: 430px;
margin-left: 410px;
// width: 100%;
position: relative;
flex-direction: row;
flex: 1 0 0;
min-width: auto;
background-color: #fbfbfb;
}
.preferences {
&__inside-content--tabable {
margin-left: -25px;
margin-right: -25px;
.dashboard {
&__preferences-content {
flex: 1 0 0;
display: flex;
flex-direction: column;
}
}
.preferences-page {
&__inside-content {
display: flex;
flex-direction: column;
height: 100%;
&--tabable {
margin-left: -25px;
margin-right: -25px;
}
.card{
margin: 15px;
}
.bigcapital-datatable{
.table .tbody .tbody-inner > .loading{
padding: 30px 0;
}
}
}
&__inside-content {
.#{$ns}-tab-list {
border-bottom: 1px solid #e5e5e5;
@@ -29,8 +50,75 @@
&__tabs-extra-actions {
margin-left: auto;
}
}
&__topbar-actions {
.preferences-page {
display: flex;
flex: 1 0 0;
&__content {
flex: 1 0 0;
display: flex;
flex-direction: column;
margin-left: 220px;
.dashboard__card {
margin: 15px;
flex: 1 0 0;
}
}
}
// Preferences topbar.
// -----------------------------
.preferences-topbar {
border-bottom: 1px solid #d2dde2;
min-height: 60px;
flex: 60px 0 0;
padding: 0 0 0 22px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #fff;
&__title {
h2 {
font-size: 22px;
font-weight: 400;
margin: 0;
color: #48485b;
}
}
&__user {
display: flex;
align-items: center;
margin-right: 14px;
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
padding: 0;
background-size: contain;
background-color: #eed1f2;
border-radius: 50%;
height: 35px;
width: 35px;
.user-text {
font-size: 12px;
color: #804f87;
}
&,
&:hover,
&:focus {
background-color: #eed1f2;
border: 0;
box-shadow: none;
}
}
}
&__actions {
margin-left: auto;
padding-right: 15px;
margin-right: 15px;
@@ -40,51 +128,60 @@
margin-left: 10px;
}
}
&-button {
margin-right: 10px;
}
&__floating-footer {
position: fixed;
bottom: 0;
left: 430px;
right: 0;
background: #fff;
padding: 10px 18px;
border-top: 1px solid #ececec;
}
}
.preferences__sidebar {
background: #fdfdfd;
position: fixed;
left: 190px;
top: -5px;
// Preferences sidebar.
// -----------------------------
.preferences-sidebar {
background: #e5eaee;
border-right: 1px solid #c6d0d9;
min-width: 220px;
max-width: 220px;
height: 100%;
position: fixed;
.sidebar-wrapper {
&__wrapper {
height: 100%;
}
&-head {
.ScrollbarsCustom-Track {
&.ScrollbarsCustom-TrackY,
&.ScrollbarsCustom-TrackX{
background: rgba(0, 0, 0, 0);
}
}
.ScrollbarsCustom-Thumb{
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(0, 0, 0, 0);
}
}
&:hover {
.ScrollbarsCustom-Thumb{
&.ScrollbarsCustom-ThumbX,
&.ScrollbarsCustom-ThumbY {
background: rgba(0, 0, 0, 0.15);
}
}
}
&__head {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid #e5e5e5;
height: 70px;
height: 60px;
padding: 0 22px;
h2 {
font-size: 22px;
font-weight: 300;
color: #555;
color: #48485b;
font-weight: 400;
margin: 0;
}
}
&-menu {
&__menu {
padding: 0;
background: transparent;
@@ -96,69 +193,124 @@
&:hover,
&.#{$ns}-active {
background-color: #ebf1f5;
background-color: rgba(255, 255, 255, 0.5);
color: #333;
}
}
}
}
// Preference
// General page
//---------------------------------
.preferences__inside-content--general {
margin: 20px;
.bp3-form-group {
margin: 18px 18px;
.bp3-label {
min-width: 180px;
}
.bp3-form-content {
width: 50%;
.preferences-page__inside-content--general {
.card {
padding: 25px;
.card__footer {
padding-top: 16px;
border-top: 1px solid #e0e7ea;
margin-top: 30px;
.bp3-button {
min-width: 60px;
+ .bp3-button{
margin-left: 10px;
}
}
}
}
.form-group--org-name,
.form-group--org-industry {
.bp3-form-group {
max-width: 550px;
.bp3-label {
min-width: 180px;
}
.bp3-form-content {
position: relative;
width: 70%;
}
}
.form-group--time-zone {
.bp3-menu {
max-height: 300px;
max-width: 400px;
overflow: auto;
padding: 0;
}
.bp3-text-muted {
color: #000000;
}
.bp3-button:not([class*='bp3-intent-']):not(.bp3-minimal) {
background: #fff;
box-shadow: 0 0 0 transparent;
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;
width: 100%;
}
}
}
// Users/Roles List.
// ---------------------------------
.preferences__inside-content--users-roles {
.preferences-page__inside-content--users{
.bigcapital-datatable {
.table .th,
.table .td {
padding: 0.8rem 0.5rem;
.td{
.avatar{
height: 28px;
width: 28px;
text-align: center;
background: #b7bfc6;
border-radius: 50%;
line-height: 28px;
color: #fff;
text-transform: uppercase;
margin-left: 10px;
}
}
.td.status {
text-transform: uppercase;
}
.tr:last-child .td{
border-bottom: 0;
}
}
}
// Currencies List.
// ---------------------------------
.preferences-page__inside-content--currencies{
.bigcapital-datatable {
.tr:last-child .td{
border-bottom: 0;
}
}
}
// Accountant.
// ---------------------------------
.preferences-page__inside-content--accountant {
.card {
padding: 25px;
.card__footer {
padding-top: 16px;
border-top: 1px solid #e0e7ea;
margin-top: 30px;
.bp3-button {
min-width: 60px;
+ .bp3-button{
margin-left: 10px;
}
}
}
}
.form-group--select-list{
button{
min-width: 250px;
}
}
.bp3-form-group {
.bp3-form-helper-text{
margin-top: 7px;
}
label.bp3-label {
margin-bottom: 7px;
}
}
}

2
server/src/api/controllers/ItemCategories.ts
View File

@@ -89,7 +89,7 @@ export default class ItemsCategoriesController extends BaseController {
.isInt({ min: 0, max: DATATYPES_LENGTH.INT_10 })
.toInt(),
check('description')
.optional()
.optional({ nullable: true })
.isString()
.trim()
.escape()