QT/bigcapital
1
0
Fork 0
mirror of https://github.com/bigcapitalhq/bigcapital.git synced 2026-02-15 20:30:33 +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

4
src/common/drawers.js
View File

@@ -10,4 +10,8 @@ export const DRAWERS = {
BILL_DRAWER: 'bill-drawer',
INVENTORY_ADJUSTMENT_DRAWER: 'inventory-adjustment-drawer',
CASHFLOW_TRNASACTION_DRAWER: 'cashflow-transaction-drawer',
QUICK_WRITE_VENDOR: 'quick-write-vendor',
QUICK_CREATE_CUSTOMER: 'quick-create-customer',
QUICK_CREATE_ITEM: 'quick-create-item',
};

87
src/components/AccountsSelectList.js
View File

@@ -1,13 +1,55 @@
import React, { useCallback, useState, useEffect, useMemo } from 'react';
import { MenuItem, Button } from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import { MenuItemNestedText, FormattedMessage as T } from 'components';
import * as R from 'ramda';
import classNames from 'classnames';
import { MenuItemNestedText, FormattedMessage as T } from 'components';
import { filterAccountsByQuery } from './utils';
import { nestedArrayToflatten } from 'utils';
import { CLASSES } from 'common/classes';
export default function AccountsSelectList({
import withDialogActions from 'containers/Dialog/withDialogActions';
// Create new account renderer.
const createNewItemRenderer = (query, active, handleClick) => {
return (
<MenuItem
icon="add"
text={`Create "${query}"`}
active={active}
onClick={handleClick}
/>
);
};
// Create new item from the given query string.
const createNewItemFromQuery = (name) => {
return {
name,
};
};
// Filters accounts items.
const filterAccountsPredicater = (query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
}
};
/**
* Accounts select list.
*/
function AccountsSelectList({
// #withDialogActions
openDialog,
// #ownProps
accounts,
initialAccountId,
selectedAccountId,
@@ -21,6 +63,8 @@ export default function AccountsSelectList({
filterByNormal,
filterByRootTypes,
allowCreate,
buttonProps = {},
}) {
const flattenAccounts = useMemo(
@@ -51,6 +95,7 @@ export default function AccountsSelectList({
[initialAccountId, filteredAccounts],
);
// Select account item.
const [selectedAccount, setSelectedAccount] = useState(
initialAccount || null,
);
@@ -76,31 +121,25 @@ export default function AccountsSelectList({
);
}, []);
const onAccountSelect = useCallback(
// Handle the account item select.
const handleAccountSelect = useCallback(
(account) => {
setSelectedAccount({ ...account });
onAccountSelected && onAccountSelected(account);
},
[setSelectedAccount, onAccountSelected],
);
// Filters accounts items.
const filterAccountsPredicater = useCallback(
(query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
if (account.id) {
setSelectedAccount({ ...account });
onAccountSelected && onAccountSelected(account);
} else {
return (
`${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
);
openDialog('account-form');
}
},
[],
[setSelectedAccount, onAccountSelected, openDialog],
);
// Maybe inject new item props to select component.
const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
const maybeCreateNewItemFromQuery = allowCreate
? createNewItemFromQuery
: null;
return (
<Select
items={filteredAccounts}
@@ -113,11 +152,13 @@ export default function AccountsSelectList({
inline: popoverFill,
}}
filterable={true}
onItemSelect={onAccountSelect}
onItemSelect={handleAccountSelect}
disabled={disabled}
className={classNames('form-group--select-list', {
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
})}
createNewItemRenderer={maybeCreateNewItemRenderer}
createNewItemFromQuery={maybeCreateNewItemFromQuery}
>
<Button
disabled={disabled}
@@ -127,3 +168,5 @@ export default function AccountsSelectList({
</Select>
);
}
export default R.compose(withDialogActions)(AccountsSelectList);

98
src/components/AccountsSuggestField.js
View File

@@ -2,6 +2,7 @@ import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { MenuItem } from '@blueprintjs/core';
import { Suggest } from '@blueprintjs/select';
import intl from 'react-intl-universal';
import * as R from 'ramda';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
@@ -10,10 +11,55 @@ import { MenuItemNestedText, FormattedMessage as T } from 'components';
import { filterAccountsByQuery } from './utils';
import { nestedArrayToflatten } from 'utils';
import withDialogActions from 'containers/Dialog/withDialogActions';
// Create new account renderer.
const createNewItemRenderer = (query, active, handleClick) => {
return (
<MenuItem
icon="add"
text={`Create "${query}"`}
active={active}
onClick={handleClick}
/>
);
};
// Create new item from the given query string.
const createNewItemFromQuery = (name) => {
return {
name,
};
};
// Handle input value renderer.
const handleInputValueRenderer = (inputValue) => {
if (inputValue) {
return inputValue.name.toString();
}
return '';
};
// Filters accounts items.
const filterAccountsPredicater = (query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
}
};
/**
* Accounts suggest field.
*/
export default function AccountsSuggestField({
function AccountsSuggestField({
// #withDialogActions
openDialog,
// #ownProps
accounts,
initialAccountId,
selectedAccountId,
@@ -26,6 +72,8 @@ export default function AccountsSuggestField({
filterByNormal,
filterByRootTypes = [],
allowCreate,
...suggestProps
}) {
const flattenAccounts = useMemo(
@@ -69,23 +117,6 @@ export default function AccountsSuggestField({
}
}, [selectedAccountId, filteredAccounts, setSelectedAccount]);
// Filters accounts items.
const filterAccountsPredicater = useCallback(
(query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return (
`${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
);
}
},
[],
);
// Account item of select accounts field.
const accountItem = useCallback((item, { handleClick, modifiers, query }) => {
return (
@@ -98,28 +129,31 @@ export default function AccountsSuggestField({
);
}, []);
const handleInputValueRenderer = (inputValue) => {
if (inputValue) {
return inputValue.name.toString();
}
return '';
};
const onAccountSelect = useCallback(
const handleAccountSelect = useCallback(
(account) => {
setSelectedAccount({ ...account });
onAccountSelected && onAccountSelected(account);
if (account.id) {
setSelectedAccount({ ...account });
onAccountSelected && onAccountSelected(account);
} else {
openDialog('account-form');
}
},
[setSelectedAccount, onAccountSelected],
[setSelectedAccount, onAccountSelected, openDialog],
);
// Maybe inject new item props to select component.
const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
const maybeCreateNewItemFromQuery = allowCreate
? createNewItemFromQuery
: null;
return (
<Suggest
items={filteredAccounts}
noResults={<MenuItem disabled={true} text={<T id={'no_accounts'} />} />}
itemRenderer={accountItem}
itemPredicate={filterAccountsPredicater}
onItemSelect={onAccountSelect}
onItemSelect={handleAccountSelect}
selectedItem={selectedAccount}
inputProps={{ placeholder: defaultSelectText }}
resetOnClose={true}
@@ -129,7 +163,11 @@ export default function AccountsSuggestField({
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
})}
createNewItemRenderer={maybeCreateNewItemRenderer}
createNewItemFromQuery={maybeCreateNewItemFromQuery}
{...suggestProps}
/>
);
}
export default R.compose(withDialogActions)(AccountsSuggestField);

11
src/components/ContactSelecetList.js
View File

@@ -11,12 +11,14 @@ export default function ContactSelecetList({
contactsList,
initialContactId,
selectedContactId,
selectedContactType,
createNewItemFrom,
defaultSelectText = <T id={'select_contact'} />,
onContactSelected,
popoverFill = false,
disabled = false,
buttonProps,
...restProps
}) {
const contacts = useMemo(
() =>
@@ -65,7 +67,7 @@ export default function ContactSelecetList({
);
// Filter Contact List
const filterContacts = (query, contact, index, exactMatch) => {
const itemPredicate = (query, contact, index, exactMatch) => {
const normalizedTitle = contact.display_name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
@@ -83,7 +85,7 @@ export default function ContactSelecetList({
items={contacts}
noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
itemRenderer={handleContactRenderer}
itemPredicate={filterContacts}
itemPredicate={itemPredicate}
filterable={true}
disabled={disabled}
onItemSelect={onContactSelect}
@@ -92,8 +94,9 @@ export default function ContactSelecetList({
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
})}
inputProps={{
placeholder: intl.get('filter_')
placeholder: intl.get('filter_'),
}}
{...restProps}
>
<Button
disabled={disabled}

86
src/components/Contacts/ContactSelectField.js Normal file
View File

@@ -0,0 +1,86 @@
import React, { useCallback, useState, useEffect, useMemo } from 'react';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import { MenuItem, Button } from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { itemPredicate, handleContactRenderer } from './utils';
export default function ContactSelectField({
contacts,
initialContactId,
selectedContactId,
defaultSelectText = <T id={'select_contact'} />,
onContactSelected,
popoverFill = false,
disabled = false,
buttonProps,
...restProps
}) {
const localContacts = useMemo(
() =>
contacts.map((contact) => ({
...contact,
_id: `${contact.id}_${contact.contact_type}`,
})),
[contacts],
);
const initialContact = useMemo(
() => contacts.find((a) => a.id === initialContactId),
[initialContactId, contacts],
);
const [selecetedContact, setSelectedContact] = useState(
initialContact || null,
);
useEffect(() => {
if (typeof selectedContactId !== 'undefined') {
const account = selectedContactId
? contacts.find((a) => a.id === selectedContactId)
: null;
setSelectedContact(account);
}
}, [selectedContactId, contacts, setSelectedContact]);
const handleContactSelect = useCallback(
(contact) => {
setSelectedContact({ ...contact });
onContactSelected && onContactSelected(contact);
},
[setSelectedContact, onContactSelected],
);
return (
<Select
items={localContacts}
noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
itemRenderer={handleContactRenderer}
itemPredicate={itemPredicate}
filterable={true}
disabled={disabled}
onItemSelect={handleContactSelect}
popoverProps={{ minimal: true, usePortal: !popoverFill }}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
})}
inputProps={{
placeholder: intl.get('filter_'),
}}
{...restProps}
>
<Button
disabled={disabled}
text={
selecetedContact ? selecetedContact.display_name : defaultSelectText
}
{...buttonProps}
/>
</Select>
);
}

116
src/components/Contacts/CustomerSelectField.js Normal file
View File

@@ -0,0 +1,116 @@
import React, { useCallback, useState, useEffect, useMemo } from 'react';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import * as R from 'ramda';
import { MenuItem, Button } from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import {
itemPredicate,
handleContactRenderer,
createNewItemRenderer,
createNewItemFromQuery,
} from './utils';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { DRAWERS } from 'common/drawers';
function CustomerSelectField({
// #withDrawerActions
openDrawer,
// #ownProps
contacts,
initialContactId,
selectedContactId,
defaultSelectText = <T id={'select_contact'} />,
onContactSelected,
popoverFill = false,
disabled = false,
allowCreate,
buttonProps,
...restProps
}) {
const localContacts = useMemo(
() =>
contacts.map((contact) => ({
...contact,
_id: `${contact.id}_${contact.contact_type}`,
})),
[contacts],
);
const initialContact = useMemo(
() => contacts.find((a) => a.id === initialContactId),
[initialContactId, contacts],
);
const [selecetedContact, setSelectedContact] = useState(
initialContact || null,
);
useEffect(() => {
if (typeof selectedContactId !== 'undefined') {
const account = selectedContactId
? contacts.find((a) => a.id === selectedContactId)
: null;
setSelectedContact(account);
}
}, [selectedContactId, contacts, setSelectedContact]);
const handleContactSelect = useCallback(
(contact) => {
if (contact.id) {
setSelectedContact({ ...contact });
onContactSelected && onContactSelected(contact);
} else {
openDrawer(DRAWERS.QUICK_CREATE_CUSTOMER);
}
},
[setSelectedContact, onContactSelected, openDrawer],
);
// Maybe inject create new item props to suggest component.
const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
const maybeCreateNewItemFromQuery = allowCreate
? createNewItemFromQuery
: null;
return (
<Select
items={localContacts}
noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
itemRenderer={handleContactRenderer}
itemPredicate={itemPredicate}
filterable={true}
disabled={disabled}
onItemSelect={handleContactSelect}
popoverProps={{ minimal: true, usePortal: !popoverFill }}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
})}
inputProps={{
placeholder: intl.get('filter_'),
}}
createNewItemRenderer={maybeCreateNewItemRenderer}
createNewItemFromQuery={maybeCreateNewItemFromQuery}
createNewItemPosition={'top'}
{...restProps}
>
<Button
disabled={disabled}
text={
selecetedContact ? selecetedContact.display_name : defaultSelectText
}
{...buttonProps}
/>
</Select>
);
}
export default R.compose(withDrawerActions)(CustomerSelectField);

115
src/components/Contacts/VendorSelectField.js Normal file
View File

@@ -0,0 +1,115 @@
import React, { useCallback, useState, useEffect, useMemo } from 'react';
import { FormattedMessage as T } from 'components';
import intl from 'react-intl-universal';
import * as R from 'ramda';
import { MenuItem, Button } from '@blueprintjs/core';
import { Select } from '@blueprintjs/select';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import {
itemPredicate,
handleContactRenderer,
createNewItemFromQuery,
createNewItemRenderer,
} from './utils';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { DRAWERS } from 'common/drawers';
function VendorSelectField({
// #withDrawerActions
openDrawer,
// #ownProps
contacts,
initialContactId,
selectedContactId,
defaultSelectText = <T id={'select_contact'} />,
onContactSelected,
popoverFill = false,
disabled = false,
allowCreate,
buttonProps,
...restProps
}) {
const localContacts = useMemo(
() =>
contacts.map((contact) => ({
...contact,
_id: `${contact.id}_${contact.contact_type}`,
})),
[contacts],
);
const initialContact = useMemo(
() => contacts.find((a) => a.id === initialContactId),
[initialContactId, contacts],
);
const [selecetedContact, setSelectedContact] = useState(
initialContact || null,
);
useEffect(() => {
if (typeof selectedContactId !== 'undefined') {
const account = selectedContactId
? contacts.find((a) => a.id === selectedContactId)
: null;
setSelectedContact(account);
}
}, [selectedContactId, contacts, setSelectedContact]);
const handleContactSelect = useCallback(
(contact) => {
if (contact.id) {
setSelectedContact({ ...contact });
onContactSelected && onContactSelected(contact);
} else {
openDrawer(DRAWERS.QUICK_WRITE_VENDOR);
}
},
[setSelectedContact, onContactSelected, openDrawer],
);
// Maybe inject create new item props to suggest component.
const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
const maybeCreateNewItemFromQuery = allowCreate
? createNewItemFromQuery
: null;
return (
<Select
items={localContacts}
noResults={<MenuItem disabled={true} text={<T id={'no_results'} />} />}
itemRenderer={handleContactRenderer}
itemPredicate={itemPredicate}
filterable={true}
disabled={disabled}
onItemSelect={handleContactSelect}
popoverProps={{ minimal: true, usePortal: !popoverFill }}
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
})}
inputProps={{
placeholder: intl.get('filter_'),
}}
createNewItemRenderer={maybeCreateNewItemRenderer}
createNewItemFromQuery={maybeCreateNewItemFromQuery}
createNewItemPosition={'top'}
{...restProps}
>
<Button
disabled={disabled}
text={
selecetedContact ? selecetedContact.display_name : defaultSelectText
}
{...buttonProps}
/>
</Select>
);
}
export default R.compose(withDrawerActions)(VendorSelectField);

5
src/components/Contacts/index.js Normal file
View File

@@ -0,0 +1,5 @@
import ContactSelectField from './ContactSelectField';
import CustomerSelectField from './CustomerSelectField';
import VendorSelectField from './VendorSelectField';
export { ContactSelectField, CustomerSelectField, VendorSelectField };

43
src/components/Contacts/utils.js Normal file
View File

@@ -0,0 +1,43 @@
import React from 'react';
import { MenuItem } from '@blueprintjs/core';
// Filter Contact List
export const itemPredicate = (query, contact, index, exactMatch) => {
const normalizedTitle = contact.display_name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return (
`${contact.display_name} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0
);
}
};
export const handleContactRenderer = (contact, { handleClick }) => (
<MenuItem
key={contact.id}
text={contact.display_name}
onClick={handleClick}
/>
);
// Creates a new item from query.
export const createNewItemFromQuery = (name) => {
return {
name,
};
};
// Handle quick create new customer.
export const createNewItemRenderer = (query, active, handleClick) => {
return (
<MenuItem
icon="add"
text={`Create "${query}"`}
active={active}
shouldDismissPopover={false}
onClick={handleClick}
/>
);
};

2
src/components/Dashboard/DashboardContent.js
View File

@@ -2,7 +2,6 @@ import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
import DashboardContentRoutes from 'components/Dashboard/DashboardContentRoute';
import DashboardFooter from 'components/Dashboard/DashboardFooter';
import DashboardErrorBoundary from './DashboardErrorBoundary';
export default React.forwardRef(({}, ref) => {
@@ -11,7 +10,6 @@ export default React.forwardRef(({}, ref) => {
<div className="dashboard-content" id="dashboard" ref={ref}>
<DashboardTopbar />
<DashboardContentRoutes />
<DashboardFooter />
</div>
</ErrorBoundary>
);

4
src/components/DataTableCells/AccountsListFieldCell.js
View File

@@ -17,6 +17,8 @@ export default function AccountCellRenderer({
accountsDataProp,
filterAccountsByRootTypes,
filterAccountsByTypes,
fieldProps,
formGroupProps,
},
row: { index, original },
cell: { value: initialValue },
@@ -53,6 +55,7 @@ export default function AccountCellRenderer({
'form-group--account',
Classes.FILL,
)}
{...formGroupProps}
>
<AccountsSuggestField
accounts={accounts}
@@ -66,6 +69,7 @@ export default function AccountCellRenderer({
}}
openOnKeyDown={true}
blurOnSelectClose={false}
{...fieldProps}
/>
</FormGroup>
);

13
src/components/DataTableCells/ItemsListCell.js
View File

@@ -1,15 +1,17 @@
import React, { useCallback, useRef } from 'react';
// import ItemsListField from 'components/ItemsListField';
import ItemsSuggestField from 'components/ItemsSuggestField';
import classNames from 'classnames';
import { FormGroup, Classes, Intent } from '@blueprintjs/core';
import intl from 'react-intl-universal';
import ItemsSuggestField from 'components/ItemsSuggestField';
import { useCellAutoFocus } from 'hooks';
/**
* Items list cell.
*/
export default function ItemsListCell({
column: { id, filterSellable, filterPurchasable },
column: { id, filterSellable, filterPurchasable, fieldProps, formGroupProps },
row: { index },
cell: { value: initialValue },
payload: { items, updateData, errors, autoFocus },
@@ -19,6 +21,7 @@ export default function ItemsListCell({
// Auto-focus the items list input field.
useCellAutoFocus(fieldRef, autoFocus, id, index);
// Handle the item selected.
const handleItemSelected = useCallback(
(item) => {
updateData(index, id, item.id);
@@ -32,6 +35,7 @@ export default function ItemsListCell({
<FormGroup
intent={error ? Intent.DANGER : null}
className={classNames('form-group--select-list', Classes.FILL)}
{...formGroupProps}
>
<ItemsSuggestField
items={items}
@@ -45,6 +49,7 @@ export default function ItemsListCell({
}}
openOnKeyDown={true}
blurOnSelectClose={false}
{...fieldProps}
/>
</FormGroup>
);

3
src/components/Drawer/Drawer.js
View File

@@ -3,6 +3,7 @@ import { Position, Drawer } from '@blueprintjs/core';
import 'style/components/Drawer.scss';
import { DrawerProvider } from './DrawerProvider';
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { compose } from 'utils';
@@ -27,7 +28,7 @@ function DrawerComponent(props) {
portalClassName={'drawer-portal'}
{...props}
>
{children}
<DrawerProvider {...props}>{children}</DrawerProvider>
</Drawer>
);
}

16
src/components/Drawer/DrawerProvider.js Normal file
View File

@@ -0,0 +1,16 @@
import React, { createContext, useContext } from 'react';
const DrawerContext = createContext();
/**
* Account form provider.
*/
function DrawerProvider({ ...props }) {
const provider = { ...props };
return <DrawerContext.Provider value={provider} {...props} />;
}
const useDrawerContext = () => useContext(DrawerContext);
export { DrawerProvider, useDrawerContext };

10
src/components/DrawersContainer.js
View File

@@ -14,6 +14,9 @@ import CustomerDetailsDrawer from '../containers/Drawers/CustomerDetailsDrawer';
import VendorDetailsDrawer from '../containers/Drawers/VendorDetailsDrawer';
import InventoryAdjustmentDetailDrawer from '../containers/Drawers/InventoryAdjustmentDetailDrawer';
import CashflowTransactionDetailDrawer from '../containers/Drawers/CashflowTransactionDetailDrawer';
import QuickCreateCustomerDrawer from '../containers/Drawers/QuickCreateCustomerDrawer';
import QuickCreateItemDrawer from '../containers/Drawers/QuickCreateItemDrawer';
import QuickWriteVendorDrawer from '../containers/Drawers/QuickWriteVendorDrawer';
import { DRAWERS } from 'common/drawers';
@@ -38,7 +41,12 @@ export default function DrawersContainer() {
<InventoryAdjustmentDetailDrawer
name={DRAWERS.INVENTORY_ADJUSTMENT_DRAWER}
/>
<CashflowTransactionDetailDrawer name={DRAWERS.CASHFLOW_TRNASACTION_DRAWER} />
<CashflowTransactionDetailDrawer
name={DRAWERS.CASHFLOW_TRNASACTION_DRAWER}
/>
<QuickCreateCustomerDrawer name={DRAWERS.QUICK_CREATE_CUSTOMER} />
<QuickCreateItemDrawer name={DRAWERS.QUICK_CREATE_ITEM} />
<QuickWriteVendorDrawer name={DRAWERS.QUICK_WRITE_VENDOR} />
</div>
);
}

118
src/components/ItemsSuggestField.js
View File

@@ -1,13 +1,68 @@
import React, { useState, useCallback, useEffect, useMemo } from 'react';
import { MenuItem } from '@blueprintjs/core';
import classNames from 'classnames';
import { CLASSES } from 'common/classes';
import { Suggest } from '@blueprintjs/select';
import classNames from 'classnames';
import * as R from 'ramda';
import { CLASSES } from 'common/classes';
import { FormattedMessage as T } from 'components';
export default function ItemsSuggestField({
import withDrawerActions from 'containers/Drawer/withDrawerActions';
import { DRAWERS } from 'common/drawers';
// Creates a new item from query.
const createNewItemFromQuery = (name) => {
return {
name,
};
};
// Handle quick create new customer.
const createNewItemRenderer = (query, active, handleClick) => {
return (
<MenuItem
icon="add"
text={`Create "${query}"`}
active={active}
shouldDismissPopover={false}
onClick={handleClick}
/>
);
};
// Item renderer.
const itemRenderer = (item, { modifiers, handleClick }) => (
<MenuItem
key={item.id}
text={item.name}
label={item.code}
onClick={handleClick}
/>
);
// Filters items.
const filterItemsPredicater = (query, item, _index, exactMatch) => {
const normalizedTitle = item.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
}
};
// Handle input value renderer.
const handleInputValueRenderer = (inputValue) => {
if (inputValue) {
return inputValue.name.toString();
}
return '';
};
function ItemsSuggestField({
items,
initialItemId,
selectedItemId,
@@ -18,6 +73,10 @@ export default function ItemsSuggestField({
sellable = false,
purchasable = false,
popoverFill = false,
allowCreate = true,
openDrawer,
...suggestProps
}) {
// Filters items based on filter props.
@@ -36,28 +95,23 @@ export default function ItemsSuggestField({
// Find initial item object.
const initialItem = useMemo(
() => filteredItems.some((a) => a.id === initialItemId),
[initialItemId],
[initialItemId, filteredItems],
);
const [selectedItem, setSelectedItem] = useState(initialItem || null);
const onItemSelect = useCallback(
(item) => {
setSelectedItem({ ...item });
onItemSelected && onItemSelected(item);
if (item.id) {
setSelectedItem({ ...item });
onItemSelected && onItemSelected(item);
} else {
openDrawer(DRAWERS.QUICK_CREATE_ITEM);
}
},
[setSelectedItem, onItemSelected],
[setSelectedItem, onItemSelected, openDrawer],
);
const itemRenderer = useCallback((item, { modifiers, handleClick }) => (
<MenuItem
key={item.id}
text={item.name}
label={item.code}
onClick={handleClick}
/>
));
useEffect(() => {
if (typeof selectedItemId !== 'undefined') {
const item = selectedItemId
@@ -67,27 +121,12 @@ export default function ItemsSuggestField({
}
}, [selectedItemId, filteredItems, setSelectedItem]);
const handleInputValueRenderer = (inputValue) => {
if (inputValue) {
return inputValue.name.toString();
}
return '';
};
// Maybe inject create new item props to suggest component.
const maybeCreateNewItemRenderer = allowCreate ? createNewItemRenderer : null;
const maybeCreateNewItemFromQuery = allowCreate
? createNewItemFromQuery
: null;
// Filters items.
const filterItemsPredicater = useCallback(
(query, item, _index, exactMatch) => {
const normalizedTitle = item.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${normalizedTitle} ${item.code}`.indexOf(normalizedQuery) >= 0;
}
},
[],
);
return (
<Suggest
items={filteredItems}
@@ -104,7 +143,12 @@ export default function ItemsSuggestField({
className={classNames(CLASSES.FORM_GROUP_LIST_SELECT, {
[CLASSES.SELECT_LIST_FILL_POPOVER]: popoverFill,
})}
createNewItemRenderer={maybeCreateNewItemRenderer}
createNewItemFromQuery={maybeCreateNewItemFromQuery}
createNewItemPosition={'top'}
{...suggestProps}
/>
);
}
export default R.compose(withDrawerActions)(ItemsSuggestField);

1
src/components/index.js
View File

@@ -86,6 +86,7 @@ export * from './Datatable/CellForceWidth';
export * from './Button';
export * from './IntersectionObserver';
export * from './SMSPreview';
export * from './Contacts';
const Hint = FieldHint;

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'),
};

157
src/style/pages/Customers/Form.scss Normal file
View File

@@ -0,0 +1,157 @@
@import '../../Base.scss';
.page-form--customer {
$self: '.page-form';
padding: 20px;
#{$self}__header {
padding: 0;
}
#{$self}__primary-section {
padding: 10px 0 0;
margin: 0 0 20px;
overflow: hidden;
border-bottom: 1px solid #e4e4e4;
max-width: 1000px;
}
.bp3-form-group {
max-width: 500px;
.bp3-control {
margin-top: 8px;
margin-bottom: 8px;
}
&.bp3-inline {
.bp3-label {
min-width: 150px;
}
}
.bp3-form-content {
width: 100%;
}
}
.form-group--contact_name {
max-width: 600px;
.bp3-control-group > * {
flex-shrink: unset;
&:not(:last-child) {
padding-right: 10px;
}
&.input-group--salutation-list {
width: 25%;
}
&.input-group--first-name,
&.input-group--last-name {
width: 37%;
}
}
}
.bp3-form-group {
margin-bottom: 14px;
}
.bp3-tab-panel {
margin-top: 26px;
}
.form-group--phone-number {
.bp3-control-group > * {
flex-shrink: unset;
padding-right: 5px;
padding-left: 5px;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
#{$self}__tabs {
margin-top: 20px;
max-width: 1000px;
h4 {
font-weight: 500;
color: #888;
margin-bottom: 1.2rem;
font-size: 14px;
}
// Tab panels.
.tab-panel {
&--address {
.bp3-form-group {
max-width: 440px;
&.bp3-inline {
.bp3-label {
min-width: 145px;
}
}
.bp3-form-content {
width: 100%;
}
textarea.bp3-input {
max-width: 100%;
width: 100%;
min-height: 50px;
}
}
}
&--note {
.form-group--note {
.bp3-form-group {
max-width: 600px;
}
textarea {
width: 100%;
min-height: 100px;
}
}
}
}
.dropzone-container {
max-width: 600px;
}
}
.bp3-tabs {
.bp3-tab-list {
position: relative;
&:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 2px;
background: #f0f0f0;
}
> *:not(:last-child) {
margin-right: 25px;
}
&.bp3-large > .bp3-tab {
font-size: 15px;
color: #555;
&[aria-selected='true'],
&:not([aria-disabled='true']):hover {
color: $pt-link-color;
}
}
}
}
}

20
src/style/pages/Items/PageForm.scss → src/style/pages/Items/Form.scss
View File

@@ -1,16 +1,4 @@
body.page-item-new,
body.page-item-edit{
.dashboard__footer{
display: none;
}
}
.dashboard__insider--item-form{
padding-bottom: 64px;
}
.page-form--item {
$self: '.page-form';
padding: 20px;
@@ -85,18 +73,14 @@ body.page-item-edit{
}
#{$self}__floating-actions {
margin-left: -40px;
margin-right: -40px;
// margin-left: -40px;
// margin-right: -40px;
.form-group--active {
display: inline-block;
margin: 0;
margin-left: 40px;
}
.btn--submit{
min-width: 65px;
}
}
.bp3-tooltip-indicator {

9
src/style/pages/SaleInvoice/PageForm.scss
View File

@@ -1,13 +1,11 @@
body.page-invoice-new,
body.page-invoice-edit{
.dashboard__footer{
body.page-invoice-edit {
.dashboard__footer {
display: none;
}
}
.dashboard__insider--invoice-form{
.dashboard__insider--invoice-form {
padding-bottom: 64px;
}
@@ -29,7 +27,6 @@ body.page-invoice-edit{
}
.bp3-form-group {
&.bp3-inline {
max-width: 450px;
}

19
src/style/pages/Customers/PageForm.scss → src/style/pages/Vendors/Form.scss
View File

@@ -1,19 +1,6 @@
@import '../../Base.scss';
body.page-customer-new,
body.page-customer-edit{
.dashboard__footer{
display: none;
}
}
.dashboard__insider--customer-form{
padding-bottom: 64px;
}
.page-form--customer {
.page-form--vendor {
$self: '.page-form';
padding: 20px;
@@ -169,7 +156,7 @@ body.page-customer-edit{
}
#{$self}__floating-actions {
margin-left: -40px;
margin-right: -40px;
// margin-left: -40px;
// margin-right: -40px;
}
}

164
src/style/pages/Vendors/PageForm.scss
View File

@@ -10,166 +10,4 @@ body.page-vendor-edit{
.dashboard__insider--vendor-form{
padding-bottom: 64px;
}
.page-form--vendor {
$self: '.page-form';
padding: 20px;
#{$self}__header {
padding: 0;
}
#{$self}__primary-section {
padding: 10px 0 0;
margin: 0 0 20px;
overflow: hidden;
border-bottom: 1px solid #e4e4e4;
max-width: 1000px;
}
.bp3-form-group {
max-width: 500px;
.bp3-control {
margin-top: 8px;
margin-bottom: 8px;
}
&.bp3-inline {
.bp3-label {
min-width: 150px;
}
}
.bp3-form-content {
width: 100%;
}
}
.form-group--contact_name {
max-width: 600px;
.bp3-control-group > * {
flex-shrink: unset;
&:not(:last-child) {
padding-right: 10px;
}
&.input-group--salutation-list {
width: 25%;
}
&.input-group--first-name,
&.input-group--last-name {
width: 37%;
}
}
}
.bp3-form-group {
margin-bottom: 14px;
}
.bp3-tab-panel {
margin-top: 26px;
}
.form-group--phone-number {
.bp3-control-group > * {
flex-shrink: unset;
padding-right: 5px;
padding-left: 5px;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
#{$self}__tabs {
margin-top: 20px;
max-width: 1000px;
h4 {
font-weight: 500;
color: #888;
margin-bottom: 1.2rem;
font-size: 14px;
}
// Tab panels.
.tab-panel {
&--address {
.bp3-form-group {
max-width: 440px;
&.bp3-inline {
.bp3-label {
min-width: 145px;
}
}
.bp3-form-content {
width: 100%;
}
textarea.bp3-input {
max-width: 100%;
width: 100%;
min-height: 50px;
}
}
}
&--note {
.form-group--note {
.bp3-form-group {
max-width: 600px;
}
textarea {
width: 100%;
min-height: 100px;
}
}
}
}
.dropzone-container {
max-width: 600px;
}
}
.bp3-tabs {
.bp3-tab-list {
position: relative;
&:before {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 2px;
background: #f0f0f0;
}
> *:not(:last-child) {
margin-right: 25px;
}
&.bp3-large > .bp3-tab {
font-size: 15px;
color: #555;
&[aria-selected='true'],
&:not([aria-disabled='true']):hover {
color: $pt-link-color;
}
}
}
}
#{$self}__floating-actions {
margin-left: -40px;
margin-right: -40px;
}
}
}