feat: List select component.

2026-02-16 04:40:32 +00:00 · 2020-05-24 01:48:07 +02:00
parent 80bca1d7a3
commit 18a032ffd1
6 changed files with 115 additions and 118 deletions
--- a/client/src/components/ListSelect.js
+++ 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 (
+    <Select
+      {...selectProps}
+    >
+      <Button
+        text={currentItem ? currentItem[labelProp] : defaultText}
+        {...buttonProps}
+      />
+    </Select>
+  )
+}
--- 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,
 };
--- 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
            }
          >
-            <Select
+            <ListSelect
              items={accountsTypes}
              noResults={<MenuItem disabled={true} text='No results.' />}
              itemRenderer={accountTypeItem}
              itemPredicate={filterAccountTypeItems}
              popoverProps={{ minimal: true }}
              onItemSelect={onChangeAccountType}
-            >
-              <Button
-                text={selectedAccountType ? selectedAccountType.name : <T id={'select_account_type'} />}
-                disabled={payload.action === 'edit'}
-              />
-            </Select>
+
+              selectedItem={formik.values.account_type_id}
+              selectedItemProp={'id'}
+              
+              defaultText={<T id={'select_account_type'} />}
+              labelProp={'name'}
+              buttonProps={{ disabled: payload.action === 'edit' }} />
          </FormGroup>

          <FormGroup
--- a/client/src/containers/Dialogs/CurrencyDialog.js
+++ b/client/src/containers/Dialogs/CurrencyDialog.js
@@ -27,6 +27,7 @@ import { pick } from 'lodash';
 import { getDialogPayload } from 'store/dashboard/dashboard.reducer';


+
 function CurrencyDialog({
  name,
  payload,
--- a/client/src/containers/Items/ItemForm.js
+++ b/client/src/containers/Items/ItemForm.js
@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useCallback,useEffect } from 'react';
 import * as Yup from 'yup';
-import { useFormik } from 'formik';
+import { useFormik, Formik } from 'formik';
 import {
  FormGroup,
  MenuItem,
@@ -13,31 +13,32 @@ import {
 } from '@blueprintjs/core';
 import { Row, Col } from 'react-grid-system';
 import { FormattedMessage as T, useIntl } from 'react-intl';
-import { Select } from '@blueprintjs/select';
 import { queryCache } from 'react-query';
-import {useParams ,useHistory} from 'react-router-dom';
-import AppToaster from 'components/AppToaster';
-import { compose } from 'utils';
-import ErrorMessage from 'components/ErrorMessage';
+import { useParams, useHistory } from 'react-router-dom';
+import { pick } from 'lodash';
 import classNames from 'classnames';
+
+import AppToaster from 'components/AppToaster';
+import ErrorMessage from 'components/ErrorMessage';
 import Icon from 'components/Icon';
+import MoneyInputGroup from 'components/MoneyInputGroup';
+import Dragzone from 'components/Dragzone';
+import { ListSelect } from 'components';
+
 import withItemsActions from 'containers/Items/withItemsActions';
 import withItemCategories from 'containers/Items/withItemCategories'
 import withAccounts from 'containers/Accounts/withAccounts';
 import withMediaActions from 'containers/Media/withMediaActions';
-
-import MoneyInputGroup from 'components/MoneyInputGroup';
-import Dragzone from 'components/Dragzone';
 import useMedia from 'hooks/useMedia';
 import withItems from './withItems';
 import withItemDetail from 'containers/Items/withItemDetail'
-import { pick } from 'lodash';
 import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withAccountDetail from 'containers/Accounts/withAccountDetail';

+import { compose } from 'utils';
+

 const ItemForm = ({
-
  // #withItemActions
  requestSubmitItem,
  requestEditItem,
@@ -46,24 +47,17 @@ const ItemForm = ({
  itemDetail,
  onFormSubmit,
  onCancelForm, 
-  

  // #withDashboard
-    changePageTitle,
+  changePageTitle,

- // #withItemCategories
+  // #withItemCategories
  categoriesList,

-  
-
-// #withMediaActions
+  // #withMediaActions
  requestSubmitMedia,
-  requestDeleteMedia,
-
-  
+  requestDeleteMedia,  
 }) => {
-
-  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(() => <span class='required'>*</span>, []);
  const infoIcon = useMemo(() => <Icon icon='info-circle' iconSize={12} />, []);

@@ -307,6 +283,8 @@ const ItemForm = ({
        <div class='item-form__primary-section'>
          <Row>
            <Col xs={7}>
+
+              {/* Item type */}
              <FormGroup
                medium={true}
                label={<T id={'item_type'} />}
@@ -324,7 +302,8 @@ const ItemForm = ({
                  {...getFieldProps('type')}
                />
              </FormGroup>
-
+              
+              {/* Item name */}
              <FormGroup
                label={<T id={'item_name'} />}
                labelInfo={requiredSpan}
@@ -342,14 +321,13 @@ const ItemForm = ({
                />
              </FormGroup>

+              {/* SKU */}
              <FormGroup
                label={<T id={'sku'} />}
                labelInfo={infoIcon}
                className={'form-group--item-sku'}
                intent={errors.sku && touched.sku && Intent.DANGER}
-                helperText={
-                  <ErrorMessage {...{ errors, touched }} name='sku' />
-                }
+                helperText={<ErrorMessage {...{ errors, touched }} name='sku' />}
                inline={true}
              >
                <InputGroup
@@ -359,6 +337,7 @@ const ItemForm = ({
                />
              </FormGroup>

+              {/* Item category */}
              <FormGroup
                label={<T id={'category'} />}
                labelInfo={infoIcon}
@@ -375,24 +354,22 @@ const ItemForm = ({
                  Classes.FILL
                )}
              >
-                <Select
+                <ListSelect
                  items={categoriesList}
                  itemRenderer={categoryItem}
                  itemPredicate={filterAccounts}
                  popoverProps={{ minimal: true }}
                  onItemSelect={onItemAccountSelect('category_id')}
-                >
-                  <Button
-                    fill={true}
-                    rightIcon='caret-down'
-                    text={getSelectedAccountLabel(
-                      'category_id',
-                      formatMessage({id:'select_category'})
-                    )}
-                  />
-                </Select>
-              </FormGroup>

+                  selectedItem={values.category_id}
+                  selectedItemProp={'id'}
+                  
+                  defaultText={<T id={'select_category'} />}
+                  labelProp={'name'}
+                />
+              </FormGroup>
+                
+              {/* Active checkbox */}
              <FormGroup
                label={' '}
                inline={true}
@@ -426,9 +403,7 @@ const ItemForm = ({
            <FormGroup
              label={<T id={'selling_price'}/>}
              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={
                <ErrorMessage {...{ errors, touched }} name='selling_price' />
              }
@@ -447,7 +422,8 @@ const ItemForm = ({
                }}
              />
            </FormGroup>
-
+              
+            {/* Selling account */}
            <FormGroup
              label={<T id={'account'} />}
              labelInfo={infoIcon}
@@ -466,30 +442,26 @@ const ItemForm = ({
                Classes.FILL
              )}
            >
-              <Select
+              <ListSelect
                items={accounts}
                itemRenderer={accountItem}
                itemPredicate={filterAccounts}
                popoverProps={{ minimal: true }}
                onItemSelect={onItemAccountSelect('sell_account_id')}
-              >
-                <Button
-                  fill={true}
-                  rightIcon='caret-down'
-                  text={getSelectedAccountLabel(
-                    'sell_account_id',
-                    formatMessage({id:'select_account'})
-                  )}
-                />
-              </Select>
+
+                selectedItem={values.sell_account_id}
+                selectedItemProp={'id'}
+
+                defaultText={<T id={'select_account'} />}
+                labelProp={'name'}
+              />
            </FormGroup>
          </Col>

          <Col width={404}>
-            <h4>
-              <T id={'sales_information'} />
-            </h4>
+            <h4><T id={'sales_information'} /></h4>

+            {/* Cost price */}
            <FormGroup
              label={<T id={'cost_price'} />}
              className={'form-group--item-cost-price'}
@@ -529,23 +501,18 @@ const ItemForm = ({
                Classes.FILL
              )}
            >
-              <Select
+              <ListSelect
                items={accounts}
                itemRenderer={accountItem}
                itemPredicate={filterAccounts}
                popoverProps={{ minimal: true }}
                onItemSelect={onItemAccountSelect('cost_account_id')}
-              >
-                <Button
-                  fill={true}
-                  rightIcon='caret-down'
-                  text={getSelectedAccountLabel(
-                    'cost_account_id',
-                    formatMessage({id:'select_account'})
-                    
-                  )}
-                />
-              </Select>
+
+                defaultText={<T id={'select_account'} />} 
+                labelProp={'name'}
+                selectedItem={values.cost_account_id}
+                selectedItemProp={'id'}
+              />
            </FormGroup>
          </Col>
        </Row>
@@ -564,35 +531,24 @@ const ItemForm = ({
                touched.inventory_account_id &&
                Intent.DANGER
              }
-              helperText={
-                <ErrorMessage
-                  {...{ errors, touched }}
-                  name='inventory_account_id'
-                />
-              }
+              helperText={<ErrorMessage {...{ errors, touched }} name='inventory_account_id' />}
              className={classNames(
                'form-group--item-inventory_account',
                'form-group--select-list',
                Classes.FILL
              )}
            >
-              <Select
+              <ListSelect
                items={accounts}
                itemRenderer={accountItem}
                itemPredicate={filterAccounts}
                popoverProps={{ minimal: true }}
                onItemSelect={onItemAccountSelect('inventory_account_id')}
-              >
-                <Button
-                  fill={true}
-                  rightIcon='caret-down'
-                  text={getSelectedAccountLabel(
-                    'inventory_account_id',
-                    formatMessage({id:'select_account'})
-
-                  )}
-                />
-              </Select>
+                
+                defaultText={<T id={'select_account'} />}
+                labelProp={'name'}
+                selectedItem={values.inventory_account_id}
+                selectedItemProp={'id'} />
            </FormGroup>

            <FormGroup
--- a/server/src/http/controllers/Items.js
+++ b/server/src/http/controllers/Items.js
@@ -104,7 +104,7 @@ export default {
      const costAccountPromise = Account.query().findById(form.cost_account_id);
      const sellAccountPromise = Account.query().findById(form.sell_account_id);
      const inventoryAccountPromise = (form.type === 'inventory')
-        ? Account.query().findByid(form.inventory_account_id) : null;
+        ? Account.query().findById(form.inventory_account_id) : null;

      const itemCategoryPromise = (form.category_id)
        ? ItemCategory.query().findById(form.category_id) : null;