Merge remote-tracking branch 'origin/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,60 @@ 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 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';
+import withAccountDetail from 'containers/Accounts/withAccountDetail';
 
 
 const ItemForm = ({
+
+  // #withItemActions
   requestSubmitItem,
+  requestEditItem,
 
   accounts,
-  categories,
+  itemDetail,
+  onFormSubmit,
+  onCancelForm, 
+  
 
+  // #withDashboard
+    changePageTitle,
+
+ // #withItemCategories
+  categoriesList,
+
+  
+
+// #withMediaActions
   requestSubmitMedia,
   requestDeleteMedia,
+
+  
 }) => {
+
   const [selectedAccounts, setSelectedAccounts] = useState({});
+  const [payload, setPayload] = useState({});
+  
   const history = useHistory();
   const { formatMessage } = useIntl();
-
+  const {id} =useParams();
   const {
     files,
     setFiles,
@@ -81,7 +106,7 @@ const ItemForm = ({
     stock: Yup.string() || Yup.boolean(),
   });
 
-  const initialValues = useMemo(
+  const defaultInitialValues = useMemo(
     () => ({
       active: true,
       name: '',
@@ -97,6 +122,24 @@ const ItemForm = ({
     }),
     []
   );
+  const initialValues = useMemo(() => ({
+    ...(itemDetail) ? {
+      ...pick(itemDetail, Object.keys(defaultInitialValues)),
+ 
+    } : {
+      ...defaultInitialValues,
+    }
+  }), [itemDetail, defaultInitialValues]);
+
+  const saveInvokeSubmit = useCallback((payload) => {
+    onFormSubmit && onFormSubmit(payload)
+  }, [onFormSubmit]);
+
+  useEffect(() => {
+    itemDetail && itemDetail.id ?
+      changePageTitle(formatMessage({id:'edit_item_details'})) :
+      changePageTitle(formatMessage({id:'new_item'}));
+  }, [changePageTitle,itemDetail]);
 
   const {
     getFieldProps,
@@ -112,24 +155,49 @@ 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);
+            saveInvokeSubmit({action:'update',...payload})
+            history.push('/items');
+            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 +220,7 @@ const ItemForm = ({
     []
   );
 
+
   // Filter Account Items
   const filterAccounts = (query, account, _index, exactMatch) => {
     const normalizedTitle = account.name.toLowerCase();
@@ -163,6 +232,7 @@ const ItemForm = ({
     }
   };
 
+  
   const onItemAccountSelect = useCallback(
     (filedName) => {
       return (account) => {
@@ -183,6 +253,7 @@ const ItemForm = ({
     []
   );
 
+
   const getSelectedAccountLabel = useCallback(
     (fieldName, defaultLabel) => {
       return typeof selectedAccounts[fieldName] !== 'undefined'
@@ -199,10 +270,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 +376,7 @@ const ItemForm = ({
                 )}
               >
                 <Select
-                  items={categories}
+                  items={categoriesList}
                   itemRenderer={categoryItem}
                   itemPredicate={filterAccounts}
                   popoverProps={{ minimal: true }}
@@ -532,7 +611,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 +629,15 @@ const ItemForm = ({
 };
 
 export default compose(
-  AccountsConnect,
-  ItemsConnect,
-  ItemCategoryConnect,
-  MediaConnect
+  withAccounts(({accounts})=>({
+    accounts,
+  })),
+  withAccountDetail,
+  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/ItemsActionsBar.js

@@ -17,7 +17,7 @@ import { compose } from 'utils';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import Icon from 'components/Icon';
 import FilterDropdown from 'components/FilterDropdown';
-import DialogConnect from 'connectors/Dialog.connector';
+import withDialog from 'connectors/Dialog.connector';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withItems from 'containers/Items/withItems';
 import { If } from 'components';
@@ -34,6 +34,7 @@ const ItemsActionsBar = ({
 
   onFilterChanged,
   selectedRows = [],
+  onBulkDelete,
 }) => {
   const { path } = useRouteMatch();
   const history = useHistory();
@@ -43,9 +44,11 @@ const ItemsActionsBar = ({
     <MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />
   ));
 
-  const onClickNewItem = () => {
+ 
+  const onClickNewItem = useCallback(() => {
     history.push('/items/new');
-  };
+  }, [history]);
+
   const hasSelectedRows = useMemo(() => selectedRows.length > 0, [
     selectedRows,
   ]);
@@ -61,6 +64,11 @@ const ItemsActionsBar = ({
   const onClickNewCategory = useCallback(() => {
     openDialog('item-form', {});
   }, [openDialog]);
+  
+  const handleBulkDelete = useCallback(() => {
+    onBulkDelete && onBulkDelete(selectedRows.map(r => r.id));
+  }, [onBulkDelete, selectedRows]);
+
 
   return (
     <DashboardActionsBar>
@@ -116,9 +124,10 @@ const ItemsActionsBar = ({
         <If condition={hasSelectedRows}>
           <Button
             className={Classes.MINIMAL}
+            icon={<Icon icon='trash' iconSize={15} />}
+            text={<T id={'delete'}/>}
             intent={Intent.DANGER}
-            icon={<Icon icon='trash' />}
-            text={<T id={'delete'} />}
+            onClick={handleBulkDelete}
           />
         </If>
 
@@ -138,7 +147,7 @@ const ItemsActionsBar = ({
 };
 
 export default compose(
-  DialogConnect,
+  withDialog,
   withItems(({ itemsViews }) => ({
     itemsViews,
   })),

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',
@@ -130,12 +137,16 @@ const ItemsDataTable = ({
         onFetchData={handleFetchData}
         loading={itemsTableLoading && !initialMount}
         noInitialFetch={true}
+        expandable={true} 
+        treeGraph={true}
+        spinnerProps={{size: 30}}
         onSelectedRowsChange={handleSelectedRowsChange} />
     </LoadingIndicator>
   );
 };
 
 export default compose(
+
   withItems(({ itemsCurrentPage, itemsTableLoading }) => ({
     itemsCurrentPage,
     itemsTableLoading,

client/src/containers/Items/ItemsList.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useCallback, useState,useMemo } from 'react';
 import {
   Route,
   Switch,
+  useHistory
 } from 'react-router-dom';
 import {
   Intent,
@@ -42,13 +43,17 @@ function ItemsList({
   requestDeleteItem,
   requestFetchItems,
   addItemsTableQueries,
+  requestDeleteBulkItems,
 }) {
   const [deleteItem, setDeleteItem] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
   const [tableLoading, setTableLoading] = useState(false);
+  const [bulkDelete, setBulkDelete] = useState(false);
 
   const { formatMessage } = useIntl();
 
+  const history = useHistory();
+
   useEffect(() => {
     changePageTitle(formatMessage({id:'items_list'}));
   }, [changePageTitle]);
@@ -68,7 +73,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(() => {
@@ -120,15 +132,46 @@ function ItemsList({
   const handleSelectedRowsChange = useCallback((accounts) => {
     setSelectedRows(accounts);
   }, [setSelectedRows]);
-  
+ 
+   // Calculates the data table selected rows count.
+   const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [selectedRows]);
+
+ 
+
+  // Handle items bulk delete button click.,
+
+  const handleBulkDelete = useCallback((itemsIds) => {
+    setBulkDelete(itemsIds);
+  }, [setBulkDelete]);
+
+   // Handle confirm items bulk delete.
+   const handleConfirmBulkDelete = useCallback(() => {
+    requestDeleteBulkItems(bulkDelete).then(() => {
+      setBulkDelete(false);
+      AppToaster.show({
+        message: formatMessage({ id: 'the_items_has_been_successfully_deleted' }),
+        intent: Intent.SUCCESS,
+      });
+    }).catch((errors) => {
+      setBulkDelete(false);
+    });
+  }, [requestDeleteBulkItems, bulkDelete]);
+
+    // Handle cancel accounts bulk delete.
+    const handleCancelBulkDelete = useCallback(() => {
+      setBulkDelete(false);
+    }, []);
+
+
   return (
     <DashboardInsider
       isLoading={fetchHook.isFetching}
       name={'items-list'}>
 
       <ItemsActionsBar
+        selectedRows={selectedRows} 
         onFilterChanged={handleFilterChanged}
-        selectedRows={selectedRows} />
+        onBulkDelete={handleBulkDelete}/>
 
       <DashboardPageContent>
         <Switch>
@@ -161,6 +204,20 @@ function ItemsList({
                   id={'once_delete_this_item_you_will_able_to_restore_it'} />
               </p>
             </Alert>
+
+            <Alert
+          cancelButtonText={<T id={'cancel'}/>}
+          confirmButtonText={`${formatMessage({id:'delete'})} (${selectedRowsCount})`}
+          icon="trash"
+          intent={Intent.DANGER}
+          isOpen={bulkDelete}
+          onCancel={handleCancelBulkDelete}
+          onConfirm={handleConfirmBulkDelete}
+        >
+          <p>
+            <T id={'once_delete_these_items_you_will_not_able_restore_them'} />
+          </p>
+        </Alert>
           </Route>
         </Switch>
       </DashboardPageContent>

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,13 +3,17 @@ import {
   fetchItems,
   deleteItem,
   submitItem,
+  editItem,
+  deleteBulkItems
 } from 'store/items/items.actions';
 import t from 'store/types';
 
 export const mapDispatchToProps = (dispatch) => ({
   requestFetchItems: (query) => dispatch(fetchItems({ query })),
   requestDeleteItem: (id) => dispatch(deleteItem({ id })),
+  requestDeleteBulkItems:(ids)=>dispatch(deleteBulkItems({ids})),
   requestSubmitItem: (form) => dispatch(submitItem({ form })),
+  requestEditItem:(id,form) => dispatch(editItem({id,form})),
   addBulkActionItem: (id) => dispatch({
     type: t.ITEM_BULK_ACTION_ADD, itemId: id
   }),

client/src/lang/en/index.js

@@ -322,7 +322,10 @@ export default {
   organization_industry_:'Organization industry',
   base_currency_:'Base currency',
   date_format_:'Date format',
-  view_name_:'View name'
+  category_name_:'Category name',
+  view_name_:'View name',
+  the_items_has_been_successfully_deleted: 'The items have been successfully deleted.',
+  once_delete_these_items_you_will_not_able_restore_them: 'Once you delete these items, you won\'t be able to retrieve them later. Are you sure you want to delete them?',
 };
 
 

client/src/routes/dashboard.js

@@ -82,6 +82,13 @@ export default [
     }),
     breadcrumb: 'Categories',
   },
+  {
+    path: `/items/:id/edit`,
+    component: LazyLoader({
+      loader: () => import('containers/Items/ItemFormPage'),
+    }),
+    breadcrumb: 'Edit Item',
+  },
   {
     path: `/items/new`,
     component: LazyLoader({

client/src/store/items/items.actions.js

@@ -76,3 +76,19 @@ export const deleteItem = ({ id }) => {
       }).catch((error) => { reject(error); });
   });
 };
+
+
+
+export const deleteBulkItems = ({ ids }) => {
+  return dispatch => new Promise((resolve, reject) => {
+    ApiService.delete(`items`, { params: { ids }}).then((response) => {
+      dispatch({
+        type: t.ITEMS_BULK_DELETE,
+        payload: { ids }
+      });
+      resolve(response);
+    }).catch((error) => {
+      reject(error);
+    });
+  });
+};

client/src/store/items/items.types.js

@@ -12,4 +12,6 @@ export default {
 
   ITEMS_TABLE_LOADING: 'ITEMS_TABLE_LOADING',
   ITEMS_SET_CURRENT_VIEW: 'ITEMS_SET_CURRENT_VIEW',
+  ITEMS_BULK_DELETE:'ITEMS_BULK_DELETE'
+
 };