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

fix: merge conflict quick create list field.

Browse Source
This commit is contained in:
a.bouhuolia
2021-11-11 00:05:57 +02:00
parent 06345a5615 da67217d74
commit 567b4da7e9
61 changed files with 1885 additions and 745 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/containers/Accounting/MakeJournal/components.js
View File

@@ -128,6 +128,7 @@ export const useJournalTableEntriesColumns = () => {
className: 'account',
disableSortBy: true,
width: 160,
fieldProps: { allowCreate: true }
},
{
Header: CreditHeaderCell,

22
src/containers/Customers/CustomerForm/CustomerFloatingActions.js
View File

@@ -9,23 +9,24 @@ import {
Menu,
MenuItem,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { useFormikContext } from 'formik';
import styled from 'styled-components';
import { FormattedMessage as T } from 'components';
import { CLASSES } from 'common/classes';
import { Icon } from 'components';
import { useCustomerFormContext } from './CustomerFormProvider';
import { safeInvoke } from 'utils';
/**
* Customer floating actions bar.
*/
export default function CustomerFloatingActions() {
const history = useHistory();
export default function CustomerFloatingActions({ onCancel }) {
// Customer form context.
const { isNewMode,setSubmitPayload } = useCustomerFormContext();
const { isNewMode, setSubmitPayload } = useCustomerFormContext();
// Formik context.
const { resetForm, submitForm, isSubmitting } = useFormikContext();
@@ -37,7 +38,7 @@ export default function CustomerFloatingActions() {
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
history.goBack();
safeInvoke(onCancel, event);
};
// handle clear button clicl.
@@ -55,7 +56,7 @@ export default function CustomerFloatingActions() {
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
<SaveButton
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
@@ -83,6 +84,7 @@ export default function CustomerFloatingActions() {
/>
</Popover>
</ButtonGroup>
{/* ----------- Clear & Reset----------- */}
<Button
className={'ml1'}
@@ -99,3 +101,7 @@ export default function CustomerFloatingActions() {
</div>
);
}
const SaveButton = styled(Button)`
min-width: 100px;
`;

154
src/containers/Customers/CustomerForm/CustomerForm.js
View File

@@ -1,152 +1,14 @@
import React, { useMemo } from 'react';
import { Formik, Form } from 'formik';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { CLASSES } from 'common/classes';
import AppToaster from 'components/AppToaster';
import CustomerFormPrimarySection from './CustomerFormPrimarySection';
import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
import CustomersTabs from './CustomersTabs';
import CustomerFloatingActions from './CustomerFloatingActions';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { compose, transformToForm } from 'utils';
import { useCustomerFormContext } from './CustomerFormProvider';
import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
const defaultInitialValues = {
customer_type: 'business',
salutation: '',
first_name: '',
last_name: '',
company_name: '',
display_name: '',
email: '',
work_phone: '',
personal_phone: '',
website: '',
note: '',
active: true,
billing_address_country: '',
billing_address_1: '',
billing_address_2: '',
billing_address_city: '',
billing_address_state: '',
billing_address_postcode: '',
billing_address_phone: '',
shipping_address_country: '',
shipping_address_1: '',
shipping_address_2: '',
shipping_address_city: '',
shipping_address_state: '',
shipping_address_postcode: '',
shipping_address_phone: '',
opening_balance: '',
currency_code: '',
opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
};
import React from 'react';
import { CustomerFormProvider } from './CustomerFormProvider';
import CustomerFormFormik from './CustomerFormFormik';
/**
* Customer form.
* Abstructed customer form.
*/
function CustomerForm({ organization: { base_currency } }) {
const {
customer,
customerId,
submitPayload,
contactDuplicate,
editCustomerMutate,
createCustomerMutate,
isNewMode,
} = useCustomerFormContext();
// const isNewMode = !customerId;
const history = useHistory();
/**
* Initial values in create and edit mode.
*/
const initialValues = useMemo(
() => ({
...defaultInitialValues,
currency_code: base_currency,
...transformToForm(contactDuplicate || customer, defaultInitialValues),
}),
[customer, contactDuplicate, base_currency],
);
//Handles the form submit.
const handleFormSubmit = (
values,
{ setSubmitting, resetForm, setErrors },
) => {
const formValues = { ...values };
const onSuccess = () => {
AppToaster.show({
message: intl.get(
isNewMode
? 'the_customer_has_been_created_successfully'
: 'the_item_customer_has_been_edited_successfully',
),
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
if (!submitPayload.noRedirect) {
history.push('/customers');
}
};
const onError = () => {
setSubmitting(false);
};
if (isNewMode) {
createCustomerMutate(formValues).then(onSuccess).catch(onError);
} else {
editCustomerMutate([customer.id, formValues])
.then(onSuccess)
.catch(onError);
}
};
export default function CustomerForm({ customerId }) {
return (
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_CUSTOMER)}>
<Formik
validationSchema={isNewMode ? CreateCustomerForm : EditCustomerForm}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<Form>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<CustomerFormPrimarySection />
</div>
<div className={'page-form__after-priamry-section'}>
<CustomerFormAfterPrimarySection />
</div>
<div className={classNames(CLASSES.PAGE_FORM_TABS)}>
<CustomersTabs />
</div>
<CustomerFloatingActions />
</Form>
</Formik>
</div>
<CustomerFormProvider customerId={customerId}>
<CustomerFormFormik />
</CustomerFormProvider>
);
}
export default compose(withCurrentOrganization())(CustomerForm);

127
src/containers/Customers/CustomerForm/CustomerFormFormik.js Normal file
View File

@@ -0,0 +1,127 @@
import React, { useMemo } from 'react';
import { Formik, Form } from 'formik';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import AppToaster from 'components/AppToaster';
import { CreateCustomerForm, EditCustomerForm } from './CustomerForm.schema';
import CustomerFormPrimarySection from './CustomerFormPrimarySection';
import CustomerFormAfterPrimarySection from './CustomerFormAfterPrimarySection';
import CustomersTabs from './CustomersTabs';
import CustomerFloatingActions from './CustomerFloatingActions';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { compose, transformToForm, saveInvoke } from 'utils';
import { useCustomerFormContext } from './CustomerFormProvider';
import { defaultInitialValues } from './utils';
import 'style/pages/Customers/Form.scss';
/**
* Customer form.
*/
function CustomerFormFormik({
organization: { base_currency },
// #ownProps
initialValues: initialCustomerValues,
onSubmitSuccess,
onSubmitError,
onCancel,
className,
}) {
const {
customer,
submitPayload,
contactDuplicate,
editCustomerMutate,
createCustomerMutate,
isNewMode,
} = useCustomerFormContext();
/**
* Initial values in create and edit mode.
*/
const initialValues = useMemo(
() => ({
...defaultInitialValues,
currency_code: base_currency,
...transformToForm(contactDuplicate || customer, defaultInitialValues),
...initialCustomerValues,
}),
[customer, contactDuplicate, base_currency, initialCustomerValues],
);
// Handles the form submit.
const handleFormSubmit = (values, formArgs) => {
const { setSubmitting, resetForm } = formArgs;
const formValues = { ...values };
const onSuccess = () => {
AppToaster.show({
message: intl.get(
isNewMode
? 'the_customer_has_been_created_successfully'
: 'the_item_customer_has_been_edited_successfully',
),
intent: Intent.SUCCESS,
});
setSubmitting(false);
resetForm();
saveInvoke(onSubmitSuccess, values, formArgs, submitPayload);
};
const onError = () => {
setSubmitting(false);
saveInvoke(onSubmitError, values, formArgs, submitPayload);
};
if (isNewMode) {
createCustomerMutate(formValues).then(onSuccess).catch(onError);
} else {
editCustomerMutate([customer.id, formValues])
.then(onSuccess)
.catch(onError);
}
};
return (
<div
className={classNames(
CLASSES.PAGE_FORM,
CLASSES.PAGE_FORM_CUSTOMER,
className,
)}
>
<Formik
validationSchema={isNewMode ? CreateCustomerForm : EditCustomerForm}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<Form>
<div className={classNames(CLASSES.PAGE_FORM_HEADER_PRIMARY)}>
<CustomerFormPrimarySection />
</div>
<div className={'page-form__after-priamry-section'}>
<CustomerFormAfterPrimarySection />
</div>
<div className={classNames(CLASSES.PAGE_FORM_TABS)}>
<CustomersTabs />
</div>
<CustomerFloatingActions onCancel={onCancel} />
</Form>
</Formik>
</div>
);
}
export default compose(withCurrentOrganization())(CustomerFormFormik);

76
src/containers/Customers/CustomerForm/CustomerFormPage.js
View File

@@ -1,20 +1,74 @@
import React from 'react';
import { useParams } from 'react-router-dom';
import { useParams, useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { DashboardCard } from 'components';
import CustomerForm from './CustomerForm';
import { CustomerFormProvider } from './CustomerFormProvider';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import 'style/pages/Customers/PageForm.scss';
import CustomerFormFormik from './CustomerFormFormik';
import {
CustomerFormProvider,
useCustomerFormContext,
} from './CustomerFormProvider';
export default function CustomerFormPage() {
const { id } = useParams();
/**
* Customer form page loading.
* @returns {JSX}
*/
function CustomerFormPageLoading({ children }) {
const { isFormLoading } = useCustomerFormContext();
return (
<CustomerFormProvider customerId={id}>
<DashboardCard page>
<CustomerForm />
</DashboardCard>
<CustomerDashboardInsider loading={isFormLoading}>
{children}
</CustomerDashboardInsider>
);
}
/**
* Customer form page.
* @returns {JSX}
*/
export default function CustomerFormPage() {
const history = useHistory();
const { id } = useParams();
const customerId = parseInt(id, 10);
// Handle the form submit success.
const handleSubmitSuccess = (values, formArgs, submitPayload) => {
if (!submitPayload.noRedirect) {
history.push('/customers');
}
};
// Handle the form cancel button click.
const handleFormCancel = () => {
history.goBack();
};
return (
<CustomerFormProvider customerId={customerId}>
<CustomerFormPageLoading>
<DashboardCard page>
<CustomerFormPageFormik
onSubmitSuccess={handleSubmitSuccess}
onCancel={handleFormCancel}
/>
</DashboardCard>
</CustomerFormPageLoading>
</CustomerFormProvider>
);
}
}
const CustomerFormPageFormik = styled(CustomerFormFormik)`
.page-form {
&__floating-actions {
margin-left: -40px;
margin-right: -40px;
}
}
`;
const CustomerDashboardInsider = styled(DashboardInsider)`
padding-bottom: 64px;
`;

20
src/containers/Customers/CustomerForm/CustomerFormProvider.js
View File

@@ -1,6 +1,5 @@
import React, { useState, createContext } from 'react';
import { useLocation } from 'react-router-dom';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import {
useCustomer,
useCurrencies,
@@ -24,7 +23,7 @@ function CustomerFormProvider({ customerId, ...props }) {
// Handle fetch contact duplicate details.
const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
contactId,
{ enabled: !!contactId, },
{ enabled: !!contactId },
);
// Handle fetch Currencies data table
const { data: currencies, isLoading: isCurrenciesLoading } = useCurrencies();
@@ -38,6 +37,9 @@ function CustomerFormProvider({ customerId, ...props }) {
// determines whether the form new or duplicate mode.
const isNewMode = contactId || !customerId;
const isFormLoading =
isCustomerLoading || isCurrenciesLoading || isContactLoading;
const provider = {
customerId,
customer,
@@ -48,24 +50,14 @@ function CustomerFormProvider({ customerId, ...props }) {
isCustomerLoading,
isCurrenciesLoading,
isFormLoading,
setSubmitPayload,
editCustomerMutate,
createCustomerMutate,
};
return (
<DashboardInsider
loading={
isCustomerLoading ||
isCurrenciesLoading ||
isContactLoading
}
name={'customer-form'}
>
<CustomerFormContext.Provider value={provider} {...props} />
</DashboardInsider>
);
return <CustomerFormContext.Provider value={provider} {...props} />;
}
const useCustomerFormContext = () => React.useContext(CustomerFormContext);

38
src/containers/Customers/CustomerForm/utils.js Normal file
View File

@@ -0,0 +1,38 @@
import moment from 'moment';
export const defaultInitialValues = {
customer_type: 'business',
salutation: '',
first_name: '',
last_name: '',
company_name: '',
display_name: '',
email: '',
work_phone: '',
personal_phone: '',
website: '',
note: '',
active: true,
billing_address_country: '',
billing_address_1: '',
billing_address_2: '',
billing_address_city: '',
billing_address_state: '',
billing_address_postcode: '',
billing_address_phone: '',
shipping_address_country: '',
shipping_address_1: '',
shipping_address_2: '',
shipping_address_city: '',
shipping_address_state: '',
shipping_address_postcode: '',
shipping_address_phone: '',
opening_balance: '',
currency_code: '',
opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
};

2
src/containers/Dialogs/QuickPaymentMadeFormDialog/QuickPaymentMadeFormFields.js
View File

@@ -37,7 +37,7 @@ export default function QuickPaymentMadeFormFields() {
const { accounts } = useQuickPaymentMadeContext();
// Intl context.
const paymentMadeFieldRef = useAutofocus();
return (

25
src/containers/Drawers/QuickCreateCustomerDrawer/QuickCreateCustomerDrawerContent.js Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import {
DrawerHeaderContent,
DrawerBody,
FormattedMessage as T,
} from 'components';
import QuickCustomerFormDrawer from './QuickCustomerFormDrawer';
/**
* Quick create/edit customer drawer.
*/
export default function QuickCreateCustomerDrawerContent({ displayName }) {
return (
<React.Fragment>
<DrawerHeaderContent
name="quick-create-customer"
title={<T id={'create_a_new_customer'} />}
/>
<DrawerBody>
<QuickCustomerFormDrawer displayName={displayName} />
</DrawerBody>
</React.Fragment>
);
}

65
src/containers/Drawers/QuickCreateCustomerDrawer/QuickCustomerFormDrawer.js Normal file
View File

@@ -0,0 +1,65 @@
import React from 'react';
import * as R from 'ramda';
import styled from 'styled-components';
import { Card, DrawerLoading } from 'components';
import {
CustomerFormProvider,
useCustomerFormContext,
} from '../../Customers/CustomerForm/CustomerFormProvider';
import CustomerFormFormik from '../../Customers/CustomerForm/CustomerFormFormik';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
/**
* Drawer customer form loading wrapper.
* @returns {JSX}
*/
function DrawerCustomerFormLoading({ children }) {
const { isFormLoading } = useCustomerFormContext();
return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
}
/**
* Quick customer form of the drawer.
*/
function QuickCustomerFormDrawer({ displayName, closeDrawer, customerId }) {
// Handle the form submit request success.
const handleSubmitSuccess = () => {
closeDrawer('quick-create-customer');
};
// Handle the form cancel action.
const handleCancelForm = () => {
closeDrawer('quick-create-customer');
};
return (
<CustomerFormProvider customerId={customerId}>
<DrawerCustomerFormLoading>
<CustomerFormCard>
<CustomerFormFormik
initialValues={{ display_name: displayName }}
onSubmitSuccess={handleSubmitSuccess}
onCancel={handleCancelForm}
/>
</CustomerFormCard>
</DrawerCustomerFormLoading>
</CustomerFormProvider>
);
}
export default R.compose(withDrawerActions)(QuickCustomerFormDrawer);
const CustomerFormCard = styled(Card)`
margin: 15px;
margin-bottom: calc(15px + 65px);
.page-form {
&__floating-actions {
margin-left: -36px;
margin-right: -36px;
}
}
`;

35
src/containers/Drawers/QuickCreateCustomerDrawer/index.js Normal file
View File

@@ -0,0 +1,35 @@
import React from 'react';
import { Drawer, DrawerSuspense } from 'components';
import withDrawers from 'containers/Drawer/withDrawers';
import { compose } from 'utils';
const QuickCreateCustomerDrawerContent = React.lazy(() =>
import('./QuickCreateCustomerDrawerContent'),
);
/**
* Quick Create customer
*/
function QuickCreateCustomerDrawer({
name,
// #withDrawer
isOpen,
payload,
}) {
return (
<Drawer
isOpen={isOpen}
name={name}
style={{ minWidth: '700px', maxWidth: '900px' }}
size={'80%'}
>
<DrawerSuspense>
<QuickCreateCustomerDrawerContent displayName={payload.displayName} />
</DrawerSuspense>
</Drawer>
);
}
export default compose(withDrawers())(QuickCreateCustomerDrawer);

25
src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.js Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import {
DrawerHeaderContent,
DrawerBody,
FormattedMessage as T,
} from 'components';
import QuickCreateItemDrawerForm from './QuickCreateItemDrawerForm';
/**
* Quick create/edit item drawer content.
*/
export default function QuickCreateItemDrawerContent({ itemName }) {
return (
<React.Fragment>
<DrawerHeaderContent
name="quick-create-item"
title={<T id={'create_a_new_item'} />}
/>
<DrawerBody>
<QuickCreateItemDrawerForm itemName={itemName} />
</DrawerBody>
</React.Fragment>
);
}

86
src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.js Normal file
View File

@@ -0,0 +1,86 @@
import React from 'react';
import * as R from 'ramda';
import styled from 'styled-components';
import { Card, DrawerLoading } from 'components';
import ItemFormFormik from '../../Items/ItemFormFormik';
import {
ItemFormProvider,
useItemFormContext,
} from '../../Items/ItemFormProvider';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import withDashboardActions from '../../Dashboard/withDashboardActions';
import { useDrawerContext } from 'components/Drawer/DrawerProvider';
/**
* Drawer item form loading.
* @returns {JSX}
*/
function DrawerItemFormLoading({ children }) {
const { isFormLoading } = useItemFormContext();
return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
}
/**
* Quick create/edit item drawer form.
*/
function QuickCreateItemDrawerForm({
itemId,
itemName,
closeDrawer,
// #withDashboardActions
addQuickActionEvent,
}) {
// Drawer context.
const { payload } = useDrawerContext();
// Handle the form submit request success.
const handleSubmitSuccess = (values, form, submitPayload, response) => {
if (submitPayload.redirect) {
closeDrawer('quick-create-item');
}
if (payload.quickActionEvent) {
addQuickActionEvent(payload.quickActionEvent, {
itemId: response.data.id,
});
}
};
// Handle the form cancel.
const handleFormCancel = () => {
closeDrawer('quick-create-item');
};
return (
<ItemFormProvider itemId={itemId}>
<DrawerItemFormLoading>
<ItemFormCard>
<ItemFormFormik
initialValues={{ name: itemName }}
onSubmitSuccess={handleSubmitSuccess}
onCancel={handleFormCancel}
/>
</ItemFormCard>
</DrawerItemFormLoading>
</ItemFormProvider>
);
}
export default R.compose(
withDrawerActions,
withDashboardActions,
)(QuickCreateItemDrawerForm);
const ItemFormCard = styled(Card)`
margin: 15px;
margin-bottom: calc(15px + 65px);
.page-form__floating-actions {
margin-left: -36px;
margin-right: -36px;
}
`;

37
src/containers/Drawers/QuickCreateItemDrawer/index.js Normal file
View File

@@ -0,0 +1,37 @@
import React from 'react';
import { Drawer, DrawerSuspense } from 'components';
import withDrawers from 'containers/Drawer/withDrawers';
import { compose } from 'utils';
const QuickCretaeItemDrawerContent = React.lazy(() =>
import('./QuickCreateItemDrawerContent'),
);
/**
* Quick create item.
*/
function QuickCreateItemDrawer({
// #ownProps
name,
// #withDrawer
isOpen,
payload,
}) {
return (
<Drawer
isOpen={isOpen}
name={name}
style={{ minWidth: '800px', maxWidth: '1000px' }}
size={'72%'}
payload={payload}
>
<DrawerSuspense>
<QuickCretaeItemDrawerContent itemName={payload.name} />
</DrawerSuspense>
</Drawer>
);
}
export default compose(withDrawers())(QuickCreateItemDrawer);

85
src/containers/Drawers/QuickWriteVendorDrawer/QuickVendorFormDrawer.js Normal file
View File

@@ -0,0 +1,85 @@
import React from 'react';
import * as R from 'ramda';
import styled from 'styled-components';
import { Card, DrawerLoading } from 'components';
import {
VendorFormProvider,
useVendorFormContext,
} from '../../Vendors/VendorForm/VendorFormProvider';
import VendorFormFormik from '../../Vendors/VendorForm/VendorFormFormik';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import withDashboardActions from '../../Dashboard/withDashboardActions';
import { useDrawerContext } from 'components/Drawer/DrawerProvider';
/**
* Drawer vendor form loading wrapper.
* @returns {JSX}
*/
function DrawerVendorFormLoading({ children }) {
const { isFormLoading } = useVendorFormContext();
return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
}
/**
* Quick vendor form of the drawer.
*/
function QuickVendorFormDrawer({
displayName,
closeDrawer,
vendorId,
addQuickActionEvent,
}) {
const { payload } = useDrawerContext();
// Handle the form submit request success.
const handleSubmitSuccess = (values, form, submitPayload, response) => {
if (!submitPayload.noRedirect) {
closeDrawer('quick-write-vendor');
}
if (payload.quickActionEvent) {
addQuickActionEvent(payload.quickActionEvent, {
vendorId: response.data.id,
});
}
};
// Handle the form cancel action.
const handleCancelForm = () => {
closeDrawer('quick-write-vendor');
};
return (
<VendorFormProvider vendorId={vendorId}>
<DrawerVendorFormLoading>
<VendorFormCard>
<VendorFormFormik
initialValues={{ display_name: displayName }}
onSubmitSuccess={handleSubmitSuccess}
onCancel={handleCancelForm}
/>
</VendorFormCard>
</DrawerVendorFormLoading>
</VendorFormProvider>
);
}
export default R.compose(
withDrawerActions,
withDashboardActions,
)(QuickVendorFormDrawer);
const VendorFormCard = styled(Card)`
margin: 15px;
margin-bottom: calc(15px + 65px);
.page-form {
&__floating-actions {
margin-left: -36px;
margin-right: -36px;
}
}
`;

25
src/containers/Drawers/QuickWriteVendorDrawer/QuickWriteVendorDrawerContent.js Normal file
View File

@@ -0,0 +1,25 @@
import React from 'react';
import {
DrawerHeaderContent,
DrawerBody,
FormattedMessage as T,
} from 'components';
import QuickVendorFormDrawer from './QuickVendorFormDrawer';
/**
* Quick create/edit vendor drawer.
*/
export default function QuickWriteVendorDrawerContent({ displayName }) {
return (
<React.Fragment>
<DrawerHeaderContent
name="quick-create-customer"
title={"Create a new vendor"}
/>
<DrawerBody>
<QuickVendorFormDrawer displayName={displayName} />
</DrawerBody>
</React.Fragment>
);
}

36
src/containers/Drawers/QuickWriteVendorDrawer/index.js Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import * as R from 'ramda';
import { Drawer, DrawerSuspense } from 'components';
import withDrawers from 'containers/Drawer/withDrawers';
const QuickWriteVendorDrawerContent = React.lazy(() =>
import('./QuickWriteVendorDrawerContent'),
);
/**
* Quick Write vendor.
*/
function QuickWriteVendorDrawer({
name,
// #withDrawer
isOpen,
payload,
}) {
return (
<Drawer
isOpen={isOpen}
name={name}
style={{ minWidth: '700px', maxWidth: '900px' }}
size={'80%'}
payload={payload}
>
<DrawerSuspense>
<QuickWriteVendorDrawerContent displayName={payload.displayName} />
</DrawerSuspense>
</Drawer>
);
}
export default R.compose(withDrawers())(QuickWriteVendorDrawer);

5
src/containers/Entries/components.js
View File

@@ -108,7 +108,9 @@ const LandedCostHeaderCell = () => {
/**
* Retrieve editable items entries columns.
*/
export function useEditableItemsEntriesColumns({ landedCost }) {
export function useEditableItemsEntriesColumns({
landedCost,
}) {
return React.useMemo(
() => [
{
@@ -129,6 +131,7 @@ export function useEditableItemsEntriesColumns({ landedCost }) {
disableSortBy: true,
width: 130,
className: 'item',
fieldProps: { allowCreate: true },
},
{
Header: intl.get('description'),

9
src/containers/Entries/utils.js
View File

@@ -164,3 +164,12 @@ export const composeRowsOnNewRow = R.curry((rowIndex, newRow, rows) => {
updateTableRow(rowIndex, newRow),
)(rows);
});
/**
*
* @param {*} entries
* @returns
*/
export const composeControlledEntries = (entries) => {
return R.compose(orderingLinesIndexes, updateItemsEntriesTotal)(entries);
};

8
src/containers/Expenses/ExpenseForm/ExpenseFormHeaderFields.js
View File

@@ -14,7 +14,7 @@ import {
import { customersFieldShouldUpdate, accountsFieldShouldUpdate } from './utils';
import {
CurrencySelectList,
ContactSelecetList,
CustomerSelectField,
AccountsSelectList,
FieldRequiredHint,
Hint,
@@ -78,6 +78,7 @@ export default function ExpenseFormHeader() {
defaultSelectText={<T id={'select_payment_account'} />}
selectedAccountId={value}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.CURRENT_ASSET]}
allowCreate={true}
/>
</FormGroup>
)}
@@ -137,13 +138,14 @@ export default function ExpenseFormHeader() {
helperText={<ErrorMessage name={'assign_to_customer'} />}
inline={true}
>
<ContactSelecetList
contactsList={customers}
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
}}
allowCreate={true}
/>
</FormGroup>
)}

1
src/containers/Expenses/ExpenseForm/components.js
View File

@@ -113,6 +113,7 @@ export function useExpenseFormTableColumns({ landedCost }) {
disableSortBy: true,
width: 40,
filterAccountsByRootTypes: ['expense'],
fieldProps: { allowCreate: true },
},
{
Header: ExpenseAmountHeaderCell,

167
src/containers/Items/ItemForm.js
View File

@@ -1,110 +1,95 @@
import React from 'react';
import { Formik, Form } from 'formik';
import { Intent } from '@blueprintjs/core';
import { useHistory } from 'react-router-dom';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import 'style/pages/Items/PageForm.scss';
import { useDashboardPageTitle } from 'hooks/state';
import { useItemFormContext, ItemFormProvider } from './ItemFormProvider';
import { CLASSES } from 'common/classes';
import AppToaster from 'components/AppToaster';
import ItemFormPrimarySection from './ItemFormPrimarySection';
import ItemFormBody from './ItemFormBody';
import ItemFormFloatingActions from './ItemFormFloatingActions';
import ItemFormInventorySection from './ItemFormInventorySection';
import ItemFormFormik from './ItemFormFormik';
import {
transformSubmitRequestErrors,
useItemFormInitialValues,
} from './utils';
import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';
import { useItemFormContext } from './ItemFormProvider';
import DashboardCard from 'components/Dashboard/DashboardCard';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
/**
* Item form.
* Item form dashboard title.
* @returns {null}
*/
export default function ItemForm() {
// Item form context.
const {
itemId,
item,
accounts,
createItemMutate,
editItemMutate,
submitPayload,
isNewMode,
} = useItemFormContext();
function ItemFormDashboardTitle() {
// Change page title dispatcher.
const changePageTitle = useDashboardPageTitle();
// Item form context.
const { isNewMode } = useItemFormContext();
// Changes the page title in new and edit mode.
React.useEffect(() => {
isNewMode
? changePageTitle(intl.get('new_item'))
: changePageTitle(intl.get('edit_item_details'));
}, [changePageTitle, isNewMode]);
return null;
}
/**
* Item form page loading state indicator.
* @returns {JSX}
*/
function ItemFormPageLoading({ children }) {
const { isFormLoading } = useItemFormContext();
return (
<DashboardItemFormPageInsider loading={isFormLoading} name={'item-form'}>
{children}
</DashboardItemFormPageInsider>
);
}
/**
* Item form of the page.
* @returns {JSX}
*/
export default function ItemForm({ itemId }) {
// History context.
const history = useHistory();
// Initial values in create and edit mode.
const initialValues = useItemFormInitialValues(item);
// Handles the form submit.
const handleFormSubmit = (
values,
{ setSubmitting, resetForm, setErrors },
) => {
setSubmitting(true);
const form = { ...values };
const onSuccess = (response) => {
AppToaster.show({
message: intl.get(
isNewMode
? 'the_item_has_been_created_successfully'
: 'the_item_has_been_edited_successfully',
{
number: itemId,
},
),
intent: Intent.SUCCESS,
});
resetForm();
setSubmitting(false);
// Submit payload.
if (submitPayload.redirect) {
history.push('/items');
}
};
// Handle response error.
const onError = (errors) => {
setSubmitting(false);
if (errors) {
const _errors = transformSubmitRequestErrors(errors);
setErrors({ ..._errors });
}
};
if (isNewMode) {
createItemMutate(form).then(onSuccess).catch(onError);
} else {
editItemMutate([itemId, form]).then(onSuccess).catch(onError);
// Handle the form submit success.
const handleSubmitSuccess = (values, form, submitPayload) => {
if (submitPayload.redirect) {
history.push('/items');
}
};
// Handle cancel button click.
const handleFormCancel = () => {
history.goBack();
};
return (
<div class={classNames(CLASSES.PAGE_FORM_ITEM)}>
<Formik
enableReinitialize={true}
validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<Form>
<div class={classNames(CLASSES.PAGE_FORM_BODY)}>
<ItemFormPrimarySection />
<ItemFormBody accounts={accounts} />
<ItemFormInventorySection accounts={accounts} />
</div>
<ItemFormProvider itemId={itemId}>
<ItemFormDashboardTitle />
<ItemFormFloatingActions />
</Form>
</Formik>
</div>
<ItemFormPageLoading>
<DashboardCard page>
<ItemFormPageFormik
onSubmitSuccess={handleSubmitSuccess}
onCancel={handleFormCancel}
/>
</DashboardCard>
</ItemFormPageLoading>
</ItemFormProvider>
);
}
const DashboardItemFormPageInsider = styled(DashboardInsider)`
padding-bottom: 64px;
`;
const ItemFormPageFormik = styled(ItemFormFormik)`
.page-form {
&__floating-actions {
margin-left: -40px;
margin-right: -40px;
}
}
`;

4
src/containers/Items/ItemFormBody.js
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { useFormikContext, FastField, Field, ErrorMessage } from 'formik';
import { useFormikContext, FastField, ErrorMessage } from 'formik';
import {
FormGroup,
Classes,
@@ -122,6 +122,7 @@ function ItemFormBody({ organization: { base_currency } }) {
disabled={!form.values.sellable}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.INCOME]}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}
@@ -230,6 +231,7 @@ function ItemFormBody({ organization: { base_currency } }) {
disabled={!form.values.purchasable}
filterByParentTypes={[ACCOUNT_PARENT_TYPE.EXPENSE]}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}

23
src/containers/Items/ItemFormFloatingActions.js
View File

@@ -1,20 +1,19 @@
import React from 'react';
import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import { useHistory } from 'react-router-dom';
import classNames from 'classnames';
import styled from 'styled-components';
import { FastField, useFormikContext } from 'formik';
import classNames from 'classnames';
import { FormattedMessage as T } from 'components';
import { CLASSES } from 'common/classes';
import { useItemFormContext } from './ItemFormProvider';
import { saveInvoke } from '../../utils';
/**
* Item form floating actions.
*/
export default function ItemFormFloatingActions() {
// History context.
const history = useHistory();
export default function ItemFormFloatingActions({ onCancel }) {
// Item form context.
const { setSubmitPayload, isNewMode } = useItemFormContext();
@@ -23,7 +22,7 @@ export default function ItemFormFloatingActions() {
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
history.goBack();
saveInvoke(onCancel, event);
};
// Handle submit button click.
@@ -38,7 +37,7 @@ export default function ItemFormFloatingActions() {
return (
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<Button
<SaveButton
intent={Intent.PRIMARY}
disabled={isSubmitting}
loading={isSubmitting}
@@ -47,7 +46,7 @@ export default function ItemFormFloatingActions() {
className={'btn--submit'}
>
{isNewMode ? <T id={'save'} /> : <T id={'edit'} />}
</Button>
</SaveButton>
<Button
className={classNames('ml1', 'btn--submit-new')}
@@ -82,3 +81,7 @@ export default function ItemFormFloatingActions() {
</div>
);
}
const SaveButton = styled(Button)`
min-width: 100px;
`;

112
src/containers/Items/ItemFormFormik.js Normal file
View File

@@ -0,0 +1,112 @@
import React from 'react';
import { Formik, Form } from 'formik';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import 'style/pages/Items/Form.scss';
import { CLASSES } from 'common/classes';
import AppToaster from 'components/AppToaster';
import ItemFormPrimarySection from './ItemFormPrimarySection';
import ItemFormBody from './ItemFormBody';
import ItemFormFloatingActions from './ItemFormFloatingActions';
import ItemFormInventorySection from './ItemFormInventorySection';
import {
transformSubmitRequestErrors,
useItemFormInitialValues,
} from './utils';
import { EditItemFormSchema, CreateItemFormSchema } from './ItemForm.schema';
import { useItemFormContext } from './ItemFormProvider';
import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
/**
* Item form.
*/
export default function ItemFormFormik({
// #ownProps
initialValues: initialValuesComponent,
onSubmitSuccess,
onSubmitError,
onCancel,
className,
}) {
// Item form context.
const {
itemId,
item,
accounts,
createItemMutate,
editItemMutate,
submitPayload,
isNewMode,
} = useItemFormContext();
// Initial values in create and edit mode.
const initialValues = useItemFormInitialValues(item, initialValuesComponent);
// Handles the form submit.
const handleFormSubmit = (values, form) => {
const { setSubmitting, resetForm, setErrors } = form;
const formValues = { ...values };
setSubmitting(true);
// Handle response succes.
const onSuccess = (response) => {
AppToaster.show({
message: intl.get(
isNewMode
? 'the_item_has_been_created_successfully'
: 'the_item_has_been_edited_successfully',
{
number: itemId,
},
),
intent: Intent.SUCCESS,
});
resetForm();
setSubmitting(false);
safeInvoke(onSubmitSuccess, values, form, submitPayload, response);
};
// Handle response error.
const onError = (errors) => {
setSubmitting(false);
if (errors) {
const _errors = transformSubmitRequestErrors(errors);
setErrors({ ..._errors });
}
safeInvoke(onSubmitError, values, form, submitPayload, errors);
};
if (isNewMode) {
createItemMutate(formValues).then(onSuccess).catch(onError);
} else {
editItemMutate([itemId, formValues]).then(onSuccess).catch(onError);
}
};
return (
<div class={classNames(CLASSES.PAGE_FORM_ITEM, className)}>
<Formik
enableReinitialize={true}
validationSchema={isNewMode ? CreateItemFormSchema : EditItemFormSchema}
initialValues={initialValues}
onSubmit={handleFormSubmit}
>
<Form>
<div class={classNames(CLASSES.PAGE_FORM_BODY)}>
<ItemFormPrimarySection />
<ItemFormBody accounts={accounts} />
<ItemFormInventorySection accounts={accounts} />
</div>
<ItemFormFloatingActions onCancel={onCancel} />
</Form>
</Formik>
</div>
);
}

14
src/containers/Items/ItemFormPage.js
View File

@@ -1,9 +1,7 @@
import React from 'react';
import { useParams } from 'react-router-dom';
import { ItemFormProvider } from './ItemFormProvider';
import DashboardCard from 'components/Dashboard/DashboardCard';
import ItemForm from 'containers/Items/ItemForm';
import ItemForm from './ItemForm';
/**
* Item form page.
@@ -12,11 +10,5 @@ export default function ItemFormPage() {
const { id } = useParams();
const idInteger = parseInt(id, 10);
return (
<ItemFormProvider itemId={idInteger}>
<DashboardCard page>
<ItemForm />
</DashboardCard>
</ItemFormProvider>
);
}
return <ItemForm itemId={idInteger} />;
}

36
src/containers/Items/ItemFormProvider.js
View File

@@ -1,8 +1,5 @@
import React, { useEffect, createContext, useState } from 'react';
import intl from 'react-intl-universal';
import React, { createContext, useState } from 'react';
import { useLocation } from 'react-router-dom';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import {
useItem,
useSettingsItems,
@@ -11,7 +8,6 @@ import {
useEditItem,
useAccounts,
} from 'hooks/query';
import { useDashboardPageTitle } from 'hooks/state';
import { useWatchItemError } from './utils';
const ItemFormContext = createContext();
@@ -59,6 +55,13 @@ function ItemFormProvider({ itemId, ...props }) {
// Detarmines whether the form new mode.
const isNewMode = duplicateId || !itemId;
// Detarmines the form loading state.
const isFormLoading =
isItemsSettingsLoading ||
isAccountsLoading ||
isItemsCategoriesLoading ||
isItemLoading;
// Provider state.
const provider = {
itemId,
@@ -68,6 +71,7 @@ function ItemFormProvider({ itemId, ...props }) {
submitPayload,
isNewMode,
isFormLoading,
isAccountsLoading,
isItemsCategoriesLoading,
isItemLoading,
@@ -77,27 +81,7 @@ function ItemFormProvider({ itemId, ...props }) {
setSubmitPayload,
};
// Change page title dispatcher.
const changePageTitle = useDashboardPageTitle();
// Changes the page title in new and edit mode.
useEffect(() => {
isNewMode
? changePageTitle(intl.get('new_item'))
: changePageTitle(intl.get('edit_item_details'));
}, [changePageTitle, isNewMode]);
const loading =
isItemsSettingsLoading ||
isAccountsLoading ||
isItemsCategoriesLoading ||
isItemLoading;
return (
<DashboardInsider loading={loading} name={'item-form'}>
<ItemFormContext.Provider value={provider} {...props} />
</DashboardInsider>
);
return <ItemFormContext.Provider value={provider} {...props} />;
}
const useItemFormContext = () => React.useContext(ItemFormContext);

5
src/containers/Items/utils.js
View File

@@ -33,7 +33,7 @@ const defaultInitialValues = {
/**
* Initial values in create and edit mode.
*/
export const useItemFormInitialValues = (item) => {
export const useItemFormInitialValues = (item, initialValues) => {
const { items: itemsSettings } = useSettingsSelector();
return useMemo(
@@ -54,8 +54,9 @@ export const useItemFormInitialValues = (item) => {
transformItemFormData(item, defaultInitialValues),
defaultInitialValues,
),
...initialValues,
}),
[item, itemsSettings],
[item, itemsSettings, initialValues],
);
};

7
src/containers/Purchases/Bills/BillForm/BillFormHeaderFields.js
View File

@@ -6,7 +6,7 @@ import { FastField, ErrorMessage } from 'formik';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { ContactSelecetList, FieldRequiredHint, Icon } from 'components';
import { VendorSelectField, FieldRequiredHint, Icon } from 'components';
import { vendorsFieldShouldUpdate } from './utils';
import { useBillFormContext } from './BillFormProvider';
@@ -43,14 +43,15 @@ function BillFormHeader() {
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'vendor_id'} />}
>
<ContactSelecetList
contactsList={vendors}
<VendorSelectField
contacts={vendors}
selectedContactId={value}
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('vendor_id', contact.id);
}}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}

7
src/containers/Purchases/PaymentMades/PaymentForm/PaymentMadeFormHeaderFields.js
View File

@@ -15,7 +15,7 @@ import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import {
AccountsSelectList,
ContactSelecetList,
VendorSelectField,
FieldRequiredHint,
InputPrependText,
Money,
@@ -90,8 +90,8 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'vendor_id'} />}
>
<ContactSelecetList
contactsList={vendors}
<VendorSelectField
contacts={vendors}
selectedContactId={value}
defaultSelectText={<T id={'select_vender_account'} />}
onContactSelected={(contact) => {
@@ -100,6 +100,7 @@ function PaymentMadeFormHeaderFields({ organization: { base_currency } }) {
}}
disabled={!isNewMode}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}

7
src/containers/Sales/Estimates/EstimateForm/EstimateFormHeaderFields.js
View File

@@ -19,7 +19,7 @@ import { customersFieldShouldUpdate } from './utils';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import {
ContactSelecetList,
CustomerSelectField,
FieldRequiredHint,
Icon,
InputPrependButton,
@@ -82,8 +82,8 @@ function EstimateFormHeader({
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<ContactSelecetList
contactsList={customers}
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
@@ -91,6 +91,7 @@ function EstimateFormHeader({
}}
popoverFill={true}
intent={inputIntent({ error, touched })}
allowCreate={true}
/>
</FormGroup>
)}

10
src/containers/Sales/Invoices/InvoiceForm/InvoiceFormHeaderFields.js
View File

@@ -10,20 +10,23 @@ import { FastField, Field, ErrorMessage } from 'formik';
import { FormattedMessage as T } from 'components';
import { momentFormatter, compose, tansformDateValue } from 'utils';
import classNames from 'classnames';
import {
useObserveInvoiceNoSettings,
customerNameFieldShouldUpdate,
} from './utils';
import { CLASSES } from 'common/classes';
import {
ContactSelecetList,
CustomerSelectField,
FieldRequiredHint,
Icon,
InputPrependButton,
} from 'components';
import { useInvoiceFormContext } from './InvoiceFormProvider';
import withSettings from 'containers/Settings/withSettings';
import withDialogActions from 'containers/Dialog/withDialogActions';
import { inputIntent, handleDateChange } from 'utils';
/**
@@ -84,14 +87,15 @@ function InvoiceFormHeaderFields({
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<ContactSelecetList
contactsList={customers}
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
form.setFieldValue('customer_id', customer.id);
}}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}

7
src/containers/Sales/PaymentReceives/PaymentReceiveForm/PaymentReceiveHeaderFields.js
View File

@@ -23,7 +23,7 @@ import {
} from 'utils';
import {
AccountsSelectList,
ContactSelecetList,
CustomerSelectField,
FieldRequiredHint,
Icon,
InputPrependButton,
@@ -134,8 +134,8 @@ function PaymentReceiveHeaderFields({
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<ContactSelecetList
contactsList={customers}
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(customer) => {
@@ -147,6 +147,7 @@ function PaymentReceiveHeaderFields({
buttonProps={{
elementRef: (ref) => (customerFieldRef.current = ref),
}}
allowCreate={true}
/>
</FormGroup>
)}

8
src/containers/Sales/Receipts/ReceiptForm/ReceiptFormHeaderFields.js
View File

@@ -12,7 +12,7 @@ import { FastField, ErrorMessage } from 'formik';
import { CLASSES } from 'common/classes';
import {
AccountsSelectList,
ContactSelecetList,
CustomerSelectField,
FieldRequiredHint,
Icon,
InputPrependButton,
@@ -88,14 +88,15 @@ function ReceiptFormHeader({
intent={inputIntent({ error, touched })}
helperText={<ErrorMessage name={'customer_id'} />}
>
<ContactSelecetList
contactsList={customers}
<CustomerSelectField
contacts={customers}
selectedContactId={value}
defaultSelectText={<T id={'select_customer_account'} />}
onContactSelected={(contact) => {
form.setFieldValue('customer_id', contact.id);
}}
popoverFill={true}
allowCreate={true}
/>
</FormGroup>
)}
@@ -129,6 +130,7 @@ function ReceiptFormHeader({
ACCOUNT_TYPE.BANK,
ACCOUNT_TYPE.OTHER_CURRENT_ASSET,
]}
allowCreate={true}
/>
</FormGroup>
)}

27
src/containers/Vendors/VendorForm/VendorFloatingActions.js
View File

@@ -9,42 +9,43 @@ import {
Menu,
MenuItem,
} from '@blueprintjs/core';
import { FormattedMessage as T } from 'components';
import styled from 'styled-components';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { useFormikContext } from 'formik';
import { useHistory } from 'react-router-dom';
import { FormattedMessage as T } from 'components';
import { CLASSES } from 'common/classes';
import { Icon } from 'components';
import { useVendorFormContext } from './VendorFormProvider';
import { safeInvoke } from 'utils';
/**
* Vendor floating actions bar.
*/
export default function VendorFloatingActions() {
export default function VendorFloatingActions({ onCancel }) {
// Formik context.
const { resetForm, isSubmitting, submitForm } = useFormikContext();
// Vendor form context.
const { isNewMode, setSubmitPayload } = useVendorFormContext();
// History.
const history = useHistory();
// Handle the submit button.
const handleSubmitBtnClick = (event) => {
setSubmitPayload({ noRedirect: false, });
setSubmitPayload({ noRedirect: false });
submitForm();
};
// Handle the submit & new button click.
const handleSubmitAndNewClick = (event) => {
submitForm();
setSubmitPayload({ noRedirect: true, });
setSubmitPayload({ noRedirect: true });
};
// Handle cancel button click.
const handleCancelBtnClick = (event) => {
history.goBack();
safeInvoke(onCancel, event);
};
// Handle clear button click.
@@ -56,7 +57,7 @@ export default function VendorFloatingActions() {
<div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
<ButtonGroup>
{/* ----------- Save and New ----------- */}
<Button
<SaveButton
disabled={isSubmitting}
loading={isSubmitting}
intent={Intent.PRIMARY}
@@ -101,3 +102,7 @@ export default function VendorFloatingActions() {
</div>
);
}
const SaveButton = styled(Button)`
min-width: 100px;
`;

90
src/containers/Vendors/VendorForm/VendorForm.js → src/containers/Vendors/VendorForm/VendorFormFormik.js
View File

@@ -1,13 +1,10 @@
import React, { useMemo, useEffect } from 'react';
import React, { useMemo } from 'react';
import { Formik, Form } from 'formik';
import moment from 'moment';
import { Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import classNames from 'classnames';
import { useHistory } from 'react-router-dom';
import { CLASSES } from 'common/classes';
import { FormattedMessage as T } from 'components';
import AppToaster from 'components/AppToaster';
import {
CreateVendorFormSchema,
@@ -19,56 +16,27 @@ import VendorFormAfterPrimarySection from './VendorFormAfterPrimarySection';
import VendorTabs from './VendorsTabs';
import VendorFloatingActions from './VendorFloatingActions';
import withDashboardActions from 'containers/Dashboard/withDashboardActions';
import withCurrentOrganization from 'containers/Organization/withCurrentOrganization';
import { useVendorFormContext } from './VendorFormProvider';
import { compose, transformToForm } from 'utils';
import { compose, transformToForm, safeInvoke } from 'utils';
const defaultInitialValues = {
salutation: '',
first_name: '',
last_name: '',
company_name: '',
display_name: '',
import { defaultInitialValues } from './utils';
email: '',
work_phone: '',
personal_phone: '',
website: '',
note: '',
active: true,
billing_address_country: '',
billing_address_1: '',
billing_address_2: '',
billing_address_city: '',
billing_address_state: '',
billing_address_postcode: '',
billing_address_phone: '',
shipping_address_country: '',
shipping_address_1: '',
shipping_address_2: '',
shipping_address_city: '',
shipping_address_state: '',
shipping_address_postcode: '',
shipping_address_phone: '',
opening_balance: '',
currency_code: '',
opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
};
import 'style/pages/Vendors/Form.scss';
/**
* Vendor form.
*/
function VendorForm({
// #withDashboardActions
changePageTitle,
function VendorFormFormik({
// #withCurrentOrganization
organization: { base_currency },
// #ownProps
onSubmitSuccess,
onSubmitError,
onCancel,
className,
}) {
// Vendor form context.
const {
@@ -82,11 +50,6 @@ function VendorForm({
isNewMode,
} = useVendorFormContext();
// const isNewMode = !vendorId;
// History context.
const history = useHistory();
/**
* Initial values in create and edit mode.
*/
@@ -101,14 +64,13 @@ function VendorForm({
);
// Handles the form submit.
const handleFormSubmit = (
values,
{ setSubmitting, resetForm, setErrors },
) => {
const handleFormSubmit = (values, form) => {
const { setSubmitting, resetForm } = form;
const requestForm = { ...values };
setSubmitting(true);
const onSuccess = () => {
const onSuccess = (response) => {
AppToaster.show({
message: intl.get(
isNewMode
@@ -121,16 +83,15 @@ function VendorForm({
setSubmitting(false);
resetForm();
if (!submitPayload.noRedirect) {
history.push('/vendors');
}
safeInvoke(onSubmitSuccess, values, form, submitPayload, response);
};
const onError = () => {
setSubmitPayload(false);
setSubmitting(false);
};
safeInvoke(onSubmitError, values, form, submitPayload);
};
if (isNewMode) {
createVendorMutate(requestForm).then(onSuccess).catch(onError);
} else {
@@ -139,7 +100,13 @@ function VendorForm({
};
return (
<div className={classNames(CLASSES.PAGE_FORM, CLASSES.PAGE_FORM_VENDOR)}>
<div
className={classNames(
CLASSES.PAGE_FORM,
CLASSES.PAGE_FORM_VENDOR,
className,
)}
>
<Formik
validationSchema={
isNewMode ? CreateVendorFormSchema : EditVendorFormSchema
@@ -160,14 +127,11 @@ function VendorForm({
<VendorTabs vendor={vendorId} />
</div>
<VendorFloatingActions />
<VendorFloatingActions onCancel={onCancel} />
</Form>
</Formik>
</div>
);
}
export default compose(
withDashboardActions,
withCurrentOrganization(),
)(VendorForm);
export default compose(withCurrentOrganization())(VendorFormFormik);

63
src/containers/Vendors/VendorForm/VendorFormPage.js
View File

@@ -1,26 +1,69 @@
import React from 'react';
import { useParams } from 'react-router-dom';
import { useParams, useHistory } from 'react-router-dom';
import styled from 'styled-components';
import 'style/pages/Vendors/PageForm.scss';
import { DashboardCard } from 'components';
import VendorFrom from './VendorForm';
import { DashboardCard, DashboardInsider } from 'components';
import VendorFormFormik from './VendorFormFormik';
import { VendorFormProvider } from './VendorFormProvider';
import { VendorFormProvider, useVendorFormContext } from './VendorFormProvider';
/**
* Vendor form page loading wrapper.
* @returns {JSX}
*/
function VendorFormPageLoading({ children }) {
const { isFormLoading } = useVendorFormContext();
return (
<VendorDashboardInsider loading={isFormLoading}>
{children}
</VendorDashboardInsider>
);
}
/**
* Vendor form page.
*/
function VendorFormPage() {
export default function VendorFormPage() {
const history = useHistory();
const { id } = useParams();
// Handle the form submit success.
const handleSubmitSuccess = (values, formArgs, submitPayload) => {
if (!submitPayload.noRedirect) {
history.push('/vendors');
}
};
// Handle the form cancel button click.
const handleFormCancel = () => {
history.goBack();
};
return (
<VendorFormProvider vendorId={id}>
<DashboardCard page>
<VendorFrom />
</DashboardCard>
<VendorFormPageLoading>
<DashboardCard page>
<VendorFormPageFormik
onSubmitSuccess={handleSubmitSuccess}
onCancel={handleFormCancel}
/>
</DashboardCard>
</VendorFormPageLoading>
</VendorFormProvider>
);
}
export default VendorFormPage;
const VendorFormPageFormik = styled(VendorFormFormik)`
.page-form {
&__floating-actions {
margin-left: -40px;
margin-right: -40px;
}
}
`;
const VendorDashboardInsider = styled(DashboardInsider)`
padding-bottom: 64px;
`;

24
src/containers/Vendors/VendorForm/VendorFormProvider.js
View File

@@ -6,7 +6,6 @@ import {
useVendor,
useContact,
useCurrencies,
useCustomer,
useCreateVendor,
useEditVendor,
} from 'hooks/query';
@@ -30,11 +29,10 @@ function VendorFormProvider({ vendorId, ...props }) {
});
// Handle fetch contact duplicate details.
const {
data: contactDuplicate,
isLoading: isContactLoading,
} = useContact(contactId, { enabled: !!contactId });
const { data: contactDuplicate, isLoading: isContactLoading } = useContact(
contactId,
{ enabled: !!contactId },
);
// Create and edit vendor mutations.
const { mutateAsync: createVendorMutate } = useCreateVendor();
const { mutateAsync: editVendorMutate } = useEditVendor();
@@ -45,27 +43,25 @@ function VendorFormProvider({ vendorId, ...props }) {
// determines whether the form new or duplicate mode.
const isNewMode = contactId || !vendorId;
const isFormLoading =
isVendorLoading || isContactLoading || isCurrenciesLoading;
const provider = {
vendorId,
currencies,
vendor,
contactDuplicate: { ...omit(contactDuplicate, ['opening_balance_at']) },
submitPayload,
isNewMode,
isFormLoading,
createVendorMutate,
editVendorMutate,
setSubmitPayload,
};
return (
<DashboardInsider
loading={isVendorLoading || isContactLoading || isCurrenciesLoading}
name={'vendor-form'}
>
<VendorFormContext.Provider value={provider} {...props} />
</DashboardInsider>
);
return <VendorFormContext.Provider value={provider} {...props} />;
}
const useVendorFormContext = () => React.useContext(VendorFormContext);

36
src/containers/Vendors/VendorForm/utils.js Normal file
View File

@@ -0,0 +1,36 @@
import moment from 'moment';
export const defaultInitialValues = {
salutation: '',
first_name: '',
last_name: '',
company_name: '',
display_name: '',
email: '',
work_phone: '',
personal_phone: '',
website: '',
note: '',
active: true,
billing_address_country: '',
billing_address_1: '',
billing_address_2: '',
billing_address_city: '',
billing_address_state: '',
billing_address_postcode: '',
billing_address_phone: '',
shipping_address_country: '',
shipping_address_1: '',
shipping_address_2: '',
shipping_address_city: '',
shipping_address_state: '',
shipping_address_postcode: '',
shipping_address_phone: '',
opening_balance: '',
currency_code: '',
opening_balance_at: moment(new Date()).format('YYYY-MM-DD'),
};