fix: auto-increment journal number.

WIP: customer form.
This commit is contained in:
Ahmed Bouhuolia
2020-11-08 16:24:13 +02:00
parent 08f1a8136b
commit 1bc719dea7
16 changed files with 451 additions and 378 deletions

View File

@@ -29,6 +29,7 @@ import withMediaActions from 'containers/Media/withMediaActions';
import useMedia from 'hooks/useMedia';
import { compose, repeatValue, orderingLinesIndexes } from 'utils';
import withManualJournalsActions from './withManualJournalsActions';
import withManualJournals from './withManualJournals';
const ERROR = {
JOURNAL_NUMBER_ALREADY_EXISTS: 'JOURNAL.NUMBER.ALREADY.EXISTS',
@@ -52,6 +53,9 @@ function MakeJournalEntriesForm({
requestMakeJournalEntries,
requestEditManualJournal,
// #withManualJournals
journalNumberChanged,
// #withDashboard
changePageTitle,
changePageSubtitle,
@@ -87,14 +91,19 @@ function MakeJournalEntriesForm({
savedMediaIds.current = [];
};
const journalNumber = journalNumberPrefix
? `${journalNumberPrefix}-${journalNextNumber}`
: journalNextNumber;
useEffect(() => {
if (manualJournal && manualJournal.id) {
changePageTitle(formatMessage({ id: 'edit_journal' }));
changePageSubtitle(`No. ${manualJournal.journal_number}`);
} else {
changePageSubtitle(`No. ${journalNumber}`);
changePageTitle(formatMessage({ id: 'new_journal' }));
}
}, [changePageTitle, changePageSubtitle, manualJournal, formatMessage]);
}, [changePageTitle, changePageSubtitle, journalNumber, manualJournal, formatMessage]);
const validationSchema = Yup.object().shape({
journal_number: Yup.string()
@@ -149,11 +158,6 @@ function MakeJournalEntriesForm({
}),
[],
);
const journalNumber = journalNumberPrefix
? `${journalNumberPrefix}-${journalNextNumber}`
: journalNextNumber;
const defaultInitialValues = useMemo(
() => ({
journal_number: journalNumber,
@@ -366,14 +370,13 @@ function MakeJournalEntriesForm({
},
});
useEffect(() => {
setFieldValue('journal_number', journalNumber);
}, [journalNumber, setFieldValue]);
// Change page subtitle.
// Observes journal number settings changes.
useEffect(() => {
changePageSubtitle(`No. ${journalNumber}`);
}, [changePageSubtitle, journalNumber]);
if (journalNumberChanged) {
setFieldValue('journal_number', journalNumber);
changePageSubtitle(`No. ${journalNumber}`);
}
}, [journalNumber, journalNumberChanged, setFieldValue, changePageSubtitle]);
const handleSubmitClick = useCallback(
(payload) => {
@@ -474,4 +477,7 @@ export default compose(
journalNumberPrefix: manualJournalsSettings.numberPrefix,
})),
withManualJournalsActions,
withManualJournals(({ journalNumberChanged }) => ({
journalNumberChanged
}))
)(MakeJournalEntriesForm);

View File

@@ -24,6 +24,10 @@ 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);

View File

@@ -1,5 +1,5 @@
import React from 'react';
import { FormGroup, Intent, InputGroup } from '@blueprintjs/core';
import { FormGroup, Intent, InputGroup, TextArea } from '@blueprintjs/core';
import { Row, Col } from 'components';
import { FormattedMessage as T } from 'react-intl';
@@ -12,353 +12,359 @@ const CustomerBillingAddress = ({
getFieldProps,
}) => {
return (
<Row className={'customer-form__tabs-section'}>
<Col xs={6}>
<h4>
<T id={'billing_address'} />
</h4>
<div
className={
'customer-form__tabs-section customer-form__tabs-section--address'
}
>
<Row>
<Col xs={6}>
<h4>
<T id={'billing_address'} />
</h4>
<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
<FormGroup
className={'form-group--journal-number'}
intent={
errors.billing_address_country &&
touched.billing_address_country &&
Intent.DANGER
}
{...getFieldProps('billing_address_country')}
/>
</FormGroup>
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
}
{...getFieldProps('billing_address_country')}
/>
</FormGroup>
<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
<FormGroup
label={<T id={'address_line_1'} />}
className={'form-group--address_line_1'}
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
{...getFieldProps('billing_address_1')}
/>
</FormGroup>
inline={true}
helperText={
<ErrorMessage name="billing_address_1" {...{ errors, touched }} />
}
>
<TextArea
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
<FormGroup
label={<T id={'address_line_2'} />}
className={'form-group--journal-number'}
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 }}
inline={true}
helperText={
<ErrorMessage name="billing_address_2" {...{ errors, touched }} />
}
>
<TextArea
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
{...getFieldProps('billing_address_2')}
/>
}
>
<InputGroup
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_city &&
touched.billing_address_city &&
Intent.DANGER
}
{...getFieldProps('billing_address_city')}
/>
</FormGroup>
<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 }}
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')}
/>
}
>
<InputGroup
</FormGroup>
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_state &&
touched.billing_address_state &&
Intent.DANGER
}
{...getFieldProps('billing_address_state')}
/>
</FormGroup>
<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 }}
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')}
/>
}
>
<InputGroup
</FormGroup>
<FormGroup
label={<T id={'zip_code'} />}
intent={
errors.billing_address_zipcode &&
touched.billing_address_zipcode &&
Intent.DANGER
}
{...getFieldProps('billing_address_zipcode')}
/>
</FormGroup>
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>
<FormGroup
label={<T id={'phone'} />}
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
inline={true}
helperText={
<ErrorMessage name="shipping_phone" {...{ errors, touched }} />
}
>
<InputGroup
<FormGroup
label={<T id={'phone'} />}
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 }}
inline={true}
helperText={
<ErrorMessage name="shipping_phone" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
{...getFieldProps('shipping_phone')}
/>
}
>
<InputGroup
</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
}
{...getFieldProps('shipping_address_country')}
/>
</FormGroup>
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>
<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
<FormGroup
label={<T id={'address_line_1'} />}
className={'form-group--journal-number'}
intent={
errors.billing_address_1 &&
touched.billing_address_1 &&
Intent.DANGER
}
{...getFieldProps('billing_address_1')}
/>
</FormGroup>
inline={true}
helperText={
<ErrorMessage name="billing_address_1" {...{ errors, touched }} />
}
>
<TextArea
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
<FormGroup
label={<T id={'address_line_2'} />}
className={'form-group--journal-number'}
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 }}
inline={true}
helperText={
<ErrorMessage name="billing_address_2" {...{ errors, touched }} />
}
>
<TextArea
intent={
errors.billing_address_2 &&
touched.billing_address_2 &&
Intent.DANGER
}
{...getFieldProps('billing_address_2')}
/>
}
>
<InputGroup
</FormGroup>
<FormGroup
label={<T id={'city_town'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_city &&
touched.shipping_address_city &&
Intent.DANGER
}
{...getFieldProps('shipping_address_city')}
/>
</FormGroup>
<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 }}
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')}
/>
}
>
<InputGroup
</FormGroup>
<FormGroup
label={<T id={'state'} />}
className={'form-group--journal-number'}
intent={
errors.shipping_address_state &&
touched.shipping_address_state &&
Intent.DANGER
}
{...getFieldProps('shipping_address_state')}
/>
</FormGroup>
<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 }}
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')}
/>
}
>
<InputGroup
</FormGroup>
<FormGroup
label={<T id={'zip_code'} />}
intent={
errors.shipping_address_zipcode &&
touched.shipping_address_zipcode &&
Intent.DANGER
}
{...getFieldProps('shipping_address_zipcode')}
/>
</FormGroup>
inline={true}
helperText={
<ErrorMessage
name="shipping_address_zipcode"
{...{ errors, touched }}
/>
}
>
<InputGroup
intent={
errors.shipping_address_zipcode &&
touched.shipping_address_zipcode &&
Intent.DANGER
}
{...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
<FormGroup
label={<T id={'phone'} />}
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
{...getFieldProps('shipping_phone')}
/>
</FormGroup>
</Col>
</Row>
inline={true}
helperText={
<ErrorMessage name="shipping_phone" {...{ errors, touched }} />
}
>
<InputGroup
intent={
errors.shipping_phone && touched.shipping_phone && Intent.DANGER
}
{...getFieldProps('shipping_phone')}
/>
</FormGroup>
</Col>
</Row>
</div>
);
};

View File

@@ -28,7 +28,7 @@ export default function CustomerFinancialPanel({
);
return (
<div>
<div className={'customer-form__tabs-section customer-form__tabs-section--financial'}>
<Row>
<Col xs={6}>
<FormGroup

View File

@@ -270,14 +270,14 @@ function CustomerForm({
values={values}
touched={touched} />
</div>
</form>
<CustomerFloatingActions
onSubmitClick={handleSubmitClick}
customer={customer}
onCancelClick={handleCancelClick}
customerId={null}
/>
<CustomerFloatingActions
onSubmitClick={handleSubmitClick}
customer={customer}
onCancelClick={handleCancelClick}
customerId={null}
/>
</form>
</div>
);
}

View File

@@ -1,6 +1,10 @@
import React from 'react';
import { FormGroup, Intent, InputGroup } from '@blueprintjs/core';
import { Row, Col } from 'react-grid-system';
import {
FormGroup,
Intent,
InputGroup,
ControlGroup,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'react-intl';
import { ErrorMessage } from 'components';
@@ -11,14 +15,12 @@ export default function CustomerFormAfterPrimarySection({
values,
touched,
}) {
return (
return (
<div class="customer-form__after-primary-section-content">
{/*------------ Customer email -----------*/}
{/*------------ Customer email -----------*/}
<FormGroup
intent={errors.email && touched.email && Intent.DANGER}
helperText={
<ErrorMessage name={'email'} {...{ errors, touched }} />
}
helperText={<ErrorMessage name={'email'} {...{ errors, touched }} />}
className={'form-group--email'}
label={<T id={'customer_email'} />}
inline={true}
@@ -28,9 +30,8 @@ export default function CustomerFormAfterPrimarySection({
{...getFieldProps('email')}
/>
</FormGroup>
{/*------------ Customer email -----------*/}
{/*------------ Customer email -----------*/}
<FormGroup
intent={errors.work_phone && touched.work_phone && Intent.DANGER}
helperText={
@@ -40,31 +41,34 @@ export default function CustomerFormAfterPrimarySection({
label={<T id={'phone_number'} />}
inline={true}
>
<InputGroup
intent={
errors.work_phone && touched.work_phone && Intent.DANGER
}
{...getFieldProps('work_phone')}
/>
<ControlGroup>
<InputGroup
intent={errors.work_phone && touched.work_phone && Intent.DANGER}
{...getFieldProps('work_phone')}
placeholder={'Work'}
/>
<InputGroup
intent={errors.work_phone && touched.work_phone && Intent.DANGER}
{...getFieldProps('work_phone')}
placeholder={'Mobile'}
/>
</ControlGroup>
</FormGroup>
{/*------------ Customer website -----------*/}
{/*------------ Customer website -----------*/}
<FormGroup
intent={errors.website && touched.website && Intent.DANGER}
helperText={
<ErrorMessage name={'website'} {...{ errors, touched }} />
}
helperText={<ErrorMessage name={'website'} {...{ errors, touched }} />}
className={'form-group--website'}
label={<T id={'website'} />}
inline={true}
>
<InputGroup
intent={
errors.website && touched.website && Intent.DANGER
}
intent={errors.website && touched.website && Intent.DANGER}
{...getFieldProps('website')}
/>
</FormGroup>
</div>
);
}
}

View File

@@ -1,36 +0,0 @@
import React from 'react';
import {
Button,
Classes,
FormGroup,
InputGroup,
Intent,
TextArea,
MenuItem,
} from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import ErrorMessage from 'components/ErrorMessage';
const CustomerBillingAddress = ({
formik: { errors, touched, setFieldValue, getFieldProps },
}) => {
return (
<div>
<FormGroup
label={<T id={'note'} />}
// className={'form-group--description'}
intent={errors.note && touched.note && Intent.DANGER}
helperText={<ErrorMessage name="note" {...{ errors, touched }} />}
inline={true}
>
<TextArea
growVertically={true}
large={true}
{...getFieldProps('note')}
/>
</FormGroup>
</div>
);
};
export default CustomerBillingAddress;

View File

@@ -0,0 +1,34 @@
import React from 'react';
import classNames from 'classnames';
import { FormGroup, Intent, TextArea, Classes } from '@blueprintjs/core';
import { Row, Col } from 'components';
import { FormattedMessage as T } from 'react-intl';
import ErrorMessage from 'components/ErrorMessage';
export default function CustomerNotePanel({ errors, touched, getFieldProps }) {
return (
<div
className={
'customer-form__tabs-section customer-form__tabs-section--note'
}
>
<Row>
<Col xs={6}>
<FormGroup
label={<T id={'note'} />}
className={classNames('form-group--select-list', Classes.FILL)}
intent={errors.note && touched.note && Intent.DANGER}
helperText={
<ErrorMessage name="payment_date" {...{ errors, touched }} />
}
>
<TextArea
intent={errors.note && touched.note && Intent.DANGER}
{...getFieldProps('note')}
/>
</FormGroup>
</Col>
</Row>
</div>
);
}

View File

@@ -2,58 +2,69 @@ import React, { useState, useCallback } from 'react';
import { Tabs, Tab } from '@blueprintjs/core';
import { FormattedMessage as T, useIntl } from 'react-intl';
import CustomerAddressTabs from './CustomerAddressTabs';
import CustomerNotTabs from './CustomerNotTabs';
import CustomerAttachmentTabs from './CustomerAttachmentTabs';
import CustomerFinancialPanel from './CustomerFinancialPanel';
import CustomerNotePanel from './CustomerNotePanel';
function CustomersTabs({
export default function CustomersTabs({
setFieldValue,
getFieldProps,
errors,
values,
touched,
}) {
const [animate, setAnimate] = useState(true);
const { formatMessage } = useIntl();
const handleChangeTabs = useCallback(() => {}, []);
return (
<div>
<Tabs animate={animate} id={'customer-tabs'} large={true}>
<Tabs
animate={true}
id={'customer-tabs'}
large={true}
defaultSelectedTabId="financial"
>
<Tab
id={'financial'}
title={formatMessage({ id: 'financial_details' })}
panel={<CustomerFinancialPanel
values={values}
errors={errors}
setFieldValue={setFieldValue}
touched={touched}
/>}
panel={
<CustomerFinancialPanel
values={values}
errors={errors}
setFieldValue={setFieldValue}
touched={touched}
/>
}
/>
<Tab
id={'address'}
title={formatMessage({ id: 'address' })}
panel={<CustomerAddressTabs
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched}
/>}
panel={
<CustomerAddressTabs
setFieldValue={setFieldValue}
getFieldProps={getFieldProps}
errors={errors}
values={values}
touched={touched}
/>
}
/>
<Tab
id="notes"
title={formatMessage({ id: 'notes' })}
panel={
<CustomerNotePanel
errors={errors}
touched={touched}
getFieldProps={getFieldProps}
/>
}
/>
<Tab
id={'attachement'}
title={formatMessage({ id: 'attachement' })}
panel={<CustomerAttachmentTabs />}
/>
{/* <Tab
id={'note'}
title={formatMessage({ id: 'note' })}
panel={<CustomerNotTabs formik={formik} />}
/> */}
</Tabs>
</div>
);
}
export default CustomersTabs;

View File

@@ -45,6 +45,7 @@ function JournalNumberDialogContent({
setTimeout(() => {
queryCache.invalidateQueries('settings');
setJournalNumberChanged(true);
}, 250);
}).catch(() => {
setSubmitting(false);