WIP feature/editItem

client/src/containers/Items/ItemForm.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback,useEffect } from 'react';
 import * as Yup from 'yup';
 import { useFormik } from 'formik';
 import {
@@ -15,35 +15,61 @@ 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} from 'react-router-dom';
 import AppToaster from 'components/AppToaster';
-import AccountsConnect from 'connectors/Accounts.connector';
-import ItemsConnect from 'connectors/Items.connect';
 import { compose } from 'utils';
 import ErrorMessage from 'components/ErrorMessage';
 import classNames from 'classnames';
 import Icon from 'components/Icon';
-import ItemCategoryConnect from 'connectors/ItemsCategory.connect';
+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 { useHistory } from 'react-router-dom';
 import Dragzone from 'components/Dragzone';
-import MediaConnect from 'connectors/Media.connect';
 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';
 
 
 const ItemForm = ({
+
+  // #withItemActions
   requestSubmitItem,
+  requestEditItem,
 
+ 
   accounts,
-  categories,
+  accountsTypes,
+  itemDetail,
 
+  
+
+  // #withDashboard
+    changePageTitle,
+
+ // #withItemCategories
+  categoriesList,
+
+  
+
+// #withMediaActions
   requestSubmitMedia,
   requestDeleteMedia,
+
+  
 }) => {
+
   const [selectedAccounts, setSelectedAccounts] = useState({});
+  const [selectedAccountType, setSelectedAccountType] = useState(null);
+  
   const history = useHistory();
   const { formatMessage } = useIntl();
-
+  const {id} =useParams();
   const {
     files,
     setFiles,
@@ -81,7 +107,7 @@ const ItemForm = ({
     stock: Yup.string() || Yup.boolean(),
   });
 
-  const initialValues = useMemo(
+  const defaultInitialValues = useMemo(
     () => ({
       active: true,
       name: '',
@@ -97,6 +123,21 @@ const ItemForm = ({
     }),
     []
   );
+  const initialValues = useMemo(() => ({
+    ...(itemDetail) ? {
+      ...pick(itemDetail, Object.keys(defaultInitialValues)),
+ 
+    } : {
+      ...defaultInitialValues,
+    }
+  }), [itemDetail, defaultInitialValues]);
+
+
+  useEffect(() => {
+    itemDetail && itemDetail.id ?
+      changePageTitle(formatMessage({id:'edit_item_details'})) :
+      changePageTitle(formatMessage({id:'new_item'}));
+  }, [changePageTitle,itemDetail]);
 
   const {
     getFieldProps,
@@ -112,24 +153,47 @@ const ItemForm = ({
     initialValues: {
       ...initialValues,
     },
-    onSubmit: (values, { setSubmitting }) => {
+    onSubmit: (values, { setSubmitting,resetForm,setErrors }) => {
+
       const saveItem = (mediaIds) => {
         const formValues = { ...values, media_ids: mediaIds };
+        if(itemDetail && itemDetail.id ){
 
-        return requestSubmitItem(formValues).then((response) => {
-          AppToaster.show({
-            message: formatMessage({
-              id: 'service_has_been_successful_created',
-            }, {
-              name: values.name,
-              service: formatMessage({ id: 'item' }),
-            }),
-            intent: Intent.SUCCESS,
+          requestEditItem(itemDetail.id,formValues)
+          .then((response)=>{
+            AppToaster.show({
+              message:formatMessage({
+                id:'the_item_has_been_successfully_edited',
+              },{
+                number:itemDetail.id
+              }),
+              intent:Intent.SUCCESS
+            });
+            setSubmitting(false);
+            resetForm();
+          }).catch((errors)=>{
+            setSubmitting(false)
           });
-          queryCache.removeQueries(['items-table']);
-          history.push('/dashboard/items');
-        });
-      };
+
+        }else{
+         
+          requestSubmitItem(formValues).then((response) => {
+            AppToaster.show({
+              message: formatMessage({
+                id: 'service_has_been_successful_created',
+              }, {
+                name: values.name,
+                service: formatMessage({ id: 'item' }),
+              }),
+              intent: Intent.SUCCESS,
+            });
+            queryCache.removeQueries(['items-table']);
+            history.push('/items');
+          });
+        };
+        }
+
+         
 
       Promise.all([saveMedia(), deleteMedia()]).then(
         ([savedMediaResponses]) => {
@@ -152,6 +216,7 @@ const ItemForm = ({
     []
   );
 
+
   // Filter Account Items
   const filterAccounts = (query, account, _index, exactMatch) => {
     const normalizedTitle = account.name.toLowerCase();
@@ -163,6 +228,19 @@ const ItemForm = ({
     }
   };
 
+  
+// Set default
+  // useEffect(()=>{
+
+  //   if(itemDetail && itemDetail.id){
+  //     const defaultType = itemDetail.find(
+  //       (t) => t.id === itemDetail.id
+  //     );
+
+  //     defaultType && setSelectedAccountType(defaultType);
+  //   }
+
+  // },[])
   const onItemAccountSelect = useCallback(
     (filedName) => {
       return (account) => {
@@ -183,6 +261,7 @@ const ItemForm = ({
     []
   );
 
+
   const getSelectedAccountLabel = useCallback(
     (fieldName, defaultLabel) => {
       return typeof selectedAccounts[fieldName] !== 'undefined'
@@ -199,10 +278,18 @@ const ItemForm = ({
     setFieldValue(fieldKey, value);
   };
 
-  const initialAttachmentFiles = useMemo(() => {
-    return [];
-  }, []);
-
+ 
+  const initialAttachmentFiles =useMemo(()=>{
+    return itemDetail && itemDetail.media
+    ? itemDetail.media.map((attach)=>({
+    
+      preview:attach.attachment_file,
+      upload:true,
+      metadata:{...attach}
+    
+    })):[];
+    
+      },[itemDetail])
   const handleDropFiles = useCallback((_files) => {
     setFiles(_files.filter((file) => file.uploaded === false));
   }, []);
@@ -297,7 +384,7 @@ const ItemForm = ({
                 )}
               >
                 <Select
-                  items={categories}
+                  items={categoriesList}
                   itemRenderer={categoryItem}
                   itemPredicate={filterAccounts}
                   popoverProps={{ minimal: true }}
@@ -532,7 +619,8 @@ const ItemForm = ({
 
         <div class='form__floating-footer'>
           <Button intent={Intent.PRIMARY} disabled={isSubmitting} type='submit'>
-            <T id={'save'}/> 
+          
+           { itemDetail && itemDetail.id ? <T id={'edit'}/> : <T id={'save'}/> }
           </Button>
 
           <Button className={'ml1'} disabled={isSubmitting}>
@@ -549,8 +637,15 @@ const ItemForm = ({
 };
 
 export default compose(
-  AccountsConnect,
-  ItemsConnect,
-  ItemCategoryConnect,
-  MediaConnect
+  withAccounts(({accounts,accountsTypes})=>({
+    accounts,
+    accountsTypes
+  })),
+  withItemsActions,
+  withItemDetail,
+  withItemCategories(({ categoriesList }) => ({
+    categoriesList,
+  })),
+  withDashboardActions,
+  withMediaActions,
 )(ItemForm);

client/src/containers/Items/ItemFormPage.js

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import React, { useEffect,useCallback } from 'react';
+import { useParams,useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 
 import ItemForm from 'containers/Items/ItemForm';
@@ -11,6 +11,7 @@ import withItemCategoriesActions from 'containers/Items/withItemCategoriesAction
 
 import { compose } from 'utils';
 import { FormattedMessage as T, useIntl } from 'react-intl';
+import withItemsActions from './withItemsActions';
 
 
 const ItemFormContainer = ({
@@ -20,16 +21,15 @@ const ItemFormContainer = ({
   // #withAccountsActions
   requestFetchAccounts,
 
+  // #withItemsActions
+  requestFetchItems,
+
   // #withItemCategoriesActions
   requestFetchItemCategories,
 }) => {
   const { id } = useParams();
   const {formatMessage} =useIntl()
-  useEffect(() => {
-    id ?
-      changePageTitle(formatMessage({id:'edit_item_details'})) :
-      changePageTitle(formatMessage({id:'new_item'}));
-  }, [id, changePageTitle]);
+  const history = useHistory();
 
   const fetchAccounts = useQuery('accounts-list',
     (key) => requestFetchAccounts());
@@ -37,11 +37,30 @@ const ItemFormContainer = ({
   const fetchCategories = useQuery('item-categories-list',
     (key) => requestFetchItemCategories());
 
+ const fetchItemDetail = useQuery(
+  id && ['item-detail-list', id],
+  (key) => requestFetchItems());
+
+const handleFormSubmit =useCallback((payload)=>{
+
+  payload.redirect && history.push('/items/new');
+
+},[history]) 
+
+const handleCancel =useCallback(()=>{
+
+  history.push('/items/new');
+},[])
+
   return (
     <DashboardInsider
-      loading={fetchAccounts.isFetching || fetchCategories.isFetching}
+      loading={fetchItemDetail.isFetching || fetchAccounts.isFetching || fetchCategories.isFetching }
       name={'item-form'}>
-      <ItemForm />
+      <ItemForm 
+      itemId={id} 
+      onFormSubmit={handleFormSubmit}
+      onCancelForm={handleCancel}
+      />
     </DashboardInsider>
   );
 };
@@ -50,4 +69,5 @@ export default compose(
   withDashboard,
   withAccountsActions,
   withItemCategoriesActions,
+  withItemsActions
 )(ItemFormContainer);

client/src/containers/Items/ItemsDataTable.js

@@ -8,7 +8,6 @@ import {
   Position,
 } from '@blueprintjs/core'
 import { FormattedMessage as T, useIntl } from 'react-intl';
-
 import {compose} from 'utils';
 import DataTable from 'components/DataTable';
 import Icon from 'components/Icon';
@@ -17,7 +16,6 @@ import Money from 'components/Money';
 import withItems from 'containers/Items/withItems';
 import LoadingIndicator from 'components/LoadingIndicator';
 
-
 const ItemsDataTable = ({
   loading,
 
@@ -31,17 +29,25 @@ const ItemsDataTable = ({
   onFetchData,
   onSelectedRowsChange,
 }) => {
+
   
   const {formatMessage} = useIntl();
   const [initialMount, setInitialMount] = useState(false);
-
+  
   useEffect(() => {
     if (!itemsTableLoading) {
       setInitialMount(true);
     }
   }, [itemsTableLoading, setInitialMount]);
 
-  const handleEditItem = (item) => () => { onEditItem(item); };
+  const handleEditItem = useCallback(
+    (item) => () => {
+      onEditItem && onEditItem(item);
+    },
+    [onEditItem]
+  );
+
+
   const handleDeleteItem = (item) => () => { onDeleteItem(item); };
   
   const actionMenuList = useCallback((item) =>
@@ -51,8 +57,9 @@ const ItemsDataTable = ({
       <MenuItem text={<T id={'edit_item'}/>} onClick={handleEditItem(item)} />
       <MenuItem text={<T id={'delete_item'}/>} onClick={handleDeleteItem(item)} />
     </Menu>), [handleEditItem, handleDeleteItem]);
-
+ 
   const columns = useMemo(() => [
+    
     {
       Header: formatMessage({ id:'item_name' }),
       accessor: 'name',
@@ -136,6 +143,7 @@ const ItemsDataTable = ({
 };
 
 export default compose(
+
   withItems(({ itemsCurrentPage, itemsTableLoading }) => ({
     itemsCurrentPage,
     itemsTableLoading,

client/src/containers/Items/ItemsList.js

@@ -2,6 +2,7 @@ import React, { useEffect, useCallback, useState } from 'react';
 import {
   Route,
   Switch,
+  useHistory
 } from 'react-router-dom';
 import {
   Intent,
@@ -49,6 +50,8 @@ function ItemsList({
 
   const { formatMessage } = useIntl();
 
+  const history = useHistory();
+
   useEffect(() => {
     changePageTitle(formatMessage({id:'items_list'}));
   }, [changePageTitle]);
@@ -68,7 +71,14 @@ function ItemsList({
     setDeleteItem(item);
   }, [setDeleteItem]);
 
-  const handleEditItem = () => {};
+  const handleEditItem = useCallback(
+    (item) => {
+      history.push(`/items/${item.id}/edit`);
+    },
+    [history]
+  );
+
+ 
 
   // Handle cancel delete the item.
   const handleCancelDeleteItem = useCallback(() => {
@@ -121,6 +131,9 @@ function ItemsList({
     setSelectedRows(accounts);
   }, [setSelectedRows]);
   
+ 
+
+
   return (
     <DashboardInsider
       isLoading={fetchHook.isFetching}

client/src/containers/Items/withItemDetail.js

@@ -0,0 +1,9 @@
+import { connect } from 'react-redux';
+import t from 'store/types';
+import { getItemById } from 'store/items/items.reducer';
+
+const mapStateToProps = (state, props) => ({
+  itemDetail: getItemById(state, props.itemId),
+});
+
+export default connect(mapStateToProps);

client/src/containers/Items/withItemsActions.js

@@ -3,6 +3,7 @@ import {
   fetchItems,
   deleteItem,
   submitItem,
+  editItem,
 } from 'store/items/items.actions';
 import t from 'store/types';
 
@@ -10,6 +11,7 @@ export const mapDispatchToProps = (dispatch) => ({
   requestFetchItems: (query) => dispatch(fetchItems({ query })),
   requestDeleteItem: (id) => dispatch(deleteItem({ id })),
   requestSubmitItem: (form) => dispatch(submitItem({ form })),
+  requestEditItem:(id,form) => dispatch(editItem({id,form})),
   addBulkActionItem: (id) => dispatch({
     type: t.ITEM_BULK_ACTION_ADD, itemId: id
   }),