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

WIP: customer form styling.

Browse Source 
fix: journal increment number settings.
This commit is contained in:
Ahmed Bouhuolia
2020-11-07 22:01:10 +02:00
parent 9b6b2e67db
commit 1ff2d924d0
25 changed files with 1037 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,14 +21,13 @@ import withManualJournalDetail from 'containers/Accounting/withManualJournalDeta
import withAccountsActions from 'containers/Accounts/withAccountsActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withSettings from 'containers/Settings/withSettings';
import withManualJournals from './withManualJournals';
import AppToaster from 'components/AppToaster';
import Dragzone from 'components/Dragzone';
import withMediaActions from 'containers/Media/withMediaActions';
import useMedia from 'hooks/useMedia';
import { compose, repeatValue } from 'utils';
import { compose, repeatValue, orderingLinesIndexes } from 'utils';
import withManualJournalsActions from './withManualJournalsActions';
const ERROR = {
@@ -52,7 +51,6 @@ function MakeJournalEntriesForm({
// #withJournalsActions
requestMakeJournalEntries,
requestEditManualJournal,
setJournalNumberChanged,
// #withDashboard
changePageTitle,
@@ -62,9 +60,6 @@ function MakeJournalEntriesForm({
journalNextNumber,
journalNumberPrefix,
// #withManualJournals
journalNumberChanged,
// #ownProps
manualJournalId,
manualJournal,
@@ -143,12 +138,6 @@ function MakeJournalEntriesForm({
const [payload, setPayload] = useState({});
const reorderingEntriesIndex = (entries) =>
entries.map((entry, index) => ({
...entry,
index: index + 1,
}));
const defaultEntry = useMemo(
() => ({
index: 0,
@@ -188,7 +177,7 @@ function MakeJournalEntriesForm({
}
: {
...defaultInitialValues,
entries: reorderingEntriesIndex(defaultInitialValues.entries),
entries: orderingLinesIndexes(defaultInitialValues.entries),
}),
}),
[manualJournal, defaultInitialValues, defaultEntry],
@@ -377,12 +366,9 @@ function MakeJournalEntriesForm({
},
});
useEffect(() => {
if (journalNumberChanged) {
setFieldValue('journal_number', journalNumber);
setJournalNumberChanged(false);
}
}, [journalNumberChanged, setJournalNumberChanged, journalNumber, setFieldValue]);
useEffect(() => {
setFieldValue('journal_number', journalNumber);
}, [journalNumber, setFieldValue]);
// Change page subtitle.
useEffect(() => {
@@ -420,7 +406,7 @@ function MakeJournalEntriesForm({
const handleClickAddNewRow = useCallback(() => {
setFieldValue(
'entries',
reorderingEntriesIndex([...values.entries, defaultEntry]),
orderingLinesIndexes([...values.entries, defaultEntry]),
);
}, [values.entries, defaultEntry, setFieldValue]);
@@ -428,7 +414,7 @@ function MakeJournalEntriesForm({
const handleClickClearLines = useCallback(() => {
setFieldValue(
'entries',
reorderingEntriesIndex([...repeatValue(defaultEntry, 4)]),
orderingLinesIndexes([...repeatValue(defaultEntry, 4)]),
);
}, [defaultEntry, setFieldValue]);
@@ -480,9 +466,6 @@ function MakeJournalEntriesForm({
export default compose(
withJournalsActions,
withManualJournalDetail,
withManualJournals(({ journalNumberChanged }) => ({
journalNumberChanged,
})),
withAccountsActions,
withDashboardActions,
withMediaActions,

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

@@ -4,13 +4,14 @@ import {
FormGroup,
Intent,
Position,
Classes,
} from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import { FormattedMessage as T } from 'react-intl';
import { Row, Col } from 'react-grid-system';
import moment from 'moment';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { momentFormatter, tansformDateValue, saveInvoke } from 'utils';
import {
CurrenciesSelectList,
@@ -19,7 +20,7 @@ import {
FieldHint,
FieldRequiredHint,
Icon,
InputPrependButton
InputPrependButton,
} from 'components';
import withDialogActions from 'containers/Dialog/withDialogActions';
@@ -75,24 +76,25 @@ function MakeJournalEntriesHeader({
<ErrorMessage name="journal_number" {...{ errors, touched }} />
}
fill={true}
>
<InputGroup
intent={
errors.journal_number && touched.journal_number && Intent.DANGER
}
fill={true}
rightElement={<InputPrependButton
buttonProps={{
onClick: handleJournalNumberChange,
icon: (<Icon icon={'settings-18'} />)
}}
tooltip={true}
tooltipProps={{
content: 'Setting your auto-generated journal number',
position: Position.BOTTOM_LEFT,
}}
/>}
rightElement={
<InputPrependButton
buttonProps={{
onClick: handleJournalNumberChange,
icon: <Icon icon={'settings-18'} />,
}}
tooltip={true}
tooltipProps={{
content: 'Setting your auto-generated journal number',
position: Position.BOTTOM_LEFT,
}}
/>
}
{...getFieldProps('journal_number')}
onBlur={handleJournalNumberChanged}
/>
@@ -106,6 +108,7 @@ function MakeJournalEntriesHeader({
intent={errors.date && touched.date && Intent.DANGER}
helperText={<ErrorMessage name="date" {...{ errors, touched }} />}
minimal={true}
className={classNames(CLASSES.FILL)}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
@@ -169,7 +172,7 @@ function MakeJournalEntriesHeader({
className={classNames(
'form-group--account-type',
'form-group--select-list',
Classes.FILL,
CLASSES.FILL,
)}
>
<InputGroup
@@ -183,13 +186,20 @@ function MakeJournalEntriesHeader({
</Col>
<Col width={230}>
<CurrenciesSelectList className={Classes.FILL} />
<FormGroup
label={<T id={'currency'} />}
className={classNames(
'form-group--select-list',
'form-group--currency',
CLASSES.FILL
)}
>
<CurrenciesSelectList />
</FormGroup>
</Col>
</Row>
</div>
);
}
export default compose(
withDialogActions,
)(MakeJournalEntriesHeader);
export default compose(withDialogActions)(MakeJournalEntriesHeader);

4
client/src/containers/Accounting/withManualJournalsActions.js
View File

@@ -24,10 +24,6 @@ const mapActionsToProps = (dispatch) => ({
type: t.MANUAL_JOURNALS_TABLE_QUERIES_ADD,
queries,
}),
setJournalNumberChanged: (isChanged) => dispatch({
type: t.MANUAL_JOURNAL_NUMBER_CHANGED,
payload: { isChanged },
}),
});
export default connect(null, mapActionsToProps);

493
client/src/containers/Customers/CustomerAddressTabs.js
View File

@@ -1,245 +1,364 @@
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import {
FormGroup,
MenuItem,
Intent,
InputGroup,
HTMLSelect,
Button,
Classes,
} from '@blueprintjs/core';
import { Row, Col } from 'react-grid-system';
import { FormattedMessage as T, useIntl } from 'react-intl';
import React from 'react';
import { FormGroup, Intent, InputGroup } from '@blueprintjs/core';
import { Row, Col } from 'components';
import { FormattedMessage as T } from 'react-intl';
import ErrorMessage from 'components/ErrorMessage';
const CustomerBillingAddress = ({
formik: { errors, touched, setFieldValue, getFieldProps },
errors,
touched,
setFieldValue,
getFieldProps,
}) => {
return (
<div className={'customer-form'}>
<Row gutterWidth={16} className={'customer-form__tabs-section'}>
<Col width={404}>
<h4>
<T id={'billing_address'} />
</h4>
<Row className={'customer-form__tabs-section'}>
<Col xs={6}>
<h4>
<T id={'billing_address'} />
</h4>
<FormGroup
label={<T id={'country'} />}
className={'form-group--journal-number'}
<FormGroup
className={'form-group--journal-number'}
intent={
errors.billing_address_country &&
touched.billing_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_country"
{...{ errors, touched }}
/>
}
label={<T id={'country'} />}
>
<InputGroup
intent={
errors.billing_address_country &&
touched.billing_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_country"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_country &&
touched.billing_address_country &&
Intent.DANGER
}
{...getFieldProps('billing_address_country')}
/>
</FormGroup>
{...getFieldProps('billing_address_country')}
/>
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'address'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_1" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
{...getFieldProps('billing_address_1')}
/>
</FormGroup>
<FormGroup
label={<T id={'address'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_2" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
{...getFieldProps('billing_address_2')}
/>
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_city &&
touched.billing_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_city &&
touched.billing_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_city &&
touched.billing_address_city &&
Intent.DANGER
}
{...getFieldProps('billing_address_city')}
/>
</FormGroup>
{...getFieldProps('billing_address_city')}
/>
</FormGroup>
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_state &&
touched.billing_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_state &&
touched.billing_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_state &&
touched.billing_address_state &&
Intent.DANGER
}
{...getFieldProps('billing_address_state')}
/>
</FormGroup>
{...getFieldProps('billing_address_state')}
/>
</FormGroup>
<FormGroup
label={<T id={'zip_code'} />}
<FormGroup
label={<T id={'zip_code'} />}
intent={
errors.billing_address_zipcode &&
touched.billing_address_zipcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_zipcode"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_zipcode &&
touched.billing_address_zipcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="billing_address_zipcode"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.billing_address_zipcode &&
touched.billing_address_zipcode &&
Intent.DANGER
}
{...getFieldProps('billing_address_zipcode')}
/>
</FormGroup>
</Col>
<Col width={404}>
<h4>
<T id={'shipping_address'} />
</h4>
{...getFieldProps('billing_address_zipcode')}
/>
</FormGroup>
<FormGroup
label={<T id={'country'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'phone'} />}
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="shipping_phone" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
{...getFieldProps('shipping_phone')}
/>
</FormGroup>
</Col>
<Col xs={6}>
<h4>
<T id={'shipping_address'} />
</h4>
<FormGroup
label={<T id={'country'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_country &&
touched.shipping_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_country"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_country &&
touched.shipping_address_country &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_country"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_country &&
touched.shipping_address_country &&
Intent.DANGER
}
{...getFieldProps('shipping_address_country')}
/>
</FormGroup>
{...getFieldProps('shipping_address_country')}
/>
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'address'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_1" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
{...getFieldProps('billing_address_1')}
/>
</FormGroup>
<FormGroup
label={<T id={'address'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="billing_address_2" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
{...getFieldProps('billing_address_2')}
/>
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_city &&
touched.shipping_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_city &&
touched.shipping_address_city &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_city"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_city &&
touched.shipping_address_city &&
Intent.DANGER
}
{...getFieldProps('shipping_address_city')}
/>
</FormGroup>
{...getFieldProps('shipping_address_city')}
/>
</FormGroup>
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_state &&
touched.shipping_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_state &&
touched.shipping_address_state &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_state"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_state &&
touched.shipping_address_state &&
Intent.DANGER
}
{...getFieldProps('shipping_address_state')}
/>
</FormGroup>
{...getFieldProps('shipping_address_state')}
/>
</FormGroup>
<FormGroup
label={<T id={'zip_code'} />}
<FormGroup
label={<T id={'zip_code'} />}
intent={
errors.shipping_address_zipcode &&
touched.shipping_address_zipcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_zipcode"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_zipcode &&
touched.shipping_address_zipcode &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage
name="shipping_address_zipcode"
{...{ errors, touched }}
/>
{...getFieldProps('shipping_address_zipcode')}
/>
</FormGroup>
<FormGroup
label={<T id={'phone'} />}
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="shipping_phone" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
>
<InputGroup
intent={
errors.shipping_address_zipcode &&
touched.shipping_address_zipcode &&
Intent.DANGER
}
{...getFieldProps('shipping_address_zipcode')}
/>
</FormGroup>
</Col>
</Row>
</div>
{...getFieldProps('shipping_phone')}
/>
</FormGroup>
</Col>
</Row>
);
};

87
client/src/containers/Customers/CustomerFinancialPanel.js Normal file
View File

@@ -0,0 +1,87 @@
import React, { useCallback } from 'react';
import moment from 'moment';
import classNames from 'classnames';
import { FormGroup, Intent, Position, Classes } from '@blueprintjs/core';
import { DateInput } from '@blueprintjs/datetime';
import {
ErrorMessage,
MoneyInputGroup,
CurrenciesSelectList,
Row,
Col,
} from 'components';
import { FormattedMessage as T } from 'react-intl';
import { momentFormatter, tansformDateValue } from 'utils';
export default function CustomerFinancialPanel({
setFieldValue,
errors,
touched,
values,
}) {
const handleDateChange = useCallback(
(date) => {
const formatted = moment(date).format('YYYY-MM-DD');
setFieldValue('payment_date', formatted);
},
[setFieldValue],
);
return (
<div>
<Row>
<Col xs={6}>
<FormGroup
label={<T id={'opening_balance_at'} />}
className={classNames('form-group--select-list', Classes.FILL)}
intent={
errors.opening_balance_date &&
touched.opening_balance_date &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="payment_date" {...{ errors, touched }} />
}
>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
value={tansformDateValue(values.payment_date)}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM, minimal: true }}
/>
</FormGroup>
<FormGroup
label={<T id={'opening_balance'} />}
className={classNames('form-group--opening-balance', Classes.FILL)}
intent={
errors.opening_balance && touched.opening_balance && Intent.DANGER
}
inline={true}
>
<MoneyInputGroup
value={values.opening_balance}
prefix={'$'}
inputGroupProps={{
fill: true,
}}
/>
</FormGroup>
<FormGroup
label={<T id={'currency'} />}
className={classNames(
'form-group--select-list',
'form-group--balance-currency',
Classes.FILL,
)}
inline={true}
>
<CurrenciesSelectList />
</FormGroup>
</Col>
</Row>
</div>
);
}

23
client/src/containers/Customers/CustomerFooter.js → client/src/containers/Customers/CustomerFloatingActions.js
View File

@@ -1,16 +1,19 @@
import React from 'react';
import { Intent, Button } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
export default function CustomerFloatingFooter({
formik: { isSubmitting, resetForm },
export default function CustomerFloatingActions({
isSubmitting,
resetForm,
onSubmitClick,
onCancelClick,
customer,
customerId,
}) {
return (
<div className={'form__floating-footer'}>
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<Button
intent={Intent.PRIMARY}
disabled={isSubmitting}
@@ -19,7 +22,7 @@ export default function CustomerFloatingFooter({
onSubmitClick({ publish: true, redirect: true });
}}
>
{customer && customer.id ? <T id={'edit'} /> : <T id={'save'} />}
{customerId ? <T id={'edit'} /> : <T id={'save'} />}
</Button>
<Button
@@ -34,16 +37,6 @@ export default function CustomerFloatingFooter({
<T id={'save_new'} />
</Button>
<Button
className={'ml1'}
disabled={isSubmitting}
onClick={() => {
onSubmitClick({ publish: false, redirect: false });
}}
>
<T id={'save_as_draft'} />
</Button>
<Button
className={'ml1'}
onClick={() => {

243
client/src/containers/Customers/CustomerForm.js
View File

@@ -1,22 +1,19 @@
import React, { useState, useMemo, useCallback, useEffect } from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import {
FormGroup,
Intent,
InputGroup,
Checkbox,
} from '@blueprintjs/core';
import { Row, Col } from 'react-grid-system';
import { Intent } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { useHistory } from 'react-router-dom';
import { pick } from 'lodash';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import AppToaster from 'components/AppToaster';
import ErrorMessage from 'components/ErrorMessage';
import CustomerFormPrimarySection from './CustomerFormPrimarySection';
import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
import CustomersTabs from 'containers/Customers/CustomersTabs';
import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
import CustomerFloatingActions from './CustomerFloatingActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withCustomerDetail from 'containers/Customers/withCustomerDetail';
@@ -26,7 +23,6 @@ import withCustomers from 'containers/Customers//withCustomers';
import useMedia from 'hooks/useMedia';
import { compose } from 'utils';
import CustomerFloatingFooter from './CustomerFooter';
function CustomerForm({
// #withDashboardActions
@@ -73,9 +69,7 @@ function CustomerForm({
.label(formatMessage({ id: 'customer_type_' })),
first_name: Yup.string().trim(),
last_name: Yup.string().trim(),
company_name: Yup.string().trim(),
display_name: Yup.string()
.trim()
.required()
@@ -153,13 +147,19 @@ function CustomerForm({
: changePageTitle(formatMessage({ id: 'new_customer' }));
}, [changePageTitle, customer, formatMessage]);
const formik = useFormik({
const {
setFieldValue,
getFieldProps,
errors,
values,
touched,
handleSubmit
} = useFormik({
enableReinitialize: true,
validationSchema: validationSchema,
initialValues: {
...initialValues,
},
onSubmit: (values, { setSubmitting, resetForm, setErrors }) => {
const formValues = { ...values, status: payload.publish };
if (customer && customer.id) {
@@ -172,7 +172,6 @@ function CustomerForm({
intent: Intent.SUCCESS,
});
setSubmitting(false);
// history.push('/customers');
resetForm();
saveInvokeSubmit({ action: 'update', ...payload });
})
@@ -199,20 +198,7 @@ function CustomerForm({
},
});
const requiredSpan = useMemo(() => <span class="required">*</span>, []);
const handleCustomerTypeCahange = useCallback(
(value) => {
formik.setFieldValue('customer_type', value);
},
[formik.setFieldValue],
);
console.log(formik.values, 'ER');
const { errors, touched, getFieldProps, values, isSubmitting } = useMemo(
() => formik,
[formik],
);
const initialAttachmentFiles = useMemo(() => {
return customer && customer.media
? customer.media.map((attach) => ({
@@ -239,9 +225,9 @@ function CustomerForm({
const handleSubmitClick = useCallback(
(payload) => {
setPayload(payload);
formik.handleSubmit();
handleSubmit();
},
[setPayload, formik],
[setPayload, handleSubmit],
);
const handleCancelClick = useCallback(
@@ -250,180 +236,47 @@ function CustomerForm({
},
[onCancelForm],
);
return (
<div className={'customer-form'}>
<form onSubmit={formik.handleSubmit}>
<div className={'customer-form__primary-section'}>
<CustomerTypeRadioField
selectedValue={formik.values.customer_type}
onChange={handleCustomerTypeCahange}
className={'form-group--customer-type'}
/>
<Row>
<Col md={3.5} className={'form-group--contact-name'}>
<FormGroup
label={<T id={'contact_name'} />}
inline={true}
intent={
formik.errors.first_name &&
formik.touched.first_name &&
Intent.DANGER
}
helperText={
<ErrorMessage name={'first_name'} {...{ errors, touched }} />
}
// className={'form-group--contact-name'}
>
<InputGroup
placeholder={'First Name'}
intent={
formik.errors.first_name &&
formik.touched.first_name &&
Intent.DANGER
}
{...formik.getFieldProps('first_name')}
/>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup
inline={true}
intent={
formik.errors.last_name &&
formik.touched.last_name &&
Intent.DANGER
}
helperText={
<ErrorMessage name={'last_name'} {...{ errors, touched }} />
}
// className={'form-group--contact-name'}
>
<InputGroup
placeholder={'Last Name'}
intent={
formik.errors.last_name &&
formik.touched.last_name &&
Intent.DANGER
}
{...formik.getFieldProps('last_name')}
/>
</FormGroup>
</Col>
</Row>
{/* Company Name */}
<FormGroup
label={<T id={'company_name'} />}
className={'form-group--company_name'}
labelInfo={requiredSpan}
intent={
formik.errors.company_name &&
formik.touched.company_name &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage {...{ errors, touched }} name={'company_name'} />
}
>
<InputGroup
intent={
formik.errors.company_name &&
formik.touched.company_name &&
Intent.DANGER
}
{...formik.getFieldProps('company_name')}
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
<form onSubmit={handleSubmit}>
<div class={classNames(CLASSES.PAGE_FORM_HEADER)}>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<CustomerFormPrimarySection
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched}
/>
</FormGroup>
{/* Display Name */}
<FormGroup
label={<T id={'display_name'} />}
intent={
formik.errors.display_name &&
formik.touched.display_name &&
Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage {...{ errors, touched }} name={'display_name'} />
}
>
<InputGroup
intent={
formik.errors.display_name &&
formik.touched.display_name &&
Intent.DANGER
}
{...formik.getFieldProps('display_name')}
</div>
<div className={'page-form__after-priamry-section'}>
<CustomerFormAfterPrimarySection
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched}
/>
</FormGroup>
</div>
</div>
<Row>
{/* Email */}
<Col md={6}>
<FormGroup
label={<T id={'email'} />}
intent={
formik.errors.email && formik.touched.email && Intent.DANGER
}
helperText={
<ErrorMessage name={'email'} {...{ errors, touched }} />
}
className={'form-group--email'}
inline={true}
>
<InputGroup
intent={
formik.errors.email && formik.touched.email && Intent.DANGER
}
{...formik.getFieldProps('email')}
/>
</FormGroup>
</Col>
{/* Active checkbox */}
<FormGroup label={' '} inline={true} className={'form-group--active'}>
<Checkbox
inline={true}
label={<T id={'active'} />}
defaultChecked={formik.values.active}
{...formik.getFieldProps('active')}
/>
</FormGroup>
</Row>
<FormGroup
label={<T id={'phone_number'} />}
intent={
formik.errors.work_phone &&
formik.touched.work_phone &&
Intent.DANGER
}
helperText={
<ErrorMessage name={'work_phone'} {...{ errors, touched }} />
}
className={'form-group--phone-number'}
inline={true}
>
<InputGroup
intent={
formik.errors.work_phone &&
formik.touched.work_phone &&
Intent.DANGER
}
{...formik.getFieldProps('work_phone')}
/>
</FormGroup>
<CustomersTabs formik={formik} />
<div className={classNames(CLASSES.PAGE_FORM_TABS)}>
<CustomersTabs
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched} />
</div>
</form>
<CustomerFloatingFooter
formik={formik}
<CustomerFloatingActions
onSubmitClick={handleSubmitClick}
customer={customer}
onCancelClick={handleCancelClick}
customerId={null}
/>
</div>
);

70
client/src/containers/Customers/CustomerFormAfterPrimarySection.js Normal file
View File

@@ -0,0 +1,70 @@
import React from 'react';
import { FormGroup, Intent, InputGroup } from '@blueprintjs/core';
import { Row, Col } from 'react-grid-system';
import { FormattedMessage as T } from 'react-intl';
import { ErrorMessage } from 'components';
export default function CustomerFormAfterPrimarySection({
setFieldValue,
getFieldProps,
errors,
values,
touched,
}) {
return (
<div class="customer-form__after-primary-section-content">
{/*------------ Customer email -----------*/}
<FormGroup
intent={errors.email && touched.email && Intent.DANGER}
helperText={
<ErrorMessage name={'email'} {...{ errors, touched }} />
}
className={'form-group--email'}
label={<T id={'customer_email'} />}
inline={true}
>
<InputGroup
intent={errors.email && touched.email && Intent.DANGER}
{...getFieldProps('email')}
/>
</FormGroup>
{/*------------ Customer email -----------*/}
<FormGroup
intent={errors.work_phone && touched.work_phone && Intent.DANGER}
helperText={
<ErrorMessage name={'work_phone'} {...{ errors, touched }} />
}
className={'form-group--phone-number'}
label={<T id={'phone_number'} />}
inline={true}
>
<InputGroup
intent={
errors.work_phone && touched.work_phone && Intent.DANGER
}
{...getFieldProps('work_phone')}
/>
</FormGroup>
{/*------------ Customer website -----------*/}
<FormGroup
intent={errors.website && touched.website && Intent.DANGER}
helperText={
<ErrorMessage name={'website'} {...{ errors, touched }} />
}
className={'form-group--website'}
label={<T id={'website'} />}
inline={true}
>
<InputGroup
intent={
errors.website && touched.website && Intent.DANGER
}
{...getFieldProps('website')}
/>
</FormGroup>
</div>
);
}

125
client/src/containers/Customers/CustomerFormPrimarySection.js Normal file
View File

@@ -0,0 +1,125 @@
import React, { useMemo, useCallback } from 'react';
import classNames from 'classnames';
import { FormGroup, Intent, InputGroup, ControlGroup } from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import {
Hint,
FieldRequiredHint,
SalutationList,
DisplayNameList,
ErrorMessage,
Row,
Col,
} from 'components';
import CustomerTypeRadioField from 'containers/Customers/CustomerTypeRadioField';
import { CLASSES } from 'common/classes';
/**
* Customer form primary section.
*/
export default function CustomerFormPrimarySection({
setFieldValue,
getFieldProps,
errors,
values,
touched,
}) {
const handleCustomerTypeCahange = useCallback(
(value) => {
setFieldValue('customer_type', value);
},
[setFieldValue],
);
// Handle salutation field select.
const handleSalutationSelect = (salutation) => {
setFieldValue('salutation', salutation.label);
};
// Handle display name field select.
const handleDisplayNameSelect = (displayName) => {
setFieldValue('display_name', displayName.label);
};
return (
<div className={'customer-form__primary-section-content'}>
{/**-----------Customer type. -----------*/}
<CustomerTypeRadioField
selectedValue={values.customer_type}
onChange={handleCustomerTypeCahange}
/>
{/**----------- Contact name -----------*/}
<FormGroup
className={classNames('form-group--contact_name')}
label={<T id={'contact_name'} />}
inline={true}
>
<ControlGroup>
<SalutationList
onItemSelect={handleSalutationSelect}
popoverProps={{ minimal: true }}
className={classNames(
CLASSES.FORM_GROUP_LIST_SELECT,
CLASSES.FILL,
'input-group--salutation-list',
'select-list--fill-button',
)}
/>
<InputGroup
placeholder={'First Name'}
intent={errors.first_name && touched.first_name && Intent.DANGER}
{...getFieldProps('first_name')}
className={classNames('input-group--first-name')}
/>
<InputGroup
placeholder={'Last Name'}
intent={errors.last_name && touched.last_name && Intent.DANGER}
{...getFieldProps('last_name')}
className={classNames('input-group--last-name')}
/>
</ControlGroup>
</FormGroup>
{/*----------- Company Name -----------*/}
<FormGroup
className={classNames('form-group--company_name')}
label={<T id={'company_name'} />}
intent={errors.company_name && touched.company_name && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name={'company_name'} />
}
inline={true}
>
<InputGroup
intent={errors.company_name && touched.company_name && Intent.DANGER}
{...getFieldProps('company_name')}
/>
</FormGroup>
{/*----------- Display Name -----------*/}
<FormGroup
intent={errors.display_name && touched.display_name && Intent.DANGER}
helperText={
<ErrorMessage {...{ errors, touched }} name={'display_name'} />
}
label={
<>
<T id={'display_name'} />
<FieldRequiredHint />
<Hint />
</>
}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, CLASSES.FILL)}
inline={true}
>
<DisplayNameList
firstName={values.first_name}
lastName={values.last_name}
company={values.company_name}
onItemSelect={handleDisplayNameSelect}
popoverProps={{ minimal: true }}
/>
</FormGroup>
</div>
);
}

35
client/src/containers/Customers/CustomerTypeRadioField.js
View File

@@ -1,23 +1,32 @@
import React from 'react';
import { handleStringChange } from 'utils';
import { useIntl } from 'react-intl';
import { RadioGroup, Radio } from '@blueprintjs/core';
import classNames from 'classnames';
import { RadioGroup, Radio, FormGroup } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import { handleStringChange } from 'utils';
/**
* Customer type radio field.
*/
export default function RadioCustomer(props) {
const { onChange, ...rest } = props;
const { formatMessage } = useIntl();
return (
<RadioGroup
<FormGroup
inline={true}
label={formatMessage({ id: 'customer_type' })}
onChange={handleStringChange((value) => {
onChange && onChange(value);
})}
{...rest}
>
<Radio label={formatMessage({ id: 'business' })} value="business" />
<Radio label={formatMessage({ id: 'individual' })} value="individual" />
</RadioGroup>
label={<T id={'customer_type'} />}
className={classNames('form-group--customer_type')}>
<RadioGroup
inline={true}
onChange={handleStringChange((value) => {
onChange && onChange(value);
})}
{...rest}
>
<Radio label={formatMessage({ id: 'business' })} value="business" />
<Radio label={formatMessage({ id: 'individual' })} value="individual" />
</RadioGroup>
</FormGroup>
);
}

32
client/src/containers/Customers/CustomersTabs.js
View File

@@ -4,8 +4,15 @@ import { FormattedMessage as T, useIntl } from 'react-intl';
import CustomerAddressTabs from './CustomerAddressTabs';
import CustomerNotTabs from './CustomerNotTabs';
import CustomerAttachmentTabs from './CustomerAttachmentTabs';
import CustomerFinancialPanel from './CustomerFinancialPanel';
function CustomersTabs({ formik }) {
function CustomersTabs({
setFieldValue,
getFieldProps,
errors,
values,
touched,
}) {
const [animate, setAnimate] = useState(true);
const { formatMessage } = useIntl();
const handleChangeTabs = useCallback(() => {}, []);
@@ -14,25 +21,36 @@ function CustomersTabs({ formik }) {
<div>
<Tabs animate={animate} id={'customer-tabs'} large={true}>
<Tab
id={'other'}
title={formatMessage({ id: 'other' })}
panel={'Other'}
id={'financial'}
title={formatMessage({ id: 'financial_details' })}
panel={<CustomerFinancialPanel
values={values}
errors={errors}
setFieldValue={setFieldValue}
touched={touched}
/>}
/>
<Tab
id={'address'}
title={formatMessage({ id: 'address' })}
panel={<CustomerAddressTabs formik={formik} />}
panel={<CustomerAddressTabs
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched}
/>}
/>
<Tab
id={'attachement'}
title={formatMessage({ id: 'attachement' })}
panel={<CustomerAttachmentTabs />}
/>
<Tab
{/* <Tab
id={'note'}
title={formatMessage({ id: 'note' })}
panel={<CustomerNotTabs formik={formik} />}
/>
/> */}
</Tabs>
</div>
);

21
client/src/containers/Dialogs/JournalNumberDialog/JournalNumberDialogContent.js
View File

@@ -28,20 +28,10 @@ function JournalNumberDialogContent({
// #withManualJournalsActions
setJournalNumberChanged,
}) {
const [isChanged, setIsChanged] = useState(false);
}) {
const fetchSettings = useQuery(
['settings', { group: 'manual_journal' }],
['settings'],
() => requestFetchOptions({}),
{
onSuccess: () => {
if (isChanged) {
setJournalNumberChanged(true);
setIsChanged(false);
}
}
}
);
const handleSubmitForm = (values, { setSubmitting }) => {
@@ -51,10 +41,11 @@ function JournalNumberDialogContent({
requestSubmitOptions({ options }).then(() => {
setSubmitting(false);
setIsChanged(true);
queryCache.invalidateQueries('settings');
closeDialog('journal-number-form');
setTimeout(() => {
queryCache.invalidateQueries('settings');
}, 250);
}).catch(() => {
setSubmitting(false);
});

1
client/src/containers/Sales/Estimate/EntriesItemsTable.js
View File

@@ -3,7 +3,6 @@ import { omit } from 'lodash';
import { Button, Intent, Position, Tooltip } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { Hint, Icon } from 'components';
import DataTable from 'components/DataTable';