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

feat: dashboard style.

Browse Source
This commit is contained in:
Ahmed Bouhuolia
2020-04-12 12:03:45 +02:00
parent 6dcff7e4c2
commit 37fb5a6f11
24 changed files with 517 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/containers/Dashboard/Accounting/MakeJournalEntriesPage.js
View File

@@ -11,14 +11,14 @@ import AccountsConnect from 'connectors/Accounts.connector';
function MakeJournalEntriesPage({
fetchManualJournal,
getManualJournal,
fetchAccounts,
requestFetchAccounts,
}) {
const history = useHistory();
const { id } = useParams();
const fetchJournal = useAsync(() => {
return Promise.all([
fetchAccounts(),
requestFetchAccounts(),
(id) && fetchManualJournal(id),
]);
});

8
client/src/containers/Dashboard/Accounts/AccountsChart.js
View File

@@ -21,13 +21,13 @@ import { compose } from 'utils';
function AccountsChart({
changePageTitle,
fetchAccounts,
requestFetchAccounts,
requestDeleteAccount,
requestInactiveAccount,
fetchResourceViews,
fetchResourceFields,
getResourceFields,
fetchAccountsTable,
requestFetchAccountsTable,
}) {
const [state, setState] = useState({
deleteAlertActive: false,
@@ -48,7 +48,7 @@ function AccountsChart({
// Fetch accounts list according to the given custom view id.
const fetchAccountsHook = useAsync(async () => {
await Promise.all([
fetchAccountsTable(),
requestFetchAccountsTable(),
]);
}, false);
@@ -85,7 +85,7 @@ function AccountsChart({
const handleConfirmAccountActive = useCallback(() => {
requestInactiveAccount(inactiveAccount.id).then(() => {
setInactiveAccount(false);
fetchAccountsTable();
requestFetchAccountsTable();
AppToaster.show({ message: 'the_account_has_been_inactivated' });
});
}, [inactiveAccount]);

186
client/src/containers/Dashboard/Dialogs/AccountFormDialog.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import {
Button,
Classes,
@@ -22,6 +22,9 @@ import DialogConnect from 'connectors/Dialog.connector';
import DialogReduxConnect from 'components/DialogReduxConnect';
import AccountFormDialogConnect from 'connectors/AccountFormDialog.connector';
import AccountsConnect from 'connectors/Accounts.connector';
import classNames from 'classnames';
import Icon from 'components/Icon';
import ErrorMessage from 'components/ErrorMessage';
function AccountFormDialog({
name,
@@ -29,36 +32,50 @@ function AccountFormDialog({
isOpen,
accountsTypes,
accounts,
fetchAccounts,
fetchAccountTypes,
requestFetchAccounts,
requestFetchAccountTypes,
requestFetchAccount,
closeDialog,
submitAccount,
fetchAccount,
editAccount,
fetchAccountsTable,
requestSubmitAccount,
requestEditAccount,
getAccountById
}) {
const intl = useIntl();
const accountFormValidationSchema = Yup.object().shape({
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
code: Yup.number(intl.formatMessage({ id: 'field_name_must_be_number' })),
code: Yup.number(),
account_type_id: Yup.string()
.nullable()
.required(intl.formatMessage({ id: 'required' })),
description: Yup.string().trim()
});
const initialValues = useMemo(() => ({
account_type_id: null,
name: '',
description: '',
}), []);
const [selectedAccountType, setSelectedAccountType] = useState(null);
const [selectedSubaccount, setSelectedSubaccount] = useState(null);
const editAccount = useMemo(() =>
payload.action === 'edit' ? getAccountById(payload.id) : null,
[payload, getAccountById]);
// Formik
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...(payload.action === 'edit' && editAccount)
? editAccount : initialValues,
},
validationSchema: accountFormValidationSchema,
onSubmit: values => {
onSubmit: (values, { setSubmitting }) => {
const exclude = ['subaccount'];
if (payload.action === 'edit') {
editAccount({
requestEditAccount({
payload: payload.id,
form: { ...omit(values, exclude) }
}).then(response => {
@@ -66,25 +83,34 @@ function AccountFormDialog({
AppToaster.show({
message: 'the_account_has_been_edited'
});
refetchAccounts.execute();
setSubmitting(false);
}).catch(() => {
setSubmitting(false);
});
} else {
submitAccount({ form: { ...omit(values, exclude) } }).then(response => {
requestSubmitAccount({ form: { ...omit(values, exclude) } }).then(response => {
closeDialog(name);
AppToaster.show({
message: 'the_account_has_been_submit'
});
refetchAccounts.execute();
setSubmitting(false);
}).catch(() => {
setSubmitting(false);
});
}
}
});
const [state, setState] = useState({
loading: true,
dialogActive: true,
selectedAccountType: null,
selectedSubaccount: null
});
const { errors, values, touched } = useMemo(() => (formik), [formik]);
// Set default account type.
useEffect(() => {
if (editAccount && editAccount.account_type_id) {
const defaultType = accountsTypes.find((t) =>
t.id === editAccount.account_type_id);
defaultType && setSelectedAccountType(defaultType);
}
}, [editAccount, accountsTypes]);
// Filters accounts types items.
const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
@@ -106,17 +132,12 @@ function AccountFormDialog({
// Account item of select accounts field.
const accountItem = (item, { handleClick, modifiers, query }) => {
return (
<MenuItem
text={item.name}
label={item.code}
key={item.id}
onClick={handleClick}
/>
<MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />
);
};
// Filters accounts items.
const filterAccountsPredicater = (query, account, _index, exactMatch) => {
const filterAccountsPredicater = useCallback((query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
@@ -125,70 +146,79 @@ function AccountFormDialog({
} else {
return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
}
};
}, []);
const handleClose = () => {
closeDialog(name);
};
// Handles dialog close.
const handleClose = useCallback(() => { closeDialog(name); }, [closeDialog, name]);
const fetchHook = useAsync(async () => {
await Promise.all([
fetchAccounts(),
fetchAccountTypes(),
requestFetchAccounts(),
requestFetchAccountTypes(),
// Fetch the target in case edit mode.
...(payload.action === 'edit' ? [fetchAccount(payload.id)] : [])
]);
}, false);
const refetchAccounts = useAsync(async () => {
await Promise.all([
fetchAccountsTable(),
...(payload.action === 'edit' ?
[requestFetchAccount(payload.id)] : [])
]);
}, false);
// Fetch requests on dialog opening.
const onDialogOpening = async () => { fetchHook.execute(); };
const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
const onChangeAccountType = accountType => {
setState({ ...state, selectedAccountType: accountType.name });
const onChangeAccountType = useCallback((accountType) => {
setSelectedAccountType(accountType);
formik.setFieldValue('account_type_id', accountType.id);
};
const onChangeSubaccount = account => {
setState({ ...state, selectedSubaccount: account });
formik.setFieldValue('parent_account_id', account.id);
};
}, [setSelectedAccountType, formik]);
const onDialogClosed = () => {
// Handles change sub-account.
const onChangeSubaccount = useCallback((account) => {
setSelectedSubaccount(account);
formik.setFieldValue('parent_account_id', account.id);
}, [setSelectedSubaccount, formik]);
const onDialogClosed = useCallback(() => {
formik.resetForm();
setState({
...state,
selectedSubaccount: null,
selectedAccountType: null
});
};
setSelectedSubaccount(null);
setSelectedAccountType(null);
}, [formik]);
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
const subAccountLabel = useMemo(() => {
return (<span>{'Sub account?'} <Icon icon="info-circle" iconSize={12} /></span>);
}, []);
const requiredSpan = useMemo(() => (
<span class="required">*</span>
), []);
return (
<Dialog
name={name}
title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
className={{
'dialog--loading': state.isLoading,
'dialog--loading': fetchHook.pending,
'dialog--account-form': true
}}
autoFocus={true}
canEscapeKeyClose={true}
onClosed={onDialogClosed}
onOpening={onDialogOpening}
isOpen={isOpen}
isLoading={fetchHook.pending}
onClose={handleClose}
>
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'Account Type'}
className="{'form-group--account-type'}"
labelInfo={requiredSpan}
className={classNames(
'form-group--account-type',
'form-group--select-list',
Classes.FILL)}
inline={true}
helperText={
formik.errors.account_type_id && formik.errors.account_type_id
}
intent={formik.errors.account_type_id && Intent.DANGER}
helperText={<ErrorMessage name="account_type_id" {...formik} />}
intent={(errors.account_type_id && touched.account_type_id) && Intent.DANGER}
>
<Select
items={accountsTypes}
@@ -200,21 +230,23 @@ function AccountFormDialog({
>
<Button
rightIcon='caret-down'
text={state.selectedAccountType || 'Select account type'}
text={selectedAccountType ?
selectedAccountType.name : 'Select account type'}
/>
</Select>
</FormGroup>
<FormGroup
label={'Account Name'}
labelInfo={requiredSpan}
className={'form-group--account-name'}
intent={formik.errors.name && Intent.DANGER}
helperText={formik.errors.name && formik.errors.name}
intent={(errors.name && touched.name) && Intent.DANGER}
helperText={<ErrorMessage name="name" {...formik} />}
inline={true}
>
<InputGroup
medium={true}
intent={formik.errors.name && Intent.DANGER}
intent={(errors.name && touched.name) && Intent.DANGER}
{...formik.getFieldProps('name')}
/>
</FormGroup>
@@ -222,33 +254,37 @@ function AccountFormDialog({
<FormGroup
label={'Account Code'}
className={'form-group--account-code'}
intent={formik.errors.code && Intent.DANGER}
helperText={formik.errors.code && formik.errors.code}
intent={(errors.code && touched.code) && Intent.DANGER}
helperText={<ErrorMessage name="code" {...formik} />}
inline={true}
labelInfo={infoIcon}
>
<InputGroup
medium={true}
intent={formik.errors.code && Intent.DANGER}
intent={(errors.code && touched.code) && Intent.DANGER}
{...formik.getFieldProps('code')}
/>
</FormGroup>
<FormGroup
label={' '}
className={'form-group--subaccount'}
className={classNames('form-group--subaccount')}
inline={true}
>
<Checkbox
inline={true}
label={'Sub account?'}
label={subAccountLabel}
{...formik.getFieldProps('subaccount')}
/>
</FormGroup>
{formik.values.subaccount && (
{values.subaccount && (
<FormGroup
label={'Sub Account'}
className="{'form-group--sub-account'}"
label={'Parent Account'}
className={classNames(
'form-group--parent-account',
'form-group--select-list',
Classes.FILL)}
inline={true}
>
<Select
@@ -263,9 +299,7 @@ function AccountFormDialog({
<Button
rightIcon='caret-down'
text={
state.selectedSubaccount
? state.selectedSubaccount.name
: 'Select Parent Account'
selectedSubaccount ? selectedSubaccount.name : 'Select Parent Account'
}
/>
</Select>
@@ -290,7 +324,7 @@ function AccountFormDialog({
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button intent={Intent.PRIMARY} type='submit'>
<Button intent={Intent.PRIMARY} disabled={formik.isSubmitting} type='submit'>
{payload.action === 'edit' ? 'Edit' : 'Submit'}
</Button>
</div>

102
client/src/containers/Dashboard/Dialogs/ItemCategoryDialog.js
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useMemo, useCallback } from 'react';
import {
Button,
Classes,
@@ -9,7 +9,7 @@ import {
MenuItem
} from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import { omit, pick } from 'lodash';
import { pick } from 'lodash';
import * as Yup from 'yup';
import { useIntl } from 'react-intl';
import { useFormik } from 'formik';
@@ -20,6 +20,9 @@ import AppToaster from 'components/AppToaster';
import DialogConnect from 'connectors/Dialog.connector';
import DialogReduxConnect from 'components/DialogReduxConnect';
import ItemsCategoryConnect from 'connectors/ItemsCategory.connect';
import ErrorMessage from 'components/ErrorMessage';
import classNames from 'classnames';
import Icon from 'components/Icon';
function ItemCategoryDialog({
name,
@@ -33,9 +36,8 @@ function ItemCategoryDialog({
requestEditItemCategory,
editItemCategory
}) {
const [state, setState] = useState({
selectedParentCategory: null
});
const [selectedParentCategory, setParentCategory] = useState(null);
const intl = useIntl();
const ValidationSchema = Yup.object().shape({
name: Yup.string().required(intl.formatMessage({ id: 'required' })),
@@ -43,11 +45,12 @@ function ItemCategoryDialog({
description: Yup.string().trim()
});
const initialValues = {
const initialValues = useMemo(() => ({
name: '',
description: '',
parent_category_id: null
};
}), []);
//Formik
const formik = useFormik({
enableReinitialize: true,
@@ -56,30 +59,35 @@ function ItemCategoryDialog({
pick(editItemCategory, Object.keys(initialValues)))
},
validationSchema: ValidationSchema,
onSubmit: values => {
onSubmit: (values, { setSubmitting }) => {
if (payload.action === 'edit') {
requestEditItemCategory(payload.id, values).then(response => {
closeDialog(name);
AppToaster.show({
message: 'the_category_has_been_edited'
});
setSubmitting(false);
}).catch((error) => {
setSubmitting(false);
});
} else {
requestSubmitItemCategory(values)
.then(response => {
.then((response) => {
closeDialog(name);
AppToaster.show({
message: 'the_category_has_been_submit'
});
setSubmitting(false);
})
.catch(error => {
alert(error.message);
.catch((error) => {
setSubmitting(false);
});
}
}
});
const { values, errors, touched } = useMemo(() => formik, [formik]);
const filterItemCategory = (query, category, _index, exactMatch) => {
const filterItemCategory = useCallback((query, category, _index, exactMatch) => {
const normalizedTitle = category.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
@@ -88,73 +96,80 @@ function ItemCategoryDialog({
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
};
}, []);
const parentCategoryItem = (category, { handleClick, modifiers, query }) => {
const parentCategoryItem = useCallback((category, { handleClick, modifiers, query }) => {
return (
<MenuItem text={category.name} key={category.id} onClick={handleClick} />
);
};
const handleClose = () => {
closeDialog(name);
};
}, []);
const handleClose = useCallback(() => { closeDialog(name); }, [name, closeDialog]);
const fetchHook = useAsync(async () => {
await Promise.all([requestFetchItemCategories()]);
await Promise.all([
requestFetchItemCategories(),
]);
}, false);
const onDialogOpening = () => {
fetchHook.execute();
};
const onDialogOpening = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
const onChangeParentCategory = parentCategory => {
setState({ ...state, selectedParentCategory: parentCategory.name });
const onChangeParentCategory = useCallback((parentCategory) => {
setParentCategory(parentCategory);
formik.setFieldValue('parent_category_id', parentCategory.id);
};
}, [formik]);
const onDialogClosed = () => {
const onDialogClosed = useCallback(() => {
formik.resetForm();
closeDialog(name);
};
}, [formik, closeDialog, name]);
const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
return (
<Dialog
name={name}
title={payload.action === 'edit' ? 'Edit Category' : ' New Category'}
className={{
'dialog--loading': state.isLoading,
'dialog--item-form': true
}}
className={classNames({
'dialog--loading': fetchHook.pending,
},
'dialog--category-form',
)}
isOpen={isOpen}
onClosed={onDialogClosed}
onOpening={onDialogOpening}
isLoading={fetchHook.pending}
onClose={handleClose}
>
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'Category Name'}
labelInfo={requiredSpan}
className={'form-group--category-name'}
intent={formik.errors.name && Intent.DANGER}
helperText={formik.errors.name && formik.errors.name}
intent={(errors.name && touched.name) && Intent.DANGER}
helperText={(<ErrorMessage name="name" {...formik} />)}
inline={true}
>
<InputGroup
medium={true}
intent={formik.errors.name && Intent.DANGER}
intent={(errors.name && touched.name) && Intent.DANGER}
{...formik.getFieldProps('name')}
/>
</FormGroup>
<FormGroup
label={'Parent Category'}
className="{'form-group--parent-category'}"
labelInfo={infoIcon}
className={classNames(
'form-group--select-list',
'form-group--parent-category',
Classes.FILL,
)}
inline={true}
helperText={
formik.errors.parent_category_id &&
formik.errors.parent_category_id
}
intent={formik.errors.parent_category_id && Intent.DANGER}
helperText={(<ErrorMessage name="parent_category_id" {...formik} />)}
intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
>
<Select
items={Object.values(categories)}
@@ -166,7 +181,8 @@ function ItemCategoryDialog({
>
<Button
rightIcon='caret-down'
text={state.selectedParentCategory || 'Select Parent Category'}
text={selectedParentCategory
? selectedParentCategory.name : 'Select Parent Category'}
/>
</Select>
</FormGroup>
@@ -174,8 +190,8 @@ function ItemCategoryDialog({
<FormGroup
label={'Description'}
className={'form-group--description'}
intent={formik.errors.description && Intent.DANGER}
helperText={formik.errors.description && formik.errors.credential}
intent={(errors.description && touched.description) && Intent.DANGER}
helperText={(<ErrorMessage name="description" {...formik} />)}
inline={true}
>
<TextArea

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

@@ -18,7 +18,7 @@ function GeneralLedger({
getGeneralLedgerSheet,
fetchGeneralLedger,
generalLedgerSheetLoading,
fetchAccounts,
requestFetchAccounts,
organizationSettings,
}) {
const [filter, setFilter] = useState({
@@ -35,7 +35,7 @@ function GeneralLedger({
const fetchHook = useAsync(() => {
return Promise.all([
fetchAccounts(),
requestFetchAccounts(),
]);
});