diff --git a/client/src/components/ListSelect.js b/client/src/components/ListSelect.js new file mode 100644 index 000000000..b0b735251 --- /dev/null +++ b/client/src/components/ListSelect.js @@ -0,0 +1,35 @@ +import React, { useState, useEffect } from 'react'; +import { + Button, +} from '@blueprintjs/core'; +import { Select } from '@blueprintjs/select'; + +export default function ListSelect ({ + buttonProps, + defaultText, + labelProp, + + selectedItem, + selectedItemProp = 'id', + ...selectProps +}) { + const [currentItem, setCurrentItem] = useState(null); + + useEffect(() => { + if (selectedItem && selectedItemProp) { + const item = selectProps.items.find(i => i[selectedItemProp] === selectedItem); + setCurrentItem(item); + } + }, [selectedItem, selectedItemProp, selectProps.items]); + + return ( + + ) +} \ No newline at end of file diff --git a/client/src/components/index.js b/client/src/components/index.js index ea1a00a6d..612238cc0 100644 --- a/client/src/components/index.js +++ b/client/src/components/index.js @@ -3,11 +3,13 @@ import Money from './Money'; import Icon from './Icon'; // import Choose from './Utils/Choose'; // import For from './Utils/For'; +import ListSelect from './ListSelect'; export { If, Money, Icon, + ListSelect, // Choose, // For, }; \ No newline at end of file diff --git a/client/src/containers/Dialogs/AccountFormDialog.js b/client/src/containers/Dialogs/AccountFormDialog.js index e358208e1..ccd467084 100644 --- a/client/src/containers/Dialogs/AccountFormDialog.js +++ b/client/src/containers/Dialogs/AccountFormDialog.js @@ -28,6 +28,9 @@ import Icon from 'components/Icon'; import ErrorMessage from 'components/ErrorMessage'; import { fetchAccountTypes } from 'store/accounts/accounts.actions'; + +import {ListSelect} from 'components'; + function AccountFormDialog({ name, payload, @@ -229,7 +232,6 @@ function AccountFormDialog({ const onChangeAccountType = useCallback( (accountType) => { - setSelectedAccountType(accountType); formik.setFieldValue('account_type_id', accountType.id); }, [setSelectedAccountType, formik] @@ -294,19 +296,20 @@ function AccountFormDialog({ errors.account_type_id && touched.account_type_id && Intent.DANGER } > - + + selectedItem={formik.values.account_type_id} + selectedItemProp={'id'} + + defaultText={} + labelProp={'name'} + buttonProps={{ disabled: payload.action === 'edit' }} /> { - - const [selectedAccounts, setSelectedAccounts] = useState({}); const [payload, setPayload] = useState({}); const history = useHistory(); @@ -232,19 +226,11 @@ const ItemForm = ({ } }; - - const onItemAccountSelect = useCallback( - (filedName) => { - return (account) => { - setSelectedAccounts({ - ...selectedAccounts, - [filedName]: account, - }); - setFieldValue(filedName, account.id); - }; - }, - [setFieldValue, selectedAccounts] - ); + const onItemAccountSelect = useCallback((filedName) => { + return (account) => { + setFieldValue(filedName, account.id); + }; + }, [setFieldValue]); const categoryItem = useCallback( (item, { handleClick }) => ( @@ -253,16 +239,6 @@ const ItemForm = ({ [] ); - - const getSelectedAccountLabel = useCallback( - (fieldName, defaultLabel) => { - return typeof selectedAccounts[fieldName] !== 'undefined' - ? selectedAccounts[fieldName].name - : defaultLabel; - }, - [selectedAccounts] - ); - const requiredSpan = useMemo(() => *, []); const infoIcon = useMemo(() => , []); @@ -307,6 +283,8 @@ const ItemForm = ({
+ + {/* Item type */} } @@ -324,7 +302,8 @@ const ItemForm = ({ {...getFieldProps('type')} /> - + + {/* Item name */} } labelInfo={requiredSpan} @@ -342,14 +321,13 @@ const ItemForm = ({ /> + {/* SKU */} } labelInfo={infoIcon} className={'form-group--item-sku'} intent={errors.sku && touched.sku && Intent.DANGER} - helperText={ - - } + helperText={} inline={true} > + {/* Item category */} } labelInfo={infoIcon} @@ -375,24 +354,22 @@ const ItemForm = ({ Classes.FILL )} > - - + selectedItem={values.category_id} + selectedItemProp={'id'} + + defaultText={} + labelProp={'name'} + /> + + + {/* Active checkbox */} } className={'form-group--item-selling-price'} - intent={ - errors.selling_price && touched.selling_price && Intent.DANGER - } + intent={errors.selling_price && touched.selling_price && Intent.DANGER} helperText={ } @@ -447,7 +422,8 @@ const ItemForm = ({ }} /> - + + {/* Selling account */} } labelInfo={infoIcon} @@ -466,30 +442,26 @@ const ItemForm = ({ Classes.FILL )} > - + + selectedItem={values.sell_account_id} + selectedItemProp={'id'} + + defaultText={} + labelProp={'name'} + /> -

- -

+

+ {/* Cost price */} } className={'form-group--item-cost-price'} @@ -529,23 +501,18 @@ const ItemForm = ({ Classes.FILL )} > - + + defaultText={} + labelProp={'name'} + selectedItem={values.cost_account_id} + selectedItemProp={'id'} + />
@@ -564,35 +531,24 @@ const ItemForm = ({ touched.inventory_account_id && Intent.DANGER } - helperText={ - - } + helperText={} className={classNames( 'form-group--item-inventory_account', 'form-group--select-list', Classes.FILL )} > - + + defaultText={} + labelProp={'name'} + selectedItem={values.inventory_account_id} + selectedItemProp={'id'} />