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

WIP Fix & last tasks

Browse Source
This commit is contained in:
elforjani3
2020-05-31 21:33:45 +02:00
parent 2e8ffa2aa9
commit 41d106e1a7
30 changed files with 1483 additions and 948 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,25 +3,26 @@ import { Route, Switch } from 'react-router-dom';
import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
import UsersActions from 'containers/Preferences/Users/UsersActions';
import CurrenciesActions from 'containers/Preferences/Currencies/CurrenciesActions';
import { compose } from 'utils';
import { connect } from 'react-redux';
export default function PreferencesTopbar() {
function PreferencesTopbar({ pageTitle }) {
return (
<div class="dashboard__preferences-topbar">
<h2>Accounts</h2>
{/* <h2>Accounts</h2> */}
<div class="dashboard__title">
<h2>{pageTitle}</h2>
</div>
<div class="preferences__topbar-actions">
<Route pathname="/preferences">
<Switch>
<Route
exact
path={'/preferences/users'}
component={UsersActions} />
<Route exact path={'/preferences/users'} component={UsersActions} />
<Route
exact
path={'/preferences/currencies'}
component={CurrenciesActions} />
component={CurrenciesActions}
/>
</Switch>
</Route>
</div>
@@ -31,4 +32,10 @@ export default function PreferencesTopbar() {
</div>
</div>
);
}
}
const mapStateToProps = (state) => ({
pageTitle: state.dashboard.preferencesPageTitle,
});
export default compose(connect(mapStateToProps))(PreferencesTopbar);

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

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

325
client/src/containers/Accounting/MakeJournalEntriesForm.js
View File

@@ -1,6 +1,12 @@
import React, {useMemo, useState, useEffect, useRef, useCallback} from 'react';
import React, {
useMemo,
useState,
useEffect,
useRef,
useCallback,
} from 'react';
import * as Yup from 'yup';
import { useFormik } from "formik";
import { useFormik } from 'formik';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import { useIntl } from 'react-intl';
@@ -20,8 +26,7 @@ import Dragzone from 'components/Dragzone';
import MediaConnect from 'connectors/Media.connect';
import useMedia from 'hooks/useMedia';
import {compose} from 'utils';
import { compose } from 'utils';
function MakeJournalEntriesForm({
// #withMedia
@@ -39,10 +44,16 @@ function MakeJournalEntriesForm({
manualJournalId,
manualJournal,
onFormSubmit,
onCancelForm,
onCancelForm,
}) {
const { formatMessage } = useIntl();
const { setFiles, saveMedia, deletedFiles, setDeletedFiles, deleteMedia } = useMedia({
const {
setFiles,
saveMedia,
deletedFiles,
setDeletedFiles,
deleteMedia,
} = useMedia({
saveCallback: requestSubmitMedia,
deleteCallback: requestDeleteMedia,
});
@@ -51,79 +62,95 @@ function MakeJournalEntriesForm({
}, []);
const savedMediaIds = useRef([]);
const clearSavedMediaIds = () => { savedMediaIds.current = []; }
const clearSavedMediaIds = () => {
savedMediaIds.current = [];
};
useEffect(() => {
if (manualJournal && manualJournal.id) {
changePageTitle(formatMessage({id:'edit_journal'}));
changePageTitle(formatMessage({ id: 'edit_journal' }));
changePageSubtitle(`No. ${manualJournal.journal_number}`);
} else {
changePageTitle(formatMessage({id:'new_journal'}));
changePageTitle(formatMessage({ id: 'new_journal' }));
}
}, [changePageTitle, changePageSubtitle, manualJournal,formatMessage]);
}, [changePageTitle, changePageSubtitle, manualJournal, formatMessage]);
const validationSchema = Yup.object().shape({
journal_number: Yup.string().required().label(formatMessage({id:'journal_number_'})),
date: Yup.date().required().label(formatMessage({id:'date'})),
journal_number: Yup.string()
.required()
.label(formatMessage({ id: 'journal_number_' })),
date: Yup.date().label(formatMessage({ id: 'date' })),
reference: Yup.string(),
description: Yup.string(),
entries: Yup.array().of(
Yup.object().shape({
credit: Yup.number().nullable(),
debit: Yup.number().nullable(),
account_id: Yup.number().nullable().when(['credit', 'debit'], {
is: (credit, debit) => credit || debit,
then: Yup.number().required(),
}),
account_id: Yup.number()
.nullable()
.when(['credit', 'debit'], {
is: (credit, debit) => credit || debit,
then: Yup.number().required(),
}),
note: Yup.string().nullable(),
}),
)
),
});
const saveInvokeSubmit = useCallback((payload) => {
onFormSubmit && onFormSubmit(payload)
}, [onFormSubmit]);
const saveInvokeSubmit = useCallback(
(payload) => {
onFormSubmit && onFormSubmit(payload);
},
[onFormSubmit],
);
const [payload, setPayload] = useState({});
const defaultEntry = useMemo(() => ({
account_id: null,
credit: 0,
debit: 0,
note: '',
}), []);
const defaultEntry = useMemo(
() => ({
account_id: null,
credit: 0,
debit: 0,
note: '',
}),
[],
);
const defaultInitialValues = useMemo(() => ({
journal_number: '',
date: moment(new Date()).format('YYYY-MM-DD'),
description: '',
reference: '',
entries: [
defaultEntry,
defaultEntry,
defaultEntry,
defaultEntry,
],
}), [defaultEntry]);
const defaultInitialValues = useMemo(
() => ({
journal_number: '',
date: moment(new Date()).format('YYYY-MM-DD'),
description: '',
reference: '',
entries: [defaultEntry, defaultEntry, defaultEntry, defaultEntry],
}),
[defaultEntry],
);
const initialValues = useMemo(() => ({
...(manualJournal) ? {
...pick(manualJournal, Object.keys(defaultInitialValues)),
entries: manualJournal.entries.map((entry) => ({
...pick(entry, Object.keys(defaultEntry)),
})),
} : {
...defaultInitialValues,
}
}), [manualJournal, defaultInitialValues, defaultEntry]);
const initialValues = useMemo(
() => ({
...(manualJournal
? {
...pick(manualJournal, Object.keys(defaultInitialValues)),
entries: manualJournal.entries.map((entry) => ({
...pick(entry, Object.keys(defaultEntry)),
})),
}
: {
...defaultInitialValues,
}),
}),
[manualJournal, defaultInitialValues, defaultEntry],
);
const initialAttachmentFiles = useMemo(() => {
return manualJournal && manualJournal.media
? manualJournal.media.map((attach) => ({
preview: attach.attachment_file,
uploaded: true,
metadata: { ...attach },
})) : [];
preview: attach.attachment_file,
uploaded: true,
metadata: { ...attach },
}))
: [];
}, [manualJournal]);
const formik = useFormik({
@@ -133,113 +160,136 @@ function MakeJournalEntriesForm({
...initialValues,
},
onSubmit: async (values, { setErrors, setSubmitting, resetForm }) => {
const entries = values.entries.filter((entry) => (
(entry.credit || entry.debit)
));
const entries = values.entries.filter(
(entry) => entry.credit || entry.debit,
);
const getTotal = (type = 'credit') => {
return entries.reduce((total, item) => {
return item[type] ? item[type] + total : total;
}, 0);
}
};
const totalCredit = getTotal('credit');
const totalDebit = getTotal('debit');
// Validate the total credit should be eqials total debit.
if (totalCredit !== totalDebit) {
AppToaster.show({
message: formatMessage({id:'credit_and_debit_not_equal'}),
message: formatMessage({ id: 'credit_and_debit_not_equal' }),
});
setSubmitting(false);
return;
}
const form = { ...values, status: payload.publish, entries };
const saveJournal = (mediaIds) => new Promise((resolve, reject) => {
const requestForm = { ...form, media_ids: mediaIds };
const saveJournal = (mediaIds) =>
new Promise((resolve, reject) => {
const requestForm = { ...form, media_ids: mediaIds };
if (manualJournal && manualJournal.id) {
requestEditManualJournal(manualJournal.id, requestForm)
.then((response) => {
AppToaster.show({
message: formatMessage({
id: 'the_journal_has_been_successfully_edited',
}, {
number: values.journal_number,
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
saveInvokeSubmit({ action: 'update', ...payload });
clearSavedMediaIds([]);
resetForm();
resolve(response);
}).catch((errors) => {
if (errors.find(e => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')) {
setErrors({
journal_number: formatMessage({ id: 'journal_number_is_already_used' }),
if (manualJournal && manualJournal.id) {
requestEditManualJournal(manualJournal.id, requestForm)
.then((response) => {
AppToaster.show({
message: formatMessage(
{
id: 'the_journal_has_been_successfully_edited',
},
{
number: values.journal_number,
},
),
intent: Intent.SUCCESS,
});
}
setSubmitting(false);
});
} else {
requestMakeJournalEntries(requestForm)
.then((response) => {
AppToaster.show({
message: formatMessage({
id: 'the_journal_has_been_successfully_created',
}, {
number: values.journal_number,
}),
intent: Intent.SUCCESS,
setSubmitting(false);
saveInvokeSubmit({ action: 'update', ...payload });
clearSavedMediaIds([]);
resetForm();
resolve(response);
})
.catch((errors) => {
if (
errors.find((e) => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')
) {
setErrors({
journal_number: formatMessage({
id: 'journal_number_is_already_used',
}),
});
}
setSubmitting(false);
});
setSubmitting(false);
saveInvokeSubmit({ action: 'new', ...payload });
clearSavedMediaIds();
resetForm();
resolve(response);
}).catch((errors) => {
if (errors.find(e => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')) {
setErrors({
journal_number: formatMessage({ id: 'journal_number_is_already_used' }),
} else {
requestMakeJournalEntries(requestForm)
.then((response) => {
AppToaster.show({
message: formatMessage(
{
id: 'the_journal_has_been_successfully_created',
},
{
number: values.journal_number,
},
),
intent: Intent.SUCCESS,
});
}
setSubmitting(false);
});
}
});
setSubmitting(false);
saveInvokeSubmit({ action: 'new', ...payload });
clearSavedMediaIds();
resetForm();
resolve(response);
})
.catch((errors) => {
if (
errors.find((e) => e.type === 'JOURNAL.NUMBER.ALREADY.EXISTS')
) {
setErrors({
journal_number: formatMessage({
id: 'journal_number_is_already_used',
}),
});
}
setSubmitting(false);
});
}
});
Promise.all([
saveMedia(),
deleteMedia(),
]).then(([savedMediaResponses]) => {
const mediaIds = savedMediaResponses.map(res => res.data.media.id);
savedMediaIds.current = mediaIds;
Promise.all([saveMedia(), deleteMedia()])
.then(([savedMediaResponses]) => {
const mediaIds = savedMediaResponses.map((res) => res.data.media.id);
savedMediaIds.current = mediaIds;
return savedMediaResponses;
}).then(() => {
return saveJournal(savedMediaIds.current);
});
return savedMediaResponses;
})
.then(() => {
return saveJournal(savedMediaIds.current);
});
},
});
const handleSubmitClick = useCallback((payload) => {
setPayload(payload);
formik.handleSubmit();
}, [setPayload, formik]);
const handleSubmitClick = useCallback(
(payload) => {
setPayload(payload);
formik.handleSubmit();
},
[setPayload, formik],
);
const handleCancelClick = useCallback((payload) => {
onCancelForm && onCancelForm(payload);
}, [onCancelForm]);
const handleCancelClick = useCallback(
(payload) => {
onCancelForm && onCancelForm(payload);
},
[onCancelForm],
);
const handleDeleteFile = useCallback((_deletedFiles) => {
_deletedFiles.forEach((deletedFile) => {
if (deletedFile.uploaded && deletedFile.metadata.id) {
setDeletedFiles([
...deletedFiles, deletedFile.metadata.id,
]);
}
});
}, [setDeletedFiles, deletedFiles]);
const handleDeleteFile = useCallback(
(_deletedFiles) => {
_deletedFiles.forEach((deletedFile) => {
if (deletedFile.uploaded && deletedFile.metadata.id) {
setDeletedFiles([...deletedFiles, deletedFile.metadata.id]);
}
});
},
[setDeletedFiles, deletedFiles],
);
return (
<div class="make-journal-entries">
@@ -249,19 +299,22 @@ function MakeJournalEntriesForm({
<MakeJournalEntriesTable
initialValues={initialValues}
formik={formik}
defaultRow={defaultEntry} />
defaultRow={defaultEntry}
/>
<MakeJournalEntriesFooter
formik={formik}
onSubmitClick={handleSubmitClick}
onCancelClick={handleCancelClick} />
onCancelClick={handleCancelClick}
/>
</form>
<Dragzone
initialFiles={initialAttachmentFiles}
onDrop={handleDropFiles}
onDeleteFile={handleDeleteFile}
hint={'Attachments: Maxiumum size: 20MB'} />
hint={'Attachments: Maxiumum size: 20MB'}
/>
</div>
);
}
@@ -272,4 +325,4 @@ export default compose(
withAccountsActions,
withDashboardActions,
MediaConnect,
)(MakeJournalEntriesForm);
)(MakeJournalEntriesForm);

2
client/src/containers/Accounting/MakeJournalEntriesHeader.js
View File

@@ -54,7 +54,7 @@ export default function MakeJournalEntriesHeader({
minimal={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
{...momentFormatter('YYYY-MM-DD')}
defaultValue={new Date()}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM }} />

1
client/src/containers/Currencies/withCurrencies.js
View File

@@ -5,6 +5,7 @@ export default (mapState) => {
const mapped = {
currencies: state.currencies.data,
currenciesList: Object.values(state.currencies.data),
currenciesLoading:state.currencies.loading,
};
return mapState ? mapState(mapped, state, props) : mapped;
};

6
client/src/containers/Dashboard/withDashboard.js
View File

@@ -10,7 +10,11 @@ const mapActionsToProps = (dispatch) => ({
changePageSubtitle: (pageSubtitle) => dispatch({
type: t.ALTER_DASHBOARD_PAGE_SUBTITLE, pageSubtitle,
}),
changePreferencesPageTitle: (pageTitle) =>
dispatch({
type: 'CHANGE_PREFERENCES_PAGE_TITLE',
pageTitle,
}),
setTopbarEditView: (id) => dispatch({
type: t.SET_TOPBAR_EDIT_VIEW, id,
}),

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

@@ -28,8 +28,7 @@ import Icon from 'components/Icon';
import ErrorMessage from 'components/ErrorMessage';
import { fetchAccountTypes } from 'store/accounts/accounts.actions';
import {ListSelect} from 'components';
import { ListSelect } from 'components';
function AccountFormDialog({
name,
@@ -52,15 +51,18 @@ function AccountFormDialog({
// #withDialog
closeDialog,
}) {
}) {
const { formatMessage } = useIntl();
const accountFormValidationSchema = Yup.object().shape({
name: Yup.string().required().label(formatMessage({id:'account_name_'})),
name: Yup.string()
.required()
.label(formatMessage({ id: 'account_name_' })),
code: Yup.number(),
account_type_id: Yup.string()
.nullable()
.required().label(formatMessage({id:'account_type_id'})),
description: Yup.string().trim()
.required()
.label(formatMessage({ id: 'account_type_id' })),
description: Yup.string().trim(),
});
const initialValues = useMemo(
@@ -69,14 +71,14 @@ function AccountFormDialog({
name: '',
description: '',
}),
[]
[],
);
const [selectedAccountType, setSelectedAccountType] = useState(null);
const [selectedSubaccount, setSelectedSubaccount] = useState(
payload.action === 'new_child'
? accounts.find((a) => a.id === payload.id)
: null
: null,
);
const transformApiErrors = (errors) => {
@@ -96,48 +98,67 @@ function AccountFormDialog({
validationSchema: accountFormValidationSchema,
onSubmit: (values, { setSubmitting, setErrors }) => {
const exclude = ['subaccount'];
const toastAccountName = (values.code) ? `${values.code} - ${values.name}` : values.name;
const toastAccountName = values.code
? `${values.code} - ${values.name}`
: values.name;
if (payload.action === 'edit') {
requestEditAccount({
payload: payload.id,
form: { ...omit(values, [...exclude, 'account_type_id']) }
form: { ...omit(values, [...exclude, 'account_type_id']) },
}).then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({
id: 'service_has_been_successful_edited',
}, {
name: toastAccountName,
service: formatMessage({ id: 'account' }),
}),
message: formatMessage(
{
id: 'service_has_been_successful_edited',
},
{
name: toastAccountName,
service: formatMessage({ id: 'account' }),
},
),
intent: Intent.SUCCESS,
});
});
} else {
requestSubmitAccount({ form: { ...omit(values, exclude) } }).then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({
id: 'service_has_been_successful_created',
}, {
name: toastAccountName,
service: formatMessage({ id: 'account' }),
}),
intent: Intent.SUCCESS,
position: Position.BOTTOM,
});
});
requestSubmitAccount({ form: { ...omit(values, exclude) } }).then(
(response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage(
{
id: 'service_has_been_successful_created',
},
{
name: toastAccountName,
service: formatMessage({ id: 'account' }),
},
),
intent: Intent.SUCCESS,
position: Position.BOTTOM,
});
},
);
}
},
});
const { errors, values, touched } = useMemo(() => formik, [formik]);
// const filteredAccounts = accounts.filter(
// (account) => account.accountTypeId === formik.values.account_type_id,
// );
const filteredAccounts = accounts.filter((account) => {
return account.account_type_id === values.account_type_id;
});
console.log(filteredAccounts, 'ERR');
console.log(accounts,'ER/u');
// Set default account type.
useEffect(() => {
if (account && account.account_type_id) {
const defaultType = accountsTypes.find(
(t) => t.id === account.account_type_id
(t) => t.id === account.account_type_id,
);
defaultType && setSelectedAccountType(defaultType);
@@ -187,7 +208,7 @@ function AccountFormDialog({
);
}
},
[]
[],
);
// Handles dialog close.
@@ -199,7 +220,7 @@ function AccountFormDialog({
const fetchAccountsList = useQuery(
'accounts-list',
() => requestFetchAccounts(),
{ manual: true }
{ manual: true },
);
// Fetches accounts types.
@@ -208,14 +229,14 @@ function AccountFormDialog({
async () => {
await requestFetchAccountTypes();
},
{ manual: true }
{ manual: true },
);
// Fetch the given account id on edit mode.
const fetchAccount = useQuery(
payload.action === 'edit' && ['account', payload.id],
(key, id) => requestFetchAccount(id),
{ manual: true }
{ manual: true },
);
const isFetching =
@@ -228,13 +249,13 @@ function AccountFormDialog({
fetchAccountsList.refetch();
fetchAccountsTypes.refetch();
fetchAccount.refetch();
}, [ fetchAccount, fetchAccountsList, fetchAccountsTypes]);
}, [fetchAccount, fetchAccountsList, fetchAccountsTypes]);
const onChangeAccountType = useCallback(
(accountType) => {
formik.setFieldValue('account_type_id', accountType.id);
},
[formik]
[formik],
);
// Handles change sub-account.
@@ -243,7 +264,7 @@ function AccountFormDialog({
setSelectedSubaccount(account);
formik.setFieldValue('parent_account_id', account.id);
},
[setSelectedSubaccount, formik]
[setSelectedSubaccount, formik],
);
const onDialogClosed = useCallback(() => {
@@ -252,22 +273,28 @@ function AccountFormDialog({
setSelectedAccountType(null);
}, [formik]);
const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);
const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
const subAccountLabel = useMemo(() => {
return (
<span>
<T id={'sub_account'}/> <Icon icon='info-circle' iconSize={12} />
<T id={'sub_account'} /> <Icon icon="info-circle" iconSize={12} />
</span>
);
}, []);
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
const requiredSpan = useMemo(() => <span class="required">*</span>, []);
return (
<Dialog
name={name}
title={payload.action === 'edit' ? <T id={'edit_account'}/> : <T id={'new_account'}/>}
title={
payload.action === 'edit' ? (
<T id={'edit_account'} />
) : (
<T id={'new_account'} />
)
}
className={{
'dialog--loading': isFetching,
'dialog--account-form': true,
@@ -283,41 +310,40 @@ function AccountFormDialog({
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={<T id={'account_type'}/>}
label={<T id={'account_type'} />}
labelInfo={requiredSpan}
className={classNames(
'form-group--account-type',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
inline={true}
helperText={<ErrorMessage name='account_type_id' {...formik} />}
helperText={<ErrorMessage name="account_type_id" {...formik} />}
intent={
errors.account_type_id && touched.account_type_id && Intent.DANGER
}
>
<ListSelect
items={accountsTypes}
noResults={<MenuItem disabled={true} text='No results.' />}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={accountTypeItem}
itemPredicate={filterAccountTypeItems}
popoverProps={{ minimal: true }}
onItemSelect={onChangeAccountType}
selectedItem={formik.values.account_type_id}
selectedItemProp={'id'}
defaultText={<T id={'select_account_type'} />}
labelProp={'name'}
buttonProps={{ disabled: payload.action === 'edit' }} />
buttonProps={{ disabled: payload.action === 'edit' }}
/>
</FormGroup>
<FormGroup
label={<T id={'account_name'}/>}
label={<T id={'account_name'} />}
labelInfo={requiredSpan}
className={'form-group--account-name'}
intent={errors.name && touched.name && Intent.DANGER}
helperText={<ErrorMessage name='name' {...formik} />}
helperText={<ErrorMessage name="name" {...formik} />}
inline={true}
>
<InputGroup
@@ -328,10 +354,10 @@ function AccountFormDialog({
</FormGroup>
<FormGroup
label={<T id={'account_code'}/>}
label={<T id={'account_code'} />}
className={'form-group--account-code'}
intent={errors.code && touched.code && Intent.DANGER}
helperText={<ErrorMessage name='code' {...formik} />}
helperText={<ErrorMessage name="code" {...formik} />}
inline={true}
labelInfo={infoIcon}
>
@@ -356,37 +382,31 @@ function AccountFormDialog({
{values.subaccount && (
<FormGroup
label={<T id={'parent_account'}/>}
label={<T id={'parent_account'} />}
className={classNames(
'form-group--parent-account',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
inline={true}
>
<Select
items={accounts}
noResults={<MenuItem disabled={true} text='No results.' />}
<ListSelect
items={filteredAccounts}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={accountItem}
itemPredicate={filterAccountsPredicater}
popoverProps={{ minimal: true }}
onItemSelect={onChangeSubaccount}
{...formik.getFieldProps('parent_account_id')}
>
<Button
rightIcon='caret-down'
text={
selectedSubaccount
? selectedSubaccount.name
: <T id={'select_parent_account'}/>
}
/>
</Select>
selectedItem={formik.values.parent_account_id}
selectedItemProp={'id'}
defaultText={<T id={'select_parent_account'} />}
labelProp={'name'}
/>
</FormGroup>
)}
<FormGroup
label={<T id={'description'}/>}
label={<T id={'description'} />}
className={'form-group--description'}
intent={formik.errors.description && Intent.DANGER}
helperText={formik.errors.description && formik.errors.credential}
@@ -402,13 +422,19 @@ function AccountFormDialog({
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}><T id={'close'}/></Button>
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
<Button
intent={Intent.PRIMARY}
disabled={formik.isSubmitting}
type='submit'
type="submit"
>
{payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
{payload.action === 'edit' ? (
<T id={'edit'} />
) : (
<T id={'submit'} />
)}
</Button>
</div>
</div>

141
client/src/containers/Dialogs/CurrencyDialog.js
View File

@@ -9,11 +9,10 @@ import {
import * as Yup from 'yup';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import { useQuery } from 'react-query';
import { useQuery, queryCache } from 'react-query';
import { connect } from 'react-redux';
import { pick } from 'lodash';
import AppToaster from 'components/AppToaster';
import Dialog from 'components/Dialog';
import DialogReduxConnect from 'components/DialogReduxConnect';
@@ -27,8 +26,6 @@ import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
import { compose } from 'utils';
function CurrencyDialog({
name,
payload,
@@ -46,18 +43,28 @@ function CurrencyDialog({
requestSubmitCurrencies,
requestEditCurrency,
}) {
const {formatMessage} = useIntl();
const { formatMessage } = useIntl();
const fetchCurrencies = useQuery('currencies', () =>
requestFetchCurrencies(),
);
const validationSchema = Yup.object().shape({
currency_name: Yup.string().required().label(formatMessage({id:'currency_name_'})),
currency_name: Yup.string()
.required()
.label(formatMessage({ id: 'currency_name_' })),
currency_code: Yup.string()
.max(4)
.required().label(formatMessage({id:'currency_code_'})),
.required()
.label(formatMessage({ id: 'currency_code_' })),
});
const initialValues = useMemo(() => ({
currency_name: '',
currency_code: '',
}), []);
const initialValues = useMemo(
() => ({
currency_name: '',
currency_code: '',
}),
[],
);
const {
errors,
@@ -75,29 +82,37 @@ function CurrencyDialog({
validationSchema: validationSchema,
onSubmit: (values, { setSubmitting }) => {
if (payload.action === 'edit') {
requestEditCurrency(currency.id, values).then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({id:'the_currency_has_been_successfully_edited'}),
intent: Intent.SUCCESS,
requestEditCurrency(currency.id, values)
.then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({
id: 'the_currency_has_been_successfully_edited',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.refetchQueries('currencies', { force: true });
})
.catch((error) => {
setSubmitting(false);
});
setSubmitting(false);
})
.catch((error) => {
setSubmitting(false);
});
} else {
requestSubmitCurrencies(values).then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({id:'the_currency_has_been_successfully_created'}),
intent: Intent.SUCCESS,
requestSubmitCurrencies(values)
.then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({
id: 'the_currency_has_been_successfully_created',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.refetchQueries('currencies', { force: true });
})
.catch((error) => {
setSubmitting(false);
});
setSubmitting(false);
})
.catch((error) => {
setSubmitting(false);
});
}
},
});
@@ -106,10 +121,6 @@ function CurrencyDialog({
closeDialog(name);
}, [name, closeDialog]);
const fetchCurrencies = useQuery('currencies',
() => { requestFetchCurrencies(); },
{ manual: true });
const onDialogOpening = useCallback(() => {
fetchCurrencies.refetch();
}, [fetchCurrencies]);
@@ -117,19 +128,25 @@ function CurrencyDialog({
const onDialogClosed = useCallback(() => {
resetForm();
closeDialog(name);
}, [closeDialog, name,resetForm]);
}, [closeDialog, name, resetForm]);
const requiredSpan = useMemo(() => <span className={'required'}>*</span>, []);
return (
<Dialog
name={name}
title={payload.action === 'edit' ? <T id={'edit_currency'}/> : <T id={'new_currency'}/>}
title={
payload.action === 'edit' ? (
<T id={'edit_currency'} />
) : (
<T id={'new_currency'} />
)
}
className={classNames(
{
'dialog--loading': fetchCurrencies.isFetching,
},
'dialog--currency-form'
'dialog--currency-form',
)}
isOpen={isOpen}
onClosed={onDialogClosed}
@@ -140,31 +157,43 @@ function CurrencyDialog({
<form onSubmit={handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={<T id={'currency_name'}/>}
label={<T id={'currency_name'} />}
labelInfo={requiredSpan}
className={'form-group--currency-name'}
intent={(errors.currency_name && touched.currency_name) && Intent.DANGER}
helperText={<ErrorMessage name='currency_name' {...{errors, touched}} />}
intent={
errors.currency_name && touched.currency_name && Intent.DANGER
}
helperText={
<ErrorMessage name="currency_name" {...{ errors, touched }} />
}
inline={true}
>
<InputGroup
medium={true}
intent={(errors.currency_name && touched.currency_name) && Intent.DANGER}
intent={
errors.currency_name && touched.currency_name && Intent.DANGER
}
{...getFieldProps('currency_name')}
/>
</FormGroup>
<FormGroup
label={<T id={'currency_code'}/>}
label={<T id={'currency_code'} />}
labelInfo={requiredSpan}
className={'form-group--currency-code'}
intent={(errors.currency_code && touched.currency_code) && Intent.DANGER}
helperText={<ErrorMessage name='currency_code' {...{errors, touched}} />}
intent={
errors.currency_code && touched.currency_code && Intent.DANGER
}
helperText={
<ErrorMessage name="currency_code" {...{ errors, touched }} />
}
inline={true}
>
<InputGroup
medium={true}
intent={(errors.currency_code && touched.currency_code) && Intent.DANGER}
intent={
errors.currency_code && touched.currency_code && Intent.DANGER
}
{...getFieldProps('currency_code')}
/>
</FormGroup>
@@ -172,9 +201,19 @@ function CurrencyDialog({
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}><T id={'cancel'} /></Button>
<Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
{payload.action === 'edit' ? <T id={'edit'} /> : <T id={'submit'} /> }
<Button onClick={handleClose}>
<T id={'cancel'} />
</Button>
<Button
intent={Intent.PRIMARY}
type="submit"
disabled={isSubmitting}
>
{payload.action === 'edit' ? (
<T id={'edit'} />
) : (
<T id={'submit'} />
)}
</Button>
</div>
</div>
@@ -190,8 +229,8 @@ const mapStateToProps = (state, props) => {
name: 'currency-form',
payload: { action: 'new', currencyCode: null, ...dialogPayload },
currencyCode: dialogPayload?.currencyCode || null,
}
}
};
};
const withCurrencyFormDialog = connect(mapStateToProps);

168
client/src/containers/Dialogs/ExchangeRateDialog.js
View File

@@ -12,20 +12,19 @@ import { pick } from 'lodash';
import * as Yup from 'yup';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useFormik } from 'formik';
import { Select } from '@blueprintjs/select';
import { useQuery } from 'react-query';
import { useQuery, queryCache } from 'react-query';
import moment from 'moment';
import { DateInput } from '@blueprintjs/datetime';
import { momentFormatter } from 'utils';
import AppToaster from 'components/AppToaster';
import Dialog from 'components/Dialog';
import ErrorMessage from 'components/ErrorMessage';
import classNames from 'classnames';
import { ListSelect } from 'components';
import withExchangeRatesDialog from './ExchangeRateDialog.container';
function ExchangeRateDialog({
name,
payload,
@@ -43,24 +42,37 @@ function ExchangeRateDialog({
requestEditExchangeRate,
requestFetchCurrencies,
editExchangeRate,
}) {
const { formatMessage } = useIntl();
const [selectedItems, setSelectedItems] = useState({});
const validationSchema = Yup.object().shape({
exchange_rate: Yup.number().required().label(formatMessage({id:'exchange_rate_'})),
currency_code: Yup.string().max(3).required(formatMessage({id:'currency_code_'})),
date: Yup.date().required().label(formatMessage({id:'date'})),
exchange_rate: Yup.number()
.required()
.label(formatMessage({ id: 'exchange_rate_' })),
currency_code: Yup.string()
.max(3)
.required(formatMessage({ id: 'currency_code_' })),
date: Yup.date()
.required()
.label(formatMessage({ id: 'date' })),
});
const initialValues = useMemo(() => ({
exchange_rate: '',
currency_code: '',
date: moment(new Date()).format('YYYY-MM-DD'),
}), []);
const initialValues = useMemo(
() => ({
exchange_rate: '',
currency_code: '',
date: moment(new Date()).format('YYYY-MM-DD'),
}),
[],
);
const fetchExchangeRatesDialog = useQuery('exchange-rates-dialog', () =>
requestFetchExchangeRates(),
);
const {
values,
touched,
errors,
isSubmitting,
@@ -75,15 +87,19 @@ function ExchangeRateDialog({
...(payload.action === 'edit' &&
pick(editExchangeRate, Object.keys(initialValues))),
},
onSubmit: (values, { setSubmitting }) => {
onSubmit: (values, { setSubmitting, setErrors }) => {
if (payload.action === 'edit') {
requestEditExchangeRate(payload.id, values)
.then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({id:'the_exchange_rate_has_been_successfully_edited'})
message: formatMessage({
id: 'the_exchange_rate_has_been_successfully_edited',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.removeQueries('exchange-rates-dialog', { force: true });
})
.catch((error) => {
setSubmitting(false);
@@ -93,30 +109,40 @@ function ExchangeRateDialog({
.then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({id:'the_exchange_rate_has_been_successfully_created'})
message: formatMessage({
id: 'the_exchange_rate_has_been_successfully_created',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.refetchQueries('exchange-rates-table', { force: true });
})
.catch((error) => {
setSubmitting(false);
.catch((errors) => {
if (
errors.find((e) => e.type === 'EXCHANGE.RATE.DATE.PERIOD.DEFINED')
) {
setErrors({
exchange_rate: formatMessage({
id:
'there_is_exchange_rate_in_this_date_with_the_same_currency',
}),
});
}
});
}
},
});
const requiredSpan = useMemo(() => <span class='required'>*</span>, []);
const requiredSpan = useMemo(() => <span class="required">*</span>, []);
const handleClose = useCallback(() => {
closeDialog(name);
}, [name, closeDialog]);
const fetchExchangeRatesDialog = useQuery('exchange-rates-dialog',
() => requestFetchExchangeRates());
const onDialogClosed = useCallback(() => {
resetForm();
closeDialog(name);
}, [closeDialog, name,resetForm]);
}, [closeDialog, name, resetForm]);
const onDialogOpening = useCallback(() => {
fetchExchangeRatesDialog.refetch();
@@ -127,7 +153,7 @@ function ExchangeRateDialog({
const formatted = moment(date).format('YYYY-MM-DD');
setFieldValue('date', formatted);
},
[setFieldValue]
[setFieldValue],
);
const onItemsSelect = useCallback(
@@ -140,19 +166,19 @@ function ExchangeRateDialog({
setFieldValue(filedName, filed.currency_code);
};
},
[setFieldValue, selectedItems]
[setFieldValue, selectedItems],
);
const filterCurrencyCode = (query, currency_code, _index, exactMatch) => {
const normalizedTitle = currency_code.currency_code.toLowerCase();
const filterCurrencyCode = (query, currency, _index, exactMatch) => {
const normalizedTitle = currency.currency_code.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return (
`${currency_code.currency_code} ${normalizedTitle}`.indexOf(
normalizedQuery
`${currency.currency_code} ${normalizedTitle}`.indexOf(
normalizedQuery,
) >= 0
);
}
@@ -169,20 +195,19 @@ function ExchangeRateDialog({
);
}, []);
const getSelectedItemLabel = useCallback((fieldName, defaultLabel) => {
return typeof selectedItems[fieldName] !== 'undefined'
? selectedItems[fieldName].currency_code
: defaultLabel;
}, [selectedItems]);
return (
<Dialog
name={name}
title={payload.action === 'edit'
? <T id={'edit_exchange_rate'}/> : <T id={'new_exchange_rate'}/>}
title={
payload.action === 'edit' ? (
<T id={'edit_exchange_rate'} />
) : (
<T id={'new_exchange_rate'} />
)
}
className={classNames(
{'dialog--loading': fetchExchangeRatesDialog.isFetching},
'dialog--exchangeRate-form'
{ 'dialog--loading': fetchExchangeRatesDialog.isFetching },
'dialog--exchangeRate-form',
)}
isOpen={isOpen}
onClosed={onDialogClosed}
@@ -193,11 +218,11 @@ function ExchangeRateDialog({
<form onSubmit={handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={<T id={'date'}/>}
label={<T id={'date'} />}
inline={true}
labelInfo={requiredSpan}
intent={errors.date && touched.date && Intent.DANGER}
helperText={<ErrorMessage name='date' {...{errors, touched}} />}
helperText={<ErrorMessage name="date" {...{ errors, touched }} />}
>
<DateInput
fill={true}
@@ -205,56 +230,71 @@ function ExchangeRateDialog({
defaultValue={new Date()}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM }}
// disabled={payload.action === 'edit'}
disabled={payload.action === 'edit'}
/>
</FormGroup>
<FormGroup
label={<T id={'exchange_rate'}/>}
label={<T id={'exchange_rate'} />}
labelInfo={requiredSpan}
intent={errors.exchange_rate && touched.exchange_rate && Intent.DANGER}
helperText={<ErrorMessage name='exchange_rate' {...{errors, touched}} />}
intent={
errors.exchange_rate && touched.exchange_rate && Intent.DANGER
}
helperText={
<ErrorMessage name="exchange_rate" {...{ errors, touched }} />
}
inline={true}
>
<InputGroup
medium={true}
intent={errors.exchange_rate && touched.exchange_rate && Intent.DANGER}
intent={
errors.exchange_rate && touched.exchange_rate && Intent.DANGER
}
{...getFieldProps('exchange_rate')}
/>
</FormGroup>
<FormGroup
label={<T id={'currency_code'}/>}
label={<T id={'currency_code'} />}
labelInfo={requiredSpan}
className={classNames('form-group--select-list', Classes.FILL)}
inline={true}
intent={(errors.currency_code && touched.currency_code) && Intent.DANGER}
helperText={<ErrorMessage name='currency_code' {...{errors, touched}} />}
intent={
errors.currency_code && touched.currency_code && Intent.DANGER
}
helperText={
<ErrorMessage name="currency_code" {...{ errors, touched }} />
}
>
<Select
<ListSelect
items={currenciesList}
noResults={<MenuItem disabled={true} text='No results.' />}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={currencyCodeRenderer}
itemPredicate={filterCurrencyCode}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('currency_code')}
>
<Button
rightIcon='caret-down'
fill={true}
text={getSelectedItemLabel(
'currency_code',
'select Currency Code'
)}
/>
</Select>
selectedItem={values.currency_code}
selectedItemProp={'currency_code'}
defaultText={<T id={'select_currency_code'} />}
labelProp={'currency_code'}
/>
</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={isSubmitting}>
{payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
<Button
intent={Intent.PRIMARY}
type="submit"
disabled={isSubmitting}
>
{payload.action === 'edit' ? (
<T id={'edit'} />
) : (
<T id={'submit'} />
)}
</Button>
</div>
</div>

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

@@ -41,12 +41,19 @@ function InviteUserDialog({
}, 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_'})),
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_'})),
.required()
.label(formatMessage({ id: 'email' })),
phone_number: Yup.number()
.required()
.label(formatMessage({ id: 'phone_number_' })),
});
const initialValues = useMemo(
@@ -56,7 +63,7 @@ function InviteUserDialog({
email: '',
phone_number: '',
}),
[]
[],
);
const formik = useFormik({
@@ -65,7 +72,7 @@ function InviteUserDialog({
...(payload.action === 'edit' &&
pick(
objectKeysTransform(payload.user, snakeCase),
Object.keys(initialValues)
Object.keys(initialValues),
)),
},
validationSchema,
@@ -78,10 +85,13 @@ function InviteUserDialog({
.then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({id:'the_user_details_has_been_updated'}),
message: formatMessage({
id: 'the_user_details_has_been_updated',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.refetchQueries('users-table',{force:true})
queryCache.refetchQueries('users-table', { force: true });
})
.catch((error) => {
setSubmitting(false);
@@ -99,10 +109,10 @@ function InviteUserDialog({
formik.resetForm();
}, [formik.resetForm]);
// Handles dialog close.
const handleClose = useCallback(() => {
closeDialog(name);
}, [closeDialog, name]);
// Handles dialog close.
const handleClose = useCallback(() => {
closeDialog(name);
}, [closeDialog, name]);
return (
<Dialog
@@ -126,7 +136,7 @@ function InviteUserDialog({
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} />}
helperText={<ErrorMessage name="first_name" {...formik} />}
inline={true}
>
<InputGroup
@@ -139,7 +149,7 @@ function InviteUserDialog({
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} />}
helperText={<ErrorMessage name="last_name" {...formik} />}
inline={true}
>
<InputGroup
@@ -152,7 +162,7 @@ function InviteUserDialog({
label={<T id={'email'} />}
className={'form-group--email'}
intent={errors.email && touched.email && Intent.DANGER}
helperText={<ErrorMessage name='email' {...formik} />}
helperText={<ErrorMessage name="email" {...formik} />}
inline={true}
>
<InputGroup
@@ -168,7 +178,7 @@ function InviteUserDialog({
intent={
errors.phone_number && touched.phone_number && Intent.DANGER
}
helperText={<ErrorMessage name='phone_number' {...formik} />}
helperText={<ErrorMessage name="phone_number" {...formik} />}
inline={true}
>
<InputGroup
@@ -182,9 +192,15 @@ function InviteUserDialog({
<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 onClick={handleClose}>
<T id={'close'} />
</Button>
<Button
intent={Intent.PRIMARY}
type="submit"
disabled={formik.isSubmitting}
>
{payload.action === 'edit' ? <T id={'edit'} /> : ''}
</Button>
</div>
</div>
@@ -195,5 +211,5 @@ function InviteUserDialog({
export default compose(
UserListDialogConnect,
DialogReduxConnect
DialogReduxConnect,
)(InviteUserDialog);

210
client/src/containers/Dialogs/ItemCategoryDialog.js
View File

@@ -6,7 +6,7 @@ import {
InputGroup,
Intent,
TextArea,
MenuItem
MenuItem,
} from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import { pick } from 'lodash';
@@ -16,10 +16,11 @@ import { useFormik } from 'formik';
import { compose } from 'utils';
import { useQuery, queryCache } from 'react-query';
import classNames from 'classnames';
import {connect} from 'react-redux';
import { connect } from 'react-redux';
import AppToaster from 'components/AppToaster';
import ErrorMessage from 'components/ErrorMessage';
import { ListSelect } from 'components';
import Dialog from 'components/Dialog';
import DialogConnect from 'connectors/Dialog.connector';
@@ -32,7 +33,6 @@ import withItemCategoriesActions from 'containers/Items/withItemCategoriesAction
import Icon from 'components/Icon';
function ItemCategoryDialog({
name,
payload,
@@ -57,23 +57,30 @@ function ItemCategoryDialog({
const [selectedParentCategory, setParentCategory] = useState(null);
const { formatMessage } = useIntl();
const fetchList = useQuery(['items-categories-list'],
() => requestFetchItemCategories());
const fetchList = useQuery(['items-categories-list'], () =>
requestFetchItemCategories(),
);
const validationSchema = Yup.object().shape({
name: Yup.string().required().label(formatMessage({id:'category_name_'})),
name: Yup.string()
.required()
.label(formatMessage({ id: 'category_name_' })),
parent_category_id: Yup.string().nullable(),
description: Yup.string().trim()
description: Yup.string().trim(),
});
const initialValues = useMemo(() => ({
name: '',
description: '',
parent_category_id: null
}), []);
const initialValues = useMemo(
() => ({
name: '',
description: '',
parent_category_id: null,
}),
[],
);
// Formik
const {
values,
errors,
touched,
setFieldValue,
@@ -85,24 +92,28 @@ function ItemCategoryDialog({
enableReinitialize: true,
initialValues: {
...(payload.action === 'edit' &&
pick(itemCategory, Object.keys(initialValues)))
pick(itemCategory, Object.keys(initialValues))),
},
validationSchema,
onSubmit: (values, { setSubmitting }) => {
if (payload.action === 'edit') {
requestEditItemCategory(payload.id, values).then(response => {
closeDialog(name);
AppToaster.show({
message: formatMessage({
id: 'the_item_category_has_been_successfully_edited',
}),
intent: Intent.SUCCESS,
requestEditItemCategory(payload.id, values)
.then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({
id: 'the_item_category_has_been_successfully_edited',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.refetchQueries('items-categories-table', {
force: true,
});
})
.catch((error) => {
setSubmitting(false);
});
setSubmitting(false);
queryCache.refetchQueries('items-categories-table', { force: true });
}).catch((error) => {
setSubmitting(false);
});
} else {
requestSubmitItemCategory(values)
.then((response) => {
@@ -114,60 +125,84 @@ function ItemCategoryDialog({
intent: Intent.SUCCESS,
});
setSubmitting(false);
queryCache.refetchQueries('items-categories-table', { force: true });
queryCache.refetchQueries('items-categories-table', {
force: true,
});
})
.catch((error) => {
setSubmitting(false);
});
}
}
},
});
const filterItemCategory = useCallback((query, category, _index, exactMatch) => {
const normalizedTitle = category.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
const filterItemCategory = useCallback(
(query, category, _index, exactMatch) => {
const normalizedTitle = category.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
}, []);
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
},
[],
);
const parentCategoryItem = useCallback((category, { handleClick, modifiers, query }) => {
return (
<MenuItem text={category.name} key={category.id} onClick={handleClick} />
);
}, []);
const parentCategoryItem = useCallback(
(category, { handleClick, modifiers, query }) => {
return (
<MenuItem
text={category.name}
key={category.id}
onClick={handleClick}
/>
);
},
[],
);
// Handle the dialog closing.
const handleClose = useCallback(() => { closeDialog(name); }, [name, closeDialog]);
const handleClose = useCallback(() => {
closeDialog(name);
}, [name, closeDialog]);
// Handle the dialog opening.
const onDialogOpening = useCallback(() => {
fetchList.refetch();
}, [fetchList]);
const onChangeParentCategory = useCallback((parentCategory) => {
setParentCategory(parentCategory);
setFieldValue('parent_category_id', parentCategory.id);
}, [setFieldValue]);
const onChangeParentCategory = useCallback(
(parentCategory) => {
setParentCategory(parentCategory);
setFieldValue('parent_category_id', parentCategory.id);
},
[setFieldValue],
);
const onDialogClosed = useCallback(() => {
resetForm();
closeDialog(name);
}, [resetForm, closeDialog, name]);
const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
const requiredSpan = useMemo(() => <span class="required">*</span>, []);
const infoIcon = useMemo(() => <Icon icon="info-circle" iconSize={12} />, []);
return (
<Dialog
name={name}
title={payload.action === 'edit' ? <T id={'edit_category'}/> : <T id={'new_category'}/>}
className={classNames({
'dialog--loading': fetchList.isFetching,
},
title={
payload.action === 'edit' ? (
<T id={'edit_category'} />
) : (
<T id={'new_category'} />
)
}
className={classNames(
{
'dialog--loading': fetchList.isFetching,
},
'dialog--category-form',
)}
isOpen={isOpen}
@@ -179,22 +214,22 @@ function ItemCategoryDialog({
<form onSubmit={handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={<T id={'category_name'}/>}
label={<T id={'category_name'} />}
labelInfo={requiredSpan}
className={'form-group--category-name'}
intent={(errors.name && touched.name) && Intent.DANGER}
helperText={(<ErrorMessage name="name" {...{ errors, touched }} />)}
intent={errors.name && touched.name && Intent.DANGER}
helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
inline={true}
>
<InputGroup
medium={true}
intent={(errors.name && touched.name) && Intent.DANGER}
intent={errors.name && touched.name && Intent.DANGER}
{...getFieldProps('name')}
/>
</FormGroup>
<FormGroup
label={<T id={'parent_category'}/>}
label={<T id={'parent_category'} />}
labelInfo={infoIcon}
className={classNames(
'form-group--select-list',
@@ -202,29 +237,39 @@ function ItemCategoryDialog({
Classes.FILL,
)}
inline={true}
helperText={(<ErrorMessage name="parent_category_id" {...{errors, touched}} />)}
intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
helperText={
<ErrorMessage
name="parent_category_id"
{...{ errors, touched }}
/>
}
intent={
errors.parent_category_id &&
touched.parent_category_id &&
Intent.DANGER
}
>
<Select
<ListSelect
items={categoriesList}
noResults={<MenuItem disabled={true} text='No results.' />}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={parentCategoryItem}
itemPredicate={filterItemCategory}
popoverProps={{ minimal: true }}
onItemSelect={onChangeParentCategory}
>
<Button
text={selectedParentCategory
? selectedParentCategory.name : 'Select Parent Category'}
/>
</Select>
selectedItem={values.parent_category_id}
selectedItemProp={'id'}
defaultText={<T id={'select_parent_category'} />}
labelProp={'name'}
/>
</FormGroup>
<FormGroup
label={<T id={'description'}/>}
label={<T id={'description'} />}
className={'form-group--description'}
intent={(errors.description && touched.description) && Intent.DANGER}
helperText={(<ErrorMessage name="description" {...{errors, touched}} />)}
intent={errors.description && touched.description && Intent.DANGER}
helperText={
<ErrorMessage name="description" {...{ errors, touched }} />
}
inline={true}
>
<TextArea
@@ -237,9 +282,19 @@ function ItemCategoryDialog({
<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={isSubmitting}>
{payload.action === 'edit' ? <T id={'edit'}/> : <T id={'submit'}/>}
<Button onClick={handleClose}>
<T id={'close'} />
</Button>
<Button
intent={Intent.PRIMARY}
type="submit"
disabled={isSubmitting}
>
{payload.action === 'edit' ? (
<T id={'edit'} />
) : (
<T id={'submit'} />
)}
</Button>
</div>
</div>
@@ -248,26 +303,25 @@ function ItemCategoryDialog({
);
}
const mapStateToProps = (state, props) => {
const dialogPayload = getDialogPayload(state, 'item-category-form');
return {
name: 'item-category-form',
payload: {action: 'new', id: null, ...dialogPayload},
payload: { action: 'new', id: null, ...dialogPayload },
itemCategoryId: dialogPayload?.id || null,
};
};
const withItemCategoryDialog = connect(mapStateToProps);
export default compose(
export default compose(
withItemCategoryDialog,
DialogConnect,
DialogReduxConnect,
withItemCategoryDetail,
withItemCategories(({ categoriesList }) => ({
categoriesList
categoriesList,
})),
withItemCategoriesActions
withItemCategoriesActions,
)(ItemCategoryDialog);

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

@@ -13,6 +13,7 @@ import {
import { objectKeysTransform } from 'utils';
import { pick, snakeCase } from 'lodash';
import classNames from 'classnames';
import { queryCache, useQuery } from 'react-query';
import AppToaster from 'components/AppToaster';
import DialogReduxConnect from 'components/DialogReduxConnect';
@@ -30,12 +31,17 @@ function UserFormDialog({
closeDialog,
}) {
const { formatMessage } = useIntl();
const fetchHook = useAsync(async () => {
await Promise.all([
...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
]);
}, false);
// const fetchHook = useAsync(async () => {
// await Promise.all([
// ...(payload.action === 'edit' ? [requestFetchUser(payload.user.id)] : []),
// ]);
// }, false);
const fetchHook = useQuery(
payload.action === 'edit' && ['user-invite-table', payload.user.id],
(key, id) => requestFetchUser(id),
{ manual: true }
);
const validationSchema = Yup.object().shape({
email: Yup.string()
.email()
@@ -63,23 +69,30 @@ function UserFormDialog({
enableReinitialize: true,
initialValues,
validationSchema,
onSubmit: (values) => {
onSubmit: (values,{setSubmitting}) => {
const form = { ...values };
requestSubmitInvite(form).then((response) => {
closeDialog(name);
AppToaster.show({
message: formatMessage({
id: 'teammate_invited_to_organization_account',
}),
intent: Intent.SUCCESS,
});
closeDialog(name);
});
setSubmitting(false);
queryCache.refetchQueries('users-table', { force: true });
}).catch((errors)=>{
setSubmitting(false)
})
},
});
const onDialogOpening = () => {
fetchHook.execute();
};
// Handle the dialog opening.
const onDialogOpening =useCallback(()=>{
fetchHook.refetch();
},[fetchHook]);
const onDialogClosed = useCallback(() => {
resetForm();
@@ -104,6 +117,7 @@ function UserFormDialog({
'dialog--loading': fetchHook.pending,
'dialog--invite-form': true,
})}
//
autoFocus={true}
canEscapeKeyClose={true}
isOpen={isOpen}

163
client/src/containers/ExchangeRates/ExchangeRate.js
View File

@@ -1,8 +1,12 @@
import React, { useEffect, useState, useCallback,useMemo } from 'react';
import { useQuery } from 'react-query';
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { useQuery, queryCache } from 'react-query';
import { useParams } from 'react-router-dom';
import { Alert, Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl, FormattedHTMLMessage } from 'react-intl';
import {
FormattedMessage as T,
useIntl,
FormattedHTMLMessage,
} from 'react-intl';
import AppToaster from 'components/AppToaster';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
@@ -10,13 +14,13 @@ import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ExchangeRateTable from './ExchangeRateTable';
import ExchangeRateActionsBar from './ExchangeRateActionsBar';
import withDialog from 'connectors/Dialog.connector';
import withDashboardActions from 'containers/Dashboard/withDashboard';
import withResourceActions from 'containers/Resources/withResourcesActions';
import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
import { compose } from 'utils';
function ExchangeRate({
// #withDashboard
changePageTitle,
@@ -29,45 +33,56 @@ function ExchangeRate({
requestDeleteExchangeRate,
addExchangeRatesTableQueries,
requestDeleteBulkExchangeRates,
// #withDialog
openDialog,
}) {
const { id } = useParams();
const [deleteExchangeRate, setDeleteExchangeRate] = useState(false);
const [selectedRows, setSelectedRows] = useState([]);
const { formatMessage } = useIntl();
const [bulkDelete, setBulkDelete] = useState(false);
const [filter, setFilter] = useState({});
const fetchExchangeRates = useQuery('exchange-rates-table',
() => requestFetchExchangeRates());
const fetchExchangeRates = useQuery('exchange-rates-table', () =>
requestFetchExchangeRates(),
);
useEffect(() => {
id
? changePageTitle(formatMessage({id:'exchange_rate_details'}))
: changePageTitle(formatMessage({id:'exchange_rate_list'}));
}, [id, changePageTitle,formatMessage]);
? changePageTitle(formatMessage({ id: 'exchange_rate_details' }))
: changePageTitle(formatMessage({ id: 'exchange_rate_list' }));
}, [id, changePageTitle, formatMessage]);
const handelDeleteExchangeRate = useCallback(
(exchange_rate) => {
setDeleteExchangeRate(exchange_rate);
},
[setDeleteExchangeRate]
[setDeleteExchangeRate],
);
const handelEditExchangeRate = (exchange_rate) => {};
const handelEditExchangeRate = (exchange_rate) => {
openDialog('exchangeRate-form', { action: 'edit', id: exchange_rate.id });
};
const handelCancelExchangeRateDelete = useCallback(() => {
setDeleteExchangeRate(false);
}, [setDeleteExchangeRate]);
const handelConfirmExchangeRateDelete = useCallback(() => {
requestDeleteExchangeRate(deleteExchangeRate.id).then(() => {
setDeleteExchangeRate(false);
AppToaster.show({
message: formatMessage({id:'the_exchange_rate_has_been_successfully_deleted'}),
requestDeleteExchangeRate(deleteExchangeRate.id)
.then(() => {
setDeleteExchangeRate(false);
AppToaster.show({
message: formatMessage({
id: 'the_exchange_rates_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
});
})
.catch(() => {
setDeleteExchangeRate(false);
});
});
}, [deleteExchangeRate, requestDeleteExchangeRate,formatMessage]);
}, [deleteExchangeRate, requestDeleteExchangeRate, formatMessage]);
// Handle fetch data of Exchange_rates datatable.
const handleFetchData = useCallback(
@@ -81,58 +96,58 @@ function ExchangeRate({
: {}),
});
},
[addExchangeRatesTableQueries]
[addExchangeRatesTableQueries],
);
// Handle selected rows change.
const handleSelectedRowsChange = useCallback(
(exchange_rates) => {
setSelectedRows(exchange_rates);
},
[setSelectedRows]
[setSelectedRows],
);
// Handle Exchange Rates bulk delete.
const handleBulkDelete = useCallback(
(exchangeRates) => {
setBulkDelete(exchangeRates);
},
[setBulkDelete]
);
// Handle Exchange Rates bulk delete.
const handleBulkDelete = useCallback(
(exchangeRatesIds) => {
setBulkDelete(exchangeRatesIds);
},
[setBulkDelete],
);
//Handel cancel itemCategories bulk delete.
const handleCancelBulkDelete =useCallback(()=>{
setBulkDelete(false)
},[])
//Handel cancel itemCategories bulk delete.
const handleCancelBulkDelete = useCallback(() => {
setBulkDelete(false);
}, []);
// handle confirm Exchange Rates bulk delete.
const handleConfirmBulkDelete = useCallback(() => {
requestDeleteBulkExchangeRates(bulkDelete)
.then(() => {
setBulkDelete(false);
AppToaster.show({
message: formatMessage({
id: 'the_exchange_rates_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
// handle confirm Exchange Rates bulk delete.
const handleConfirmBulkDelete = useCallback(() => {
requestDeleteBulkExchangeRates(bulkDelete)
.then(() => {
setBulkDelete(false);
AppToaster.show({
message: formatMessage({
id: 'the_exchange_rates_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
});
})
.catch((errors) => {
setBulkDelete(false);
});
})
.catch((errors) => {
setBulkDelete(false);
});
}, [requestDeleteBulkExchangeRates, bulkDelete,formatMessage]);
}, [requestDeleteBulkExchangeRates, bulkDelete, formatMessage]);
// Calculates the data table selected rows count.
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [
selectedRows,
]);
return (
<DashboardInsider>
<DashboardInsider loading={fetchExchangeRates.isFetching}>
<ExchangeRateActionsBar
onDeleteExchangeRate={handelDeleteExchangeRate}
selectedRows={selectedRows}
onBulkDelete={handleBulkDelete}
/>
<DashboardPageContent>
<ExchangeRateTable
@@ -143,33 +158,38 @@ const handleConfirmBulkDelete = useCallback(() => {
/>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'move_to_trash'} />}
icon='trash'
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteExchangeRate}
onCancel={handelCancelExchangeRateDelete}
onConfirm={handelConfirmExchangeRateDelete}
>
<p>
<FormattedHTMLMessage id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}/>
<FormattedHTMLMessage
id={'once_delete_this_exchange_rate_you_will_able_to_restore_it'}
/>
</p>
</Alert>
<Alert
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
icon='trash'
intent={Intent.DANGER}
isOpen={bulkDelete}
onCancel={handleCancelBulkDelete}
onConfirm={handleConfirmBulkDelete}
>
<p>
<FormattedHTMLMessage
id={'once_delete_these_exchange_rates_you_will_not_able_restore_them'}
/>
</p>
</Alert>
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={`${formatMessage({
id: 'delete',
})} (${selectedRowsCount})`}
icon="trash"
intent={Intent.DANGER}
isOpen={bulkDelete}
onCancel={handleCancelBulkDelete}
onConfirm={handleConfirmBulkDelete}
>
<p>
<FormattedHTMLMessage
id={
'once_delete_these_exchange_rates_you_will_not_able_restore_them'
}
/>
</p>
</Alert>
</DashboardPageContent>
</DashboardInsider>
);
@@ -178,5 +198,6 @@ const handleConfirmBulkDelete = useCallback(() => {
export default compose(
withExchangeRatesActions,
withResourceActions,
withDashboardActions
withDashboardActions,
withDialog,
)(ExchangeRate);

43
client/src/containers/ExchangeRates/ExchangeRateActionsBar.js
View File

@@ -11,7 +11,7 @@ import {
import classNames from 'classnames';
import Icon from 'components/Icon';
import { connect } from 'react-redux';
import { If } from 'components';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import withDialog from 'connectors/Dialog.connector';
@@ -19,8 +19,7 @@ import FilterDropdown from 'components/FilterDropdown';
import withResourceDetail from 'containers/Resources/withResourceDetails';
import { compose } from 'utils';
import { FormattedMessage as T ,useIntl } from 'react-intl';
import { FormattedMessage as T, useIntl } from 'react-intl';
function ExchangeRateActionsBar({
// #withDialog.
@@ -28,15 +27,15 @@ function ExchangeRateActionsBar({
// #withResourceDetail
resourceFields,
// #ownProps
selectedRows = [],
onDeleteExchangeRate,
onFilterChanged,
onBulkDelete
onBulkDelete,
}) {
const [filterCount, setFilterCount] = useState(0);
const {formatMessage} =useIntl()
const { formatMessage } = useIntl();
const onClickNewExchangeRate = () => {
openDialog('exchangeRate-form', {});
@@ -51,27 +50,20 @@ const {formatMessage} =useIntl()
},
});
// const handelDeleteExchangeRate = useCallback(
// (exchangeRate) => {
// onDeleteExchangeRate(exchangeRate);
// },
// [selectedRows, onDeleteExchangeRate]
// );
const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
selectedRows,
]);
const handelBulkDelete =useCallback(()=>{
onBulkDelete && onBulkDelete(selectedRows.map(r=>r.id));
},[onBulkDelete,selectedRows])
const handelBulkDelete = useCallback(() => {
onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id));
}, [onBulkDelete, selectedRows]);
return (
<DashboardActionsBar>
<NavbarGroup>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='plus' />}
icon={<Icon icon="plus" />}
text={<T id={'new_exchange_rate'} />}
onClick={onClickNewExchangeRate}
/>
@@ -87,29 +79,30 @@ const {formatMessage} =useIntl()
filterCount <= 0 ? (
<T id={'filter'} />
) : (
`${filterCount} ${formatMessage({id:'filters_applied'})}`
`${filterCount} ${formatMessage({ id: 'filters_applied' })}`
)
}
icon={<Icon icon='filter' />}
icon={<Icon icon="filter" />}
/>
</Popover>
{hasSelectedRows && (
<If condition={hasSelectedRows}>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='trash' iconSize={15} />}
icon={<Icon icon="trash" iconSize={15} />}
text={<T id={'delete'} />}
intent={Intent.DANGER}
onClick={handelBulkDelete}
/>
)}
</If>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-import' />}
icon={<Icon icon="file-import" />}
text={<T id={'import'} />}
/>
<Button
className={Classes.MINIMAL}
icon={<Icon icon='file-export' />}
icon={<Icon icon="file-export" />}
text={<T id={'export'} />}
/>
</NavbarGroup>
@@ -128,5 +121,5 @@ export default compose(
withDialog,
withResourceDetail(({ resourceFields }) => ({
resourceFields,
}))
})),
)(ExchangeRateActionsBar);

121
client/src/containers/ExchangeRates/ExchangeRateTable.js
View File

@@ -1,16 +1,15 @@
import React, { useCallback, useMemo,useState } from 'react';
import React, { useCallback, useMemo, useState, useEffect } from 'react';
import Icon from 'components/Icon';
import DialogConnect from 'connectors/Dialog.connector';
import DataTable from 'components/DataTable';
import { Button, Popover, Menu, MenuItem, Position } from '@blueprintjs/core';
import { Button, Popover, Menu, MenuItem, Position,Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import LoadingIndicator from 'components/LoadingIndicator';
import withExchangeRatesActions from 'containers/ExchangeRates/withExchangeRatesActions';
import withExchangeRates from 'containers/ExchangeRates/withExchangeRates';
import { compose } from 'utils';
function ExchangeRateTable({
// #withExchangeRates
exchangeRatesList,
@@ -25,7 +24,6 @@ function ExchangeRateTable({
onEditExchangeRate,
onSelectedRowsChange,
}) {
const [initialMount, setInitialMount] = useState(false);
const { formatMessage } = useIntl();
@@ -47,69 +45,81 @@ function ExchangeRateTable({
/>
<MenuItem
text={<T id={'delete_exchange_rate'} />}
intent={Intent.DANGER}
onClick={handleDeleteExchangeRate(ExchangeRate)}
/>
</Menu>
),
[handelEditExchangeRate, handleDeleteExchangeRate]
[handelEditExchangeRate, handleDeleteExchangeRate],
);
const columns = useMemo(() => [
{
id: 'date',
Header: formatMessage({ id: 'date' }),
// accessor: 'date',
width: 150,
},
{
id: 'currency_code',
Header: formatMessage({ id: 'currency_code' }),
accessor: 'currency_code',
className: 'currency_code',
width: 150,
},
{
id: 'exchange_rate',
Header: formatMessage({ id: 'exchange_rate' }),
accessor: 'exchange_rate',
className: 'exchange_rate',
width: 150,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon='ellipsis-h' />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: false,
},
], [actionMenuList,formatMessage]);
const columns = useMemo(
() => [
{
id: 'date',
Header: formatMessage({ id: 'date' }),
// accessor: 'date',
width: 150,
},
{
id: 'currency_code',
Header: formatMessage({ id: 'currency_code' }),
accessor: 'currency_code',
className: 'currency_code',
width: 150,
},
{
id: 'exchange_rate',
Header: formatMessage({ id: 'exchange_rate' }),
accessor: 'exchange_rate',
className: 'exchange_rate',
width: 150,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_BOTTOM}
>
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
),
className: 'actions',
width: 50,
disableResizing: false,
},
],
[actionMenuList, formatMessage],
);
const selectionColumn = useMemo(() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
}), []);
const selectionColumn = useMemo(
() => ({
minWidth: 42,
width: 42,
maxWidth: 42,
}),
[],
);
const handelFetchData = useCallback(
(...params) => {
onFetchData && onFetchData(...params);
},
[onFetchData]
[onFetchData],
);
const handelSelectedRowsChange = useCallback((selectRows) => {
onSelectedRowsChange && onSelectedRowsChange(selectRows.map((c) => c.original));
}, [onSelectedRowsChange]);
const handelSelectedRowsChange = useCallback(
(selectRows) => {
onSelectedRowsChange &&
onSelectedRowsChange(selectRows.map((c) => c.original));
},
[onSelectedRowsChange],
);
return (
<LoadingIndicator loading={loading} mount={false}>
<DataTable
columns={columns}
data={exchangeRatesList}
@@ -122,14 +132,15 @@ function ExchangeRateTable({
onSelectedRowsChange={handelSelectedRowsChange}
spinnerProps={{ size: 30 }}
/>
</LoadingIndicator>
);
}
export default compose(
DialogConnect,
withExchangeRatesActions,
withExchangeRates(({ exchangeRatesList ,exchangeRatesLoading }) => ({
withExchangeRates(({ exchangeRatesList, exchangeRatesLoading }) => ({
exchangeRatesList,
exchangeRatesLoading
}))
exchangeRatesLoading,
})),
)(ExchangeRateTable);

2
client/src/containers/Items/ItemCategoriesList.js
View File

@@ -183,7 +183,7 @@ const ItemCategoryList = ({
>
<p>
<FormattedHTMLMessage
id={'once_delete_these_item_categories_you_will_not_able_restore_them'}
id={'once_delete_these_items_you_will_not_able_restore_them'}
/>
</p>
</Alert>

2
client/src/containers/Items/ItemCategoriesTable.js
View File

@@ -5,6 +5,7 @@ import {
Menu,
MenuItem,
Position,
Intent
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
@@ -37,6 +38,7 @@ const ItemsCategoryList = ({
onClick={() => handelEditCategory(category)} />
<MenuItem
text={<T id={'delete_category'}/>}
intent={Intent.DANGER}
onClick={() => handleDeleteCategory(category)}
/>
</Menu>

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

@@ -1,4 +1,4 @@
import React, { useCallback, useState, useMemo } from 'react';
import React, { useCallback, useState, useMemo, useEffect } from 'react';
import {
Button,
Popover,
@@ -8,7 +8,7 @@ import {
Alert,
Intent,
} from '@blueprintjs/core';
import { useQuery } from 'react-query';
import { useQuery, queryCache } from 'react-query';
import Icon from 'components/Icon';
import { compose } from 'utils';
@@ -18,133 +18,165 @@ import LoadingIndicator from 'components/LoadingIndicator';
import DataTable from 'components/DataTable';
import AppToaster from 'components/AppToaster';
import withDashboard from 'connectors/Dashboard.connector';
import withDashboard from 'containers/Dashboard/withDashboard';
import withCurrencies from 'containers/Currencies/withCurrencies';
import withCurrenciesActions from 'containers/Currencies/withCurrenciesActions';
import { FormattedMessage as T, useIntl } from 'react-intl';
import {
FormattedMessage as T,
FormattedHTMLMessage,
useIntl,
} from 'react-intl';
function CurrenciesList({
// #withCurrencies
currenciesList,
currenciesList,
currenciesLoading,
// #withCurrenciesActions
requestDeleteCurrency,
requestFetchCurrencies,
// #withDialog
openDialog,
changePreferencesPageTitle,
// #ownProps
onFetchData,
}) {
const [deleteCurrencyState, setDeleteCurrencyState] = useState(false);
const { formatMessage } = useIntl()
const fetchCurrencies = useQuery(['currencies-table'],
() => requestFetchCurrencies());
const [tableLoading, setTableLoading] = useState(false);
const [initialMount, setInitialMount] = useState(false);
// const handleEditCurrency = (currency) => {
// openDialog('currency-form', {
// action: 'edit',
// currencyCode: currency.currency_code,
// });
// };
const handleEditCurrency =useCallback((currency)=>{
openDialog('currency-form', {
action: 'edit',
currencyCode: currency.currency_code,
});
},[openDialog])
const { formatMessage } = useIntl();
const fetchCurrencies = useQuery('currencies-table', () =>
requestFetchCurrencies(),
);
// const onDeleteCurrency = (currency) => {
// setDeleteCurrencyState(currency);
// };
useEffect(() => {
changePreferencesPageTitle(formatMessage({ id: 'currencies' }));
}, [changePreferencesPageTitle, formatMessage]);
const onDeleteCurrency =useCallback((currency)=>{setDeleteCurrencyState(currency);},[])
const handleEditCurrency = useCallback(
(currency) => {
openDialog('currency-form', {
action: 'edit',
currencyCode: currency.currency_code,
});
},
[openDialog],
);
const onDeleteCurrency = useCallback((currency) => {
setDeleteCurrencyState(currency);
}, []);
const handleCancelCurrencyDelete = () => {
setDeleteCurrencyState(false);
};
const handleConfirmCurrencyDelete = useCallback(() => {
requestDeleteCurrency(deleteCurrencyState.currency_code).then(
(response) => {
setDeleteCurrencyState(false);
AppToaster.show({
message: formatMessage({id:'the_currency_has_been_successfully_deleted'}),
const handleConfirmCurrencyDelete = useCallback(
(refetch) => {
requestDeleteCurrency(deleteCurrencyState.currency_code)
.then((response) => {
setDeleteCurrencyState(false);
AppToaster.show({
message: formatMessage({
id: 'the_currency_has_been_successfully_deleted',
}),
intent: Intent.SUCCESS,
});
})
.catch((errors) => {
setDeleteCurrencyState(false);
});
}
);
}, [requestDeleteCurrency,deleteCurrencyState,formatMessage]);
const actionMenuList = useCallback((currency) => (
<Menu>
<MenuItem
text={<T id={'edit_currency'} />}
onClick={() => handleEditCurrency(currency)} />
<MenuItem
text={<T id={'delete_currency'} />}
onClick={() => onDeleteCurrency(currency)}
/>
</Menu>
), [handleEditCurrency,onDeleteCurrency]);
const columns = useMemo(() => [
{
Header: formatMessage({id:'currency_name'}),
accessor: 'currency_name',
width: 100,
},
{
Header: formatMessage({id:'currency_code'}),
accessor: 'currency_code',
className: 'currency_code',
width: 100,
},
{
Header: 'Currency sign',
width: 50,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_TOP}
>
<Button icon={<Icon icon='ellipsis-h' />} />
</Popover>
),
className: 'actions',
width: 50,
},
], [actionMenuList,formatMessage]);
[deleteCurrencyState, requestDeleteCurrency, formatMessage],
);
const handleDatatableFetchData = useCallback(() => {
const actionMenuList = useCallback(
(currency) => (
<Menu>
<MenuItem
text={<T id={'edit_currency'} />}
onClick={() => handleEditCurrency(currency)}
/>
<MenuItem
text={<T id={'delete_currency'} />}
onClick={() => onDeleteCurrency(currency)}
intent={Intent.DANGER}
/>
</Menu>
),
[handleEditCurrency, onDeleteCurrency],
);
const columns = useMemo(
() => [
{
Header: formatMessage({ id: 'currency_name' }),
accessor: 'currency_name',
width: 150,
},
{
Header: formatMessage({ id: 'currency_code' }),
accessor: 'currency_code',
className: 'currency_code',
width: 120,
},
{
Header: 'Currency sign',
width: 120,
},
{
id: 'actions',
Header: '',
Cell: ({ cell }) => (
<Popover
content={actionMenuList(cell.row.original)}
position={Position.RIGHT_TOP}
>
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
),
className: 'actions',
width: 50,
},
],
[actionMenuList, formatMessage],
);
const handleDataTableFetchData = useCallback(() => {
onFetchData && onFetchData();
}, [onFetchData]);
}, []);
return (
<LoadingIndicator>
<LoadingIndicator loading={fetchCurrencies.isFetching}>
<DataTable
noInitialFetch={true}
columns={columns}
data={currenciesList}
loading={fetchCurrencies.isFetching}
onFetchData={handleDataTableFetchData()}
loading={currenciesLoading && !initialMount}
selectionColumn={false}
manualSortBy={true}
expandable={false}
/>
<Alert
cancelButtonText={<T id={'cancel'}/>}
confirmButtonText={<T id={'move_to_trash'}/>}
icon='trash'
cancelButtonText={<T id={'cancel'} />}
confirmButtonText={<T id={'delete'} />}
icon="trash"
intent={Intent.DANGER}
isOpen={deleteCurrencyState}
onCancel={handleCancelCurrencyDelete}
onConfirm={handleConfirmCurrencyDelete}
>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be
able to restore it later, but it will become private to you.
<FormattedHTMLMessage
id={'once_delete_this_currency_you_will_able_to_restore_it'}
/>
</p>
</Alert>
</LoadingIndicator>
@@ -152,10 +184,10 @@ function CurrenciesList({
}
export default compose(
DialogConnect,
withDashboard,
withCurrencies(({ currenciesList }) => ({
currenciesList,
})),
withCurrenciesActions,
DialogConnect,
withDashboard
)(CurrenciesList);

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

@@ -1,4 +1,4 @@
import React, { useState} from 'react';
import React, { useState, useCallback, useEffect } from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import {
@@ -8,81 +8,153 @@ import {
Intent,
MenuItem,
Classes,
Spinner,
} from '@blueprintjs/core';
import classNames from 'classnames';
import { TimezonePicker } from '@blueprintjs/timezone';
import { Select } from '@blueprintjs/select';
import { useQuery } from 'react-query';
import { useQuery, queryCache } from 'react-query';
import { FormattedMessage as T, useIntl } from 'react-intl';
import moment from 'moment';
import { compose, optionsMapToArray } from 'utils';
import ErrorMessage from 'components/ErrorMessage';
import AppToaster from 'components/AppToaster';
import { ListSelect } from 'components';
import { If } from 'components';
import withDashboard from 'containers/Dashboard/withDashboard';
import withSettings from 'containers/Settings/withSettings';
import withSettingsActions from 'containers/Settings/withSettingsActions';
function GeneralPreferences({
// #withSettings
organizationSettings,
//# withDashboard
changePreferencesPageTitle,
// #withSettingsActions
requestSubmitOptions,
requestFetchOptions,
}) {
const {formatMessage} = useIntl();
const { formatMessage } = useIntl();
const [selectedItems, setSelectedItems] = useState({});
const [timeZone, setTimeZone] = useState('');
const fetchHook = useQuery(['settings'],
() => { requestFetchOptions(); });
const fetchHook = useQuery(
['settings'],
() => {
requestFetchOptions();
},
{ manual: true },
);
const businessLocation = [
{ id: 218, name: 'LIBYA', code: 'LY' },
{ id: 380, name: 'UKRAINE', code: 'UA' },
{ id: 212, name: 'Morocco', code: 'MA' },
];
useEffect(() => {
changePreferencesPageTitle(formatMessage({ id: 'general' }));
}, [changePreferencesPageTitle, formatMessage]);
const businessLocation = [{ id: 218, name: 'LIBYA', value: 'libya' }];
const languagesDisplay = [
{ id: 0, name: 'EN', label: 'English' },
{ id: 1, name: 'Arb', label: 'Arabic' },
{ id: 0, name: 'English', value: 'EN' },
{ id: 1, name: 'Arabic', value: 'Arab ' },
];
const currencies = [
{ id: 0, name: 'US Dollar', code: 'USD' },
{ id: 1, name: 'Euro', code: 'EUR' },
{ id: 2, name: 'Libyan Dinar ', code: 'LYD' },
{ 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: 'January-July', label: 'January-July' },
{ id: 1, name: 'August-December', label: 'August-December' },
{ id: 0, name: 'January - December', value: 'january' },
{ id: 1, name: 'February - January', value: 'february' },
{ id: 2, name: 'March - February', value: 'March' },
{ id: 3, name: 'April - March', value: 'april' },
{ id: 4, name: 'May - April', value: 'may' },
{ id: 5, name: 'June - May', value: 'june' },
{ id: 6, name: 'July - June', value: 'july' },
{ id: 7, name: 'August - July', value: 'August' },
{ id: 8, name: 'September - August', value: 'september' },
{ id: 9, name: 'October - September', value: 'october' },
{ id: 10, name: 'November - October', value: 'november' },
{ id: 11, name: 'December - November', value: 'December' },
];
const dateFormat = [
{ id: 1, name: '04/11/2020', format: 'MM-DD-YY' },
{ id: 3, name: '2020/03/21', format: 'YY/MM/DD' },
{ id: 4, name: 'Apr 11, 2020', format: 'MMMM yyyy' },
{ id: 6, name: 'Saturday, Apr 11, 2020', format: 'EEEE, MMM d, yyyy' },
{
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_'})),
industry: Yup.string().required().label(formatMessage({id:'organization_industry_'})),
location: Yup.string().required().label(formatMessage({id:'location'})),
base_currency: Yup.string().required(
formatMessage({ id: 'required' })
),
fiscal_year: Yup.string().required().label(formatMessage({id:'base_currency_'})),
language: Yup.string().required().label(formatMessage({id:'language'})),
// time_zone: Yup.object().required()..label(formatMessage({id:''})),
date_format: Yup.date().required().label(formatMessage({id:'date_format_'})),
name: Yup.string()
.required()
.label(formatMessage({ id: 'organization_name_' })),
industry: Yup.string()
.required()
.label(formatMessage({ id: 'organization_industry_' })),
location: Yup.string()
.required()
.label(formatMessage({ id: 'location' })),
base_currency: Yup.string().required(formatMessage({ id: 'required' })),
fiscal_year: Yup.string()
.required()
.label(formatMessage({ id: 'base_currency_' })),
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_' })),
});
const query = queryCache.refetchQueries('settings');
const {
values,
errors,
touched,
setFieldValue,
getFieldProps,
handleSubmit,
resetForm,
isSubmitting,
} = useFormik({
enableReinitialize: true,
initialValues: {
@@ -93,13 +165,17 @@ function GeneralPreferences({
const options = optionsMapToArray(values).map((option) => {
return { key: option.key, ...option, group: 'organization' };
});
requestSubmitOptions({ options })
.then((response) => {
AppToaster.show({
message: 'The_Options_has_been_Submit',
message: formatMessage({
id: 'the_options_has_been_successfully_created',
}),
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
queryCache.refetchQueries('settings', { force: true });
})
.catch((error) => {
setSubmitting(false);
@@ -112,7 +188,6 @@ function GeneralPreferences({
className={'preferences-menu'}
key={item.id}
text={item.name}
label={item.code}
onClick={handleClick}
/>
);
@@ -122,7 +197,7 @@ function GeneralPreferences({
className={'preferences-menu'}
key={item.id}
text={item.name}
label={item.code}
label={item.value}
onClick={handleClick}
/>
);
@@ -140,7 +215,6 @@ function GeneralPreferences({
className={'preferences-menu'}
key={item.id}
text={item.name}
label={item.label}
onClick={handleClick}
/>
);
@@ -149,8 +223,8 @@ function GeneralPreferences({
<MenuItem
className={'preferences-menu'}
key={item.id}
text={item.format}
label={item.name}
text={item.name}
label={item.label}
onClick={handleClick}
/>
);
@@ -161,218 +235,228 @@ function GeneralPreferences({
...selectedItems,
[filedName]: filed,
});
setFieldValue(filedName, filed.name);
setFieldValue(filedName, filed.value);
};
};
const getSelectedItemLabel = (filedName, defaultLabel) => {
return typeof selectedItems[filedName] !== 'undefined'
? selectedItems[filedName].name
: defaultLabel;
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 = (timezone) => setTimeZone(timezone);
return (
<div className='preferences__inside-content--general'>
<div
className={classNames({
'preferences__inside-content--general': true,
preferences__loading: fetchHook.pending,
})}
>
<form onSubmit={handleSubmit}>
<FormGroup
label={<T id={'organization_name'}/>}
label={<T id={'organization_name'} />}
inline={true}
intent={(errors.name && touched.name) && Intent.DANGER}
helperText={<ErrorMessage name='name' {...{errors, touched}} />}
intent={errors.name && touched.name && Intent.DANGER}
helperText={<ErrorMessage name="name" {...{ errors, touched }} />}
>
<InputGroup
medium={'true'}
intent={(errors.name && touched.name) && Intent.DANGER}
intent={errors.name && touched.name && Intent.DANGER}
{...getFieldProps('name')}
/>
</FormGroup>
<FormGroup
label={<T id={'organization_industry'}/>}
label={<T id={'organization_industry'} />}
inline={true}
intent={(errors.industry && touched.industry) && Intent.DANGER}
helperText={<ErrorMessage name='industry' {...{errors, touched}} />}
intent={errors.industry && touched.industry && Intent.DANGER}
helperText={<ErrorMessage name="industry" {...{ errors, touched }} />}
>
<InputGroup
medium={'true'}
intent={(errors.industry && touched.industry) && Intent.DANGER}
intent={errors.industry && touched.industry && Intent.DANGER}
{...getFieldProps('industry')}
/>
</FormGroup>
<FormGroup
label={<T id={'business_location'}/>}
label={<T id={'business_location'} />}
className={classNames(
'form-group--business-location',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
inline={true}
helperText={<ErrorMessage name='location' {...{errors, touched}} />}
intent={(errors.location && touched.location) && Intent.DANGER}
helperText={<ErrorMessage name="location" {...{ errors, touched }} />}
intent={errors.location && touched.location && Intent.DANGER}
>
<Select
<ListSelect
items={businessLocation}
noResults={<MenuItem disabled={true} text='No result.' />}
noResults={<MenuItem disabled={true} text="No result." />}
itemRenderer={businessLocationItem}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('location')}
>
<Button
fill={true}
rightIcon='caret-down'
text={getSelectedItemLabel(
'location',
organizationSettings.location
)}
/>
</Select>
selectedItem={values.location}
selectedItemProp={'value'}
defaultText={<T id={'select_business_location'} />}
labelProp={'name'}
/>
</FormGroup>
<FormGroup
label={<T id={'base_currency'}/>}
label={<T id={'base_currency'} />}
className={classNames(
'form-group--base-currency',
'form-group--select-list',
Classes.FILL
Classes.LOADING,
Classes.FILL,
)}
inline={true}
helperText={<ErrorMessage name='base_currency' {...{ errors, touched }} />}
intent={(errors.base_currency && touched.base_currency) && Intent.DANGER}
helperText={
<ErrorMessage name="base_currency" {...{ errors, touched }} />
}
intent={
errors.base_currency && touched.base_currency && Intent.DANGER
}
>
<Select
<ListSelect
items={currencies}
noResults={<MenuItem disabled={true} text='No result.' />}
noResults={<MenuItem disabled={true} text="No result." />}
itemRenderer={currencyItem}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('base_currency')}
>
<Button
fill={true}
rightIcon='caret-down'
text={getSelectedItemLabel(
'base_currency',
organizationSettings.base_currency
)}
/>
</Select>
itemPredicate={filterItems}
selectedItem={values.base_currency}
selectedItemProp={'value'}
defaultText={<T id={'select_base_currency'} />}
labelProp={'name'}
/>
</FormGroup>
<FormGroup
label={<T id={'fiscal_year'}/>}
label={<T id={'fiscal_year'} />}
className={classNames(
'form-group--fiscal-year',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
inline={true}
helperText={<ErrorMessage name='fiscal_year' {...{errors, touched}} />}
intent={(errors.fiscal_year && touched.fiscal_year) && Intent.DANGER}
helperText={
<ErrorMessage name="fiscal_year" {...{ errors, touched }} />
}
intent={errors.fiscal_year && touched.fiscal_year && Intent.DANGER}
>
<Select
<ListSelect
items={fiscalYear}
noResults={<MenuItem disabled={true} text='No result.' />}
noResults={<MenuItem disabled={true} text="No result." />}
itemRenderer={fiscalYearItem}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('fiscal_year')}
>
<Button
fill={true}
rightIcon='caret-down'
text={getSelectedItemLabel(
'fiscal_year',
organizationSettings.fiscal_year
)}
/>
</Select>
itemPredicate={filterItems}
selectedItem={values.fiscal_year}
selectedItemProp={'value'}
defaultText={<T id={'select_fiscal_year'} />}
labelProp={'name'}
/>
</FormGroup>
<FormGroup
label={<T id={'language'}/>}
label={<T id={'language'} />}
inline={true}
className={classNames(
'form-group--language',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
intent={(errors.language && touched.language) && Intent.DANGER}
helperText={<ErrorMessage name='language' {...{errors, touched}} />}
intent={errors.language && touched.language && Intent.DANGER}
helperText={<ErrorMessage name="language" {...{ errors, touched }} />}
>
<Select
<ListSelect
items={languagesDisplay}
noResults={<MenuItem disabled={true} text='No results.' />}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={languageItem}
popoverProps={{ minimal: true }}
onItemSelect={onItemsSelect('language')}
>
<Button
rightIcon='caret-down'
text={getSelectedItemLabel(
'language',
organizationSettings.language
)}
/>
</Select>
itemPredicate={filterItems}
selectedItem={values.language}
selectedItemProp={'value'}
defaultText={<T id={'select_language'} />}
labelProp={'name'}
/>
</FormGroup>
<FormGroup
label={<T id={'time_zone'}/>}
label={<T id={'time_zone'} />}
inline={true}
className={classNames(
'form-group--time-zone',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
intent={(errors.time_zone && touched.time_zone) && Intent.DANGER}
helperText={<ErrorMessage name='time_zone' {...{errors, touched}} />}
intent={errors.time_zone && touched.time_zone && Intent.DANGER}
helperText={
<ErrorMessage name="time_zone" {...{ errors, touched }} />
}
>
<TimezonePicker
value={timeZone}
onChange={handleTimezoneChange}
showLocalTimezone={true}
valueDisplayFormat='composite'
valueDisplayFormat="composite"
placeholder={<T id={'select_time_zone'} />}
/>
</FormGroup>
<FormGroup
label={<T id={'date_format'}/>}
label={<T id={'date_format'} />}
inline={true}
className={classNames(
'form-group--language',
'form-group--select-list',
Classes.FILL
Classes.FILL,
)}
intent={(errors.date_format && touched.date_format) && Intent.DANGER}
helperText={<ErrorMessage name='date_format' {...{errors, touched}} />}
intent={errors.date_format && touched.date_format && Intent.DANGER}
helperText={
<ErrorMessage name="date_format" {...{ errors, touched }} />
}
>
<Select
<ListSelect
items={dateFormat}
noResults={<MenuItem disabled={true} text='No result.' />}
noResults={<MenuItem disabled={true} text="No result." />}
itemRenderer={date_format}
popoverProp={{ minimal: true }}
onItemSelect={onItemsSelect('date_format')}
>
<Button
rightIcon='caret-down'
text={getSelectedItemLabel(
'date_format',
organizationSettings.date_format
)}
/>
</Select>
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'
type="submit"
loading={isSubmitting}
>
<T id={'save'}/>
<T id={'save'} />
</Button>
<Button onClick={'handleClose'}>
<T id={'close'} />
</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>
</div>
);
}
@@ -380,4 +464,5 @@ function GeneralPreferences({
export default compose(
withSettings,
withSettingsActions,
withDashboard,
)(GeneralPreferences);

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

@@ -16,7 +16,7 @@ function UsersActions({
}, [openDialog]);
return (
<div claass="preferences-actions">
<div className="preferences-actions">
<Button
icon={<Icon icon='plus' iconSize={12} />}
onClick={onClickNewUser}

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

@@ -1,4 +1,4 @@
import React, { useState, useMemo, useCallback } from 'react';
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import { queryCache, useQuery } from 'react-query';
import DataTable from 'components/DataTable';
import {
@@ -21,6 +21,7 @@ import {
import Icon from 'components/Icon';
import LoadingIndicator from 'components/LoadingIndicator';
import { If } from 'components';
import AppToaster from 'components/AppToaster';
@@ -34,7 +35,7 @@ import { compose } from 'utils';
function UsersListPreferences({
// #withDialog
openDialog,
closeDialog,
changePreferencesPageTitle,
// #withUsers
usersList,
@@ -52,9 +53,14 @@ function UsersListPreferences({
const { formatMessage } = useIntl();
const fetchUsers = useQuery('users-table', () => requestFetchUsers());
const onInactiveUser = (user) => {
useEffect(() => {
changePreferencesPageTitle(formatMessage({ id: 'users' }));
}, [changePreferencesPageTitle, formatMessage]);
const onInactiveUser = useCallback((user) => {
setInactiveUserState(user);
};
}, []);
// Handle cancel inactive user alert
const handleCancelInactiveUser = useCallback(() => {
@@ -63,38 +69,42 @@ function UsersListPreferences({
// handel confirm user activation
const handleConfirmUserActive = useCallback(() => {
requestInactiveUser(inactiveUserState.id).then(() => {
setInactiveUserState(false);
AppToaster.show({
message: formatMessage({
id: 'the_user_has_been_successfully_inactivated',
}),
requestInactiveUser(inactiveUserState.id)
.then(() => {
setInactiveUserState(false);
AppToaster.show({
message: formatMessage({
id: 'the_user_has_been_successfully_inactivated',
}),
intent: Intent.SUCCESS,
});
queryCache.refetchQueries('users-table', { force: true });
})
.catch((error) => {
setInactiveUserState(false);
});
});
}, [
inactiveUserState,
requestInactiveUser,
requestFetchUsers,
formatMessage,
]);
}, [inactiveUserState, requestInactiveUser, formatMessage]);
const onDeleteUser = (user) => {
const onDeleteUser = useCallback((user) => {
setDeleteUserState(user);
};
}, []);
const handleCancelUserDelete = () => {
setDeleteUserState(false);
};
const onEditUser = (user) => () => {
const form = Object.keys(user).reduce((obj, key) => {
const camelKey = snakeCase(key);
obj[camelKey] = user[key];
return obj;
}, {});
const onEditUser = useCallback(
(user) => () => {
const form = Object.keys(user).reduce((obj, key) => {
const camelKey = snakeCase(key);
obj[camelKey] = user[key];
return obj;
}, {});
openDialog('userList-form', { action: 'edit', user: form });
};
openDialog('userList-form', { action: 'edit', user: form });
},
[openDialog],
);
// Handle confirm User delete
@@ -121,19 +131,24 @@ function UsersListPreferences({
const actionMenuList = useCallback(
(user) => (
<Menu>
<MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
<MenuDivider />
<MenuItem
text={<T id={'inactivate_user'} />}
onClick={() => onInactiveUser(user)}
/>
<If condition={user.invite_accepted_at}>
<MenuItem text={<T id={'edit_user'} />} onClick={onEditUser(user)} />
<MenuDivider />
<MenuItem
text={<T id={'inactivate_user'} />}
onClick={() => onInactiveUser(user)}
/>
</If>
<MenuItem
text={<T id={'delete_user'} />}
onClick={() => onDeleteUser(user)}
intent={Intent.DANGER}
/>
</Menu>
),
[],
[onInactiveUser, onDeleteUser, onEditUser],
);
const columns = useMemo(
@@ -160,7 +175,11 @@ function UsersListPreferences({
id: 'status',
Header: 'Status',
accessor: (user) =>
user.active ? (
!user.invite_accepted_at ? (
<Tag minimal={true}>
<T id={'inviting'} />
</Tag>
) : user.active ? (
<Tag intent={Intent.SUCCESS} minimal={true}>
<T id={'activate'} />
</Tag>
@@ -193,7 +212,7 @@ function UsersListPreferences({
const handelDataTableFetchData = useCallback(() => {
onFetchData && onFetchData();
}, []);
}, [onFetchData]);
return (
<LoadingIndicator>

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

@@ -283,8 +283,7 @@ export default {
'The exchange rate has been successfully edited',
the_exchange_rate_has_been_successfully_created:
'The exchange rate has been successfully created',
the_exchange_rate_has_been_successfully_deleted:
'The exchange rate has been successfully deleted.',
the_user_details_has_been_updated: 'The user details has been updated',
the_category_has_been_successfully_created:
'The category has been successfully created.',
@@ -329,6 +328,7 @@ export default {
journal_sheet: 'Journal Sheet',
run_report: 'Run Report',
num: 'Num.',
inviting: 'INVITING',
acc_code: 'Acc. Code',
display_report_columns: 'Display report columns',
select_display_columns_by: 'Select display columns by...',
@@ -337,7 +337,25 @@ export default {
'The currency has been successfully edited',
the_currency_has_been_successfully_created:
'The currency has been successfully created',
the_currency_has_been_successfully_deleted:
'The currency has been successfully deleted',
once_delete_this_currency_you_will_able_to_restore_it: `Once you delete this currency, you won\'t be able to restore it later. Are you sure you want to delete this currency?`,
once_delete_this_exchange_rate_you_will_able_to_restore_it: `Once you delete this exchange rate, you won\'t be able to restore it later. Are you sure you want to delete this exchange rate?`,
once_delete_these_exchange_rates_you_will_not_able_restore_them: `Once you delete these exchange rates, you won't be able to retrieve them later. Are you sure you want to delete them?`,
once_delete_this_item_category_you_will_able_to_restore_it: `Once you delete this item, you won\'t be able to restore it later. Are you sure you want to delete this item?`,
select_business_location: 'Select Business Location',
select_base_currency: 'Select Base Currency',
select_fiscal_year: 'Select Fiscal Year',
select_language: 'Select Language',
select_date_format: 'Select Date Format',
select_time_zone: 'Select Time Zone',
select_currency_code: 'Select Currency Code',
select_parent_category: 'Select Parent Category',
the_options_has_been_successfully_created:
'The options has been successfully created',
there_is_exchange_rate_in_this_date_with_the_same_currency:
'There is exchange rate in this date with the same currency.',
the_exchange_rates_has_been_successfully_deleted:'The exchange rates has been successfully deleted',
// Name Labels
expense_account_id: 'Expense account',
payment_account_id: 'Payment account',
@@ -363,14 +381,20 @@ export default {
date_format_: 'Date format',
category_name_: 'Category name',
view_name_: 'View name',
time_zone: 'Time zone',
location: 'Location',
the_items_has_been_successfully_deleted:
'The items have been successfully deleted.',
once_delete_these_items_you_will_not_able_restore_them:
"Once you delete these items, you won't be able to retrieve them later. Are you sure you want to delete them?",
ops_something_went_wrong: 'Something went wrong! Please try again.',
session_expired: 'Session Expired!',
this_report_does_not_contain_any_data_between_date_period: 'This report does not contain any data between date period.',
welcome_organization_account_has_been_created: '👋 Welcome, You organization account has been created, Sign in now!',
the_phone_number_already_used_in_another_account: 'he phone number is already used in another account',
the_email_already_used_in_another_account: 'The email is already used in another account',
this_report_does_not_contain_any_data_between_date_period:
'This report does not contain any data between date period.',
welcome_organization_account_has_been_created:
'👋 Welcome, You organization account has been created, Sign in now!',
the_phone_number_already_used_in_another_account:
'he phone number is already used in another account',
the_email_already_used_in_another_account:
'The email is already used in another account',
};

58
client/src/store/ExchangeRate/exchange.actions.js
View File

@@ -33,13 +33,34 @@ export const fetchExchangeRates = () => {
};
export const submitExchangeRate = ({ form }) => {
return (dispatch) => {
return ApiService.post('exchange_rates', form);
};
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.post('exchange_rates', form).then((response) => {
resolve(response);
}).catch((error)=>{
const {response} = error
const {data} = response;
reject(data?.errors)
})
});
};
// export const deleteExchangeRate = (id) => {
// return (dispatch) => ApiService.delete(`exchange_rates/${id}`);
// }
export const deleteExchangeRate = (id) => {
return (dispatch) => ApiService.delete(`exchange_rates/${id}`);
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.delete(`exchange_rates/${id}`)
.then((response) => {
dispatch({ type: t.EXCHANGE_RATE_DELETE, id });
resolve(response);
})
.catch((error) => {
reject(error.response.data.errors || []);
});
});
};
export const editExchangeRate = (id, form) => {
@@ -59,23 +80,24 @@ export const editExchangeRate = (id, form) => {
if (errors) {
dispatch({ type: t.CLEAR_EXCHANGE_RATE_FORM_ERRORS, errors });
}
reject(error);
reject(data?.errors);
});
});
};
export const deleteBulkExchangeRates = ({ ids }) => {
return dispatch => new Promise((resolve, reject) => {
ApiService.delete(`exchange_rates/bulk`, { params: { ids }}).then((response) => {
dispatch({
type: t.EXCHANGE_RATES_BULK_DELETE,
payload: { ids }
});
resolve(response);
}).catch((error) => {
reject(error);
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.delete(`exchange_rates/bulk`, { params: { ids } })
.then((response) => {
dispatch({
type: t.EXCHANGE_RATES_BULK_DELETE,
payload: { ids },
});
resolve(response);
})
.catch((error) => {
reject(error);
});
});
});
};
};

22
client/src/store/ExchangeRate/exchange.reducer.js
View File

@@ -21,17 +21,17 @@ export default createReducer(initialState, {
state.loading = action.loading;
},
[t.EXCHANGE_RATES_BULK_DELETE]:(state,action)=>{
const {ids} =action.payload;
const {exchange_rate} = {...state.exchangeRates};
ids.forEach((id)=>{
if(typeof exchange_rate[id] !=='undefined'){
delete exchange_rate[id]
[t.EXCHANGE_RATES_BULK_DELETE]: (state, action) => {
const { ids } = action.payload;
ids.forEach((id) => {
if (typeof state.exchangeRates[id] !== 'undefined') {
delete state.exchangeRates[id];
}
});
state.exchangeRates =exchange_rate
}
},
[t.EXCHANGE_RATE_DELETE]: (state, action) => {
if (typeof state.exchangeRates[action.id] !== 'undefined') {
delete state.exchangeRates[action.id];
}
},
});

20
client/src/store/currencies/currencies.actions.js
View File

@@ -8,7 +8,17 @@ export const submitCurrencies = ({ form }) => {
};
export const deleteCurrency = ({ currency_code }) => {
return (dispatch) => ApiService.delete(`currencies/${currency_code}`);
return (dispatch) =>
new Promise((resolve, reject) => {
ApiService.delete(`currencies/${currency_code}`)
.then((response) => {
dispatch({ type: t.CURRENCY_CODE_DELETE, currency_code });
resolve(response);
})
.catch((error) => {
reject(error.response.data.errors || []);
});
});
};
export const editCurrency = ({ id, form }) => {
@@ -36,12 +46,20 @@ export const editCurrency = ({ id, form }) => {
export const fetchCurrencies = () => {
return (dispatch) =>
new Promise((resolve, reject) => {
dispatch({
type: t.CURRENCIES_TABLE_LOADING,
loading: true,
});
ApiService.get('currencies')
.then((response) => {
dispatch({
type: t.CURRENCIES_REGISTERED_SET,
currencies: response.data.currencies,
});
dispatch({
type: t.CURRENCIES_TABLE_LOADING,
loading: false,
});
resolve(response);
})
.catch((error) => {

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

@@ -17,4 +17,12 @@ export default createReducer(initialState, {
..._currencies,
};
},
[t.CURRENCIES_TABLE_LOADING]: (state, action) => {
state.loading = action.loading;
},
[t.CURRENCY_CODE_DELETE]: (state, action) => {
if (typeof state.data[action.currency_code] !== 'undefined') {
delete state.data[action.currency_code];
}
},
});

2
client/src/store/currencies/currencies.types.js
View File

@@ -1,4 +1,6 @@
export default {
CURRENCIES_REGISTERED_SET: 'CURRENCIES_REGISTERED_SET',
CLEAR_CURRENCY_FORM_ERRORS: 'CLEAR_CURRENCY_FORM_ERRORS',
CURRENCIES_TABLE_LOADING: 'CURRENCIES_TABLE_LOADING',
CURRENCY_CODE_DELETE: 'CURRENCY_CODE_DELETE',
};

24
client/src/store/itemCategories/itemsCategory.reducer.js
View File

@@ -10,18 +10,16 @@ export default createReducer(initialState, {
[t.ITEMS_CATEGORY_LIST_SET]: (state, action) => {
const _categories = {};
action.categories.forEach(category => {
action.categories.forEach((category) => {
_categories[category.id] = category;
});
state.categories = {
...state.categories,
..._categories
..._categories,
};
},
[t.ITEM_CATEGORIES_TABLE_SET]: (state, action) => {
},
[t.ITEM_CATEGORIES_TABLE_SET]: (state, action) => {},
[t.CATEGORY_DELETE]: (state, action) => {
const { id } = action.payload;
@@ -31,21 +29,19 @@ export default createReducer(initialState, {
}
},
[t.ITEM_CATEGORIES_TABLE_LOADING]: (state, action ) => {
[t.ITEM_CATEGORIES_TABLE_LOADING]: (state, action) => {
const { loading } = action.payload;
state.loading = !!loading;
},
[t.ITEM_CATEGORIES_BULK_DELETE]:(state,action)=>{
const {ids} =action.payload;
const {categories} = {...state.categories};
ids.forEach((id)=>{
[t.ITEM_CATEGORIES_BULK_DELETE]: (state, action) => {
const { ids } = action.payload;
if(typeof categories[id] !=='undefined'){
delete categories[id]
ids.forEach((id) => {
if (typeof state.categories[id] !== 'undefined') {
delete state.categories[id];
}
});
state.categories =categories
}
},
});
export const getCategoryId = (state, id) => {

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

@@ -12,7 +12,7 @@
&__inside-content {
.#{$ns}-tab-list {
border-bottom: 1px solid #E5E5E5;
border-bottom: 1px solid #e5e5e5;
padding-left: 15px;
padding-right: 15px;
align-items: baseline;
@@ -25,27 +25,40 @@
}
}
&__tabs-extra-actions{
&__tabs-extra-actions {
margin-left: auto;
}
&__topbar-actions{
&__topbar-actions {
margin-left: auto;
padding-right: 15px;
margin-right: 15px;
border-right: 1px solid #e5e5e5;
.bp3-button + .bp3-button{
.bp3-button + .bp3-button {
margin-left: 10px;
}
}
&-menu {
width: 374px;
width: 448px;
}
&-button {
margin-right: 10px;
}
&__loading-overlay{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(252, 253, 255, 0.5);
display: flex;
justify-content: center;
}
&__floating-footer {
position: fixed;
bottom: 0;
@@ -95,7 +108,7 @@
color: #333;
&:hover,
&.#{$ns}-active{
&.#{$ns}-active {
background-color: #ebf1f5;
color: #333;
}
@@ -106,30 +119,57 @@
// Preference
//---------------------------------
.preferences__inside-content--general {
&:not(.preferences--loading){
margin-bottom: 25px;
}
.bp3-form-group {
margin: 25px 20px 20px;
.bp3-label {
min-width: 140px;
}
.bp3-form-content {
width: 384px;
width: 55%;
.bp3-input-group .bp3-input {
position: relative;
// width:580px;
width: 120%;
}
}
}
.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;
}
}
.preferences-page__loading-overlay{
background: rgba(252, 253, 255, 0.9);
}
}
// Users/Roles List.
// ---------------------------------
.preferences__inside-content--users-roles{
.bigcapital-datatable{
.preferences__inside-content--users-roles {
.bigcapital-datatable {
.table .th,
.table .td{
.table .td {
padding: 0.8rem 0.5rem;
}
.td.status{
.td.status {
text-transform: uppercase;
}
}
}
}

3
client/src/utils.js
View File

@@ -53,7 +53,8 @@ export const momentFormatter = (format) => {
return {
formatDate: date => moment(date).format(format),
parseDate: str => moment(str, format).toDate(),
placeholder: `${format} (moment)`,
// placeholder: `${format} (moment)`,
placeholder: `${format}`,
};
}