diff --git a/client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js b/client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js new file mode 100644 index 000000000..57f862073 --- /dev/null +++ b/client/src/containers/Alerts/Item/InventoryAdjustmentDeleteAlert.js @@ -0,0 +1,81 @@ +import React from 'react'; +import { + FormattedMessage as T, + FormattedHTMLMessage, + useIntl, +} from 'react-intl'; +import { Intent, Alert } from '@blueprintjs/core'; +import { queryCache } from 'react-query'; +import { AppToaster } from 'components'; + +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; +import withInventoryAdjustmentActions from 'containers/Items/withInventoryAdjustmentActions'; + +import { compose } from 'utils'; + +/** + * Inventory Adjustment delete alerts. + */ +function InventoryAdjustmentDeleteAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { inventoryId }, + // #withInventoryAdjustmentActions + requestDeleteInventoryAdjustment, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // handle cancel delete alert. + const handleCancelInventoryAdjustmentDelete = () => { + closeAlert(name); + }; + + const handleConfirmInventoryAdjustmentDelete = () => { + requestDeleteInventoryAdjustment(inventoryId) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_adjustment_has_been_deleted_successfully', + }), + intent: Intent.SUCCESS, + }); + queryCache.invalidateQueries('inventory-adjustment-list'); + }) + .catch((errors) => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={} + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelInventoryAdjustmentDelete} + onConfirm={handleConfirmInventoryAdjustmentDelete} + > +

+ +

+
+ ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withInventoryAdjustmentActions, +)(InventoryAdjustmentDeleteAlert); diff --git a/client/src/containers/Alerts/Item/ItemActivateAlert.js b/client/src/containers/Alerts/Item/ItemActivateAlert.js new file mode 100644 index 000000000..8af112266 --- /dev/null +++ b/client/src/containers/Alerts/Item/ItemActivateAlert.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { + FormattedMessage as T, + useIntl, +} from 'react-intl'; +import { Intent, Alert } from '@blueprintjs/core'; +import { queryCache } from 'react-query'; +import { AppToaster } from 'components'; + +import withItemsActions from 'containers/Items/withItemsActions'; +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; + +import { compose } from 'utils'; + +/** + * Item activate alert. + */ +function ItemActivateAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { itemId }, + + // #withItemsActions + requestActivateItem, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // Handle activate item alert cancel. + const handleCancelActivateItem = () => { + closeAlert(name); + }; + + // Handle confirm item activated. + const handleConfirmItemActivate = () => { + requestActivateItem(itemId) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_item_has_been_activated_successfully', + }), + intent: Intent.SUCCESS, + }); + queryCache.invalidateQueries('items-table'); + }) + .catch((error) => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={} + intent={Intent.WARNING} + isOpen={isOpen} + onCancel={handleCancelActivateItem} + onConfirm={handleConfirmItemActivate} + > +

+ +

+
+ ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withItemsActions, +)(ItemActivateAlert); diff --git a/client/src/containers/Alerts/Item/ItemBulkDeleteAlert.js b/client/src/containers/Alerts/Item/ItemBulkDeleteAlert.js new file mode 100644 index 000000000..0aa178eb5 --- /dev/null +++ b/client/src/containers/Alerts/Item/ItemBulkDeleteAlert.js @@ -0,0 +1,74 @@ +import React from 'react'; +import { FormattedMessage as T, useIntl } from 'react-intl'; +import { Intent, Alert } from '@blueprintjs/core'; +import { AppToaster } from 'components'; + +import withItemsActions from 'containers/Items/withItemsActions'; +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; + +import { compose } from 'utils'; + +/** + * Item bulk delete alert. + */ +function ItemBulkDeleteAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { itemsIds }, + + // #withItemsActions + requestDeleteBulkItems, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // handle cancel item bulk delete alert. + const handleCancelBulkDelete = () => { + closeAlert(name); + }; + // Handle confirm items bulk delete. + const handleConfirmBulkDelete = () => { + requestDeleteBulkItems(itemsIds) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_items_has_been_deleted_successfully', + }), + intent: Intent.SUCCESS, + }); + }) + .catch((errors) => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={ + + } + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelBulkDelete} + onConfirm={handleConfirmBulkDelete} + > +

+ +

+
+ ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withItemsActions, +)(ItemBulkDeleteAlert); diff --git a/client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js b/client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js new file mode 100644 index 000000000..644ca020d --- /dev/null +++ b/client/src/containers/Alerts/Item/ItemCategoryBulkDeleteAlert.js @@ -0,0 +1,82 @@ +import React from 'react'; +import { + FormattedMessage as T, + FormattedHTMLMessage, + useIntl, +} from 'react-intl'; +import { Intent, Alert } from '@blueprintjs/core'; +import { AppToaster } from 'components'; + +import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions'; +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; + +import { compose } from 'utils'; + +/** + * Item category bulk delete alerts. + */ +function ItemCategoryBulkDeleteAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { itemCategoriesIds }, + + // #withItemCategoriesActions + requestDeleteBulkItemCategories, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // handle cancel bulk delete alert. + const handleCancelBulkDelete = () => { + closeAlert(name); + }; + + // handle confirm itemCategories bulk delete. + const handleConfirmBulkDelete = () => { + requestDeleteBulkItemCategories(itemCategoriesIds) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_item_categories_has_been_deleted_successfully', + }), + intent: Intent.SUCCESS, + }); + }) + .catch((errors) => { + closeAlert(name); + }); + }; + return ( + } + confirmButtonText={ + + } + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelBulkDelete} + onConfirm={handleConfirmBulkDelete} + > +

+ +

+
+ ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withItemCategoriesActions, +)(ItemCategoryBulkDeleteAlert); diff --git a/client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js b/client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js new file mode 100644 index 000000000..85e7c30a0 --- /dev/null +++ b/client/src/containers/Alerts/Item/ItemCategoryDeleteAlert.js @@ -0,0 +1,81 @@ +import React from 'react'; +import { + FormattedMessage as T, + FormattedHTMLMessage, + useIntl, +} from 'react-intl'; +import { Intent, Alert } from '@blueprintjs/core'; +import { AppToaster } from 'components'; +import { queryCache } from 'react-query'; + +import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions'; +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; + +import { compose } from 'utils'; + +/** + * Item Category delete alerts. + */ +function ItemCategoryDeleteAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { itemCategoryId }, + + // #withItemCategoriesActions + requestDeleteItemCategory, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // handle cancel delete item category alert. + const handleCancelItemCategoryDelete = () => { + closeAlert(name); + }; + + // Handle alert confirm delete item category. + const handleConfirmItemDelete = () => { + requestDeleteItemCategory(itemCategoryId) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_item_category_has_been_deleted_successfully', + }), + intent: Intent.SUCCESS, + }); + queryCache.invalidateQueries('items-categories-list'); + }) + .catch(() => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={} + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelItemCategoryDelete} + onConfirm={handleConfirmItemDelete} + > +

+ +

+
+ ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withItemCategoriesActions, +)(ItemCategoryDeleteAlert); diff --git a/client/src/containers/Alerts/Item/ItemDeleteAlert.js b/client/src/containers/Alerts/Item/ItemDeleteAlert.js new file mode 100644 index 000000000..529caa4aa --- /dev/null +++ b/client/src/containers/Alerts/Item/ItemDeleteAlert.js @@ -0,0 +1,83 @@ +import React from 'react'; +import { + FormattedMessage as T, + FormattedHTMLMessage, + useIntl, +} from 'react-intl'; +import { Intent, Alert } from '@blueprintjs/core'; +import { queryCache } from 'react-query'; +import { AppToaster } from 'components'; + +import { handleDeleteErrors } from 'containers/Items/utils'; + +import withItemsActions from 'containers/Items/withItemsActions'; +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; + +import { compose } from 'utils'; + +/** + * Item delete alerts. + */ +function ItemDeleteAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { itemId }, + + // #withItemsActions + requestDeleteItem, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // handle cancel delete item alert. + const handleCancelItemDelete = () => { + closeAlert(name); + }; + + const handleConfirmDeleteItem = () => { + requestDeleteItem(itemId) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_item_has_been_deleted_successfully', + }), + intent: Intent.SUCCESS, + }); + queryCache.invalidateQueries('items-table'); + }) + .catch(({ errors }) => { + handleDeleteErrors(errors); + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={} + icon="trash" + intent={Intent.DANGER} + isOpen={isOpen} + onCancel={handleCancelItemDelete} + onConfirm={handleConfirmDeleteItem} + > +

+ +

+
+ ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withItemsActions, +)(ItemDeleteAlert); diff --git a/client/src/containers/Alerts/Item/ItemInactivateAlert.js b/client/src/containers/Alerts/Item/ItemInactivateAlert.js new file mode 100644 index 000000000..975f2ca00 --- /dev/null +++ b/client/src/containers/Alerts/Item/ItemInactivateAlert.js @@ -0,0 +1,77 @@ +import React from 'react'; +import { + FormattedMessage as T, + useIntl, +} from 'react-intl'; +import { Intent, Alert } from '@blueprintjs/core'; +import { queryCache } from 'react-query'; +import { AppToaster } from 'components'; + +import withItemsActions from 'containers/Items/withItemsActions'; +import withAlertStoreConnect from 'containers/Alert/withAlertStoreConnect'; +import withAlertActions from 'containers/Alert/withAlertActions'; + +import { compose } from 'utils'; + +/** + * Item inactivate alert. + */ +function ItemInactivateAlert({ + name, + + // #withAlertStoreConnect + isOpen, + payload: { itemId }, + + // #withItemsActions + requestInactiveItem, + + // #withAlertActions + closeAlert, +}) { + const { formatMessage } = useIntl(); + + // handle cancel inactivate alert. + const handleCancelInactivateItem = () => { + closeAlert(name); + }; + + // Handle confirm item Inactive. + const handleConfirmItemInactive = () => { + requestInactiveItem(itemId) + .then(() => { + closeAlert(name); + AppToaster.show({ + message: formatMessage({ + id: 'the_item_has_been_inactivated_successfully', + }), + intent: Intent.SUCCESS, + }); + queryCache.invalidateQueries('items-table'); + }) + .catch((error) => { + closeAlert(name); + }); + }; + + return ( + } + confirmButtonText={} + intent={Intent.WARNING} + isOpen={isOpen} + onCancel={handleCancelInactivateItem} + onConfirm={handleConfirmItemInactive} + > +

+ +

+
+ ); +} + +export default compose( + withAlertStoreConnect(), + withAlertActions, + withItemsActions, +)(ItemInactivateAlert); diff --git a/client/src/containers/Items/InventoryAdjustmentDataTable.js b/client/src/containers/Items/InventoryAdjustmentDataTable.js index 9b898592d..141de6bb2 100644 --- a/client/src/containers/Items/InventoryAdjustmentDataTable.js +++ b/client/src/containers/Items/InventoryAdjustmentDataTable.js @@ -175,22 +175,15 @@ function InventoryAdjustmentDataTable({ }, [addInventoryAdjustmentTableQueries], ); - - + const handleSelectedRowsChange = useCallback( (selectedRows) => { - saveInvoke( - onSelectedRowsChange, - selectedRows.map((s) => s.original), - ); + onSelectedRowsChange && + onSelectedRowsChange(selectedRows.map((s) => s.original)); }, [onSelectedRowsChange], ); - // const showEmptyStatus = [ - - // ].every((condition) => condition === true); - return (
diff --git a/client/src/containers/Items/InventoryAdjustmentList.js b/client/src/containers/Items/InventoryAdjustmentList.js index 6cea5e604..f96093bb7 100644 --- a/client/src/containers/Items/InventoryAdjustmentList.js +++ b/client/src/containers/Items/InventoryAdjustmentList.js @@ -1,19 +1,20 @@ -import React, { useEffect, useState, useCallback, useMemo } from 'react'; +import React, { useEffect, useState, useCallback } from 'react'; import { useQuery } from 'react-query'; -import { Alert, Intent } from '@blueprintjs/core'; +import { Route, Switch } from 'react-router-dom'; import { FormattedMessage as T, useIntl } from 'react-intl'; -import AppToaster from 'components/AppToaster'; import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; import DashboardInsider from 'components/Dashboard/DashboardInsider'; +import ItemsAlerts from './ItemsAlerts'; import InventoryAdjustmentDataTable from './InventoryAdjustmentDataTable'; + import withInventoryAdjustmentActions from './withInventoryAdjustmentActions'; import withInventoryAdjustments from './withInventoryAdjustments'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; +import withAlertsActions from 'containers/Alert/withAlertActions'; import { compose } from 'utils'; -import { Route, Switch } from 'react-router-dom'; /** * Inventory Adjustment List. @@ -25,69 +26,33 @@ function InventoryAdjustmentList({ // #withInventoryAdjustments inventoryAdjustmentTableQuery, + // #withAlertsActions. + openAlert, + // #withInventoryAdjustmentsActions requestFetchInventoryAdjustmentTable, - requestDeleteInventoryAdjustment, + setSelectedRowsInventoryAdjustments, }) { const { formatMessage } = useIntl(); - const [selectedRows, setSelectedRows] = useState([]); - const [deleteInventoryAdjustment, setDeleteInventoryAdjustment] = useState( - false, - ); useEffect(() => { changePageTitle(formatMessage({ id: 'inventory_adjustment_list' })); }, [changePageTitle, formatMessage]); const fetchInventoryAdjustments = useQuery( - ['inventory-adjustment-list' ,inventoryAdjustmentTableQuery], + ['inventory-adjustment-list', inventoryAdjustmentTableQuery], (key, query) => requestFetchInventoryAdjustmentTable({ ...query }), ); // Handle selected rows change. - const handleSelectedRowsChange = useCallback( - (inventory) => { - setSelectedRows(inventory); - }, - [setSelectedRows], - ); - - const handleDeleteInventoryAdjustment = useCallback( - (adjustment) => { - setDeleteInventoryAdjustment(adjustment); - }, - [setDeleteInventoryAdjustment], - ); - - const handleCancelInventoryAdjustmentDelete = useCallback(() => { - setDeleteInventoryAdjustment(false); - }, [setDeleteInventoryAdjustment]); - - const handleConfirmInventoryAdjustmentDelete = useCallback(() => { - requestDeleteInventoryAdjustment(deleteInventoryAdjustment.id) - .then(() => { - setDeleteInventoryAdjustment(false); - AppToaster.show({ - message: formatMessage({ - id: 'the_adjustment_has_been_deleted_successfully', - }), - intent: Intent.SUCCESS, - }); - }) - .catch((errors) => { - setDeleteInventoryAdjustment(false); - }); - }, [ - deleteInventoryAdjustment, - requestDeleteInventoryAdjustment, - formatMessage, - ]); - - // Calculates the data table selected rows count. - const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [ - selectedRows, - ]); + const handleSelectedRowsChange = (selectedRows) => { + const selectedRowsIds = selectedRows.map((r) => r.id); + setSelectedRowsInventoryAdjustments(selectedRowsIds); + }; + const handleDeleteInventoryAdjustment = ({ id }) => { + openAlert('inventory-adjustment-delete', { inventoryId: id }); + }; return ( @@ -95,27 +60,10 @@ function InventoryAdjustmentList({ - } - confirmButtonText={} - icon={'trash'} - intent={Intent.DANGER} - isOpen={deleteInventoryAdjustment} - onCancel={handleCancelInventoryAdjustmentDelete} - onConfirm={handleConfirmInventoryAdjustmentDelete} - > -

- -

-
+
); @@ -127,4 +75,5 @@ export default compose( withInventoryAdjustments(({ inventoryAdjustmentTableQuery }) => ({ inventoryAdjustmentTableQuery, })), + withAlertsActions, )(InventoryAdjustmentList); diff --git a/client/src/containers/Items/ItemCategoriesList.js b/client/src/containers/Items/ItemCategoriesList.js index 55b43bbd2..a3981e7ef 100644 --- a/client/src/containers/Items/ItemCategoriesList.js +++ b/client/src/containers/Items/ItemCategoriesList.js @@ -1,23 +1,20 @@ -import React, { useEffect, useState, useCallback, useMemo } from 'react'; +import React, { useEffect, 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 { FormattedMessage as T, useIntl } from 'react-intl'; -import AppToaster from 'components/AppToaster'; import DashboardPageContent from 'components/Dashboard/DashboardPageContent'; import DashboardInsider from 'components/Dashboard/DashboardInsider'; + +import ItemsAlerts from './ItemsAlerts'; import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable'; import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar'; import withDialogActions from 'containers/Dialog/withDialogActions'; -import withResourceActions from 'containers/Resources/withResourcesActions'; import withDashboardActions from 'containers/Dashboard/withDashboardActions'; import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions'; +import withAlertsActions from 'containers/Alert/withAlertActions'; + import { compose } from 'utils'; /** @@ -27,15 +24,12 @@ const ItemCategoryList = ({ // #withDashboardActions changePageTitle, - // #withViewsActions - requestFetchResourceViews, - requestFetchResourceFields, + // #withAlertsActions. + openAlert, // #withItemCategoriesActions requestFetchItemCategories, - requestDeleteItemCategory, - requestDeleteBulkItemCategories, - addItemCategoriesTableQueries, + setSelectedRowsCategories, // #withDialog openDialog, @@ -43,12 +37,6 @@ const ItemCategoryList = ({ const { id } = useParams(); const { formatMessage } = useIntl(); - const [selectedRows, setSelectedRows] = useState([]); - const [filter, setFilter] = useState({}); - const [deleteCategory, setDeleteCategory] = useState(false); - const [bulkDelete, setBulkDelete] = useState(false); - const [tableLoading, setTableLoading] = useState(false); - useEffect(() => { id ? changePageTitle(formatMessage({ id: 'edit_category_details' })) @@ -59,156 +47,35 @@ const ItemCategoryList = ({ requestFetchItemCategories(), ); - const fetchResourceFields = useQuery( - ['resource-fields', 'item_category'], - (key, resourceName) => requestFetchResourceFields(resourceName), - ); - const handleFilterChanged = useCallback(() => {}, []); // Handle selected rows change. - const handleSelectedRowsChange = useCallback( - (itemCategories) => { - setSelectedRows(itemCategories); - }, - [setSelectedRows], - ); - - const handleFetchData = useCallback( - ({ pageIndex, pageSize, sortBy }) => { - const page = pageIndex + 1; - - addItemCategoriesTableQueries({ - ...(sortBy.length > 0 - ? { - column_sort_by: sortBy[0].id, - sort_order: sortBy[0].desc ? 'desc' : 'asc', - } - : {}), - page_size: pageSize, - page, - }); - }, - [addItemCategoriesTableQueries], - ); - - const handleDeleteCategory = (itemCategory) => { - setDeleteCategory(itemCategory); - }; - const handleCancelItemDelete = () => { - setDeleteCategory(false); + const handleSelectedRowsChange = (selectedRows) => { + const selectedRowsIds = selectedRows.map((r) => r.id); + setSelectedRowsCategories(selectedRowsIds); }; - // Handle alert confirm delete item category. - const handleConfirmItemDelete = () => { - requestDeleteItemCategory(deleteCategory.id) - .then(() => { - setDeleteCategory(false); - AppToaster.show({ - message: formatMessage({ - id: 'the_item_category_has_been_deleted_successfully', - }), - intent: Intent.SUCCESS, - }); - }) - .catch(() => { - setDeleteCategory(false); - }); + // Handle delete Item. + const handleDeleteCategory = ({ id }) => { + openAlert('item-category-delete', { itemCategoryId: id }); }; + // Handle Edit item category. const handleEditCategory = (category) => { openDialog('item-category-form', { action: 'edit', id: category.id }); }; - // Handle itemCategories bulk delete. - const handleBulkDelete = useCallback( - (itemsCategoriesIds) => { - setBulkDelete(itemsCategoriesIds); - }, - [setBulkDelete], - ); - - // handle confirm itemCategories bulk delete. - const handleConfirmBulkDelete = useCallback(() => { - requestDeleteBulkItemCategories(bulkDelete) - .then(() => { - setBulkDelete(false); - AppToaster.show({ - message: formatMessage({ - id: 'the_item_categories_has_been_deleted_successfully', - }), - intent: Intent.SUCCESS, - }); - }) - .catch((errors) => { - setBulkDelete(false); - }); - }, [requestDeleteBulkItemCategories, bulkDelete, formatMessage]); - - //Handel cancel itemCategories bulk delete. - const handleCancelBulkDelete = useCallback(() => { - setBulkDelete(false); - }, []); - - // Calculates the data table selected rows count. - const selectedRowsCount = useMemo(() => Object.values(selectedRows).length, [ - selectedRows, - ]); - return ( - - + + - - } - confirmButtonText={} - icon="trash" - intent={Intent.DANGER} - isOpen={deleteCategory} - onCancel={handleCancelItemDelete} - onConfirm={handleConfirmItemDelete} - > -

- -

-
- - } - confirmButtonText={`${formatMessage({ - id: 'delete', - })} (${selectedRowsCount})`} - icon="trash" - intent={Intent.DANGER} - isOpen={bulkDelete} - onCancel={handleCancelBulkDelete} - onConfirm={handleConfirmBulkDelete} - > -

- -

-
+
); }; @@ -217,5 +84,5 @@ export default compose( withItemCategoriesActions, withDashboardActions, withDialogActions, - withResourceActions, + withAlertsActions, )(ItemCategoryList); diff --git a/client/src/containers/Items/ItemCategoriesTable.js b/client/src/containers/Items/ItemCategoriesTable.js index bb72d24be..2933ff1ff 100644 --- a/client/src/containers/Items/ItemCategoriesTable.js +++ b/client/src/containers/Items/ItemCategoriesTable.js @@ -14,6 +14,7 @@ import classNames from 'classnames'; import Icon from 'components/Icon'; import LoadingIndicator from 'components/LoadingIndicator'; import { compose } from 'utils'; +import { useIsValuePassed } from 'hooks'; import DataTable from 'components/DataTable'; import { CLASSES } from 'common/classes'; @@ -32,10 +33,10 @@ const ItemsCategoryList = ({ // #ownProps onFetchData, onDeleteCategory, - onEditCategory, onSelectedRowsChange, }) => { const { formatMessage } = useIntl(); + const isLoadedBefore = useIsValuePassed(categoriesTableLoading, false); const handelEditCategory = useCallback( (category) => () => { @@ -143,7 +144,10 @@ const ItemsCategoryList = ({ return (
- + diff --git a/client/src/containers/Items/ItemsActionsBar.js b/client/src/containers/Items/ItemsActionsBar.js index 2e4897c37..33c159e87 100644 --- a/client/src/containers/Items/ItemsActionsBar.js +++ b/client/src/containers/Items/ItemsActionsBar.js @@ -22,6 +22,7 @@ import { If, DashboardActionViewsList } from 'components'; import withResourceDetail from 'containers/Resources/withResourceDetails'; import withItems from 'containers/Items/withItems'; import withItemsActions from './withItemsActions'; +import withAlertActions from 'containers/Alert/withAlertActions'; import { compose } from 'utils'; import { connect } from 'react-redux'; @@ -32,27 +33,23 @@ const ItemsActionsBar = ({ // #withItems itemsViews, + itemsSelectedRows, //#withItemActions addItemsTableQueries, changeItemsCurrentView, + // #withAlertActions + openAlert, onFilterChanged, - selectedRows = [], - onBulkDelete, }) => { const { formatMessage } = useIntl(); const history = useHistory(); - const [filterCount, setFilterCount] = useState(0); const onClickNewItem = useCallback(() => { history.push('/items/new'); }, [history]); - const hasSelectedRows = useMemo(() => selectedRows.length > 0, [ - selectedRows, - ]); - const filterDropdown = FilterDropdown({ fields: resourceFields, initialCondition: { @@ -68,10 +65,6 @@ const ItemsActionsBar = ({ }, }); - const handleBulkDelete = useCallback(() => { - onBulkDelete && onBulkDelete(selectedRows.map((r) => r.id)); - }, [onBulkDelete, selectedRows]); - const handleTabChange = (viewId) => { changeItemsCurrentView(viewId.id || -1); addItemsTableQueries({ @@ -79,6 +72,11 @@ const ItemsActionsBar = ({ }); }; + // Handle cancel/confirm items bulk. + const handleBulkDelete = () => { + openAlert('items-bulk-delete', { itemsIds: itemsSelectedRows }); + }; + return ( @@ -105,18 +103,12 @@ const ItemsActionsBar = ({ >