mirror of
https://github.com/bigcapitalhq/bigcapital.git
synced 2026-02-15 12:20:31 +00:00
feat: dashboard style.
This commit is contained in:
Ahmed Bouhuolia
@@ -80,6 +80,7 @@ function AccountsViewsTabs({
|
||||
className='button--new-view'
|
||||
icon={<Icon icon='plus' />}
|
||||
onClick={handleClickNewView}
|
||||
minimal={true}
|
||||
/>
|
||||
</Tabs>
|
||||
</NavbarGroup>
|
||||
|
||||
@@ -5,11 +5,12 @@ import {
|
||||
} from '@blueprintjs/core';
|
||||
import {Select} from '@blueprintjs/select';
|
||||
|
||||
export default function AccountsMultiSelect({
|
||||
export default function AccountsSelectList({
|
||||
accounts,
|
||||
onAccountSelected,
|
||||
error,
|
||||
initialAccount,
|
||||
defautlSelectText = 'Select account'
|
||||
}) {
|
||||
const [selectedAccount, setSelectedAccount] = useState(
|
||||
initialAccount || null
|
||||
@@ -36,7 +37,7 @@ export default function AccountsMultiSelect({
|
||||
onItemSelect={onAccountSelect}>
|
||||
<Button
|
||||
rightIcon='caret-down'
|
||||
text={selectedAccount ? selectedAccount.name : 'Select account'}
|
||||
text={selectedAccount ? selectedAccount.name : defautlSelectText}
|
||||
/>
|
||||
</Select>
|
||||
);
|
||||
|
||||
@@ -37,7 +37,7 @@ function DashboardTopbar({
|
||||
<div class="dashboard__topbar">
|
||||
<div class="dashboard__topbar-left">
|
||||
<div class="dashboard__topbar-sidebar-toggle">
|
||||
<Button>
|
||||
<Button minimal={true}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" focusable="false">
|
||||
<title>Menu</title>
|
||||
<path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="5" stroke-width="2" d="M4 7h15M4 12h15M4 17h15"></path>
|
||||
|
||||
@@ -16,14 +16,7 @@ import Icon from 'components/Icon';
|
||||
|
||||
const IndeterminateCheckbox = React.forwardRef(
|
||||
({ indeterminate, ...rest }, ref) => {
|
||||
const defaultRef = React.useRef()
|
||||
const resolvedRef = ref || defaultRef
|
||||
|
||||
useEffect(() => {
|
||||
resolvedRef.current.indeterminate = indeterminate
|
||||
}, [resolvedRef, indeterminate])
|
||||
|
||||
return (<Checkbox ref={resolvedRef} {...rest} />);
|
||||
return (<Checkbox indeterminate={indeterminate} {...rest} />);
|
||||
}
|
||||
);
|
||||
|
||||
@@ -174,13 +167,14 @@ export default function DataTable({
|
||||
})}>
|
||||
<div {...column.getSortByToggleProps()}>
|
||||
{column.render('Header')}
|
||||
<span>
|
||||
{column.isSorted
|
||||
? column.isSortedDesc
|
||||
? (<Icon icon="sort-down" />)
|
||||
: (<Icon icon="sort-up" />)
|
||||
: ''}
|
||||
</span>
|
||||
|
||||
{column.isSorted && (
|
||||
<span className={classnames({
|
||||
'sort-icon--desc': column.isSortedDesc,
|
||||
'sort-icon--asc': !column.isSortedDesc,
|
||||
}, 'sort-icon')}>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{column.canResize && (
|
||||
|
||||
21
client/src/components/ErrorMessage.js
Normal file
21
client/src/components/ErrorMessage.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import {get} from 'lodash';
|
||||
|
||||
const hasErrorMessage = ({
|
||||
|
||||
}) => {
|
||||
|
||||
}
|
||||
|
||||
export default function ErrorMessage({
|
||||
touched,
|
||||
errors,
|
||||
name,
|
||||
children,
|
||||
}) {
|
||||
const error = get(errors, name);
|
||||
const touch = get(touched, name);
|
||||
|
||||
return (error && touch) ? error : null;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export default {
|
||||
"app_name": "Ratteb",
|
||||
"app_name": "BigCapital",
|
||||
"app_version": "0.0.1 (build 12344)",
|
||||
}
|
||||
@@ -17,10 +17,6 @@ export default [
|
||||
iconSize: 20,
|
||||
text: 'Items',
|
||||
children: [
|
||||
{
|
||||
text: 'Category List',
|
||||
href: '/dashboard/items/ItemCategoriesList'
|
||||
},
|
||||
{
|
||||
text: 'Items List',
|
||||
href: '/dashboard/items/list'
|
||||
@@ -28,7 +24,11 @@ export default [
|
||||
{
|
||||
text: 'New Item',
|
||||
href: '/dashboard/items/new'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Category List',
|
||||
href: '/dashboard/items/ItemCategoriesList'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,31 +1,13 @@
|
||||
import {connect} from 'react-redux';
|
||||
import {
|
||||
fetchAccountTypes,
|
||||
fetchAccountsList,
|
||||
submitAccount,
|
||||
fetchAccount,
|
||||
editAccount,
|
||||
} from 'store/accounts/accounts.actions';
|
||||
import {getDialogPayload} from 'store/dashboard/dashboard.reducer';
|
||||
import t from 'store/types';
|
||||
|
||||
export const mapStateToProps = (state, props) => {
|
||||
const dialogPayload = getDialogPayload(state, 'account-form');
|
||||
|
||||
return {
|
||||
accountsTypes: state.accounts.accountsTypes,
|
||||
accounts: state.accounts.accounts,
|
||||
name: 'account-form',
|
||||
payload: {action: 'new', id: null},
|
||||
editAccount: dialogPayload && dialogPayload.action === 'edit'
|
||||
? state.accounts.accountsById[dialogPayload.id] : {},
|
||||
payload: {action: 'new', id: null, ...dialogPayload},
|
||||
};
|
||||
};
|
||||
|
||||
export const mapDispatchToProps = (dispatch) => ({
|
||||
submitAccount: ({ form }) => dispatch(submitAccount({ form })),
|
||||
fetchAccounts: () => dispatch(fetchAccountsList()),
|
||||
fetchAccountTypes: () => dispatch(fetchAccountTypes()),
|
||||
fetchAccount: (id) => dispatch(fetchAccount({ id })),
|
||||
});
|
||||
export default connect(mapStateToProps, mapDispatchToProps);
|
||||
export default connect(mapStateToProps);
|
||||
@@ -6,6 +6,8 @@ import {
|
||||
deleteAccount,
|
||||
inactiveAccount,
|
||||
fetchAccountsTable,
|
||||
submitAccount,
|
||||
fetchAccount,
|
||||
} from 'store/accounts/accounts.actions';
|
||||
import {
|
||||
getAccountsItems,
|
||||
@@ -13,33 +15,40 @@ import {
|
||||
import {
|
||||
getResourceViews,
|
||||
} from 'store/customViews/customViews.selectors';
|
||||
import {
|
||||
getItemById
|
||||
} from 'store/selectors';
|
||||
|
||||
const mapStateToProps = (state, props) => ({
|
||||
views: getResourceViews(state, 'accounts'),
|
||||
accounts: getAccountsItems(state, state.accounts.currentViewId),
|
||||
accountsTypes: state.accounts.accountsTypes,
|
||||
|
||||
tableQuery: state.accounts.tableQuery,
|
||||
accountsLoading: state.accounts.loading,
|
||||
|
||||
getAccountById: (id) => getItemById(state.accounts.items, id),
|
||||
});
|
||||
|
||||
const mapActionsToProps = (dispatch) => ({
|
||||
fetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
|
||||
fetchAccountTypes: () => dispatch(fetchAccountTypes()),
|
||||
requestFetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
|
||||
requestFetchAccountTypes: () => dispatch(fetchAccountTypes()),
|
||||
requestSubmitAccount: ({ form }) => dispatch(submitAccount({ form })),
|
||||
requestDeleteAccount: (id) => dispatch(deleteAccount({ id })),
|
||||
requestInactiveAccount: (id) => dispatch(inactiveAccount({ id })),
|
||||
requestFetchAccount: (id) => dispatch(fetchAccount({ id })),
|
||||
requestFetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
|
||||
|
||||
changeCurrentView: (id) => dispatch({
|
||||
type: t.ACCOUNTS_SET_CURRENT_VIEW,
|
||||
currentViewId: parseInt(id, 10),
|
||||
}),
|
||||
|
||||
setAccountsTableQuery: (key, value) => dispatch({
|
||||
type: 'ACCOUNTS_TABLE_QUERY_SET', key, value,
|
||||
}),
|
||||
addAccountsTableQueries: (queries) => dispatch({
|
||||
type: 'ACCOUNTS_TABLE_QUERIES_ADD', queries,
|
||||
}),
|
||||
|
||||
fetchAccountsTable: (query = {}) => dispatch(fetchAccountsTable({ query: { ...query } })),
|
||||
|
||||
setSelectedRowsAccounts: (ids) => dispatch({
|
||||
type: t.ACCOUNTS_SELECTED_ROWS_SET, ids,
|
||||
}),
|
||||
|
||||
@@ -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),
|
||||
]);
|
||||
});
|
||||
|
||||
@@ -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]);
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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(),
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
@@ -8,4 +8,4 @@ export const getAccountsItems = (state, viewId) => {
|
||||
return typeof accountsView === 'object'
|
||||
? pickItemsFromIds(accountsItems, accountsView.ids) || []
|
||||
: [];
|
||||
};
|
||||
};
|
||||
@@ -1,5 +1,9 @@
|
||||
import {pick} from 'lodash';
|
||||
|
||||
export const getItemById = (items, id) => {
|
||||
return items[id] || null;
|
||||
};
|
||||
|
||||
export const pickItemsFromIds = (items, ids) => {
|
||||
return Object.values(pick(items, ids));
|
||||
}
|
||||
|
||||
@@ -17,6 +17,8 @@ $menu-item-color-active: $light-gray3;
|
||||
|
||||
$pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, Icons16, sans-serif;
|
||||
|
||||
@import "functions";
|
||||
|
||||
// Objects
|
||||
@import "objects/form";
|
||||
@import "objects/typography";
|
||||
@@ -36,6 +38,7 @@ $pt-font-family: Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
|
||||
@import "pages/preferences";
|
||||
@import "pages/view-form";
|
||||
@import "pages/manual-journals";
|
||||
@import "pages/item-category";
|
||||
|
||||
// Views
|
||||
@import "views/filter-dropdown";
|
||||
|
||||
@@ -19,10 +19,30 @@
|
||||
padding: 1rem 0.5rem;
|
||||
background: #F8FAFA;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
color: #555;
|
||||
font-weight: 500;
|
||||
border-bottom: 1px solid rgb(224, 224, 224);
|
||||
}
|
||||
|
||||
.sort-icon{
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
|
||||
&--desc{
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 6px solid #888;
|
||||
}
|
||||
&--asc{
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 6px solid #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tr {
|
||||
@@ -43,7 +63,6 @@
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
|
||||
margin: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
@@ -94,9 +113,14 @@
|
||||
.td.actions .#{$ns}-button{
|
||||
background: #E6EFFB;
|
||||
border: 0;
|
||||
box-shadow: 0 0 0;
|
||||
box-shadow: none;
|
||||
padding: 5px 15px;
|
||||
border-radius: 2px;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: #CFDCEE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
41
client/src/style/functions.scss
Normal file
41
client/src/style/functions.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
|
||||
// Characters which are escaped by the escape-svg function
|
||||
$escaped-characters: (
|
||||
("<","%3c"),
|
||||
(">","%3e"),
|
||||
("#","%23"),
|
||||
("(","%28"),
|
||||
(")","%29"),
|
||||
) !default;
|
||||
|
||||
// Replace `$search` with `$replace` in `$string`
|
||||
// Used on our SVG icon backgrounds for custom forms.
|
||||
//
|
||||
// @author Hugo Giraudel
|
||||
// @param {String} $string - Initial string
|
||||
// @param {String} $search - Substring to replace
|
||||
// @param {String} $replace ('') - New value
|
||||
// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
@function escape-svg($string) {
|
||||
@if str-index($string, "data:image/svg+xml") {
|
||||
@each $char, $encoded in $escaped-characters {
|
||||
|
||||
@if str-index($string, "url(") == 1 {
|
||||
$string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
|
||||
} @else {
|
||||
$string: str-replace($string, $char, $encoded);
|
||||
}
|
||||
}
|
||||
}
|
||||
@return $string;
|
||||
}
|
||||
@@ -6,7 +6,6 @@
|
||||
.bp3-popover-target{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bp3-button{
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
@@ -18,7 +17,6 @@
|
||||
.form-group--select-list{
|
||||
|
||||
.bp3-popover-open{
|
||||
|
||||
.bp3-button{
|
||||
border-color: #80bdff;
|
||||
}
|
||||
@@ -32,13 +30,18 @@
|
||||
color: #555555;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: #CFDCEE;
|
||||
}
|
||||
|
||||
&.bp3-small{
|
||||
font-size: 13px;
|
||||
min-height: 29px;
|
||||
}
|
||||
|
||||
.form-group--select-list &{
|
||||
border-radius: 0;
|
||||
border-radius: 2px;
|
||||
|
||||
&,
|
||||
&:hover{
|
||||
@@ -47,6 +50,12 @@
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
}
|
||||
.form-group--select-list.bp3-intent-danger &{
|
||||
|
||||
&{
|
||||
border-color: #db3737;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bp3-button{
|
||||
|
||||
@@ -1,3 +1,6 @@
|
||||
$form-check-input-checked-color: #fff;
|
||||
$form-check-input-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M12,5c-0.28,0-0.53,0.11-0.71,0.29L7,9.59L4.71,7.29C4.53,7.11,4.28,7,4,7C3.45,7,3,7.45,3,8c0,0.28,0.11,0.53,0.29,0.71l3,3C6.47,11.89,6.72,12,7,12s0.53-0.11,0.71-0.29l5-5C12.89,6.53,13,6.28,13,6C13,5.45,12.55,5,12,5z'/></g></g></svg>") !default;
|
||||
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' enable-background='new 0 0 16 16' xml:space='preserve'><g id='small_tick_1_'><g><path fill='#{$form-check-input-checked-color}' fill-rule='evenodd' clip-rule='evenodd' d='M11,7H5C4.45,7,4,7.45,4,8c0,0.55,0.45,1,1,1h6c0.55,0,1-0.45,1-1C12,7.45,11.55,7,11,7z'/></g></g></svg>") !default;
|
||||
|
||||
.form{
|
||||
&__floating-footer{
|
||||
@@ -12,14 +15,19 @@
|
||||
}
|
||||
|
||||
// Form
|
||||
label{
|
||||
.bp3-label{
|
||||
color: #353535;
|
||||
font-weight: 400;
|
||||
|
||||
.required{
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-input{
|
||||
box-shadow: 0 0 0 transparent;
|
||||
border: 1px solid #ced4da;
|
||||
border-radius: 0;
|
||||
border-radius: 2px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: #333;
|
||||
@@ -44,7 +52,12 @@ label{
|
||||
}
|
||||
|
||||
.bp3-input{
|
||||
border-color: #db3737;
|
||||
border-color: rgb(219, 55, 55);
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
|
||||
&:focus{
|
||||
box-shadow: 0 0 0 0.2rem rgba(219, 55, 55, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,12 +120,32 @@ label{
|
||||
}
|
||||
|
||||
|
||||
@mixin control-checked-colors($selector: ":checked") {
|
||||
input#{$selector} ~ .#{$ns}-control-indicator {
|
||||
box-shadow: none;
|
||||
background-color: $control-checked-background-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:hover input#{$selector} ~ .#{$ns}-control-indicator {
|
||||
box-shadow: none;
|
||||
background-color: $control-checked-background-color-hover;
|
||||
border-color: $control-checked-background-color-active;
|
||||
}
|
||||
|
||||
input:not(:disabled):active#{$selector} ~ .#{$ns}-control-indicator {
|
||||
box-shadow: none;
|
||||
background-color: $control-checked-background-color-active;
|
||||
border-color: $control-checked-background-color-active;
|
||||
}
|
||||
|
||||
input:disabled#{$selector} ~ .#{$ns}-control-indicator {
|
||||
box-shadow: none;
|
||||
background: rgba($control-checked-background-color, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
///@extend
|
||||
|
||||
|
||||
|
||||
.#{$ns}-control {
|
||||
|
||||
input:checked ~ .#{$ns}-control-indicator {
|
||||
@@ -157,6 +190,8 @@ label{
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:hover .#{$ns}-control-indicator {
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -165,7 +200,62 @@ label{
|
||||
box-shadow: 0 0 0 transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Checkbox
|
||||
|
||||
Markup:
|
||||
<label class="#{$ns}-control #{$ns}-checkbox {{.modifier}}">
|
||||
<input type="checkbox" {{:modifier}} />
|
||||
<span class="#{$ns}-control-indicator"></span>
|
||||
Checkbox
|
||||
</label>
|
||||
|
||||
:checked - Checked
|
||||
:disabled - Disabled. Also add <code>.#{$ns}-disabled</code> to <code>.#{$ns}-control</code> to change text color (not shown below).
|
||||
:indeterminate - Indeterminate. Note that this style can only be achieved via JavaScript
|
||||
<code>input.indeterminate = true</code>.
|
||||
.#{$ns}-align-right - Right-aligned indicator
|
||||
.#{$ns}-large - Large
|
||||
|
||||
Styleguide checkbox
|
||||
*/
|
||||
|
||||
&.#{$ns}-checkbox {
|
||||
&:hover input:indeterminate ~ .#{$ns}-control-indicator {
|
||||
// box-shadow: 0 0 0 transparent;
|
||||
}
|
||||
|
||||
@mixin indicator-inline-icon($icon) {
|
||||
&::before {
|
||||
// embed SVG icon image as backgroud-image above gradient.
|
||||
// the SVG image content is inlined into the CSS, so use this sparingly.
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include control-checked-colors(":checked");
|
||||
|
||||
// make :indeterminate look like :checked _for Checkbox only_
|
||||
@include control-checked-colors(":indeterminate");
|
||||
|
||||
.#{$ns}-control-indicator {
|
||||
border: 1px solid #c6c6c6;
|
||||
border-radius: $pt-border-radius;
|
||||
}
|
||||
input:checked ~ .#{$ns}-control-indicator {
|
||||
background-image: escape-svg($form-check-input-checked-bg-image);
|
||||
border-color: #137cbd;
|
||||
background-color: #137cbd;
|
||||
}
|
||||
input:indeterminate ~ .#{$ns}-control-indicator {
|
||||
background-image: escape-svg($form-check-input-indeterminate-bg-image);
|
||||
border-color: #137cbd;
|
||||
background-color: #137cbd;
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Radio
|
||||
|
||||
@@ -184,6 +274,7 @@ label{
|
||||
Styleguide radio
|
||||
*/
|
||||
&.#{$ns}-radio {
|
||||
|
||||
|
||||
.#{$ns}-control-indicator{
|
||||
border: 2px solid #cecece;
|
||||
|
||||
@@ -9,4 +9,58 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Account Form Dialog.
|
||||
// ----------------------------
|
||||
.dialog--account-form{
|
||||
|
||||
&:not(.dialog--loading) .bp3-dialog-body{
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.bp3-dialog-body{
|
||||
|
||||
.bp3-form-group.bp3-inline{
|
||||
|
||||
.bp3-label{
|
||||
min-width: 140px;
|
||||
}
|
||||
.bp3-form-content{
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
&.form-group--description{
|
||||
|
||||
.bp3-form-content{
|
||||
width: 280px;
|
||||
|
||||
textarea{
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group--parent-account{
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
.form-group--account-code{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.form-group--subaccount{
|
||||
margin-bottom: 16px;
|
||||
|
||||
.bp3-icon-info-circle{
|
||||
color: #A1B2C5;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
client/src/style/pages/item-category.scss
Normal file
30
client/src/style/pages/item-category.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
|
||||
|
||||
.dialog--category-form{
|
||||
|
||||
.bp3-dialog-body{
|
||||
.bp3-form-group.bp3-inline{
|
||||
|
||||
.bp3-label{
|
||||
min-width: 140px;
|
||||
}
|
||||
.bp3-form-content{
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
&.form-group--description{
|
||||
|
||||
.bp3-form-content{
|
||||
width: 280px;
|
||||
|
||||
textarea{
|
||||
min-width: 100%;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
$sidebar-background: #01194E;
|
||||
$sidebar-text-color: #fff;
|
||||
$sidebar-width: 220px;
|
||||
$sidebar-menu-item-color: #E9EBF7;
|
||||
$sidebar-menu-item-color: #a8b1c7;
|
||||
|
||||
$sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
|
||||
@@ -29,9 +29,10 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
margin-bottom: 5px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
.company-meta{
|
||||
color: #A7AFC2;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
@@ -49,10 +50,11 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
border-radius: 0;
|
||||
padding: 10px 16px;
|
||||
font-size: 15px;
|
||||
font-weight: 200;
|
||||
font-weight: 400;
|
||||
|
||||
&:hover{
|
||||
background: #012470;
|
||||
color: #b2bbd0;
|
||||
}
|
||||
&:focus,
|
||||
&:active{
|
||||
@@ -60,21 +62,21 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
}
|
||||
|
||||
> .#{$ns}-icon{
|
||||
color: #767B9B;
|
||||
margin-right: 12px;
|
||||
color: #767b9b;
|
||||
margin-right: 14px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
> .#{$ns}-icon-caret-right{
|
||||
margin-right: -4px;
|
||||
margin-top: 3px;
|
||||
color: #5B5F7B;
|
||||
color: #42547b;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$ns}-submenu{
|
||||
|
||||
.#{$ns}-collapse{
|
||||
border-left: 2px solid rgba(255, 255, 255, 0.15);
|
||||
|
||||
&-body{
|
||||
background-color: rgb(11, 34, 85);
|
||||
@@ -85,11 +87,11 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
.#{$ns}-menu-item{
|
||||
padding: 7px 16px 7px 18px;
|
||||
font-size: 15px;
|
||||
color: #C5CBE3;
|
||||
color: #8a95b6;
|
||||
|
||||
&:hover{
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
color: #C5CBE3;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -105,7 +107,7 @@ $sidebar-popover-submenu-bg: rgb(1, 20, 62);
|
||||
color: $sidebar-menu-item-color;
|
||||
}
|
||||
.#{$ns}-menu-divider{
|
||||
border-top-color: #183C86;
|
||||
border-top-color: #1D366A;
|
||||
color: #6B708C;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user