Fix bugs.

client/src/containers/Items/ItemCategoriesList.js

@@ -1,15 +1,19 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from 'react-query';
+import { Alert, Intent } from '@blueprintjs/core';
+import { FormattedMessage as T, FormattedHTMLMessage, useIntl } from 'react-intl';
 
+import AppToaster from 'components/AppToaster';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
 import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
 
+import withDialog from 'connectors/Dialog.connector';
 import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
+
 import { compose } from 'utils';
-import { FormattedMessage as T, useIntl } from 'react-intl';
 
 
 const ItemCategoryList = ({
@@ -18,18 +22,27 @@ const ItemCategoryList = ({
 
   // #withItemCategoriesActions
   requestFetchItemCategories,
+  requestDeleteItemCategory,
+
+  // #withDialog
+  openDialog,
 }) => {
   const { id } = useParams();
+
   const [selectedRows, setSelectedRows] = useState([]);
-  const {formatMessage} =useIntl()
+  const [filter, setFilter] = useState({});
+  const [deleteCategory, setDeleteCategory] = useState(false);
+
+  const {formatMessage} = useIntl();
+
   useEffect(() => {
     id
-      ? changePageTitle(formatMessage({id:'edit_category_details'}))
-      : changePageTitle(formatMessage({id:'category_list'}));
+      ? changePageTitle(formatMessage({ id:'edit_category_details' }))
+      : changePageTitle(formatMessage({ id:'category_list' }));
   }, []);
 
-  const fetchCategories = useQuery('items-categories-table',
-    () => { requestFetchItemCategories(); });
+  const fetchCategories = useQuery(['items-categories-table', filter],
+    (key, query) => requestFetchItemCategories(query));
 
   const handleFilterChanged = useCallback(() => { 
     
@@ -40,6 +53,40 @@ const ItemCategoryList = ({
     setSelectedRows(itemCategories);
   }, [setSelectedRows]);
 
+  // Handle fetch data of accounts datatable.
+  const handleFetchData = useCallback(({ pageIndex, pageSize, sortBy }) => {
+    setFilter({
+      ...(sortBy.length > 0
+        ? {
+            column_sort_by: sortBy[0].id,
+            sort_order: sortBy[0].desc ? 'desc' : 'asc',
+          }
+        : {}),
+    });
+  }, []);
+
+  const handleDeleteCategory = (itemCategory) => { setDeleteCategory(itemCategory); };
+  const handleCancelItemDelete = () => { setDeleteCategory(false) };
+
+  // Handle alert confirm delete item category.
+  const handleConfirmItemDelete = () => {
+    requestDeleteItemCategory(deleteCategory.id).then(() => {
+      setDeleteCategory(false);
+      AppToaster.show({
+        message: formatMessage({
+          id: 'the_item_category_has_been_successfully_deleted'
+        }),
+        intent: Intent.SUCCESS,
+      });
+    }).catch(() => {
+      setDeleteCategory(false);
+    });
+  };
+
+  const handleEditCategory = (category) => {
+    openDialog('item-category-form', { action: 'edit', id: category.id });
+  };
+
   return (
     <DashboardInsider name={'item-category-list'}>
       <ItemsCategoryActionsBar
@@ -47,12 +94,31 @@ const ItemCategoryList = ({
         selectedRows={selectedRows} />
 
       <ItemCategoriesDataTable
-        onSelectedRowsChange={handleSelectedRowsChange} />
+        onSelectedRowsChange={handleSelectedRowsChange}
+        onFetchData={handleFetchData}
+        onEditCategory={handleEditCategory}
+        onDeleteCategory={handleDeleteCategory} />
+
+      <Alert
+        cancelButtonText={<T id={'cancel'} />}
+        confirmButtonText={<T id={'delete'} />}
+        icon="trash"
+        intent={Intent.DANGER}
+        isOpen={deleteCategory}
+        onCancel={handleCancelItemDelete}
+        onConfirm={handleConfirmItemDelete}
+      >
+        <p>
+          <FormattedHTMLMessage
+            id={'once_delete_this_item_category_you_will_able_to_restore_it'} />
+        </p>
+      </Alert>
     </DashboardInsider>
   );
 };
 
 export default compose(
   withDashboardActions,
+  withDialog,
   withItemCategoriesActions,
 )(ItemCategoryList);

client/src/containers/Items/ItemCategoriesTable.js

@@ -13,7 +13,6 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import { compose } from 'utils';
 import DataTable from 'components/DataTable';
 
-import DialogConnect from 'connectors/Dialog.connector';
 import withItemCategories from './withItemCategories';
 
 
@@ -25,26 +24,21 @@ const ItemsCategoryList = ({
   onFetchData,
   onDeleteCategory,
   onEditCategory,
-  openDialog,
   onSelectedRowsChange,
 }) => {
-
   const {formatMessage} = useIntl();
-  const handelEditCategory = (category) => () => {
-    openDialog('item-form', { action: 'edit', id: category.id });
-    onEditCategory(category.id);
-  };
 
-  const handleDeleteCategory = (category) => () => {
-    onDeleteCategory(category);
-  };
+  const handelEditCategory = (category) => { onEditCategory(category); };
+  const handleDeleteCategory = (category) => { onDeleteCategory(category); };
 
   const actionMenuList = (category) => (
     <Menu>
-      <MenuItem text={<T id={'edit_category'} />} onClick={handelEditCategory(category)} />
+      <MenuItem
+        text={<T id={'edit_category'} />}
+        onClick={() => handelEditCategory(category)} />
       <MenuItem
         text={<T id={'delete_category'}/>}
-        onClick={handleDeleteCategory(category)}
+        onClick={() => handleDeleteCategory(category)}
       />
     </Menu>
   );
@@ -87,8 +81,8 @@ const ItemsCategoryList = ({
     },
   ], [actionMenuList]);
 
-  const handelFetchData = useCallback(() => {
-    onFetchData && onFetchData();
+  const handelFetchData = useCallback((...params) => {
+    onFetchData && onFetchData(...params);
   }, []);
 
   const handleSelectedRowsChange = useCallback((selectedRows) => {
@@ -111,7 +105,6 @@ const ItemsCategoryList = ({
 };
 
 export default compose(
-  DialogConnect,
   withItemCategories(({ categoriesList }) => ({
     categoriesList,
   })),

client/src/containers/Items/ItemForm.js

@@ -14,6 +14,7 @@ import {
 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 AppToaster from 'components/AppToaster';
 import AccountsConnect from 'connectors/Accounts.connector';
@@ -55,15 +56,12 @@ const ItemForm = ({
     deleteCallback: requestDeleteMedia,
   });
 
-  const ItemTypeDisplay = useMemo(
-    () => [
-      { value: null, label: 'Select Item Type' },
-      { value: 'service', label: 'Service' },
-      { value: 'inventory', label: 'Inventory' },
-      { value: 'non-inventory', label: 'Non-Inventory' },
-    ],
-    []
-  );
+  const ItemTypeDisplay = useMemo(() => [
+    { value: null, label: 'Select Item Type' },
+    { value: 'service', label: 'Service' },
+    { value: 'inventory', label: 'Inventory' },
+    { value: 'non-inventory', label: 'Non-Inventory' },
+  ], []);
 
   const validationSchema = Yup.object().shape({
     active: Yup.boolean(),
@@ -128,6 +126,8 @@ const ItemForm = ({
             }),
             intent: Intent.SUCCESS,
           });
+          queryCache.removeQueries(['items-table']);
+          history.push('/dashboard/items');
         });
       };
 

client/src/containers/Items/withItemCategoriesActions.js

@@ -8,7 +8,7 @@ import {
 
 export const mapDispatchToProps = (dispatch) => ({
   requestSubmitItemCategory: (form) => dispatch(submitItemCategory({ form })),
-  requestFetchItemCategories: () => dispatch(fetchItemCategories()),
+  requestFetchItemCategories: (query) => dispatch(fetchItemCategories({ query })),
   requestDeleteItemCategory: (id) => dispatch(deleteItemCategory(id)),
   requestEditItemCategory: (id, form) => dispatch(editItemCategory(id, form)),
 });