feature : Puschases & Sales / fix : tasks

client/src/containers/Dialogs/ItemCategoryDialog.js

@@ -20,12 +20,14 @@ import { connect } from 'react-redux';
 
 import AppToaster from 'components/AppToaster';
 import ErrorMessage from 'components/ErrorMessage';
-import { ListSelect } from 'components';
+import { ListSelect, AccountsSelectList } from 'components';
 
 import Dialog from 'components/Dialog';
 import withDialogActions from 'containers/Dialog/withDialogActions';
 import withDialogRedux from 'components/DialogReduxConnect';
 
+import withAccounts from 'containers/Accounts/withAccounts';
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withItemCategoryDetail from 'containers/Items/withItemCategoryDetail';
 import withItemCategories from 'containers/Items/withItemCategories';
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
@@ -48,10 +50,16 @@ function ItemCategoryDialog({
   // #withItemCategories
   categoriesList,
 
+  //# withAccount
+  accountsList,
+
   // #withItemCategoriesActions
   requestSubmitItemCategory,
   requestFetchItemCategories,
   requestEditItemCategory,
+
+  // #withAccountsActions
+  requestFetchAccounts,
 }) {
   const [selectedParentCategory, setParentCategory] = useState(null);
   const { formatMessage } = useIntl();
@@ -59,12 +67,23 @@ function ItemCategoryDialog({
   const fetchList = useQuery(['items-categories-list'], () =>
     requestFetchItemCategories(),
   );
-
+  const fetchAccounts = useQuery('accounts-list', (key) =>
+    requestFetchAccounts(),
+  );
   const validationSchema = Yup.object().shape({
     name: Yup.string()
       .required()
       .label(formatMessage({ id: 'category_name_' })),
     parent_category_id: Yup.string().nullable(),
+    cost_account_id: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'cost_account_' })),
+    sell_account_id: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'sell_account_' })),
+    inventory_account_id: Yup.number()
+      .required()
+      .label(formatMessage({ id: 'inventory_account_' })),
     description: Yup.string().trim(),
   });
 
@@ -73,6 +92,9 @@ function ItemCategoryDialog({
       name: '',
       description: '',
       parent_category_id: null,
+      cost_account_id: null,
+      sell_account_id: null,
+      inventory_account_id: null,
     }),
     [],
   );
@@ -95,18 +117,21 @@ function ItemCategoryDialog({
     },
     validationSchema,
     onSubmit: (values, { setSubmitting }) => {
+      const afterSubmit = () => {
+        closeDialog(dialogName);
+        queryCache.invalidateQueries('items-categories-table');
+        queryCache.invalidateQueries('accounts-list');
+      };
       if (payload.action === 'edit') {
         requestEditItemCategory(payload.id, values)
           .then((response) => {
-            closeDialog(dialogName);
+            afterSubmit(response);
             AppToaster.show({
               message: formatMessage({
                 id: 'the_item_category_has_been_successfully_edited',
               }),
               intent: Intent.SUCCESS,
             });
-            setSubmitting(false);
-            queryCache.invalidateQueries('items-categories-table');
           })
           .catch((error) => {
             setSubmitting(false);
@@ -114,15 +139,13 @@ function ItemCategoryDialog({
       } else {
         requestSubmitItemCategory(values)
           .then((response) => {
-            closeDialog(dialogName);
+            afterSubmit(response);
             AppToaster.show({
               message: formatMessage({
                 id: 'the_item_category_has_been_successfully_created',
               }),
               intent: Intent.SUCCESS,
             });
-            setSubmitting(false);
-            queryCache.invalidateQueries('items-categories-table');
           })
           .catch((error) => {
             setSubmitting(false);
@@ -130,7 +153,6 @@ function ItemCategoryDialog({
       }
     },
   });
-
   const filterItemCategory = useCallback(
     (query, category, _index, exactMatch) => {
       const normalizedTitle = category.name.toLowerCase();
@@ -166,7 +188,8 @@ function ItemCategoryDialog({
   // Handle the dialog opening.
   const onDialogOpening = useCallback(() => {
     fetchList.refetch();
-  }, [fetchList]);
+    fetchAccounts.refetch();
+  }, [fetchList, fetchAccounts]);
 
   const onChangeParentCategory = useCallback(
     (parentCategory) => {
@@ -176,6 +199,15 @@ function ItemCategoryDialog({
     [setFieldValue],
   );
 
+  const onItemAccountSelect = useCallback(
+    (filedName) => {
+      return (account) => {
+        setFieldValue(filedName, account.id);
+      };
+    },
+    [setFieldValue],
+  );
+
   const onDialogClosed = useCallback(() => {
     resetForm();
     closeDialog(dialogName);
@@ -273,6 +305,79 @@ function ItemCategoryDialog({
               {...getFieldProps('description')}
             />
           </FormGroup>
+
+          {/* cost account */}
+          <FormGroup
+            label={<T id={'cost_account'} />}
+            inline={true}
+            intent={
+              errors.cost_account_id && touched.cost_account_id && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage {...{ errors, touched }} name="cost_account_id" />
+            }
+            className={classNames(
+              'form-group--cost-account',
+              'form-group--select-list',
+              Classes.FILL,
+            )}
+          >
+            <AccountsSelectList
+              accounts={accountsList}
+              onAccountSelected={onItemAccountSelect('cost_account_id')}
+              defaultSelectText={<T id={'select_account'} />}
+              selectedAccountId={values.cost_account_id}
+            />
+          </FormGroup>
+
+          {/* sell Account */}
+          <FormGroup
+            label={<T id={'sell_account'} />}
+            inline={true}
+            intent={
+              errors.sell_account_id && touched.sell_account_id && Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage {...{ errors, touched }} name="sell_account_id" />
+            }
+            className={classNames(
+              'form-group--sell-account',
+              'form-group--select-list',
+              Classes.FILL,
+            )}
+          >
+            <AccountsSelectList
+              accounts={accountsList}
+              onAccountSelected={onItemAccountSelect('sell_account_id')}
+              defaultSelectText={<T id={'select_account'} />}
+              selectedAccountId={values.sell_account_id}
+            />
+          </FormGroup>
+          {/* inventory Account */}
+          <FormGroup
+            label={<T id={'inventory_account'} />}
+            inline={true}
+            intent={
+              errors.inventory_account &&
+              touched.inventory_account &&
+              Intent.DANGER
+            }
+            helperText={
+              <ErrorMessage {...{ errors, touched }} name="inventory_account" />
+            }
+            className={classNames(
+              'form-group--sell-account',
+              'form-group--select-list',
+              Classes.FILL,
+            )}
+          >
+            <AccountsSelectList
+              accounts={accountsList}
+              onAccountSelected={onItemAccountSelect('inventory_account')}
+              defaultSelectText={<T id={'select_account'} />}
+              selectedAccountId={values.inventory_account}
+            />
+          </FormGroup>
         </div>
 
         <div className={Classes.DIALOG_FOOTER}>
@@ -312,5 +417,9 @@ export default compose(
   withItemCategories(({ categoriesList }) => ({
     categoriesList,
   })),
+  withAccounts(({ accountsList }) => ({
+    accountsList,
+  })),
   withItemCategoriesActions,
+  withAccountsActions,
 )(ItemCategoryDialog);