feat: activate & inactive item.

client/src/containers/Items/ItemsDataTable.js

@@ -12,7 +12,14 @@ import {
 import { FormattedMessage as T, useIntl } from 'react-intl';
 import classNames from 'classnames';
 
-import { Icon, DataTable, Money, LoadingIndicator, Choose } from 'components';
+import {
+  Icon,
+  DataTable,
+  Money,
+  LoadingIndicator,
+  Choose,
+  If,
+} from 'components';
 import ItemsEmptyStatus from './ItemsEmptyStatus';
 import { useIsValuePassed } from 'hooks';
 import { CLASSES } from 'common/classes';
@@ -36,6 +43,8 @@ function ItemsDataTable({
   // props
   onEditItem,
   onDeleteItem,
+  onInactiveItem,
+  onActivateItem,
   onSelectedRowsChange,
 }) {
   const { formatMessage } = useIntl();
@@ -83,6 +92,20 @@ function ItemsDataTable({
           text={formatMessage({ id: 'edit_item' })}
           onClick={handleEditItem(item)}
         />
+        <If condition={item.active}>
+          <MenuItem
+            text={formatMessage({ id: 'inactivate_item' })}
+            icon={<Icon icon="pause-16" iconSize={16} />}
+            onClick={() => onInactiveItem(item)}
+          />
+        </If>
+        <If condition={!item.active}>
+          <MenuItem
+            text={formatMessage({ id: 'activate_item' })}
+            icon={<Icon icon="play-16" iconSize={16} />}
+            onClick={() => onActivateItem(item)}
+          />
+        </If>
         <MenuItem
           text={formatMessage({ id: 'delete_item' })}
           icon={<Icon icon="trash-16" iconSize={16} />}
@@ -91,7 +114,13 @@ function ItemsDataTable({
         />
       </Menu>
     ),
-    [handleEditItem, handleDeleteItem, formatMessage],
+    [
+      handleEditItem,
+      handleDeleteItem,
+      onInactiveItem,
+      onActivateItem,
+      formatMessage,
+    ],
   );
 
   const handleRowContextMenu = useCallback(
@@ -196,6 +225,12 @@ function ItemsDataTable({
     [onSelectedRowsChange],
   );
 
+  const rowClassNames = (row) => {
+    return {
+      inactive: !row.original.active,
+    };
+  };
+
   const showEmptyStatus = [
     itemsCurrentPage.length === 0,
     itemsCurrentViewId === -1,
@@ -221,6 +256,7 @@ function ItemsDataTable({
               rowContextMenu={handleRowContextMenu}
               expandable={false}
               sticky={true}
+              rowClassNames={rowClassNames}
               pagination={true}
               pagesCount={itemsPagination.pagesCount}
               autoResetSortBy={false}

client/src/containers/Items/ItemsList.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import { Route, Switch, useHistory } from 'react-router-dom';
 import { Intent, Alert } from '@blueprintjs/core';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import {
   FormattedMessage as T,
   FormattedHTMLMessage,
@@ -38,10 +38,14 @@ function ItemsList({
   // #withItemsActions
   requestDeleteItem,
   requestFetchItems,
+  requestInactiveItem,
+  requestActivateItem,
   addItemsTableQueries,
   requestDeleteBulkItems,
 }) {
   const [deleteItem, setDeleteItem] = useState(false);
+  const [inactiveItem, setInactiveItem] = useState(false);
+  const [activateItem, setActivateItem] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
   const [bulkDelete, setBulkDelete] = useState(false);
 
@@ -65,9 +69,8 @@ function ItemsList({
   );
 
   // Handle fetching the items table based on the given query.
-  const fetchItems = useQuery(
+  const fetchItems = useQuery(['items-table', itemsTableQuery], (key, _query) =>
-    ['items-table', itemsTableQuery],
+    requestFetchItems({ ..._query }),
-    (key, _query) => requestFetchItems({ ..._query }),
   );
 
   // Handle click delete item.
@@ -92,7 +95,8 @@ function ItemsList({
 
   // handle confirm delete item.
   const handleConfirmDeleteItem = useCallback(() => {
-    requestDeleteItem(deleteItem.id).then(() => {
+    requestDeleteItem(deleteItem.id)
+      .then(() => {
         AppToaster.show({
           message: formatMessage({
             id: 'the_item_has_been_successfully_deleted',
@@ -100,8 +104,13 @@ function ItemsList({
           intent: Intent.SUCCESS,
         });
         setDeleteItem(false);
-    }).catch(({ errors }) => {
+      })
-      if (errors.find(error => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS')) {
+      .catch(({ errors }) => {
+        if (
+          errors.find(
+            (error) => error.type === 'ITEM_HAS_ASSOCIATED_TRANSACTINS',
+          )
+        ) {
           AppToaster.show({
             message: formatMessage({
               id: 'the_item_has_associated_transactions',
@@ -113,12 +122,9 @@ function ItemsList({
       });
   }, [requestDeleteItem, deleteItem, formatMessage]);
 
-  const handleFetchData = useCallback(
+  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {}, [
-    ({ pageIndex, pageSize, sortBy }) => {
+    addItemsTableQueries,
-     
+  ]);
-    },
-    [addItemsTableQueries],
-  );
 
   // Handle filter change to re-fetch the items.
   const handleFilterChanged = useCallback(
@@ -174,6 +180,62 @@ function ItemsList({
     setBulkDelete(false);
   }, []);
 
+  // Handle cancel/confirm item inactive.
+  const handleInactiveItem = useCallback((item) => {
+    setInactiveItem(item);
+  }, []);
+
+  // Handle cancel inactive item alert.
+  const handleCancelInactiveItem = useCallback(() => {
+    setInactiveItem(false);
+  }, []);
+
+  // Handle confirm item Inactive.
+  const handleConfirmItemInactive = useCallback(() => {
+    requestInactiveItem(inactiveItem.id)
+      .then(() => {
+        setInactiveItem(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_has_been_successfully_inactivated',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('items-table');
+      })
+      .catch((error) => {
+        setInactiveItem(false);
+      });
+  }, [inactiveItem, requestInactiveItem, formatMessage]);
+
+  // Handle activate item click.
+  const handleActivateItem = useCallback((item) => {
+    setActivateItem(item);
+  });
+
+  // Handle activate item alert cancel.
+  const handleCancelActivateItem = useCallback(() => {
+    setActivateItem(false);
+  });
+
+  // Handle activate item confirm.
+  const handleConfirmItemActivate = useCallback(() => {
+    requestActivateItem(activateItem.id)
+      .then(() => {
+        setActivateItem(false);
+        AppToaster.show({
+          message: formatMessage({
+            id: 'the_item_has_been_successfully_activated',
+          }),
+          intent: Intent.SUCCESS,
+        });
+        queryCache.invalidateQueries('items-table');
+      })
+      .catch((error) => {
+        setActivateItem(false);
+      });
+  }, [activateItem, requestActivateItem, formatMessage]);
+
   return (
     <DashboardInsider
       loading={fetchResourceViews.isFetching || fetchResourceFields.isFetching}
@@ -196,6 +258,8 @@ function ItemsList({
             <ItemsDataTable
               onDeleteItem={handleDeleteItem}
               onEditItem={handleEditItem}
+              onInactiveItem={handleInactiveItem}
+              onActivateItem={handleActivateItem}
               onSelectedRowsChange={handleSelectedRowsChange}
             />
             <Alert
@@ -231,6 +295,30 @@ function ItemsList({
                 />
               </p>
             </Alert>
+            <Alert
+              cancelButtonText={<T id={'cancel'} />}
+              confirmButtonText={<T id={'inactivate'} />}
+              intent={Intent.WARNING}
+              isOpen={inactiveItem}
+              onCancel={handleCancelInactiveItem}
+              onConfirm={handleConfirmItemInactive}
+            >
+              <p>
+                <T id={'are_sure_to_inactive_this_item'} />
+              </p>
+            </Alert>
+            <Alert
+              cancelButtonText={<T id={'cancel'} />}
+              confirmButtonText={<T id={'activate'} />}
+              intent={Intent.WARNING}
+              isOpen={activateItem}
+              onCancel={handleCancelActivateItem}
+              onConfirm={handleConfirmItemActivate}
+            >
+              <p>
+                <T id={'are_sure_to_activate_this_item'} />
+              </p>
+            </Alert>
           </Route>
         </Switch>
       </DashboardPageContent>

client/src/containers/Items/withItemsActions.js

@@ -6,6 +6,8 @@ import {
   submitItem,
   editItem,
   deleteBulkItems,
+  activateItem,
+  inactiveItem,
 } from 'store/items/items.actions';
 import t from 'store/types';
 
@@ -16,6 +18,8 @@ export const mapDispatchToProps = (dispatch) => ({
   requestDeleteBulkItems: (ids) => dispatch(deleteBulkItems({ ids })),
   requestSubmitItem: (form) => dispatch(submitItem({ form })),
   requestEditItem: (id, form) => dispatch(editItem({ id, form })),
+  requestInactiveItem: (id) => dispatch(inactiveItem({ id })),
+  requestActivateItem: (id) => dispatch(activateItem({ id })),
   addBulkActionItem: (id) =>
     dispatch({
       type: t.ITEM_BULK_ACTION_ADD,

client/src/lang/en/index.js

@@ -920,7 +920,15 @@ export default {
   mark_as_rejected: 'Mark as rejected',
   delivered: 'Delivered',
   rejected: 'Rejected',
-  approved:'Approved'
+  approved: 'Approved',
-
+  the_item_has_been_successfully_inactivated:
-
+    'The item has been successfully inactivated.',
+  the_item_has_been_successfully_activated:
+    'The item has been successfully activated.',
+  are_sure_to_inactive_this_item:
+    'Are you sure you want to inactive this item? You will be able to activate it later',
+  are_sure_to_activate_this_item:
+    'Are you sure you want to activate this item? You will be able to inactivate it later',
+    inactivate_item: 'Inactivate Item',
+    activate_item: 'Activate Item',
   };

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

@@ -105,3 +105,11 @@ export const deleteBulkItems = ({ ids }) => {
         });
     });
 };
+
+export const activateItem = ({ id }) => {
+  return (dispatch) => ApiService.post(`items/${id}/activate`);
+};
+
+export const inactiveItem = ({ id }) => {
+  return (dispatch) => ApiService.post(`items/${id}/inactivate`);
+};

client/src/style/pages/items.scss

@@ -1,4 +1,3 @@
-
 .page-form--item {
   $self: '.page-form';
   padding: 20px;
@@ -21,7 +20,6 @@
       margin-bottom: 14px;
 
       &.bp3-inline {
-  
         .bp3-label {
           min-width: 140px;
         }
@@ -38,7 +36,6 @@
     }
 
     .bp3-control {
-      
       h3 {
         display: inline;
         margin-bottom: 0;
@@ -82,21 +79,22 @@
   }
 }
 
-
-
 .dashboard__insider--items-list {
-
-
   .bigcapital-datatable {
-
     .table {
       .tbody {
         .item_type.td {
-
           .bp3-tag {
             font-size: 13px;
           }
         }
+        .tr.inactive .td {
+          color: #646b82;
+
+          &.normal .#{$ns}-icon {
+            color: #9eaab6;
+          }
+        }
       }
     }
   }