Merge remote-tracking branch 'origin/_tasks'

client/src/containers/Items/ItemCategoriesList.js

@@ -49,7 +49,7 @@ const ItemCategoryList = ({
   }, [id, changePageTitle, formatMessage]);
 
   const fetchCategories = useQuery(
-    ['items-categories-table', filter],
+    ['items-categories-list', filter],
     (key, query) => requestFetchItemCategories(query),
   );
 
@@ -183,7 +183,9 @@ const ItemCategoryList = ({
       >
         <p>
           <FormattedHTMLMessage
-            id={'once_delete_these_item_categories_you_will_not_able_restore_them'}
+            id={
+              'once_delete_these_item_categories_you_will_not_able_restore_them'
+            }
           />
         </p>
       </Alert>

client/src/containers/Items/ItemFormPage.js

@@ -1,5 +1,5 @@
-import React, {useCallback } from 'react';
-import { useParams,useHistory } from 'react-router-dom';
+import React, { useCallback } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
@@ -12,7 +12,6 @@ import withItemsActions from './withItemsActions';
 
 import { compose } from 'utils';
 
-
 const ItemFormContainer = ({
   // #withDashboardActions
   changePageTitle,
@@ -22,6 +21,7 @@ const ItemFormContainer = ({
 
   // #withItemsActions
   requestFetchItems,
+  requestFetchItem,
 
   // #withItemCategoriesActions
   requestFetchItemCategories,
@@ -29,35 +29,47 @@ const ItemFormContainer = ({
   const { id } = useParams();
   const history = useHistory();
 
-  const fetchAccounts = useQuery('accounts-list',
-    (key) => requestFetchAccounts());
+  const fetchAccounts = useQuery('accounts-list', (key) =>
+    requestFetchAccounts(),
+  );
 
-  const fetchCategories = useQuery('item-categories-list',
-    (key) => requestFetchItemCategories());
+  const fetchCategories = useQuery('item-categories-list', (key) =>
+    requestFetchItemCategories(),
+  );
 
- const fetchItemDetail = useQuery(
-  id && ['item-detail-list', id],
-  (key) => requestFetchItems());
+  const fetchItemDetail = useQuery(
+    ['item', id],
+    (key, _id) => requestFetchItem(_id),
+    {
+      enabled: !!id,
+    },
+  );
 
-const handleFormSubmit =useCallback((payload)=>{
+  const handleFormSubmit = useCallback(
+    (payload) => {
+      payload.redirect && history.push('/items');
+    },
+    [history],
+  );
 
-  payload.redirect && history.push('/items/new');
-
-},[history]) 
-
-const handleCancel =useCallback(()=>{
-
-  history.push('/items/new');
-},[history])
+  const handleCancel = useCallback(() => {
+    // history.push('/items');
+    history.goBack();
+  }, [history]);
 
   return (
     <DashboardInsider
-      loading={fetchItemDetail.isFetching || fetchAccounts.isFetching || fetchCategories.isFetching }
-      name={'item-form'}>
-      <ItemForm 
-      itemId={id} 
-      onFormSubmit={handleFormSubmit}
-      onCancelForm={handleCancel}
+      loading={
+        fetchItemDetail.isFetching ||
+        fetchAccounts.isFetching ||
+        fetchCategories.isFetching
+      }
+      name={'item-form'}
+    >
+      <ItemForm
+        onFormSubmit={handleFormSubmit}
+        itemId={id}
+        onCancelForm={handleCancel}
       />
     </DashboardInsider>
   );
@@ -67,5 +79,5 @@ export default compose(
   withDashboardActions,
   withAccountsActions,
   withItemCategoriesActions,
-  withItemsActions
+  withItemsActions,
 )(ItemFormContainer);

client/src/containers/Items/ItemsFooter.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Intent, Button } from '@blueprintjs/core';
+import { FormattedMessage as T } from 'react-intl';
+
+export default function ItemFloatingFooter({
+  formik: { isSubmitting },
+  onSubmitClick,
+  onCancelClick,
+  itemDetail,
+}) {
+  return (
+    <div class="form__floating-footer">
+      <Button
+        intent={Intent.PRIMARY}
+        disabled={isSubmitting}
+        type="submit"
+        onClick={() => {
+          onSubmitClick({ publish: true, redirect: true });
+        }}
+      >
+        {itemDetail && itemDetail.id ? <T id={'edit'} /> : <T id={'save'} />}
+      </Button>
+
+      <Button
+        disabled={isSubmitting}
+        intent={Intent.PRIMARY}
+        className={'ml1'}
+        name={'save_and_new'}
+        onClick={() => {
+          onSubmitClick({ publish: true, redirect: false });
+        }}
+      >
+        <T id={'save_new'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        disabled={isSubmitting}
+        onClick={() => {
+          onSubmitClick({ publish: false, redirect: false });
+        }}
+      >
+        <T id={'save_as_draft'} />
+      </Button>
+
+      <Button
+        className={'ml1'}
+        onClick={() => {
+          onCancelClick && onCancelClick();
+        }}
+      >
+        <T id={'close'} />
+      </Button>
+    </div>
+  );
+}

client/src/containers/Items/withItemsActions.js

@@ -1,6 +1,7 @@
 import {connect} from 'react-redux';
 import {
   fetchItems,
+  fetchItem,
   deleteItem,
   submitItem,
   editItem,
@@ -10,6 +11,7 @@ import t from 'store/types';
 
 export const mapDispatchToProps = (dispatch) => ({
   requestFetchItems: (query) => dispatch(fetchItems({ query })),
+  requestFetchItem: (id) => dispatch(fetchItem({ id })),
   requestDeleteItem: (id) => dispatch(deleteItem({ id })),
   requestDeleteBulkItems:(ids)=>dispatch(deleteBulkItems({ids})),
   requestSubmitItem: (form) => dispatch(submitItem({ form })),