mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-15 12:20:31 +00:00
feat: application preferences.
This commit is contained in:
Ahmed Bouhuolia
@@ -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);
|
||||
|
||||
@@ -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
105
client/src/containers/Preferences/Accountant/AccountantForm.js
Normal 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);
|
||||
@@ -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);
|
||||
)
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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
34
client/src/containers/Preferences/General/General.schema.js
Normal 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
250
client/src/containers/Preferences/General/GeneralForm.js
Normal 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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user