Merge remote-tracking branch 'origin/master'

client/src/containers/Items/ItemForm.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useEffect } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import * as Yup from 'yup';
 import { Formik, Form } from 'formik';
 import { Intent } from '@blueprintjs/core';
@@ -60,6 +60,9 @@ function ItemForm({
 }) {
   const isNewMode = !itemId;
 
+  // Holds data of submit button once clicked to form submit function.
+  const [submitPayload, setSubmitPayload] = useState({});
+
   const history = useHistory();
   const { formatMessage } = useIntl();
 
@@ -165,8 +168,8 @@ function ItemForm({
         message: formatMessage(
           {
             id: isNewMode
-              ? 'service_has_been_successful_created'
-              : 'the_item_has_been_successfully_edited',
+              ? 'the_item_has_been_created_successfully'
+              : 'the_item_has_been_edited_successfully',
           },
           {
             number: itemId,
@@ -174,9 +177,13 @@ function ItemForm({
         ),
         intent: Intent.SUCCESS,
       });
+      resetForm();
       setSubmitting(false);
-      history.push('/items');
       queryCache.removeQueries(['items-table']);
+
+      if (submitPayload.redirect) {
+        history.push('/items');
+      }
     };
     const onError = ({ response }) => {
       setSubmitting(false);
@@ -193,13 +200,11 @@ function ItemForm({
     }
   };
 
-  // useEffect(() => {
-  //   if (values.item_type) {
-  //     changePageSubtitle(formatMessage({ id: values.item_type }));
-  //   } else {
-  //     changePageSubtitle('');
-  //   }
-  // }, [values.item_type, changePageSubtitle, formatMessage]);
+  useEffect(() => {
+    if (itemDetail && itemDetail.type) {
+      changePageSubtitle(formatMessage({ id: itemDetail.type }));
+    }
+  }, [itemDetail, changePageSubtitle, formatMessage]);
 
   const initialAttachmentFiles = useMemo(() => {
     return itemDetail && itemDetail.media
@@ -229,9 +234,17 @@ function ItemForm({
     [setDeletedFiles, deletedFiles],
   );
 
-  const handleCancelBtnClick = useCallback(() => {
+  const handleCancelBtnClick = () => {
     history.goBack();
-  }, [history]);
+  };
+
+  const handleSubmitAndNewClick = () => {
+    setSubmitPayload({ redirect: false });
+  };
+
+  const handleSubmitClick = () => {
+    setSubmitPayload({ redirect: true });
+  };
 
   return (
     <div class={classNames(CLASSES.PAGE_FORM_ITEM)}>
@@ -241,7 +254,7 @@ function ItemForm({
         initialValues={initialValues}
         onSubmit={handleFormSubmit}
       >
-        {({ isSubmitting }) => (
+        {({ isSubmitting, handleSubmit }) => (
           <Form>
             <div class={classNames(CLASSES.PAGE_FORM_BODY)}>
               <ItemFormPrimarySection />
@@ -251,7 +264,10 @@ function ItemForm({
             <ItemFormFloatingActions
               isSubmitting={isSubmitting}
               itemId={itemId}
+              handleSubmit={handleSubmit}
               onCancelClick={handleCancelBtnClick}
+              onSubmitAndNewClick={handleSubmitAndNewClick}
+              onSubmitClick={handleSubmitClick}
             />
           </Form>
         )}

client/src/containers/Items/ItemFormBody.js

@@ -37,7 +37,7 @@ function ItemFormBody({ accountsList }) {
                       <T id={'i_sell_this_item'} />
                     </h3>
                   }
-                  defaultChecked={value}
+                  checked={value}
                   {...field}
                 />
               </FormGroup>
@@ -59,7 +59,7 @@ function ItemFormBody({ accountsList }) {
                   prefix={'$'}
                   inputGroupProps={{
                     medium: true,
-                    // intent: error && touched/ && Intent.DANGER,
+                    ...field,
                   }}
                   disabled={!form.values.sellable}
                   onChange={field.onChange}
@@ -132,9 +132,9 @@ function ItemFormBody({ accountsList }) {
                   prefix={'$'}
                   inputGroupProps={{
                     medium: true,
+                    ...field,
                   }}
                   disabled={!form.values.purchasable}
-                  {...field}
                 />
               </FormGroup>
             )}

client/src/containers/Items/ItemFormFloatingActions.js

@@ -3,23 +3,49 @@ import { Button, Intent, FormGroup, Checkbox } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { saveInvoke } from 'utils';
 import classNames from 'classnames';
-import { ErrorMessage, FastField } from 'formik';
+import { FastField } from 'formik';
 import { CLASSES } from 'common/classes';
 
 /**
  * Item form floating actions.
  */
-export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancelClick }) {
+export default function ItemFormFloatingActions({
+  isSubmitting,
+  itemId,
+  handleSubmit,
+  onCancelClick,
+  onSubmitClick,
+  onSubmitAndNewClick,
+}) {
   const handleCancelBtnClick = (event) => {
     saveInvoke(onCancelClick, event.currentTarget.value);
   };
+
+  const handleSubmitBtnClick = (event) => {
+    saveInvoke(onSubmitClick, event);
+  };
+
+  const handleSubmitAndNewBtnClick = (event) => {
+    saveInvoke(onSubmitAndNewClick, event);
+  };
+
   return (
     <div className={classNames(CLASSES.PAGE_FORM_FLOATING_ACTIONS)}>
-      <Button intent={Intent.PRIMARY} disabled={isSubmitting} type="submit">
+      <Button
+        intent={Intent.PRIMARY}
+        disabled={isSubmitting}
+        onClick={handleSubmitBtnClick}
+        type="submit"
+      >
         {itemId ? <T id={'edit'} /> : <T id={'save'} />}
       </Button>
 
-      <Button className={'ml1'} disabled={isSubmitting}>
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={handleSubmitAndNewBtnClick}
+        type="submit"
+      >
         <T id={'save_new'} />
       </Button>
 
@@ -42,4 +68,4 @@ export default function ItemFormFloatingActions({ isSubmitting, itemId, onCancel
       </FastField>
     </div>
   );
-}
+}

client/src/containers/Items/ItemFormPrimarySection.js

@@ -9,6 +9,7 @@ import {
 } from '@blueprintjs/core';
 import { FormattedMessage as T } from 'react-intl';
 import { ErrorMessage, FastField } from 'formik';
+import { useIntl } from 'react-intl';
 import {
   CategoriesSelectList,
   Hint,
@@ -21,6 +22,7 @@ import { CLASSES } from 'common/classes';
 
 import withItemCategories from 'containers/Items/withItemCategories';
 import withAccounts from 'containers/Accounts/withAccounts';
+import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
 import { compose, handleStringChange, inputIntent } from 'utils';
 
@@ -30,7 +32,12 @@ import { compose, handleStringChange, inputIntent } from 'utils';
 function ItemFormPrimarySection({
   // #withItemCategories
   categoriesList,
+
+  // #withDashboardActions
+  changePageSubtitle
 }) {
+  const { formatMessage } = useIntl();
+
   const itemTypeHintContent = (
     <>
       <div class="mb1">
@@ -78,6 +85,7 @@ function ItemFormPrimarySection({
                   inline={true}
                   onChange={handleStringChange((_value) => {
                     form.setFieldValue('type', _value);
+                    changePageSubtitle(formatMessage({ id: _value }));
                   })}
                   selectedValue={value}
                 >
@@ -171,4 +179,5 @@ export default compose(
   withItemCategories(({ categoriesList }) => ({
     categoriesList,
   })),
+  withDashboardActions
 )(ItemFormPrimarySection);